登录问题

src/App.vue

@@ -36,13 +36,15 @@ body {
   -webkit-text-size-adjust: 100%;
   height: 100%;
 }
-
+h1{
+  margin: 0;
+  padding: 0;
+}
 #app {
   font-family: Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   height: 100%;
-  padding-bottom: 50px;
 }
 </style>

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "@/views/Home.vue";
+import Home from "@/views/home/index.vue";
 import Mall from "@/views/Mall.vue";
 import Dynamic from "@/views/Dynamic.vue";
 import Profile from "@/views/Profile.vue";
@@ -56,11 +56,6 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "forget" */ "../views/forget.vue")
   },
-  {
-    path: "/muchList",
-    name: "muchList",
-    component: () => import(/* webpackChunkName: "muchList" */ "../views/home/list")
-  }
 ];
 
 const router = new VueRouter({

src/views/Profile.vue

@@ -29,18 +29,30 @@
           <i class="iconfont icon-settings"></i>
           <span>设置</span>
         </div>
+        <div class="menu-item" @click="logOut">
+          <i class="iconfont icon-settings"></i>
+          <span>退出登录</span>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
-  name: 'Profile',
+  name: 'Profile', 
+  computed: {
+    ...mapGetters(["user"])
+  },
   methods: {
     goToDetail() {
       this.$router.push('/profile/detail')
-    }
+    },
+    logOut() {
+      this.$store.dispatch("Logout");
+      this.$router.replace("login");
+    },
   }
 }
 </script>

src/views/home/index.vue

@@ -1,48 +1,59 @@
 <template>
-  <div>
-    <h3 class="login-out" @click="logOut">退出</h3>
+  <div class="home">
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
+    <h1>2222222222</h1>
   </div>
 </template>
 <script>
-import { mapGetters } from "vuex";
 export default {
   
   data() {
     return {
     };
   },
-  computed: {
-    ...mapGetters(["user"])
-  },
+ 
   methods: {
-    logOut() {
-      this.$store.dispatch("Logout");
-      this.$router.replace("login");
-    },
+   
     
   }
 };
 </script>
-<style>
-@import url("../../components/watch-login/css/icon.css");
-@import url("../../assets/css/main.css");
-.flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.flex-col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.mtb-20 {
-  margin: 20px 0;
-}
-.login-out {
-  position: fixed;
-  top: 10px;
-  right: 20px;
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  background: url('~@/assets/dabag.png') no-repeat center center;
+  background-size: 100% 100%;
+  background-position: center;
 }
 </style>

src/views/home/list.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="container">
-    <div class="header">
-      <img src="@/assets/logo-home.png" />
-    </div>
-    <div class="flex">用户名：{{ user.userName }}</div>
-    <vitualList class="flex-1" style="height:100%" :list="list"></vitualList>
-    <!--  <div class="mtb-20"
-           v-for="item in list"
-           :key="item.id">
-        <img :src="item.img" />
-        <div>{{ item.name }}</div>
-      </div> -->
-  </div>
-</template>
-<script>
-import { getMuchList } from '@/api/login.js';
-import { mapGetters } from 'vuex';
-import vitualList from '@/components/vitualList/index';
-export default {
-  components: {
-    vitualList
-  },
-  data() {
-    return {
-      list: [],
-      queryParams: { page: 1, size: 5 },
-      loading: false,
-      finished: false
-    };
-  },
-  computed: {
-    ...mapGetters(['user'])
-  },
-  methods: {
-    async getList() {
-      let res = await getMuchList();
-      this.list = res.data.slice(0,20);
-    }
-  },
-  mounted() {
-    this.getList();
-  }
-};
-</script>
-<style>
-@import url('../../assets/css/main.css');
-
-.container{
-  height: 100%;
-}
-.flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.flex-col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.mtb-20 {
-  margin: 20px 0;
-}
-.login-out {
-  position: fixed;
-  top: 10px;
-  right: 20px;
-}
-</style>