fix weui_select arrow align & weui_msg gap & weui_vcode align

Tencent · Oct 10, 2015 · 59d8fd5 · 59d8fd5
2 parents 665610d + f8f31aa
commit 59d8fd5
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 17 deletions.
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -3,10 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
-    <title>微信Web+</title>
+    <title>WeUI</title>
     <link rel="stylesheet" href="../style/weui.css"/>
     <link rel="stylesheet" href="./example.css"/>
-    <link rel="stylesheet" href=""/>
 </head>
 <body ontouchstart>
     <div class="container js_container">
@@ -261,6 +260,22 @@ <h1 class="page_title">Cell</h1>
                             <img src="./images/vcode.jpg" />
                         </div>
                     </div>
+                    <div class="weui_cell">
+                        <div class="weui_cell_hd"><label class="weui_label">银行卡</label></div>
+                        <div class="weui_cell_bd weui_cell_primary">
+                            <input class="weui_input" type="text" placeholder="请输入银行卡号"/>
+                        </div>
+                    </div>
+                    <div class="weui_cell weui_vcode weui_cell_warn">
+                        <div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
+                        <div class="weui_cell_bd weui_cell_primary">
+                            <input class="weui_input" type="text" placeholder="请输入验证码"/>
+                        </div>
+                        <div class="weui_cell_ft weui_vimg_wrp">
+                            <i class="weui_icon_warn"></i>
+                            <img src="./images/vcode.jpg" />
+                        </div>
+                    </div>
                 </div>
                 <div class="weui_cells_title">文本域</div>
                 <div class="weui_cells weui_cells_form">

