91 lines
2.2 KiB
Vue
91 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 Project from './project.vue'
|
|
|
|
import {findLabelByUrl} from '@/utils'
|
|
|
|
import {useNavStore} from '@/store/nav'
|
|
const navStore = useNavStore()
|
|
|
|
import {useRouter} from 'vue-router'
|
|
const router = useRouter()
|
|
|
|
const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
|
|
|
|
onMounted(() => {})
|
|
|
|
const currentPage = ref(1)
|
|
|
|
const swiperItem = ref([
|
|
{id: 1, title: 'RGRID-Lite', subTitle: '无人机Remote ID远程识别设备', imgUrl: 'product/detail/6.png'},
|
|
{id: 2, title: 'RGRID-Ped', subTitle: '无人机Remote ID远程识别模块', imgUrl: 'product/detail/1.png'},
|
|
{id: 3, title: 'RGRID-Mob', subTitle: '无人机Remote ID远程识别手持设备', imgUrl: 'product/detail/4.png'},
|
|
])
|
|
|
|
// 点击标题跳转详情页
|
|
function titleClick(item) {
|
|
console.log('title clicked:', item)
|
|
router.push({
|
|
path: '/product/detail',
|
|
query: {
|
|
type: 'monitorSystem',
|
|
id: item.id,
|
|
title: item.title,
|
|
subTitle: item.subTitle,
|
|
imgUrl: item.imgUrl,
|
|
},
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<Banner class="banner" img="banner/product.png" />
|
|
<Swiper
|
|
id="one"
|
|
:title="title"
|
|
v-model="currentPage"
|
|
:data="swiperItem"
|
|
:page-size="3"
|
|
:show-pagination="false"
|
|
:auto-play="false"
|
|
:sourceHeight="400"
|
|
:source-gap="80"
|
|
>
|
|
<template #default="{item, index, isActive}">
|
|
<div class="content" @click="titleClick(item)">
|
|
<div class="top">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="sub-title">{{ item.subTitle }}</div>
|
|
</div>
|
|
<div class="line"></div>
|
|
<img :src="`./static/images/${item.imgUrl}`" class="img" :class="{active: isActive}" />
|
|
</div>
|
|
</template>
|
|
</Swiper>
|
|
|
|
<Project />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
height: 100%;
|
|
.top {
|
|
background-color: #eee;
|
|
padding: 10px 0;
|
|
}
|
|
.line {
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: $black;
|
|
}
|
|
.img {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
}
|
|
</style>
|