pc

src/components/Tabs/index.vue

@@ -32,9 +32,17 @@ const updateActiveTab = id => {
   if (props.isCase) {
     detailStore.updateIndustryId(id)
     detailStore.updateExampleId('1')
+    if (id == 2) {
+      detailStore.updateIndustryId(id)
+      detailStore.updateExampleId('2')
+    }
   } else {
     detailStore.updateHardwareId(id)
     detailStore.updateHardwareExampleId('1')
+    if (id == 2) {
+      detailStore.updateHardwareId(id)
+      detailStore.updateHardwareExampleId('2')
+    }
   }
 }
 </script>

src/mock/case.js

@@ -501,12 +501,12 @@ export const allCaseList1 = [
     example_id: '4',
     industry_id: '1',
   },
-  {
-    id: '5',
-    picUrl: A5,
-    example_id: '1',
-    industry_id: '2',
-  },
+  // {
+  //   id: '5',
+  //   picUrl: A5,
+  //   example_id: '1',
+  //   industry_id: '2',
+  // },
   {
     id: '6',
     picUrl: A6,

src/mock/case_detail/02.js

@@ -8,10 +8,10 @@ import T1_7 from '@/assets/img/case_detail/02/trumbs/07.jpg'
 import T1_8 from '@/assets/img/case_detail/02/trumbs/08.jpg'
 import T1_9 from '@/assets/img/case_detail/02/trumbs/09.jpg'
 export const case_detail_img_data = [
-  {
-    id: '1',
-    picUrl: T1_1,
-  },
+  // {
+  //   id: '1',
+  //   picUrl: T1_1,
+  // },
   {
     id: '2',
     picUrl: T1_2,

src/mock/case_detail/05.js

@@ -8,10 +8,10 @@ export const case_detail_img_data = [
     id: '1',
     picUrl: T1_1,
   },
-  {
-    id: '2',
-    picUrl: T1_2,
-  },
+  // {
+  //   id: '2',
+  //   picUrl: T1_2,
+  // },
   {
     id: '3',
     picUrl: T1_3,

src/mock/hardware.js

@@ -478,12 +478,12 @@ export const allCaseList1 = [
     example_id: '3',
     industry_id: '1',
   },
-  {
-    id: '4',
-    picUrl: A4,
-    example_id: '1',
-    industry_id: '2',
-  },
+  // {
+  //   id: '4',
+  //   picUrl: A4,
+  //   example_id: '1',
+  //   industry_id: '2',
+  // },
   {
     id: '5',
     picUrl: A5,

src/mock/hardware/02.js

@@ -7,10 +7,10 @@ import T1_6 from '@/assets/img/hardware_detail/02/trumbs/9.jpg'
 import T1_7 from '@/assets/img/hardware_detail/02/trumbs/10.jpg'
 import T1_8 from '@/assets/img/hardware_detail/02/trumbs/11.jpg'
 export const hardware_detail_img_data = [
-  {
-    id: '1',
-    picUrl: T1_1,
-  },
+  // {
+  //   id: '1',
+  //   picUrl: T1_1,
+  // },
   {
     id: '2',
     picUrl: T1_2,

src/mock/hardware/05.js

@@ -6,10 +6,10 @@ export const hardware_detail_img_data = [
     id: '1',
     picUrl: T1_1,
   },
-  {
-    id: '2',
-    picUrl: T1_2,
-  },
+  // {
+  //   id: '2',
+  //   picUrl: T1_2,
+  // },
   {
     id: '3',
     picUrl: T1_3,

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

@@ -25,7 +25,7 @@
               </div>
               <div class="item">
                 <img v-lazy="Phone" alt="" class="icon" />
-                <p class="phone">元老师&nbsp;&nbsp;156&nbsp;2496&nbsp;2290</p>
+                <p class="phone">杨老师&nbsp;&nbsp;156&nbsp;2496&nbsp;2290</p>
               </div>
             </div>
             <div class="phone_line_2">

src/views/Index/components/Factory/Card/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="factory_card_container">
+    <img v-lazy="getImgSrc()" alt="" class="img" />
+    <div class="btn">{{ getTitle() }}</div>
+  </div>
+</template>
+
+<script setup>
+import A1 from '@/assets/img/factory/gongchang1.png'
+import A2 from '@/assets/img/factory/gongchang2.png'
+import A3 from '@/assets/img/factory/gongchang3.png'
+import A4 from '@/assets/img/factory/gongchang4.png'
+import A5 from '@/assets/img/factory/gongchang5.png'
+import A6 from '@/assets/img/factory/gongchang6.png'
+import A7 from '@/assets/img/factory/gongchang7.png'
+import A8 from '@/assets/img/factory/gongchang8.png'
+
+const props = defineProps({
+  i: String,
+})
+
+const getImgSrc = () => {
+  if (props.i == '1') {
+    return A1
+  }
+  if (props.i == '2') {
+    return A2
+  }
+  if (props.i == '3') {
+    return A3
+  }
+  if (props.i == '4') {
+    return A4
+  }
+  if (props.i == '5') {
+    return A5
+  }
+  if (props.i == '6') {
+    return A6
+  }
+  if (props.i == '7') {
+    return A7
+  }
+  if (props.i == '8') {
+    return A8
+  }
+}
+const getTitle = () => {
+  if (props.i == '1') {
+    return '车间全景'
+  }
+  if (props.i == '2') {
+    return '车间一角'
+  }
+  if (props.i == '3') {
+    return '数控龙门五面体加工中心'
+  }
+  if (props.i == '4') {
+    return '威立AA1680数控立式加工中心'
+  }
+  if (props.i == '5') {
+    return '加育LVC-755三轴加工中心'
+  }
+  if (props.i == '6') {
+    return '纽威NL504SA数控卧式车床'
+  }
+  if (props.i == '7') {
+    return '五轴工作钻台'
+  }
+  if (props.i == '8') {
+    return '纽威NL201HC数控卧式车床'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.factory_card_container {
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  transition-property: all;
+  transition-duration: 0.7s;
+  animation-fill-mode: forwards;
+  width: 424px;
+  height: 349px;
+  .img {
+    width: 100%;
+    height: 100%;
+    transition-property: all;
+    transition-duration: 0.7s;
+    animation-fill-mode: forwards;
+  }
+  .btn {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 56px;
+    background: rgba(0, 0, 0, 0.55);
+    // backdrop-filter: blur(10px);
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #ffffff;
+    font-size: 20px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 18 0px;
+    transition-property: all;
+    transition-duration: 0.7s;
+    animation-fill-mode: forwards;
+  }
+}
+
+.factory_card_container:hover {
+  border: none;
+  .img {
+    transform: scale(1.1);
+  }
+}
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div class="wrap">
+    <div class="empty" v-if="showEmpty"></div>
+    <div class="flex_center" id="factory_drive_container_flex">
+      <div class="factory_drive_container" id="factory_drive_container">
+        <div class="contract_title" id="factory_drive_ani">
+          <p class="line"></p>
+          <p class="title">工厂展示</p>
+          <p class="detail">
+            专业的技术支持和可靠的工程质量，技术先进、品质优良
+          </p>
+        </div>
+        <div class="content_main">
+          <Card i="1" />
+          <Card i="2" />
+          <Card i="3" />
+          <Card i="4" />
+          <Card i="5" />
+          <Card i="6" />
+          <Card i="7" />
+          <Card i="8" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { handleScreenAuto, handleScreenToFlexCenter } from '@/common/utils'
+const showEmpty = ref(true)
+import Card from './Card'
+onMounted(() => {
+  const func = () => {
+    handleScreenAuto('#factory_drive_container')
+    handleScreenToFlexCenter(
+      '#factory_drive_container',
+      '#factory_drive_container',
+    )
+  }
+  func()
+  window.onresize = func
+})
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  background: $common_bg;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  .empty {
+    min-height: 90px;
+  }
+  .flex_center {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .factory_drive_container {
+      width: 100%;
+      height: 100%;
+
+      .contract_title {
+        z-index: 99;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        background-size: 100% 100%;
+        padding: 56px;
+        box-sizing: border-box;
+        position: relative;
+        white-space: nowrap;
+        .line {
+          width: 39px;
+          height: 5px;
+          background: #283fe7;
+          border-radius: 3px;
+          margin-bottom: 12px;
+        }
+        .img {
+          position: absolute;
+          top: 47%;
+          left: 50%;
+          transform: translateX(-50%) translateY(-50%);
+          width: 295px;
+          height: 35px;
+          z-index: 9;
+        }
+        .title {
+          font-size: 30px;
+          font-weight: bold;
+          color: #000000;
+          margin-bottom: 21px;
+          z-index: 10;
+          .blue_font {
+            color: $theme_color;
+          }
+        }
+        .detail {
+          font-size: 18px;
+          font-weight: 300;
+          color: #646a73;
+          letter-spacing: 2px;
+        }
+      }
+      .content_main {
+        padding: 0 82px 0 82px;
+        column-gap: 20px;
+        display: grid;
+        justify-content: space-evenly;
+        grid-template-columns: repeat(4, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        row-gap: 20px;
+        .card_wrap {
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Index/index.vue

@@ -69,6 +69,9 @@
     <swiper-slide key="16" virtualIndex="16" class="swiper-no-swiping">
       <ContactUs />
     </swiper-slide>
+    <swiper-slide key="17" virtualIndex="17" class="swiper-no-swiping">
+      <Factory />
+    </swiper-slide>
   </swiper>
 </template>
 <script>
@@ -96,6 +99,7 @@ import SoftHardwareDetail from '@/views/Index/components/SoftHardwareDetail'
 import Cooperation from '@/views/Index/components/Cooperation'
 import MechanicalDrive from '@/views/Index/components/MechanicalDrive'
 import IntroVideo from '@/views/Index/components/IntroVideo'
+import Factory from '@/views/Index/components/Factory'
 import { totalPageAni, addAnchor } from '@/common/utils'
 // Import Swiper styles
 import 'swiper/css'
@@ -104,6 +108,7 @@ import 'swiper/css/pagination'
 export default {
   components: {
     Swiper,
+    Factory,
     SwiperSlide,
     HardwareSummary,
     WebOfThing,