基础组件更新，增加图标，完善组件列表数据，优化逻辑

src/assets/scss/smp.scss

@@ -1835,17 +1835,30 @@ html,body{
     padding:0;
   }
   .csm-item{
-    background-color: #f00;
+    background-color: #fafafa;
+    // background-color: #ff0;
     @include smp-radius-normal();
     height:68px;
     display: flex;
     align-items: center;
     cursor: pointer;
+    position:relative;
+    a{
+      text-decoration: none;
+    }
+    .el-icon-arrow-right{
+      position: absolute;
+      width:12px!important;
+      height:12px;
+      font-size:12px;
+      top:28px;
+      right:0px;
+    }
     .csm-icon{
       width:38px;
       height:38px;
       border-radius:100px;
-      background-color: #ff0;
+      // background-color: #ff0;
       flex-shrink: 0;
       margin:0 6.25% 0 9.375%;
     }
@@ -1857,12 +1870,16 @@ html,body{
       max-height:60px;
       overflow:hidden;
       padding:0 8% 0 0;
-      white-space:pre-wrap;
+      // word-wrap: break-all;
+      word-break: break-all;
+      white-space: pre-wrap;
+      
     }
   }
 }
 .csm-zk-menu{
   width:auto!important;
+  border-right:none;
   .el-submenu__title{
     padding:0!important;
     height:auto;
@@ -1876,7 +1893,21 @@ html,body{
     font-size:30px;
     padding:0 5px 0 8px;
   }
+  .menuItemA{
+    flex:1;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+  }
 }
+$list: apiwg bzdlys bzdxsj bzqxyx bzslwp bzswmx bzyxsj clda czrz dawh dazdy dddlfw dpda dwjx fbsyykf ffdy fzfw jrclyq jsmxkj kshfxtyxt lcbdfw ljskf mxgl qjdlxx qyda ryda sjda sjgd sjkshfw sjmf sjzz snwyth sslxr swdcxr swdxfx swsjct swsjjz swtxmn tyqxrz tysjfw wbfx wfs wms wmts xtrz xtxtgj xxdl ycrz yhjsgl yhqxgl yhrz yhxxrz yzsff zhxss znbq znsb zstp zxfb zzjgrz tyyhfw; //$list 就是一个列表
+@each $name in $list {
+    .jczj-icon-#{$name} {
+        background: url("~@/assets/img/jczj/icon-#{$name}.png") no-repeat 0 0;
+        background-size: 100% 100%;
+    }
+}
+
 
 // 通知列表
 .notice-pop{

src/router/index.js

@@ -68,8 +68,8 @@ router.beforeEach((to, from, next) => {
       Vue.prototype.$message.error(res.msg)
       return next({name: 'login'})
     }
-    let firstPath = getParent(res.list)
-    console.log(res.list, firstPath)
+    let toObj = findPathInHttpMenu(to, res.list)
+    let firstPath = toObj ? toObj.path : getParent(res.list)
     // console.log(firstPath)
     // if (!firstPath) {
     //   let homePage = {
@@ -93,6 +93,16 @@ router.beforeEach((to, from, next) => {
   })
 })
 
