4.25下午

build/webpack.dev.conf.js

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

config/index.js

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

src/components/card/index.vue

@@ -2,7 +2,7 @@
 <div class="card-con">
   <img :src="data.img">
   <div class="info">
-    <div class="title">{{data.title}}</div>
+    <!-- <div class="title">{{data.title}}</div> -->
     <div class="username">
       <span class="txt">作者：</span>
       <span >{{data.username}}</span>
@@ -72,6 +72,7 @@ export default {
   }
 
   .info {
+    margin-top: 16px;
     .title {
       font-size: 24px;
       color: #1fe4dc;

src/page/binocular/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="product-layout" ref="productLayout">
-
     <div class="plate01 plate">
       <img class="pl01-bg" src="@/assets/images/t-bg.png" alt="">
-      <div class="layout">
+      <div class="layout" :style="{marginLeft:(split - 186)+ 'px'}">
         <img class="product-img" src="@/assets/images/t_product.png" alt="">
         <div class="info">
           <h2>4DKankan lite</h2>
@@ -154,6 +153,7 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
 import vcenter from '@/components/vcenter'
 import { getPosition } from '@/util'
 import phone from '@/components/phone'
@@ -261,6 +261,11 @@ export default {
       standardGroup
     }
   },
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  },
   methods: {
 
   },

src/page/binocular/style.scss

@@ -29,7 +29,7 @@ $txt_delay: 0.2s;
 }
 
 .plate01 {
-  padding: 150px 0;
+  padding: 60px 0 150px;
   background:linear-gradient(
     65deg,
     #010101 20%,
@@ -47,15 +47,15 @@ $txt_delay: 0.2s;
   .layout {
     z-index: 1;
     max-width: 1148px;
-    margin: 70px auto;
+    margin-top: 70px;
     overflow: hidden;
     position: relative;
     .product-img{
-      // width: 10vw;
+      width: 200px;
     }
     .info {
       display: inline-block;
-      margin:110px 0 0 58px;
+      margin: 65px 0 0 75px;
       width: 500px;
       vertical-align: top;
       .btns{

src/page/cases/index.vue

@@ -34,6 +34,7 @@
 <script>
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 // 例如：import 《组件名称》 from '《组件路径》';
+import {mapState} from 'vuex'
 import vcenter from '@/components/vcenter'
 import card from '@/components/card'
 import Paging from '@/components/Paging'
@@ -101,13 +102,16 @@ export default {
     // 这里存放数据
     return {
       cardArr,
-      split: 660,
       total: 90,
       pageSize: 10
     }
   },
   // 监听属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  },
   // 监控data中的数据变化
   watch: {},
   // 方法集合
@@ -122,7 +126,7 @@ export default {
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
-
+    console.log(this.split)
   }
 }
 </script>

src/page/cases/style.scss

@@ -10,18 +10,19 @@
       position: absolute;
       left: 0;
       margin-top: 48px;
-      padding-left: 60px;
+      padding-left: 70px;
       height: 126px;
       width: auto;
     }
     .case-nav{
-      padding-top: 48px;
+      padding-top: 38px;
       border-left: 1px solid #e5e5e5;
-      padding-bottom: 60px; 
+      padding-bottom: 44px; 
       .nav-con{
         font-size: 48px;
         .list-txt{
           padding-left: 30px;
+          font-weight: bold;
         }
         .list-navs{
           border-bottom: 1px solid #e5e5e5;
@@ -57,9 +58,9 @@
 }
 .case-body{
   max-width: 1470px;
-  margin-left: 232px;
+  margin-left: 220px;
   .card{
-    margin-bottom: 50px;
+    margin-bottom: 22px;
   }
   .paging{
     // border-left: #e5e5e5 1px solid;

src/page/eight/index.vue

@@ -3,23 +3,14 @@
 
     <div class="plate01 plate">
       <img class="pl01-bg" src="@/assets/images/eight-bg.png" alt="">
-      <div class="layout">
-        <img src="@/assets/images/banner_pro.png" alt="">
+      <div class="layout" :style="{marginLeft:(split - 178)+ 'px'}">
+        <img class="product-img" src="@/assets/images/banner_pro.png" alt="">
         <div class="info">
           <h2>4DKankan Pro</h2>
           <h2>让空间讲故事</h2>
-          <h4>标准套装</h4>
-          <p><span class="money">￥4999</span>购机即返利4999元至注册账户</p>
-          <p class="p1">1-120个拍摄点位以及30个以内热点的图片或文字价值99元</p>
-          <p class="p2">超过预设拍摄点位及热点请联系客服</p>
-          <div class="v-line"></div>
-          <ul>
-            <li>永久存储数据</li>
-            <li>添加热点</li>
-            <li>项目、模型编辑</li>
-            <li>计算三维立体化场景</li>
-            <li>手机端人工智能算法优化</li>
-          </ul>
+          <p><span class="money">￥4999</span>起</p>
+          <p class="p1">骁龙835高性能处理器，6颗200°超广角鱼眼镜头</p>
+          <p class="p2">高速5GWi-Fi传输方式，超强AI算法自动建模</p>
           <div class="btns">
             <a href="" class="button"><vcenter><img src="@/assets/images/product_icon_arrow.png" alt=""></vcenter></a>
             <a href="" class="button">立即购买</a>
@@ -243,6 +234,7 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
 import vcenter from '@/components/vcenter'
 import { getPosition } from '@/util'
 import phone from '@/components/phone'
@@ -364,6 +356,11 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  },
   methods: {
 
   },

src/page/eight/style.scss

@@ -52,12 +52,15 @@ $num_time: 0.6s;
   .layout {
     z-index: 1;
     max-width: 1148px;
-    margin: 70px auto;
+    margin-top: 70px;
     overflow: hidden;
     position: relative;
+    .product-img{
+      width: 180px;
+    }
     .info {
       display: inline-block;
-      margin:10px 0 0 58px;
+      margin:40px 0 0 58px;
       width: 500px;
       vertical-align: top;
       >h2 {
@@ -70,7 +73,7 @@ $num_time: 0.6s;
       >h2:last-of-type{
         letter-spacing: 0;
         font-weight: 400;
-        margin: 6px 0 25px;
+        margin: 6px 0 50px;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay;
 
       }
@@ -112,7 +115,6 @@ $num_time: 0.6s;
         margin: 6px 0 0px;
         padding-bottom: 10px;
         letter-spacing: 0.3px;
-        border-bottom: 1px solid rgba($color: #a4a3a4, $alpha: 0.2);
         display: inline-block;
       }
 
@@ -130,9 +132,8 @@ $num_time: 0.6s;
 
       .money {
         margin-top: 15px;
-        padding-right: 4px;
         font-size: 36px;
-        color: #1fe4dc;
+        color: #fff;
         position: relative;
         left: -8px;
         letter-spacing: 1px;