完成登录基础样式

components/common/input/src/main.vue

@@ -49,7 +49,7 @@
           @blur="handleBlur"
           @blur="handleBlur"
           :value="value"
           :value="value"
           :placeholder="placeholder"
           :placeholder="placeholder"
-          type="text"
+          :type="inputType"
         >
         >
 
 
 
 
@@ -65,17 +65,18 @@
         :show-ske="false"
         :show-ske="false"
         :font-style="[16,36,500,'#00AAE6','center']"
         :font-style="[16,36,500,'#00AAE6','center']"
         :bg-color-v="commonReturnPrimaryColor(0.2)"
         :bg-color-v="commonReturnPrimaryColor(0.2)"
-        v-if="value"
+        v-if="value && !leftWord"
       >
       >
         <yun-icon name="close1" v-tap="tapClose"  :size="16" color="#00AAE6"></yun-icon>
         <yun-icon name="close1" v-tap="tapClose"  :size="16" color="#00AAE6"></yun-icon>
       </yun-div>
       </yun-div>
 
 
     </yun-div>
     </yun-div>
     <yun-div
     <yun-div
-      v-if="regexAlert"
+      v-if="leftWord"
+      :height-v="46"
       :flex-v="['row','flex-start','center']"
       :flex-v="['row','flex-start','center']"
-      :border-v="[1,'solid','#ff525d','top']"
-
+      :border-v="[1,'solid',borderColor,'top']"
+      bg-color-v="#fff"
     >
     >
       <yun-div
       <yun-div
         :show-ske="false"
         :show-ske="false"
@@ -133,12 +134,17 @@
       placeholder:String,
       placeholder:String,
       validate:{
       validate:{
         type:Array,
         type:Array,
+      },
+      inputType: {
+        type: String,
+        default: 'text'
       }
       }
     },
     },
     data(){
     data(){
       return{
       return{
         regexAlert:false,
         regexAlert:false,
-        alertWord:false
+        alertWord:'',
+        borderColor: '#fff'
       }
       }
     },
     },
 
 
@@ -167,10 +173,11 @@
             if(val.regex.test(value)){
             if(val.regex.test(value)){
               this.regexAlert = false
               this.regexAlert = false
               this.alertWord = '';
               this.alertWord = '';
+              this.borderColor = '#fff'
             }else{
             }else{
               this.regexAlert = true
               this.regexAlert = true
               this.alertWord = val.alertWord;
               this.alertWord = val.alertWord;
-
+              this.borderColor = '#ff525d'
             }
             }
 
 
           })
           })

pages/users/login.vue

 <template>
 <template>
-
+  <yun-slider>
+    <yun-div
+      :width-v="704"
+      :height-v="820"
+      :padding-v="[65,60,72,60]"
+      :margin-v="[0,'auto']"
+      :extend-style="{boxSizing: 'border-box'}"
+      :border-r="[8]"
+      slot="card"
+    >
+      <yun-div
+        :show-ske="false"
+        :margin-v="[0,0,56,0]"
+        :font-style="[32,43,500,'#999','center']"
+      >
+        <span>密码登录</span>
+        <span :style="{margin: commonReturnFlexedLength(18)}">·</span>
+        <span>短信登录</span>
+      </yun-div>
+      <yun-input
+        :width-v="584"
+        :height-v="86"
+        :border-r="[8]"
+        left-word="手机号："
+        v-model="account"
+        :validate="validate"
+      ></yun-input>
+      <yun-div :show-ske="false">
+        <yun-input
+          :width-v="584"
+          :height-v="86"
+          :border-r="[8,0,0,8]"
+          left-word="密码："
+          v-model="password"
+          :validate="validatePassword"
+          :input-type="inputType"
+        ></yun-input>
+        <yun-div
+          :width-v="56"
+          :height-v="86"
+          :border-r="[8]"
+          bg-color-v="#F4F8FA"
+          :extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
+          <yun-icon :name="iconName" size="10" color="#999"></yun-icon>
+        </yun-div>
+      </yun-div>
+      <yun-button :disabled="true" :size="[584,86]" :style="{backgroundColor:commonReturnPrimaryColor(0.2)}">登 录</yun-button>
+      <yun-div
+        :show-ske="false"
+        :margin-v="[25,0,0,0]"
+        :width-v="584"
+        :flex-v="['row','space-between','center']"
+        :font-style="[24,24,500,'#999','left']"
+      >
+        <yun-div :flex-v="['row','space-between','center']">
+          <input id="automatic" type="checkbox" v-model="isSelect">
+          <label for="automatic"></label>
+          <yun-div :margin-v="[0,0,0,16]">下次自动登录</yun-div>
+        </yun-div>
+        <yun-div>忘记密码</yun-div>
+      </yun-div>
+      <yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]">
+        <yun-img :width-v="52" :height-v="52" src="./assets/svg/qq.svg"></yun-img>
+        <yun-img :width-v="52" :height-v="52" src="./assets/svg/wechat.svg"></yun-img>
+        <yun-img :width-v="52" :height-v="52" src="./assets/svg/dingding.svg"></yun-img>
+      </yun-div>
+    </yun-div>
+  </yun-slider>
 </template>
 </template>
 <script>
 <script>
 
 
 
 
 
 
-export default {
+import commonMixin from "../../components/moblie/commonMixin";
 
 
+export default {
+  mixins:[commonMixin],
+  data() {
+    return {
+      account: '',
+      password: '',
+      validate: [
+        {
+          regex: /^1[3456789]\d{9}$/,
+          alertWord: '账号格式错误'
+        }
+      ],
+      validatePassword: [
+        {
+          regex: /^\s$/g,
+          alertWord: '密码不能为空'
+        }
+      ],
+      iconName: 'invisible',
+      inputType: 'password',
+      isSelect: false
+    }
+  }
 
 
 }
 }
 </script>
 </script>
 
 
+<style lang="scss" scoped>
+  #automatic + label {
+    display: inline-block;
+    width: 24*$length;
+    height: 24*$length;
+    cursor: pointer;
+    background-color: #fff;
+    @include border-radius(2*$length);
+    border: 1*$length solid #999;
+    box-sizing: border-box;
+  }
+  #automatic:checked + label::before {
+    display: block;
+    width: 24*$length;
+    height: 24*$length;
+    line-height: 24*$length;
+    content: "\2713";
+    text-align: center;
+    font-size: 12*$length;
+    background-color: #75D098;
+    color: #fff;
+    @include border-radius(2*$length);
+  }
+  #automatic:checked + label {
+    border: none;
+  }
+  input[type=checkbox] {
+    display: none;
+  }
+</style>
+