123

src/store/index.js

@@ -1,7 +1,8 @@
 import { createPinia } from 'pinia'
 import { useCountStore } from './modules/count'
 import { useSwiperStore } from './modules/swiper'
+import { useDetailStore } from './modules/detail'
 const store = createPinia()
 
 export default store
-export { useCountStore, useSwiperStore }
+export { useCountStore, useSwiperStore, useDetailStore }

src/store/modules/detail.js

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+export const useDetailStore = defineStore({
+  id: 'detail', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      industry_id: '1',
+    }
+  },
+  // actions
+  actions: {
+    updateIndustryId(industry_id) {
+      this.industry_id = industry_id
+    },
+  },
+})

src/style.scss

@@ -135,6 +135,24 @@ body {
   }
 }
 
+.case_detail_swiper {
+  position: relative;
+  .swiper-pagination {
+    display: block;
+    position: absolute;
+    bottom: 20px !important;
+    .swiper-pagination-bullet {
+      width: 8px;
+      height: 8px;
+      background: #fafafa;
+      border-radius: 50%;
+    }
+    .swiper-pagination-bullet-active {
+      background-color: $theme_color;
+    }
+  }
+}
+
 .autoplay-progress {
   position: absolute;
   left: 90vw;

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="pic_card_container">
+    <div class="header_intro">
+      <p>电力巡检摄像头</p>
+      <p class="p_text">PICTURE</p>
+    </div>
+    <div class="img_wrap">
+      <img src="" class="img_style" alt="" />
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.pic_card_container {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  .header_intro {
+    padding: 26px 43px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 28px;
+    font-family: DFPYuanW7-GB;
+    box-sizing: border-box;
+    font-weight: 400;
+    background: linear-gradient(90deg, #283fe7, #4b17e1);
+    color: #fafafa;
+    .p_text {
+      font-size: 22px;
+      font-family: 'ZonaPro';
+      font-weight: 800;
+    }
+  }
+  .img_wrap {
+    width: 100%;
+    flex: 1;
+    .img_style {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="industry_tab_container">
+    <p
+      @click="updateActiveTab('1')"
+      :class="industry_id == '1' ? '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' : ''"
+    >
+      消费电子
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { useDetailStore } from '@/store'
+import { storeToRefs } from 'pinia'
+const detailStore = useDetailStore()
+const { industry_id } = storeToRefs(detailStore)
+
+const updateActiveTab = id => {
+  detailStore.updateIndustryId(id)
+}
+</script>
+
+<style lang="scss" scoped>
+.industry_tab_container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 18px;
+  font-family: 'SourceHanSansLight';
+  font-weight: 500;
+  color: #646a73;
+  margin-bottom: 51px;
+  p {
+    cursor: pointer;
+  }
+  .active_color {
+    color: #283fe7;
+  }
+}
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+  <div class="trumbs_container">
+    <div class="swiper_con">
+      <div class="img_card ml0">
+        <div class="dialog_text">
+          <div class="btn" @click="viewDetail()">查看详情</div>
+        </div>
+      </div>
+      <div class="img_card">
+        <div class="dialog_text">
+          <div class="btn" @click="viewDetail()">查看详情</div>
+        </div>
+      </div>
+      <div class="img_card">
+        <div class="dialog_text">
+          <div class="btn" @click="viewDetail()">查看详情</div>
+        </div>
+      </div>
+      <div class="img_card">
+        <div class="dialog_text">
+          <div class="btn" @click="viewDetail()">查看详情</div>
+        </div>
+      </div>
+      <div class="img_card">
+        <div class="dialog_text">
+          <div class="btn" @click="viewDetail()">查看详情</div>
+        </div>
+      </div>
+      <div class="img_card">
+        <div class="dialog_text">
+          <div class="btn" @click="viewDetail()">查看详情</div>
+        </div>
+      </div>
+      <div class="img_card">
+        <div class="dialog_text">
+          <div class="btn" @click="viewDetail()">查看详情</div>
+        </div>
+      </div>
+      <div class="img_card">
+        <div class="dialog_text">
+          <div class="btn" @click="viewDetail()">查看详情</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const viewDetail = () => {
+  // 点击后滚动整个container
+}
+</script>
+
+<style lang="scss" scoped>
+.trumbs_container {
+  width: 100%;
+  height: 108px;
+  position: relative;
+  .swiper_con {
+    width: 100%;
+    height: 108px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    .img_card {
+      min-width: 194px;
+      width: 194px;
+      height: 100%;
+      background: red;
+      margin: 0 22px;
+      position: relative;
+      .dialog_text {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: #283fe7;
+        opacity: 0.63;
+        .btn {
+          font-size: 18px;
+          font-family: 'SourceHanSans';
+          font-weight: 400;
+          color: #ffffff;
+          padding: 6px 14px;
+          border: 1px solid #ffffff;
+          border-radius: 2px;
+          cursor: pointer;
+        }
+      }
+    }
+    .img_card:hover {
+      .dialog_text {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .ml0 {
+      margin-left: 0;
+    }
+  }
+}
+</style>

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

@@ -1,9 +1,89 @@
 <template>
-  <div>
-    <div class="case_detail_container">case de</div>
+  <div class="wrap">
+    <div class="case_detail_container" id="case_detail_container">
+      <div class="empty" v-if="showEmpty"></div>
+      <div class="content">
+        <Tabs />
+        <Trumbs />
+        <div class="content_detail">
+          <div class="left_swiper">
+            <swiper
+              :pagination="true"
+              :modules="modules"
+              class="case_detail_swiper"
+            >
+              <swiper-slide><PicCard /></swiper-slide>
+              <swiper-slide>Slide 2</swiper-slide
+              ><swiper-slide>Slide 3</swiper-slide>
+              <swiper-slide>Slide 4</swiper-slide
+              ><swiper-slide>Slide 5</swiper-slide>
+              <swiper-slide>Slide 6</swiper-slide
+              ><swiper-slide>Slide 7</swiper-slide>
+              <swiper-slide>Slide 8</swiper-slide
+              ><swiper-slide>Slide 9</swiper-slide>
+            </swiper>
+          </div>
+          <div class="right_detail"></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { handleScreenAuto } from '@/common/utils'
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Pagination } from 'swiper'
+import PicCard from './PicCard'
+import 'swiper/css'
+import 'swiper/css/pagination'
+import Tabs from './Tabs'
+import Trumbs from './Trumbs'
+const showEmpty = ref(false)
+const modules = ref([Pagination])
+onMounted(() => {
+  handleScreenAuto(showEmpty, '#case_detail_container')
+  window.onresize = handleScreenAuto(showEmpty, '#case_detail_container')
+})
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  background: $common_bg;
+  position: relative;
+  .case_detail_container {
+    width: 100%;
+    height: 100%;
+    .empty {
+      min-height: 90px;
+    }
+    .content {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      padding: 77px 153px 130px 153px;
+      .content_detail {
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 30px;
+        height: 576px;
+        display: flex;
+        justify-content: space-between;
+        .left_swiper {
+          width: 1024px;
+          height: 100%;
+        }
+        .right_detail {
+          flex: 1;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -9,18 +9,30 @@
       </div>
       <div class="main_introduce">
         <div class="img_list_inwrap">
-          <div class="broadside_div"></div>
-          <div class="broadside_div"></div>
-          <div class="broadside_div"></div>
+          <div class="broadside_div">
+            <div class="dialog_text">舵机</div>
+          </div>
+          <div class="broadside_div">
+            <div class="dialog_text">直流电机</div>
+          </div>
+          <div class="broadside_div">
+            <div class="dialog_text">伺服电机</div>
+          </div>
         </div>
         <div class="main_imgwrap">
           <div class="control_btn_wrap"></div>
           <img src="" class="bottom_img" alt="" />
         </div>
         <div class="img_list_inwrap">
-          <div class="broadside_div"></div>
-          <div class="broadside_div"></div>
-          <div class="broadside_div"></div>
+          <div class="broadside_div">
+            <div class="dialog_text">步进电机</div>
+          </div>
+          <div class="broadside_div">
+            <div class="dialog_text">有刷电机</div>
+          </div>
+          <div class="broadside_div">
+            <div class="dialog_text">无刷电机</div>
+          </div>
         </div>
       </div>
       <div></div>
@@ -115,7 +127,23 @@ onMounted(() => {
           width: 222px;
           height: 100px;
           border-radius: 6px;
-          background: #000;
+          position: relative;
+          overflow: hidden;
+          .dialog_text {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 23px;
+            font-weight: 400;
+            color: #ffffff;
+            background: #000;
+            opacity: 0.5;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+          }
         }
       }
       .main_imgwrap {