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

config/index.js

@@ -13,7 +13,7 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '192.168.0.197', // can be overwritten by process.env.HOST
+    host: '192.168.0.158', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

src/App.vue

@@ -7,7 +7,7 @@
     </div>
     <div class="mask" :class="{active: showMask}" :style="{zIndex: maskZIndex}"></div>
     <!-- <ichat /> -->
-    <router-view/>
+    <router-view />
     <ifooter v-if="$route.name!=='about'" />
   </div>
 </template>

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_j5tsltduw2f.eot');
-  src: url('//at.alicdn.com/t/font_1135851_j5tsltduw2f.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1135851_j5tsltduw2f.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1135851_j5tsltduw2f.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1135851_j5tsltduw2f.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1135851_j5tsltduw2f.svg#iconfont') format('svg');
+  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');
 }
 .iconfont {
   font-family: "iconfont" !important;

src/assets/style/public.scss

@@ -1,3 +1,7 @@
+$battery-start:55%;
+$battery-end:75%;
+
+
 #app {
   background-color: #fff;
 }
@@ -27,9 +31,6 @@
   font-size: 14px;
   transition: background-color .3s linear;
 
-  &:hover {
-    // background-color: rgba($bgcolor, 0.8);
-  }
 }
 
 .oy {
@@ -123,51 +124,76 @@
   }
 }
 
