vip页面更新
This commit is contained in:
parent
76ebd47058
commit
86f2a95be3
|
|
@ -5,11 +5,11 @@ const install = (Vue, vm) => {
|
|||
Vue.prototype.$u.http.setConfig({
|
||||
// baseUrl: 'http://61.174.243.28:15861',
|
||||
// baseUrl: 'http://192.168.2.46:8080',
|
||||
// baseUrl: 'https://che.chuangtewl.com/prod-api',
|
||||
baseUrl: 'https://che.chuangtewl.com/prod-api',
|
||||
// 测试环境
|
||||
// baseUrl: 'https://dianche.chuantewulian.cn/prod-api',
|
||||
// 俞山岛
|
||||
baseUrl: 'https://dche.ccttiot.com/prod-api',
|
||||
// baseUrl: 'https://dche.ccttiot.com/prod-api',
|
||||
// 创特
|
||||
loadingText: '努力加载中~',
|
||||
loadingTime: 10000,
|
||||
|
|
|
|||
|
|
@ -1,11 +1,57 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
|
||||
<view class="fixed">
|
||||
<u-navbar title=" " :border-bottom="false" :background="background" title-color='#fff' title-size='36' back-icon-color='#fff'
|
||||
height='45'></u-navbar>
|
||||
</view>
|
||||
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/u3NgziRzuV79XdIE8cCn" mode=""></image>
|
||||
|
||||
<view class="fixed">
|
||||
<u-navbar title=" " :border-bottom="false" :background="background" title-color='#fff' title-size='36'
|
||||
back-icon-color='#fff' height='45'></u-navbar>
|
||||
</view>
|
||||
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/u3NgziRzuV79XdIE8cCn" mode=""></image>
|
||||
|
||||
<view class="vipcard">
|
||||
<view class="card_top">
|
||||
<view class="name">
|
||||
17795402553
|
||||
</view>
|
||||
<view class="type">
|
||||
未开通
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_bot">
|
||||
<view class="txts">
|
||||
开通立享超值会员特权
|
||||
</view>
|
||||
<view class="topage">
|
||||
购买记录 >
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="mc" src="https://lxnapi.ccttiot.com/bike/img/static/uCIpavkHbM18al7gpxH8" mode=""></image>
|
||||
<view class="cont_box">
|
||||
|
||||
<view class="cont_li" v-for="item in 4" :key="item">
|
||||
<view class="tit">
|
||||
月卡
|
||||
</view>
|
||||
<view class="money">
|
||||
￥39.9
|
||||
</view>
|
||||
<view class="tips" style="text-decoration: line-through; ">
|
||||
￥59.9
|
||||
</view>
|
||||
<view class="tips">
|
||||
立省￥20
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="txt">
|
||||
该卡只能用于抵扣骑行费用，不能抵扣调度费、预约费等费用。 如您产生调度费、预约费等费用，需另支付差额。
|
||||
</view>
|
||||
<view class="pay_btn">
|
||||
￥39.9立即开通
|
||||
</view>
|
||||
<view class="tipss">
|
||||
更多优惠
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -34,17 +80,167 @@
|
|||
|
||||
.page {
|
||||
width: 750rpx;
|
||||
|
||||
.fixed {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.tipss{
|
||||
margin-left: 40rpx;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.vipcard {
|
||||
padding: 36rpx ;
|
||||
position: fixed;
|
||||
top: 428rpx;
|
||||
left: 38rpx;
|
||||
width: 680rpx;
|
||||
height: 244rpx;
|
||||
z-index: 1;
|
||||
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/u78FEc5oHRKzdvopQpZE');
|
||||
background-size: cover;
|
||||
/* 背景图片等比缩放以覆盖整个容器 */
|
||||
background-position: center;
|
||||
/* 背景图片居中显示 */
|
||||
background-repeat: no-repeat;
|
||||
.card_top{
|
||||
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
.name{
|
||||
font-weight: 500;
|
||||
font-size: 44rpx;
|
||||
color: #B07C1E;
|
||||
}
|
||||
.type{
|
||||
margin-left: 30rpx;
|
||||
padding: 4rpx 18rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #B07C1E;
|
||||
border-radius: 35rpx 35rpx 35rpx 35rpx;
|
||||
border: 1rpx solid #B07C1E;
|
||||
}
|
||||
}
|
||||
.card_bot{
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
.txts{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #B07C1E;
|
||||
}
|
||||
.topage{
|
||||
margin-left: auto;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #B07C1E;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.pay_btn{
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20rpx auto ;
|
||||
width: 680rpx;
|
||||
height: 104rpx;
|
||||
background: linear-gradient( 90deg, rgba(255,201,87,0.84) 0%, rgba(255,224,158,0.58) 100%);
|
||||
border-radius: 58rpx 58rpx 58rpx 58rpx;
|
||||
font-weight: 500;
|
||||
font-size: 44rpx;
|
||||
color: #B07C1E;
|
||||
|
||||
}
|
||||
.backimg {
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
height: 670rpx;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1; // 确保背景图片在所有内容之下
|
||||
}
|
||||
.txt{
|
||||
margin: 56rpx 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #64B6A7;
|
||||
}
|
||||
.cont_box {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 38rpx;
|
||||
margin-top: 690rpx;
|
||||
z-index: 10;
|
||||
overflow-x: auto; // 允许横向滚动
|
||||
white-space: nowrap; // 保持内容不换行
|
||||
-webkit-overflow-scrolling: touch; // 使滚动更流畅
|
||||
|
||||
// 隐藏横向滚动条
|
||||
::-webkit-scrollbar {
|
||||
display: none; // 针对 WebKit 浏览器 (如 Safari 和 Chrome)
|
||||
height: 0; // 设定横向滚动条高度为 0
|
||||
}
|
||||
|
||||
scrollbar-width: none; // 针对 Firefox
|
||||
-ms-overflow-style: none; // 针对 Internet Explorer 和 Edge
|
||||
|
||||
.cont_li {
|
||||
width: 218rpx;
|
||||
height: 256rpx;
|
||||
background: rgba(255, 224, 158, 0.15) #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid rgba(176, 124, 30, 0.56);
|
||||
z-index: 10;
|
||||
flex-shrink: 0; // 防止子元素缩小
|
||||
margin-right: 20rpx; // 子元素之间的间距
|
||||
.tit{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #B07C1E;
|
||||
}
|
||||
.money{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #E46666;
|
||||
}
|
||||
.tips{
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cont_box::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mc {
|
||||
position: fixed;
|
||||
top: 611rpx;
|
||||
left: 0rpx;
|
||||
width: 750rpx;
|
||||
height: 107.29rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -299,23 +299,22 @@
|
|||
<u-picker mode="time" v-model="time2" :params="params" @confirm="confirm2" :default-time='lasTime'></u-picker>
|
||||
<u-mask :show="showtips" :z-index='100' />
|
||||
<view class="tip_box1" v-if="showtips">
|
||||
<image class="close" src="https://lxnapi.ccttiot.com/bike/img/static/uyRmNa7d2WThHjr1Jzqk" mode="" @click="showtips=false"></image>
|
||||
<view class="top1">
|
||||
<view class="tip">
|
||||
提示
|
||||
{{tiptit}}
|
||||
</view>
|
||||
|
||||
<view class="txt">
|
||||
{{tiptxt}}
|
||||
<view class="txt" v-html="tiptxt">
|
||||
<!-- {{tiptxt}} -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot1">
|
||||
<!-- <view class="bot_left" @click="closefz()">
|
||||
取消
|
||||
</view> -->
|
||||
<!-- <view class="bot1">
|
||||
|
||||
<view class="bot_right" @click="showtips=false">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -343,8 +342,9 @@
|
|||
info: {},
|
||||
areaId: 0,
|
||||
loading:false,
|
||||
showtips:true,
|
||||
tiptxt:''
|
||||
showtips:false,
|
||||
tiptxt:'',
|
||||
tiptit:''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -363,11 +363,14 @@
|
|||
methods: {
|
||||
showtipss(num){
|
||||
if(num==1){
|
||||
this.tiptxt='订单总收入=订单收款-退款-手续费'
|
||||
this.tiptxt='该时间段骑车实际利润'
|
||||
this.tiptit='营业收入'
|
||||
}else if(num==2){
|
||||
this.tiptxt='押金余额=充值押金-押金支出-订单押金扣款'
|
||||
this.tiptxt='该时间段押金余额'
|
||||
this.tiptit='押金余额'
|
||||
}else if(num==3){
|
||||
this.tiptxt='账户盈余=总流水-总支出=营业收入+押金余额'
|
||||
this.tiptxt='该时间段账户盈余<br/>总流水减去总支出'
|
||||
this.tiptit='账户盈余'
|
||||
|
||||
}
|
||||
this.showtips=true
|
||||
|
|
@ -460,8 +463,14 @@
|
|||
background: #FFFFFF;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
z-index: 110;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
padding-bottom: 10rpx;
|
||||
.close{
|
||||
position: absolute;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
bottom: -98rpx;
|
||||
left: 274rpx;
|
||||
}
|
||||
.top1 {
|
||||
padding: 52rpx 38rpx 42rpx 36rpx;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user