ソースを参照

交互调整 提交

wenmenghao 11 ヶ月 前
コミット
49da468f06
1 ファイル変更249 行追加109 行削除
  1. 249 109
      apps/mobile/src/views/landing/consultingService.vue

+ 249 - 109
apps/mobile/src/views/landing/consultingService.vue

@@ -20,15 +20,35 @@
       <div class="m-title">样例报告免费下载</div>
       <div class="m-title">样例报告免费下载</div>
       <div class="report-box">
       <div class="report-box">
         <div class="report-boxitem">
         <div class="report-boxitem">
-          <div class="item-child" v-for="(item, index) in list" :key="index">
-            <div class="child-box" v-for="e in item" :key="e.name">
-              <div class="child-box-title">{{ e.name }}</div>
-              <div class="child-box-desc">{{ e.desc }}</div>
-              <div class="child-box-btn" @click="goSource('free', e.name)">
-                <!-- 获取报告样例 -->
+          <van-swipe
+            type="card"
+            class="report"
+            :height="reportheight"
+            :width="reportwidth"
+            :loop="false"
+            @change="cardscroll($event, 'report')"
+            :show-indicators="false"
+            ref="report"
+          >
+            <van-swipe-item
+              :default="index"
+              v-for="(item, index) in list"
+              :key="index"
+            >
+              <div class="item-child" @click="itemclick(index, 'report')">
+                <div class="child-box" v-for="e in item" :key="e.name">
+                  <div class="child-box-title">{{ e.name }}</div>
+                  <div class="child-box-desc">{{ e.desc }}</div>
+                  <div
+                    class="child-box-btn"
+                    @click.stop="goSource('free', e.name)"
+                  >
+                    <!-- 获取报告样例 -->
+                  </div>
+                </div>
               </div>
               </div>
-            </div>
-          </div>
+            </van-swipe-item>
+          </van-swipe>
         </div>
         </div>
       </div>
       </div>
       <div class="data-box">
       <div class="data-box">
@@ -61,102 +81,130 @@
       <div class="m-desc">以客户需求为中心,专业个性化咨询服务</div>
       <div class="m-desc">以客户需求为中心,专业个性化咨询服务</div>
       <div class="customer-box">
       <div class="customer-box">
         <div class="customer-item">
         <div class="customer-item">
-          <div class="customer-child black">
-            <div class="customer-title">科大讯飞股份有限公司</div>
-            <div class="customer-desc cus-mt-16">
-              <span class="f-b">所属行业:</span>
-              <span>人工智能</span>
-            </div>
-            <div class="cus-mt-16">
-              <span class="customer-text-b">客户需求:</span>
-              <span class="customer-text"
-                >科大讯飞庞杂的数据带来巨大的使用成本,无法快速高效满足一线业务、业务管理、战略分析等业务需求。</span
-              >
-            </div>
-            <div class="cus-mt-16">
-              <span class="customer-text-b">服务效果:</span>
-              <span class="customer-text"
-                >通过深度调研,精准识别科大讯飞发展中面临的业务流程问题,根据问题症结所在,咨询团队为科大讯飞定制了专属的解决方案,为各个需求量身定制了取数模型,根据人工智能大模型定期输出数据分析报告,为科大讯飞各个区域和业务线的实际需求,线索转化、市场分析更高效精准。</span
-              >
-            </div>
-            <img
-              class="kdxf logo"
-              src="@/assets/image/landing/logoKDXF.png"
-              alt=""
-            />
-          </div>
-          <div class="customer-child red">
-            <div class="customer-title">锐捷网络股份有限公司</div>
-            <div class="customer-desc cus-mt-16">
-              <span class="f-b">所属行业:</span>
-              <span>信息化建设</span>
-            </div>
-            <div class="cus-mt-16">
-              <span class="customer-text-b">客户需求:</span>
-              <span class="customer-text"
-                >需要实时、动态地掌握市场需求、商机线索、对目标客户行业和地区进行定位分析,对同类型业务市场份额的动态跟踪分析等。</span
-              >
-            </div>
-            <div class="cus-mt-16">
-              <span class="customer-text-b">服务效果:</span>
-              <span class="customer-text"
-                >基于剑鱼标讯大数据,根据锐捷网络各项需求,组织个性化数据指标,通过为锐捷网络打造个性化指标分析体系,贴合锐捷网络业务发展特点,通过市场分析为锐捷网络目标企业画像精准定位,目标客户分布地区和分布行业进行交叉定位,为锐捷网络选择优先拓展客户提供了决策参考。</span
+          <van-swipe
+            type="card"
+            class="customer"
+            :height="customerheight"
+            :width="customerwidth"
+            :loop="false"
+            @change="cardscroll($event, 'customer')"
+            :show-indicators="false"
+            ref="customer"
+          >
+            <van-swipe-item :default="0">
+              <div
+                class="customer-child black"
+                @click="itemclick(0, 'customer')"
               >
               >
