freight-web/src/pagesLaunch/index.vue

81 lines
1.7 KiB
Vue
Raw Normal View History

2024-03-04 07:10:11 +00:00
<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="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pagesLaunch/${item.imgUrl}`"></image>
2024-03-04 07:10:11 +00:00
<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: "/pagesLogin/login/index", // 要跳转到的页面路径
});
2024-03-04 07:10:11 +00:00
};
</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>