Flag:解决样式难题

n3e97 · Dec 5, 2018 · 74ee8c2 · 74ee8c2
1 parent 127ff10
commit 74ee8c2
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 88 deletions.
diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
@@ -29,6 +29,7 @@ body {
 // 宽度还得自己设定，坑死
 .el-menu {
   width: 100%;
+  border-right: none!important;
 }
 .el-menu-item [class^='el-icon-'] {
   vertical-align: middle;

diff --git a/src/mock/index.js b/src/mock/index.js
@@ -1,54 +1,62 @@
-import Mock from 'mockjs'
+import Mock from "mockjs";
 let debug = 1;
 if (debug) {
-    Mock.mock(/login/, {
-        "data": {
-            userId: "@integer(1,10)",
-            "userName|1": ["鲁班七号", "后裔", "蔡文姬", "王昭君", "妲己", "铠"],
-            token: '@string(30)'
+  Mock.mock(/login/, {
+    data: {
+      userId: "@integer(1,10)",
+      "userName|1": ["鲁班七号", "夏侯惇", "蔡文姬", "王昭君", "妲己"],
+      token: "@string(30)"
+    },
+    msg: "Success",
+    status: "YQ-000"
+  });
+  Mock.mock(/getMenu/, {
+    data: {
+      menu: [
+        {
+          name: "项目管理",
+          name_en: "Projects",
+          router: "/",
+          icon: "el-icon-time",
+          children: [
+            {
+              name: "开发备忘",
+              name_en: "Notes",
+              router: "/notes",
+              icon: "el-icon-date"
+            },
+            {
+              name: "关于作者",
+              name_en: "About",
+              router: "/about",
+              icon: "el-icon-document"
+            }
+          ]
         },
-        "msg": "Success",
-        "status": "YQ-000"
-    })
-    Mock.mock(/getMenu/, {
-        "data": {
-            menu: [{
-                name: '项目管理',
-                name_en: 'Projects',
-                router: '',
-                icon: 'el-icon-time',
-                children: [{
-                    name: '开发备忘',
-                    name_en: 'Notes',
-                    router: '/project-info',
-                    icon: 'el-icon-date'
-                }, {
-                    name: '关于作者',
-                    name_en: 'About',
-                    router: '/enroll-list',
-                    icon: 'el-icon-document'
-                }]
-            }, {
-                name: '天气预报',
-                name_en: 'Weather',
-                router: '/weather',
-                icon: 'el-icon-picture-outline',
-                children: []
-            }, {
-                name: '魔幻立方',
-                name_en: 'Cube',
-                router: '/cube',
-                icon: 'el-icon-menu',
-                children: []
-            }, {
-                name: '权限测试',
-                name_en: 'Authority',
-                router: '/authority-test',
-                icon: 'el-icon-setting',
-                children: []
-            }]
+        {
+          name: "天气预报",
+          name_en: "Weather",
+          router: "/weather",
+          icon: "el-icon-picture-outline",
+          children: []
         },
-        "msg": "Success",
-        "status": "YQ-000"
-    })
-}
+        {
+          name: "魔幻立方",
+          name_en: "Cube",
+          router: "/cube",
+          icon: "el-icon-menu",
+          children: []
+        },
+        {
+          name: "权限测试",
+          name_en: "Authority",
+          router: "/authority",
+          icon: "el-icon-setting",
+          children: []
+        }
+      ]
+    },
+    msg: "Success",
+    status: "YQ-000"
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
@@ -42,15 +42,15 @@ const router = new Router({
                 requireAuth: true
             },
             component: Layout,
-            // redirect: '/project-info', // 重定向到第一个子路由，否则只渲染Layout组件，这块儿使用时解除注释
+            // redirect: '/notes', // 重定向到第一个子路由，否则只渲染Layout组件，这块儿使用时解除注释
             redirect: '/signin', // 这里重定向到登录页面，是为了展示使用，实际用这个项目开发时，需要注释这行，解除上一行的注释
             children: [{
-                    path: 'project-info',
+                    path: 'notes',
                     meta: { requireAuth: true },
                     component: ProjectInfo
                 },
                 {
-                    path: 'enroll-list',
+                    path: 'about',
                     meta: { requireAuth: true },
                     component: About
                 },
@@ -65,7 +65,7 @@ const router = new Router({
                     component: Cube
                 },
                 {
-                    path: 'authority-test',
+                    path: 'authority',
                     meta: { requireAuth: true },
                     component: AuthorityTest
                 }
@@ -84,7 +84,7 @@ const router = new Router({
 router.beforeEach((to, from, next) => {
     // 如果已经登录，并且要去登录页，就不让TA去登录页，重定向到首页
     if (to.path === '/signin' && localStorage.token) {
-        next('/project-info')
+        next('/notes')
     } else {
         next()
     }

diff --git a/src/views/AuthorityTest/index.vue b/src/views/AuthorityTest/index.vue
@@ -23,7 +23,7 @@ export default {
       menu[0].children.push({
         name: "关于作者",
         name_en: 'About',
-        router: "/enroll-list",
+        router: "/about",
         icon: "el-icon-document"
       });
       localStorage.menu = JSON.stringify(menu);

diff --git a/src/views/ProjectInfo/index.vue b/src/views/ProjectInfo/index.vue
@@ -1,46 +1,48 @@
 <template>
-    <div v-title="'项目信息'">
-        <el-card class="box-card">
-            <div slot="header" class="clearfix">
-                <i class="el-icon-edit"></i>&nbsp;&nbsp;
-                <span>Vue开发备忘录</span>
-            </div>
-            <div class="text item">
-                <ol>
-                    <li v-for="(str,index) in notes" :key="index">{{str}}</li>
-                </ol>
-            </div>
-        </el-card>
-
-    </div>
+  <div v-title="'项目信息'">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <i class="el-icon-edit"></i>&nbsp;&nbsp;
+        <span>Vue开发备忘录</span>
+      </div>
+      <div class="text item">
+        <ol>
+          <li v-for="(str,index) in notes" :key="index">{{str}}</li>
+        </ol>
+      </div>
+    </el-card>
+  </div>
 </template>
 <script>
 export default {
   name: "projectinfo",
   data() {
     return {
-        notes: [
-            'Axios不支持JSONP，需要另外安装jsonp模块实现',
-            '如果需要动态生成路由，可以使用router.addRoutes(routes)',
-            '如果要区分新建页和编辑页，可以在路由对象中设置meta属性',
-            '在组件中访问路由信息对象：this.$route',
-            '在组件中访问路由实例：this.$router',
-            '可以在全局拦截路由，也可以在单个组件中拦截路由',
-            '如果是中等规模的项目，推荐使用vuex',
-            '代码按页面分，每个人负责一个页面，尽量避免公共代码文件',
-            '如果想看其它队友的页面效果，可以在本地新建一个分支，然后将自己和对方的分支合并上去',
-            '深度监听一个对象非常消耗性能，可以转换成监听一个开关变量，开关一变就运行',
-            '渲染图表时，可以在渲染前先 this.myChart.dispose()，销毁上次的图表',
-            'vue-particles打包报错：https://github.com/creotip/vue-particles/issues/7',
-            '配置favicon：https://segmentfault.com/a/1190000010043013#articleHeader5',
-            '切换路由时，vuex里的state不会跟着变，除非在导航守卫里提交mutations',
-        ]
+      notes: [
+        "Axios不支持JSONP，需要另外安装jsonp模块实现",
+        "如果需要动态生成路由，可以使用router.addRoutes(routes)",
+        "如果要区分新建页和编辑页，可以在路由对象中设置meta属性",
+        "在组件中访问路由信息对象：this.$route",
+        "在组件中访问路由实例：this.$router",
+        "可以在全局拦截路由，也可以在单个组件中拦截路由",
+        "如果是中等规模的项目，推荐使用vuex",
+        "代码按页面分，每个人负责一个页面，尽量避免公共代码文件",
+        "如果想看其它队友的页面效果，可以在本地新建一个分支，然后将自己和对方的分支合并上去",
+        "深度监听一个对象非常消耗性能，可以转换成监听一个开关变量，开关一变就运行",
+        "渲染图表时，可以在渲染前先 this.myChart.dispose()，销毁上次的图表",
+        "vue-particles打包报错：https://github.com/creotip/vue-particles/issues/7",
+        "配置favicon：https://segmentfault.com/a/1190000010043013#articleHeader5",
+        "切换路由时，vuex里的state不会跟着变，除非在导航守卫里提交mutations"
+      ]
     };
   }
 };
 </script>
 <style scoped lang="scss">
-li {
+ol {
+  margin-top: 0;
+  li {
     line-height: 30px;
+  }
 }
 </style>
diff --git a/src/views/Signin/index.vue b/src/views/Signin/index.vue
@@ -126,7 +126,7 @@ export default {
         // 提取菜单数组，交给本地存储
         let menu = res.data.data.menu;
         localStorage.menu = JSON.stringify(menu);
-        this.$router.push("project-info");
+        this.$router.push("notes");
       });
     },
     openMsg() {