导航动画改变

src/App.vue

@@ -6,9 +6,10 @@
       </iheader>
     </div>
     <div class="mask" :class="{active: showMask}" :style="{zIndex: maskZIndex}"></div>
-    <!-- <ichat /> -->
+    <ichat />
     <router-view />
     <ifooter v-if="$route.name!=='about'" />
+    <ileft />
   </div>
 </template>
 
@@ -19,6 +20,7 @@ import '@/assets/imgfont/iconfont.css'
 import '@/assets/font/iconfont.css'
 import header from '@/page/layout/header'
 import footer from '@/page/layout/footer'
+import left from '@/page/layout/left'
 import login from '@/page/layout/login'
 import navs from '@/page/navs'
 import chat from '@/page/chat'
@@ -36,12 +38,13 @@ export default {
     ifooter: footer,
     ilogin: login,
     inavs: navs,
-    ichat: chat
+    ichat: chat,
+    ileft: left
   },
   mounted () {
-    this.$bus.$on('showMask', () => {
+    this.$bus.$on('showMask', (index) => {
       clearTimeout(this.timeout)
-      this.maskZIndex = 3
+      this.maskZIndex = index || 3
       this.showMask = true
     })
 

src/assets/font/demo_index.html

@@ -453,20 +453,20 @@
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-icon_industry_app"></span>
+            <span class="icon iconfont icon-industry_app"></span>
             <div class="name">
               行业-app
             </div>
-            <div class="code-name">.icon-icon_industry_app
+            <div class="code-name">.icon-industry_app
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-icon_industry_catering"></span>
+            <span class="icon iconfont icon-industry_catering"></span>
             <div class="name">
               行业-餐饮
             </div>
-            <div class="code-name">.icon-icon_industry_catering
+            <div class="code-name">.icon-industry_catering
             </div>
           </li>
           
@@ -751,18 +751,18 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_industry_app"></use>
+                  <use xlink:href="#icon-industry_app"></use>
                 </svg>
                 <div class="name">行业-app</div>
-                <div class="code-name">#icon-icon_industry_app</div>
+                <div class="code-name">#icon-industry_app</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_industry_catering"></use>
+                  <use xlink:href="#icon-industry_catering"></use>
                 </svg>
                 <div class="name">行业-餐饮</div>
-                <div class="code-name">#icon-icon_industry_catering</div>
+                <div class="code-name">#icon-industry_catering</div>
             </li>
           
             <li class="dib">

src/page/home2/index.vue

@@ -139,25 +139,23 @@
     </div>
 
     <div class="plate06">
-      <h2>
-        媒体报道
-        <a href="#/information/news">更多报道</a>
-      </h2>
-
-      <ul>
-        <li v-for="(item,i) in reports" :key="i">
-          <div class="icon">
-            <img :src="item.icon" alt="">
-          </div>
-          <div class="content">
-            <time>{{item.time}}</time>
-            <p>{{item.title}}</p>
-          </div>
-          <div class="cover">
-            <img :src="item.cover" alt="">
-          </div>
-        </li>
-      </ul>
+      <h2>媒体报道</h2>
+      <div class="media-layout">
+        <ul>
+          <li v-for="(item,i) in reports" :key="i" @click="mediaClick(item)">
+            <div class="icon">
+              <img :src="item.icon" alt="">
+            </div>
+            <div class="content">
+              <time>{{item.time}}</time>
+              <p>{{item.title}}</p>
+            </div>
+            <div class="cover">
+              <img :src="item.cover" alt="">
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
 
   </div>
@@ -202,6 +200,18 @@ export default {
         cover: require('@/assets/images/item_cover_4.png'),
         time: '2018年6月21日',
         title: '四维时代发布消费级3D相机“四维看看”'
+      },
+      {
+        icon: require('@/assets/images/item_icon_4.png'),
+        cover: require('@/assets/images/item_cover_4.png'),
+        time: '2018年6月21日',
+        title: '四维时代发布消费级3D相机“四维看看”'
+      },
+      {
+        icon: require('@/assets/images/item_icon_4.png'),
+        cover: require('@/assets/images/item_cover_4.png'),
+        time: '2018年6月21日',
+        title: '四维时代发布消费级3D相机“四维看看”'
       }
     ]
     let items = [
@@ -230,6 +240,11 @@ export default {
       startNumCount: false
     }
   },
+  methods: {
+    mediaClick () {
+      this.$bus.$emit('showLeft', 'mediaInfo', {id: 83})
+    }
+  },
   mounted () {
     this.sizeHandle = () => {
       let y = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight

src/page/home2/style.scss

@@ -449,7 +449,7 @@
 
 .plate06 {
   max-width: 1200px;
-  margin: 110px auto 0;
+  margin: 110px auto 40px;
 
   h2 {
     font-size: 48px;
@@ -466,10 +466,16 @@
     }
   }
 
+  .media-layout {
+    overflow: auto;
+    max-height: 800px;
+  }
+
   ul>li {
     display: flex;
     position: relative;
     margin-bottom: 30px;
+    cursor: pointer;
 
     ::after {
       content: '';

src/page/information/news/details.vue

@@ -12,6 +12,11 @@
 const browser = {mobile: false}
 
 export default {
+  props: {
+    params: {
+      default: () => {}
+    }
+  },
   data () {
     return {
       isMobile: browser.mobile,
@@ -19,7 +24,7 @@ export default {
     }
   },
   async mounted () {
-    let result = (await this.$http.get('/news/' + this.$route.params.id)).data.content
+    let result = (await this.$http.get('/news/' + this.params.id)).data.content
     this.article = result
   }
 }

src/page/layout/header/index.vue

@@ -23,7 +23,7 @@
           {{nav.text}}
         </a>
 
-        <div class="child-layout" :style="{maxHeight: height + 'px'}">
+        <div class="child-layout" :style="{maxHeight: height + 'px'}" ref="navLayout">
           <i class="silp" :style="{left: split + 'px'}"></i>
           <slot :cp="hoverCp" />
         </div>
@@ -73,15 +73,15 @@ export default {
       this.$router.push({name: nav.cp})
     },
     showCp (cp, height) {
-      this.$bus.$emit('showMask')
       clearTimeout(this.timeout)
+      this.$bus.$emit('showMask')
       this.hoverCp = cp
       this.height = height
     },
     hideCp () {
+      clearTimeout(this.timeout)
       this.$bus.$emit('hideMask')
       this.height = 0
-      clearTimeout(this.timeout)
       this.timeout = setTimeout(() => {
         this.hoverCp = null
       }, 700)

src/page/layout/header/istyle.scss

@@ -1,5 +1,6 @@
 .header-layout {
-  $ts: all .7s cubic-bezier(.77, 0, .175, 1);
+  $mc: .7s cubic-bezier(.77, 0, .175, 1);
+  $ts: all $mc;
   $split: #7f7f7f;
   background-color: #101010;
   display: flex;
@@ -12,7 +13,7 @@
     max-height: 0;
     left: 0;
     right: 0;
-    transition: $ts;
+    transition: max-height $mc;
     overflow: hidden;
 
     .silp {
@@ -86,12 +87,12 @@
 
       a {
         display: inline-block;
-        padding: 25px 20px 25px 0;
+        padding: 25px 0;
         font-size: 16px;
         text-decoration: none;
         font-weight: bold;
         position: relative;
-        flex: auto;
+        flex: 0 0 auto;
 
         &::after {
           display: none;

src/page/layout/left.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="left-layout" :class="{show: show}" ref="layout">
+    <span @click="hideLeft" class="hideLeft">
+      关闭
+      <i class="iconfont icon-guanbi"></i>
+    </span>
+    <div class="left-content">
+      <component :is="cp" :params="args" />
+    </div>
+  </div>
+</template>
+
+<script>
+import mediaInfo from '@/page/information/news/details'
+
+export default {
+  data () {
+    return {
+      cp: '',
+      args: {},
+      show: false
+    }
+  },
+  methods: {
+    showLeft (cp, args) {
+      this.cp = cp
+      this.args = args
+      this.show = true
+      this.$bus.$emit('showMask', 1000)
+    },
+    hideLeft () {
+      this.show = false
+      this.$bus.$emit('hideMask', 1000)
+    }
+  },
+  mounted () {
+    this.$bus.$on('showLeft', this.showLeft.bind(this))
+    this.$bus.$on('hideLeft', this.hideLeft.bind(this))
+
+    this.$refs.layout.addEventListener('transitionend', () => {
+      if (!this.show) {
+        this.cp = ''
+        this.args = {}
+      }
+    })
+  },
+  components: {
+    mediaInfo
+  }
+}
+</script>
+
+<style>
+.left-layout {
+  position: fixed;
+  transform: translateX(-100%);
+  top: 0;
+  bottom: 0;
+  background-color: #fff;
+  width: 50%;
+  min-width: 600px;
+  z-index: 1001;
+  transition: transform .5s cubic-bezier(.77, 0, .175, 1);
+  padding-top: 20px;
+}
+
+.left-layout.show {
+  transform: translateX(0);
+}
+
+.left-content {
+  overflow-y: scroll;
+  height: 100%;
+}
+
+.hideLeft {
+  position: absolute;
+  right: 40px;
+  top: 20px;
+  cursor: pointer;
+}
+</style>

src/page/navs/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="second" ref="second">
-    <component :is="cpmap" :split="split" :origin="cp"/>
+    <component :is="cpmap" :split="split" :origin="cp" v-if="cpmap"/>
   </div>
 </template>
 
@@ -28,7 +28,6 @@ export default {
       let cpmap = Object.keys(modulMap).find(key => {
         return ~modulMap[key].indexOf(this.cp)
       })
-
       return cpmap || this.cp
     }
   },

src/page/navs/temp.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="search-camera" :style="{paddingLeft: split+'px'}">
-    <router-link :to="item.to" tag="a" class="camera" v-for="(item,i) in arr" :key="i">
+  <div class="search-camera" :style="{paddingLeft: split+'px'}" :class="{active: active}" ref="layout">
+    <router-link :to="item.to" tag="a" class="camera" v-for="(item,i) in arr" :key="i" :style="{transitionDelay: i*50+'ms'}">
       <vcenter>
         <i class="iconfont" :class="item.icon"></i>
         <div style="margin-top:10px;">{{item.name}}</div>
@@ -72,11 +72,11 @@ const setting = {
       name: '电商',
       to: {name: 'service_support'}
     }, {
-      icon: 'icon-icon_industry_catering',
+      icon: 'icon-industry_catering',
       name: '餐饮',
       to: {name: 'service_list', params: {id: 'clause'}}
     }, {
-      icon: 'icon-icon_industry_app',
+      icon: 'icon-industry_app',
       name: 'app',
       to: {name: 'service_list', params: {id: 'clause'}}
     }
@@ -92,13 +92,40 @@ export default {
       default: ''
     }
   },
+  data () {
+    return {
+      active: false,
+      arr: undefined
+    }
+  },
   components: {
     vcenter
   },
-  computed: {
-    arr () {
-      return setting[this.origin]
+  watch: {
+    origin: {
+      handler (newVal, oldVal) {
+        if (oldVal) {
+          this.active = false
+          setTimeout(() => {
+            this.showNav()
+          }, 400 + 50 * setting[oldVal].length)
+        } else {
+          this.active = false
+          this.showNav()
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    showNav () {
+      this.arr = setting[this.origin]
+      setTimeout(() => {
+        this.active = true
+      }, 100)
     }
+  },
+  mounted () {
   }
 }
 </script>
@@ -119,10 +146,12 @@ $lHeight: 145px;
     line-height: 1;
     text-align: center;
     font-size: 14px;
-    color: #787878;
+    color: #b6b6b6;
     cursor: pointer;
     height: 100%;
-    transition: color .3s linear;
+    transition: all .7s cubic-bezier(.77, 0, .175, 1);
+    transform: translateX(100px);
+    opacity: 0;
 
     &:hover {
       color: #000;
@@ -132,5 +161,12 @@ $lHeight: 145px;
       font-size: 60px;
     }
   }
+
+  &.active {
+    .camera {
+      opacity: 1;
+      transform: translateX(0)
+    }
+  }
 }
 </style>