img

src/components/NewTrack.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="new_track_container">
+    <img :src="getActiveImg()" class="track_img" alt="" />
+    <div class="btn1" @click="changeCardIndex('1')"></div>
+    <div class="btn2" @click="changeCardIndex('2')"></div>
+    <div class="btn3" @click="changeCardIndex('3')"></div>
+    <div class="btn4" @click="changeCardIndex('4')"></div>
+    <div class="btn5" @click="changeCardIndex('5')"></div>
+    <div class="btn6" @click="changeCardIndex('6')"></div>
+    <div class="btn7" @click="changeCardIndex('7')"></div>
+    <div class="btn8" @click="changeCardIndex('8')"></div>
+    <div class="btn9" @click="changeCardIndex('9')"></div>
+  </div>
+</template>
+
+<script setup>
+import Def1 from '@/static/img/newtrack/industry/def.png'
+import A1 from '@/static/img/newtrack/industry/1.png'
+import A2 from '@/static/img/newtrack/industry/2.png'
+import A3 from '@/static/img/newtrack/industry/3.png'
+import A4 from '@/static/img/newtrack/industry/4.png'
+import A5 from '@/static/img/newtrack/industry/5.png'
+import A6 from '@/static/img/newtrack/industry/6.png'
+import A7 from '@/static/img/newtrack/industry/7.png'
+import A8 from '@/static/img/newtrack/industry/8.png'
+import A9 from '@/static/img/newtrack/industry/9.png'
+
+import Def2 from '@/static/img/newtrack/hardware/def.png'
+import B1 from '@/static/img/newtrack/hardware/1.png'
+import B2 from '@/static/img/newtrack/hardware/2.png'
+import B3 from '@/static/img/newtrack/hardware/3.png'
+import B4 from '@/static/img/newtrack/hardware/4.png'
+import B5 from '@/static/img/newtrack/hardware/5.png'
+import B6 from '@/static/img/newtrack/hardware/6.png'
+import B7 from '@/static/img/newtrack/hardware/7.png'
+import B8 from '@/static/img/newtrack/hardware/8.png'
+import B9 from '@/static/img/newtrack/hardware/9.png'
+import { ref } from 'vue'
+import { useTrackStore } from '@/store'
+
+const props = defineProps({
+  hard: {
+    type: Boolean,
+  },
+})
+
+const trackStore = useTrackStore()
+
+const changeCardIndex = index => {
+  if (props.hard) {
+    trackStore.updateHardwareTab(index)
+  } else {
+    trackStore.updateIndustryTab(index)
+  }
+}
+
+const getActiveImg = () => {
+  let val = '0'
+  if (props.hard) {
+    val = trackStore.hardwareTab
+    if (val == '0') {
+      return Def2
+    }
+    if (val == '1') {
+      return B1
+    }
+    if (val == '2') {
+      return B2
+    }
+    if (val == '3') {
+      return B3
+    }
+    if (val == '4') {
+      return B4
+    }
+    if (val == '5') {
+      return B5
+    }
+    if (val == '6') {
+      return B6
+    }
+    if (val == '7') {
+      return B7
+    }
+    if (val == '8') {
+      return B8
+    }
+    if (val == '9') {
+      return B9
+    }
+  } else {
+    val = trackStore.industryTab
+    if (val == '0') {
+      return Def1
+    }
+    if (val == '1') {
+      return A1
+    }
+    if (val == '2') {
+      return A2
+    }
+    if (val == '3') {
+      return A3
+    }
+    if (val == '4') {
+      return A4
+    }
+    if (val == '5') {
+      return A5
+    }
+    if (val == '6') {
+      return A6
+    }
+    if (val == '7') {
+      return A7
+    }
+    if (val == '8') {
+      return A8
+    }
+    if (val == '9') {
+      return A9
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.new_track_container {
+  margin-bottom: 10px;
+  position: relative;
+  .track_img {
+    width: 100vw;
+    height: auto;
+  }
+  .btn1 {
+    position: absolute;
+    left: 1vw;
+    top: 18vw;
+    width: 9vw;
+    height: 12vw;
+  }
+  .btn2 {
+    position: absolute;
+    left: 12vw;
+    top: 18vw;
+    width: 9vw;
+    height: 12vw;
+  }
+  .btn3 {
+    position: absolute;
+    left: 23vw;
+    top: 18vw;
+    width: 9vw;
+    height: 12vw;
+  }
+  .btn4 {
+    position: absolute;
+    left: 34vw;
+    top: 18vw;
+    width: 9vw;
+    height: 12vw;
+  }
+  .btn5 {
+    position: absolute;
+    left: 45vw;
+    top: 18vw;
+    width: 9vw;
+    height: 12vw;
+  }
+  .btn6 {
+    position: absolute;
+    left: 56vw;
+    top: 18vw;
+    width: 9vw;
+    height: 12vw;
+  }
+  .btn7 {
+    position: absolute;
+    left: 67vw;
+    top: 18vw;
+    width: 9vw;
+    height: 12vw;
+  }
+  .btn8 {
+    position: absolute;
+    left: 78vw;
+    top: 18vw;
+    width: 9vw;
+    height: 12vw;
+  }
+  .btn9 {
+    position: absolute;
+    left: 89vw;
+    top: 18vw;
+    width: 9vw;
+    height: 12vw;
+  }
+}
+</style>

src/pages/Hardware.vue

@@ -2,6 +2,7 @@
   <div class="hardware_container">
     <div class="top_wrap"><Top :hardLogo="true" /></div>
     <img :src="Home1" class="bg" alt="" />
+    <NewTrack :hard="true" />
     <Card :caseList="getData()" />
     <HeadLine title="专家" themeTitle="电机控制" />
     <div class="img_wrap">
@@ -24,7 +25,7 @@
 import Top from 'cpns/Top'
 import HeadLine from 'cpns/HeadLine'
 import Dian from '@/static/img/hardware/dianji.png'
-import Home1 from '@/static/img/newpage/home3.png'
+import Home1 from '@/static/img/newpage/def.png'
 import SAccelerate from '@/static/img/hardware/s-accelerate.png'
 import TAccelerate from '@/static/img/hardware/t-accelerate.png'
 import Home2 from '@/static/img/newpage/home4.png'
@@ -33,14 +34,12 @@ import Card from 'cpns/Card'
 import Gif1 from '@/static/img/hardware/1.gif'
 import Gif2 from '@/static/img/hardware/2.gif'
 import { caseList, hardCaseList } from '@/mock'
+import NewTrack from 'cpns/NewTrack'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 
 const getData = () => {
-  if (route.path.indexOf('/hardware') != -1) {
-    return hardCaseList
-  }
-  return caseList
+  return hardCaseList
 }
 </script>
 

src/pages/Industry.vue

@@ -2,6 +2,7 @@
   <div class="industry_container">
     <div class="top_wrap"><Top /></div>
     <img :src="Home1" class="bg" alt="" />
+    <NewTrack />
     <Card :caseList="getData()" />
     <img :src="Home2" class="bg" alt="" />
   </div>
@@ -10,7 +11,8 @@
 <script setup>
 import Top from 'cpns/Top'
 import HeadLine from 'cpns/HeadLine'
-import Home1 from '@/static/img/newpage/home1.png'
+import Home1 from '@/static/img/newpage/abc.png'
+import NewTrack from 'cpns/NewTrack'
 import Home2 from '@/static/img/newpage/home2.png'
 import Card from 'cpns/Card'
 import { caseList, hardCaseList } from '@/mock'
@@ -18,9 +20,6 @@ import { useRoute } from 'vue-router'
 const route = useRoute()
 
 const getData = () => {
-  if (route.path.indexOf('/hardware') != -1) {
-    return hardCaseList
-  }
   return caseList
 }
 </script>

src/store/index.js

@@ -1,6 +1,7 @@
 import { createPinia } from 'pinia'
 import { useCountStore } from './modules/count'
+import { useTrackStore } from './modules/track'
 const store = createPinia()
 
 export default store
-export { useCountStore }
+export { useCountStore, useTrackStore }

src/store/modules/track.js

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+export const useTrackStore = defineStore({
+  id: 'track', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      industryTab: '0',
+      hardwareTab: '0',
+    }
+  },
+  // actions
+  actions: {
+    updateIndustryTab(industryTab) {
+      this.industryTab = industryTab
+    },
+    updateHardwareTab(hardwareTab) {
+      this.hardwareTab = hardwareTab
+    },
+  },
+})