123

src/mock/index.js

@@ -0,0 +1,102 @@
+export const industry_list_data = [
+  {
+    id: '1',
+    name: '医疗健康',
+  },
+  {
+    id: '2',
+    name: '智能硬件',
+  },
+  {
+    id: '3',
+    name: '工业设备',
+  },
+  {
+    id: '4',
+    name: '高铁设备',
+  },
+  {
+    id: '5',
+    name: '户外设备',
+  },
+  {
+    id: '6',
+    name: '特种装备',
+  },
+  {
+    id: '7',
+    name: '智能家居',
+  },
+  {
+    id: '8',
+    name: '实验仪器',
+  },
+  {
+    id: '9',
+    name: '消费电子',
+  },
+]
+
+import L1 from '@/assets/img/case_detail/li1.png'
+import L2 from '@/assets/img/case_detail/li2.png'
+import L3 from '@/assets/img/case_detail/li3.png'
+import L4 from '@/assets/img/case_detail/li4.png'
+import L5 from '@/assets/img/case_detail/li5.png'
+import L6 from '@/assets/img/case_detail/li6.png'
+import L7 from '@/assets/img/case_detail/li7.png'
+export const case_detail_img_data = {
+  1: [
+    {
+      id: '1',
+      picUrl: L1,
+    },
+    {
+      id: '2',
+      picUrl: L2,
+    },
+    {
+      id: '3',
+      picUrl: L3,
+    },
+    {
+      id: '4',
+      picUrl: L4,
+    },
+    {
+      id: '5',
+      picUrl: L5,
+    },
+    {
+      id: '6',
+      picUrl: L6,
+    },
+    {
+      id: '7',
+      picUrl: L7,
+    },
+  ],
+}
+
+import S1 from '@/assets/img/case_detail/lunbo1.png'
+export const case_detail_list = {
+  1: {
+    1: {
+      id: '1',
+      title: '电力巡检摄像头',
+      swiperList: [
+        {
+          id: '1',
+          picUrl: S1,
+        },
+        {
+          id: '1',
+          picUrl: S1,
+        },
+        {
+          id: '1',
+          picUrl: S1,
+        },
+      ],
+    },
+  },
+}

src/store/modules/detail.js

