Browse Source
Merge branch 'devlop' of http://git.qniao.cn/dengxiongfei/paper-shopkeeper-app into devlop
Merge branch 'devlop' of http://git.qniao.cn/dengxiongfei/paper-shopkeeper-app into devlop
# Conflicts: # pages/start-page/index.vuedevlop
8 changed files with 195 additions and 193 deletions
Split View
Diff Options
-
30App.vue
-
2pages/contract-manage/index.vue
-
2pages/mall/index.vue
-
354pages/start-page/index.vue
-
BINstatic/imgs/start-page/dzqy.png
-
BINstatic/imgs/start-page/ht.png
-
BINstatic/imgs/start-page/rz.png
-
BINstatic/imgs/start-page/zx.png
@ -1,191 +1,189 @@ |
|||
<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 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="{ height: '100vh' }" |
|||
: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" :key="index" :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> |
|||
<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' |
|||
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' |
|||
this.pageHight = 'height:' + (document.documentElement.clientHeight - 60) + 'px' |
|||
} |
|||
data() { |
|||
return { |
|||
current: 0, |
|||
mode: 'round', |
|||
background: ['color1', 'color2', 'color3'], |
|||
indicatorDots: false, |
|||
autoplay: true, |
|||
interval: 2500, |
|||
duration: 500, |
|||
pageText: [ |
|||
{ |
|||
text: '', |
|||
title: '账期订单融资', |
|||
subTitle: '给客户更便宜的价格,更大的销售额', |
|||
image: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/start-page-rz.png' |
|||
}, |
|||
{ |
|||
text: '', |
|||
title: '征信管理', |
|||
subTitle: '具有客户更丰富多维的征信数据', |
|||
image: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/start-page-zx.png' |
|||
}, |
|||
{ |
|||
text: '', |
|||
title: '电子签约', |
|||
subTitle: '避免交易过程可能的纠纷', |
|||
image: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/start-page-dzqy.png' |
|||
}, |
|||
{ |
|||
text: '全新纸掌柜', |
|||
title: '智能合同', |
|||
subTitle: '实现合同同步的财务履约能力', |
|||
image: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/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() { |
|||
uni.setStorageSync('hasLaunch', '1') |
|||
go2('client') |
|||
} |
|||
} |
|||
} |
|||
</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; |
|||
} |
|||
.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> |
|||
Write
Preview
Loading…
Cancel
Save