登录样式修改

src/assets/css/common.less

@@ -90,6 +90,9 @@
 .font-size13{
   font-size: 13px;
 }
+.font-size17{
+  font-size: 17px;
+}
 .tag-date{
   margin: 0 10px;
 }
@@ -139,3 +142,6 @@
   top: 0;
   color: red;
 }
+.text-center{
+  text-align: center;
+}

src/views/login/index.vue

@@ -1,20 +1,46 @@
 <template>
-    <div class='login'>
+    <div class="login flex flex-center2 felx-center1">
-        <van-form @submit="handelCLickLogin">
+        <img class="letf_top" src="@/assets/images/login/left_top.png" />
-            <div class="card">
+        <div class='form'>
-                <van-cell-group inset>
+            <div class="title flex">
-                    <van-field v-model="phone" label="手机号" type="tel" placeholder="请输入手机号" @blur="handelBlurPhone"  :rules="[{ required: true }]"/>
+                <p>欢迎来到e联社区！</p>
-                </van-cell-group>
+                <img src="@/assets/images/login/right.png" alt="">
-                <van-cell-group inset>
+            </div>
-                    <van-field v-model="password" label="密码" type="password" placeholder="请输入密码" :rules="[{ required: true}]"/>
+            <div class="form_bg">
-                </van-cell-group>
+                <div class="flex">
+                    <p class="text-center font-size17" style="width: 50%;">密码登录</p>
+                    <p style="width: 50%;"></p>
+                </div>
+                <van-form @submit="handelCLickLogin">
+                    <div class="">
+                        <van-cell-group inset :border="false">
+                            <van-field v-model="phone" label="手机号" type="tel" placeholder="请输入手机号"
+                                @blur="handelBlurPhone" :rules="[{ required: true }]">
+                                <template #label>
+                                    <img src="@/assets/images/login/user.png" style="width: 23px;height: 23px;" alt="">
+                                </template>
+                            </van-field>
+                        </van-cell-group>
+                        <van-cell-group inset>
+                            <van-field v-model="password" label="密码" type="password" placeholder="请输入密码"
+                                :rules="[{ required: true }]">
+                                <template #label>
+                                    <img src="@/assets/images/login/password.png" style="width: 23px;height: 23px;"
+                                        alt="">
+                                </template>
+                            </van-field>
+                        </van-cell-group>
+                    </div>
+                    <div class="flex flex-end flex-center1 m-top12 p-18 font-size13">
+                        <van-checkbox v-model="autoLogin" shape="square">下次自动登录</van-checkbox>
+                        <span class="text-blue">忘记密码?</span>
+                    </div>
+                    <van-button type="info" round block style="margin: 35px auto 0 auto; width: calc(100% - 30px);"
+                        native-type="submit">登录</van-button>
+                </van-form>
             </div>
-            <van-button type="info" round block style="margin-top: 35px;" native-type="submit">登录</van-button>
-        </van-form>
-        <div class="flex flex-end flex-center1 m-top12 p-18 font-size13">
-            <van-checkbox v-model="autoLogin" shape="square">下次自动登录</van-checkbox>
-            <span class="text-blue">忘记密码?</span>
         </div>
+        <div class="footer_bg"></div>
         <van-dialog v-model="showCustomer" title="" show-cancel-button :before-close="handelCustomerSave">
             <p class="required">选择客户</p>
             <van-radio-group v-model="customerId">
@@ -37,8 +63,8 @@ export default {
             autoLogin: false,
             pubKey: null,//公钥
             customerId: null,//客户id
-            showCustomer:null,
+            showCustomer: null,
-            CustomerList:[],
+            CustomerList: [],
         };
     },
     created() {
@@ -61,25 +87,25 @@ export default {
             }
             let { data, code, msg } = await getCustomerlist(parms)
             if (code === 0) {
-                if(data.length > 1){
+                if (data.length > 1) {
-                this.showCustomer = true;
+                    this.showCustomer = true;
-                this.CustomerList = data;
+                    this.CustomerList = data;
-                }else{
+                } else {
                     this.customerId = data[0].customerId;
                 }
-                
+
             } else {
                 console.log(msg);
             }
         },
-        handelCustomerSave(action,done){
+        handelCustomerSave(action, done) {
             if (action === "confirm") {
                 console.log(this.customerId);
-                    if (!this.customerId) {
+                if (!this.customerId) {
-                        this.$tips.warning('请选择客户')
+                    this.$tips.warning('请选择客户')
-                        return done(false)
+                    return done(false)
-                    }
+                }
-                    done()
+                done()
             }
             else {
                 done(true);
@@ -96,7 +122,7 @@ export default {
             let { data, code, msg } = await login(parms)
             if (code === 0) {
                 localStorage.setItem("token", data.token);
-                this.$router.replace({name:'assistance'})
+                this.$router.replace({ name: 'assistance' })
             } else {
                 console.log(msg);
             }
@@ -110,8 +136,67 @@ export default {
 
 <style lang='less' scoped>
 .login {
+    background: #107bed;
+    position: relative;
+    height: 100vh;
+    padding: 0 25px;
     box-sizing: border-box;
-    width: calc(100% - 20px);
+
-    margin: 10px auto 0;
+    .letf_top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 140px;
+        height: 150px;
+    }
+
+    .form {
+        z-index: 2;
+        .title {
+            img {
+                width: 135px;
+                height: 86px;
+                position: relative;
+                top: -40px;
+            }
+
+            p {
+                color: #ffffff;
+                font-size: 22px;
+                font-family: pingfang-bold;
+            }
+        }
+
+        &_bg {
+            background: url('@/assets/images/login/form_bg.png');
+            background-size: 100% 100%;
+            width: 325px;
+            height: 357px;
+
+            p {
+                font-family: pingfang-bold;
+            }
+        }
+    }
+    .footer_bg{
+        background: url('@/assets/images/login/footer_bg.png') no-repeat;
+        background-size: 100% 100%;
+        width: 375px;
+        height: 202px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+    }
+}
+
+:deep(.van-field__label) {
+    width: 30px;
+}
+
+:deep(.van-cell) {
+    background-color: #f5f5fa;
+    border-radius: 23px;
+    margin-top: 20px;
 }
 </style>

src/views/mine/index.vue

@@ -3,7 +3,7 @@
         <div class="heard">
             <div class="my_info">
                 <div class="my_left">
-                    <img src="@/assets/images/logo.png" class="my_img">
+                    <img src="@/assets/images/user.png" class="my_img">
                 </div>
                 <div class="my_right">
                     <div class="mmm">