-            </div>
-            <img
-              class="rj logo"
-              src="@/assets/image/landing/logoRJ.png"
-              alt=""
-            />
-          </div>
-          <div class="customer-child blue">
-            <div class="customer-title">深信服科技股份有限公司</div>
-            <div class="customer-desc cus-mt-16">
-              <span class="f-b">所属行业:</span>
-              <span>信息化建设</span>
-            </div>
-            <div class="cus-mt-16">
-              <span class="customer-text-b">客户需求:</span>
-              <span class="customer-text"
-                >业务重点如何布局,市场动态如何发展,如何精准高效找到目标市场等,成为深信服业务发展中需要突破的一个难题。</span
-              >
-            </div>
-            <div class="cus-mt-16">
-              <span class="customer-text-b">服务效果:</span>
-              <span class="customer-text"
-                >建立在采购单位行业类型、采购单位地区分布、采购产品类型、友商类型、友商地区分布等这些定制维度基础上,剑鱼标讯咨询团队为深信服定期输出定制化的市场分析报告,为业务部门提供专业化的信息参考,进行精准高效的决策缩短了时间,提高了业务拓展的机动性和业务发展方向的稳健性。</span
-              >
-            </div>
-            <img
-              class="sxf logo"
-              src="@/assets/image/landing/logoSXF.png"
-              alt=""
-            />
-          </div>
-          <div class="customer-child green">
-            <div class="customer-title">三六零数字安全科技集团有限公司</div>
-            <div class="customer-desc cus-mt-16">
-              <span class="f-b">所属行业:</span>
-              <span>网络安全</span>
-            </div>
-            <div class="cus-mt-16">
-              <span class="customer-text-b">客户需求:</span>
-              <span class="customer-text"
-                >网络安全问题也日益凸显,360公司面临着如何更好的通过数据洞察用户需求,寻找更具有前瞻性的市场信息。</span
+                <div class="customer-title">科大讯飞股份有限公司</div>
+                <div class="customer-desc cus-mt-16">
+                  <span class="f-b">所属行业:</span>
+                  <span>人工智能</span>
+                </div>
+                <div class="cus-mt-16">
+                  <span class="customer-text-b">客户需求:</span>
+                  <span class="customer-text"
+                    >科大讯飞庞杂的数据带来巨大的使用成本,无法快速高效满足一线业务、业务管理、战略分析等业务需求。</span
+                  >
+                </div>
+                <div class="cus-mt-16">
+                  <span class="customer-text-b">服务效果:</span>
+                  <span class="customer-text"
+                    >通过深度调研,精准识别科大讯飞发展中面临的业务流程问题,根据问题症结所在,咨询团队为科大讯飞定制了专属的解决方案,为各个需求量身定制了取数模型,根据人工智能大模型定期输出数据分析报告,为科大讯飞各个区域和业务线的实际需求,线索转化、市场分析更高效精准。</span
+                  >
+                </div>
+                <img
+                  class="kdxf logo"
+                  src="@/assets/image/landing/logoKDXF.png"
+                  alt=""
+                />
+              </div>
+            </van-swipe-item>
+            <van-swipe-item :default="1">
+              <div class="customer-child red" @click="itemclick(1, 'customer')">
+                <div class="customer-title">锐捷网络股份有限公司</div>
+                <div class="customer-desc cus-mt-16">
+                  <span class="f-b">所属行业:</span>
+                  <span>信息化建设</span>
+                </div>
+                <div class="cus-mt-16">
+                  <span class="customer-text-b">客户需求:</span>
+                  <span class="customer-text"
+                    >需要实时、动态地掌握市场需求、商机线索、对目标客户行业和地区进行定位分析,对同类型业务市场份额的动态跟踪分析等。</span
+                  >
+                </div>
+                <div class="cus-mt-16">
+                  <span class="customer-text-b">服务效果:</span>
+                  <span class="customer-text"
+                    >基于剑鱼标讯大数据,根据锐捷网络各项需求,组织个性化数据指标,通过为锐捷网络打造个性化指标分析体系,贴合锐捷网络业务发展特点,通过市场分析为锐捷网络目标企业画像精准定位,目标客户分布地区和分布行业进行交叉定位,为锐捷网络选择优先拓展客户提供了决策参考。</span
+                  >
+                </div>
+                <img
+                  class="rj logo"
+                  src="@/assets/image/landing/logoRJ.png"
+                  alt=""
+                />
+              </div>
+            </van-swipe-item>
+            <van-swipe-item :default="2">
+              <div
+                class="customer-child blue"
+                @click="itemclick(2, 'customer')"
               >
               >
