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.
86 lines
1.7 KiB
86 lines
1.7 KiB
<script setup>
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { ref } from "vue";
|
|
import { getGuideImgsApi } from "@/libs/api";
|
|
|
|
/**
|
|
* 当前轮播图下标
|
|
*/
|
|
const swiperCurrent = ref(0);
|
|
/**
|
|
* 轮播图
|
|
*/
|
|
const banner = ref([]);
|
|
/**
|
|
* 自轮轮播
|
|
*/
|
|
const bannerAutoplay = ref(true);
|
|
/**
|
|
* 是否显示轮播图
|
|
*/
|
|
const isShowBanner = ref(true);
|
|
/**
|
|
* 是否显示立即体验按钮
|
|
*/
|
|
const showStart = ref(false);
|
|
|
|
/**
|
|
* 返回首页
|
|
*/
|
|
function gotoHome() {
|
|
uni.switchTab({
|
|
url: "/pages/home/home",
|
|
});
|
|
}
|
|
|
|
onLoad(async () => {
|
|
const res = await getGuideImgsApi();
|
|
banner.value = res.data;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="main">
|
|
<swiper
|
|
v-if="banner.length !== 0 && isShowBanner"
|
|
class="w-full h-full"
|
|
:indicator-dots="true"
|
|
:autoplay="bannerAutoplay"
|
|
:interval="2000"
|
|
:current="swiperCurrent"
|
|
:indicator-style="{ with: '60rpx', height: '8rpx', borderRadius: '4rpx' }"
|
|
circular
|
|
indicator-color="rgba(235, 237, 240, .3)"
|
|
indicator-active-color="rgb(102, 102, 102)"
|
|
>
|
|
<swiper-item v-for="(item, index) in banner" :key="index" class="w-full h-full">
|
|
<image :src="item.url" mode="aspectFill" class="w-full h-full" />
|
|
</swiper-item>
|
|
</swiper>
|
|
<view
|
|
v-if="!showStart"
|
|
class="skipBtn"
|
|
@click="gotoHome"
|
|
>
|
|
跳过
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-color: rgba(191, 219, 254);
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.skipBtn {
|
|
position: fixed;
|
|
top: 180rpx;
|
|
right: 32rpx;
|
|
color: #666;
|
|
border: 1px solid #666;
|
|
background-color: rgba(255,255,255,.2);
|
|
}
|
|
</style>
|