:zap: 更新依赖版本、修复路由404的情况、优化底层架构

public/index.html

@@ -12,7 +12,7 @@
   <link rel="stylesheet" href="<%= BASE_URL %>cdn/element-ui/2.12.0/theme-chalk/index.css">
   <link rel="stylesheet" href="<%= BASE_URL %>cdn/animate/3.5.2/animate.css">
   <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/1.0.0/index.css">
-  <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.1.5/index.css">
+  <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.2.0/index.css">
   <script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
   <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
   <link rel="icon" href="<%= BASE_URL %>favicon.png">
@@ -101,11 +101,11 @@
 <!-- built files will be auto injected -->
 <script src="<%= BASE_URL %>util/aes.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/vue/2.5.2/vue.min.js" charset="utf-8"></script>
-<script src="<%= BASE_URL %>cdn/vuex/2.4.1/vuex.min.js" charset="utf-8"></script>
+<script src="<%= BASE_URL %>cdn/vuex/3.1.1/vuex.min.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/element-ui/2.12.0/index.js" charset="utf-8"></script>
-<script src="<%= BASE_URL %>cdn/avue/2.1.5/avue.min.js" charset="utf-8"></script>
+<script src="<%= BASE_URL %>cdn/avue/2.2.0/avue.min.js" charset="utf-8"></script>
 </body>
 
 </html>

