81 lines
1.6 KiB
Vue
81 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<swiper
|
||
|
|
class="swiper"
|
||
|
|
circular
|
||
|
|
:indicator-dots="true"
|
||
|
|
:autoplay="false"
|
||
|
|
:interval="2000"
|
||
|
|
:duration="500"
|
||
|
|
indicator-active-color="#00DCEE"
|
||
|
|
>
|
||
|
|
<swiper-item v-for="(item, index) in list" :key="index">
|
||
|
|
<view class="image-box">
|
||
|
|
<image :src="`/static/img/launch/${item.imgUrl}`"></image>
|
||
|
|
<view class="title">
|
||
|
|
{{ item.title }}
|
||
|
|
</view>
|
||
|
|
<view v-if="index === 3" class="btn-start" @click="start()">
|
||
|
|
立即启用
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
const list = [
|
||
|
|
{
|
||
|
|
title: "智能回收 智慧未来！",
|
||
|
|
imgUrl: "1.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "高效管理 安全快捷！",
|
||
|
|
imgUrl: "2.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "全新系统 崭新界面！",
|
||
|
|
imgUrl: "3.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "全城握手 致富从这里开始!",
|
||
|
|
imgUrl: "4.png",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const start = () => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: "/pages/login/index", // 要跳转到的页面路径
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.swiper {
|
||
|
|
width: 100%;
|
||
|
|
height: 80vh;
|
||
|
|
margin-top: 10vh;
|
||
|
|
.image-box {
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
font-size: 40rpx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #00d2e3;
|
||
|
|
margin-top: 90rpx;
|
||
|
|
}
|
||
|
|
.btn-start {
|
||
|
|
height: 88rpx;
|
||
|
|
background: #00dcee;
|
||
|
|
border-radius: 44rpx;
|
||
|
|
line-height: 88rpx;
|
||
|
|
font-size: 37rpx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #ffffff;
|
||
|
|
width: 80%;
|
||
|
|
margin: 0px auto;
|
||
|
|
margin-top: 50rpx;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|