样式调整

src/views/login/index.vue

@@ -12,7 +12,7 @@
             <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">
-            <van-checkbox v-model="checked" shape="square">下次自动登录</van-checkbox>
+            <van-checkbox v-model="autoLogin" shape="square">下次自动登录</van-checkbox>
             <span class="text-blue">忘记密码?</span>
         </div>
     </div>
@@ -26,7 +26,7 @@ export default {
         return {
             phone: null,
             password: null,
-            checked: false,
+            autoLogin: false,
             pubKey: null,//公钥
             customerId: null,//客户id
         };

src/views/mine/index.vue

@@ -1,7 +1,6 @@
 <template>
     <div class='pages'>
         <div class="heard">
-            <div class="my_top"></div>
             <div class="my_info">
                 <div class="my_left">
                     <img src="@/assets/images/logo.png" class="my_img">
@@ -20,29 +19,45 @@
                     <div class="z_right"><img src="@/assets/images/icon/right.png" class="z_img"></div>
                 </div>
             </div>
-
+        </div>
+        <div style="position: fixed; bottom:41px;width: 100%;margin: 0 auto;">
+            <van-button type="info" round block style="width: calc(100% - 60px);margin: 0 auto;"
+                @click="hadnelClicklogOut">退出登录</van-button>
         </div>
     </div>
 </template>
 
 <script>
 import { getUserInfo } from '@/api/user'
+import { Dialog } from 'vant';
 export default {
     data() {
         return {
-            
+            show:false,
         };
     },
     created() {
         this.getUserInfo()
     },
     methods: {
-        async getUserInfo(){
+        async getUserInfo() {
-            let {data,code,msg} = await getUserInfo()
+            let { data, code, msg } = await getUserInfo()
-            if(code == 0){
+            if (code == 0) {
                 console.log(data);
             }
-        }
+        },
+        hadnelClicklogOut() {
+            Dialog.confirm({
+            title: '标题',
+            message: '弹窗内容',
+            }).then(() => {
+                localStorage.removeItem('token')
+                this.$router.replace('/')
+            }).catch(()=>{
+
+            });
+        },
+      
     },
     components: {},
     computed: {},
@@ -55,66 +70,73 @@ export default {
     width: 100%;
     height: 100vh;
     background-color: #f7f7f7;
-}.heard {
+}
+
+.heard {
     width: 100%;
-    height: 35vh;
+    height:20vh;
     background: linear-gradient(to bottom,
             #87BBFF 0%,
-    rgb(255, 255, 255) 100%);
+            #fffffb 100%);
+    padding-top: 35px;
 }
 
-.my_top {
+.my_img {
-    display: flex;
+    width: 60px;
-    justify-content: center;
-    align-items: center;
-    padding-top: 30px;
-}
-.my_img{
-    width:60px;
     border-radius: 50%;
 }
-.my_info{
+
+.my_info {
     display: flex;
-    margin: 20px 10px 0;
+    margin: 0 10px;
 }
-.my_right{
+
+.my_right {
     margin-left: 10px;
 }
-.mmm{
+
+.mmm {
     display: flex;
 
 }
-.my_name{
+
+.my_name {
     font-size: 18px;
     margin-right: 5px;
 }
-.intro{
+
+.intro {
     opacity: 80%;
     // margin-top: 14px;
 }
-.details{
+
+.details {
     margin-top: 13px;
     font-size: 13px;
     opacity: 50%;
 }
 
-.my_card{
+.my_card {
     background: #ffffff;
-    width:calc(100% - 20px);
+    width: calc(100% - 20px);
     height: 50px;
     border-radius: 10px;
     margin: 23px 10px 0;
+    box-shadow: 0px 2px 13px 0px rgba(227,227,227,0.47);
 }
-.my_zzz{
+
+.my_zzz {
     display: flex;
     height: 100%;
     align-items: center;
 }
-.z_img{
+
+.z_img {
     width: 20px;
     margin-right: 10px;
 
 }
+
 .z_left {
     display: flex;
     height: 100%;
@@ -122,7 +144,8 @@ export default {
     margin-left: 10px;
 
 }
-.z_right{
+
+.z_right {
     display: flex;
     justify-content: center;
     align-items: center;