-@keyframes lighting {
+@keyframes lighting-txt {
   0% {
-    width: 50%
+    width: 100% - $battery-start
   }
-  50%{
-    width: 40%
+  // 50%{
+  //   width: 45%
+  // }
+  100% {
+    width: 100% - $battery-end
   }
+}
+
+
+@keyframes lighting-txt-back {
+  0% {
+    width: 100% - $battery-end
+  }
+  // 50%{
+  //   width: 45%
+  // }
   100% {
-    width: 60%
+    width: 100% - $battery-start
   }
 }
 
-@keyframes lighting-back {
+@keyframes lighting {
   0% {
-    width: 60%
+    width: $battery-start
+  }
+  // 50%{
+  //   width: 45%
+  // }
+  100% {
+    width: $battery-end
   }
-  50%{
-    width: 40%
+}
+
+@keyframes lighting-back {
+  0% {
+    width: $battery-end
   }
+  // 50%{
+  //   width: 45%
+  // }
   100% {
-    width: 50%
+    width: $battery-start
   }
 }
 @keyframes lighting1 {
   0% {
-    left: 50%;
-  }
-  50%{
-    left: 60%;
+    left: $battery-start - 4%;
+		background-position: 0 0px;
   }
   100% {
-    left: 40%;
-
+    left: 100% - $battery-end + 6%;
+    background-position: 100% 0;
   }
 }
 
 @keyframes lighting1-back {
   0% {
-    left: 40%;
-  }
-  50%{
-    left: 60%;
+    left: 100% - $battery-end + 6%;
+    background-position: 100% 0;
   }
+  // 50%{
+  //   left: 60%;
+  // }
   100% {
-    left: 50%;
+    left: $battery-start - 4%;
+    background-position: 0% 0;
   }
 }
 
@@ -176,44 +202,86 @@
     content: '2'
   }
   10% {
-    content: '3'
+    content: '2.5'
   }
   20% {
-    content: '4'
+    content: '3.5'
+  }
+  30% {
+    content: '3.8'
+  }
+  40% {
+    content: '4.5'
   }
   50% {
-    content: '5'
+    content: '4.8'
   }
   60% {
-    content: '6'
+    content: '5.3'
+  }
+  70% {
+    content: '5.8'
   }
   80%{
-    content: '7'
+    content: '6.5'
+  }
+  90% {
+    content: '7.5'
   }
   100% {
     content: '8'
   }
 }
 @keyframes num-reduce {
-  0% {
-    content: '8'
+  100% {
+    content: '2'
   }
-  10% {
-    content: '7'
+  90% {
+    content: '2.5'
   }
-  20% {
-    content: '6'
+  80% {
+    content: '3.5'
   }
-  50% {
-    content: '5'
+  70% {
+    content: '3.8'
   }
   60% {
-    content: '4'
+    content: '4.5'
   }
-  80%{
-    content: '3'
+  50% {
+    content: '4.8'
+  }
+  40% {
+    content: '5.3'
+  }
+  30% {
+    content: '5.8'
+  }
+  20%{
+    content: '6.5'
+  }
+  10% {
+    content: '7.5'
+  }
+  0% {
+    content: '8'
+  }
+}
+
+$padding:20px;
+@keyframes mymove {
+  0% {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+  70% {
+    padding: $padding;
+    transform: translateX(-50%) translateY(-$padding);
+    opacity: 0;
   }
   100% {
-    content: '2'
+    padding: $padding;
+    transform: translateX(-50%) translateY(-$padding);
+    opacity: 0;
   }
 }

src/components/Linecanvas/index.vue

@@ -6,7 +6,7 @@
 
 <script>
 
-let speed = 20
+let speed = 10
 
 export default {
   props: {
@@ -60,6 +60,115 @@ export default {
         val: 6000
       }
     ]
+
+    let lineArr2 = [
+      [{
+        type: 'm',
+        val: [790, 430]
+      },
+      {
+        type: 'l',
+        val: [790, 90]
+      },
+      {
+        type: 'l',
+        val: [890, 0]
+      },
+      {
+        type: 'm',
+        val: [790, 90]
+      },
+      {
+        type: 'l',
+        val: [35, 110]
+      },
+      {
+        type: 'l',
+        val: [0, 100]
+      }],
+
+      [{
+        type: 'm',
+        val: [790, 430]
+      }, {
+        type: 'l',
+        val: [35, 400]
+      }, {
+        type: 'l',
+        val: [0, 420]
+      }, {
+        type: 'm',
+        val: [35, 400]
+      }, {
+        type: 'l',
+        val: [35, 110]
+      } ],
+
+      [{
+        type: 'm',
+        val: [790, 430]
+      }, {
+        type: 'l',
+        val: [1045, 626]
+      }],
+      // 窗户1
+      [{
+        type: 'm',
+        val: [110, 150]
+      }, {
+        type: 'l',
+        val: [110, 350]
+      }, {
+        type: 'l',
+        val: [305, 350]
+      }, {
+        type: 'l',
+        val: [305, 150]
+      }, {
+        type: 'l',
+        val: [110, 150]
+      }],
+      // 窗户2
+      [{
+        type: 'm',
+        val: [440, 150]
+      }, {
+        type: 'l',
+        val: [438, 360]
+      }, {
+        type: 'l',
+        val: [540, 362]
+      }, {
+        type: 'l',
+        val: [540, 150]
+      }, {
+        type: 'l',
+        val: [440, 150]
+      }],
+      // 门
+      [{
+        type: 'm',
+        val: [635, 150]
+      }, {
+        type: 'l',
+        val: [630, 423]
+      }, {
+        type: 'l',
+        val: [765, 428]
+      }, {
+        type: 'l',
+        val: [770, 150]
+      }, {
+        type: 'l',
+        val: [635, 150]
+      }]
+    ]
+
+    let testArr2 = []
+    lineArr2.forEach(() => {
+      testArr2.push([])
+    })
+
     // 这里存放数据
     return {
       realWidth: 1091,
@@ -68,6 +177,8 @@ export default {
       interval: null,
       index: 0,
       testArr: [],
+      testArr2,
+      lineArr2,
       lineTxt,
       arr: []
     }
@@ -103,49 +214,43 @@ export default {
       return [
         {
           type: 'm',
-          val: [0, 100]
-        },
-        {
+          val: [790, 430]
+        }, {
           type: 'l',
-          val: [35, 110]
-        },
-        {
+          val: [790, 90]
+        }, {
           type: 'l',
-          val: [35, 400]
-        },
-        {
+          val: [890, 0]
+        }, {
           type: 'm',
-          val: [0, 420]
-        },
-        {
+          val: [790, 90]
+        }, {
           type: 'l',
-          val: [35, 400]
-        },
-        {
+          val: [35, 110]
+        }, {
           type: 'l',
-          val: [790, 430]
+          val: [0, 100]
         },
         {
+          type: 'm',
+          val: [790, 430]
+        }, {
           type: 'l',
-          val: [790, 90]
-        },
-        {
+          val: [35, 400]
+        }, {
           type: 'l',
-          val: [35, 110]
-        },
-        {
+          val: [0, 420]
+        }, {
           type: 'm',
-          val: [790, 90]
-        },
-        {
+          val: [35, 400]
+        }, {
           type: 'l',
-          val: [890, 0]
+          val: [35, 110]
         },
         {
           type: 'm',
           val: [790, 430]
-        },
-        {
+        }, {
           type: 'l',
           val: [1045, 626]
         },
@@ -209,7 +314,6 @@ export default {
           type: 'l',
           val: [635, 150]
         }
-
       ]
     }
   },
@@ -217,7 +321,9 @@ export default {
     start (newVal) {
       if (newVal) {
         this.index = 0
-        this.testArr = []
+        this.testArr2 = this.testArr2.map(item => {
+          return []
+        })
         this.animated()
       } else {
         this.init()
@@ -253,56 +359,72 @@ export default {
         this.ctx.beginPath()
 
         arr.forEach(item => {
-          if (item.type === 'm') {
-            this.ctx.moveTo(item.val[0], item.val[1])
-          } else {
-            this.ctx.lineTo(item.val[0], item.val[1])
-          }
+          item.forEach(i => {
+            if (i.type === 'm') {
+              this.ctx.moveTo(i.val[0], i.val[1])
+            } else {
+              this.ctx.lineTo(i.val[0], i.val[1])
+            }
+          })
         })
         this.ctx.stroke()
       }
-      let uArr = (() => {
+
+      let getCutArr = () => {
         let arr = []
+        this.lineArr2.forEach(() => {
+          arr.push([])
+        })
         let intervalX, intervalY
-        this.lineArr.forEach((item, idx) => {
-          if (item.type === 'm') {
-            arr.push(item)
-          }
-          if (idx < this.lineArr.length - 1) {
-            if (this.lineArr[idx + 1]['type'] !== 'm') {
-              intervalX = (this.lineArr[idx + 1]['val'][0] - this.lineArr[idx]['val'][0]) / speed
-              intervalY = (this.lineArr[idx + 1]['val'][1] - this.lineArr[idx]['val'][1]) / speed
-              let i = 0
-              while (i <= speed) {
-                arr.push(Object.assign({}, item, {
-                  val: [this.lineArr[idx]['val'][0] + i * intervalX, this.lineArr[idx]['val'][1] + i * intervalY],
-                  type: 'l'
-                }))
-                i++
+        this.lineArr2.forEach((item, index) => {
+          item.forEach((sub, idx) => {
+            if (sub.type === 'm') {
+              arr[index].push(sub)
+            }
+            if (idx < this.lineArr2[index].length - 1) {
+              if (this.lineArr2[index][idx + 1]['type'] !== 'm') {
+                intervalX = (this.lineArr2[index][idx + 1]['val'][0] - this.lineArr2[index][idx]['val'][0]) / speed
+                intervalY = (this.lineArr2[index][idx + 1]['val'][1] - this.lineArr2[index][idx]['val'][1]) / speed
+                let i = 0
+                while (i <= speed) {
+                  arr[index].push(Object.assign({}, sub, {
+                    val: [this.lineArr2[index][idx]['val'][0] + i * intervalX, this.lineArr2[index][idx]['val'][1] + i * intervalY],
+                    type: 'l'
+                  }))
+                  i++
+                }
               }
             }
-          }
+          })
         })
         return arr
-      })()
+      }
+
+      let myArr = getCutArr()
+
+      let maxLength = 0
+      myArr.forEach(item => {
+        maxLength = Math.max(item.length, maxLength)
+      })
       let draw = () => {
         if (!this.start) {
           return
         }
-        if (this.index === uArr.length) {
+        if (this.index === maxLength) {
           drawTxt()
           return
         }
-        this.testArr.push(uArr[this.index])
+        myArr.forEach((item, index) => {
+          item.forEach((sub, idx) => {
+            item[this.index] && this.testArr2[index].push(item[this.index])
+          })
+        })
         this.index++
 
-        drawLine(this.testArr)
+        drawLine(this.testArr2)
         requestAnimationFrame(draw)
       }
-
-      // this.img.onload = () => {
       draw()
-      // }
     },
     init () {
       this.ctx.clearRect(0, 0, this.fixCanvasWidth, this.fixCanvasHeight)
@@ -368,6 +490,29 @@ export default {
         this.imgWidth * this.devicePixelRatio,
         this.imgHeight * this.devicePixelRatio
       )
+      // this.ctx.strokeStyle = '#1fe4dc'
+      // this.ctx.lineWidth = 5
+      // this.ctx.beginPath()
+
+      // // arr1
+      // this.ctx.moveTo(790, 430)
+      // this.ctx.lineTo(790, 90)
+      // this.ctx.lineTo(890, 0)
+      // this.ctx.moveTo(790, 90)
+      // this.ctx.lineTo(35, 110)
+      // this.ctx.lineTo(0, 100)
+
+      // // arr2
+      // this.ctx.moveTo(790, 430)
+      // this.ctx.lineTo(35, 400)
+      // this.ctx.lineTo(0, 420)
+      // this.ctx.moveTo(35, 400)
+      // this.ctx.lineTo(35, 110)
+
+      // // arr3
+      // this.ctx.moveTo(790, 430)
+      // this.ctx.lineTo(1045, 626)
+      // this.ctx.stroke()
     }
     // this.animated()
   }

src/components/compare/index.vue

@@ -3,10 +3,13 @@
     <div class="overlap" ref="overlap" :style="{width: width + 'px'}" >
       <video :src="back" autoplay muted loop></video>
       <div class="back-txt">{{lmask}}</div>
-      <a class="slide" src="./slide.png" alt="" ref="slide" :style="{backgroundImage: 'url('+slide+')', right:bwidth+'px'}">
-        <span ref="animtion"></span>
+      <a class="slide" src="./slide.png" alt="" ref="slide" :style="{right:bwidth+'px'}">
+        <img :style="{opacity:isLeft === 'left'?0.3:0.8}" src="./zuo.png" >
+        <img :style="{opacity:isLeft === 'right'?0.3:0.8}" src="./you.png" >
+        <!-- <span ref="animtion"></span> -->
       </a>
-      <div class="o-move" :style="{width: bwidth+'px', transition: transition}">
+      <span :class="{'l-linear':isLeft === 'left'}" :style="{right:bwidth+'px'}"></span>
+      <div class="o-move " :class="linearClass" :style="{width: bwidth+'px', transition: transition}">
         <video class="c-video" :src="content" autoplay muted loop></video>
         <div class="content-txt">{{rmask}}</div>
       </div>
@@ -30,6 +33,9 @@ export default {
       slide,
       paused: false,
       transition: 'none',
+      isLeft: false,
+      isFullOpc: true,
+      linearClass: {},
       isMobile: browser.mobile || browser.iPad
     }
   },
@@ -49,13 +55,26 @@ export default {
         this.paused = false
         this.transition = 'none'
       }, 1000)
+    },
+    isLeft (newVal) {
+      switch (newVal) {
+        case 'right':
+          this.linearClass = ['l-move']
+          break
+        case 'left':
+          this.linearClass = ['r-move']
+          break
+        default:
+          this.linearClass = []
+          break
+      }
     }
   },
   mounted () {
     let dom = this.dom = this.$refs.slide
     let body = document.documentElement
     let layout = this.$refs.overlap
-    let animtion = this.$refs.animtion
+    // let animtion = this.$refs.animtion
     let down = this.down = this.isMobile ? 'touchstart' : 'mousedown'
     let move = this.isMobile ? 'touchmove' : 'mousemove'
     let up = this.isMobile ? 'touchend' : 'mouseup'
@@ -67,18 +86,28 @@ export default {
       let startX = this.isMobile ? ev.targetTouches[0].clientX : ev.clientX
       let bodyWidth = layout.offsetWidth
 
-      animtion.style.animationPlayState = 'paused'
+      // animtion.style.animationPlayState = 'paused'
+      this.isFullOpc = false
+
+      let lastClientX = startX
 
       let moveHandle = ev => {
         if (this.paused) return
+        if (ev.clientX === lastClientX) return
+
         let movex = this.isMobile ? ev.targetTouches[0].clientX - startX : ev.clientX - startX
         let bwidth = width - movex
         bwidth = bwidth > bodyWidth ? bodyWidth : (bwidth < 0 ? 0 : bwidth)
+        this.isLeft = this.isFullOpc ? 'full' : (ev.clientX - lastClientX) > 0 ? 'left' : 'right'
         this.changeWidth(bwidth)
+
+        lastClientX = ev.clientX
       }
 
       let outHnadle = ev => {
-        animtion.style.animationPlayState = 'running'
+        console.log('full')
+        this.isLeft = 'full'
+        // animtion.style.animationPlayState = 'running'
         body.removeEventListener(move, moveHandle)
         body.removeEventListener(up, outHnadle)
       }
@@ -122,6 +151,7 @@ export default {
     background: no-repeat right top;
     background-size: auto 100%;
     overflow: hidden;
+    z-index: 15;
   }
 
   .overlap .o-move::before {
@@ -132,7 +162,27 @@ export default {
     top: 0;
     width: 1px;
     z-index: 15;
-    background-color: #ececec;
+    background-color: #ebebea;
+  }
+
+  .overlap .l-move::before {
+    width: 40px;
+    z-index: 15;
+    background: url('~@/assets/images/border-linear.png') left top no-repeat;
+  }
+  .overlap .r-move::before {
+    width: 0;
+    background: none;
+  }
+
+  .overlap .l-linear{
+    content: '';
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 40px;
+    z-index: 15;
+    background: url('~@/assets/images/border-linear-r.png') right top no-repeat;
   }
 
   .c-video{
@@ -162,6 +212,17 @@ export default {
     transform: translateX(50%);
     background-size: 100% 100%;
     z-index: 99;
+
+  }
+  .slide img{
+    position: absolute;
+    left: 1px;
+    top: 0px;
+    width: 64px;
+  }
+
+  .slide img:last-of-type{
+    left: 0;
   }
 
   .slide span {
@@ -177,6 +238,7 @@ export default {
   }
 
   .back-txt{
+    z-index: 12;
     position: absolute;
     left: 0;
     top: 50%;
@@ -201,21 +263,4 @@ export default {
     text-shadow: 4px 4px 10px #000;
   }
 
-  @keyframes mymove {
-    0% {
-      padding: 0;
-      transform: translateX(0) translateY(0);
-      opacity: 1;
-    }
-    70% {
-      padding: 20px;
-      transform: translateX(-20px) translateY(-20px);
-      opacity: 0;
-    }
-    100% {
-      padding: 20px;
-      transform: translateX(-20px) translateY(-20px);
-      opacity: 0;
-    }
-  }
 </style>

src/page/binocular/index.vue

@@ -4,12 +4,12 @@
     <div class="plate01 plate">
       <img class="pl01-bg" src="@/assets/images/t-bg.png" alt="">
       <div class="layout">
-        <img src="@/assets/images/t_product.png" alt="">
+        <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>
+          <!-- <h4>标准套装</h4>
           <p><span class="money">￥3999</span>购机即返利3999元至注册账户</p>
           <p class="p1">1-120个拍摄点位以及30个以内热点的图片或文字价值99元</p>
           <p class="p2">超过预设拍摄点位及热点请联系客服</p>
@@ -20,7 +20,7 @@
             <li>项目、模型编辑</li>
             <li>计算三维立体化场景</li>
             <li>手机端人工智能算法优化</li>
-          </ul>
+          </ul> -->
           <div class="btns">
             <a href="" class="button"><vcenter><img src="@/assets/images/product_icon_arrow.png" alt=""></vcenter></a>
             <a href="" class="button">立即购买</a>

src/page/binocular/style.scss

@@ -50,11 +50,17 @@ $txt_delay: 0.2s;
     margin: 70px auto;
     overflow: hidden;
     position: relative;
+    .product-img{
+      // width: 10vw;
+    }
     .info {
       display: inline-block;
-      margin:10px 0 0 58px;
+      margin:110px 0 0 58px;
       width: 500px;
       vertical-align: top;
+      .btns{
+        margin-top: 50px;
+      }
       >h2 {
         color: #fff;
         font-size: 48px;

src/page/cases/index.vue

@@ -1,8 +1,8 @@
 <template>
 <div>
-  <div class="case-con">
+  <div class="case-con" :style="{paddingLeft:(split-260)+ 'px'}">
     <div class="case-header">
-      <img :src="require('@/assets/images/3dcase_img_tit.png')" alt="">
+      <img src="@/assets/images/3dcase_img_tit.png" alt="">
       <div class="case-nav">
         <div class="nav-con">
           <vcenter>
@@ -101,6 +101,7 @@ export default {
     // 这里存放数据
     return {
       cardArr,
+      split: 660,
       total: 90,
       pageSize: 10
     }

src/page/cases/style.scss

@@ -1,10 +1,8 @@
 .case-con{
   position: relative;
   width: 100%;
-  padding: 0 340px;
   background-color: #fff;
   .case-header{
-    margin: 0 auto;
     position: relative;
     max-width: 1200px;
     padding-left: 260px;

src/page/eight/index.vue

@@ -54,11 +54,11 @@
       </div>
     </div>
 
-    <div class="plate03 ">
-      <div class="info plate">
+    <div class="plate03 plate">
+      <div class="info">
         <h2 class="b-title">720度、8K分辨率捕捉所有驚喜和美景</h2>
       </div>
-      <div class="front plate">
+      <div class="front">
         <img class="front-img" src="@/assets/images/camera1.png" alt="">
         <div class="f-right">
           <p>如自己看到的一般美麗，給人一種驚艷感，讓您覺得「就在眼前，就在當下」。從靜態圖像到較長的影片，以生動、高解像度 720度世界記錄您的記憶。全新 PRO 能夠提供更高的品質和效能。</p>
@@ -91,12 +91,12 @@
       </div>
     </div>
 
-    <div class="plate04">
-      <div class="info plate">
+    <div class="plate04 plate">
+      <div class="info">
         <h2 class="b-title">4DKankan Pro 硬件</h2>
         <p class="b-label">采用一线厂商主流硬件产品</p>
       </div>
-      <div class="hsxp-layout plate">
+      <div class="hsxp-layout">
         <div class="hsxp-imgcon">
           <div></div>
         </div>
@@ -116,7 +116,7 @@
       </div>
       <div class="cgq-layout plate">
         <div class="cgq-imgcon">
-          <img src="@/assets/images/sony.png" alt="">
+          <div></div>
         </div>
         <div class="cgq-right">
             <div class="b-title">SONY CMOS 图像传感器</div>
@@ -153,6 +153,7 @@
           <div>
             <p>普通</p>
           </div>
+          <span v-show="!runLineCanvas" @click="runLineCanvas=!runLineCanvas" class="line-circle"></span>
           <img @click="runLineCanvas=!runLineCanvas" :src="runLineCanvas?require('@/assets/images/canvas-right.png'):require('@/assets/images/canvas-left.png')" alt="">
           <div>
             <p>4DKankan PRO</p>
@@ -186,8 +187,9 @@
         <div class="qxd-4">
           <div class="qxd-4-battery">
            <img class="battery-l" src="@/assets/images/battery-left.png" alt="">
-           <div class="lighting-txt"><span>LITE</span>2H</div>
-           <img class="lighting" src="@/assets/images/lighting.png" alt="">
+           <div class="lighting-txt first-txt"><span>LITE</span>2H</div>
+           <div class="lighting">
+           </div>
            <div class="battery-mask">
               <div class="lighting-txt fix-txt">
                 <span>PRO</span>
@@ -372,7 +374,7 @@ export default {
       this.scrollHandle = function () {
         items.forEach((item, index) => {
           let isContain = Array.from(item.classList).some(sub => {
-            return sub === 'hdsp-layout' || sub === 'mxsc-layout' || sub === 'benefit'
+            return sub === 'bottom' || sub === 'benefit'
           })
 
           let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)

src/page/eight/style.scss

@@ -1,5 +1,8 @@
 $ani_delay: 0.4s;
 $txt_delay: 0.2s;
+$battery_time: 0.3s;
+$num_time: 0.6s;
+
 .product-layout {
   overflow: hidden;
   // background: url("~@/assets/images/background.jpg") top -135px center no-repeat;
@@ -29,7 +32,7 @@ $txt_delay: 0.2s;
 }
 
 .plate01 {
-  padding: 150px 0;
+  padding: 50px 0 ;
   // background:linear-gradient(
   //   65deg,
   //   #010101 20%,
@@ -43,7 +46,7 @@ $txt_delay: 0.2s;
     width: 100%;
     position: absolute;
     left: 0;
-    top: 0;
+    top: -100px;
     z-index: 0;
   }
   .layout {
@@ -491,6 +494,17 @@ $txt_delay: 0.2s;
     margin: 130px auto;
     .cgq-imgcon{
       animation: fadeUp 0.5s ease-out 1 both;
+      div{
+        width: 34vw;
+        height: 20vw;
+        background-image: url('~@/assets/images/sony.png');
+        background-repeat: no-repeat;
+        background-position: 0% 0px;
+        background-size: cover;
+        overflow-x: hidden;
+        will-change: background;
+        animation: xinpian-open 0.2s steps(5) forwards $ani_delay;
+      }
     }
     .cgq-right{
       color: #fff;
@@ -562,6 +576,7 @@ $txt_delay: 0.2s;
       align-items: center;
       width: 1100px;
       margin: 20px auto 0;
+      position: relative;
       div{
         flex: 1;
         p{
@@ -573,6 +588,21 @@ $txt_delay: 0.2s;
       img{
         cursor: pointer;
         width: 80px;
+        position: relative;
+      }
+      .line-circle{
+        cursor: pointer;
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid #333;
+        left: calc(50% + 19px);
+        z-index: 15;
+        top: 6px;
+        transform: translateX(-50%);
+        animation:mymove 1s infinite;
+        box-sizing: content-box
       }
     }
 
@@ -605,12 +635,14 @@ $txt_delay: 0.2s;
         position: relative;
         .lighting-txt{
           font-size: 30px;
-          color: #fff;
+          color: #dadada;
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
-          width: 238px;
+          // animation: lighting-back $battery_time linear forwards;
+          font-weight: bold;
           span:first-child{
+            font-weight: normal;
             color: #6b6b6c;
             padding-right: 15px;
           }
@@ -620,36 +652,55 @@ $txt_delay: 0.2s;
           .lighting-span::before{
             content: '';
             display: inline-block;
-            animation: num-add 0.5s linear forwards;
+            animation: num-add $num_time linear forwards;
           }
           .num{
             color: #fff;
             padding-right: 0;
           }
         }
+        .first-txt{
+          width: 45%;
+          animation: lighting-txt $battery_time linear forwards;
+        }
         .fix-txt{
           right: 0;
+          font-size: 0;
+          span{
+           font-size: 30px;
+          }
         }
         .lighting{
+          width: 80px;
+          height: 130px;
+          background-image: url('~@/assets/images/lighting.png');
+          background-repeat: no-repeat;
+          background-position: 0% 0px;
+          background-size: cover;
+          overflow-x: hidden;
+          will-change: background;
           position: absolute;
           left: 50%;
-          width: 81px;
-          cursor: pointer;
-          height: 129px;
           z-index: 20;
-          animation: lighting1 0.5s ease-in-out forwards;
+          // animation: lighting1 0.5s ease-in-out forwards;
+          transform: translateX(-50%);
+          will-change: background;
+          animation: lighting1 $battery_time steps(9) forwards;
         }
         .battery-mask{
           position: absolute;
           right: 0;
           top: 0;
           height: 100%;
-          width: 60%;
+          width: 55%;
           background: no-repeat 100% 0;
           background-image: url('~@/assets/images/battery-right.png');
           background-size: auto 100%;
-          animation: lighting 0.5s ease-in-out forwards;
-          clip-path: polygon(10% 0%,100% 0, 100% 100%, 0% 100%);
+          animation: lighting $battery_time linear forwards;
+          clip-path: polygon(15% 0%,100% 0, 100% 100%, 0% 100%);
+          .lighting-txt{
+            width: 100%;
+          }
         }
         img:first-child{
           position: absolute;
@@ -762,8 +813,6 @@ $txt_delay: 0.2s;
     text-align: center;
     margin-top: 60px;
     .button{
-      padding: 0 98px;
-      background: url('~@/assets/images/product_icon_arrow.png') #1fe4dc center left 30% no-repeat;
       margin-left: 8px;
     }
   }
@@ -801,44 +850,46 @@ $txt_delay: 0.2s;
   }
 }
 .hide4{
-  .b-title,.b-label{
+  .b-title,.b-label,.front-img,p,.f-params span,.f-img,.f-intro p{
     animation: fadeDown 0.5s ease-out 1 both!important;
   }
 }
 
+
 .hide5{
-  .b-title,.front-img,p,.f-params span,.f-img,.f-intro p{
+  .b-title,.b-label,p,.front-img,.f-div,.f-item{
     animation: fadeDown 0.5s ease-out 1 both!important;
   }
 }
 
 .hide6{
-  .b-title,.b-label,p,.front-img,.f-div,.f-item{
+  .b-title,.b-label,.hsxp-imgcon{
     animation: fadeDown 0.5s ease-out 1 both!important;
   }
 }
 
-.hide7{
-  .b-title,.b-label{
+.hide7,.hide8,.hide9{
+  .b-title,.b-label,.qmjt-imgcon,.qmjt-imgcon,.cgq-imgcon,.jzxj-imgcon{
     animation: fadeDown 0.5s ease-out 1 both!important;
   }
-}
-
-.hide8,.hide9,.hide10,.hide11{
-  .b-title,.b-label,.hsxp-imgcon,.qmjt-imgcon,.qmjt-imgcon,.cgq-imgcon,.jzxj-imgcon{
-    animation: fadeDown 0.5s ease-out 1 both!important;
+  .cgq-imgcon div{
+    animation: xinpian-close 0.2s steps(5) forwards $ani_delay!important;
   }
 }
 
-.hide12{
+.hide10{
+  .first-txt{
+    animation:lighting-txt-back $battery_time linear forwards !important;
+  }
   .battery-mask{
-    animation:lighting-back 0.5s ease-in-out forwards !important;
+    animation:lighting-back $battery_time linear forwards !important;
   }
+  
   .lighting{
-    animation:lighting1-back 0.5s ease-in-out forwards !important;
+    animation:lighting1-back $battery_time steps(9) forwards !important;
   }
   .lighting-span::before{
-    animation:num-reduce 0.5s linear forwards!important;
+    animation:num-reduce $num_time linear forwards!important;
   }
 }
 

src/page/layout/header/index.vue

@@ -93,6 +93,7 @@ export default {
         this.showCp('isearch', window.innerHeight - 68)
       }
     }
+
   },
   computed: {
     ...mapState({

src/page/navs/search/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
   <div class="search-con">
-    <div class="search-ban">
+    <div class="search-ban" :style="{marginLeft:(split-260)+ 'px'}">
       <div class="search-txt">
         <vcenter>
           <span>25</span>
@@ -22,7 +22,7 @@
       </div>
     </div>
     </div>
-    <Item :data='items' />
+    <Item :data='items' :split='split'/>
     <div class="more">
       <div class="result">
         <div class="result-btn">查看所有结果</div>
@@ -79,6 +79,7 @@ const items = [{
 }]
 
 export default {
+  props: ['split'],
   components: {
     Item,
     vcenter,
@@ -92,7 +93,9 @@ export default {
     }
   },
   computed: {},
-  watch: {},
+  watch: {
+
+  },
   // 方法集合
   methods: {
     pageChange () {
@@ -103,7 +106,6 @@ export default {
 
   },
   mounted () {
-
   }
 }
 </script>

src/page/navs/search/item/index.vue

@@ -1,6 +1,6 @@
 <template>
 <div class='item-con'>
-  <div class="item-item" v-for="(item,i) in data" :key="i">
+  <div class="item-item" :style="{paddingLeft:(split-260)+ 'px'}" v-for="(item,i) in data" :key="i">
     <div class="item">
       <div class="type">
         <vcenter>
@@ -39,6 +39,10 @@ export default {
         return []
       },
       type: Array
+    },
+    split: {
+      default: 0,
+      type: Number
     }
   },
   components: {vcenter},
@@ -73,14 +77,12 @@ $lHeight: 120px;
 .item-con {
   .item-item {
     background-color: #fff;
-    padding: 0 340px;
     border-bottom: 1px solid #e5e5e5;
     &:hover{
       background-color: #f6f6f6;
     }
     .item{
       max-width: 1200px;
-      margin: 0 auto;
       height: $lHeight;
       font-size: 0;
       position: relative;

src/page/navs/search/style.scss

@@ -3,13 +3,11 @@ $lHeight: 145px;
 .search-con {
   position: relative;
   width: 100%;
-  padding: 0 340px;
   background-color: #2b2b2b;
   height: $lHeight;
   line-height: $lHeight;
   .search-ban {
     position: relative;
-    margin: 0 auto;
     max-width: 1200px;
     height: $lHeight;
     .search-txt{