36 lines
1.2 KiB
Vue
36 lines
1.2 KiB
Vue
<template>
|
|
<view class="image-swiper">
|
|
<swiper class="swiper-box" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000">
|
|
<swiper-item v-for="(item, index) in mainImages" :key="index">
|
|
<image :src="item.url" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="thumbnail-box">
|
|
<view v-for="(thumb, index) in thumbnails" :key="index" class="thumbnail-item">
|
|
<image :src="thumb.url" mode="aspectFill"></image>
|
|
<text>{{ thumb.description }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const mainImages = ref([
|
|
{ url: 'https://example.com/main-image-1.jpg' },
|
|
]);
|
|
|
|
const thumbnails = ref([
|
|
{ url: 'https://example.com/thumbnail-1.jpg', description: '瑶山古寨' },
|
|
{ url: 'https://example.com/thumbnail-2.jpg', description: '民俗表演' },
|
|
{ url: 'https://example.com/thumbnail-3.jpg', description: '特色美食' },
|
|
{ url: 'https://example.com/thumbnail-4.jpg', description: '传统服饰' },
|
|
{ url: 'https://example.com/thumbnail-5.jpg', description: '其他' },
|
|
]);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import './styles/index.scss';
|
|
</style> |