Merge branch 'master' of http://192.168.0.115:3000/bill/4dkankan_official

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>
@@ -34,7 +34,7 @@
       <a class="search" @click="searchHandle" :class="{active: hoverCp === 'isearch'}">
         <vcenter>
           <i class="iconfont icon-sousuo open"></i>
-          <i class="iconfont icon-cuo hide"></i>
+          <i class="iconfont icon-cuowu hide"></i>
         </vcenter>
       </a>
       <a class="user">
@@ -60,11 +60,11 @@ export default {
       overb: false,
       active: true,
       navs: [
-        {text: '产品购买', cp: 'iproduct'},
+        {text: '产品购买', cp: 'product'},
         {text: '核心技术', cp: 'videos'},
-        {text: '媒体合作', cp: 'information_news'},
-        {text: '服务支持', cp: 'iservice'},
-        {text: '关于我们', cp: 'iservice'}
+        {text: '行业应用', cp: 'case'},
+        {text: '服务支持', cp: 'service'},
+        {text: '关于我们', cp: 'service'}
       ]
     }
   },
@@ -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/case/index.vue

@@ -1,68 +0,0 @@
-<template>
-<div>
-  <div class="search-con">
-    <div class="search-ban">
-      <div class="search-case">
-        <div class="case" @click="$router.push({name: 'cases'})">
-          <span class="case-span" v-for="(item,i) in caseArr" :key="i">
-            <span @click="activeIdx = item.id" :class="{'name':true,'active':item.id === activeIdx}">{{item.name}}</span>
-            <span class="line-span" v-if="i!==caseArr.length-1">/</span>
-            <br v-if="i===3"/>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-</template>
-
-<script>
-import vcenter from '@/components/vcenter'
-const caseArr = [{
-  name: '文博',
-  id: 0
-}, {
-  name: '地产',
-  id: 1
-}, {
-  name: '电商',
-  id: 2
-}, {
-  name: '餐饮',
-  id: 3
-}, {
-  name: '家具',
-  id: 4
-}, {
-  name: '其他',
-  id: 5
-}]
-
-export default {
-  components: {
-    vcenter
-  },
-  data () {
-    return {
-      activeIdx: 0,
-      caseArr
-    }
-  },
-  computed: {},
-  watch: {},
-  // 方法集合
-  methods: {
-
-  },
-  created () {
-
-  },
-  mounted () {
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss'
-</style>

src/page/navs/case/style.scss

@@ -1,44 +0,0 @@
-$lHeight: 145px;
-
-.search-con {
-  position: relative;
-  width: 100%;
-  padding: 0 340px;
-  background-color: #fff;
-  height: $lHeight;
-  border-bottom: 1px solid #e5e5e5;
-  .search-ban {
-    position: relative;
-    margin: 0 auto;
-    max-width: 1200px;
-    height: $lHeight;
-    .search-case{
-      margin-left: 260px;
-      display: inline-block;
-      border-left: #e5e5e5 1px solid;
-      line-height: 0.9;
-      .case{
-        height: $lHeight;
-        text-align: left;
-        font-size: 14px;
-        display: inline-block;
-        padding:20px 0 0 155px;
-        width: 40vw;
-        .case-span{
-          font-size: 24px;
-          color: #787878;
-          line-height: 34px;
-          .name{
-            cursor: pointer;
-          }
-          .active{
-            color: #ff0000;
-          }
-          .line-span{
-            margin: 0 10px;
-          }
-        }
-      }
-    }
-  }
-}

src/page/navs/forum/index.vue

@@ -1,33 +0,0 @@
-<template>
-<div>
-
-</div>
-</template>
-
-<script>
-
-export default {
-  components: {
-  },
-  data () {
-    return {
-    }
-  },
-  computed: {},
-  watch: {},
-  // 方法集合
-  methods: {
-
-  },
-  created () {
-
-  },
-  mounted () {
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss'
-</style>

src/page/navs/index.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="second" ref="second">
-    <component :is="cp" :split="split"/>
+    <component :is="cpmap" :split="split" :origin="cp" v-if="cpmap"/>
   </div>
 </template>
 
 <script>
 import {mapState} from 'vuex'
-import icase from './case/'
+import temp from './temp'
 import isearch from './search/'
-import iproduct from './product/'
-import iservice from './service/'
-import iforum from './forum/'
+
+const modulMap = {
+  temp: ['case', 'product', 'service', 'forum']
+}
 
 export default {
   props: {
@@ -22,14 +23,17 @@ export default {
   computed: {
     ...mapState({
       split: state => state.ui.navDivision
-    })
+    }),
+    cpmap () {
+      let cpmap = Object.keys(modulMap).find(key => {
+        return ~modulMap[key].indexOf(this.cp)
+      })
+      return cpmap || this.cp
+    }
   },
   components: {
-    icase,
-    isearch,
-    iproduct,
-    iservice,
-    iforum
+    temp,
+    isearch
   }
 }
 </script>

src/page/navs/product/index.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="search-camera" :style="{paddingLeft: split+'px'}">
-    <router-link :to="item.to" tag="a" class="camera" v-for="(item,i) in cameraArr" :key="i">
-      <vcenter>
-        <img :src="item.img" >
-        <div style="margin-top:10px;">{{item.name}}</div>
-      </vcenter>
-    </router-link>
-  </div>
-</template>
-
-<script>
-import vcenter from '@/components/vcenter'
-const cameraArr = [{
-  img: require('@/assets/images/product_img_2c.png'),
-  name: '双目相机',
-  to: {name: 'product'}
-}, {
-  img: require('@/assets/images/product_img_6c.png'),
-  name: '即将上市',
-  to: {name: 'product'}
-}, {
-  img: require('@/assets/images/product_img_zt.png'),
-  name: '即将上市',
-  to: {name: 'product'}
-}]
-
-export default {
-  props: {
-    'split': {
-      default: 0
-    }
-  },
-  components: {
-    vcenter
-  },
-  data () {
-    return {
-      cameraArr
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss'
-</style>

src/page/navs/product/style.scss

@@ -1,24 +0,0 @@
-$lHeight: 145px;
-
-.search-camera {
-  background-color: #fff;
-  height: $lHeight;
-  border-bottom: 1px solid #e5e5e5;
-  display: flex;
-
-  .camera {
-    max-width: 120px;
-    flex: 1;
-    padding: 0 30px;
-    line-height: 1;
-    text-align: center;
-    font-size: 14px;
-    color: #ff0000;
-    cursor: pointer;
-    height: 100%;
-
-    &:first-child {
-      color: #787878;
-    }
-  }
-}

src/page/navs/service/index.vue

@@ -1,57 +0,0 @@
-<template>
-<div class="search-camera" :style="{paddingLeft: split + 'px'}">
-  <router-link :to="item.to" tag="a" class="camera" v-for="(item,i) in serviceArr" :key="i">
-    <vcenter>
-      <img :src="item.img" >
-      <div style="margin-top:10px;">{{item.name}}</div>
-    </vcenter>
-  </router-link>
-</div>
-</template>
-
-<script>
-import vcenter from '@/components/vcenter'
-const serviceArr = [
-  {
-    img: require('@/assets/images/service_icon_01@2x.png'),
-    name: '使用教程',
-    to: {name: 'service_list', params: {id: 'use'}}
-  }, {
-    img: require('@/assets/images/service_icon_02@2x.png'),
-    name: '常见问题',
-    to: {name: 'service_list', params: {id: 'qa'}}
-  }, {
-    img: require('@/assets/images/service_icon_03@2x.png'),
-    name: 'app下载',
-    to: {name: 'service_down'}
-  }, {
-    img: require('@/assets/images/service_icon_04@2x.png'),
-    name: '维修服务',
-    to: {name: 'service_support'}
-  }, {
-    img: require('@/assets/images/service_icon_05@2x.png'),
-    name: '网站条款',
-    to: {name: 'service_list', params: {id: 'clause'}}
-  }
-]
-
-export default {
-  props: {
-    'split': {
-      default: 0
-    }
-  },
-  components: {
-    vcenter
-  },
-  data () {
-    return {
-      serviceArr
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss'
-</style>

src/page/navs/service/style.scss

@@ -1,24 +0,0 @@
-$lHeight: 145px;
-
-.search-camera {
-  background-color: #fff;
-  height: $lHeight;
-  border-bottom: 1px solid #e5e5e5;
-  display: flex;
-
-  .camera {
-    max-width: 120px;
-    flex: 1;
-    padding: 0 30px;
-    line-height: 1;
-    text-align: center;
-    font-size: 14px;
-    cursor: pointer;
-    height: 100%;
-    color: #787878;
-
-    img {
-      width: 100%;
-    }
-  }
-}

src/page/navs/temp.vue

@@ -0,0 +1,172 @@
+<template>
+  <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>
+      </vcenter>
+    </router-link>
+  </div>
+</template>
+
+<script>
+import vcenter from '@/components/vcenter'
+const setting = {
+  'product': [
+    {
+      icon: 'icon-icon_cam_lite',
+      name: '双目相机',
+      to: {name: 'product'}
+    }, {
+      icon: 'icon-icon_cam_pro',
+      name: '即将上市',
+      to: {name: 'product'}
+    }, {
+      icon: 'icon-icon_cam_fitting',
+      name: '即将上市',
+      to: {name: 'product'}
+    }
+  ],
+  'service': [
+    {
+      icon: 'icon-tutorial',
+      name: '使用教程',
+      to: {name: 'service_list', params: {id: 'use'}}
+    }, {
+      icon: 'icon-faq',
+      name: '常见问题',
+      to: {name: 'service_list', params: {id: 'qa'}}
+    }, {
+      icon: 'icon-appdown',
+      name: 'app下载',
+      to: {name: 'service_down'}
+    }, {
+      icon: 'icon-service',
+      name: '维修服务',
+      to: {name: 'service_support'}
+    }, {
+      icon: 'icon-protocol',
+      name: '网站条款',
+      to: {name: 'service_list', params: {id: 'clause'}}
+    }
+  ],
+  'case': [
+    {
+      icon: 'icon-industry_realty',
+      name: '房地产',
+      to: {name: 'service_list', params: {id: 'use'}}
+    }, {
+      icon: 'icon-industry_museum',
+      name: '博物馆',
+      to: {name: 'service_list', params: {id: 'qa'}}
+    }, {
+      icon: 'icon-industry_industry',
+      name: '工业',
+      to: {name: 'service_down'}
+    }, {
+      icon: 'icon-industry_gover',
+      name: '政务',
+      to: {name: 'service_support'}
+    }, {
+      icon: 'icon-industry_ecom',
+      name: '电商',
+      to: {name: 'service_support'}
+    }, {
+      icon: 'icon-industry_catering',
+      name: '餐饮',
+      to: {name: 'service_list', params: {id: 'clause'}}
+    }, {
+      icon: 'icon-industry_app',
+      name: 'app',
+      to: {name: 'service_list', params: {id: 'clause'}}
+    }
+  ]
+}
+
+export default {
+  props: {
+    'split': {
+      default: 0
+    },
+    'origin': {
+      default: ''
+    }
+  },
+  data () {
+    return {
+      active: false,
+      arr: undefined
+    }
+  },
+  components: {
+    vcenter
+  },
+  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>
+
+<style lang="scss" scoped>
+$lHeight: 145px;
+
+.search-camera {
+  background-color: #fff;
+  height: $lHeight;
+  border-bottom: 1px solid #e5e5e5;
+  display: flex;
+
+  .camera {
+    max-width: 120px;
+    flex: 1;
+    padding: 0 30px;
+    line-height: 1;
+    text-align: center;
+    font-size: 14px;
+    color: #b6b6b6;
+    cursor: pointer;
+    height: 100%;
+    transition: all .7s cubic-bezier(.77, 0, .175, 1);
+    transform: translateX(100px);
+    opacity: 0;
+
+    &:hover {
+      color: #000;
+    }
+
+    i {
+      font-size: 60px;
+    }
+  }
+
+  &.active {
+    .camera {
+      opacity: 1;
+      transform: translateX(0)
+    }
+  }
+}
+</style>