添加登录记住密码功能及优化top信息显示

src/components/TopBar.vue

@@ -168,7 +168,7 @@ export default {
 .top-bar {
   height: 300px;
   width: 100%;
-  background: url('../assets/img/banner.png') no-repeat center;
+  background: url('../assets/img/banner.png') no-repeat center rgba(255,255,255,.1);
   background-size: 100% 100%;
   padding: 40px 40px 20px 40px;
   text-shadow: 0 1px 3px #666;

src/views/login.vue

@@ -20,10 +20,13 @@
           placeholder="请输入密码"
           :rules="[{ required: true, message: '请输入密码' }]"
         />
-        <van-cell value="忘记密码">
+        <van-cell>
           <!-- 使用 title 插槽来自定义标题 -->
           <template #title>
+            <p class="check-box">
               <van-checkbox class="custom-title" icon-size="15" v-model="checked" shape="square">记住密码</van-checkbox>
+              <router-link style="color:#1989fa" to="#"> 忘记密码 </router-link>
+            </p>
           </template>
         </van-cell>
 <!--        <div>-->
@@ -54,15 +57,24 @@ export default {
       checked:false
     }
   },
-  computed: {
-    ...mapGetters(['userName'])
-  },
   mounted() {
-
+    let checked = localStorage.getItem('checked');
+    if(checked){
+      this.checked = checked;
+      this.formData.username = localStorage.getItem('username');
+      this.formData.password = localStorage.getItem('password');
+    }
   },
   methods: {
     onSubmit(){
       login(this.formData).then(res => {
+        if(this.checked){
+           localStorage.setItem('username',this.formData.username);
+           localStorage.setItem('password',this.formData.password);
+           localStorage.setItem('checked',this.checked);
+        }else {
+          localStorage.clear();
+        }
         console.log(res,'res')
         sessionStorage.setItem('access_token',res.data.access_token);
         this.$router.replace('/home');
@@ -110,6 +122,11 @@ export default {
     letter-spacing: 10px;
     text-align: center;
   }
+  .check-box{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
   .custom-title {
     align-self: center;
     vertical-align: middle;