dreamworks-mobile/src/components/NewTrack.vue

<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>