0823

src/App.vue

@@ -27,7 +27,7 @@ import chat from '@/page/chat'
 import browser from '@/util/browser'
 import {mapState} from 'vuex'
 
-// import { detectZoom } from '@/util'
+import { detectZoom } from '@/util'
 
 export default {
   name: 'App',
@@ -41,7 +41,8 @@ export default {
       isNotChorme: browser.firefox || browser.edge,
       isIE: browser.trident,
       isPad: browser.iPad,
-      gre150: false
+      gre150: false,
+      devicePixelRatio: detectZoom()
     }
   },
   watch: {
@@ -56,21 +57,21 @@ export default {
     },
     '$route.path': {
       handler: function (val, oldVal) {
-        if (this.deviceLogin && val !== '/scene') {
+        if (this.deviceLogin && val !== '/scene' && val !== '/consumption') {
           this.$store.dispatch('logout')
           this.$router.push({name: 'home'})
         }
-        if (devicePixelRatio !== 1) {
-          if (this.isNotChorme || this.isIE) {
-            setTimeout(() => {
-              this.fixHeight()
-            }, 1500)
-          } else {
-            this.$nextTick(() => {
-              this.fixHeight()
-            })
-          }
-        }
+        // if (this.devicePixelRatio[0] !== 1) {
+        //   if (this.isNotChorme || this.isIE) {
+        //     setTimeout(() => {
+        //       this.fixHeight()
+        //     }, 1500)
+        //   } else {
+        //     this.$nextTick(() => {
+        //       this.fixHeight()
+        //     })
+        //   }
+        // }
       },
       // 深度观察监听
       deep: true
@@ -105,7 +106,7 @@ export default {
   methods: {
     fixHeight () {
       if (this.isManage) return
-      let z = Math.round(devicePixelRatio * 100)
+      let z = Math.round(this.devicePixelRatio[0] * 100)
       this.scale = (100 / z) || 1
       let appH = document.querySelector('#app').offsetHeight
       let hpx = z !== 100 && this.gre150 ? appH * this.scale + 'px' : 'auto'
@@ -121,35 +122,35 @@ export default {
   },
   mounted () {
     this.$store.dispatch('checkToken')
-    let reZoom = () => {
-      if (!this.isPad) {
-        let zoom = Math.round(devicePixelRatio * 100)
-        let realWidth = document.documentElement.clientWidth || document.body.clientWidth
-        this.scale = (100 / zoom) || 1
-        this.gre150 = zoom > 150
-
-        if (zoom !== 100 && this.gre150) {
-          this.$toast.show('warn', `您当前浏览器的缩放比例是${zoom}%,可能会影响某些功能的正常<br/>使用，请尝试调整浏览器比例为100%以获得更佳的浏览体验。`)
-          document.querySelector('html').style.width = realWidth / this.scale + 'px'
-          setTimeout(() => {
-            this.$bus.$emit('hadload', true)
-          }, 300)
-        } else {
-          this.$toast.hideShow()
-          document.querySelector('html').style.width = '100%'
-        }
-        this.fixHeight()
-      }
-    }
+    // let reZoom = () => {
+    //   if (!this.isPad) {
+    //     let zoom = Math.round(this.devicePixelRatio[0] * 100)
+    //     let realWidth = document.documentElement.clientWidth || document.body.clientWidth
+    //     this.scale = (100 / zoom) || 1
+    //     this.gre150 = zoom > 150
+
+    //     if (zoom !== 100 && this.gre150) {
+    //       this.$toast.show('warn', `您当前浏览器的缩放比例是${zoom}%,可能会影响某些功能的正常<br/>使用，请尝试调整浏览器比例为100%以获得更佳的浏览体验。`)
+    //       document.querySelector('html').style.width = realWidth / this.scale + 'px'
+    //       setTimeout(() => {
+    //         this.$bus.$emit('hadload', true)
+    //       }, 300)
+    //     } else {
+    //       this.$toast.hideShow()
+    //       document.querySelector('html').style.width = '100%'
+    //     }
+    //     this.fixHeight()
+    //   }
+    // }
 
-    window.onload = () => {
-      if (!this.isPad) {
-        reZoom()
-      }
-    }
+    // window.onload = () => {
+    //   if (!this.isPad) {
+    //     reZoom()
+    //   }
+    // }
 
     window.addEventListener('resize', () => {
-      reZoom()
+      // reZoom()
     })
     this.$bus.$on('showMask', (index) => {
       clearTimeout(this.timeout)

src/components/card/index.vue

@@ -17,7 +17,7 @@
         <span >{{data.nickName}}</span>
       </div>
       <div class="u-r">
-        <img :src="data.sceneScheme>=4?`${$cdn}images/eye_lite.png`:`${$cdn}images/eye-pro.png`" alt>
+        <img :style="{width:data.sceneScheme>=4?'20px':'18px',height:data.sceneScheme>=4?'20px':'18px'}" :src="data.sceneScheme>=4?`${$cdn}images/eye-pro.png`:`${$cdn}images/eye_lite.png`" alt>
         <span>{{data.sceneScheme>=4?'Pro':'Lite'}}</span>
       </div>
     </div>
@@ -178,12 +178,12 @@ export default {
         flex: 1;
         text-align: right;
         img{
-          width: 16px;
-          height: 16px;
-          vertical-align: top;
+          width: 18px;
+          height: 18px;
+          vertical-align: center;
         }
         span{
-          vertical-align: top;
+          vertical-align: center;
         }
       }
     }
@@ -198,4 +198,14 @@ export default {
     }
   }
 }
+
+@media screen and (min-width: 2000px) {
+  .card-con {
+    width: 420px;
+    .card-img{
+      width: 420px;
+      height: 260px;
+    }
+  }
+ }
 </style>

src/components/compare/index.vue

@@ -79,7 +79,6 @@ export default {
     let move = this.isMobile ? 'touchmove' : 'mousemove'
     let up = this.isMobile ? 'touchend' : 'mouseup'
 
-    console.log(down)
     this.downHandle = ev => {
       ev.preventDefault()
       let width = this.bwidth

src/components/table/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="table-layout">
     <ul class="t-header">
-      <li v-for="(item,i) in header" :key="i" :style="{width:item.width?item.width+'px':(100/header.length)+'%'}">
+      <li v-for="(item,i) in header" :key="i" :style="{width:item.width&&innerW>1500?item.width+'px':(100/header.length)+'%'}">
         <slot :data='item' name='header'></slot>
       </li>
     </ul>
     <div class="t-con">
       <ul class="t-item" v-for="(item,i) in data" :key="i">
-        <li v-for="(sub,j) in header" :key='j' :style="{width:sub.width?sub.width+'px':(100/header.length)+'%'}">
+        <li v-for="(sub,j) in header" :key='j' :style="{width:sub.width&&innerW>1500?sub.width+'px':(100/header.length)+'%'}">
           <slot :data='item[sub.key]' :item='item' :canclick='sub.canclick' name='item'></slot>
         </li>
       </ul>
@@ -19,7 +19,10 @@ export default {
   props: ['data', 'header'],
   data () {
     return {
+      innerW: window.innerWidth
     }
+  },
+  mounted () {
   }
 }
 </script>

src/components/table/style.scss

@@ -23,7 +23,11 @@
       li{
         text-align: center;
         display: inline-block;
+        span{
+          word-break: break-all;
+        }
       }
     }
   }
-}
+}
+

src/components/tablePaging/index.vue

@@ -136,7 +136,7 @@ export default {
       text-align: center;
       margin: 0 10px;
       display: inline-block;
-      line-height:1.2;
+      line-height:1;
     }
   }
   .page-total{

src/components/toast/capacityRecharge.vue

@@ -74,10 +74,11 @@
             <p class="time">{{deadLine}}</p>
           </div>
         </div>
-        <div class="amount">
+        <div class="amount"  v-if="paytype !== 'paypal'">
           <div class="attr">应付金额：</div>
           <div class="val">
             <p class="a-price">￥{{activeItem.price}}</p>
+            <img class="scanicon" :src="`${$cdn}images/scanicon.png`" alt="">
             <img class="price-img" :src="response.src" alt="">
             <div class="dec">使用<span style="color:#ff0000">{{payZH}}</span>app扫码完成支付</div>
           </div>
@@ -124,7 +125,6 @@ export default {
       }
     },
     activeItem (newVal) {
-      console.log(newVal)
       this.pay()
     },
     paytype () {
@@ -143,8 +143,6 @@ export default {
       deadLine: '',
       currentId: '',
       currentType: 2,
-      language: localStorage.getItem('language'),
-      token: localStorage.getItem('token'),
       orderSn: ''
     }
   },
@@ -169,19 +167,14 @@ export default {
         let res = await this.$http
           .post('/user/order/queryOrderStatus', params, {
             headers: {
-              token: this.token
+              token: localStorage.getItem('token')
             }
           })
         let response = res.data
         if (response.code === 0 && response.data) {
           this.t1 = null
           this.t1 && clearInterval(this.t1)
-          this.$router.replace({
-            name: 'payresult',
-            params: {
-              isSuccess: 'success'
-            }
-          })
+          this.$emit('closePoint', true)
         }
       }
     },
@@ -195,13 +188,13 @@ export default {
         unitSize: 1,
         years: 1,
         skuSn,
-        abroad: this.language === 'en' ? 1 : 0
+        abroad: localStorage.getItem('language') === 'en' ? 1 : 0
       }
 
       let res = await this.$http
         .post('/user/order/expansionOrder', params, {
           headers: {
-            token: this.token
+            token: localStorage.getItem('token')
           }
         })
 
@@ -223,7 +216,7 @@ export default {
         let res = await this.$http
           .post(`/order/pay/${PAYSSTR[payType]}`, params, {
             headers: {
-              token: this.token
+              token: localStorage.getItem('token')
             }
           })
         let response = res.data
@@ -236,6 +229,8 @@ export default {
         this.response = response.data
         this.inverRequest()
       } else {
+        this.t1 = null
+        this.t1 && clearInterval(this.t1)
         this.$toast.show('warn', '正在跳转至paypal支付链接，请稍等')
       }
     },
@@ -247,7 +242,7 @@ export default {
       let res = await this.$http
         .post('/user/order/getExpansionPrice', params, {
           headers: {
-            token: this.token
+            token: localStorage.getItem('token')
           }
         })
       let data = res.data
@@ -268,6 +263,7 @@ export default {
     this.t1 = null
   },
   mounted () {
+
   }
 }
 </script>

src/components/toast/editInvoice.vue

@@ -11,7 +11,7 @@
       </div>
       <div class="invoice-con">
         <div class="input-con open-edu">
-          <input type="text" v-model="edu" placeholder="请输入开金额">
+          <input oninput="value=Math.max(Number(value.replace(/[^\d]/g,'')),1)" type="text" v-model="edu" placeholder="请输入开金额">
           <span>可开票额度：{{edititem.max}}元</span>
         </div>
         <div class="invoice edit-invoice">
@@ -90,12 +90,17 @@ export default {
       token: localStorage.getItem('token')
     }
   },
-  watch: {},
+  watch: {
+  },
   methods: {
-    handleClick () {
-      this.$emit('closePoint')
+    handleClick (item = '') {
+      this.edu = ''
+      this.normal = {}
+      this.zengzhi = {}
+      this.editAdd = {}
+      this.address = {}
+      this.$emit('closePoint', item)
     },
-
     async saveInvoice () {
       let params = {}
       let invoiceType = ''
@@ -120,9 +125,13 @@ export default {
           bankAccount
         }
       }
+      let {shipName = '', shipMobile = '', shipAddress = ''} = this.editAdd
+
       this.editAdd.shipAreaPath = this.tempSelect.join(',')
       this.editAdd.amount = Number(this.edu)
-      this.editAdd.cameraId = this.edititem.cameraId
+      this.editAdd.shipName = shipName || ''
+      this.editAdd.shipMobile = shipMobile || ''
+      this.editAdd.shipAddress = shipAddress || ''
 
       let temp = Object.keys(this.editAdd)
       temp.forEach(item => {
@@ -130,12 +139,20 @@ export default {
       })
       let arr = Object.keys(params)
       for (let i = 0; i < arr.length; i++) {
-        let condition = (arr[i] === 'invoiceType' && params[arr[i]] === 2)
-        if (!params[arr[i]] && (arr[i] !== 'code' && condition)) {
+        if (!params[arr[i]]) {
           return this.$toast.show('warn', '信息填写不能为空')
         }
       }
 
+      params['cameraId'] = this.edititem.cameraId
+      // for (let i = 0; i < arr.length; i++) {
+      //   let condition = (arr[i] === 'invoiceType' && params[arr[i]] === 2)
+      //   console.log(condition)
+      //   if (!params[arr[i]] && (arr[i] !== 'code' && condition)) {
+      //     return this.$toast.show('warn', '信息填写不能为空')
+      //   }
+      // }
+
       let res = await this.$http
         .post('/user/invoice/add', params, {
           headers: {
@@ -146,18 +163,17 @@ export default {
 
       if (response.code === 0) {
         this.$toast.show('success', '开票成功', () => {
-          this.visible = false
+          this.handleClick()
         })
       } else {
         return this.$toast.show('warn', '信息填写不能为空', () => {
-          this.visible = false
+          this.handleClick()
         })
       }
     },
     getCurrentSelect (data) {
       this.tempSelect = data
     }
-
   }
 }
 </script>

src/components/toast/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <pointRecharge :pointid='pointid' :pointitem='pointitem' :pointchildName='pointchildName' :visible='ponintVisible' @closePoint="()=>{ponintVisible = false}"/>
-    <capacityRecharge :capacityid='capacityid' :capacityitem='capacityitem' :capacitychildName='capacitychildName' :visible='capacityvisible' @closePoint="()=>{capacityvisible = false}"/>
-    <editInvoice :edititem=editItem :visible='editVisible' @closePoint="()=>{editVisible = false}"/>
+    <pointRecharge :pointid='pointid' :pointitem='pointitem' :pointchildName='pointchildName' :visible='ponintVisible' @closePoint="pointshandle"/>
+    <capacityRecharge :capacityid='capacityid' :capacityitem='capacityitem' :capacitychildName='capacitychildName' :visible='capacityvisible' @closePoint="capacityhandle"/>
+    <editInvoice :edititem=editItem :visible='editVisible' @closePoint="invoicehandle"/>
     <showInvoice :showitem=showItem :visible='showVisible' @closePoint="()=>{showVisible = false}"/>
     <binding :btype="bindingType" :visible='bindingVisible' @closePoint="()=>{bindingVisible = false,emitCallback()}"/>
     <div
@@ -102,6 +102,23 @@ export default {
   watch: {},
   mounted () {},
   methods: {
+    capacityhandle (data) {
+      if (data) {
+        this.callback()
+      }
+      this.capacityvisible = false
+    },
+
+    invoicehandle (data) {
+      this.editVisible = false
+    },
+
+    pointshandle (data) {
+      if (data) {
+        this.callback()
+      }
+      this.ponintVisible = false
+    },
     emitCallback () {
       this.callback()
       this.visible = false

src/components/toast/pointRecharge.vue

@@ -74,11 +74,12 @@
             </div>
           </div>
         </div>
-        <div class="amount">
+        <div class="amount"  v-if="paytype !== 'paypal'">
           <div class="attr">应付金额：</div>
           <div class="val">
             <p class="a-price">￥{{activeItem.price}}</p>
             <img class="price-img" :src="response.src" alt="">
+            <img class="scanicon" :src="`${$cdn}images/scanicon.png`" alt="">
             <div class="dec">
               使用
               <span style="color:#ff0000">{{payZH}}</span>app扫码完成支付
@@ -140,9 +141,7 @@ export default {
       pointType,
       activeItem: '',
       currentId: '',
-      currentType: 1,
-      language: localStorage.getItem('language'),
-      token: localStorage.getItem('token')
+      currentType: 1
     }
   },
   watch: {
@@ -181,42 +180,39 @@ export default {
       if (this.t1) {
         let params = {
           orderSn: this.orderSn,
-          orderType: 2,
+          orderType: 1,
           payType: PAYSID[this.paytype]
         }
         let res = await this.$http
           .post('/user/order/queryOrderStatus', params, {
             headers: {
-              token: this.token
+              token: localStorage.getItem('token')
             }
           })
         let response = res.data
         if (response.code === 0 && response.data) {
           this.t1 = null
           this.t1 && clearInterval(this.t1)
-          this.$router.replace({
-            name: 'payresult',
-            params: {
-              isSuccess: 'success'
-            }
-          })
+
+          this.$emit('closePoint', true)
         }
       }
     },
     async pay () {
-      let {price} = this.activeItem
+      // let {price} = this.activeItem
 
       let params = {
         cameraId: this.pointid,
-        points: price,
+        // points: price,
+        points: '1',
         payType: PAYSID[this.paytype],
-        abroad: this.language === 'en' ? 1 : 0
+        abroad: localStorage.getItem('language') === 'en' ? 1 : 0
       }
 
       let res = await this.$http
         .post('/user/order/rechargeOrder', params, {
           headers: {
-            token: this.token
+            token: localStorage.getItem('token')
           }
         })
 
@@ -238,7 +234,7 @@ export default {
         let res = await this.$http
           .post(`/order/pay/${PAYSSTR[payType]}`, params, {
             headers: {
-              token: this.token
+              token: localStorage.getItem('token')
             }
           })
         let response = res.data
@@ -251,6 +247,8 @@ export default {
         this.response = response.data
         this.inverRequest()
       } else {
+        this.t1 = null
+        this.t1 && clearInterval(this.t1)
         this.$toast.show('warn', '正在跳转至paypal支付链接，请稍等')
       }
     }

src/components/toast/showInvoice.vue

@@ -12,18 +12,18 @@
       <div class="show-invoice">
         <div class="invoice-p">
           <p>发票信息</p>
-          <p>发票抬头：{{showitem.title||'暂无'}}</p>
-          <p>税号：{{showitem.code||'暂无'}}</p>
-          <p>注册地址：{{showitem.organizedAddress||'暂无'}}</p>
-          <p>电话号码：{{showitem.registerPhone||'暂无'}}</p>
-          <p>开户银行：{{showitem.bankName||'暂无'}}</p>
-          <p>银行账号：{{showitem.bankAccount||'暂无'}}</p>
+          <p>发票抬头：{{showitem.title||'无'}}</p>
+          <p>税号：{{showitem.code||'无'}}</p>
+          <p>注册地址：{{showitem.organizedAddress||'无'}}</p>
+          <p>电话号码：{{showitem.registerPhone||'无'}}</p>
+          <p>开户银行：{{showitem.bankName||'无'}}</p>
+          <p>银行账号：{{showitem.bankAccount||'无'}}</p>
         </div>
         <div class="address-p">
           <p>收货地址</p>
-          <p>联系人：{{showitem.shipName||'暂无'}}</p>
-          <p>联系电话：{{showitem.shipMobile||'暂无'}}</p>
-          <p>收件地址：{{showitem.shipAreaPath}}{{showitem.shipAddress||'暂无'}}</p>
+          <p>联系人：{{showitem.shipName||'无'}}</p>
+          <p>联系电话：{{showitem.shipMobile||'无'}}</p>
+          <p>收件地址：{{showitem.shipAreaPath}}{{showitem.shipAddress||'无'}}</p>
         </div>
       </div>
     </div>

src/components/toast/style.scss

@@ -234,6 +234,18 @@ $border-color: #e7e7e7;
           top: -16px;
           .price-img{
             width: 180px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.2);
+            margin: 18px 0 12px;
+          }
+          .scanicon{
+            position: absolute;
+            left: 210px;
+            width: 200px;
+            top: 30px;
+            height: auto;
+          }
+          .dec{
+            text-align: center;
           }
         }
       }

src/components/toast/toast.js

@@ -40,17 +40,19 @@ Toast.install = function (Vue) {
       instance.callback = callback || function () {
       }
     },
-    showCapacityRecharge: (item, childName, id) => {
+    showCapacityRecharge: (item, childName, id, callback) => {
       instance.capacityvisible = true
       instance.capacityitem = item
       instance.capacitychildName = childName
       instance.capacityid = id
+      instance.callback = callback || function () {}
     },
-    showPointRecharge: (item, childName, id) => {
+    showPointRecharge: (item, childName, id, callback) => {
       instance.ponintVisible = true
       instance.pointitem = item
       instance.pointchildName = childName
       instance.pointid = id
+      instance.callback = callback || function () {}
     },
     showBinding: (val, callback) => {
       instance.bindingVisible = true
@@ -58,9 +60,11 @@ Toast.install = function (Vue) {
       instance.callback = callback || function () {
       }
     },
-    showInvoice: item => {
+    showInvoice: (item, callback) => {
       instance.editVisible = true
       instance.editItem = item
+      instance.callback = callback || function () {
+      }
     },
     showInvoiceDetail: item => {
       instance.showVisible = true

src/main.js

@@ -21,7 +21,7 @@ let router = require('./router').default
 
 Vue.prototype.$http = axios
 // Vue.prototype.$serverName = 'http://192.168.0.10:8080/'
-Vue.prototype.$serverName = 'http://pro.4dkankan.com/'
+Vue.prototype.$serverName = 'https://pro.4dkankan.com/'
 
 // Vue.prototype.$serverName = ''
 

src/page/about/index.vue

@@ -17,7 +17,7 @@
       <div class="plate02 ">
         <img :src="`${$cdn}images/hezhao.png`" alt>
       </div>
-      <div class="plate03" :style="{marginLeft:(split - 405)+ 'px'}">
+      <div class="plate03" :style="{marginLeft:(split - 390)+ '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}">
@@ -59,7 +59,7 @@ import {mapState} from 'vuex'
 import aboutBg from '@/components/aboutBg'
 import touch from '@/components/touch'
 import footer from '@/page/layout/footer'
-import { getPosition } from '@/util'
+import { getPosition, detectZoom } from '@/util'
 
 // import * as luxy from 'luxy.js'
 
@@ -86,6 +86,7 @@ export default {
       }
     ]
     return {
+      devicePixelRatio: detectZoom(),
       imgs,
       iactive: 0
     }
@@ -120,7 +121,7 @@ export default {
       }
       window.addEventListener('scroll', this.scrollHandle)
       let removeListener = () => {
-        Math.round(devicePixelRatio * 100) !== 100 && window.removeEventListener('scroll', this.scrollHandle)
+        Math.round(this.devicePixelRatio[0] * 100) !== 100 && window.removeEventListener('scroll', this.scrollHandle)
       }
       removeListener()
       window.addEventListener('resize', () => {

src/page/about/style.scss

@@ -94,7 +94,6 @@ $txt_delay: 0.2s;
       align-items: flex-start;
       margin-bottom: 170px;
       .touch-layout {
-        margin-top: 72px;
         width: 360px;
         height: 240px;
         flex-shrink: 0;
@@ -127,7 +126,7 @@ $txt_delay: 0.2s;
       }
       .e-node {
         text-align: left;
-        margin-left: 45px;
+        margin-left: 30px;
         padding-left: 25px;
         border-left: 1px solid rgba($color: #cccccc, $alpha: 0.5);
 
@@ -236,6 +235,14 @@ $txt_delay: 0.2s;
   }
 }
 
+@media screen and (min-width: 2000px) {
+  .about-layout {
+    .plate03 {
+      margin: 120px auto!important;
+    }
+  }
+}
+
 @media screen and (max-width: 1600px) {
   .about-layout {
     .plate03 {

src/page/binocular/index.vue

@@ -2,7 +2,7 @@
   <div class="product-layout" ref="productLayout">
     <div class="plate01 plate">
       <img class="pl01-bg" :src="`${$cdn}images/t-bg.png`" alt>
-      <div class="layout" :style="{marginLeft:(split - 180)+ 'px'}">
+      <div class="layout">
         <img class="product-img" :src="`${$cdn}images/t_product.png`" alt>
         <div class="info">
           <img class="txt-logo" :src="language==='en'?`${$cdn}images/lite-en.png`:`${$cdn}images/lite.png`" alt>
@@ -55,7 +55,7 @@
     <div class="plate03 plate">
       <div class="info">
         <h2 class="b-title">{{langBinocular.guide[0].title[0]}}</h2>
-        <p class="b-label">{{langBinocular.guide[0].title[1]}}</p>
+        <p class="b-label" v-html="langBinocular.guide[0].title[1]"></p>
         <div class="f-img">
           <iframe src="https://www.4dkankan.com/showPC.html?m=5cQcvVwp" frameborder="0"/>
           <!-- <video src="@/assets/video/fenbianlv.mp4" autoplay muted loop></video> -->
@@ -79,7 +79,7 @@
         </div>
         <div class="fkkj-right">
           <h2 class="b-title">{{langBinocular.guide[1].title[0]}}</h2>
-          <p class="b-label">{{langBinocular.guide[1].title[1]}}</p>
+          <p class="b-label" v-html="langBinocular.guide[1].title[1]"></p>
         </div>
       </div>
       <!-- <div class="mxsc-layout plate">
@@ -100,7 +100,7 @@
         </div>
         <div class="hdsp-right">
           <h2 class="b-title">{{langBinocular.guide[3].title[0]}}</h2>
-          <p class="b-label">{{langBinocular.guide[3].title[1]}}</p>
+          <p class="b-label" v-html="langBinocular.guide[3].title[1]"></p>
         </div>
       </div>
     </div>
@@ -108,7 +108,7 @@
     <div class="plate04">
       <div class="info plate" ref="p4Info">
         <h2 class="b-title">{{langBinocular.technology.title}}</h2>
-        <p class="b-label">{{langBinocular.technology.dec}}</p>
+        <p class="b-label" v-html="langBinocular.technology.dec"></p>
         <div class="boom"></div>
       </div>
     </div>
@@ -154,7 +154,7 @@
 <script>
 import { mapState } from 'vuex'
 import vcenter from '@/components/vcenter'
-import { getPosition } from '@/util'
+import { getPosition, detectZoom } from '@/util'
 import browser from '@/util/browser'
 
 export default {
@@ -178,6 +178,7 @@ export default {
     ]
 
     return {
+      devicePixelRatio: detectZoom(),
       showGroup,
       ismobile: browser.mobile
     }
@@ -207,7 +208,7 @@ export default {
     }
     window.addEventListener('scroll', this.scrollHandle)
     let removeListener = () => {
-      (Math.round(devicePixelRatio * 100) !== 100 && devicePixelRatio > 1.5) && window.removeEventListener('scroll', this.scrollHandle)
+      (Math.round(this.devicePixelRatio[0] * 100) !== 100 && this.devicePixelRatio[0] > 1.5) && window.removeEventListener('scroll', this.scrollHandle)
     }
     removeListener()
     window.addEventListener('resize', () => {

src/page/binocular/style.scss

@@ -47,11 +47,12 @@ $txt_delay: 0.2s;
   .layout {
     z-index: 1;
     max-width: 1148px;
-    margin-top: 90px;
     overflow: hidden;
     position: relative;
+    margin: 90px auto 0;
     .product-img{
       width: 180px;
+      margin-left: 38px;
     }
     .info {
       display: inline-block;
@@ -898,6 +899,38 @@ $txt_delay: 0.2s;
   }
 }
 
+@media screen and (min-width: 2000px) {
+  .plate03{
+    .fkkj-layout{
+      margin: 223px auto 60px;
+      .fkkj-right{
+        flex: 1;
+      }
+    }
+    .hdsp-layout{
+      margin: 300px auto 0;
+      .hdsp-imgcon{
+        flex: 3;
+        right: 35.5vw;
+        .hdsp_3{
+          right: -5%;
+        }
+        .hdsp_2{
+          right: -4.5%;
+
+        }
+      }
+      .hdsp-right{
+        flex: 1;
+        left: 0;
+        .b-title{
+          max-width: 600px;
+        }
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 1600px) {
   .product-layout {
     .plate01 {
@@ -917,6 +950,7 @@ $txt_delay: 0.2s;
         }
       }
       .hdsp-layout {
+        margin: 80px auto 0;
         .hdsp-imgcon{
           flex: 1.5;
           right: 0;

src/page/cases/index.vue

@@ -1,5 +1,5 @@
 <template>
-<div :style="{minHeight:scene.length>0?'none':'95vh'}">
+<div :style="{minHeight:scene.length>0?'none':'84vh'}">
   <div class="case-con" :style="{paddingLeft:(split-260)+ 'px'}">
     <div class="case-header">
       <img src="@/assets/images/3dcase_img_tit.png" alt="">
@@ -48,6 +48,7 @@ import {mapState} from 'vuex'
 import vcenter from '@/components/vcenter'
 import card from '@/components/card'
 import Paging from '@/components/Paging'
+import { detectZoom } from '@/util'
 
 let typeArr = {
   '房地产': 2,
@@ -102,7 +103,8 @@ export default {
       currentPage: 1,
       sortActive: 1,
       scene: [],
-      isWide: Math.round(devicePixelRatio * 100) === 100 ? window.innerWidth > 1697 : !(Math.round(devicePixelRatio * 100) >= 120),
+      devicePixelRatio: detectZoom(),
+      isWide: Math.round(detectZoom()[0] * 100) === 100 ? window.innerWidth > 1697 : !(Math.round(detectZoom()[0] * 100) >= 120),
       selected: '筛选设备',
       caseType: null
     }
@@ -193,7 +195,7 @@ export default {
       }
     })
     window.addEventListener('resize', () => {
-      let DPR = Math.round(devicePixelRatio * 100)
+      let DPR = Math.round(this.devicePixelRatio[0] * 100)
       let grt120 = DPR >= 120
       this.isWide = DPR === 100 ? window.innerWidth > 1697 : !grt120
     })

src/page/cases/style.scss

@@ -211,3 +211,10 @@
     transition: transform 0.3s;
   }
 }
+
+@media screen and (min-width: 2000px) {
+  .case-body {
+    margin: 0 auto!important;
+    max-width: 1920px!important;
+  }
+}

src/page/eight/index.vue

@@ -2,7 +2,7 @@
   <div class="product-layout" ref="productLayout">
     <div class="plate01 plate">
       <img class="pl01-bg" :src="`${$cdn}images/eight-bg.png`" alt="">
-      <div class="layout" :style="{marginLeft:(split - 180)+ 'px'}">
+      <div class="layout">
         <img class="product-img" :src="`${$cdn}images/banner_pro.png`" alt="">
         <div class="info">
           <img class="txt-logo" :src="language==='en'?`${$cdn}images/pro-en.png`:`${$cdn}images/pro.png`" alt>
@@ -47,8 +47,7 @@
     <div class="plate03 plate">
       <div class="front">
         <div class="f-top">
-          <h2 class="b-title" v-if="language==='en'">{{langEight.definition.title}}</h2>
-          <img class="txt-img" v-else :src="`${$cdn}images/10K.png`" alt="">
+          <h2 class="b-title" >{{langEight.definition.title}}</h2>
           <p class="b-label" v-for="(item,i) in langEight.definition.top.dec" :key="i">{{item}}</p>
         </div>
         <div class="f-img">
@@ -185,7 +184,7 @@
 <script>
 import {mapState} from 'vuex'
 import vcenter from '@/components/vcenter'
-import { getPosition } from '@/util'
+import { getPosition, detectZoom } from '@/util'
 import phone from '@/components/phone'
 import number from '@/components/number'
 import compare from '@/components/compare'
@@ -225,6 +224,7 @@ export default {
       params2,
       runLineCanvas: true,
       canLine: true,
+      devicePixelRatio: detectZoom(),
       ismobile: browser.mobile,
       runNum: 'up',
       numArr: {},
@@ -293,7 +293,7 @@ export default {
     }
     window.addEventListener('scroll', this.scrollHandle)
     let removeListener = () => {
-      (Math.round(devicePixelRatio * 100) !== 100 && devicePixelRatio > 1.5) && window.removeEventListener('scroll', this.scrollHandle)
+      (Math.round(this.devicePixelRatio[0] * 100) !== 100 && this.devicePixelRatio[0] > 1.5) && window.removeEventListener('scroll', this.scrollHandle)
     }
     removeListener()
     window.addEventListener('resize', () => {

src/page/eight/style.scss

@@ -53,11 +53,12 @@ $num_time: 0.6s;
   .layout {
     z-index: 1;
     max-width: 1148px;
-    margin-top: 90px;
     overflow: hidden;
     position: relative;
+    margin: 90px auto 0;
     .product-img{
       width: 180px;
+      margin-left: 38px;
     }
     .info {
       display: inline-block;
@@ -323,10 +324,12 @@ $num_time: 0.6s;
     justify-content: space-between;
     align-items: center;
     margin: 155px auto 130px;
+    max-width: 1920px;
     .hsxp-imgcon{
       animation: fadeUp 0.5s ease-out 1 both;
       .hsxp-video{
         width: 37.5vw;
+        max-width: 720px;
         margin-left: 280px;
       }
       div{
@@ -359,6 +362,7 @@ $num_time: 0.6s;
     justify-content: space-between;
     align-items: center;
     margin: 130px auto;
+    max-width: 1920px;
     .qmjt-left{
       color: #fff;
       margin-left: 280px;

src/page/home2/index.vue

@@ -15,10 +15,11 @@
           </div>
           <div class="info">
             <img :src="language==='en'?`${$cdn}images/booking-txt-en.png`:`${$cdn}images/booking-txt.png`" alt="">
-            <div class="btns">
-              <div class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></div>
-              <router-link to="/purchase" class="button purchase">{{langHome.booking.btn}}</router-link>
+            <div class="btns" >
+              <div @click="$router.push({name:'purchase'})" class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></div>
+              <a @click="$router.push({name:'purchase'})" class="button purchase">{{langHome.booking.btn}}</a>
             </div>
+            <div class="info-dec">（首批预购用户，独享10G云容量5年使用权。）</div>
           </div>
         </div>
       </div>
@@ -148,7 +149,7 @@
 import slide from '@/components/slide'
 import vcenter from '@/components/vcenter'
 import number from '@/components/number'
-import { getPosition } from '@/util'
+import { getPosition, detectZoom } from '@/util'
 import {mapState} from 'vuex'
 
 export default {
@@ -159,6 +160,7 @@ export default {
       item2: this.$cdn + 'video/item2.mp4',
       isWide: window.innerHeight > 1600,
       innerH: window.innerHeight,
+      devicePixelRatio: detectZoom(),
       startNumCount: false
     }
   },
@@ -199,7 +201,7 @@ export default {
     }
     window.addEventListener('scroll', this.sizeHandle)
     let removeListener = () => {
-      if (Math.round(devicePixelRatio * 100) !== 100 && devicePixelRatio > 1.5) {
+      if (Math.round(this.devicePixelRatio[0] * 100) !== 100 && this.devicePixelRatio[0] > 1.5) {
         this.startNumCount = true
         this.slideActive = true
       }

src/page/home2/style.scss

@@ -8,6 +8,7 @@
   padding-bottom: 0;
   vertical-align: middle;
   margin-top: 10px;
+  cursor: pointer;
 
   &:first-child {
     padding-left: 10px;
@@ -32,12 +33,10 @@
   position: relative;
   .my-video{
     width: 100%;
-    height: calc(100vh - 128px);
     overflow: hidden;
     video {
       width: 100%;
       position: relative;
-      top: -150px;
       // height: 684px;
       // object-fit: fill;
     }
@@ -160,7 +159,7 @@
     }
   }
   .booking{
-    background: url('~@/assets/images/booking-bg.png') #f7f7f8 no-repeat top center;
+    background: url('~@/assets/images/booking-bg.png') #f7f7f8 no-repeat center;
     background-size: cover;
     &>div{
       max-width: 940px;
@@ -202,12 +201,17 @@
           font-weight: 100;
         }
         .purchase{
-          width: 260px;
+          width: 273px;
           text-align:center;
         }
         .btns{
           margin-top: 50px;
         }
+        .info-dec{
+          margin-top: 10px;
+          position: relative;
+          left: -10px;
+        }
       }
     }
   }
@@ -340,7 +344,7 @@
   }
 
   .hxbg-2 {
-    bottom: 300px;
+    bottom: 0;
     top: inherit;
   }
 }

src/page/introduce/style.scss

@@ -151,13 +151,16 @@
         .btn{
           cursor: pointer;
           font-size: 14px;
-          border: 2px solid $theme-color;
-          display: inline-block;
+          border: 1px solid $theme-color;
           width: 146px;
+          display: inline-block;
           border-radius: 8px;
           line-height: 44px;
           height: 44px;
           color: $theme-color;
+          span{
+            display: inline-block;
+          }
         }
         p{
           font-size: 36px;
@@ -177,23 +180,21 @@
       }
     }
     .qa-con{
+      max-width: 868px;
+      margin: 0 auto;
       li{
-        margin-bottom: 30px;
-        &:first-of-type,&:nth-child(2){
-          display: inline-block;
-          width: 40%;
-        }
-        &:nth-child(2){
-          margin-left: 15%;
-        }
+        margin-bottom: 18px;
+        text-align: justify;
+        font-family:'Microsoft Yahei','微软雅黑',Tahoma,Arial,Helvetica,STHeiti;
         p{
           font-size: 14px;
-          color: #555;
+          color: #666;
+          line-height: 31px;
           &:first-of-type{
-            font-size: 24px;
-            color: $font-color;
+            font-size: 18px;
+            color: #333;
             font-weight: bold;
-            margin-bottom: 20px;
+            margin-bottom: 11px;
           }
         }
       }

src/page/introtow/index.vue

@@ -62,16 +62,16 @@ export default {
     let qa = [
       {
         q: '为什么需要点数充值？',
-        a: '当您的基础点数不足99点时，最新拍摄的场景将无法生成，通过购买点数则可以计算存储更多场景。'
+        a: '答：当您的基础点数不足99点时，最新拍摄的场景将无法生成，通过购买点数则可以计算存储更多场景。'
       }, {
         q: '点数充值之后还可以退款吗？',
-        a: '不可以，因为点数充值之后，相应点数会立即到账生效，所以不接受中途退款，敬请谅解。'
+        a: '答：不可以，因为点数充值之后，相应点数会立即到账生效，所以不接受中途退款，敬请谅解。'
       }, {
         q: '删除场景后会返还点数吗？',
-        a: '点数充值没有有效期，所以消费后代表永久记录您的美好空间，删除场景后不会返还。'
+        a: '答：点数充值没有有效期，所以消费后代表永久记录您的美好空间，删除场景后不会返还。'
       }, {
         q: '点数不足还可继续拍摄上传吗？',
-        a: '点数不足时，不影响设备正常的拍摄，但会无法上传计算，这时只能进行删除操作；直到您的点数满足消费，此时您才可以将拍摄的场景上传计算，随之可查看、编辑和分享。'
+        a: '答：点数不足时，不影响设备正常的拍摄，但会无法上传计算，这时只能进行删除操作；直到您的点数满足消费，此时您才可以将拍摄的场景上传计算，随之可查看、编辑和分享。'
       }
     ]
     return {
@@ -92,7 +92,15 @@ export default {
   },
   methods: {
     buy (item) {
-      this.$toast.showPointRecharge(item, this.detail.childName, this.detail.id)
+      this.$toast.showPointRecharge(item, this.detail.childName, this.detail.id, () => {
+        this.$router.replace({
+          name: 'payresult',
+          params: {
+            isSuccess: 'success',
+            type: 'recharge'
+          }
+        })
+      })
     },
     async getDetail () {
       let {id} = this.$route.params

src/page/introtow/style.scss

@@ -156,21 +156,21 @@
       }
     }
     .qa-con{
+      max-width: 868px;
+      margin: 0 auto;
       li{
-        margin-bottom: 30px;
-        display: inline-block;
-        width: 40%;
-        &:nth-child(2n){
-          margin-left: 15%;
-        }
+        margin-bottom: 18px;
+        text-align: justify;
+        font-family:'Microsoft Yahei','微软雅黑',Tahoma,Arial,Helvetica,STHeiti;
         p{
           font-size: 14px;
-          color: #555;
+          color: #666;
+          line-height: 31px;
           &:first-of-type{
-            font-size: 24px;
-            color: $font-color;
+            font-size: 18px;
+            color: #333;
             font-weight: bold;
-            margin-bottom: 20px;
+            margin-bottom: 11px;
           }
         }
       }

src/page/layout/aside/temp/ctemp/detail.scss

@@ -285,18 +285,26 @@ input {
     }
     .p-info {
       border-bottom: 1px solid $border-color;
-      padding: 20px 30px;
+      padding: 20px 30px 20px 20px;
       min-height: 80px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       position: relative;
-      img {
-        width: 30px;
-        flex-shrink: 0;
+      .p-img{
+        width: 100px;
+        height: 75px;
+        display: inline-block;
+        text-align: center;
+        img {
+          width: auto;
+          height: 100%;
+          flex-shrink: 0;
+          vertical-align: middle;
+        }
       }
       .p-params {
-        padding-left: 30px;
+        padding-left: 90px;
         vertical-align: middle;
         position: absolute;
         top: 50%;

src/page/layout/aside/temp/ctemp/detail.vue

@@ -43,7 +43,7 @@
           <div class="btn parmary" @click="uAddress">保存</div>
         </div>
       </edit>
-      <div class="pay-type">
+      <!-- <div class="pay-type">
         <div class="title">支付方式</div>
         <div class="body">
           <div class="pay-tag" :class="{'tag-active':paytype===1}" @click="paytype=1">
@@ -62,7 +62,7 @@
             <img src="@/assets/images/tag-icon.png" class="t-click" alt>
           </div>
         </div>
-      </div>
+      </div> -->
       <edit
         :name="'我的发票抬头'"
         @clickOper="handleOper('invoiceStatus')"
@@ -151,10 +151,13 @@
       <div class="product-type">
         <div class="title">商品信息</div>
         <div class="p-info" v-for="(item,i) in sku" :key="i">
-          <img :src="item.goodsId===4?`${$cdn}images/banner_pro.png`:`${$cdn}images/t_product.png`" alt>
+          <div class="p-img">
+            <img :src="pictures[item.goodsId]">
+          </div>
           <div class="p-params">
-            <h3>{{item.goodsId === 4?'四维看看 Pro':'四维看看 Lite'}}</h3>
-            <p>本机主体 x {{item.goodsCount}}, 拍摄支架 x {{item.goodsCount}}</p>
+            <h3>{{cameraName[item.goodsId]}}</h3>
+            <p v-if="item.goodsId===1">主体 x {{item.goodsCount}}  相机支架 x {{item.goodsCount}}</p>
+            <p v-else>主体 x {{item.goodsCount}}</p>
           </div>
           <div class="p-price">￥ {{item.price}}</div>
         </div>
@@ -209,8 +212,20 @@ var cloneObj = function (obj) {
 export default {
   props: ['sku', 'fromList', 'active'],
   data () {
+    let pictures = {
+      7: `${this.$cdn}images/zhijia.png`,
+      1: `${this.$cdn}images/withzhijia.png`,
+      4: `${this.$cdn}images/banner_pro.png`
+    }
+    let cameraName = {
+      7: `四维看看 Pro拍摄专用支架`,
+      1: `四维看看 Lite`,
+      4: `四维看看 Pro`
+    }
     return {
       agree: -1,
+      pictures,
+      cameraName,
       addressStatus: true,
       tempSelect: '',
       invoiceStatus: true,
@@ -401,7 +416,6 @@ export default {
     }
   },
   mounted () {
-    console.log(this.address)
     if (this.address && Object.keys(this.address).length > 0) return
     this.$store.dispatch('getInfo', {
       url: '/user/getReceiverInfo',

src/page/layout/aside/temp/ctemp/list.vue

@@ -1,16 +1,19 @@
 <template>
   <div>
     <div class="cart">
-      <div class="c-title">你的购物车</div>
+      <div class="c-title">{{langCart.cart}}</div>
       <i @click="cartHandle" class="iconfont icon-cuowu"></i>
     </div>
     <div class="items">
       <div class="item" v-for="(item, index) in cart" :key="index">
-        <div>
-          <img class="product-img" :src="item.goodsId===4?`${$cdn}images/banner_pro.png`:`${$cdn}images/t_product.png`" alt>
-          <i @click="cartHandle" class="iconfont icon-plus"></i>
+        <div class="p-img" v-if="item.goodsId===1">
+          <img class="product-img" :src="pictures[item.goodsId]">
+          <i class="iconfont icon-plus"></i>
           <img class="product-img" src="@/assets/images/zhijia.png" alt>
         </div>
+        <div class="p-img" v-else>
+          <img class="product-img fix-img" :src="pictures[item.goodsId]">
+        </div>
         <div class="taocan">
           <div>标准套装</div>
           <div class="numAP">
@@ -28,15 +31,15 @@
       </div>
       <div v-if="cart.length<=0" class="no-cart">
         <img src="@/assets/images/no-cart.png" alt="">
-        <p>您的购物车空空如也</p>
-        <p>赶紧行动吧</p>
+        <p v-html="langCart.nothing"></p>
+        <div @click="toEight" class="c-button purchase">{{langCart.shop}}</div>
       </div>
     </div>
     <div v-if="cart.length>0" class="jiesuan">
       <p>共计{{getSum()[0]}}件套装</p>
       <div class="price">￥{{getSum()[1]}}</div>
-      <div class="btns">
-        <div class="c-button">
+      <div class="btns" >
+        <div class="c-button" @click="toPay">
           <vcenter>
             <img :src="`${$cdn}images/product_icon_arrow.png`" alt>
           </vcenter>
@@ -55,6 +58,7 @@ export default {
   computed: {
     ...mapState({
       token: state => state.user.token,
+      langCart: state => state.language.home.manage.cart,
       cart: state => {
         if (Object.prototype.toString.call(state.user.cart) === '[object Array]') {
           return state.user.cart
@@ -65,11 +69,22 @@ export default {
   },
   watch: {
     active (newVal) {
-      console.log(newVal)
     }
   },
   data () {
+    let pictures = {
+      7: `${this.$cdn}images/zhijia.png`,
+      1: `${this.$cdn}images/t_product.png`,
+      4: `${this.$cdn}images/banner_pro.png`
+    }
+    let cameraName = {
+      7: `四维看看 Pro拍摄支架`,
+      1: `四维看看 Lite`,
+      4: `四维看看 Pro`
+    }
     return {
+      pictures,
+      cameraName,
       sum: 0
     }
   },
@@ -110,6 +125,10 @@ export default {
       let skus = this.cart
       this.$emit('toPay', skus)
     },
+    toEight () {
+      this.$router.push({name: 'purchase'})
+      this.$bus.$emit('hideAside')
+    },
     cartHandle () {
       this.$bus.$emit('hideAside')
     },
@@ -167,7 +186,7 @@ export default {
   }
 }
 .items {
-  max-height: 600px;
+  max-height: 65vh;
   overflow: auto;
   text-align: center;
   .item {
@@ -175,18 +194,30 @@ export default {
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid #e7e7e7;
-    padding: 20px 60px;
+    padding: 5px 60px;
+    min-height: 250px;
     &:last-of-type {
       border-bottom: 1px solid #e7e7e7;
     }
     img {
-      width: 80px;
+      width: 70px;
       vertical-align: middle;
       &:last-of-type {
         width: 100px;
         margin-top: 40px;
       }
     }
+    .p-img{
+      flex-shrink: 0;
+      width: 225px;
+    }
+    .product-img{
+      max-width: 70px!important;
+      margin-top: 0!important;
+    }
+    .fix-img{
+      position: relative;
+    }
     .iconfont {
       font-size: 36px;
       vertical-align: middle;
@@ -206,7 +237,7 @@ export default {
           width: 20px;
           height: 20px;
           line-height: 10px;
-          padding: 5px;
+          padding: 2px;
           border: 1px solid #e7e7e7;
         }
       }
@@ -236,7 +267,6 @@ export default {
     p{
       font-size: 24px;
       color: #a0a0a0;
-      margin-left: 100px;
       line-height: 1.5;
     }
   }

src/page/layout/aside/temp/ltemp/login.vue

@@ -113,11 +113,19 @@ export default {
         })
         let response = data.data
         if (response.code === 0) {
-          this.$store.commit('saveToken', response.data.token)
-          if (response.data.token) {
-            this.$store.commit('DEVICELOGIN', response.data.childName || '')
+          let {token, childName = '', to = ''} = response.data
+          this.$store.commit('saveToken', token)
+
+          if (token && to !== 0) {
+            this.$store.commit('DEVICELOGIN', childName)
             this.$bus.$emit('hideAside')
             this.$router.replace({name: 'scene'})
+          } else {
+            this.$bus.$emit('hideAside')
+            this.$bus.$emit('hasLogin')
+            this.$store.commit('DEVICELOGIN', '')
+            this.$store.dispatch('getInfo', {url: '/user/getUserInfo', name: 'info'})
+            this.$store.dispatch('getCart')
           }
           return false
         }

src/page/layout/aside/temp/ltemp/register.vue

@@ -46,7 +46,8 @@ export default {
   },
   computed: {
     ...mapState({
-      language: state => state.language.current
+      language: state => state.language.current,
+      token: state => state.user.token
     })
   },
   mounted () {
@@ -135,8 +136,19 @@ export default {
       if (response.code !== 0) {
         return this.$toast.show('warn', response.msg)
       }
-      this.$toast.show('warn', '注册成功', () => {
-        this.$bus.$emit('currentActive', 'ilogin')
+      this.$toast.show('warn', '注册成功', async () => {
+        let params1 = {
+          phoneNum: this.phone,
+          password: this.password,
+          randomcode: '1234',
+          rememberMe: false
+        }
+        await this.$store.dispatch('login', params1)
+        if (this.token) {
+          this.$bus.$emit('hideAside')
+          this.$bus.$emit('hasLogin')
+          this.$router.push({name: 'information'})
+        }
       })
     }
   }

src/page/layout/header/istyle.scss

@@ -251,11 +251,11 @@
 
 }
 
-@media screen and (max-width:1600px) and (device-pixel-ratio: 1){
+
+@media screen and (max-width: 1500px){
   .header-layout{
-    .menu {
-      .lang {
-      }
+    .logo-layout{
+      flex: 0 1 220px;
     }
   }
 }

src/page/location/style.scss

@@ -148,6 +148,8 @@ $loca-ani:0.5s;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      max-width: 1920px;
+      margin: 0 auto;
       .intro{
         margin-left: 220px;
         h2{
@@ -198,14 +200,23 @@ $loca-ani:0.5s;
       }
     }
   }
+}
 
+@media screen and (min-width: 2000px) {
+  .location-layout {
+    .plate01 {
+      .layout{
+        margin: 0 auto!important;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 1600px) {
   .location-layout {
     .plate01{
       .layout{
-        margin-left: 200px;
+        margin-left: 130px;
       }
     }
     .plate06{

src/page/manage/index.vue

@@ -4,7 +4,7 @@
       <div class="manage-con" :style="{marginLeft:(split + 37)+'px'}">
         <template v-if="!deviceLogin">
           <div class="info">
-            <img class="avatar" :src="info.head.replace('http://','https://')" alt>
+            <img class="avatar" :src="info.head">
             <div class="member">
               <p>{{content.content||'尚未开通任何会员'}}</p>
               <p>{{addstar(info.userName)}}</p>
@@ -53,81 +53,16 @@
 </template>
 <script>
 import {mapState} from 'vuex'
-let settings = [
-  {
-    name: 'info',
-    items: [{
-      name: '账号信息',
-      to: {name: 'information'}
-    }, {
-      name: '我的场景',
-      to: {name: 'scene'}
-    }, {
-      name: '我的订单',
-      to: {name: 'order'}
-    }, {
-      name: '我的设备',
-      to: {name: 'device'}
-    }, {
-      name: '消费记录',
-      to: {name: 'consumption'}
-    }
-    ]
-  },
-  {
-    name: 'security',
-    items: [{
-      name: '修改密码',
-      to: {name: 'change'}
-    }, {
-      name: '退出登录',
-      to: 'logout'
-    }]
-  }
-]
 
-let deviceSettings = [
-  {
-    name: 'security',
-    items: [ {
-      name: '我的场景',
-      to: {name: 'scene'}
-    }, {
-      name: '退出登录',
-      to: 'logout'
-    }]
-  }
-]
 export default {
   data () {
-    let nameArr = {
-      information: '账号信息',
-      scene: '我的场景',
-      order: '我的订单',
-      device: '我的设备',
-      consumption: '消费记录',
-      change: '修改密码',
-      logout: '退出登录'
-    }
-
-    let btnType = {
-      buy: {
-        name: '立即购买',
-        to: {
-          path: '/eight'
-        }
-      }
-    }
-
     return {
-      nameArr,
       content: '',
-      btnItem: btnType['buy'],
       detail: ''
     }
   },
   mounted () {
-    this.deviceLogin && this.getDetail()
+    this.deviceLogin ? this.getDetail() : this.getInfo()
   },
   methods: {
     addstar (item) {
@@ -202,14 +137,19 @@ export default {
       token: state => state.user.token,
       info: state => state.user.info,
       deviceLogin: state => state.user.deviceLogin,
+      langManage: state => state.language.home.manage,
+      btnItem: state => {
+        let ret = state.language.home.manage.main.btnType.buy
+        return ret
+      },
       settings: state => {
-        return state.user.deviceLogin ? deviceSettings : settings
+        return state.user.deviceLogin ? state.language.home.manage.information.deviceSettings : state.language.home.manage.information.settings
       }
     }),
     active: {
       get () {
         return {
-          name: this.nameArr[this.$route.name] || '',
+          name: this.langManage.information.nameArr[this.$route.name] || '',
           to: {name: this.$route.name} || ''
         }
       },

src/page/manage/style.scss

@@ -10,7 +10,7 @@
         color: #fff;
         display: flex;
         align-items: center;
-        width: 680px;
+        width: 730px;
         position: relative;
         .avatar{
           width: 64px;
@@ -143,4 +143,13 @@
       }
     }
   }
+}
+
+
+@media screen and (min-width: 2000px) {
+  .manage-layout {
+    .manage-body{
+      min-height: 80vh;
+    }
+  }
 }

src/page/manage/temp/change.vue

@@ -6,14 +6,17 @@
       </div>
       <div class="input yanzhengma">
         <input autocomplete="off" v-model="code" type="text" placeholder="验证码">
-        <div v-if="!jishi" @click="getAuthCode" class="code btn parmary">获取验证码</div>
+        <div v-if="!jishi" @click="getAuthCode" class="code btn parmary">{{langModify.code}}</div>
         <div v-else class="code btn parmary">{{interTime}}s后重新发送</div>
       </div>
       <div class="input">
         <input autocomplete="off" maxlength="12" v-model="password" type="password" placeholder="新密码">
       </div>
+       <div class="input">
+        <input autocomplete="off" maxlength="12" v-model="confirmpass" type="password" placeholder="再次输入新密码">
+      </div>
       <div @click="submit" class="btn parmary">
-        提交
+        {{langModify.submit}}
       </div>
     </div>
   </div>
@@ -26,12 +29,14 @@ export default {
   computed: {
     ...mapState({
       token: state => state.user.token,
+      langModify: state => state.language.home.manage.modify,
       info: state => state.user.info
     })
   },
   data () {
     return {
       password: '',
+      confirmpass: '',
       phone: '',
       interTime: 60,
       jishi: false,
@@ -70,14 +75,22 @@ export default {
         return true
       }
 
+      if (this.password !== this.confirmpass) {
+        return this.$toast.show('warn', '两次密码不一致')
+      }
+
       let checkStr = [
         {
           name: '验证码',
           val: this.code
         },
         {
-          name: '密码',
+          name: '新密码',
           val: this.password
+        },
+        {
+          name: '确认密码',
+          val: this.confirmpass
         }
       ]
       if (!check(checkStr)) {
@@ -87,6 +100,7 @@ export default {
       let params = {
         password: this.password,
         phoneNum: this.info.userName,
+        confirmPwd: this.confirmpass,
         msgAuthCode: this.code
       }
 

src/page/manage/temp/consumption.vue

@@ -2,32 +2,35 @@
   <div class="consump-layout">
     <div class="c-header">
       <ul class="tab-list">
-        <li @click="active = i" :class="{active:i===active}" v-for="(item,i) in tabList" :key="i">
+        <li @click="active = i" :class="{active:i===active}" v-for="(item,i) in langSpending.tabList" :key="i">
           {{item.name}}
         </li>
       </ul>
-      <div v-if="active===2" class="tab-select" ref="invoiceMenu" @click="tabActive=!tabActive" :class="{'tab-active':tabActive}">
+      <div v-if="active===2 && !deviceLogin" class="tab-select" ref="invoiceMenu" @click="tabActive=!tabActive" :class="{'tab-active':tabActive}">
         {{activeType}}
         <ul>
           <li v-for="(item,i) in cameraList"  @click="selectCamTy(item)" :key="i">{{item.name}}</li>
         </ul>
       </div>
-      <div class="tab-search" v-else>
-        <input v-model="searchKey" @keyup.enter="getList(searchKey)" type="text" placeholder="搜索设备ID">
-        <i class="iconfont icon-sousuo" @click="getList(searchKey)"></i>
+      <div class="tab-search" v-else :style="{border:!deviceLogin?'1px solid #ccc':'none'}">
+         <template v-if="!deviceLogin">
+          <input v-model="searchKey" @keyup.enter="getList(searchKey)" type="text" placeholder="搜索设备ID">
+          <i class="iconfont icon-sousuo" @click="getList(searchKey)"></i>
+         </template>
       </div>
     </div>
     <div class="invoices" v-if="active===2">
       <span>设备</span>
-      <div class="tab-select" ref="deviceMenu" @click="deviceActive=!deviceActive" :class="{'tab-active':deviceActive}">
+      <div v-if="!deviceLogin" class="tab-select" ref="deviceMenu" @click="deviceActive=!deviceActive" :class="{'tab-active':deviceActive}">
         {{activeDevice}}
         <ul>
           <li @click="selectInId({childName:'全部',id:''})">全部</li>
           <li v-for="(item,i) in invoicedevice" @click="selectInId(item)" :key="i" >{{item.childName}}</li>
         </ul>
       </div>
+      <span v-else>{{deviceLogin}} </span>
       <span>可开票额度（元）{{max}}</span>
-      <div class="btn parmary" @click="openInvice">开票</div>
+      <div class="btn default" :class="{parmary:max>0&&!deviceLogin}" @click="openInvice">开票</div>
     </div>
 
     <tableList :header='tabHeader' :data='data' class="table-list" >
@@ -80,6 +83,12 @@ let invoceStatusType = {
   1: '已开票'
 }
 
+let invoiceType = {
+  1: '不需要发票',
+  2: '增值税普通发票',
+  3: '增值税专用发票'
+}
+
 export default {
   components: {
     tableList,
@@ -129,12 +138,13 @@ export default {
       activeType: '全部',
       activeId: '',
       activeTypeId: ''
-
     }
   },
   computed: {
     ...mapState({
       token: state => state.user.token,
+      langSpending: state => state.language.home.manage.Spending,
+      deviceLogin: state => state.user.deviceLogin,
       myexpansion: state => {
         let type = Object.prototype.toString.call(state.user.myexpansion)
         if (type === '[object Object]') {
@@ -190,6 +200,7 @@ export default {
           this.tabHeader = recharge
           break
         case 2:
+          this.getInvoiceMax(0)
           this.getAllDevice()
           this.tabHeader = invoice
           break
@@ -223,8 +234,8 @@ export default {
       let params = {
         max: this.max,
         cameraId: this.activeId
-      }
-      this.$toast.showInvoice(params)
+      };
+      (this.max && !this.deviceLogin) && this.$toast.showInvoice(params)
     },
     async getAllDevice (searchKey = '') {
       let params = {
@@ -232,14 +243,22 @@ export default {
       }
       await this.$store.dispatch('getInvoiceDevice', params)
     },
+
+    // 扩容记录
     async getConsumpList (searchKey = '') {
-      let params = {
-        childName: searchKey,
-        pageNum: searchKey ? 1 : this.currentPage,
-        pageSize: this.pageSize
+      if (this.deviceLogin) {
+        searchKey = this.deviceLogin
       }
-      await this.$store.dispatch('getUserExpansion', params)
-      if (!this.myexpansion.total && searchKey) {
+      let data = {
+        params: {
+          childName: searchKey,
+          pageNum: searchKey ? 1 : this.currentPage,
+          pageSize: this.pageSize
+        },
+        url: this.deviceLogin ? '/device/virtualOrder/expansionList' : '/user/virtualOrder/expansionList'
+      }
+      await this.$store.dispatch('getUserExpansion', data)
+      if (!this.myexpansion.total && searchKey && !this.deviceLogin) {
         return this.$toast.show('warn', '没有找到相应的记录', () => {
           this.getList()
         })
@@ -249,7 +268,7 @@ export default {
       this.data = this.myexpansion.list
       this.data.forEach(item => {
         item['unitSize'] = item['unitSize'] + item['unit']
-        item['channel'] = '扩充容量购买'
+        item['channel'] = '扩充容量'
         item['payType'] = PAYSSTR[item['payType']]
       })
     },
@@ -269,14 +288,22 @@ export default {
       if (data.code !== 0) return
       this.max = data.data.maxInvoice
     },
+
+    // 充值记录
     async getChargeList (searchKey = '') {
-      let params = {
-        childName: searchKey,
-        pageNum: searchKey ? 1 : this.currentPage,
-        pageSize: this.pageSize
+      if (this.deviceLogin) {
+        searchKey = this.deviceLogin
       }
-      await this.$store.dispatch('getChargeList', params)
-      if (!this.mycharge.total && searchKey) {
+      let data = {
+        params: {
+          childName: searchKey,
+          pageNum: searchKey ? 1 : this.currentPage,
+          pageSize: this.pageSize
+        },
+        url: this.deviceLogin ? '/device/virtualOrder/chargeList' : '/user/virtualOrder/chargeList'
+      }
+      await this.$store.dispatch('getChargeList', data)
+      if (!this.mycharge.total && searchKey && !this.deviceLogin) {
         return this.$toast.show('warn', '没有找到相应的记录', () => {
           this.getList()
         })
@@ -288,20 +315,27 @@ export default {
         item['status'] = rechargeType[item['status']]
       })
     },
+
+    // 发票记录
     async getInvoiceList () {
-      let params = {
-        cameraId: this.activeId,
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        type: this.activeTypeId
+      let data = {
+        params: {
+          cameraId: this.activeId,
+          pageNum: this.currentPage,
+          pageSize: this.pageSize,
+          type: this.activeTypeId
+        },
+        url: this.deviceLogin ? '/device/invoice/list' : '/user/invoice/list'
       }
-      await this.$store.dispatch('getInvoiceList', params)
+
+      await this.$store.dispatch('getInvoiceList', data)
       this.pageSize = this.myinvoicelist.pageSize
       this.total = this.myinvoicelist.total || 0
       this.data = this.myinvoicelist.list
       this.data.forEach(item => {
         item['detail'] = '详细'
         item['finish'] = invoceStatusType[item['finish']]
+        item['type'] = invoiceType[item['type']]
       })
     }
   },
@@ -332,13 +366,19 @@ $border-color: #d9d9d9;
     text-align: center;
     cursor: pointer;
   }
-  .parmary {
-    background-color: $theme-color;
-    width: 88px;
-    height: 28px;
-    line-height: 28px;
-    font-size: 14px;
-  }
+.default {
+  width: 88px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 14px;
+  background-color: #e7e7e7;
+  cursor: initial;
+}
+.parmary {
+  background-color: $theme-color;
+  cursor: pointer;
+}
+
 .consump-layout{
   margin: 30px 0 150px 40px;
   padding: 38px 60px 20px 45px;
@@ -471,4 +511,16 @@ $border-color: #d9d9d9;
   }
 }
 
+@media screen and (min-width: 2000px) {
+  .consump-layout {
+    width: 75%;
+  }
+}
+
+@media screen and (max-width: 1700px){
+  .consump-layout {
+    width: 92%;
+  }
+}
+
 </style>

src/page/manage/temp/device.vue

@@ -2,12 +2,12 @@
   <div class="device-layout">
     <div class="d-header">
       <ul class="tab-list">
-        <li @click="tabActive = item.id" :class="{active:tabActive === item.id}" v-for="(item,i) in tabList" :key="i">
+        <li @click="tabActive = item.id" :class="{active:tabActive === item.id}" v-for="(item,i) in langDevices.tabList" :key="i">
           {{item.name}}
         </li>
       </ul>
-      <div class="tab-search">
-        <input v-model="searchKey" @keyup.enter="getList(searchKey)" type="text" placeholder="搜索设备ID">
+      <div class="tab-search" :style="{marginRight:isWide?'35px':'149px'}">
+        <input v-model="searchKey" @keyup.enter="getList(searchKey)" type="text" :placeholder="langDevices.placeholder.searchID">
         <i class="iconfont icon-sousuo" @click="getList(searchKey)"></i>
       </div>
     </div>
@@ -18,14 +18,14 @@
             <span></span>
             <span></span>
           </div>
-          <p>添加新设备</p>
+          <p>{{langDevices.add}}</p>
         </div>
       </div>
-      <div class="d-item item" v-for="(item,i) in mydevice.list" :key="i">
+      <div class="d-item item" :style="{padding:language==='en'?'10px 16px':'10px 24px 10px 30px'}" v-for="(item,i) in mydevice.list" :key="i">
         <div class="i-left" :style="{marginTop:tabActive===4?'15px':'25px'}">
           <template v-if="tabActive===4">
             <p class="d-id">ID:{{item.childName}}</p>
-            <p class="p-sub">{{item.spaceEndTime||'云存储空间'}}</p>
+            <p class="p-sub">{{item.spaceEndTime||langDevices.storage}}</p>
             <div class="capacity">
               <div class="c-line">
                 <div class="active" :style="{width:getBar(item.usedSpace,item.totalSpace)}"></div>
@@ -36,9 +36,13 @@
               <span v-if="!item.spaceEndTime" @click="$router.push({name:'privilege',params: {
           cameraId: item.id,
           childName: item.childName
-        }})">升级</span>
-              <span @click="$router.push({name:'introduce',params:{id:item.childName}})">扩容</span>
-              <span @click="unbind(item)">解绑</span>
+        }})">{{langDevices.upgrade}}</span>
+        <span v-else @click="$router.push({name:'payrecharge',params: {
+          cameraId: item.id,
+          childName: item.childName
+        }})">{{langDevices.renew}}</span>
+              <span @click="$router.push({name:'introduce',params:{id:item.childName}})">{{langDevices.capacity}}</span>
+              <span @click="unbind(item)">{{langDevices.unbind}}</span>
             </div>
           </template>
           <template v-else>
@@ -84,12 +88,15 @@ export default {
       currentPage: 1,
       total: 0,
       searchKey: '',
-      pageSize: 8
+      pageSize: 8,
+      isWide: window.innerWidth > 1300
     }
   },
   computed: {
     ...mapState({
+      language: state => state.language.current,
       token: state => state.user.token,
+      langDevices: state => state.language.home.manage.myDevices,
       mydevice: state => {
         let type = Object.prototype.toString.call(state.user.mydevice)
         if (type === '[object Object]') {
@@ -302,6 +309,9 @@ $font-color: #2d2d2d;
         .p-sub{
           color: #969696;
           font-size: 14px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
         .d-edit{
           margin-top: 10px;
@@ -413,4 +423,15 @@ $font-color: #2d2d2d;
     }
   }
 }
+@media screen and (min-width: 2000px) {
+  .device-layout {
+    width: 75%;
+  }
+}
+@media screen and (max-width: 1700px){
+  .device-layout {
+    width: 95%;
+  }
+}
+
 </style>

src/page/manage/temp/iconsumption.js

@@ -55,7 +55,7 @@ let invoice = [
     key: 'createTime',
     name: '申请时间'
   }, {
-    key: 'consumeType',
+    key: 'type',
     name: '发票类型'
   }, {
     key: 'title',

src/page/manage/temp/information.vue

@@ -1,47 +1,45 @@
 <template>
   <div class="info-layout">
     <edit
-      :name="'账号信息'"
+      :name="langAccount.info"
       @clickOper="handleOper('infoStatus')"
-      :oper="infoStatus?'编辑':'收起'"
+      :oper="infoStatus?langAccount.edit:langAccount.show"
       :isActive="infoStatus"
     >
       <div class="info" slot="show">
-        <p>头像</p>
+        <p>{{langAccount.avatar}}</p>
         <img class="avatar" :src="info.head" alt>
-        <p>昵称</p>
+        <p>{{langAccount.nickname}}</p>
         <div>{{info.nickName}}</div>
       </div>
       <div class="info edit-info" slot="edit">
         <div class="info-left">
-          <p>头像</p>
+          <p>{{langAccount.avatar}}</p>
           <img class="avatar" :src="info.head" alt>
-          <p>昵称</p>
+          <p>{{langAccount.nickname}}</p>
           <input
             autofocus
             v-model="editinfo.nickName"
-            placeholder="输入昵称"
+            :placeholder="langAccount.placeholder.nickname"
             class="nickname"
             type="text"
           >
-          <div @click="saveNickName" class="btn parmary">保存</div>
+          <div @click="saveNickName" class="btn parmary">{{langAccount.save}}</div>
         </div>
         <div>
           <div class="btn choose">
             <input class="el-upload" ref="uploadInput" name="file" type="file" @change="update">
-            <span>选择图片</span>
+            <span>{{langAccount.select}}</span>
           </div>
-          <p class="p-desc">请选择一张新照片进行上传</p>
-          <p class="p-desc">支持图片格式为：JPG/PNG</p>
-          <p class="p-desc">推荐分辨率为：512*512px，大小不大于1MB</p>
+          <p class="p-desc" v-for="(item,i) in langAccount.sinfo" :key="i">{{item}}</p>
         </div>
       </div>
     </edit>
 
     <edit
-      :name="'我的收货地址'"
+      :name="langAccount.address"
       @clickOper="handleOper('addressStatus')"
-      :oper="addressStatus?'编辑':'收起'"
+      :oper="addressStatus?langAccount.edit:langAccount.show"
       :isActive="addressStatus"
     >
       <div class="address" slot="show">
@@ -58,8 +56,8 @@
       </div>
       <div class="address edit-address" slot="edit">
         <div class="input-con">
-          <input type="text" v-model="editAdd.shipName" :placeholder="'姓名'">
-          <input type="text" v-model="editAdd.shipMobile" :placeholder="'电话'">
+          <input type="text" v-model="editAdd.shipName" :placeholder="langAccount.placeholder.name">
+          <input type="text" v-model="editAdd.shipMobile" :placeholder="langAccount.placeholder.phone">
         </div>
         <div class="input-con">
           <citySelect :areaPath="editAdd.shipAreaPath" @currentVal="getCurrentSelect"/>
@@ -68,17 +66,17 @@
           <input
             type="text"
             v-model="editAdd.shipAddress"
-            :placeholder="'详细地址'"
+            :placeholder="langAccount.placeholder.address"
           >
         </div>
-        <div class="btn parmary" @click="uAddress">保存</div>
+        <div class="btn parmary" @click="uAddress">{{langAccount.save}}</div>
       </div>
     </edit>
 
     <edit
-      :name="'我的发票抬头'"
+      :name="langAccount.invoice"
       @clickOper="handleOper('invoiceStatus')"
-      :oper="invoiceStatus?'编辑':'收起'"
+      :oper="invoiceStatus?langAccount.edit:langAccount.show"
       :isActive="invoiceStatus"
     >
       <div class="invoice" slot="show">
@@ -87,36 +85,36 @@
       <div class="invoice edit-invoice" slot="edit">
         <div class="select-con">
           <div :class="{'tag-active':cInvoice==='normal'}" @click="cInvoice='normal'">
-            <span>增值税普通发票</span>
+            <span>{{langAccount.normal}}</span>
             <img src="@/assets/images/tag-icon.png" alt>
           </div>
           <div :class="{'tag-active':cInvoice==='zengzhi'}" @click="cInvoice='zengzhi'">
-            <span>增值税专用发票</span>
+            <span>{{langAccount.zengzhi}}</span>
             <i></i>
             <img src="@/assets/images/tag-icon.png" alt>
           </div>
         </div>
         <div v-if="cInvoice==='normal'">
           <div class="input-con">
-            <input type="text" placeholder="请输入发票抬头" v-model="editInvoice2.title">
-            <input type="text" placeholder="请输入税务登记号（个人用户可不填）" v-model="editInvoice2.code">
+            <input type="text" :placeholder="langAccount.placeholder.title" v-model="editInvoice2.title">
+            <input type="text" :placeholder="langAccount.placeholder.code" v-model="editInvoice2.code">
           </div>
         </div>
         <div v-else>
           <div class="input-con">
-            <input type="text" v-model="invoice3.title" placeholder="请输入发票抬头">
-            <input type="text" v-model="invoice3.code" placeholder="请输入税务登记号（个人用户可不填）">
+            <input type="text" v-model="invoice3.title" :placeholder="langAccount.placeholder.title">
+            <input type="text" v-model="invoice3.code" :placeholder="langAccount.placeholder.code">
           </div>
           <div class="input-con">
-            <input type="text" v-model="invoice3.organizedAddress" placeholder="注册地址">
-            <input type="text" v-model="invoice3.registerPhone" placeholder="注册电话">
+            <input type="text" v-model="invoice3.organizedAddress" :placeholder="langAccount.placeholder.raddress">
+            <input type="text" v-model="invoice3.registerPhone" :placeholder="langAccount.placeholder.rphone">
           </div>
           <div class="input-con">
-            <input type="text" v-model="invoice3.bankName" placeholder="开户银行">
-            <input type="text" v-model="invoice3.bankAccount" placeholder="银行账户">
+            <input type="text" v-model="invoice3.bankName" :placeholder="langAccount.placeholder.bank">
+            <input type="text" v-model="invoice3.bankAccount" :placeholder="langAccount.placeholder.accout">
           </div>
         </div>
-        <div @click="saveInvoice(cInvoice)" class="btn parmary">保存</div>
+        <div @click="saveInvoice(cInvoice)" class="btn parmary">{{langAccount.save}}</div>
       </div>
     </edit>
   </div>
@@ -142,6 +140,7 @@ export default {
   computed: {
     ...mapState({
       info: state => state.user.info,
+      langAccount: state => state.language.home.manage.account,
       editinfo: state => cloneObj(state.user.info),
       token: state => state.user.token,
       invoice2: state => {
@@ -452,7 +451,7 @@ export default {
       div {
         position: relative;
         cursor: pointer;
-        width: 200px;
+        min-width: 200px;
         line-height: 36px;
         height: 36px;
         margin: 10px 25px 10px 0;
@@ -485,4 +484,9 @@ export default {
     }
   }
 }
+@media screen and (min-width: 2000px) {
+  .edit-layout {
+    max-width: 75%!important;
+  }
+}
 </style>

src/page/manage/temp/order.vue

@@ -2,11 +2,11 @@
   <div class="order-layout">
     <div v-if="total">
       <div class="order-item" v-for="(item,i) in myorder.list" :key="i">
-        <div class="o-top">订单号：{{item.orderSn}}</div>
+        <div class="o-top">{{langOrders.numbers}}{{item.orderSn}}</div>
         <div class="o-title">
-          <span>商品</span>
-          <span>数量</span>
-          <span>小计(CNY)</span>
+          <span>{{langOrders.numbers}}</span>
+          <span>{{langOrders.product}}</span>
+          <span>{{langOrders.quantity}}</span>
         </div>
         <div class="o-detail" v-for="(sub,index) in item.orderItems" :key="index">
           <div class="od-name">
@@ -21,15 +21,15 @@
         </div>
         <div class="sum-price">
           <div></div>
-          <div>总价：￥{{item.goodsAmount}}</div>
+          <div>{{langOrders.total}}{{item.goodsAmount}}</div>
         </div>
         <div class="to-pay">
           <template v-if="getStatus(item) === 'unpaid'">
-            <span class="cancel" @click="cancal(item)">取消订单</span>
-            <span class="pay btns" @click="toPay(item)">立即付款</span>
+            <span class="cancel" @click="cancal(item)">{{langOrders.cancal}}</span>
+            <span class="pay btns" @click="toPay(item)">{{langOrders.pay}}</span>
           </template>
           <template v-else-if="getStatus(item) === 'shipped'">
-            <span class="expreeNum">物流单号：77110342778758</span>
+            <span class="expreeNum">物流单号：{{item.orderItems[0].expressNum}}</span>
           </template>
           <template v-else-if="getStatus(item) === 'unshipped'">
             <span class="expreeNum">等待商家发货</span>
@@ -75,6 +75,7 @@ export default {
   computed: {
     ...mapState({
       token: state => state.user.token,
+      langOrders: state => state.language.home.manage.myOrders,
       myorder: state => {
         let type = Object.prototype.toString.call(state.user.myorder)
         if (type === '[object Object]') {
@@ -228,6 +229,9 @@ $border-color: #e7e7e7;
           flex: 5;
           text-align: left;
         }
+        &:last-child{
+          text-align: right;
+        }
       }
     }
     .o-detail {
@@ -268,7 +272,7 @@ $border-color: #e7e7e7;
       border-bottom: 1px solid $border-color;
       border-top: 1px solid $border-color;
       div {
-        flex: 6;
+        flex: 2;
         color: #4a4a4a;
         font-size: 14px;
         &:last-child {
@@ -297,7 +301,7 @@ $border-color: #e7e7e7;
     }
   }
   .scene-nothing{
-    padding: 42px 0 150px 40px;
+    padding: 42px 0 150px 0;
     text-align: center;
     img{
       padding-bottom: 22px;
@@ -369,6 +373,11 @@ $border-color: #e7e7e7;
     }
   }
 }
+@media screen and (min-width: 2000px) {
+  .order-layout {
+    width: 75%;
+  }
+}
 @media screen and (max-width: 1700px){
   .order-layout {
     width: 95%;

src/page/manage/temp/scene.vue

@@ -15,10 +15,10 @@
         <div class="name">
           <div class="title">{{item.sceneName}}</div>
           <div class="oper">
-            <span @click="(item.status === 1||item.status===-2) && gotoEdit(item.webSite)">编辑</span> / <span @click="(item.status === 1||item.status===-2) && del(item)">删除</span>
+            <span @click="(item.status === 1||item.status===-2) && gotoEdit(item.webSite)">{{langScenes.edit}}</span> / <span @click="(item.status === 1||item.status===-2) && del(item)">{{langScenes.delete}}</span>
           </div>
         </div>
-        <div><span>拍摄日期：</span><span>{{item.createTime}}</span></div>
+        <div><span>{{langScenes.shooting}}</span><span>{{item.createTime}}</span></div>
       </li>
     </ul>
     <div class="scene-nothing" v-else>
@@ -51,6 +51,7 @@ export default {
   computed: {
     ...mapState({
       token: state => state.user.token,
+      langScenes: state => state.language.home.manage.myScenes,
       deviceLogin: state => state.user.deviceLogin,
       cameradetail: state => {
         let type = Object.prototype.toString.call(state.user.cameradetail)
@@ -125,16 +126,15 @@ export default {
       this.currentPage = data
     },
     async getList () {
-      console.log(this.cameradetail)
-      let {id: camreaId = null, type: camreaType = null} = this.cameradetail
+      let {id: cameraId = null, type: cameraType = null} = this.cameradetail
       window.scrollTo(0, 0)
       let params = {
         pageNum: this.currentPage,
         pageSize: this.pageSize,
-        camreaId,
-        camreaType
+        cameraId,
+        cameraType
       }
-      camreaId ? await this.$store.dispatch('getScanScene', params) : await this.$store.dispatch('getUserScene', params)
+      cameraId ? await this.$store.dispatch('getScanScene', params) : await this.$store.dispatch('getUserScene', params)
       this.pageSize = this.myscene.pageSize
       this.total = this.myscene.total || 0
     }
@@ -190,6 +190,7 @@ export default {
     }
   }
   .scene-nothing{
+    width: 75%;
     padding: 42px 0 210px 0;
     text-align: center;
     img{
@@ -264,6 +265,12 @@ export default {
 
 }
 
+@media screen and (min-width: 2000px) {
+  .scene-layout {
+    width: 75%;
+  }
+}
+
 @media screen and (max-width:1600px){
   .scene-layout{
     width: 100%;

src/page/pay/index.vue

@@ -9,43 +9,52 @@
       <div class="h-right">当前账号：{{info.userName}}</div>
     </div>
     <div class="pay-con">
-      <div class="mid">
-        <div class="attr">支付方式:</div>
-        <div class="body">
-          <div class="pay-tag" :class="{'tag-active':paytype==='alipay'}" @click="paytype='alipay'">
-            <img src="@/assets/images/ali-pay.png" class="t-icon" alt>
-            <span>支付宝</span>
-            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+      <div class="pay-left">
+        <div class="mid">
+          <div class="attr">支付方式:</div>
+          <div class="body">
+            <div class="pay-tag" :class="{'tag-active':paytype==='alipay'}" @click="paytype='alipay'">
+              <img src="@/assets/images/ali-pay.png" class="t-icon" alt>
+              <span>支付宝</span>
+              <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+            </div>
+            <div class="pay-tag" :class="{'tag-active':paytype==='wechatPay'}" @click="paytype='wechatPay'">
+              <img src="@/assets/images/wechat-pay.png" class="t-icon" alt>
+              <span>微信支付</span>
+              <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+            </div>
+            <div class="pay-tag paypal-con" :class="{'tag-active':paytype==='paypal'}" @click="paytype='paypal'">
+              <img src="@/assets/images/paypal.png" class="t-icon" alt>
+              <span>paypal</span>
+              <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+              <form id="formid" class="form-con" :action="`${$serverName}api/order/pay/paypal`" method="post">
+                  <input  v-model="$route.params.orderId" type="text" name='orderId'>
+                  <input  v-model="$route.params.orderType" type="text" name='orderType'>
+                  <input type="submit" value="提交">
+              </form>
+            </div>
           </div>
-          <div class="pay-tag" :class="{'tag-active':paytype==='wechatPay'}" @click="paytype='wechatPay'">
-            <img src="@/assets/images/wechat-pay.png" class="t-icon" alt>
-            <span>微信支付</span>
-            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
-          </div>
-          <div class="pay-tag paypal-con" :class="{'tag-active':paytype==='paypal'}" @click="paytype='paypal'">
-            <img src="@/assets/images/paypal.png" class="t-icon" alt>
-            <span>paypal</span>
-            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
-            <form id="formid" class="form-con" :action="`${$serverName}api/order/pay/paypal`" method="post">
-                <input  v-model="$route.params.orderId" type="text" name='orderId'>
-                <input  v-model="$route.params.orderType" type="text" name='orderType'>
-                <input type="submit" value="提交">
-            </form>
+        </div>
+        <div class="bottom" v-if="paytype !== 'paypal'">
+          <div class="attr">应付金额:</div>
+          <div class="price-detail">
+            <img class="scanicon" :src="`${$cdn}images/scanicon.png`" alt="">
+            <div class="price">￥{{response.price}}</div>
+            <img v-if="response.src" :src="`${$serverName}${response.src}`" alt="">
+            <div class="dec">使用<span style="color:#ff0000">{{payZH}}</span>app扫码完成支付</div>
           </div>
         </div>
       </div>
-      <div class="bottom" v-if="paytype !== 'paypal'">
-        <div class="attr">应付金额:</div>
-        <div class="price-detail">
-          <div class="price">￥{{response.price}}</div>
-          <img v-if="response.src" :src="`${$serverName}${response.src}`" alt="">
-          <div class="dec">使用<span style="color:#ff0000">{{payZH}}</span>app扫码完成支付</div>
-        </div>
+      <div class="pay-right">
+        <p class="p-title">功能卓越</p>
+        <ul class="pay-icon">
+          <li v-for="(item,i) in payicon" :key="i">
+            <img :src="item.img" >
+            <p>{{item.name}}</p>
+          </li>
+        </ul>
       </div>
     </div>
-    <div class="pay-bottom">
-       ©2019 4dkankan移动开放平台
-    </div>
   </div>
 </template>
 
@@ -68,7 +77,21 @@ let PAYSID = {
 }
 export default {
   data () {
+    let payicon = [{
+      img: require('@/assets/images/paylogo1.png'),
+      name: '轻松操作高效建模'
+    }, {
+      img: require('@/assets/images/paylogo2.png'),
+      name: '高精还原空间漫游'
+    }, {
+      img: require('@/assets/images/paylogo3.png'),
+      name: '室内外皆可拍摄'
+    }, {
+      img: require('@/assets/images/paylogo4.png'),
+      name: '自由编辑随时更新'
+    }]
     return {
+      payicon,
       privilege: 'year',
       response: '',
       t1: null,
@@ -157,7 +180,8 @@ export default {
         this.response = response.data
         this.inverRequest()
       } else {
-        document.getElementById('formid').submit()
+        this.t1 = null
+        this.t1 && clearInterval(this.t1)
         this.$toast.show('warn', '正在跳转至paypal支付链接，请稍等')
       }
     }
@@ -205,165 +229,211 @@ $theme-color: #1fe4dc;
   .pay-con {
     background: #f4f4f4;
     padding: 40px;
-    .top,
-    .mid,
-    .bottom {
-      display: flex;
-      margin-bottom: 50px;
-      .attr {
-        font-size: 14px;
-        color: #2d2d2d;
-      }
-
-      .val {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 80px;
+    .pay-left {
+      .top,
+      .mid,
+      .bottom {
         display: flex;
-        align-items: center;
-        margin-left: 20px;
-        .tag {
-          height: 100%;
-          font-size: 0;
-          margin-right: 50px;
+        margin-bottom: 50px;
+        .attr {
+          font-size: 14px;
+          color: #2d2d2d;
+        }
+
+        .val {
           display: flex;
           align-items: center;
-          border: 1px solid #f4f4f4;
-          position: relative;
-          .year {
-            width: 52px;
-            height: 48px;
-            line-height: 48px;
-            text-align: center;
-            display: inline-block;
-            background: #ededed;
-            color: #777777;
-            font-size: 14px;
-            flex-shrink: 0;
-          }
-          .price {
-            background: #fff;
-            height: 48px;
-            width: 160px;
-            line-height: 48px;
-            display: inline-block;
-            font-size: 18px;
-            color: #ff0000;
-            text-align: center;
-            .per {
-              font-size: 12px;
-              margin-left: 20px;
+          margin-left: 20px;
+          .tag {
+            height: 100%;
+            font-size: 0;
+            margin-right: 50px;
+            display: flex;
+            align-items: center;
+            border: 1px solid #f4f4f4;
+            position: relative;
+            .year {
+              width: 52px;
+              height: 48px;
+              line-height: 48px;
+              text-align: center;
+              display: inline-block;
+              background: #ededed;
               color: #777777;
+              font-size: 14px;
+              flex-shrink: 0;
+            }
+            .price {
+              background: #fff;
+              height: 48px;
+              width: 160px;
+              line-height: 48px;
+              display: inline-block;
+              font-size: 18px;
+              color: #ff0000;
+              text-align: center;
+              .per {
+                font-size: 12px;
+                margin-left: 20px;
+                color: #777777;
+              }
+            }
+            img {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              width: 14px;
             }
           }
-          img {
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 14px;
+          .tag-active {
+            border: 1px solid $theme-color;
+            box-sizing: border-box;
           }
         }
-        .tag-active {
-          border: 1px solid $theme-color;
-          box-sizing: border-box;
-        }
-      }
-      .body {
-        margin-left: 20px;
-        .pay-tag {
-          cursor: pointer;
-          border: 1px solid #e7e7e7;
-          width: 200px;
-          line-height: 36px;
-          height: 36px;
-          margin-bottom: 20px;
-          position: relative;
-          span {
-            margin-left: 36px;
-            display: inline-block;
-            text-align: center;
-            padding-left: 60px;
-          }
-          img {
-            position: absolute;
-          }
-          .t-icon {
-            width: 36px;
+        .body {
+          margin-left: 20px;
+          .pay-tag {
+            cursor: pointer;
+            border: 1px solid #e7e7e7;
+            width: 200px;
+            line-height: 36px;
             height: 36px;
-            padding: 6px;
-            left: 0;
-            border-right: 1px solid #e7e7e7;
-          }
-          .t-click {
-            right: 0;
-            bottom: 0;
-            display: none;
-          }
-        }
-        .paypal-con{
-          position: relative;
-          .form-con{
-            opacity: 0;
-            input[type='text']{
-              width: 1px;
-              height: 1px;
+            margin-bottom: 20px;
+            position: relative;
+            span {
+              margin-left: 36px;
+              display: inline-block;
+              text-align: center;
+              padding-left: 60px;
+            }
+            img {
               position: absolute;
-              top: 0;
-              opacity: 0;
+            }
+            .t-icon {
+              width: 36px;
+              height: 36px;
+              padding: 6px;
               left: 0;
+              border-right: 1px solid #e7e7e7;
+            }
+            .t-click {
+              right: 0;
+              bottom: 0;
+              display: none;
+            }
+          }
+          .paypal-con{
+            position: relative;
+            .form-con{
+              opacity: 0;
+              input[type='text']{
+                width: 1px;
+                height: 1px;
+                position: absolute;
+                top: 0;
+                opacity: 0;
+                left: 0;
+              }
+              input[type='submit']{
+                width: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                opacity: 0;
+                height: 100%;
+              }
+            }
+          }
+          .tag-active {
+            border: 1px solid $theme-color;
+            span {
+              color: #000;
+            }
+            .t-icon {
+              border-right: 1px solid $theme-color;
+            }
+            .t-click {
+              display: inline-block;
             }
-             input[type='submit']{
-               width: 100%;
-               position: absolute;
-               top: 0;
-               left: 0;
-               opacity: 0;
-               height: 100%;
-             }
           }
         }
-        .tag-active {
-          border: 1px solid $theme-color;
-          span {
-            color: #000;
+        .price-detail{
+          margin-left: 6px;
+          text-align: center;
+          position: relative;
+          width: 160px;
+          top: -15px;
+          .price{
+            font-size: 30px;
+            color: #ff0000;
+            margin: 0 0 0 8px;
+            text-align: left;
+            padding: 0;
+            margin-bottom: 24px;
+          }
+          .sao{
+            font-size: 14px;
+            color: #2d2d2d;
+            margin-bottom: 5px;
           }
-          .t-icon {
-            border-right: 1px solid $theme-color;
+          .dec{
+            color: #2d2d2d;
+            font-size: 12px;
+            margin-top: 10px;
           }
-          .t-click {
-            display: inline-block;
+          img{
+            width: 130px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.2);
+            height: 130px;
+          }
+          .scanicon{
+            position: absolute;
+            left: 180px;
+            width: 200px;
+            top: 30px;
+            height: auto;
+             box-shadow:none;
           }
         }
       }
-      .price-detail{
-        margin-left: 6px;
-        text-align: center;
-        position: relative;
-        width: 160px;
-        top: -15px;
-        .price{
-          font-size: 30px;
-          color: #ff0000;
-          margin: 0 0 0 8px;
-          text-align: left;
-          padding: 0;
-          margin-bottom: 40px;
+      .bottom {
+        margin-bottom: 0;
+      }
+      .mid{
+        margin-bottom: 20px;
+      }
+    }
+    .pay-right {
+      text-align: center;
+      border-left: 1px solid #e5e5e5;
+      padding-left: 28px;
+      .p-title{
+        font-size: 20px;
+        color: #777777;
+      }
+      .pay-icon{
+        margin-top: 20px;
+        img{
+          margin: 15px 0;
         }
-        .sao{
+        p{
+          color: #969696;
           font-size: 14px;
-          color: #2d2d2d;
-          margin-bottom: 5px;
-        }
-        .dec{
-          color: #2d2d2d;
-          font-size: 12px;
-          margin-top: 10px;
-        }
-        img{
-          width: 130px;
-          height: 130px;
         }
       }
-    }
-    .bottom {
-      margin-bottom: 0;
+      .pay-detail{
+        height: 28px;
+        margin: 90px 0 20px;
+        cursor: pointer;
+        line-height: 28px;
+        font-size: 14px;
+        color: #777777;
+        width: 128px;
+        border: 1px solid #e5e5e5;
+      }
     }
   }
   .pay-bottom{

src/page/payrecharge/index.vue

@@ -72,6 +72,7 @@
           <div class="attr">应付金额:</div>
           <div class="price-detail">
             <div class="price">￥{{response.price}}</div>
+            <img class="scanicon" :src="`${$cdn}images/scanicon.png`" alt="">
             <img v-if="response.src" :src="`${$serverName}${response.src}`" alt />
             <div class="dec">
               使用
@@ -94,7 +95,6 @@
         }})">了解特权详细</div>
       </div>
     </div>
-    <div class="pay-bottom">©2019 4dkankan移动开放平台</div>
   </div>
 </template>
 
@@ -210,7 +210,8 @@ export default {
           this.$router.replace({
             name: 'payresult',
             params: {
-              isSuccess: 'success'
+              isSuccess: 'success',
+              type: 'recharge'
             }
           })
         }
@@ -273,6 +274,8 @@ export default {
         this.response = response.data
         this.inverRequest()
       } else {
+        clearInterval(this.t1)
+        this.t1 = null
         this.$toast.show('warn', '正在跳转至paypal支付链接，请稍等')
       }
     }
@@ -322,6 +325,7 @@ $theme-color: #1fe4dc;
     padding: 40px;
     display: flex;
     justify-content: space-between;
+    margin-bottom: 80px;
     .pay-left {
       .top,
       .mid,
@@ -482,9 +486,22 @@ $theme-color: #1fe4dc;
           img {
             width: 130px;
             height: 130px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.2);
+
+          }
+          .scanicon{
+            position: absolute;
+            left: 180px;
+            width: 200px;
+            top: 30px;
+            height: auto;
+            box-shadow:none;
           }
         }
       }
+      .top{
+        margin-bottom: 45px;
+      }
       .bottom {
         margin-bottom: 0;
       }

src/page/payresult/index.vue

@@ -13,13 +13,11 @@
         <img :src="result==='success'?require('@/assets/images/paysuccess.png'):require('@/assets/images/payfail.png')" alt>
         <div class="pay-txt">
           <div class="main-title" :style="{color:result==='success'?'#13d533':'#ea0b0b'}">{{result==='success'?'恭喜您，支付成功!':'支付失败！请重新支付'}}</div>
-          <div class="sub-title">{{result==='success'?'我们将尽快安排为您发货!':'请检查网络情况后重试'}}</div>
+          <div class="sub-title">{{result==='success'?type==='recharge'?'':'我们将尽快安排为您发货!':'请检查网络情况后重试'}}</div>
+          <div class="jump-dec">……{{count}}秒后跳转至{{type==='recharge'?'我的设备':'我的订单'}}页面</div>
         </div>
       </div>
     </div>
-    <div class="pay-bottom">
-       ©2019 4dkankan移动开放平台
-    </div>
   </div>
 </template>
 
@@ -29,10 +27,13 @@ import { mapState } from 'vuex'
 export default {
   data () {
     return {
+      t1: null,
+      count: 5,
       paytype: 'wechatPay',
       privilege: 'year',
       response: '',
-      result: this.$route.params.isSuccess || 'success'
+      result: this.$route.params.isSuccess || 'success',
+      type: this.$route.params.type || ''
     }
   },
   computed: {
@@ -42,7 +43,21 @@ export default {
     })
   },
   mounted () {
+    this.t1 && clearInterval(this.t1)
+    this.t1 = null
 
+    this.t1 = setInterval(() => {
+      this.count--
+      if (this.count <= 0) {
+        return this.$router.replace({
+          name: this.type === 'recharge' ? 'device' : 'order'
+        })
+      }
+    }, 1000)
+  },
+  beforeDestroy () {
+    this.t1 && clearInterval(this.t1)
+    this.t1 = null
   },
   methods: {
 
@@ -107,6 +122,10 @@ $theme-color: #1fe4dc;
         font-size: 14px;
         color: #2d2d2d;
       }
+      .jump-dec{
+        font-size: 12px;
+        margin-top: 5px;
+      }
      }
      img{
        width: 120px;

src/page/privilege/index.vue

@@ -91,17 +91,12 @@
           </div>
         </div>
       </div>
-      <div class="qa">
-        <div class="qa-item" v-for="(item,i) in qa" :key="i">
-          <div class="title">
-            <img src="@/assets/images/Q.png" alt>
-            <span>{{item.q}}</span>
-          </div>
-          <div class="dec">
-            <span>{{item.a}}</span>
-          </div>
-        </div>
-      </div>
+      <ul class="qa-con">
+          <li v-for="(item,i) in qa" :key="i">
+            <p>{{item.q}}</p>
+            <p v-html="item.a"></p>
+          </li>
+        </ul>
     </div>
   </div>
 </template>
@@ -291,32 +286,32 @@ export default {
       {
         q: '什么是专业会员？',
         a:
-          '专业会员即为购买或赋予设备的会员，针对专业会员，我们专门附赠提供包含18项实用专业的后台功能，会员可根据这些功能编辑场景，打造朋友圈最新颖的分享方式。'
+          '答：专业会员即为购买或赋予设备的会员，针对专业会员，我们专门附赠提供包含18项实用专业的后台功能，会员可根据这些功能编辑场景，打造朋友圈最新颖的分享方式。'
       },
       {
         q: '专业会员和商业会员的区别是什么？',
         a:
-          '商业会员是在专业会员基础上的增值服务，相比专业会员拥有更多的容量空间、更便宜的扩容和下载价格，商业会员也享有最新的功能特权机会。'
+          '答：商业会员是在专业会员基础上的增值服务，相比专业会员拥有更多的容量空间、更便宜的扩容和下载价格，商业会员也享有最新的功能特权机会。'
       },
       {
         q: '专业会员如何升级成商业会员？',
         a:
-          '如果您已经是专业会员，只需选择商业月会员或商业年会员购买，即可升级成为商业会员。'
+          '答：如果您已经是专业会员，只需选择商业月会员或商业年会员购买，即可升级成为商业会员。'
       },
       {
         q: '普通会员可以直接升级成商业会员吗？',
         a:
-          '可以，购买设备的基础上再选购商业月会员或商业年会员购买，即可直接升级成为商业会员。'
+          '答：可以，购买设备的基础上再选购商业月会员或商业年会员购买，即可直接升级成为商业会员。'
       },
       {
         q: '商业会员到期以后还能继续使用吗？',
         a:
-          '当您购买的商业会员到期后，您可以选择续费，继续正常使用相应的会员功能。如果您暂时不希望付费，您将会自动降为专业会员，并且将无法使用商业会员的功能。'
+          '答：当您购买的商业会员到期后，您可以选择续费，继续正常使用相应的会员功能。如果您暂时不希望付费，您将会自动降为专业会员，并且将无法使用商业会员的功能。'
       },
       {
         q: '我购买商业会员之后还可以退款吗？',
         a:
-          '不可以，因为购买商业会员之后，相应会员权益都会即刻开放，所以不接受中途退款，敬请谅解。'
+          '答：不可以，因为购买商业会员之后，相应会员权益都会即刻开放，所以不接受中途退款，敬请谅解。'
       }
     ]
 
@@ -356,7 +351,7 @@ $theme-color: #1fe4dc;
 
 .privilege-layout {
   color: #2d2d2d;
-  margin: 40px;
+  margin: 40px auto;
   .p-container {
     margin: 0 auto;
     width: 1300px;
@@ -364,12 +359,9 @@ $theme-color: #1fe4dc;
       text-align: center;
       .p-title{
         margin-bottom: 40px;
-        .p-title{
-
-        }
-        .p-label{
-
-        }
+      }
+      .b-title{
+        font-size: 28px;
       }
       .p-table {
         display: flex;
@@ -463,41 +455,28 @@ $theme-color: #1fe4dc;
       }
     }
   }
-  .qa {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin: 80px 0 0 0;
-    .qa-item {
-      width: 38%;
-      .title {
-        img {
-          width: 25px;
-          margin-right: 2px;
-          vertical-align: middle;
-        }
-        span {
-          font-size: 24px;
-          vertical-align: middle;
-          font-weight: bold;
-        }
-      }
-      .dec {
-        position: relative;
-        height: 115px;
-        width: 100%;
-        span {
-          position: absolute;
-          top: 50%;
-          left: 0;
-          transform: translateY(-50%);
+  .qa-con{
+      max-width: 633px;
+      margin: 50px auto;
+      position: relative;
+      left: -46px;
+      li{
+        margin-bottom: 18px;
+        font-family:'Microsoft Yahei','微软雅黑',Tahoma,Arial,Helvetica,STHeiti;
+        text-align: justify;
+        p{
           font-size: 14px;
-          color: #95979b;
-          vertical-align: middle;
-          display: inline-block;
+          color: #666;
+          line-height: 31px;
+          &:first-of-type{
+            font-size: 18px;
+            color: #333;
+            font-weight: bold;
+            margin-bottom: 11px;
+          }
         }
       }
     }
-  }
 }
+
 </style>

src/page/purchase/index.vue

@@ -1,59 +1,64 @@
 <template>
   <div class="purchase-layout">
     <div class="plate01">
-      <div class="p1-banner">
+      <!-- <div class="p1-banner">
         <span @click="$router.push({name:'eight'})">{{langPurchase.top1}}</span>
         <span @click="scrollTo('jsgg')">{{langPurchase.top2}}</span>
-      </div>
-      <img
-        class="product-img"
-        :style="{marginLeft:(split - 170)+ 'px'}"
-        :src="`${$cdn}images/banner_pro-white.png`"
-        alt
-      >
-      <div class="layout">
-        <img class="pro-logo" :src="`${$cdn}images/pro-logo.png`" alt="">
-        <p class="sub b-label" v-html="langPurchase.dec"></p>
-        <p class="price">
-          {{langPurchase.price}}
-          <span>{{langPurchase.yushou}}</span>
-        </p>
-        <template>
-          <p class="title first-title">{{langPurchase.color.key}}</p>
-          <div class="detail-box">
-            <i class="iconfont icon-yuandian"></i>
-            {{langPurchase.color.val}}
-          </div>
-          <p class="title">{{langPurchase.service.key}}</p>
-          <div class="detail-box">
-            <ul>
-              <li v-for="(item, i) in langPurchase.service.val" :key="i">{{item}}</li>
-            </ul>
-          </div>
-          <p class="title">{{langPurchase.gift.key}}</p>
-          <div class="detail-box zhijia">
-            <img :src="`${$cdn}images/zhijia.png`" alt>
-            <span>{{langPurchase.gift.val}}</span>
-          </div>
-        </template>
-        <p class="title">{{langPurchase.count.key}}</p>
-        <spinner @count="handleSpinner"/>
-        <div>
-          <div class="btns">
-            <div class="button add-cart" @click="addcart">
-              <vcenter>
-                <!-- <img src="@/assets/images/product_icon_arrow_l.png" alt> -->
-                <span>加入购物车</span>
-              </vcenter>
+      </div> -->
+      <div class="main-detail">
+        <img
+          class="product-img"
+          :style="{marginLeft:(split - 170)+ 'px'}"
+          :src="`${$cdn}images/banner_pro-white.png`"
+          alt
+        >
+        <div class="layout">
+          <img class="pro-logo" :src="`${$cdn}images/pro-logo.png`" alt="">
+          <p class="sub b-label" v-html="langPurchase.dec"></p>
+          <p class="price">
+             {{selectParts?langPurchase.addzhijia:langPurchase.price}}
+            <span>{{langPurchase.yushou}}</span>
+          </p>
+          <template>
+            <p class="title first-title">{{langPurchase.color.key}}</p>
+            <div class="detail-box">
+              <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+              <i class="iconfont icon-yuandian"></i>
+              {{langPurchase.color.val}}
+            </div>
+            <p class="title">{{langPurchase.service.key}}</p>
+            <div class="detail-box">
+              <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+              <ul>
+                <li v-for="(item, i) in langPurchase.service.val" :key="i">{{item}}</li>
+              </ul>
             </div>
-            <div class="button"  @click="pay">
-              <vcenter>
-                <!-- <img src="@/assets/images/product_icon_arrow.png" alt> -->
-                <span>{{langPurchase.buy}}</span>
-              </vcenter>
+            <p class="title">{{langPurchase.gift.key}}</p>
+            <div class="detail-box zhijia" :class="{'no-active':!selectParts}" @click="selectParts=!selectParts">
+              <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+              <img :src="`${$cdn}images/zhijia.png`" alt>
+              <span>{{langPurchase.gift.val}}</span>
             </div>
+          </template>
+          <p class="title">{{langPurchase.count.key}}</p>
+          <spinner @count="handleSpinner"/>
+          <div>
+            <div class="btns">
+              <div class="button add-cart" @click="addcart">
+                <vcenter>
+                  <!-- <img src="@/assets/images/product_icon_arrow_l.png" alt> -->
+                  <span>加入购物车</span>
+                </vcenter>
+              </div>
+              <div class="button"  @click="pay">
+                <vcenter>
+                  <!-- <img src="@/assets/images/product_icon_arrow.png" alt> -->
+                  <span>{{langPurchase.buy}}</span>
+                </vcenter>
+              </div>
+            </div>
+            <div class="btn-dec">{{langPurchase.tiaokuan}}</div>
           </div>
-          <div class="btn-dec">{{langPurchase.tiaokuan}}</div>
         </div>
       </div>
     </div>
@@ -139,7 +144,8 @@ export default {
     return {
       detail,
       guige,
-      count: 1
+      count: 1,
+      selectParts: true
     }
   },
   methods: {
@@ -150,12 +156,18 @@ export default {
       if (!this.token) {
         return this.$bus.$emit('showAside')
       }
+      let zhijia = {
+        goodsId: 7,
+        goodsCount: this.count,
+        skuSn: 'U15604134406280073'
+      }
       let params = {
         goodsId: 4,
         goodsCount: this.count,
         skuSn: 'U15609161635760015'
       }
       await this.$store.dispatch('addCart', params)
+      this.selectParts && await this.$store.dispatch('addCart', zhijia)
       this.$toast.show('success', '商品加入购物车成功')
     },
     pay () {
@@ -169,6 +181,13 @@ export default {
         }],
         fromList: false
       }
+      let zhijia = {
+        goodsId: 7,
+        goodsCount: this.count,
+        price: 595,
+        skuSn: 'U15604134406280073'
+      }
+      this.selectParts && params.sku.push(zhijia)
       this.$bus.$emit('showAside', params)
     },
     scrollTo (href) {

src/page/purchase/style.scss

@@ -27,7 +27,10 @@
 
 .plate01{
   background: url("~@/assets/images/purchase_bg.png") #f8f9fc top center no-repeat;
-  padding: 0 0 155px;
+  padding: 0 0 100px;
+  .main-detail{
+    padding-top: 80px;
+  }
   .p1-banner{
     background: #fff;
     height: 65px;
@@ -79,11 +82,12 @@
       margin-top: 20px;
     }
     .detail-box{
+      position: relative;
       display: inline-block;
       border: 1px solid #70eee9;
       background: #f8fefe;
       color: rgba(0,0,0,.45);
-      padding: 5px 63px;
+      padding: 5px 20px;
       line-height: 1.5;
       width: 344px;
       box-sizing: border-box;
@@ -95,6 +99,14 @@
         font-size: 16px;
         color: #000;
       }
+      .t-click{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: 0;
+        width: 16px;
+        height: 16px;
+      }
       .icon-yuandian::before{
         margin-right: 6px;
         font-size: 16px;
@@ -129,11 +141,18 @@
             transform: translateY(-50%);
             background-color: rgba(0,0,0,.45);
           }
+          &:last-of-type{
+            &::before{
+              content: '';
+              top: 25%;
+            }
+          }
         }
       }
     }
     .zhijia{
       padding: 10px 0;
+      cursor: pointer;
       text-align: center;
       img{
         vertical-align: middle;
@@ -145,6 +164,13 @@
         font-size: 14px;
       }
     }
+    .no-active{
+      border: 1px solid #e3e3e3;
+      background-color: #fff;
+      .t-click{
+        display: none;
+      }
+    }
     .btns {
       img{
         width: 24px;
@@ -167,7 +193,7 @@
 .plate02{
   width: 845px;
   margin: 0 auto;
-  padding: 155px 0;
+  padding: 84px 0;
   text-align: center;
   .b-title{
     font-weight: 700;
@@ -228,4 +254,13 @@
       text-indent: 0px;
     }
   }
+}
+
+@media screen and (min-width: 2000px) {
+  .plate01 {
+    .main-detail{
+      max-width: 1920px;
+      margin: 0 auto!important;
+    }
+  }
 }

src/page/purchasetow/index.vue

@@ -1,59 +1,64 @@
 <template>
   <div class="purchase-layout">
     <div class="plate01">
-      <div class="p1-banner">
-        <span @click="$router.push({name:'eight'})">{{langPurchase.top1}}</span>
+      <!-- <div class="p1-banner">
+        <span @click="$router.push({name:'binocular'})">{{langPurchase.top1}}</span>
         <span @click="scrollTo('jsgg')">{{langPurchase.top2}}</span>
-      </div>
-      <img
-        class="product-img"
-        :style="{marginLeft:(split - 170)+ 'px'}"
-        :src="`${$cdn}images/t_product.png`"
-        alt
-      >
-      <div class="layout">
-        <img class="pro-logo" :src="`${$cdn}images/lite-logo.png`" alt="">
-        <p class="sub b-label" v-html="langPurchase.dec"></p>
-        <p class="price">
-          {{langPurchase.price}}
-          <span>{{langPurchase.yushou}}</span>
-        </p>
-        <template>
-          <p class="title first-title">{{langPurchase.color.key}}</p>
-          <div class="detail-box">
-            <i class="iconfont icon-yuandian"></i>
-            {{langPurchase.color.val}}
-          </div>
-          <p class="title">{{langPurchase.service.key}}</p>
-          <div class="detail-box">
-            <ul>
-              <li v-for="(item, i) in langPurchase.service.val" :key="i">{{item}}</li>
-            </ul>
-          </div>
-          <p class="title">{{langPurchase.gift.key}}</p>
-          <div class="detail-box zhijia">
-            <img :src="`${$cdn}images/zhijia.png`" alt>
-            <span>{{langPurchase.gift.val}}</span>
-          </div>
-        </template>
-        <p class="title">{{langPurchase.count.key}}</p>
-        <spinner @count="handleSpinner"/>
-        <div>
-          <div class="btns">
-            <div class="button add-cart" @click="addcart">
-              <vcenter>
-                <!-- <img src="@/assets/images/product_icon_arrow_l.png" alt> -->
-                <span>加入购物车</span>
-              </vcenter>
+      </div> -->
+      <div class="main-detail">
+        <img
+          class="product-img"
+          :style="{marginLeft:(split - 170)+ 'px'}"
+          :src="`${$cdn}images/t_product.png`"
+          alt
+        />
+        <div class="layout">
+          <img class="pro-logo" :src="`${$cdn}images/lite-logo.png`" alt />
+          <p class="sub b-label" v-html="langPurchase.dec"></p>
+          <p class="price">
+            {{langPurchase.price}}
+            <span>{{langPurchase.yushou}}</span>
+          </p>
+          <template>
+            <p class="title first-title">{{langPurchase.color.key}}</p>
+            <div class="detail-box">
+              <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+              <i class="iconfont icon-yuandian"></i>
+              {{langPurchase.color.val}}
+            </div>
+            <p class="title">{{langPurchase.service.key}}</p>
+            <div class="detail-box">
+              <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+              <ul>
+                <li v-for="(item, i) in langPurchase.service.val" :key="i">{{item}}</li>
+              </ul>
+            </div>
+            <p class="title">{{langPurchase.gift.key}}</p>
+            <div class="detail-box zhijia">
+              <img :src="`${$cdn}images/zhijia.png`" alt />
+              <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+              <span>{{langPurchase.gift.val}}</span>
             </div>
-            <div class="button"  @click="pay">
-              <vcenter>
-                <!-- <img src="@/assets/images/product_icon_arrow.png" alt> -->
-                <span>{{langPurchase.buy}}</span>
-              </vcenter>
+          </template>
+          <p class="title">{{langPurchase.count.key}}</p>
+          <spinner @count="handleSpinner" />
+          <div>
+            <div class="btns">
+              <div class="button add-cart" @click="addcart">
+                <vcenter>
+                  <!-- <img src="@/assets/images/product_icon_arrow_l.png" alt> -->
+                  <span>加入购物车</span>
+                </vcenter>
+              </div>
+              <div class="button" @click="pay">
+                <vcenter>
+                  <!-- <img src="@/assets/images/product_icon_arrow.png" alt> -->
+                  <span>{{langPurchase.buy}}</span>
+                </vcenter>
+              </div>
             </div>
+            <div class="btn-dec">{{langPurchase.tiaokuan}}</div>
           </div>
-          <div class="btn-dec">{{langPurchase.tiaokuan}}</div>
         </div>
       </div>
     </div>
@@ -161,12 +166,14 @@ export default {
     pay () {
       let params = {
         type: 'detail',
-        sku: [{
-          goodsId: 1,
-          goodsCount: this.count,
-          price: 3999,
-          skuSn: 'U15609161635760014'
-        }],
+        sku: [
+          {
+            goodsId: 1,
+            goodsCount: this.count,
+            price: 3999,
+            skuSn: 'U15609161635760014'
+          }
+        ],
         fromList: false
       }
       this.$bus.$emit('showAside', params)

src/page/purchasetow/style.scss

@@ -27,7 +27,10 @@
 
 .plate01{
   background: url("~@/assets/images/purchase_bg.png") #f8f9fc top center no-repeat;
-  padding: 0 0 155px;
+  padding: 0 0 100px;
+  .main-detail{
+    padding-top: 80px;
+  }
   .p1-banner{
     background: #fff;
     height: 65px;
@@ -80,10 +83,11 @@
     }
     .detail-box{
       display: inline-block;
+      position: relative;
       border: 1px solid #70eee9;
       background: #f8fefe;
       color: rgba(0,0,0,.45);
-      padding: 5px 63px;
+      padding: 5px 20px;
       line-height: 1.5;
       width: 344px;
       box-sizing: border-box;
@@ -95,6 +99,14 @@
         font-size: 16px;
         color: #000;
       }
+      .t-click{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: 0;
+        width: 16px;
+        height: 16px;
+      }
       .icon-yuandian::before{
         margin-right: 6px;
         font-size: 16px;
@@ -129,6 +141,12 @@
             transform: translateY(-50%);
             background-color: rgba(0,0,0,.45);
           }
+          &:last-of-type{
+            &::before{
+              content: '';
+              top: 18%;
+            }
+          }
         }
       }
     }
@@ -145,6 +163,13 @@
         font-size: 14px;
       }
     }
+    .no-active{
+      border: 1px solid #e3e3e3;
+      background-color: #fff;
+      .t-click{
+        display: none;
+      }
+    }
     .btns {
       img{
         width: 24px;
@@ -167,7 +192,7 @@
 .plate02{
   width: 845px;
   margin: 0 auto;
-  padding: 155px 0;
+  padding: 84px 0;
   text-align: center;
   .b-title{
     font-weight: 700;
@@ -228,4 +253,13 @@
       text-indent: 0px;
     }
   }
+}
+
+@media screen and (min-width: 2000px) {
+  .plate01 {
+    .main-detail{
+      max-width: 1920px;
+      margin: 0 auto!important;
+    }
+  }
 }

src/router/index.js

@@ -31,7 +31,7 @@ let router = new Router({
       component: resolve => require(['@/page/payrecharge'], resolve)
     },
     {
-      path: '/payresult/:isSuccess',
+      path: '/payresult/:isSuccess/:type',
       name: 'payresult',
       component: resolve => require(['@/page/payresult'], resolve)
     },

src/store/language/cn/binocular.js

@@ -6,7 +6,7 @@ export default{
   introduce: {
     title: ['四维看看 Lite', '全球首款 消费级3D空间相机'],
     price: ['RMB 3,999', '起'],
-    dec: '10分钟复刻空间，时间仅需传统设备的1/20，4K<br/>高清画质，实现沉浸式3D实景空间漫游',
+    dec: '10分钟复刻空间（100m²），时间仅需传统设备的1/20，4K高清画质，快速实现沉浸式3D实景空间漫游。',
     btn: '立即购买',
     subTitle: '3D实景复刻神器',
     benefitGroup: [
@@ -55,22 +55,22 @@ export default{
     {
       title: [
         '高清还原，身临其境',
-        'AI数字化算法无死角复刻数字3D实景，带给您如临现场的空间漫游体验。'
+        'AI空间重构算法，精准还原实景空间，带给您如临现场的空间漫游体验。'
       ]
     },
     {
-      title: ['三步轻松复刻空间', '连接相机、拍摄并上传后就能获得3D空间，无需专业知识。'],
+      title: ['三步轻松复刻空间', '连接相机、拍摄及完成上传流程后，完成空间复刻。轻松<br/>上手，无需专业培训。'],
       sub: ['上传至云端计算', '四维看看Lite拍摄', '用户端空间展示']
     },
     {
       title: ['3D空间即时自动生成', '10分钟即可采集100㎡的空间数据，5分钟自动生成3D空间。']
     },
     {
-      title: ['编辑和分享互动3D空间', '支持在3D空间中增加图文、超链接、语音导览等等。']
+      title: ['编辑和分享互动3D空间', '支持在3D空间中增加多媒体热点，可支持图像、文字、超链接、语音<br/>导览等功能，轻松加入“淘宝链接”。']
     }
   ],
   technology: {
-    title: '极致工艺，登峰造极',
+    title: '精密智造，精致轻巧',
     dec: '由多达892个精密元件组装而成，超细腻喷涂工艺。'
   },
   parmas: {

src/store/language/cn/coreTech.js

@@ -55,7 +55,7 @@ export default{
           icon: {
             backgroundImage: `url(${require('@/assets/images/img_core_app01.png')})`
           },
-          sub: '全新室内重建系统<br/>运用AI算法采集数据'
+          sub: 'AI空间重构算法'
         },
         {
           icon: {

src/store/language/cn/eight.js

@@ -6,7 +6,7 @@ export default{
   introduce: {
     title: ['四维看看 Pro', '专业精准建模，高效复刻空间'],
     price: 'RMB 9,800',
-    dec: '15分钟快速三维重建，全自动生成数字3D空间，实时计算空间尺寸，12K分辨率，支持4倍放大',
+    dec: '高精度3D空间相机，10K高清分辨率，支持4倍细节放大，720°空间漫游。',
     btn: '立即购买',
     subTitle: '让三维空间获得数字新生',
     benefitGroup: [
@@ -17,7 +17,7 @@ export default{
       },
       {
         fontImg: 'icon-sfm',
-        title: 'AI数字化算法'
+        title: 'AI空间重构算法'
       },
       {
         fontImg: 'icon-3d',
@@ -38,11 +38,11 @@ export default{
     sub: ['快速编辑和分享你的互动式视频', '分享你的空间故事']
   },
   definition: {
-    title: '12K高清画质，捕捉空间的每个细节',
+    title: '10K高清画质 720°空间漫游',
     top: {
       dec:
-          ['四维看看Pro全方位记录空间中的信息，生成实景3D数字空间。您可以随时走进生成的3D场景中自由探索，', '感受如临现场的在线空间漫游体验。12K清晰度，可4倍放大画面，不错过任何细节。'],
-      intro: '四维看看Pro所拍摄的画面分辨率高达12288*6144像素'
+          ['四维看看Pro全方位记录空间中的信息，生成实景3D数字空间。您可以随时走进生成的3D场景中自由探索，', '感受如临现场的在线空间漫游体验。10K高清分辨率，可4倍放大画面，不错过任何细节。'],
+      intro: '四维看看Pro所拍摄的画面分辨率最高可达12288*6144像素'
     },
     bottom: {
       title: '细节之处，纤毫毕现',

src/store/language/cn/home.js

@@ -6,8 +6,8 @@ export default{
   tech: {
     title: '核心技术',
     dec: [
-      '四维看看Pro的核心技术由中德两国人工智能视觉领域专家共同研发。中德人工智能研究院独有的AI数字化算法+国内最大的',
-      '3D空间大数据，令四维看看Pro能即时捕捉空间信息、生成精准的3D空间。'
+      '四维看看Pro的核心研发团队由中德两国人工智能视觉领域专家共同组成，运用AI空间重构算法及3D空间大数据技术，',
+      '让四维看看Pro能够即时捕捉空间点云信息，生成精准3D空间。'
     ],
     icon: ['空间定位', '空间重建', '空间展示'],
     location: {
@@ -18,13 +18,13 @@ export default{
     },
     modeling: {
       title: '空间重建',
-      dec: '根据相机位姿和对应的点云信息，生成空间的平面布局，并自动重建三维结构。',
+      dec: '根据相机采集位姿及对应的点云信息，自动生成空间平面<br/>图及立体结构。',
       eng:
           'Automatic calculation of a 3D digital model based on 2D images, and generation in five minutes without manual intervention.'
     },
     exhibition: {
       title: '空间展示',
-      dec: '无需插件，在VR眼镜、手机、平板、电脑等终端即可实现720°<br/>沉浸式实景漫游体验。',
+      dec: '无需插件，可在手机、 平板、PC端、VR眼镜，实现720°<br/>沉浸式漫游体验。',
       eng:
           'View 3D scenes at 720° without plugins on the display terminals such as VR glasses, mobile phones, tablet PCs, and computers.'
     }
@@ -38,8 +38,8 @@ export default{
   cases: {
     title: '行业应用展示',
     dec: [
-      '四维看看已为消防、刑侦、文博等多个领域建立三维数字化档案，助力地产、酒店民宿、',
-      '电商、餐饮等行业打造体验式服务。'
+      '四维看看已为消防、刑侦、文博等多个领域建立三维数字化空间档案，',
+      '同时助力地产、酒店民宿、电商、餐饮等行业打造全新消费体验。'
     ],
     space: {
       title: '每个空间都值得被记录',
@@ -72,27 +72,27 @@ export default{
     {url: 'https://www.4dkankan.com/showPC.html?m=x2kIkoCB',
       image: baseUrl + 'images/phone_7.jpg',
       icon: baseUrl + 'images/phone_icon_7.png',
-      text: '万豪' },
-    {url: 'https://admin.4dmuseum.cn/showApp.html?m=241&bigScene&novr',
+      text: '万豪酒店' },
+    {url: 'https://admin.4dmuseum.cn/showPC.html?m=241&bigScene&novr',
       image: baseUrl + 'images/phone_2.jpg',
       icon: baseUrl + 'images/phone_icon_2.png',
       text: '广东省博物馆' },
     {url: 'http://www.4dkankan.com/showPC.html?m=laaVIiT7',
       image: baseUrl + 'images/phone_3.jpg',
       icon: baseUrl + 'images/phone_icon_3.png',
-      text: '海昏侯' },
+      text: '海昏侯考古成果展' },
     {url: 'http://www.4dkankan.com/showPC.html?m=OOM185Kf',
       image: baseUrl + 'images/phone_4.jpg',
       icon: baseUrl + 'images/phone_icon_4.png',
-      text: '华发' },
+      text: '华发地产' },
     {url: 'http://www.4dkankan.com/showPC.html?m=djryzBtW',
       image: baseUrl + 'images/phone_5.jpg',
       icon: baseUrl + 'images/phone_icon_5.png',
-      text: '欧派' },
+      text: '欧派橱柜' },
     {url: 'http://www.4dkankan.com/showPC.html?m=ImlLYDW8',
       image: baseUrl + 'images/phone_6.jpg',
       icon: baseUrl + 'images/phone_icon_6.png',
-      text: '融信' },
+      text: '融信地产' },
     {url: 'https://www.4dkankan.com/showPC.html?m=X99yIvTq',
       image: baseUrl + 'images/phone_1.jpg',
       icon: baseUrl + 'images/phone_icon_1.png',
@@ -100,15 +100,15 @@ export default{
     {url: 'https://www.4dkankan.com/showPC.html?m=iTz0LxLs',
       image: baseUrl + 'images/phone_8.jpg',
       icon: baseUrl + 'images/phone_icon_8.png',
-      text: '万科' },
+      text: '万科地产' },
     {url: 'https://www.4dkankan.com/showPC.html?m=0mVvxHHT',
       image: baseUrl + 'images/phone_9.jpg',
       icon: baseUrl + 'images/phone_icon_9.png',
-      text: '伟星' },
-    {url: 'https://admin.4dmuseum.cn/showPC.html?m=333&bigScene&novr',
+      text: '伟星地产' },
+    {url: 'https://admin.4dmuseum.cn/showApp.html?m=240&bigScene&novr',
       image: baseUrl + 'images/phone_10.jpg',
       icon: baseUrl + 'images/phone_icon_10.png',
-      text: '武侯祠' }
+      text: '宝鸡青铜博物院' }
   ],
   reports: {
     name: '媒体报道',

src/store/language/cn/manage.js

@@ -0,0 +1,158 @@
+// import Vue from 'vue'
+// let vue = new Vue()
+// let baseUrl = vue.$cdn
+
+export default{
+  main: {
+    btnType: {
+      buy: {
+        name: '立即购买',
+        to: {
+          path: '/purchase'
+        }
+      }
+    }
+  },
+  information: {
+    nameArr: {
+      information: '账号信息',
+      scene: '我的场景',
+      order: '我的订单',
+      device: '我的设备',
+      consumption: '消费记录',
+      change: '修改密码',
+      logout: '退出登录'
+    },
+    settings: [
+      {
+        name: 'info',
+        items: [{
+          name: '账号信息',
+          to: {name: 'information'}
+        }, {
+          name: '我的场景',
+          to: {name: 'scene'}
+        }, {
+          name: '我的订单',
+          to: {name: 'order'}
+        }, {
+          name: '我的设备',
+          to: {name: 'device'}
+        }, {
+          name: '消费记录',
+          to: {name: 'consumption'}
+        }
+        ]
+      },
+      {
+        name: 'security',
+        items: [{
+          name: '修改密码',
+          to: {name: 'change'}
+        }, {
+          name: '退出登录',
+          to: 'logout'
+        }]
+      }
+    ],
+    deviceSettings: [
+      {
+        name: 'security',
+        items: [ {
+          name: '我的场景',
+          to: {name: 'scene'}
+        }, {
+          name: '消费记录',
+          to: {name: 'consumption'}
+        }, {
+          name: '退出登录',
+          to: 'logout'
+        }]
+      }
+    ]
+  },
+  account: {
+    info: '账号信息',
+    address: '我的收货地址',
+    invoice: '我的发票抬头',
+    normal: '增值税普通发票',
+    zengzhi: '增值税专用发票',
+    edit: '编辑',
+    show: '收起',
+    avatar: '头像',
+    nickname: '昵称',
+    placeholder: {
+      nickname: '输入昵称',
+      phone: '电话',
+      name: '姓名',
+      address: '详细地址',
+      title: '请输入发票抬头',
+      code: '请输入税务登记号（个人用户可不填）',
+      raddress: '注册地址',
+      rphone: '注册电话',
+      bank: '开户银行',
+      accout: '银行账户'
+    },
+    save: '保存',
+    select: '选择图片',
+    sinfo: [
+      '请选择一张新照片进行上传',
+      '支持图片格式为：JPG/PNG',
+      '推荐分辨率为：512*512px，大小不大于1MB'
+    ]
+  },
+  myScenes: {
+    edit: '编辑',
+    delete: '删除',
+    shooting: '拍摄时间：'
+  },
+  myOrders: {
+    numbers: '订单号：',
+    product: '商品',
+    quantity: '数量',
+    subtotal: '小计（CNY）',
+    total: '总价：￥',
+    cancal: '取消订单',
+    pay: '立即付款'
+  },
+  myDevices: {
+    add: '添加新设备',
+    tabList: [
+      {
+        name: '四维看看Pro',
+        id: 4
+      }, {
+        name: '四维看看Lite',
+        id: 0
+      }
+    ],
+    placeholder: {
+      searchID: '搜索设备ID'
+    },
+    storage: '云存储空间',
+    renew: '续费',
+    upgrade: '升级',
+    capacity: '扩容',
+    unbind: '解绑'
+  },
+  Spending: {
+    tabList: [
+      {
+        name: '扩容记录'
+      }, {
+        name: '充值记录'
+      }, {
+        name: '增值发票'
+      }
+    ]
+  },
+  modify: {
+    code: '获取验证码',
+    submit: '提交'
+  },
+  cart: {
+    cart: '您的购物车',
+    nothing: '您的购物车空空如也<br/>赶紧行动吧',
+    shop: '立即购买'
+  }
+}

src/store/language/cn/purchase.js

@@ -1,9 +1,10 @@
 export default{
   top1: '概览',
   top2: '技术规格',
-  dec: '15分钟快速建模，全自动生成空间模型，实时计算空间尺寸，10K分辨率支持4倍放大',
+  dec: '高精度3D空间相机，10K高清分辨率，支持4倍细节放大，720°空间漫游。',
   yushou: '【新品预售】',
   price: 'RMB 9,800',
+  addzhijia: 'RMB 10,395',
   buy: '立即购买',
   tiaokuan: '* 付款成功后5个工作日内发货，默认顺丰快递包邮',
   guige: {
@@ -62,15 +63,14 @@ export default{
   service: {
     key: '服务',
     val: [
-      '数据永久存储',
-      '高速上传计算队列',
-      '场景分享、热点编辑、隐私加密',
-      '多种个性化功能',
-      '附送30G终身容量'
+      '首批预购用户，独享10G云容量5年使用权',
+      '高速上传云计算队列',
+      '支持分享多个社交平台',
+      '支持在3D空间中增加多媒体热点、隐私加密、自动测距、嵌入网站等功能'
     ]
   },
   gift: {
-    key: '赠品',
+    key: '选购配件',
     val: ' 官方拍摄支架 x 1'
   },
   count: {

src/store/language/cn/purchasetow.js

@@ -1,7 +1,7 @@
 export default{
   top1: '概览',
   top2: '技术规格',
-  dec: '10分钟复刻空间，时间仅需传统设备的1/20，4K高清画质，实现沉浸式3D实景空间漫游',
+  dec: '10分钟复刻空间（100m²），时间仅需传统设备的1/20，4K高清画质，快速实现沉浸式3D实景空间漫游。',
   yushou: '【新品预售】',
   price: 'RMB 3,999',
   buy: '立即购买',
@@ -54,11 +54,10 @@ export default{
   service: {
     key: '服务',
     val: [
-      '数据永久存储',
-      '高速上传计算队列',
-      '场景分享、热点编辑、隐私加密',
-      '多种个性化功能',
-      '附送30G终身容量'
+      '独享10G云容量5年使用权',
+      '高速上传云计算队列',
+      '支持分享多个社交平台',
+      '支持在3D空间中增加多媒体热点、隐私加密、自动生成空间模型、植入多媒体、嵌入网站等功能'
     ]
   },
   gift: {

src/store/language/en/home.js

@@ -67,27 +67,27 @@ export default{
     {url: 'https://www.4dkankan.com/showPC.html?m=x2kIkoCB',
       image: baseUrl + 'images/phone_7.jpg',
       icon: baseUrl + 'images/phone_icon_7.png',
-      text: '万豪' },
-    {url: 'https://admin.4dmuseum.cn/showApp.html?m=241&bigScene&novr',
+      text: '万豪酒店' },
+    {url: 'https://admin.4dmuseum.cn/showPC.html?m=241&bigScene&novr',
       image: baseUrl + 'images/phone_2.jpg',
       icon: baseUrl + 'images/phone_icon_2.png',
       text: '广东省博物馆' },
     {url: 'http://www.4dkankan.com/showPC.html?m=laaVIiT7',
       image: baseUrl + 'images/phone_3.jpg',
       icon: baseUrl + 'images/phone_icon_3.png',
-      text: '海昏侯' },
+      text: '海昏侯考古成果展' },
     {url: 'http://www.4dkankan.com/showPC.html?m=OOM185Kf',
       image: baseUrl + 'images/phone_4.jpg',
       icon: baseUrl + 'images/phone_icon_4.png',
-      text: '华发' },
+      text: '华发地产' },
     {url: 'http://www.4dkankan.com/showPC.html?m=djryzBtW',
       image: baseUrl + 'images/phone_5.jpg',
       icon: baseUrl + 'images/phone_icon_5.png',
-      text: '欧派' },
+      text: '欧派橱柜' },
     {url: 'http://www.4dkankan.com/showPC.html?m=ImlLYDW8',
       image: baseUrl + 'images/phone_6.jpg',
       icon: baseUrl + 'images/phone_icon_6.png',
-      text: '融信' },
+      text: '融信地产' },
     {url: 'https://www.4dkankan.com/showPC.html?m=X99yIvTq',
       image: baseUrl + 'images/phone_1.jpg',
       icon: baseUrl + 'images/phone_icon_1.png',
@@ -95,15 +95,15 @@ export default{
     {url: 'https://www.4dkankan.com/showPC.html?m=iTz0LxLs',
       image: baseUrl + 'images/phone_8.jpg',
       icon: baseUrl + 'images/phone_icon_8.png',
-      text: '万科' },
+      text: '万科地产' },
     {url: 'https://www.4dkankan.com/showPC.html?m=0mVvxHHT',
       image: baseUrl + 'images/phone_9.jpg',
       icon: baseUrl + 'images/phone_icon_9.png',
-      text: '伟星' },
-    {url: 'https://admin.4dmuseum.cn/showPC.html?m=333&bigScene&novr',
+      text: '伟星地产' },
+    {url: 'https://admin.4dmuseum.cn/showApp.html?m=240&bigScene&novr',
       image: baseUrl + 'images/phone_10.jpg',
       icon: baseUrl + 'images/phone_icon_10.png',
-      text: '武侯祠' }
+      text: '宝鸡青铜博物院' }
   ],
   reports: {
     name: 'Media Coverage',

src/store/language/en/manage.js

@@ -0,0 +1,158 @@
+// import Vue from 'vue'
+// let vue = new Vue()
+// let baseUrl = vue.$cdn
+
+export default{
+  main: {
+    btnType: {
+      buy: {
+        name: 'Shop Now',
+        to: {
+          path: '/purchase'
+        }
+      }
+    }
+  },
+  information: {
+    nameArr: {
+      information: 'Account Information',
+      scene: 'My Scene',
+      order: 'My Order',
+      device: 'My Devices',
+      consumption: 'Spending Records',
+      change: 'Modify Password',
+      logout: 'Sign Out'
+    },
+    settings: [
+      {
+        name: 'info',
+        items: [{
+          name: 'Account Information',
+          to: {name: 'information'}
+        }, {
+          name: 'My Scene',
+          to: {name: 'scene'}
+        }, {
+          name: 'My Order',
+          to: {name: 'order'}
+        }, {
+          name: 'My Devices',
+          to: {name: 'device'}
+        }, {
+          name: 'Spending Records',
+          to: {name: 'consumption'}
+        }
+        ]
+      },
+      {
+        name: 'security',
+        items: [{
+          name: 'Modify Password',
+          to: {name: 'change'}
+        }, {
+          name: 'Sign Out',
+          to: 'logout'
+        }]
+      }
+    ],
+    deviceSettings: [
+      {
+        name: 'security',
+        items: [ {
+          name: 'My Scene',
+          to: {name: 'scene'}
+        }, {
+          name: 'Spending Records',
+          to: {name: 'consumption'}
+        }, {
+          name: 'Sign Out',
+          to: 'logout'
+        }]
+      }
+    ]
+  },
+  account: {
+    info: 'Account Information',
+    address: 'Receiving Address',
+    invoice: 'Invoice Title',
+    normal: 'Regular invoice for value-added tax',
+    zengzhi: 'Special invoice for value-added tax',
+    edit: 'Edit',
+    show: 'Hide',
+    avatar: 'Profile Picture',
+    nickname: 'Name',
+    placeholder: {
+      nickname: 'Please input name',
+      phone: 'Phone',
+      name: 'Name',
+      address: 'Detailed address',
+      title: 'Please input the invoice title',
+      code: 'Please input a tax registration number (individual users may not fill this in)',
+      raddress: 'Registered address',
+      rphone: 'Registered phone number',
+      bank: 'Bank of deposit',
+      accout: 'Bank account'
+    },
+    save: 'Save',
+    select: 'Select Picture',
+    sinfo: [
+      'Select a new picture to upload.',
+      'Supported picture formats: JPG/PNG',
+      'Recommended resolution and size: 512*512 px; less than 1 MB'
+    ]
+  },
+  myScenes: {
+    edit: 'Edit',
+    delete: 'Delete',
+    shooting: 'Shooting date: '
+  },
+  myOrders: {
+    numbers: 'Order number: ',
+    product: 'Item',
+    quantity: 'Quantity',
+    subtotal: 'Subtotal (CNY)',
+    total: 'Total price: ￥',
+    cancal: 'Cancel order',
+    pay: 'Pay now'
+  },
+  myDevices: {
+    add: 'Add a new device',
+    tabList: [
+      {
+        name: '4DKanKan Pro',
+        id: 4
+      }, {
+        name: '4DKanKan Lite',
+        id: 0
+      }
+    ],
+    placeholder: {
+      searchID: 'Search device ID'
+    },
+    storage: 'Cloud storage space',
+    upgrade: 'Upgrade',
+    renew: 'Renew',
+    capacity: 'Expand',
+    unbind: 'Unbind'
+  },
+  Spending: {
+    tabList: [
+      {
+        name: '扩容记录'
+      }, {
+        name: '充值记录'
+      }, {
+        name: '增值发票'
+      }
+    ]
+  },
+  modify: {
+    code: '获取验证码',
+    submit: 'Submit'
+  },
+  cart: {
+    cart: 'Your shopping cart',
+    nothing: 'Your shopping cart is empty.<br/>Start shopping!',
+    shop: 'Shop Now'
+  }
+}

src/store/language/en/purchase.js

@@ -4,6 +4,7 @@ export default{
   dec: '15分钟快速建模，全自动生成空间模型，实时计算空间尺寸，10K分辨率支持4倍放大',
   yushou: '【新品预售】',
   price: 'RMB 9,800',
+  addzhijia: 'RMB 10,395',
   buy: 'Shop Now',
   tiaokuan: '* 付款成功后5个工作日内发货，默认顺丰快递包邮',
   guige: {
@@ -70,7 +71,7 @@ export default{
     ]
   },
   gift: {
-    key: '赠品',
+    key: '选购配件',
     val: ' 官方拍摄支架 x 1'
   },
   count: {

src/store/language/home_cn.js

@@ -5,6 +5,7 @@ import about from './cn/about'
 import coreTech from './cn/coreTech'
 import purchase from './cn/purchase'
 import purchasetow from './cn/purchasetow'
+import manage from './cn/manage'
 
 export default {
   title: '中文',
@@ -182,5 +183,6 @@ export default {
   about,
   coreTech,
   purchase,
-  purchasetow
+  purchasetow,
+  manage
 }

src/store/language/home_en.js

@@ -5,6 +5,7 @@ import about from './en/about'
 import coreTech from './en/coreTech'
 import purchase from './en/purchase'
 import purchasetow from './en/purchasetow'
+import manage from './en/manage'
 
 export default {
   title: 'English',
@@ -187,5 +188,6 @@ export default {
   about,
   purchase,
   coreTech,
-  purchasetow
+  purchasetow,
+  manage
 }

src/store/user.js

@@ -286,11 +286,11 @@ export default {
     async getUserExpansion (context, params) {
       let res = await http({
         method: 'post',
-        data: params,
+        data: params.params,
         headers: {
           token: context.state.token
         },
-        url: '/user/virtualOrder/expansionList'
+        url: params.url
       })
 
       let data = res.data
@@ -301,11 +301,11 @@ export default {
     async getChargeList (context, params) {
       let res = await http({
         method: 'post',
-        data: params,
+        data: params.params,
         headers: {
           token: context.state.token
         },
-        url: '/user/virtualOrder/chargeList'
+        url: params.url
       })
 
       let data = res.data
@@ -316,11 +316,11 @@ export default {
     async getInvoiceList (context, params) {
       let res = await http({
         method: 'post',
-        data: params,
+        data: params.params,
         headers: {
           token: context.state.token
         },
-        url: '/user/invoice/list'
+        url: params.url
       })
 
       let data = res.data

src/util/index.js

@@ -1,3 +1,5 @@
+const detectZoom = require('detect-zoom')
+
 module.exports = {
   getPosition: function (dom, parent) {
     var ret = {
@@ -23,32 +25,9 @@ module.exports = {
     return true
   },
   detectZoom: function () {
-    let ratio = 0
-    let screen = window.screen
-    let ua = navigator.userAgent.toLowerCase()
-
-    if (~ua.indexOf('firefox')) {
-      if (window.devicePixelRatio !== undefined) {
-        ratio = window.devicePixelRatio
-      }
-    } else if (~ua.indexOf('msie')) {
-      if (screen.deviceXDPI && screen.logicalXDPI) {
-        ratio = screen.deviceXDPI / screen.logicalXDPI
-      }
-    } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
-      ratio = window.outerWidth / window.innerWidth
-    }
-
-    if (ratio) {
-      ratio = Math.round(ratio * 100)
-    }
-
-    // 360安全浏览器下浏览器最大化时诡异的outerWidth和innerWidth不相等
-    if (ratio === 99 || ratio === 101) {
-      ratio = 100
-    }
-
-    return ratio
+    var zoom = detectZoom.zoom()
+    var device = detectZoom.device()
+    return [zoom, device]
   },
   isWide: function () {
     return Math.round(devicePixelRatio * 100) === 100 ? window.innerWidth > 1600 : true
@@ -58,7 +37,6 @@ module.exports = {
       /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
     ]
     for (let i = 0; i < phones.length; i++) {
-      console.log(phones[i].test(phone))
       if (phones[i].test(phone)) {
         return true
       }