feat:修改随心装界面

pc/src/components/toast/cooperation.vue

@@ -4,7 +4,7 @@
     :style="{background:false?'none':'rgba(0, 0, 0, 0.3)'}"
     :class="{'toast-active':visible}"
   >
-    <div class="toast-con bind-con" :style="{minWidth:'600px'}">
+    <div class="toast-con bind-con" :style="{minWidth:'750px'}">
       <div class="t-header ">
         <span>{{lang==='en'?'Invite collaborator':'协作设置'}}</span>
         <i class="iconfont icon-cuowu" @click="handleClick"></i>
@@ -27,7 +27,7 @@
 
           <div class="toclient"><span>{{lang==='en'?'Permission':'协作权限'}}</span><div @click="handleSelectAll"><span :class="{check_active:selectAll}" class="fdcheck">{{lang==='en'?'All':'全选'}}</span></div></div>
           <ul class="auth-list">
-            <li v-for="(item,i) in auth" :key="i"><span @click="selectItem(item,i)" class="fdcheck" :class="{check_active:item.hasAuth}">{{lang==='en'?item.keyWord:item.name}}</span></li>
+            <li v-for="(item,i) in auth" :key="i"><span @click="selectItem(item,i)" class="fdcheck" :class="{check_active:item.hasAuth}">{{lang==='en'?item.enName:item.name}}</span></li>
           </ul>
         </div>
       </div>

pc/src/components/toast/style.scss

@@ -373,7 +373,7 @@ $border-color: #e7e7e7;
       }
       .cooperation{
         top: 0!important;
-        width: 550px;
+        width: 670px;
         .toclient{
           margin-top: 15px;
           margin-bottom: 7px;

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

@@ -17,7 +17,8 @@ module.exports = {
         itemTitle2: '实物家具建模，让您所见即所得',
         itemTitle3: '快速打造3D家装效果，让人工智能真正服务于生活',
         itemTitle4: '高效全屋渲染，秒级响应拒绝等待',
-        itemTitle5: '变装前后同屏看，一眼对比屋内变化'
+        itemTitle5: '变装前后同屏看，一眼对比屋内变化',
+        itemTitle6: '优秀作品'
     },
     "coreTech": {
         "bannerTitle": "核心技术",

pc/src/page/coreProducts/sxz.vue

@@ -7,12 +7,25 @@
       <div class="plate item" v-for="(item,i) in sequenceArr" :key="i">
         <div class="container">
           <h2 class="common-title">{{item.name}}</h2>
-          <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>
         </div>
       </div>
+      <div class="plate item">
+        <div class="container">
+          <h2 class="common-title">{{ cases.name }}</h2>
+          <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>
+        </div>
+      </div>
     </div>
     
   </div>
@@ -29,7 +42,7 @@ export default {
     return {
       sequenceArr: [
         {
-          name: this.$t('conduct.sxz.itemTitle1'),
+          name: this.$t('conduct.sxz.itemTitle3'),
           img: require('@/assets/images/core-products/sxz/item-1.png'),
           runAnimation: true
         },
@@ -39,21 +52,41 @@ export default {
           runAnimation: true
         },
         {
-          name: this.$t('conduct.sxz.itemTitle3'),
-          img: require('@/assets/images/core-products/sxz/item-3.png'),
-          runAnimation: true
-        },
-        {
           name: this.$t('conduct.sxz.itemTitle4'),
           img: [require('@/assets/images/core-products/sxz/r06_s.jpeg'), require('@/assets/images/core-products/sxz/r06.jpeg')],
           runAnimation: true
         },
         {
           name: this.$t('conduct.sxz.itemTitle5'),
-          img: [require('@/assets/images/core-products/sxz/r06_s.jpeg'), require('@/assets/images/core-products/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.itemTitle6'),
+        list: [
+          {
+            name: '轻奢三房',
+            img: require('@/assets/images/core-products/sxz/case1.png'),
+            link: 'https://test.4dkankan.com/spc.html?m=vr-t-5JCEMWu-003'
+          },
+          {
+            name: '轻奢三房',
+            img: require('@/assets/images/core-products/sxz/case2.png'),
+            link: 'https://www.4dkankan.com/spc.html?m=vr-t-V7Wsf2Y-011'
+          },
+          {
+            name: '轻奢三房',
+            img: require('@/assets/images/core-products/sxz/case3.png'),
+            link: 'https://www.4dkankan.com/spc.html?m=vr-t-nn57rQe-039'
+          },
+          {
+            name: '轻奢三房',
+            img: require('@/assets/images/core-products/sxz/case4.png'),
+            link: 'https://www.4dkankan.com/spc.html?m=vr-t-g9Ob6XN-069'
+          },
+        ]
+      }
     }
   },
   computed: {
@@ -68,6 +101,11 @@ export default {
   mounted () {
     const ISZH = this.language === 'zh'
   },
+  methods: {
+    toLink (link) {
+      window.open(link)
+    }
+  },
   destroyed () {
   },
 }
@@ -90,10 +128,14 @@ export default {
   .item {
     padding: 110px 0 0;
     img {
-      
+      width: 100%;
     }
     
   }
+  iframe {
+    width: 100%;
+    height: 530px;
+  }
   .common-title {
     margin-top: 0;
     margin-bottom: 50px;
@@ -104,6 +146,30 @@ export default {
     height: 673px;
     width: 100%;
   }
+  .case-list {
+    display: flex;
+    li {
+      flex: 1;
+      height: 453px;
+      margin-right: 20px;
+      font-size: 24px;
+      color: #202020;
+      padding-top: 52px;
+      line-height: 28px;
+      text-align: center;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      transition: background 0.3s ease-in-out;
+      cursor: pointer;
+      &:hover {
+        background-size: 105% 105%;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
 }