143 lines
3.4 KiB
Vue
143 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<div ref="mySwiper" class="swiper" id="swiper">
|
|
<!-- Slides -->
|
|
<div class="swiper-wrapper">
|
|
<div style="padding: 20px 6px" class="swiper-slide" v-for="item in slideData" :key="item.id">
|
|
<div class="ach-item bg-f" @click="onSelectItem(item)">
|
|
<div class="card">
|
|
<div class="card-title">
|
|
<img :src="item.icon" style="width: 20px;height: 20px;margin-right: 8px"></img>
|
|
<span >{{ item.title }}</span>
|
|
</div>
|
|
<div class="card-description">{{ item.description }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Navigation buttons -->
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import Swiper from 'swiper';
|
|
import { Navigation, Autoplay } from 'swiper/modules';
|
|
import 'swiper/css';
|
|
import 'swiper/css/navigation';
|
|
import icon_hot from '@/assets/imgs/jyh/ai/icon_hot.png';
|
|
import icon_yj from '@/assets/imgs/jyh/ai/icon_yj.png';
|
|
import icon_jh from '@/assets/imgs/jyh/ai/icon_jh.png';
|
|
|
|
const mySwiper = ref(null);
|
|
const slideData = [
|
|
{ id: 1, title: '热门开源软件', description: '列出热门开源软件',icon:icon_hot },
|
|
{ id: 2, title: '预警公告', description: '列出最近预警公告',icon:icon_yj },
|
|
{ id: 3, title: '你可以帮我做什么', description: '了解当前AI助手可以帮忙干什么',icon:icon_jh },
|
|
{ id: 4, title: '热门开源软件', description: '列出热门开源软件',icon:icon_hot },
|
|
{ id: 5, title: '预警公告', description: '列出最近预警公告',icon:icon_yj },
|
|
{ id: 6, title: '你可以帮我做什么', description: '了解当前AI助手可以帮忙干什么',icon:icon_jh }
|
|
];
|
|
|
|
const onSelectItem = (item) => {
|
|
console.log('Selected item:', item);
|
|
};
|
|
|
|
onMounted(() => {
|
|
new Swiper(mySwiper.value, {
|
|
// Swiper选项
|
|
observer: true,
|
|
observeParents: true,
|
|
modules: [Navigation, Autoplay],
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev'
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.swiper {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.card {
|
|
border-radius: 24px;
|
|
background: #FFFFFF;
|
|
padding: 18px 24px;
|
|
}
|
|
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #191919;
|
|
font-family: HarmonyOS Sans SC;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
letter-spacing: 0px;
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.card-title i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.card-description {
|
|
margin-left: 28px;
|
|
margin-top: 4px;
|
|
color: #595959;
|
|
font-family: HarmonyOS Sans SC;
|
|
font-weight: regular;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
letter-spacing: 0px;
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.swiper-button-prev {
|
|
left: -18px;
|
|
}
|
|
.swiper-button-next {
|
|
right: -18px;
|
|
}
|
|
|
|
.swiper-button-prev, .swiper-button-next {
|
|
top: 55%;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: inline-flex;
|
|
padding: 12px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
border-radius: 100px;
|
|
border: 2px solid #FFF;
|
|
background: rgba(255, 255, 255, 0.50);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.swiper-button-prev:after, .swiper-button-next:after {
|
|
color: #4E5969;
|
|
font-family: swiper-icons;
|
|
font-size: 16px;
|
|
text-transform: none !important;
|
|
letter-spacing: 0;
|
|
font-variant: initial;
|
|
line-height: 1;
|
|
}
|
|
</style>
|