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.
191 lines
4.3 KiB
191 lines
4.3 KiB
<template>
|
|
<view class="">
|
|
<view class="start-page">
|
|
<view class="view-lineHight"><image class="topImage" src="../../static/imgs/start-page/bkTop.png" mode=""></image></view>
|
|
<view class="page-jump" @click="jumpLogin"><text>跳过</text></view>
|
|
<view class="page1">
|
|
<swiper
|
|
class="swiper"
|
|
:current="current"
|
|
@change="currentChange"
|
|
@transition="transition"
|
|
:style="pageHight"
|
|
:indicator-dots="indicatorDots"
|
|
:autoplay="autoplay"
|
|
:interval="interval"
|
|
:duration="duration"
|
|
>
|
|
<swiper-item v-for="(swiper, swiperIndex) in pageText" :key="swiperIndex">
|
|
<view class="swiper-item uni-bg-red">
|
|
<view class="page-top">
|
|
<view class="page-text">
|
|
<text>{{ swiper.text }}</text>
|
|
</view>
|
|
<view class="page-title">
|
|
<text>{{ swiper.title }}</text>
|
|
</view>
|
|
<view class="page-subtitle">
|
|
<text>{{ swiper.subTitle }}</text>
|
|
</view>
|
|
<image class="" :src="swiper.image" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="index-point"><view v-for="(items, index) in pageText" :class="current === index ? 'indexs-check' : 'indexs-nocheck'"></view></view>
|
|
<view class="page-btn-class" v-if="current === pageText.length - 1"><button @click="jumpLogin" class="page-btn" type="default">立即开启</button></view>
|
|
</view>
|
|
|
|
<view class="view-lineHight"><image class="topImage bottom-image" src="../../static/imgs/start-page/bkBottom.png" mode=""></image></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { back, go2, uploadFile } from '@/utils/hook.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
mode: 'round',
|
|
pageHight: 0,
|
|
background: ['color1', 'color2', 'color3'],
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 1500,
|
|
duration: 500,
|
|
pageText: [
|
|
{
|
|
text: '',
|
|
title: '账期订单融资',
|
|
subTitle: '给客户更便宜的价格，更大的销售额',
|
|
image: '../../static/imgs/start-page/rz.png'
|
|
},
|
|
{
|
|
text: '',
|
|
title: '征信管理',
|
|
subTitle: '具有客户更丰富多维的征信数据',
|
|
image: '../../static/imgs/start-page/zx.png'
|
|
},
|
|
{
|
|
text: '',
|
|
title: '电子签约',
|
|
subTitle: '避免交易过程可能的纠纷',
|
|
image: '../../static/imgs/start-page/dzqy.png'
|
|
},
|
|
{
|
|
text: '全新纸掌柜',
|
|
title: '智能合同',
|
|
subTitle: '实现合同同步的财务履约能力',
|
|
image: '../../static/imgs/start-page/ht.png'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
currentChange(item) {
|
|
this.current = item.detail.current
|
|
},
|
|
transition(item){
|
|
if(this.current === this.pageText.length - 1){
|
|
this.autoplay = false
|
|
}
|
|
},
|
|
jumpLogin(){
|
|
go2('client')
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.pageHight = 'height:' + (window.screen.height - 60) + 'px'
|
|
console.log(this.pageHight)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.start-page {
|
|
.topImage {
|
|
width: 100%;
|
|
height: 72rpx;
|
|
}
|
|
.view-lineHight {
|
|
line-height: 0rpx;
|
|
}
|
|
.bottom-image {
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
}
|
|
.page1 {
|
|
background-color: #e7eeff;
|
|
text-align: center;
|
|
}
|
|
.page-title {
|
|
font-size: 100rpx;
|
|
color: #2143af;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
margin: 32rpx 0rpx;
|
|
}
|
|
.page-text {
|
|
font-size: 80rpx;
|
|
color: #2143af;
|
|
font-weight: 400;
|
|
}
|
|
.page-top {
|
|
padding-top: 20%;
|
|
}
|
|
.page-subtitle {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
font-weight: 400;
|
|
margin: 32rpx 0rpx;
|
|
}
|
|
.page-jump {
|
|
position: absolute;
|
|
padding: 12rpx;
|
|
border: 2rpx solid #979797;
|
|
border-radius: 38rpx;
|
|
width: 122rpx;
|
|
text-align: center;
|
|
right: 54rpx;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
font-weight: 400;
|
|
z-index: 9999;
|
|
}
|
|
.indexs-check {
|
|
background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%);
|
|
border-radius: 12rpx;
|
|
width: 54rpx;
|
|
height: 12rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
.indexs-nocheck {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background-color: #58c4fd;
|
|
margin-left: 10rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.index-point {
|
|
position: absolute;
|
|
top: 70%;
|
|
left: 40%;
|
|
display: flex;
|
|
}
|
|
.page-btn {
|
|
background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%);
|
|
border-radius: 8rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 500;
|
|
width: 400rpx;
|
|
}
|
|
.page-btn-class {
|
|
position: absolute;
|
|
top: 73%;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
</style>
|