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.
103 lines
2.4 KiB
103 lines
2.4 KiB
<template>
|
|
<view class="background">
|
|
<!-- Swiper 轮播图 -->
|
|
<swiper
|
|
class="swiper-container"
|
|
autoplay="3000"
|
|
circular
|
|
:current="current"
|
|
@change="onSwiperChange"
|
|
>
|
|
<swiper-item v-for="(image, index) in images" :key="index">
|
|
<image :src="image" class="swiper-image"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- 动态切换的轮播点 -->
|
|
<image :src="dotImages[current]" class="dot"></image>
|
|
|
|
<!-- 按钮效果 -->
|
|
<image class="button" @click="click" src="/static/information/purpose/pictures/button.png"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
images: [
|
|
'/static/information/purpose/pictures/picture1.png',
|
|
'/static/information/purpose/pictures/picture2.png',
|
|
'/static/information/purpose/pictures/picture3.png',
|
|
'/static/information/purpose/pictures/picture4.png',
|
|
'/static/information/purpose/pictures/picture5.png',
|
|
], // Swiper 轮播图片
|
|
dotImages: [
|
|
'/static/information/purpose/pictures/dot1.png',
|
|
'/static/information/purpose/pictures/dot2.png',
|
|
'/static/information/purpose/pictures/dot3.png',
|
|
'/static/information/purpose/pictures/dot4.png',
|
|
'/static/information/purpose/pictures/dot5.png',
|
|
], // 轮播点图片
|
|
current: 0, // 当前显示的图片索引
|
|
};
|
|
},
|
|
methods: {
|
|
click() {
|
|
uni.navigateTo({
|
|
url: '/pages/transition/page8/page8', // 跳转到进入主页前的过渡界面
|
|
});
|
|
},
|
|
onSwiperChange(e) {
|
|
this.current = e.detail.current;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.background {
|
|
background-image: url("/static/information/purpose/pictures/background.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
position: relative;
|
|
}
|
|
|
|
.swiper-container {
|
|
width: 100%;
|
|
height: 80%; /* 根据需要调整轮播图高度 */
|
|
bottom: 10%;
|
|
}
|
|
|
|
.swiper-image {
|
|
width: 80%;
|
|
height: 70%;
|
|
position: absolute;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
object-fit: cover; /* 保持图片比例 */
|
|
}
|
|
|
|
.dot {
|
|
position: absolute;
|
|
width: 22%;
|
|
height: 3%;
|
|
bottom: 15%;
|
|
}
|
|
|
|
.button {
|
|
position: absolute;
|
|
width: 90%;
|
|
height: 13%;
|
|
bottom: 1%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
</style>
|