@@ -5,6 +5,7 @@ export const useDetailStore = defineStore({
   state: () => {
     return {
       industry_id: '1',
+      example_id: '1',
     }
   },
   // actions
@@ -12,5 +13,8 @@ export const useDetailStore = defineStore({
     updateIndustryId(industry_id) {
       this.industry_id = industry_id
     },
+    updateExampleId(example_id) {
+      this.example_id = example_id
+    },
   },
 })

src/views/Index/components/CaseDetails/Tabs/index.vue

@@ -1,58 +1,12 @@
 <template>
   <div class="industry_tab_container">
     <p
-      @click="updateActiveTab('1')"
-      :class="industry_id == '1' ? 'active_color' : ''"
+      v-for="item in industry_list_data"
+      :key="item.id"
+      @click="updateActiveTab(item.id)"
+      :class="industry_id == item.id ? 'active_color' : ''"
     >
-      医疗健康
-    </p>
-    <p
-      @click="updateActiveTab('2')"
-      :class="industry_id == '2' ? 'active_color' : ''"
-    >
-      智能硬件
-    </p>
-    <p
-      @click="updateActiveTab('3')"
-      :class="industry_id == '3' ? 'active_color' : ''"
-    >
-      工业设备
-    </p>
-    <p
-      @click="updateActiveTab('4')"
-      :class="industry_id == '4' ? 'active_color' : ''"
-    >
-      高铁设备
-    </p>
-    <p
-      @click="updateActiveTab('5')"
-      :class="industry_id == '5' ? 'active_color' : ''"
-    >
-      户外设备
-    </p>
-    <p
-      @click="updateActiveTab('6')"
-      :class="industry_id == '6' ? 'active_color' : ''"
-    >
-      特种装备
-    </p>
-    <p
-      @click="updateActiveTab('7')"
-      :class="industry_id == '7' ? 'active_color' : ''"
-    >
-      智能家居
-    </p>
-    <p
-      @click="updateActiveTab('8')"
-      :class="industry_id == '8' ? 'active_color' : ''"
-    >
-      实验仪器
-    </p>
-    <p
-      @click="updateActiveTab('9')"
-      :class="industry_id == '9' ? 'active_color' : ''"
-    >
-      消费电子
+      {{ item.name }}
     </p>
   </div>
 </template>
@@ -60,6 +14,7 @@
 <script setup>
 import { useDetailStore } from '@/store'
 import { storeToRefs } from 'pinia'
+import { industry_list_data } from '@/mock'
 const detailStore = useDetailStore()
 const { industry_id } = storeToRefs(detailStore)
 

src/views/Index/components/CaseDetails/Trumbs/index.vue

@@ -9,87 +9,14 @@
       @slideChange="onSlideChange"
       class="case_detail_swiper"
     >
-      <swiper-slide>
+      <swiper-slide
+        v-for="item in case_detail_img_data[industry_id]"
+        :key="item.id"
+      >
         <div class="img_card">
+          <img :src="item.picUrl" class="img" alt="" />
           <div class="dialog_text">
-            <div class="btn" @click="viewDetail(1)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(2)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(3)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(4)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(5)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(6)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(7)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(8)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(9)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(9)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(9)">查看详情</div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide>
-        <div class="img_card">
-          <div class="dialog_text">
-            <div class="btn" @click="viewDetail(9)">查看详情</div>
+            <div class="btn" @click="viewDetail(item.id)">查看详情</div>
           </div>
         </div>
       </swiper-slide>
@@ -101,7 +28,9 @@
 import { ref } from 'vue'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
-
+import { case_detail_img_data } from '@/mock'
+import { useDetailStore } from '@/store'
+import { storeToRefs } from 'pinia'
 // Import Swiper styles
 import 'swiper/css'
 
@@ -109,12 +38,17 @@ import 'swiper/css/free-mode'
 // import required modules
 import { FreeMode } from 'swiper'
 
+const detailStore = useDetailStore()
+const { industry_id } = storeToRefs(detailStore)
+
 const modules = ref([FreeMode])
 const viewDetail = index => {
-  if (index > 4) {
-    sw.value.slideTo(index - 4, 500, false)
+  detailStore.updateExampleId(index)
+  const intIndex = parseInt(index)
+  if (intIndex > 4) {
+    sw.value.slideTo(intIndex - 4, 500, false)
   } else {
-    sw.value.slideTo(index - 2, 500, false)
+    sw.value.slideTo(intIndex - 2, 500, false)
   }
 }
 const sw = ref(null)
@@ -131,9 +65,12 @@ const onSwiper = swiper => {
     min-width: 194px;
     width: 194px;
     height: 100%;
-    background: red;
     margin: 0 22px;
     position: relative;
+    .img {
+      width: 194px;
+      height: 100%;
+    }
     .dialog_text {
       display: none;
       position: absolute;

src/views/Index/components/CaseDetails/index.vue

@@ -8,7 +8,12 @@
         <div class="content_detail">
           <div class="left_swiper">
             <div class="header_intro">
-              <p>电力巡检摄像头</p>
+              <p>
+                {{
+                  case_detail_list[industry_id] &&
+                  case_detail_list[industry_id][example_id]?.title
+                }}
+              </p>
               <p class="p_text">PICTURE</p>
             </div>
             <swiper
@@ -16,20 +21,21 @@
               :modules="modules"
               class="case_detail_swiper"
             >
-              <swiper-slide>
-                <img src="" class="img_swiper" alt="" />
+              <swiper-slide
+                v-for="item in case_detail_list[industry_id] &&
+                case_detail_list[industry_id][example_id]?.swiperList"
+                :key="item.id"
+              >
+                <img :src="item.picUrl" class="img_swiper" alt="" />
               </swiper-slide>
-              <swiper-slide>Slide 2</swiper-slide>
-              <swiper-slide>Slide 3</swiper-slide>
             </swiper>
           </div>
           <div class="placeholder"></div>
           <div class="right_detail">
             <div class="detail_header">
-              <div>电力巡检摄像头</div>
+              <div>详情页</div>
               <div class="right">
                 <p class="en">DETAILS PAGE</p>
-                <p>详情页</p>
               </div>
             </div>
             <div class="article">
@@ -48,6 +54,9 @@ import { handleScreenAuto } from '@/common/utils'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Pagination } from 'swiper'
+import { case_detail_list } from '@/mock'
+import { useDetailStore } from '@/store'
+import { storeToRefs } from 'pinia'
 import Paragraph from './Paragraph'
 import 'swiper/css'
 import 'swiper/css/pagination'
@@ -55,6 +64,8 @@ import Tabs from './Tabs'
 import Trumbs from './Trumbs'
 const showEmpty = ref(false)
 const modules = ref([Pagination])
+const detailStore = useDetailStore()
+const { industry_id, example_id } = storeToRefs(detailStore)
 onMounted(() => {
   handleScreenAuto(showEmpty, '#case_detail_container')
   window.onresize = handleScreenAuto(showEmpty, '#case_detail_container')
@@ -97,6 +108,7 @@ onMounted(() => {
           .header_intro {
             position: absolute;
             top: 0;
+            min-height: 80px;
             left: 0;
             right: 0;
             z-index: 99;
@@ -153,7 +165,6 @@ onMounted(() => {
               font-size: 18px;
               font-family: Alibaba PuHuiTi;
               .en {
-                margin-right: 26px;
                 font-size: 10px;
                 font-family: ' ZonaPro';
               }

src/views/Index/index.vue

@@ -5,7 +5,7 @@
     :direction="'vertical'"
     :slidesPerView="1"
     :spaceBetween="0"
-    :mousewheel="true"
+    :mousewheel="isMouseWheel"
     :speed="800"
     :pagination="pagination"
     :keyboard="{
@@ -60,7 +60,7 @@
   </swiper>
 </template>
 <script>
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useSwiperStore, useCountStore } from '@/store'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
@@ -104,6 +104,7 @@ export default {
     CasePictureList,
   },
   setup() {
+    const isMouseWheel = ref(true)
     const onSwiper = swiper => {
       const swiperStore = useSwiperStore()
       swiperStore.initSwiper(swiper)
@@ -121,6 +122,7 @@ export default {
       totalPageAni()
     }
     return {
+      isMouseWheel,
       onSwiper,
       onSlideChange,
       pagination: {