-            </div>
-            <div class="cus-mt-16">
-              <span class="customer-text-b">服务效果:</span>
-              <span class="customer-text"
-                >通过标讯数据为360公司提供精准数据用于市场分析、完成阶段性的销售线索复盘、帮助业务线对销售线索进行查漏补缺。数据指标+洞察分析+策略投放的咨询服务模式,从底层数据到上层业务战略调整建议,为360公司提供全方位立体化服务,帮助360公司实现了商机挖掘和业务拓展的目标。</span
+                <div class="customer-title">深信服科技股份有限公司</div>
+                <div class="customer-desc cus-mt-16">
+                  <span class="f-b">所属行业:</span>
+                  <span>信息化建设</span>
+                </div>
+                <div class="cus-mt-16">
+                  <span class="customer-text-b">客户需求:</span>
+                  <span class="customer-text"
+                    >业务重点如何布局,市场动态如何发展,如何精准高效找到目标市场等,成为深信服业务发展中需要突破的一个难题。</span
+                  >
+                </div>
+                <div class="cus-mt-16">
+                  <span class="customer-text-b">服务效果:</span>
+                  <span class="customer-text"
+                    >建立在采购单位行业类型、采购单位地区分布、采购产品类型、友商类型、友商地区分布等这些定制维度基础上,剑鱼标讯咨询团队为深信服定期输出定制化的市场分析报告,为业务部门提供专业化的信息参考,进行精准高效的决策缩短了时间,提高了业务拓展的机动性和业务发展方向的稳健性。</span
+                  >
+                </div>
+                <img
+                  class="sxf logo"
+                  src="@/assets/image/landing/logoSXF.png"
+                  alt=""
+                />
+              </div>
+            </van-swipe-item>
+            <van-swipe-item :default="3">
+              <div
+                class="customer-child green"
+                @click="itemclick(3, 'customer')"
               >
               >
-            </div>
-            <img
-              class="sz_360 logo"
-              src="@/assets/image/landing/logo360.png"
-              alt=""
-            />
-          </div>
+                <div class="customer-title">三六零数字安全科技集团有限公司</div>
+                <div class="customer-desc cus-mt-16">
+                  <span class="f-b">所属行业:</span>
+                  <span>网络安全</span>
+                </div>
+                <div class="cus-mt-16">
+                  <span class="customer-text-b">客户需求:</span>
+                  <span class="customer-text"
+                    >网络安全问题也日益凸显,360公司面临着如何更好的通过数据洞察用户需求,寻找更具有前瞻性的市场信息。</span
+                  >
+                </div>
+                <div class="cus-mt-16">
+                  <span class="customer-text-b">服务效果:</span>
+                  <span class="customer-text"
+                    >通过标讯数据为360公司提供精准数据用于市场分析、完成阶段性的销售线索复盘、帮助业务线对销售线索进行查漏补缺。数据指标+洞察分析+策略投放的咨询服务模式,从底层数据到上层业务战略调整建议,为360公司提供全方位立体化服务,帮助360公司实现了商机挖掘和业务拓展的目标。</span
+                  >
+                </div>
+                <img
+                  class="sz_360 logo"
+                  src="@/assets/image/landing/logo360.png"
+                  alt=""
+                />
+              </div>
+            </van-swipe-item>
+          </van-swipe>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
@@ -169,14 +217,23 @@
 <script>
 <script>
 import EventBus from '@/utils/eventBus'
 import EventBus from '@/utils/eventBus'
 import { sampleReport } from '@/api/modules/landing'
 import { sampleReport } from '@/api/modules/landing'
+import { Swipe, SwipeItem } from 'vant'
+import { px2px } from '@/utils'
 import { openLinkOfOther } from '@/utils'
 import { openLinkOfOther } from '@/utils'
 import { callPhone } from '@/utils/callFn'
 import { callPhone } from '@/utils/callFn'
 import { LINKS } from '@/data'
 import { LINKS } from '@/data'
 import { mapGetters } from 'vuex'
 import { mapGetters } from 'vuex'