+function findPathInHttpMenu (to, list) {
+  let obj = ''
+  list.forEach((e) => {
+    if ('/' + e.path === to.path) {
+      obj = e
+    }
+  })
+  return obj
+}
+
 function getParent (list) {
   let arr = list.filter((e) => {
     if (!e.path) {

src/views/main/main-content.vue

@@ -1,9 +1,7 @@
 <template>
   <main class="smp-content" :class="{'isIframe':isIframe}">
     <iframe v-if="isIframe" :src="iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
-    <keep-alive v-else>
-      <router-view />
-    </keep-alive>
+    <router-view v-else />
   </main>
 </template>
 

src/views/modules/demo/basicComponent/com-third-menu.vue

@@ -3,8 +3,9 @@
     <template slot="title">
       <template v-if="menuItem.lv===1" class="cs">
         <div class="csm-item">
-          <i class="csm-icon"></i>
+          <i class="csm-icon" :class="menuItem.icon"></i>
           <div class="csm-name" :title="menuItem.name">{{menuItem.name}}</div>
+          <i class="el-icon-arrow-right"></i>
         </div>
       </template>
       <template v-if="menuItem.lv>=2">
@@ -16,18 +17,22 @@
     </template>
     <com-thirdmenu v-for="item in menuItem.children" :key="item.id+'sub'" :menuItem="item"></com-thirdmenu>
   </el-submenu>
-  <el-menu-item v-else :index="menuItem.id+'sub'" @click="gotoRouteHandle(menuItem)">
+  <el-menu-item v-else :index="menuItem.id+'sub'">
     <template v-if="menuItem.lv===1">
       <div class="csm-item">
-        <i class="csm-icon"></i>
-        <div class="csm-name" :title="menuItem.name">{{menuItem.name}}</div>
+        <a class="menuItemA" :href="getHref(menuItem)" :target="getTarget(menuItem)">
+          <i class="csm-icon" :class="menuItem.icon"></i>
+          <div class="csm-name" :title="menuItem.name">{{menuItem.name}}</div>
+        </a>
       </div>
     </template>
     <template v-if="menuItem.lv>=2">
+      <a class="menuItemA" :href="getHref(menuItem)" :target="getTarget(menuItem)">
       <em class="csm-point">&middot;</em>
       <span class="csm-sec-name" :title=" menuItem.name">
         {{ menuItem.name }}
       </span>
+      </a>
     </template>
   </el-menu-item>
 </template>
@@ -50,11 +55,34 @@ export default {
   components: {
     comThirdmenu
   },
+  mounted () {
+    // console.log(this.menuItem)
+  },
   methods: {
+    getHref (item) {
+      // console.log(item.url, window.location)
+      let host = window.location.host
+      let href = window.location.href
+      if (!item.url) {
+        return 'javascript:void(0);'
+      } else if (item.url.indexOf('http') > -1) {
+        return item.url
+      } else if (href.indexOf(host + '/#') > -1) {
+        return '/#' + item.url
+      }
+    },
+    getTarget (item) {
+      if (!item.url) {
+        return '_self'
+      } else {
+        return '_blank'
+      }
+    },
     gotoRouteHandle (item) {
       console.log(item)
       if (item.url) {
-        this.$router.push({ path: item.url })
+        // this.$router.push({ path: item.url })
+        // window.open("http://www.jb51.net")
       }
     }
   }

src/views/modules/demo/basicComponent/pubuliu.vue

@@ -28,25 +28,53 @@ export default {
       boxW: document.body.clientWidth // 屏幕宽度
     }
   },
-  computed: {},
+  watch: {
+    list () {
+      this.$nextTick(() => {
+        this.setPosition()
+      })
+    }
+  },
   created () {
 
   },
   mounted () {
-    this.init()
+    this.windowResize()
     this.$nextTick(() => {
-      this.setPosition()
+      this.init()
     })
+    // $('.bc-wraper').on('resize', a)
+    // setTimeout(function () {
+    //   console.log('off click')
+    //   $('.bc-wraper').off('resize', a)
+    // }, 5000)
+    // function a () {
+    //   console.log(2222)
+    // }
+  },
+  beforeDestroy () {
+    window.$(window).off('resize', this.resizeFunc)
   },
   methods: {
+    resizeFunc () {
+      // console.log(123132)
+      this.init()
+      this.setPosition()
+    },
+    windowResize () {
+      let _this = this
+      // debugger
+      window.$(window).on('resize', _this.resizeFunc)
+    },
     init () {
       this.boxW = document.querySelector('.water-fall').getBoundingClientRect().width
       this.wfitemW = (this.boxW - this.gap * (this.colNum - 1)) / this.colNum
     },
     setPosition () {
+      // console.log(this.list)
       let nodeList = document.querySelectorAll('.wf-item')
       nodeList.forEach((e, i) => {
-        console.log(e.getBoundingClientRect())
+        // console.log(e.getBoundingClientRect())
         let itemH = e.getBoundingClientRect().height
         let itemW = this.wfitemW
         let itemT = 0
@@ -56,12 +84,14 @@ export default {
         // let itemT = rowIndex*itemW +
         if (i < 3) {
           itemL = i * (itemW + this.gap)
+          // console.log(itemL)
           this.lastItem.push({
             t: itemT + itemH + this.gap,
             l: itemL
           })
         } else {
           let minItem = this.findMinTopItem()
+          // console.log(minItem)
           itemL = minItem.item.l
           itemT = minItem.item.t
           this.lastItem[minItem.index] = {
@@ -75,6 +105,7 @@ export default {
           top: `${itemT}px`,
           left: `${itemL}px`
         }
+        // console.log(this.list)
         // this.list[i].style.width =
         // this.list[i].style.height = `${itemH}px`
         // this.list[i].style.top = `${itemT}px`