4.26版本

src/assets/imgfont/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'iconfont';  /* project id 1135851 */
-  src: url('//at.alicdn.com/t/font_1135851_lwv360fb1m.eot');
-  src: url('//at.alicdn.com/t/font_1135851_lwv360fb1m.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1135851_lwv360fb1m.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1135851_lwv360fb1m.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1135851_lwv360fb1m.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1135851_lwv360fb1m.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.eot');
+  src: url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.svg#iconfont') format('svg');
 }
 .iconfont {
   font-family: "iconfont" !important;
@@ -60,7 +60,7 @@
 }
 
 .icon-swhy:before {
-  content: "\e647";
+  content: "\e123";
 }
 
 .icon-switchopen:before {

src/assets/style/public.scss

@@ -178,14 +178,14 @@ $battery-end:75%;
 		background-position: 0 0px;
   }
   100% {
-    left: 100% - $battery-end + 6%;
+    left: 100% - $battery-end + 5%;
     background-position: 100% 0;
   }
 }
 
 @keyframes lighting1-back {
   0% {
-    left: 100% - $battery-end + 6%;
+    left: 100% - $battery-end + 5%;
     background-position: 100% 0;
   }
   // 50%{

src/components/Paging/index.vue

@@ -7,12 +7,11 @@
       :key="page"
       @click="clickHandle(page)"
       :class="{active: index === page}"
-
       >{{page}}
     </a>
-    <a @click="clickHandle(pages[pages.length-1] + 2)" v-if="pages[pages.length-1]+2<=maxPage" >...</a>
+    <a class="more" @click="clickHandle(pages[pages.length-1] + 2)" v-if="pages[pages.length-1]+2<=maxPage" >...</a>
     <a @click="clickHandle(maxPage)" :class="{active: index === maxPage}" >{{maxPage}}</a>
-    <a @click="clickHandle(index + 1)" >→</a>
+    <a @click="clickHandle(index + 1)" ></a>
   </div>
 </template>
 
@@ -107,6 +106,29 @@ export default {
 </script>
 
 <style scoped>
+    .layout .more:hover::after{
+       transform: scaleX(0)!important;
+    }
+    .layout a:last-child:hover::before{
+      transform: scaleX(2);
+    }
+    .layout a:last-child:hover::after{
+      transform: translateX(5px);
+    }
+    .layout a:last-child::before{
+      background-color: #111;
+      height: 2px;
+      width: 8px;
+      transform-origin: 0 0;
+    }
+    .layout a:last-child::after{
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 5px 0 5px 8px;
+      border-color: transparent transparent transparent #011111;
+    }
+
 /* .layout {
   text-align: center;
 }

src/components/card/index.vue

@@ -1,8 +1,16 @@
 <template>
 <div class="card-con">
   <img :src="data.img">
+  <div class="item-info">
+    <div class="text-info">
+      <div>
+        <h3>{{data.title}}</h3>
+      </div>
+    </div>
+  </div>
   <div class="info">
     <!-- <div class="title">{{data.title}}</div> -->
+
     <div class="username">
       <span class="txt">作者：</span>
       <span >{{data.username}}</span>
@@ -65,27 +73,92 @@ export default {
 <style lang="scss" scoped>
 .card-con {
   width: 330px;
+  position: relative;
   img {
     width: 330px;
     height: 200px;
     cursor: pointer;
   }
 
+  .item-info {
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    right: 0;
+    background-color: rgba(31, 228, 220, 0.7);
+    opacity: 0;
+    transition: opacity .5s cubic-bezier(.39, .03, .41, .98);
+    width: 330px;
+    height: 200px;
+    cursor: pointer;
+    >.text-info {
+      width: 100%;
+      height: 100%;
+      div {
+        overflow: hidden;
+        width: 100%;
+        height: 50px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    h3 {
+      transform: matrix(1, 0, 0, 1, 0, -100);
+      transition: transform .6s cubic-bezier(.63, .77, .57, .93);
+      font-size: 32px;
+      font-weight: 800;
+      line-height: 50px;
+      text-align: center;
+      color: #fff;
+    }
+
+    p {
+      opacity: 0;
+      transition: opacity .4s linear .2s;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 24px;
+      color: #fff;
+    }
+  }
+
+  &:hover {
+    .item-info {
+      opacity: 1;
+    }
+
+    h3 {
+      transform: matrix(1, 0, 0, 1, 0, 0);
+    }
+
+    p {
+      opacity: 1;
+    }
+  }
+
   .info {
-    margin-top: 16px;
+    margin-top: 14px;
+
     .title {
       font-size: 24px;
       color: #1fe4dc;
       margin: 10px 0 20px;
     }
+
     .username {
       font-size: 14px;
       line-height: 1.5
     }
+
     .viewcount {
       font-size: 14px;
       line-height: 1.5
     }
+
     .txt {
       color: #929292;
     }

src/page/about/index.vue

@@ -16,7 +16,7 @@
       <div class="plate02 ">
         <img src="@/assets/images/hezhao.png" alt>
       </div>
-      <div class="plate03 ">
+      <div class="plate03" :style="{marginLeft:(split - 405)+ 'px'}">
         <div class="event plate">
           <touch class="touch-layout" :iactive='iactive' :data="imgs" :width="360" :loop="3000">
             <div class="item" slot="item" slot-scope="{item}">
@@ -54,6 +54,7 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
 import aboutBg from '@/components/aboutBg'
 import touch from '@/components/touch'
 import footer from '@/page/layout/footer'
@@ -168,6 +169,11 @@ export default {
     touch,
     ifooter: footer
   },
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  },
   mounted () {
     this.timeout = setTimeout(() => {
       luxy.init({
@@ -178,7 +184,7 @@ export default {
       this.scrollHandle = function () {
         items.forEach((item, index) => {
           let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
-          if (addHeight <= window.innerHeight + window.scrollY - 300) {
+          if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 300) {
             item.classList.remove(`hide${index + 1}`)
           } else {
             item.classList.add(`hide${index + 1}`)

src/page/about/style.scss

@@ -34,6 +34,7 @@ $txt_delay:0.2s;
         align-items: flex-start;
         >img{
           width: 360px;
+          height: 230px;
           margin-top: 6px;
         }
         .intro-r {
@@ -59,8 +60,9 @@ $txt_delay:0.2s;
     }
     .plate03 {
       text-align: center;
-      width: 1240px;
-      margin: 120px auto;
+      width: 1340px;
+      margin-top: 120px;
+      margin-bottom: 120px;
       .event {
         display: flex;
         align-items: flex-start;

src/page/binocular/index.vue

@@ -2,24 +2,14 @@
   <div class="product-layout" ref="productLayout">
     <div class="plate01 plate">
       <img class="pl01-bg" src="@/assets/images/t-bg.png" alt="">
-      <div class="layout" :style="{marginLeft:(split - 186)+ 'px'}">
+      <div class="layout" :style="{marginLeft:(split - 170)+ 'px'}">
         <img class="product-img" src="@/assets/images/t_product.png" alt="">
         <div class="info">
-          <h2>4DKankan lite</h2>
-          <h2>空间建模神器</h2>
-          <h3>全球首款 消费级3D空间相机</h3>
-          <!-- <h4>标准套装</h4>
-          <p><span class="money">￥3999</span>购机即返利3999元至注册账户</p>
-          <p class="p1">1-120个拍摄点位以及30个以内热点的图片或文字价值99元</p>
-          <p class="p2">超过预设拍摄点位及热点请联系客服</p>
-          <div class="v-line"></div>
-          <ul>
-            <li>永久存储数据</li>
-            <li>添加热点</li>
-            <li>项目、模型编辑</li>
-            <li>计算三维立体化场景</li>
-            <li>手机端人工智能算法优化</li>
-          </ul> -->
+          <h2>4DKankan Pro</h2>
+          <h2>全球首款 消费级3D空间相机</h2>
+          <p><span class="money">￥4999</span>起</p>
+          <p class="p1">安霸H2V95专业级芯片，1600万像素双鱼眼</p>
+          <p class="p2">Sony IMX 206图像传感器，超爽握感轻便随行</p>
           <div class="btns">
             <a href="" class="button"><vcenter><img src="@/assets/images/product_icon_arrow.png" alt=""></vcenter></a>
             <a href="" class="button">立即购买</a>
@@ -281,9 +271,9 @@ export default {
 
           let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
 
-          if (addHeight <= window.innerHeight + window.scrollY - 300 && isContain) {
+          if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 300 && isContain) {
             item.classList.remove(`hide${index + 1}`)
-          } else if (addHeight <= window.innerHeight + window.scrollY - 500 && !isContain) {
+          } else if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 500 && !isContain) {
             item.classList.remove(`hide${index + 1}`)
           } else {
             item.classList.add(`hide${index + 1}`)

src/page/binocular/style.scss

@@ -29,7 +29,7 @@ $txt_delay: 0.2s;
 }
 
 .plate01 {
-  padding: 60px 0 150px;
+  padding: 50px 0 150px;
   background:linear-gradient(
     65deg,
     #010101 20%,
@@ -47,20 +47,18 @@ $txt_delay: 0.2s;
   .layout {
     z-index: 1;
     max-width: 1148px;
-    margin-top: 70px;
+    margin-top: 90px;
     overflow: hidden;
     position: relative;
     .product-img{
-      width: 200px;
+      width: 170px;
     }
     .info {
       display: inline-block;
-      margin: 65px 0 0 75px;
-      width: 500px;
+      margin: 40px 0 0 58px;
+      width: 800px;
       vertical-align: top;
-      .btns{
-        margin-top: 50px;
-      }
+      
       >h2 {
         color: #fff;
         font-size: 48px;
@@ -70,27 +68,9 @@ $txt_delay: 0.2s;
 
       >h2:last-of-type{
         letter-spacing: 0;
-        font-weight: 400;
-        margin: 6px 0 25px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay;
-
-      }
-     
-      >h3 {
         font-weight: 300;
-        font-size: 36px;
-        color: #fff;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
-
-      }
-
-      >h4 {
-        font-size: 24px;
-        color: #c4c3c3;
-        font-weight: normal;
-        margin: 76px 0 14px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
-
+        margin: 6px 0 50px;
+        animation: fadeUp 0.5s ease-out 1 both $txt_delay;
       }
    
       >p {
@@ -100,7 +80,7 @@ $txt_delay: 0.2s;
         letter-spacing: 0.9px;
         position: relative;
         left: 4px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;
+        animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
 
       }
       .p1{
@@ -109,31 +89,15 @@ $txt_delay: 0.2s;
 
       }
       .p2{
-        font-size: 16px;
         margin: 6px 0 0px;
         padding-bottom: 10px;
-        letter-spacing: 0.3px;
-        border-bottom: 1px solid rgba($color: #a4a3a4, $alpha: 0.2);
         display: inline-block;
       }
 
-      ul {
-        padding: 8px 0 0 22px;
-
-        >li {
-          list-style: disc;
-          color: #a4a3a4;
-          font-size: 14px;
-          line-height: 24px;
-          animation: fadeUp 0.5s ease-out 1 both $txt_delay*5;
-        }
-      }
-
       .money {
         margin-top: 15px;
-        padding-right: 4px;
         font-size: 36px;
-        color: #1fe4dc;
+        color: #fff;
         position: relative;
         left: -8px;
         letter-spacing: 1px;

src/page/cases/index.vue

@@ -6,12 +6,12 @@
       <div class="case-nav">
         <div class="nav-con">
           <vcenter>
-            <div class="list-txt">餐饮</div>
+            <div class="list-txt">{{caseType}}</div>
             <ul class="list-navs">
-              <li class="list-acitve"><span>排序</span></li>
-              <li><span>网站推荐</span></li>
-              <li><span>最新发布</span></li>
-              <li><span>热门浏览</span></li>
+              <li><span>排序</span></li>
+              <li :class="{active:sortActive===item.id}" v-for="(item,index) in sort" :key="index" @click="sortActive = item.id">
+                <span>{{item.name}}</span>
+              </li>
             </ul>
           </vcenter>
         </div>
@@ -42,55 +42,100 @@ import Paging from '@/components/Paging'
 const cardArr = [{
   title: 'Oin Bar 前台',
   username: 'VannyShen',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_01.png'),
   viewcount: '2564'
 }, {
   title: 'Oin Bar 前台',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_02.png'),
   username: 'VannyShen',
   viewcount: '2564'
 }, {
   title: 'Oin Bar 前台',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_03.png'),
   username: 'VannyShen',
   viewcount: '2564'
 }, {
   title: 'Oin Bar 前台',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_04.png'),
   username: 'VannyShen',
   viewcount: '2564'
 }, {
   title: 'Oin Bar 前台',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_05.png'),
   username: 'VannyShen',
   viewcount: '2564'
 }, {
   title: 'Oin Bar 前台',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_06.png'),
   username: 'VannyShen',
   viewcount: '2564'
 }, {
   title: 'Oin Bar 前台',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_07.png'),
   username: 'VannyShen',
   viewcount: '2564'
 }, {
   title: 'Oin Bar 前台',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_08.png'),
   username: 'VannyShen',
   viewcount: '2564'
 }, {
   title: 'Oin Bar 前台',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_09.png'),
   username: 'VannyShen',
   viewcount: '2564'
 }, {
   title: 'Oin Bar 前台',
-  img: require('@/assets/images/3dcase_img_case_04.jpg'),
+  img: require('@/assets/images/cases/case_10.png'),
+  username: 'VannyShen',
+  viewcount: '2564'
+}, {
+  title: 'Oin Bar 前台',
+  img: require('@/assets/images/cases/case_11.png'),
+  username: 'VannyShen',
+  viewcount: '2564'
+}, {
+  title: 'Oin Bar 前台',
+  img: require('@/assets/images/cases/case_12.png'),
+  username: 'VannyShen',
+  viewcount: '2564'
+}, {
+  title: 'Oin Bar 前台',
+  img: require('@/assets/images/cases/case_13.png'),
+  username: 'VannyShen',
+  viewcount: '2564'
+}, {
+  title: 'Oin Bar 前台',
+  img: require('@/assets/images/cases/case_14.png'),
+  username: 'VannyShen',
+  viewcount: '2564'
+}, {
+  title: 'Oin Bar 前台',
+  img: require('@/assets/images/cases/case_15.png'),
+  username: 'VannyShen',
+  viewcount: '2564'
+}, {
+  title: 'Oin Bar 前台',
+  img: require('@/assets/images/cases/case_16.png'),
   username: 'VannyShen',
   viewcount: '2564'
 }]
 
+const sort = [
+  {
+    id: 0,
+    name: '网站推荐'
+  },
+  {
+    id: 1,
+    name: '最新发布'
+  },
+  {
+    id: 2,
+    name: '热门浏览'
+  }
+]
+
 export default {
   // import引入的组件需要注入到对象中才能使用
   components: {
@@ -103,14 +148,19 @@ export default {
     return {
       cardArr,
       total: 90,
-      pageSize: 10
+      pageSize: 10,
+      sort,
+      sortActive: 0
     }
   },
   // 监听属性 类似于data概念
   computed: {
     ...mapState({
       split: state => state.ui.navDivision
-    })
+    }),
+    caseType () {
+      return this.$route.params.id
+    }
   },
   // 监控data中的数据变化
   watch: {},

src/page/cases/style.scss

@@ -1,12 +1,12 @@
-.case-con{
+.case-con {
   position: relative;
   width: 100%;
   background-color: #fff;
-  .case-header{
+  .case-header {
     position: relative;
     max-width: 1200px;
     padding-left: 260px;
-    img{
+    img {
       position: absolute;
       left: 0;
       margin-top: 48px;
@@ -14,23 +14,26 @@
       height: 126px;
       width: auto;
     }
-    .case-nav{
+    .case-nav {
       padding-top: 38px;
       border-left: 1px solid #e5e5e5;
-      padding-bottom: 44px; 
-      .nav-con{
+      padding-bottom: 44px;
+      .nav-con {
         font-size: 48px;
-        .list-txt{
+        .list-txt {
           padding-left: 30px;
           font-weight: bold;
         }
-        .list-navs{
+        .list-navs {
           border-bottom: 1px solid #e5e5e5;
           margin-top: 30px;
           line-height: 70px;
           height: 70px;
           font-size: 0;
-          li{
+          .active {
+            color: #111111;
+          }
+          li {
             border-right: 1px solid #e5e5e5;
             width: 97px;
             text-align: center;
@@ -39,49 +42,95 @@
             height: 70px;
             font-size: 14px;
             line-height: 70px;
-          }
-          .list-acitve{
-            background-color: #1fe4dc;
-            width: 240px;
-            color: #fff;
-            padding-left: 40px;
-            text-align: left;
-            span{
-             font-size: 18px;
+            color: #a1a1a1;
+            &:hover {
+              color: #111111;
+            }
+            
+            &:first-child {
+              background-color: #1fe4dc;
+              width: 240px;
+              color: #fff;
+              padding-left: 40px;
+              text-align: left;
+              cursor: auto;
+              span {
+                font-size: 18px;
+              }
+              &:hover {
+                color: #fff;
+              }
             }
           }
         }
-        
       }
     }
   }
 }
-.case-body{
+.case-body {
   max-width: 1470px;
   margin-left: 220px;
-  .card{
-    margin-bottom: 22px;
+  .card {
+    margin-bottom: 20px;
   }
-  .paging{
+  .paging {
     // border-left: #e5e5e5 1px solid;
     height: 100%;
     margin-bottom: 40px;
     & /deep/ .layout {
       text-align: center;
+      margin-top: 40px;
     }
-    & /deep/ .layout a {
-      margin: 10px;
-      font-size: 18px;
+    & /deep/ .layout a:not(:last-child) {
+      margin: 10px 8px;
+      font-size: 16px;
       display: inline-block;
+      font-weight: 500;
       cursor: pointer;
       user-select: none;
       color: #999;
+      position: relative;
+      transition: color 0.3s;
+    }
+    & /deep/ .layout a:last-child {
+      position: relative;
+      top: -5px;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      -ms-flex-align: center;
+      align-items: center;
+      height: 22px;
+      padding: 0 9.6px;
+      padding: 0 0.6rem;
     }
-    
-    & /deep/ .layout a.active,
-    & /deep/ .layout a:hover {
+    & /deep/ .layout a:last-child::before,
+    & /deep/ .layout a:last-child::after {
+      content: "";
+      display: inline-block;
+      will-change: transform;
+      transition: transform 0.3s;
+    }
+
+    & /deep/ .layout a:not(:last-child).active::after,
+    & /deep/ .layout a:not(:last-child).active,
+    & /deep/ .layout a:not(:last-child):hover,
+    & /deep/ .layout a:not(:last-child):hover::after {
       color: #111111;
-      border-bottom: 3px solid #111;
+      transform: scaleX(1);
+    }
+
+    & /deep/ .layout a:not(:last-child)::after {
+      content: "";
+      height: 3px;
+      width: 140%;
+      background-color: #111;
+      display: block;
+      margin-left: -20%;
+      margin-top: 3px;
+      transform-origin: 50% 50%;
+      transform: scaleX(0);
+      will-change: transform;
+      transition: transform 0.3s;
     }
   }
-}
+}

src/page/eight/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="product-layout" ref="productLayout">
-
     <div class="plate01 plate">
       <img class="pl01-bg" src="@/assets/images/eight-bg.png" alt="">
-      <div class="layout" :style="{marginLeft:(split - 178)+ 'px'}">
+      <div class="layout" :style="{marginLeft:(split - 170)+ 'px'}">
         <img class="product-img" src="@/assets/images/banner_pro.png" alt="">
         <div class="info">
           <h2>4DKankan Pro</h2>
@@ -371,14 +370,15 @@ export default {
       this.scrollHandle = function () {
         items.forEach((item, index) => {
           let isContain = Array.from(item.classList).some(sub => {
-            return sub === 'bottom' || sub === 'benefit'
+            return sub === 'bottom' || sub === 'benefit' ||
+                  sub === 'qmjt-layout' || sub === 'cgq-layout' || sub === 'jzxj-layout'
           })
 
           let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
 
-          if (addHeight <= window.innerHeight + window.scrollY - 300 && isContain) {
+          if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 300 && isContain) {
             item.classList.remove(`hide${index + 1}`)
-          } else if (addHeight <= window.innerHeight + window.scrollY - 500 && !isContain) {
+          } else if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 500 && !isContain) {
             item.classList.remove(`hide${index + 1}`)
           } else {
             item.classList.add(`hide${index + 1}`)

src/page/eight/style.scss

@@ -33,30 +33,25 @@ $num_time: 0.6s;
 
 .plate01 {
   padding: 50px 0 ;
-  // background:linear-gradient(
-  //   65deg,
-  //   #010101 20%,
-  //   #171719 40%,
-  //   #010101 60%
-  // );
   background: #000;
   position: relative;
 
   .pl01-bg{
     width: 100%;
+    height: 1600px;
     position: absolute;
     left: 0;
-    top: -100px;
+    top: -90px;
     z-index: 0;
   }
   .layout {
     z-index: 1;
     max-width: 1148px;
-    margin-top: 70px;
+    margin-top: 90px;
     overflow: hidden;
     position: relative;
     .product-img{
-      width: 180px;
+      width: 170px;
     }
     .info {
       display: inline-block;
@@ -72,28 +67,11 @@ $num_time: 0.6s;
 
       >h2:last-of-type{
         letter-spacing: 0;
-        font-weight: 400;
+        font-weight: 300;
         margin: 6px 0 50px;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay;
 
       }
-     
-      >h3 {
-        font-weight: 300;
-        font-size: 36px;
-        color: #fff;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
-
-      }
-
-      >h4 {
-        font-size: 24px;
-        color: #c4c3c3;
-        font-weight: normal;
-        margin: 76px 0 14px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
-
-      }
    
       >p {
         color: #c4c3c3;
@@ -102,7 +80,7 @@ $num_time: 0.6s;
         letter-spacing: 0.9px;
         position: relative;
         left: 4px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;
+        animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
 
       }
       .p1{
@@ -111,25 +89,11 @@ $num_time: 0.6s;
 
       }
       .p2{
-        font-size: 16px;
         margin: 6px 0 0px;
         padding-bottom: 10px;
-        letter-spacing: 0.3px;
         display: inline-block;
       }
 
-      ul {
-        padding: 8px 0 0 22px;
-
-        >li {
-          list-style: disc;
-          color: #a4a3a4;
-          font-size: 14px;
-          line-height: 24px;
-          animation: fadeUp 0.5s ease-out 1 both $txt_delay*5;
-        }
-      }
-
       .money {
         margin-top: 15px;
         font-size: 36px;
@@ -651,7 +615,7 @@ $num_time: 0.6s;
             font-size: 30px;
           }
           .lighting-span::before{
-            content: '';
+            content: '8';
             display: inline-block;
             animation: num-add $num_time linear forwards;
           }
@@ -698,7 +662,17 @@ $num_time: 0.6s;
           background-image: url('~@/assets/images/battery-right.png');
           background-size: auto 100%;
           animation: lighting $battery_time linear forwards;
-          clip-path: polygon(15% 0%,100% 0, 100% 100%, 0% 100%);
+          clip-path: polygon(14% 0%,100% 0, 100% 100%, 0% 100%);
+          // &::before{
+          //   position: absolute;
+          //   top: 0;
+          //   left: 0;
+          //   content: '';
+          //   width: 20px;
+          //   height: 98%;
+          //   background: #111111;
+          //   transform: skewX(-20deg)
+          // }
           .lighting-txt{
             width: 100%;
           }
@@ -890,6 +864,7 @@ $num_time: 0.6s;
     animation:lighting1-back $battery_time steps(9) forwards !important;
   }
   .lighting-span::before{
+    content: '2'!important;
     animation:num-reduce $num_time linear forwards!important;
   }
 }

src/page/layout/header/index.vue

@@ -64,7 +64,7 @@ export default {
         {text: '核心技术', cp: 'videos'},
         {text: '行业应用', cp: 'case'},
         {text: '服务支持', cp: 'service'},
-        {text: '关于我们', cp: 'service'}
+        {text: '关于我们', cp: 'about'}
       ]
     }
   },

src/page/navs/temp.vue

@@ -16,11 +16,11 @@ const setting = {
     {
       icon: 'icon-icon_cam_lite',
       name: '双目相机',
-      to: {name: 'product'}
+      to: {name: 'binocular'}
     }, {
       icon: 'icon-icon_cam_pro',
       name: '即将上市',
-      to: {name: 'product'}
+      to: {name: 'eight'}
     }, {
       icon: 'icon-icon_cam_fitting',
       name: '即将上市',
@@ -54,31 +54,31 @@ const setting = {
     {
       icon: 'icon-industry_realty',
       name: '房地产',
-      to: {name: 'service_list', params: {id: 'use'}}
+      to: {name: 'cases', params: {id: '房地产'}}
     }, {
       icon: 'icon-industry_museum',
       name: '博物馆',
-      to: {name: 'service_list', params: {id: 'qa'}}
+      to: {name: 'cases', params: {id: '博物馆'}}
     }, {
       icon: 'icon-industry_industry',
       name: '工业',
-      to: {name: 'service_down'}
+      to: {name: 'cases', params: {id: '工业'}}
     }, {
       icon: 'icon-industry_gover',
       name: '政务',
-      to: {name: 'service_support'}
+      to: {name: 'cases', params: {id: '政务'}}
     }, {
       icon: 'icon-industry_ecom',
       name: '电商',
-      to: {name: 'service_support'}
+      to: {name: 'cases', params: {id: '电商'}}
     }, {
       icon: 'icon-industry_catering',
       name: '餐饮',
-      to: {name: 'service_list', params: {id: 'clause'}}
+      to: {name: 'cases', params: {id: '餐饮'}}
     }, {
       icon: 'icon-industry_app',
       name: 'app',
-      to: {name: 'service_list', params: {id: 'clause'}}
+      to: {name: 'cases', params: {id: 'app'}}
     }
   ]
 }

src/router/index.js

@@ -52,7 +52,7 @@ export default new Router({
       component: () => import('@/page/service/temp')
     },
     {
-      path: '/cases',
+      path: '/cases/:id',
       name: 'cases',
       component: () => import('@/page/cases')
     },