You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.0 KiB
127 lines
3.0 KiB
<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>
|