diff --git a/dist/style/weui.css b/dist/style/weui.css
@@ -499,6 +499,9 @@ input.weui_btn_mini {
 .weui_cells_form .weui_cell_hd {
   padding-right: 1em;
 }
+.weui_cells_form .weui_cell_ft {
+  font-size: 0;
+}
 .weui_cells_form .weui_icon_warn {
   display: none;
 }
@@ -508,11 +511,23 @@ input.weui_btn_mini {
 .weui_cell_select .weui_select {
   padding-right: 30px;
 }
-.weui_cell_select .weui_access_icon {
+.weui_cell_select .weui_cell_bd:after {
+  content: " ";
+  display: inline-block;
+  -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+          transform: rotate(45deg);
+  height: 6px;
+  width: 6px;
+  border-width: 2px 2px 0 0;
+  border-color: #C8C8CD;
+  border-style: solid;
+  position: relative;
+  top: -2px;
   position: absolute;
   top: 50%;
   right: 15px;
-  margin-top: -12px;
+  margin-top: -3px;
 }
 .weui_select {
   -webkit-appearance: none;
@@ -550,9 +565,30 @@ input.weui_btn_mini {
       -ms-transform: scaleX(0.5);
           transform: scaleX(0.5);
 }
+.weui_select_before .weui_cell_hd:before {
+  content: " ";
+  display: inline-block;
+  -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+          transform: rotate(45deg);
+  height: 6px;
+  width: 6px;
+  border-width: 2px 2px 0 0;
+  border-color: #C8C8CD;
+  border-style: solid;
+  position: relative;
+  top: -2px;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -3px;
+}
 .weui_select_before .weui_cell_bd {
   padding-left: 15px;
 }
+.weui_select_before .weui_cell_bd:after {
+  display: none;
+}
 .weui_select_after {
   padding-left: 15px;
 }
@@ -566,16 +602,19 @@ input.weui_btn_mini {
 }
 .weui_vcode .weui_vimg_wrp img {
   height: 43px;
+  vertical-align: middle;
+  margin-left: 5px;
 }
 .weui_msg {
-  padding: 75px 15px 0;
+  padding: 75px 0 0;
   text-align: center;
 }
 .weui_msg .weui_icon_area {
   margin-bottom: 19px;
 }
 .weui_msg .weui_text_area {
   margin-bottom: 25px;
+  padding: 0 15px;
 }
 .weui_msg .weui_msg_title {
   margin-bottom: 12px;
@@ -598,7 +637,7 @@ input.weui_btn_mini {
 }
 @media screen and (max-height: 416px) {
   .weui_msg {
-    padding: 45px 15px 0;
+    padding: 45px 0 0;
   }
 }
 @media screen and (min-height: 416px) {

diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/src/example/index.html b/src/example/index.html
@@ -3,10 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
-    <title>微信Web+</title>
+    <title>WeUI</title>
     <link rel="stylesheet" href="../style/weui.css"/>
     <link rel="stylesheet" href="./example.css"/>
-    <link rel="stylesheet" href=""/>
 </head>
 <body ontouchstart>
     <div class="container js_container">
@@ -261,6 +260,22 @@ <h1 class="page_title">Cell</h1>
                             <img src="./images/vcode.jpg" />
                         </div>
                     </div>
+                    <div class="weui_cell">
+                        <div class="weui_cell_hd"><label class="weui_label">银行卡</label></div>
+                        <div class="weui_cell_bd weui_cell_primary">
+                            <input class="weui_input" type="text" placeholder="请输入银行卡号"/>
+                        </div>
+                    </div>
+                    <div class="weui_cell weui_vcode weui_cell_warn">
+                        <div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
+                        <div class="weui_cell_bd weui_cell_primary">
+                            <input class="weui_input" type="text" placeholder="请输入验证码"/>
+                        </div>
+                        <div class="weui_cell_ft weui_vimg_wrp">
+                            <i class="weui_icon_warn"></i>
+                            <img src="./images/vcode.jpg" />
+                        </div>
+                    </div>
                 </div>
                 <div class="weui_cells_title">文本域</div>
                 <div class="weui_cells weui_cells_form">

diff --git a/src/style/base/variable/weui_msg.less b/src/style/base/variable/weui_msg.less
@@ -1,5 +1,5 @@
-@weuiMsgPadding:75px 15px 0;
-@weuiMsgSmallPadding: 45px 15px 0;
+@weuiMsgPadding:75px 0 0;
+@weuiMsgSmallPadding: 45px 0 0;
 @weuiMsgIconGap:19px;
 @weuiMsgTextGap:25px;
 @weuiMsgTitleGap:12px;

diff --git a/src/style/weui.less b/src/style/weui.less
@@ -1,5 +1,6 @@
 @import "./base/reset";
 
+
 // icon font
 @import "./icon/weui_icon_font";
 

diff --git a/src/style/widget/weui_cell/weui_form/weui_form_common.less b/src/style/widget/weui_cell/weui_form/weui_form_common.less
@@ -42,5 +42,8 @@
     .weui_cell_hd {
         padding-right: 1em;
     }
-    .weui_icon_warn{display:none;}
+    .weui_cell_ft{font-size:0;}
+    .weui_icon_warn{
+        display:none;
+    }
 }
diff --git a/src/style/widget/weui_cell/weui_form/weui_select.less b/src/style/widget/weui_cell/weui_form/weui_select.less
@@ -1,15 +1,24 @@
 @import "../../../../style/base/fn";
 
+
 .weui_cell_select {
     padding: 0;
     .weui_select {
         padding-right: 30px;
     }
     .weui_access_icon {
-        position: absolute;
-        top: 50%;
-        right: @weuiCellGapH;
-        margin-top: -12px;
+
+    }
+    .weui_cell_bd{
+        &:after{
+            content: " ";
+            .setArrow_Wap(right, 6px, #C8C8CD, 2px);
+
+            position: absolute;
+            top: 50%;
+            right: @weuiCellGapH;
+            margin-top: -3px;
+        }
     }
 }
 

diff --git a/src/style/widget/weui_cell/weui_form/weui_select_before.less b/src/style/widget/weui_cell/weui_form/weui_select_before.less
@@ -9,8 +9,20 @@
         &:after {
             .setRightLine(@weuiCellBorderColor);
         }
+        &:before{
+            content: " ";
+            .setArrow_Wap(right, 6px, #C8C8CD, 2px);
+
+            position: absolute;
+            top: 50%;
+            right: @weuiCellGapH;
+            margin-top: -3px;
+        }
     }
     .weui_cell_bd {
         padding-left:@weuiCellGapH;
+        &:after{
+            display:none;
+        }
     }
 }
diff --git a/src/style/widget/weui_cell/weui_form/weui_vcode.less b/src/style/widget/weui_cell/weui_form/weui_vcode.less
@@ -7,7 +7,7 @@
     .weui_vimg_wrp {
         font-size: 0; // 去掉img下的一些空白
         img {
-            height: 43px;
+            height: 43px;vertical-align:middle;margin-left:5px;
         }
     }
 }
diff --git a/src/style/widget/weui_page/weui_msg.less b/src/style/widget/weui_page/weui_msg.less
@@ -11,6 +11,7 @@
 
     .weui_text_area {
         margin-bottom: @weuiMsgTextGap;
+        padding:0 15px;
     }
     .weui_msg_title {
         margin-bottom: @weuiMsgTitleGap;