+
 export default {
 export default {
   name: 'consultingService',
   name: 'consultingService',
+  components: {
+    [Swipe.name]: Swipe,
+    [SwipeItem.name]: SwipeItem
+  },
   data() {
   data() {
     return {
     return {
+      report: 0,
+      customer: 0,
       list: [],
       list: [],
       iconList: [
       iconList: [
         {
         {
@@ -237,7 +294,19 @@ export default {
     }
     }
   },
   },
   computed: {
   computed: {
-    ...mapGetters('user', ['isLogin'])
+    ...mapGetters('user', ['isLogin']),
+    reportheight() {
+      return px2px('478px').replace('px', '')
+    },
+    reportwidth() {
+      return px2px('319px').replace('px', '')
+    },
+    customerheight() {
+      return px2px('400px').replace('px', '')
+    },
+    customerwidth() {
+      return px2px('326px').replace('px', '')
+    }
   },
   },
   created() {
   created() {
     if (!this.$envs.inWX) {
     if (!this.$envs.inWX) {
@@ -251,6 +320,67 @@ export default {
   mounted() {},
   mounted() {},
   beforeDestroy() {},
   beforeDestroy() {},
   methods: {
   methods: {
+    itemclick(index, type) {
+      this.setswipeTo(index, type)
+      // 组件默认滚动一个卡片的距离,设计要求中间卡片滚动到居中位置,特殊处理。
+      if (type === 'report') {
+        if (index == 1) {
+          let dom = document
+            .querySelector('.report')
+            .querySelector('.van-swipe__track')
+          this.$nextTick(() => {
+            setTimeout(() => {
+              dom.style.transform = `translateX(-${px2px('300px')})`
+            }, 100)
+          })
+        }
+      } else if (type === 'customer') {
+        let dom = document
+          .querySelector('.customer')
+          .querySelector('.van-swipe__track')
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (index == 1) {
+              dom.style.transform = `translateX(-${px2px('308px')})`
+            } else if (index == 2) {
+              dom.style.transform = `translateX(-${px2px('634px')})`
+            }
+          }, 100)
+        })
+      }
+    },
+    cardscroll(index, type) {
+      this[type] = index
+      // 组件默认滚动一个卡片的距离,设计要求中间卡片滚动到居中位置,特殊处理。
+      if (type === 'report') {
+        if (index == 1) {
+          let dom = document
+            .querySelector('.report')
+            .querySelector('.van-swipe__track')
+          this.$nextTick(() => {
+            setTimeout(() => {
+              dom.style.transform = `translateX(-${px2px('300px')})`
+            }, 100)
+          })
+        }
+      } else if (type === 'customer') {
+        let dom = document
+          .querySelector('.customer')
+          .querySelector('.van-swipe__track')
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (index == 1) {
+              dom.style.transform = `translateX(-${px2px('308px')})`
+            } else if (index == 2) {
+              dom.style.transform = `translateX(-${px2px('634px')})`
+            }
+          }, 100)
+        })
+      }
+    },
+    setswipeTo(val, type) {
+      this.$refs[type].swipeTo(val)
+    },
     sampleReportAjax() {
     sampleReportAjax() {
       sampleReport().then((res) => {
       sampleReport().then((res) => {
         if (!res.data) {
         if (!res.data) {
@@ -265,7 +395,10 @@ export default {
       if (!this.$envs.inWX) {
       if (!this.$envs.inWX) {
         if (scrollTop > 10) {
         if (scrollTop > 10) {
           EventBus.$emit('headerConf:merge', {
           EventBus.$emit('headerConf:merge', {
-            transparentHeader: false
+            transparentHeader: false,
+            positionStyle: {
+              position: 'absolute'
+            }
           })
           })
         } else {
         } else {
           EventBus.$emit('headerConf:merge', {
           EventBus.$emit('headerConf:merge', {
@@ -336,6 +469,11 @@ export default {
 .consultingService {
 .consultingService {
   background-color: #f5f6f7;
   background-color: #f5f6f7;
   padding-bottom: 98px;
   padding-bottom: 98px;
+  ::v-deep {
+    .van-swipe {
+      overflow: visible;
+    }
+  }
   .wx-margin {
   .wx-margin {
     margin-top: -40px;
     margin-top: -40px;
   }
   }
@@ -408,10 +546,12 @@ export default {
       width: 100%;
       width: 100%;
       box-sizing: border-box;
       box-sizing: border-box;
       padding-left: 16px;
       padding-left: 16px;
-      overflow-x: auto;
+      min-height: 478px;
+      // overflow-x: auto;
+      // overflow: hidden;
       .report-boxitem {
       .report-boxitem {
-        display: flex;
-        width: fit-content;
+        // display: flex;
+        // width: fit-content;
         .item-child {
         .item-child {
           margin-right: 16px;
           margin-right: 16px;
           .child-box {
           .child-box {
@@ -519,11 +659,11 @@ export default {
       padding-left: 16px;
       padding-left: 16px;
       width: 100%;
       width: 100%;
       box-sizing: border-box;
       box-sizing: border-box;
-      overflow-x: auto;
+      // overflow-x: auto;
       margin-top: 24px;
       margin-top: 24px;
       .customer-item {
       .customer-item {
-        display: flex;
-        width: fit-content;
+        // display: flex;
+        // width: fit-content;
         .customer-child {
         .customer-child {
           position: relative;
           position: relative;
           margin-right: 16px;
           margin-right: 16px;