修改八目相机页面测距的动画

build/webpack.dev.conf.js

@@ -10,7 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
 
-const HOST = '192.168.0.158'
+const HOST = '192.168.0.89'
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {

src/assets/font/iconfont.css

@@ -1,13 +1,12 @@
 @font-face {
   font-family: 'iconfont';  /* project id 941679 */
-  src: url('//at.alicdn.com/t/font_941679_jorah6xuys.eot');
-  src: url('//at.alicdn.com/t/font_941679_jorah6xuys.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_941679_jorah6xuys.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_941679_jorah6xuys.woff') format('woff'),
-  url('//at.alicdn.com/t/font_941679_jorah6xuys.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_941679_jorah6xuys.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.eot');
+  src: url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.woff') format('woff'),
+  url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.svg#iconfont') format('svg');
 }
-
 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
@@ -204,3 +203,23 @@
 .icon-swhy:before {
   content: "\e601";
 }
+
+.icon-yuandian:before {
+  content: "\e65a";
+}
+
+.icon-shang:before {
+  content: "\e65c";
+}
+
+.icon-xia:before {
+  content: "\e65b";
+}
+
+.icon-kaiqi:before {
+  content: "\e65e";
+}
+
+.icon-guanbi:before {
+  content: "\e65d";
+}

src/components/Linecanvas/index.vue

@@ -6,7 +6,7 @@
 
 <script>
 
-let speed = 10
+let speed = 20
 
 export default {
   props: {
@@ -26,38 +26,52 @@ export default {
     let devicePixelRatio = window.devicePixelRatio || 1
     let lineTxt = [
       {
-        posi: [180, 150],
-        val: 1600
-      },
-      {
-        posi: [340, 290],
-        val: 1800
-      },
-      {
-        posi: [490, 150],
-        val: 800
-      },
-      {
-        posi: [580, 290],
-        val: 1800
-      },
-      {
-        posi: [700, 150],
-        val: 1000
-      }, {
-        posi: [660, 290],
-        val: 2200
-      }, {
-        posi: [820, 290],
-        val: 3000
+        posi: [840, 290],
+        val: '3.2米',
+        guideLine: [{
+          type: 'm',
+          val: [790, 320]
+        },
+        {
+          type: 'l',
+          val: [800, 280]
+        },
+        {
+          type: 'l',
+          val: [815, 280]
+        } ]
       },
       {
-        posi: [490, 450],
-        val: 8000
+        posi: [690, 395],
+        val: '5.4米',
+        guideLine: [{
+          type: 'm',
+          val: [640, 425]
+        },
+        {
+          type: 'l',
+          val: [650, 385]
+        },
+        {
+          type: 'l',
+          val: [665, 385]
+        } ]
       },
       {
-        posi: [850, 540],
-        val: 6000
+        posi: [920, 470],
+        val: '3.4米',
+        guideLine: [{
+          type: 'm',
+          val: [870, 490]
+        },
+        {
+          type: 'l',
+          val: [880, 460]
+        },
+        {
+          type: 'l',
+          val: [895, 460]
+        } ]
       }
     ]
 
@@ -68,24 +82,8 @@ export default {
       },
       {
         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]
-      }],
+        val: [790, 85]
+      } ],
 
       [{
         type: 'm',
@@ -96,12 +94,6 @@ export default {
       }, {
         type: 'l',
         val: [0, 420]
-      }, {
-        type: 'm',
-        val: [35, 400]
-      }, {
-        type: 'l',
-        val: [35, 110]
       } ],
 
       [{
@@ -110,65 +102,14 @@ export default {
       }, {
         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(() => {
+    let tempA = lineArr2.concat(lineTxt)
+    tempA.forEach(() => {
       testArr2.push([])
     })
-
     // 这里存放数据
     return {
       realWidth: 1091,
@@ -321,9 +262,12 @@ export default {
     start (newVal) {
       if (newVal) {
         this.index = 0
-        this.testArr2 = this.testArr2.map(item => {
+        let t = this.lineArr2.concat(this.lineTxt)
+        this.testArr2 = null
+        this.testArr2 = t.map(item => {
           return []
         })
+
         this.animated()
       } else {
         this.init()
@@ -333,10 +277,13 @@ export default {
   methods: {
     animated () {
       let drawTxt = () => {
-        this.ctx.font = 'bold 22px Arial'
+        this.ctx.font = 'normal 16px Arial'
         this.ctx.textAlign = 'center'
         this.ctx.textBaseline = 'bottom'
         this.ctx.fillStyle = '#fff'
+        this.ctx.strokeStyle = '#1fe4dc'
+        this.ctx.lineWidth = 1
+
         this.lineTxt.forEach(item => {
           this.ctx.fillText(item.val, item.posi[0], item.posi[1])
         })
@@ -355,13 +302,20 @@ export default {
           this.imgHeight * this.devicePixelRatio
         )
         this.ctx.strokeStyle = '#1fe4dc'
-        this.ctx.lineWidth = 5
+        this.ctx.lineWidth = 2
         this.ctx.beginPath()
 
-        arr.forEach(item => {
+        arr.forEach((item, index) => {
           item.forEach(i => {
             if (i.type === 'm') {
               this.ctx.moveTo(i.val[0], i.val[1])
+              this.ctx.stroke()
+              this.ctx.beginPath()
+              if (index < myArr.length) {
+                this.ctx.lineWidth = 2.5
+              } else {
+                this.ctx.lineWidth = 1
+              }
             } else {
               this.ctx.lineTo(i.val[0], i.val[1])
             }
@@ -400,18 +354,59 @@ export default {
         return arr
       }
 
+      let getGuideArr = () => {
+        let arr = []
+        this.lineTxt.forEach(() => {
+          arr.push([])
+        })
+        let intervalX, intervalY
+        this.lineTxt.forEach((item, index) => {
+          item.guideLine.forEach((sub, idx) => {
+            let lt = this.lineTxt[index]['guideLine']
+            if (sub.type === 'm') {
+              arr[index].push(sub)
+            }
+            if (idx < lt.length - 1) {
+              if (lt[idx + 1]['type'] !== 'm') {
+                intervalX = (lt[idx + 1]['val'][0] - lt[idx]['val'][0]) / speed
+                intervalY = (lt[idx + 1]['val'][1] - lt[idx]['val'][1]) / speed
+                let i = 0
+                while (i <= speed) {
+                  arr[index].push(Object.assign({}, sub, {
+                    val: [lt[idx]['val'][0] + i * intervalX, lt[idx]['val'][1] + i * intervalY],
+                    type: 'l'
+                  }))
+                  i++
+                }
+              }
+            }
+          })
+        })
+        return arr
+      }
+
+      let guideArr = getGuideArr()
+
       let myArr = getCutArr()
+      console.log(myArr)
 
       let maxLength = 0
+      let guideLength = 0
+
       myArr.forEach(item => {
         maxLength = Math.max(item.length, maxLength)
       })
+      guideArr.forEach(item => {
+        guideLength = Math.max(item.length, guideLength)
+      })
       let draw = () => {
         if (!this.start) {
           return
         }
-        if (this.index === maxLength) {
-          drawTxt()
+        if (this.index === maxLength + guideLength) {
+          setTimeout(() => {
+            drawTxt()
+          }, 300)
           return
         }
         myArr.forEach((item, index) => {
@@ -419,9 +414,18 @@ export default {
             item[this.index] && this.testArr2[index].push(item[this.index])
           })
         })
-        this.index++
 
+        if (this.index >= maxLength) {
+          guideArr.forEach((item, index) => {
+            item.forEach((sub, idx) => {
+              item[this.index - maxLength] && this.testArr2[myArr.length + index].push(item[this.index - maxLength])
+            })
+            console.log(this.testArr2)
+          })
+        }
+        this.index++
         drawLine(this.testArr2)
+
         requestAnimationFrame(draw)
       }
       draw()
@@ -438,43 +442,6 @@ export default {
         this.imgWidth * this.devicePixelRatio,
         this.imgHeight * this.devicePixelRatio
       )
-      // this.ctx.strokeStyle = '#1fe4dc'
-      // this.ctx.lineWidth = 5
-      // this.ctx.beginPath()
-      // this.ctx.moveTo(0, 100)
-      // this.ctx.lineTo(35, 110)
-      // this.ctx.lineTo(35, 400)
-      // this.ctx.moveTo(0, 420)
-      // this.ctx.lineTo(35, 400)
-      // this.ctx.lineTo(790, 430)
-      // this.ctx.lineTo(790, 90)
-      // this.ctx.lineTo(35, 110)
-      // this.ctx.moveTo(790, 90)
-      // this.ctx.lineTo(890, 0)
-      // this.ctx.moveTo(790, 430)
-      // this.ctx.lineTo(1045, 626)
-
-      // // 窗口1
-      // this.ctx.moveTo(110, 150)
-      // this.ctx.lineTo(110, 350)
-      // this.ctx.lineTo(305, 350)
-      // this.ctx.lineTo(305, 150)
-      // this.ctx.lineTo(110, 150)
-
-      // // 窗口2
-      // this.ctx.moveTo(440, 150)
-      // this.ctx.lineTo(438, 360)
-      // this.ctx.lineTo(540, 362)
-      // this.ctx.lineTo(540, 150)
-      // this.ctx.lineTo(440, 150)
-
-      // // 门
-      // this.ctx.moveTo(635, 150)
-      // this.ctx.lineTo(630, 423)
-      // this.ctx.lineTo(765, 428)
-      // this.ctx.lineTo(770, 150)
-      // this.ctx.lineTo(635, 150)
-      // this.ctx.stroke()
     }
   },
   mounted () {

src/components/compare/index.vue

@@ -29,7 +29,7 @@ export default {
   props: ['back', 'content', 'width', 'lslide', 'ltxt', 'rtxt', 'lmask', 'rmask'],
   data () {
     return {
-      bwidth: this.lslide || 500,
+      bwidth: this.lslide || 550,
       slide,
       paused: false,
       transition: 'none',
@@ -152,6 +152,7 @@ export default {
     background-size: auto 100%;
     overflow: hidden;
     z-index: 15;
+    min-width: 1px;
   }
 
   .overlap .o-move::before {

src/components/spinner/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="spinner">
+    <input v-model="num" min='1' step="1" type="number">
+    <div class="icon">
+      <i @click="num++" class="iconfont icon-shang"></i>
+      <i @click="num>1?num--:1" class="iconfont icon-xia"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      num: 1
+    }
+  },
+  watch: {
+    num (newVal) {
+      this.$emit('count', newVal)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .spinner{
+    border: 1px #e3e3e3 solid;
+    height: 50px;
+    width: 250px;
+    display: flex;
+  }
+  .iconfont{
+    cursor: pointer;
+  }
+  .icon{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+    flex: auto;
+    border-left: 1px solid #e3e3e3;
+  }
+  input{
+    width: 200px;
+    flex-shrink: 1;
+    text-align: center;
+    color: #787a7a;
+    font-size: 18px;
+    height: 100%;
+    background: #fff;
+    border: none;
+  }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button{
+    appearance: none !important;
+    margin: 0;
+  }
+</style>

src/page/binocular/style.scss

@@ -110,7 +110,8 @@ $txt_delay: 0.2s;
   .benefit {
     overflow: hidden;
     width: 1300px;
-    margin: 150px auto 0;
+    padding-top: 300px;
+    margin: 0 auto 0;
     position: relative;
     left: -28px;
     .b-title {

src/page/cases/index.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
   </div>
-  <div class="case-body">
+  <div class="case-body" :style="{marginLeft:(split-380)+ 'px'}">
     <div style="display:inline-block" v-for="(item,i) in cardArr" :key="i">
       <card class="card" :data="item" :style="{marginRight:(i+1)%4===0?'0':'50px'}"></card>
     </div>

src/page/cases/style.scss

@@ -69,7 +69,6 @@
 }
 .case-body {
   max-width: 1470px;
-  margin-left: 220px;
   .card {
     margin-bottom: 20px;
   }

src/page/eight/index.vue

@@ -10,9 +10,9 @@
           <p><span class="money">￥4999</span>起</p>
           <p class="p1">骁龙835高性能处理器，6颗200°超广角鱼眼镜头</p>
           <p class="p2">高速5GWi-Fi传输方式，超强AI算法自动建模</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>
+          <div class="btns" @click="$router.push({name:'purchase'})">
+            <a class="button"><vcenter><img src="@/assets/images/product_icon_arrow.png" alt=""></vcenter></a>
+            <a class="button">立即购买</a>
           </div>
         </div>
       </div>
@@ -140,14 +140,9 @@
         <div class="b-label">更极致的空间还原度</div>
         <Linecanvas :start='runLineCanvas' class="line-canvas" />
         <div class="line-txt">
-          <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>
-          </div>
+            <span>显示测距</span>
+            <img @click="runLineCanvas=!runLineCanvas" :src="runLineCanvas?require('@/assets/images/canvas-right.png'):require('@/assets/images/canvas-left.png')" alt="">
+            <!-- <span v-show="!runLineCanvas" @click="runLineCanvas=!runLineCanvas" class="line-circle"></span> -->
         </div>
       </div>
       <div class="qingxidu">
@@ -227,7 +222,7 @@
           </div>
         </div>
         <div class="btns">
-          <a href="" class="button">立即购买</a>
+          <a :to="{name:'purchase'}" href="" class="button">立即购买</a>
         </div>
       </div>
     </div>

src/page/eight/style.scss

@@ -110,7 +110,8 @@ $num_time: 0.6s;
   .benefit {
     overflow: hidden;
     width: 1300px;
-    margin: 300px auto 0;
+    padding-top: 300px;
+    margin: 0 auto;
     position: relative;
     left: -28px;
 
@@ -540,24 +541,21 @@ $num_time: 0.6s;
       margin-top: 40px;
     }
     .line-txt{
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
       width: 1100px;
-      margin: 20px auto 0;
+      margin: 0 auto;
       position: relative;
-      div{
-        flex: 1;
-        p{
-          font-size: 24px;
-          color: #6b6b6c;
-        }
-
+      span{
+        font-size: 24px;
+        color: #6b6b6c;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10px;
       }
       img{
         cursor: pointer;
         width: 80px;
         position: relative;
+        vertical-align: middle;
       }
       .line-circle{
         cursor: pointer;

src/page/purchase/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="purchase-layout">
+    <div class="plate01">
+      <div class="p1-banner">
+        <span>概览</span>
+        <span>技术规格</span>
+      </div>
+      <img
+        class="product-img"
+        :style="{marginLeft:(split - 170)+ 'px'}"
+        src="@/assets/images/banner_pro.png"
+        alt
+      >
+      <div class="layout">
+        <h1>购买 4Dkankan Pro</h1>
+        <p class="sub">骁龙835高性能处理器、6颗200°超广角鱼眼镜头、高速5GWi-Fi传输方式、超强AI算法自动建模</p>
+        <p class="price">
+          ￥4999
+          <span>【新品现货开售 | 赠拍摄之家】</span>
+        </p>
+        <template>
+          <p class="title">颜色</p>
+          <div class="detail-box">
+            <i class="iconfont icon-yuandian">静谧黑</i>
+          </div>
+          <p class="title">服务</p>
+          <div class="detail-box">
+            <ul>
+              <li v-for="(item, i) in detail.left" :key="i">{{item}}</li>
+            </ul>
+            <span class="line"></span>
+            <ul>
+              <li v-for="(item, i) in detail.right" :key="i">{{item}}</li>
+            </ul>
+          </div>
+          <p class="title">赠品</p>
+          <div class="detail-box zhijia">
+            <img src="@/assets/images/zhijia.png" alt>
+            <span>官方拍摄支架x1</span>
+          </div>
+        </template>
+        <p class="title">数量</p>
+        <spinner @count="handleSpinner"/>
+        <div>
+          <div class="btns">
+            <a href class="button add-cart">
+              <vcenter>
+                <img src="@/assets/images/product_icon_arrow_l.png" alt>
+                <span>加入购物车</span>
+              </vcenter>
+            </a>
+            <a href class="button">
+              <vcenter>
+                <img src="@/assets/images/product_icon_arrow.png" alt>
+                <span>立即购买</span>
+              </vcenter>
+            </a>
+          </div>
+          <div class="sub">* 付款成功后5个工作日内发货，默认顺丰快递包邮</div>
+        </div>
+      </div>
+    </div>
+    <div class="plate02" :style="{marginLeft:split + 'px'}">
+      <div class="b-title">技术规格</div>
+      <div class="params-con">
+        <div class="params-item" v-for="(item,index) in guige" :key="index">
+          <div class="p-l">{{item.name}}</div>
+          <div class="p-r">
+            <div v-html="sub" v-for="(sub,i) in item.val" :key="i"></div>
+          </div>
+        </div>
+      </div>
+      <div class="sub">
+        <p>注：1. 本页面所列配置及参数均以实际上市产品为准，如有变更，恕不另行通知；</p>
+        <p>2. Android™ is a trademark of Google Inc.</p>
+        <p>3. 使用本设备时，请与植入的医疗设备（植入耳蜗，心脏起搏器等）至少保持15厘米距离</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import spinner from '@/components/spinner'
+import vcenter from '@/components/vcenter'
+
+export default {
+  components: {
+    spinner,
+    vcenter
+  },
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  },
+  data () {
+    let detail = {
+      left: [
+        '数据永久存储',
+        '高速上传计算队列',
+        '场景分享、热点编辑、隐私加密'
+      ],
+      right: ['多种个性化功能', '附送30G终身容量']
+    }
+    let guige = [
+      {
+        name: '容量和内存',
+        val: ['LPDDR4X双通道', '6G内存', 'UFS 2.1', '64GB 机身存储']
+      },
+      {
+        name: '机身尺寸和重量',
+        val: ['高度 = 153.3m', '宽度 = 74.5mm', '厚度 = 7.9mm', '重量 = 170g']
+      },
+      {
+        name: '处理器平台',
+        val: [
+          'Qualcomm® 骁龙™ 845 处理器',
+          '10nm 先进制程',
+          '单核主频可达 2.8GHz',
+          'Adreno™ 630 图形处理器，主频可达 700MHz',
+          '配备人工智能引擎（AI Engine）'
+        ]
+      },
+      {
+        name: '网络',
+        val: ['支持 VoLTE 高质量宽带', '支持三载波聚', '支持 LTE B41 4x4 MIMO']
+      },
+      {
+        name: '屏幕',
+        val: [
+          '6.17 英寸 In-Cell 全高清显示屏',
+          '2242 x 1080 分辨率，403 ppi',
+          '康宁®第三代大猩猩®玻璃'
+        ]
+      }
+    ]
+    return {
+      detail,
+      guige
+    }
+  },
+  methods: {
+    handleSpinner (data) {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./style.scss";
+</style>

src/page/purchase/style.scss

@@ -0,0 +1,198 @@
+.purchase-layout {
+  overflow: hidden;
+}
+
+.btns{
+  font-size: 0;
+}
+.btns .button{
+  width: 250px;
+  height: 50px;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 20px;
+  line-height: 50px;
+  color: #414141;
+  font-size: 14px;
+  padding-left: 75px;
+  img{
+    vertical-align: middle;
+  }
+  span{
+    vertical-align: middle;
+    padding-left: 2px;
+  }
+}
+
+.plate01{
+  background: url("~@/assets/images/purchase_bg.png") #f8f9fc top center no-repeat;
+  padding: 0 0 100px;
+  .p1-banner{
+    background: #fff;
+    height: 65px;
+    text-align: right;
+    padding-right: 100px;
+    span{
+      display: inline-block;
+      margin-left: 50px;
+      padding-top: 40px;
+      cursor: pointer;
+    }
+  }
+  .product-img{
+    width: 170px;
+    margin-top: 75px;
+  }
+  .layout{
+    width: 540px;
+    margin-top: 20px;
+    margin-left: 300px;
+    display: inline-block;
+    vertical-align: top;
+    h1{
+      font-size: 36px;
+      font-weight: 400;
+      line-height: 40px;
+    }
+    .sub{
+      font-size: 12px;
+      color: #999999;
+      line-height: 35px;
+      &:first-of-type{
+        text-align-last: justify;
+      }
+    }
+    .price{
+      margin-top: 20px;
+      font-size: 36px;
+      line-height: 40px;
+      font-weight: 400;
+      border-bottom: 1px #e2e2e2 solid;
+      span{
+        font-size: 12px;
+        color: #1fe4dc;
+        font-weight: bold;
+      }
+    }
+    .title{
+      color: #333333;
+      line-height: 20px;
+      margin: 10px 0; 
+    }
+    .detail-box{
+      display: inline-block;
+      border: 1px solid #70eee9;
+      background: #f8fefe;
+      padding: 5px 85px;
+      height: 100px;
+      box-sizing: border-box;
+      &:first-of-type{
+        padding: 15px 95px;
+        height: auto;
+        box-sizing: content-box;
+      }
+      .icon-yuandian::before{
+        margin-right: 6px;
+      }
+      .line{
+        display: inline-block;
+        width: 1px;
+        height: 80px;
+        background: #e2e2e2;
+        margin: 5px 39px 0 40px;
+      }
+      ul{
+        display: inline-block;
+        vertical-align: top;
+        &:last-child{
+          float: right;
+          margin-left: 20px;
+        }
+        li{
+          font-size: 12px;
+          color: #999;
+          list-style:disc;
+          line-height: 1.5;
+          margin: 8px 0;
+        }
+      }
+    }
+    .zhijia{
+      width: 100%;
+      img{
+        vertical-align: middle;
+        margin-right: 20px;
+        height: 100%;
+      }
+      span{
+        vertical-align: middle;
+        font-size: 12px;
+        color: #999;
+      }
+    }
+    .btns {
+      img{
+        width: 24px;
+      }
+    }
+    .btns .add-cart{
+      background: #e7e7e7;
+      margin-right: 40px;
+    }
+  }
+}
+
+.plate02{
+  width: 845px;
+  margin: 130px 0 130px 600px ;
+  text-align: center;
+  .b-title{
+    font-size: 30px;
+  }
+  .params-con{
+    width: 100%;
+    margin: 35px 0 0;
+    .params-item{
+      width: 100%;
+      border-top: 1px solid #e7e7e7;
+      text-align: left;
+      padding: 20px 0;
+      &:last-of-type{
+       border-bottom: 1px solid #e7e7e7;
+      }
+      &>div{
+        display: inline-block;
+        text-align: left;
+      }
+      .p-l{
+        width: 300px;
+        height: 100%;
+        text-align: left;
+        font-size: 18px;
+        line-height: 40px;
+        vertical-align: top;
+      }
+      .p-r{
+        width: calc(100% - 320px);
+        height: 100%;
+        text-align: left;
+        div{
+          line-height: 40px;
+          font-size: 14px;
+          margin-right: 50px;
+        }
+      }
+    }
+  }
+  .sub{
+    font-size: 12px;
+    line-height: 20px;
+    color: #949494;
+    text-indent: 24px;
+    text-align: left;
+    margin-top: 15px;
+    p:first-of-type{
+      text-indent: 0px;
+    }
+  }
+}

src/router/index.js

@@ -37,6 +37,11 @@ export default new Router({
       component: () => import('@/page/eight')
     },
     {
+      path: '/purchase',
+      name: 'purchase',
+      component: () => import('@/page/purchase')
+    },
+    {
       path: '/service/down',
       name: 'service_down',
       component: () => import('@/page/service/down')