feat:移动端的随心装宣传页

mobile/src/lang/zh/modules/conduct.js

@@ -12,13 +12,13 @@ module.exports = {
         "itemTitle7": "强大编辑后台，让空间延伸表达"
     },
     "sxz": {
-        "bannerTitle": "随心装",
+        "bannerTitle": "四维 随心装",
         bannerSubTitle: '快速打造心中家的模样',
-        "itemTitle1": "1:1精准复刻真实房源",
+        "itemTitle1": "快速打造3D家装效果，<br/>让人工智能真正服务于生活",
         "itemTitle2": "实物家具建模，让您所见即所得",
-        "itemTitle3": "快速打造3D家装效果，<br/>让人工智能真正服务于生活",
-        "itemTitle4": "高效全屋渲染，秒级响应拒绝等待",
-        itemTitle5: '变装前后同屏看，一眼对比屋内变化'
+        "itemTitle3": "高效全屋渲染，<br />秒级响应拒绝等待",
+        "itemTitle4": "变装前后同屏看，<br/>一眼对比屋内变化",
+        itemTitle5: '样例展示'
     },
     "coreTech": {
         "bannerTitle": "核心技术",

mobile/src/pages/coreProduct/sxz.vue

@@ -7,11 +7,22 @@
     <ul class="desc-video">
       <li v-for="item in list" :key="item.name">
         <h1 class="common-title" v-html="item.name"></h1>
-        <img :src="item.img" v-if="typeof item.img === 'string'">
-        <div class="img-item-w" v-else>
-            <comparePic :imgs="item.img" />
+        <iframe :src="item.iframeLink" v-if="item.iframeLink" />
+          <div v-else>
+            <img  :src="item.img" v-if="typeof item.img === 'string'" />
+            <div class="img-item-w" v-else>
+              <comparePic :imgs="item.img" />
+            </div>
           </div>
       </li>
+      <li class="plate item">
+          <h1 class="common-title">{{ cases.name }}</h1>
+          <ul class="case-list">
+            <li v-for="item in cases.list" :key="item.link" :style="{'background-image': `url(${item.img})`}" @click="toLink(item.link)">
+              <h2>{{ item.name }}</h2>
+            </li>
+          </ul>
+      </li>
     </ul>
   </div>
 </template>
@@ -25,37 +36,58 @@ export default {
       list: [
         {
           name: i18n.t('conduct.sxz.itemTitle1'),
-          img: require('@/assets/images/refactor/coreProduct/sxz/item1.png')
+          img: require('@/assets/images/refactor/coreProduct/sxz/item-1.png')
         },
         {
           name: i18n.t('conduct.sxz.itemTitle2'),
-          img: require('@/assets/images/refactor/coreProduct/sxz/item2.png')
+          img: require('@/assets/images/refactor/coreProduct/sxz/item-2.png')
         },
         {
           name: i18n.t('conduct.sxz.itemTitle3'),
-          img: require('@/assets/images/refactor/coreProduct/sxz/item3.png')
+          img: [require('@/assets/images/refactor/coreProduct/sxz/r06_s.jpeg'), require('@/assets/images/refactor/coreProduct/sxz/r06.jpeg')]
         },
         {
           name: this.$t('conduct.sxz.itemTitle4'),
-          img: [require('@/assets/images/refactor/coreProduct/sxz/r06_s.jpeg'), require('@/assets/images/refactor/coreProduct/sxz/r06.jpeg')],
-          runAnimation: true
-        },
-        {
-          name: this.$t('conduct.sxz.itemTitle5'),
-          img: [require('@/assets/images/refactor/coreProduct/sxz/r06_s.jpeg'), require('@/assets/images/refactor/coreProduct/sxz/r06.jpeg')],
+          iframeLink: '//www.4dkankan.com/decor.html?m=t-V7Wsf2Y&m2=vr-t-V7Wsf2Y-011',
           runAnimation: true
         }
-      ]
+      ],
+      cases: {
+        name: this.$t('conduct.sxz.itemTitle5'),
+        list: [
+          {
+            img: require('@/assets/images/refactor/coreProduct/sxz/case-1.png'),
+            link: 'https://test.4dkankan.com/spc.html?m=vr-t-5JCEMWu-003'
+          },
+          {
+            img: require('@/assets/images/refactor/coreProduct/sxz/case-2.png'),
+            link: 'https://www.4dkankan.com/spc.html?m=vr-t-V7Wsf2Y-011'
+          },
+          {
+            img: require('@/assets/images/refactor/coreProduct/sxz/case-3.png'),
+            link: 'https://www.4dkankan.com/spc.html?m=vr-t-nn57rQe-039'
+          }
+        ]
+      }
     }
   },
   components: {
     comparePic
+  },
+  mounted () {
+  },
+  methods: {
+    toLink (link) {
+      window.open(link)
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .conduct-sxz {
+  width: 100%;
+  overflow: hidden;
   .banner {
     width: 100%;
     height: 140px;
@@ -67,7 +99,7 @@ export default {
     background: #D4D4D4;
     flex-direction: column;
     justify-content: center;
-    background: url(~@/assets/images/refactor/conduct/exhibition/banner.png) no-repeat center center;
+    background: url(~@/assets/images/refactor/coreProduct/sxz/banner.png) no-repeat center center;
     background-size: cover;
   }
   h4 {
@@ -79,6 +111,23 @@ export default {
   }
   li {
     margin-bottom: 56px;
+    iframe {
+      margin-top: 30px;
+      width: 100%;
+      height: 400px;
+    }
+  }
+  .case-list {
+    padding: 0;
+    margin-top: 30px;
+    li {
+      width: 100%;
+      height: 207px;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      background-position: center center;
+      margin-bottom: 21px;
+    }
   }
   img {
     margin-top: 30px;
@@ -88,4 +137,5 @@ export default {
     margin-top: 30px;
   }
 }
+
 </style>

pc/src/page/coreProducts/sxz.vue

@@ -68,17 +68,14 @@ export default {
         name: this.$t('conduct.sxz.itemTitle6'),
         list: [
           {
-            name: '轻奢三房',
             img: require('@/assets/images/core-products/sxz/case-1.png'),
             link: 'https://www.4dkankan.com/spc.html?m=vr-t-nn57rQe-039'
           },
           {
-            name: '轻奢三房',
             img: require('@/assets/images/core-products/sxz/case-2.png'),
             link: 'https://www.4dkankan.com/spc.html?m=vr-t-g9Ob6XN-069'
           },
           {
-            name: '轻奢三房',
             img: require('@/assets/images/core-products/sxz/case-3.png'),
             link: 'https://test.4dkankan.com/spc.html?m=vr-t-5JCEMWu-003'
           }