97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<script setup>
|
|
import {ref, onMounted, computed} from 'vue'
|
|
import Swiper from '@/components/Swiper/index.vue'
|
|
import Banner from '@/components/Banner/index.vue'
|
|
import {findLabelByUrl} from '@/utils'
|
|
|
|
import {cryptoEncrypt} from '@/utils/cryptojs'
|
|
|
|
import {useNavStore} from '@/store/nav'
|
|
|
|
const softwareSystemList = window.softwareSystemList
|
|
|
|
const navStore = useNavStore()
|
|
|
|
import {useRouter} from 'vue-router'
|
|
const router = useRouter()
|
|
|
|
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
|
|
|
const swiperWidth = ref(1300)
|
|
const swiperHeight = ref(800)
|
|
|
|
onMounted(() => {})
|
|
|
|
const currentPage = ref(1)
|
|
|
|
// 点击标题跳转详情页
|
|
function titleClick(item) {
|
|
router.push({
|
|
path: '/product/detail',
|
|
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<Banner class="banner" img="banner/product.png" />
|
|
<Swiper
|
|
id="one"
|
|
:title="title"
|
|
v-model="currentPage"
|
|
:show-pagination="false"
|
|
:auto-play="false"
|
|
:source-width="swiperWidth"
|
|
:source-height="swiperHeight"
|
|
:showHover="false"
|
|
>
|
|
<template #default="{isActive}">
|
|
<div class="content flex j-c a-c wrap">
|
|
<div v-for="list in softwareSystemList" :key="list.id" class="list" @click="titleClick(list)">
|
|
<div class="top">
|
|
<div class="title">{{ list.title }}</div>
|
|
</div>
|
|
<div class="line"></div>
|
|
<img class="img" :src="`./static/images/${list.imgUrl}`" :class="{active: isActive}" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Swiper>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
height: 100%;
|
|
.list {
|
|
margin-top: 60px;
|
|
margin: 0 15px;
|
|
width: 400px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
transform: translateY(-50px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
.top {
|
|
border-radius: 8px 8px 0 0;
|
|
background-color: #0389ff;
|
|
color: #fff;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.line {
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: $black;
|
|
}
|
|
.img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
</style>
|