hjyd/src/components/Trumbs/index.vue

<template>
  <div class="trumbs_container">
    <swiper
      :slidesPerView="7"
      :freeMode="true"
      :modules="modules"
      :autoHeight="true"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      class="trumbs_swiper"
    >
      <swiper-slide
        v-for="item in props.isCase
          ? case_detail_img_data[industry_id]
          : hard_img_data[hardware_id]"
        :key="item.id"
        style="background: none"
      >
        <div class="img_card">
          <img :src="item.picUrl" class="img" alt="" />
          <div class="dialog_text">
            <div class="btn" @click="viewDetail(item.id)">查看详情</div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
import { case_detail_img_data } from '@/mock/case'
import { case_detail_img_data as hard_img_data } from '@/mock/hardware'
import { useDetailStore } from '@/store'
import { storeToRefs } from 'pinia'
// Import Swiper styles
import 'swiper/css'

import 'swiper/css/free-mode'
// import required modules
import { FreeMode } from 'swiper'

const detailStore = useDetailStore()
const { industry_id, hardware_id } = storeToRefs(detailStore)
const myEmit = defineEmits(['onMySonFunc'])
const props = defineProps({
  isCase: Boolean,
})
const modules = ref([FreeMode])
const viewDetail = index => {
  if (props.isCase) {
    myEmit('onMySonFunc')
    detailStore.updateExampleId(index)
  } else {
    detailStore.updateHardwareExampleId(index)
  }
  const intIndex = parseInt(index)
  if (intIndex > 4) {
    sw.value.slideTo(intIndex - 4, 500, false)
  } else {
    sw.value.slideTo(intIndex - 2, 500, false)
  }
}
const sw = ref(null)
const onSwiper = swiper => {
  sw.value = swiper
}
</script>

<style lang="scss" scoped>
.swiper {
  width: 1594px !important;
}
.trumbs_container {
  width: 100%;
  height: 108px;
  .img_card {
    min-width: 194px;
    width: 194px;
    height: 108px;
    position: relative;
    .img {
      width: 194px;
    }
    .dialog_text {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      align-items: center;
      justify-content: center;
      transition-property: all;
      transition-duration: 0.7s;
      animation-fill-mode: forwards;
      .btn {
        font-size: 18px;
        font-family: 'SourceHanSans';
        font-weight: 400;
        color: #ffffff;
        padding: 6px 14px;
        border: 1px solid #ffffff;
        border-radius: 2px;
        cursor: pointer;
        transition-property: all;
        transition-duration: 0.7s;
        animation-fill-mode: forwards;
      }
      .btn:hover {
        background: #283fe7 !important;
        border: 1px solid #283fe7 !important;
        opacity: 1;
        transform: scale(1.1);
      }
    }
  }
  .dialog_text:hover {
    background: rgba(53, 83, 227, 0.63);
    opacity: 1;
  }
}
</style>