feat:增加随心装PC页面

pc/src/components/common/comparePic.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="compare-pic" ref="compare-pic">
+    <img :class="`img-item img-item-0`" :src="imgs[0]" />
+    <div class="beetween-ctrls" @mousedown="handleMousedown" :style="{left: `${newPosition}%`}">
+      <div class="line"></div>
+      <div class="circle-ctrls">
+        <div class="animation-circle"></div>
+      </div>
+    </div>
+    <div :class="`img-item img-item-1`"  :style="{'background-image': `url(${imgs[1]})`, width: `${100 - newPosition}%`}"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    imgs: Array
+  },
+  data () {
+    return {
+      newPosition: 50,
+      maxWidth: 0,
+    }
+  },
+  methods: {
+    handleMousedown (event) {
+      this.onDragStart(event)
+      window.addEventListener('mousemove', this.onDragging)
+      window.addEventListener('touchmove', this.onDragging)
+      window.addEventListener('mouseup', this.onDragEnd)
+      window.addEventListener('touchend', this.onDragEnd)
+      window.addEventListener('contextmenu', this.onDragEnd)
+    },
+    onDragEnd () {
+      window.removeEventListener('mousemove', this.onDragging)
+      window.removeEventListener('touchmove', this.onDragging)
+      window.removeEventListener('mouseup', this.onDragEnd)
+      window.removeEventListener('touchend', this.onDragEnd)
+      window.removeEventListener('contextmenu', this.onDragEnd)
+    },
+    onDragStart(event) {
+      this.dragging = true;
+      this.isClick = true;
+      const rect = this.$refs['compare-pic'].getClientRects()
+      this.maxWidth = rect[0].width
+      if (event.type === 'touchstart') {
+        event.clientY = event.touches[0].clientY;
+        event.clientX = event.touches[0].clientX;
+      }
+      this.startX = event.clientX
+    },
+    onDragging (event) {
+      this.isClick = false;
+      // this.displayTooltip();
+      let diff = 0;
+      if (event.type === 'touchmove') {
+        event.clientY = event.touches[0].clientY;
+        event.clientX = event.touches[0].clientX;
+      }
+      this.currentX = event.clientX;
+      
+      diff = (this.currentX - this.startX) / this.maxWidth * 100
+      this.startX = this.currentX
+      this.setPosition(this.newPosition + diff);
+    },
+    setPosition(newPosition) {
+      if (newPosition === null || isNaN(newPosition)) return;
+      if (newPosition < 0) {
+        newPosition = 0;
+      } else if (newPosition > 100) {
+        newPosition = 100;
+      }
+      this.newPosition = newPosition
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.compare-pic {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+.img-item {
+  width: 1276px;
+  height: 673px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  user-select: none;
+  &-1 {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    width: 50%;
+    background-position: top right;
+  }
+}
+.beetween-ctrls {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 2;
+  .line {
+    height: 100%;
+    width: 3px;
+    background: #fff;
+  }
+}
+.circle-ctrls {
+  width: 104px;
+  height: 104px;
+  cursor: pointer;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -52px 0 0 -52px;
+  user-select: none;
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    background: url(~@/assets/images/core-products/sxz/left-arrow.png) no-repeat center center;
+    width: 16px;
+    height: 30px;
+  }
+  &::before {
+    left: 21px;
+  }
+  &::after {
+    right: 21px;
+    background-image: url(~@/assets/images/core-products/sxz/right-arrow.png);
+  }
+  .animation-circle {
+    width: 104px;
+    height: 104px;
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    animation: mymove-data 1s infinite;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+@keyframes mymove-data {
+    from {
+        width: 104px;
+        height: 104px;
+        opacity: 0.4
+    }
+
+    to {
+        width: 150px;
+        height: 150px;
+        // transform: translateX(-20px) translateY(-20px);
+        opacity: 0
+    }
+}
+</style>

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

@@ -11,6 +11,14 @@ module.exports = {
         "itemTitle6": "10分钟全自动出结果，高效快速（约100㎡）",
         "itemTitle7": "强大编辑后台，让空间延伸表达"
     },
+    sxz: {
+        bannerTitle: '随心装 . 快速打造心中家的模样',
+        itemTitle1: '1:1精准复刻真实房源',
+        itemTitle2: '实物家具建模，让您所见即所得',
+        itemTitle3: '快速打造3D家装效果，让人工智能真正服务于生活',
+        itemTitle4: '高效全屋渲染，秒级响应拒绝等待',
+        itemTitle5: '变装前后同屏看，一眼对比屋内变化'
+    },
     "coreTech": {
         "bannerTitle": "核心技术",
         bannerSubTitle: "让数字化飞入寻常百姓家",

pc/src/page/coreProducts/sxz.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="sxz-container">
     <div class="banner">
-      <div class="container" v-html="`随心装 . 快速打造心中家的模样`"></div>
+      <div class="container" v-html="$t('conduct.sxz.bannerTitle')"></div>
     </div>
     <div class="plate-w" ref="homeLayout">
       <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" />
+          <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>
@@ -19,28 +22,35 @@
 import { getPosition } from '@/util'
 import { mapState } from 'vuex'
 import sequence from '@/components/sequence'
+import comparePic from '@/components/common/comparePic'
+
 export default {
   data () {
     return {
       sequenceArr: [
         {
-          name: this.$t('conduct.conductHouse.itemTitle1'),
+          name: this.$t('conduct.sxz.itemTitle1'),
           img: require('@/assets/images/core-products/sxz/item-1.png'),
           runAnimation: true
         },
         {
-          name: this.$t('conduct.conductHouse.itemTitle2'),
+          name: this.$t('conduct.sxz.itemTitle2'),
           img: require('@/assets/images/core-products/sxz/item-2.png'),
           runAnimation: true
         },
         {
-          name: this.$t('conduct.conductHouse.itemTitle3'),
+          name: this.$t('conduct.sxz.itemTitle3'),
           img: require('@/assets/images/core-products/sxz/item-3.png'),
           runAnimation: true
         },
         {
-          name: '快速打造线上3D家装效果，让人工智能真正服务于生活',
-          img: require('@/assets/images/core-products/sxz/item-3.png'),
+          name: this.$t('conduct.sxz.itemTitle4'),
+          img: [require('@/assets/images/core-products/sxz/r05_s.jpeg'), require('@/assets/images/core-products/sxz/r05.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')],
           runAnimation: true
         }
       ],
@@ -52,7 +62,8 @@ export default {
     })
   },
   components: {
-    sequence
+    sequence,
+    comparePic
   },
   mounted () {
     const ISZH = this.language === 'zh'
@@ -63,6 +74,7 @@ export default {
 </script>
 <style lang="scss">
 .sxz-container {
+  padding-bottom: 240px;
   .banner {
     width: 100%;
     height: 420px;
@@ -80,34 +92,17 @@ export default {
     img {
       
     }
-  }
-  .boom {
-    height: 530px;
+    
   }
   .common-title {
     margin-top: 0;
     margin-bottom: 50px;
     font-size: 30px;
   }
-  .sub-list {
-    li {
-      display: inline-block;
-      vertical-align: middle;
-      text-align: center;
-      width: 412px;
-      margin-right: 20px;
-      padding-bottom: 70px;
-      img {
-        width: 100%;
-        height: 255px;
-      }
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-  .plate-w {
-    margin-bottom: 110px;
+  .img-item-w {
+    position: relative;
+    height: 673px;
+    width: 100%;
   }
 }