src/components/basic-block/main.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="basic-block"
+       :style="styleName">
+    <div class="box"
+         :style="boxStyleName">
+      <router-link :to="to">
+        <span v-text="text"></span>
+        <p v-text="dept"></p>
+        <i :class="icon"></i>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'basicBlock',
+  props: {
+    icon: {
+      type: String,
+    },
+    background: {
+      type: String,
+    },
+    to: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    text: {
+      type: String,
+    },
+    dept: {
+      type: String,
+    },
+    time: {
+      type: [Number, String]
+    },
+    gutter: {
+      type: [Number, String],
+      default: 5,
+    },
+    color: {
+      type: String,
+    },
+    width: {
+      type: [Number, String]
+    },
+    height: {
+      type: [Number, String]
+    }
+  },
+  computed: {
+    styleName () {
+      return {
+        animationDelay: `${this.time / 25}s`,
+        width: this.setPx(this.width),
+        height: this.setPx(this.height),
+        margin: this.setPx(this.gutter)
+      }
+    },
+    boxStyleName () {
+      return {
+        backgroundColor: this.color,
+        backgroundImage: `url('${this.background}')`,
+
+      }
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.basic-block {
+  opacity: 0;
+
+  box-sizing: border-box;
+  color: #fff;
+  animation: mymove 1s;
+  animation-fill-mode: forwards;
+  .box {
+    position: relative;
+    box-sizing: border-box;
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    transition: all 1s;
+    background-size: cover;
+    &:hover {
+      transform: rotateY(360deg);
+    }
+  }
+
+  a {
+    color: #fff;
+  }
+  span {
+    display: block;
+    font-size: 16px;
+  }
+  p {
+    width: 80%;
+    font-size: 10px;
+    color: #eee;
+    line-height: 22px;
+  }
+  i {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    font-size: 50px !important ;
+  }
+  @keyframes mymove {
+    from {
+      opacity: 0;
+      transform: scale(0);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+</style>

src/components/basic-container/main.vue

@@ -11,10 +11,25 @@
   export default {
     name: "basicContainer",
     props: {
+      radius: {
+        type: [String, Number],
+        default: 10
+      },
+      background: {
+        type: String
+      },
       block: {
         type: Boolean,
         default: false
       }
+    },
+    computed: {
+      styleName () {
+        return {
+          borderRadius: this.setPx(this.radius),
+          background: this.background,
+        }
+      }
     }
   };
 </script>
@@ -22,7 +37,6 @@
 <style lang="scss">
 .basic-container {
   padding: 10px 6px;
-  border-radius: 10px;
   box-sizing: border-box;
   &--block {
     height: 100%;

src/error.js

@@ -11,7 +11,7 @@ Vue.config.errorHandler = function(err, vm, info) {
         })
         if (process.env.NODE_ENV === 'development') {
             console.group('>>>>>> 错误信息 >>>>>>')
-            console.log(info)
+            console.error(info)
             console.groupEnd();
             console.group('>>>>>> Vue 实例 >>>>>>')
             console.log(vm)
@@ -21,4 +21,4 @@ Vue.config.errorHandler = function(err, vm, info) {
             console.groupEnd();
         }
     })
-}
+}

src/lang/en.js

@@ -52,6 +52,7 @@ export default {
     website: 'website',
     avuexwebsite: 'avuex',
     dashboard: 'dashboard',
+    more: 'more',
     tags: 'tags',
     store: 'store',
     permission: 'permission',
@@ -92,6 +93,7 @@ export default {
     screenfullF: 'exit screenfull',
     screenfull: 'screenfull',
     language: 'language',
+    notice: 'notice',
     theme: 'theme',
     color: 'color'
   },

src/lang/zh.js

@@ -52,6 +52,7 @@ export default {
     website: 'bladex官网',
     avuexwebsite: 'avuex官网',
     dashboard: '首页',
+    more: '更多',
     tags: '标签',
     store: '本地存储',
     api: '全局函数',
@@ -91,6 +92,7 @@ export default {
     screenfullF: '退出全屏',
     screenfull: '全屏',
     language: '中英文',
+    notice: '消息通知',
     theme: '主题',
     color: '换色'
   },

src/main.js

@@ -16,7 +16,7 @@ import {
 } from '@/config/env';
 import i18n from './lang' // Internationalization
 import './styles/common.scss';
-
+import basicBlock from './components/basic-block/main'
 import basicContainer from './components/basic-container/main'
 
 Vue.use(router)
@@ -29,6 +29,7 @@ Vue.use(window.AVUE, {
 })
 //注册全局容器
 Vue.component('basicContainer', basicContainer)
+Vue.component('basicBlock', basicBlock)
 // 加载相关url地址
 Object.keys(urls).forEach(key => {
   Vue.prototype[key] = urls[key];

src/page/index/index.vue

@@ -2,7 +2,7 @@
   <div class="avue-contail" :class="{'avue--collapse':isCollapse}">
     <div class="avue-header">
       <!-- 顶部导航栏 -->
-      <top/>
+      <top ref="top" />
     </div>
     <div class="avue-layout">
       <div class="avue-left">
@@ -43,9 +43,15 @@
     components: {
       top,
       tags,
+      search,
       sidebar
     },
     name: "index",
+    provide () {
+      return {
+        index: this
+      };
+    },
     data() {
       return {
         //搜索控制
@@ -63,7 +69,7 @@
     mounted() {
       this.init();
     },
-    computed: mapGetters(["isLock", "isCollapse", "website"]),
+    computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
     props: [],
     methods: {
       showCollapse() {
@@ -80,12 +86,44 @@
         this.$store.dispatch("FlowRoutes").then(() => {
         });
       },
+      //打开菜单
+      openMenu (item = {}) {
+        this.$store.dispatch("GetMenu", item.id).then(data => {
+          if (data.length !== 0) {
+            this.$router.$avueRouter.formatRoutes(data, true);
+          }
+          //当点击顶部菜单做的事件
+          if (!this.validatenull(item)) {
+            let itemActive = {},
+              childItemActive = 0;
+            //vue-router路由
+            if (item.path) {
+              itemActive = item;
+            } else {
+              if (this.menu[childItemActive].length === 0) {
+                itemActive = this.menu[childItemActive];
+              } else {
+                itemActive = this.menu[childItemActive].children[childItemActive];
+              }
+            }
+            this.$store.commit('SET_MENU_ID', item);
+            this.$router.push({
+              path: this.$router.$avueRouter.getPath({
+                name: itemActive.label,
+                src: itemActive.path
+              }, itemActive.meta)
+            });
+          }
+
+        });
+      },
+      // 定时检测token
       refreshToken() {
         this.refreshTime = setInterval(() => {
           const token = getStore({
             name: "token",
             debug: true
-          });
+          }) || {};
           const date = calcDate(token.datetime, new Date().getTime());
           if (validatenull(date)) return;
           if (date.seconds >= this.website.tokenTime && !this.refreshLock) {

src/page/index/sidebar/index.vue

@@ -28,17 +28,15 @@
   export default {
     name: "sidebar",
     components: {sidebarItem, logo},
+    inject: ["index"],
     data() {
       return {};
     },
     created() {
-      this.$store.dispatch("GetMenu").then(data => {
-        if (data.length === 0) return;
-        this.$router.$avueRouter.formatRoutes(data, true);
-      });
+      this.index.openMenu(this.menuId);
     },
     computed: {
-      ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen"]),
+      ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen", "menuId"]),
       nowTagValue: function () {
         return this.$router.$avueRouter.getValue(this.$route);
       }

src/page/index/top/index.vue

@@ -11,7 +11,7 @@
     <div class="top-bar__title">
       <div class="top-bar__item top-bar__item--show"
            v-if="showMenu">
-        <top-menu></top-menu>
+        <top-menu ref="topMenu"></top-menu>
       </div>
       <span class="top-bar__item"
             v-if="showSearch">
@@ -51,6 +51,13 @@
           <top-theme></top-theme>
         </div>
       </el-tooltip>
+      <el-tooltip effect="dark"
+                  :content="$t('navbar.notice')"
+                  placement="bottom">
+        <div class="top-bar__item top-bar__item--show">
+          <top-notice></top-notice>
+        </div>
+      </el-tooltip>
       <el-tooltip effect="dark"
                   :content="$t('navbar.language')"
                   placement="bottom">
@@ -81,9 +88,6 @@
           <el-dropdown-item>
             <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
           </el-dropdown-item>
-          <el-dropdown-item>
-            <router-link to="/info/setting">{{$t('navbar.setting')}}</router-link>
-          </el-dropdown-item>
           <el-dropdown-item @click.native="logout"
                             divided>{{$t('navbar.logOut')}}
           </el-dropdown-item>
@@ -93,6 +97,7 @@
   </div>
 </template>
 <script>
+  import {resetRouter} from '@/router/router'
   import {mapGetters, mapState} from "vuex";
   import {fullscreenToggel, listenfullscreen} from "@/util/util";
   import topLock from "./top-lock";
@@ -101,6 +106,7 @@
   import topTheme from "./top-theme";
   import topLogs from "./top-logs";
   import topColor from "./top-color";
+  import topNotice from './top-notice'
   import topLang from "./top-lang";
 
   export default {
@@ -111,6 +117,7 @@
       topTheme,
       topLogs,
       topColor,
+      topNotice,
       topLang
     },
     name: "top",
@@ -162,6 +169,7 @@
           type: "warning"
         }).then(() => {
           this.$store.dispatch("LogOut").then(() => {
+            resetRouter();
             this.$router.push({path: "/login"});
           });
         });

src/page/index/top/top-menu.vue

@@ -40,6 +40,7 @@
         items: [],
       };
     },
+    inject: ["index"],
     created() {
       this.getMenu();
     },
@@ -47,6 +48,9 @@
       ...mapGetters(["tagCurrent", "menu"])
     },
     methods: {
+      openMenu (item) {
+        this.index.openMenu(item)
+      },
       getMenu() {
         this.$store.dispatch("GetTopMenu").then(res => {
           this.items = res;
@@ -58,30 +62,6 @@
           (item.meta || {}).i18n
         );
       },
-      openMenu(item) {
-        this.$store.dispatch("GetMenu", item.id).then(data => {
-          if (data.length !== 0) {
-            this.$router.$avueRouter.formatRoutes(data, true);
-          }
-          let itemActive,
-            childItemActive = 0;
-          if (item.path) {
-            itemActive = item;
-          } else {
-            if (this.menu[childItemActive].length == 0) {
-              itemActive = this.menu[childItemActive];
-            } else {
-              itemActive = this.menu[childItemActive].children[childItemActive];
-            }
-          }
-          this.$router.push({
-            path: this.$router.$avueRouter.getPath({
-              name: itemActive.label,
-              src: itemActive.path
-            }, itemActive.meta)
-          });
-        });
-      }
     }
   };
 </script>

src/page/index/top/top-notice.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-popover placement="bottom"
+              width="350"
+              trigger="click">
+
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="邮件(1)"
+                   name="first"></el-tab-pane>
+      <el-tab-pane label="消息(2)"
+                   name="second"></el-tab-pane>
+      <el-tab-pane label="通知"
+                   name="third"></el-tab-pane>
+    </el-tabs>
+    <el-scrollbar style="height:300px">
+      <avue-notice :data="data"
+                   :option="option"
+                   @page-change="pageChange"></avue-notice>
+    </el-scrollbar>
+    <div slot="reference">
+      <el-badge is-dot>
+        <i class="el-icon-bell"></i>
+      </el-badge>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+let list = [{
+  img: 'https://avuejs.com/images/logo-bg.jpg',
+  title: '史蒂夫·乔布斯 关注了你',
+  subtitle: '05-08 15:08',
+  tag: '已经开始',
+  status: 0
+}, {
+  img: 'https://avuejs.com/images/logo-bg.jpg',
+  title: '斯蒂夫·沃兹尼亚克 关注了你',
+  subtitle: '05-08 15:08',
+  tag: '未开始',
+  status: 1
+}, {
+  img: 'https://avuejs.com/images/logo-bg.jpg',
+  title: '蒂姆·库克 关注了你',
+  subtitle: '05-08 15:08',
+  status: 3,
+  tag: '有错误'
+}, {
+  img: 'https://avuejs.com/images/logo-bg.jpg',
+  title: '比尔·费尔南德斯 关注了你',
+  subtitle: '05-08 15:08',
+  status: 4,
+  tag: '已完成'
+}];
+export default {
+  name: "top-notice",
+  data () {
+    return {
+      activeName: 'first',
+      option: {
+        props: {
+          img: 'img',
+          title: 'title',
+          subtitle: 'subtitle',
+          tag: 'tag',
+          status: 'status'
+        },
+      },
+      data: list,
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    pageChange (page, done) {
+      setTimeout(() => {
+        this.$message.success('页码' + page)
+        this.data = this.data.concat(list);
+        done();
+      }, 1000)
+
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/router/router.js

@@ -6,37 +6,38 @@
  * isTab是否加入到tag导航
  * isAuth是否需要授权
  */
+import Vue from 'vue';
 import VueRouter from 'vue-router';
 import PageRouter from './page/'
 import ViewsRouter from './views/'
 import AvueRouter from './avue-router';
-import Vue from 'vue';
 import i18n from '@/lang' // Internationalization
 import Store from '../store/';
-let Router = new VueRouter({
-  scrollBehavior(to, from, savedPosition) {
-    const avueView = document.getElementById('avue-view');
-    if (!avueView) {
-      return {
-        x: 0,
-        y: 0
-      }
-    }
+Vue.use(VueRouter)
+//创建路由
+export const createRouter = () => new VueRouter({
+  scrollBehavior (to, from, savedPosition) {
     if (savedPosition) {
       return savedPosition
     } else {
       if (from.meta.keepAlive) {
-        from.meta.savedPosition = avueView.scrollTop
-      } else {
-        from.meta.savedPosition = 0;
+        from.meta.savedPosition = document.body.scrollTop
+      }
+      return {
+        x: 0,
+        y: to.meta.savedPosition || 0
       }
-      avueView.scrollTop = to.meta.savedPosition
-
     }
   },
-  routes: []
-});
+  routes: [...PageRouter, ...ViewsRouter]
+})
+const Router = createRouter()
 AvueRouter.install(Vue, Router, Store, i18n);
-Router.$avueRouter.formatRoutes(Store.state.user.menu, true);
+Router.$avueRouter.formatRoutes(Store.state.user.menuAll, true);
 Router.addRoutes([...PageRouter, ...ViewsRouter]);
-export default Router;
+export function resetRouter () {
+  const newRouter = createRouter()
+  Router.matcher = newRouter.matcher // reset router
+  AvueRouter.install(Vue, Router, Store, i18n);
+}
+export default Router

src/router/views/index.js

@@ -11,7 +11,16 @@ export default [{
       i18n: 'dashboard'
     },
     component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/wel')
+      import( /* webpackChunkName: "views" */ '@/views/wel/index')
+  }, {
+    path: 'dashboard',
+    name: '控制台',
+    meta: {
+      i18n: 'dashboard',
+      menu: false,
+    },
+    component: () =>
+      import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
   }]
 }, {
   path: '/test',

src/store/getters.js

@@ -19,6 +19,7 @@ const getters = {
   roles: state => state.user.roles,
   permission: state => state.user.permission,
   menu: state => state.user.menu,
+  menuId: state => state.user.menuId,
   menuAll: state => state.user.menuAll,
   logsList: state => state.logs.logsList,
   logsLen: state => state.logs.logsList.length || 0,

src/store/modules/user.js

@@ -38,7 +38,8 @@ const user = {
     permission: getStore({name: 'permission'}) || {},
     roles: [],
     menu: getStore({name: 'menu'}) || [],
-    menuAll: [],
+    menuId: getStore({name: 'menuId'}) || [],
+    menuAll: getStore({name: 'menuAll'}) || [],
     token: getStore({name: 'token'}) || '',
     refreshToken: getStore({name: 'refreshToken'}) || '',
   },
@@ -119,6 +120,8 @@ const user = {
         logout().then(() => {
           commit('SET_TOKEN', '')
           commit('SET_MENU', [])
+          commit('SET_MENU_ID', {})
+          commit('SET_MENU_ALL', []);
           commit('SET_ROLES', [])
           commit('DEL_ALL_TAG');
           commit('CLEAR_LOCK');
@@ -134,6 +137,8 @@ const user = {
     FedLogOut({commit}) {
       return new Promise(resolve => {
         commit('SET_TOKEN', '')
+        commit('SET_MENU_ID', {})
+        commit('SET_MENU_ALL', []);
         commit('SET_MENU', [])
         commit('SET_ROLES', [])
         commit('DEL_ALL_TAG');
@@ -174,6 +179,14 @@ const user = {
       state.token = token;
       setStore({name: 'token', content: state.token, type: 'session'})
     },
+    SET_MENU_ID(state, menuId) {
+      state.menuId = menuId;
+      setStore({name: 'menuId', content: state.menuId, type: 'session'})
+    },
+    SET_MENU_ALL: (state, menuAll) => {
+      state.menuAll = menuAll
+      setStore({name: 'menuAll', content: state.menuAll, type: 'session'})
+    },
     SET_REFRESH_TOKEN: (state, refreshToken) => {
       setRefreshToken(refreshToken)
       state.refreshToken = refreshToken;
@@ -188,12 +201,18 @@ const user = {
       setStore({name: 'userInfo', content: state.userInfo})
     },
     SET_MENU: (state, menu) => {
-      state.menu = menu
+      state.menu = menu;
+      let menuAll = state.menuAll;
+      if (!validatenull(menu)) {
+        const obj = menuAll.filter(ele => ele.path === menu[0].path)[0];
+        if (!obj) {
+          menuAll = menuAll.concat(menu);
+          state.menuAll = menuAll
+        }
+        setStore({name: 'menuAll', content: menuAll, type: 'session'})
+      }
       setStore({name: 'menu', content: state.menu, type: 'session'})
     },
-    SET_MENU_ALL: (state, menuAll) => {
-      state.menuAll = menuAll;
-    },
     SET_ROLES: (state, roles) => {
       state.roles = roles;
     },

src/views/util/permission.vue

@@ -5,8 +5,7 @@
       <avue-crud ref="crud"
                  :permission="permission"
                  :option="option"
-                 :data="data"
-                 @expand-change="expandChange">
+                 :data="data">
         <template slot="expand"
                   slot-scope="scope">
           {{scope}}

src/views/wel/dashboard.vue

@@ -0,0 +1,156 @@
+<template>
+  <basic-container>
+    <div class="wel">
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-platform-eleme"
+                   text="开始菜单1"
+                   time="1"
+                   background="/img/bg/bg3.jpg"
+                   color="#d56259"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-eleme"
+                   text="开始菜单2"
+                   time="2"
+                   background="/img/bg/bg2.jpg"
+                   color="#419ce7"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-delete-solid"
+                   text="开始菜单3"
+                   time="3"
+                   color="#56b69b"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-delete"
+                   text="开始菜单4"
+                   time="4"
+                   color="#d44858"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-s-tools"
+                   text="开始菜单5"
+                   time="5"
+                   color="#3a1f7e"></basic-block>
+      <basic-block :width="410"
+                   :height="height"
+                   icon="el-icon-setting"
+                   text="开始菜单6"
+                   time="6"
+                   background="/img/bg/bg1.jpg"
+                   dept="这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述"
+                   color="#422829"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-user-solid"
+                   text="开始菜单7"
+                   time="7"
+                   color="#613cbd"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-star-off"
+                   text="开始菜单8"
+                   time="8"
+                   color="#da542e"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-goods"
+                   text="开始菜单9"
+                   time="9"
+                   color="#2e8aef"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-circle-check"
+                   text="开始菜单10"
+                   time="10"
+                   color="#3d17b8"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-s-platform"
+                   text="开始菜单11"
+                   time="11"
+                   color="#e31462"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-s-fold"
+                   text="开始菜单12"
+                   time="12"
+                   color="#d9532d"></basic-block>
+      <basic-block :width="410"
+                   :height="height"
+                   icon="el-icon-s-open"
+                   text="开始菜单13"
+                   time="13"
+                   dept="这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述"
+                   color="#b72147"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-s-flag"
+                   text="开始菜单14"
+                   time="14"
+                   color="#01a100"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-s-data"
+                   text="开始菜单15"
+                   time="15"
+                   color="#0c56bf"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-s-grid"
+                   text="开始菜单16"
+                   time="16"
+                   color="#0098a9"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-s-release"
+                   text="开始菜单17"
+                   time="17"
+                   background="/img/bg/bg2.jpg"
+                   color="#209bdf"></basic-block>
+      <basic-block :width="width"
+                   :height="height"
+                   icon="el-icon-s-home"
+                   text="开始菜单18"
+                   time="18"
+                   background="/img/bg/bg3.jpg"
+                   color="#603bbc"></basic-block>
+      <basic-block :width="515"
+                   :height="height"
+                   icon="el-icon-s-promotion"
+                   text="开始菜单19"
+                   time="19"
+                   dept="这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述"
+                   color="#009bad"></basic-block>
+      <basic-block :width="515"
+                   :height="height"
+                   icon="el-icon-s-custom"
+                   text="开始菜单20"
+                   time="20"
+                   background="/img/bg/bg4.jpg"
+                   dept="这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述"
+                   color="#d74e2a"></basic-block>
+    </div>
+  </basic-container>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        width: 200,
+        height: 120,
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .wel {
+    display: flex;
+    flex-wrap: wrap;
+    width: 1100px;
+    margin: 0 auto;
+  }
+</style>

vue.config.js

@@ -1,4 +1,6 @@
 module.exports = {
+  //路径前缀
+  publicPath: "/",
   lintOnSave: true,
   productionSourceMap: false,
   chainWebpack: (config) => {