dykj-football/pages/index/compontents/billingPage.vue
2024-04-19 16:35:16 +08:00

75 lines
2.7 KiB
Vue

<template>
<view style="background-color: #e8b596;">
<u-icon name="arrow-left" color="#fff" size="20" style="float: left;margin-top:4%; margin-left: 4%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px', 'color': '#fff'}" class="page-navbar">结算页面</view>
</view>
<view class="attentionList">
<view class="schemeInfo">
<span style="margin-left: 5%; color: #fff; font-weight: 600; font-size: 15px;">方案信息</span>
<u-cell-group style="background-color: #fff;flex: 0;">
<u-cell title="赛事" value="斯洛文尼亚甲级联赛"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="职业方案" value="放心,连红不会断在这场!"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="职业打榜高手" value="提词器"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="金额" value="488.00元宝"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
</u-cell-group>
</view>
<view class="">
<view class="schemeInfo" style="height: 26vh;">
<span style="margin-left: 5%; color: #fff; font-weight: 600; font-size: 15px;">我的账户</span>
<u-cell-group style="background-color: #fff;flex: 0;">
<u-cell title="选择支付方式" value="元宝支付" :isLink="true"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="账户金额:668.00元宝" value="直接充值" :isLink="true"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="可用优惠卷" value="0张可用" :isLink="true"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
</u-cell-group>
</view>
</view>
<u-button size="large" shape="shape" color="#fff" style="width: 90%; margin-top: 4%;">
<span style="color: #e4b698; font-weight: 600;">立即结算</span>
</u-button>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const {
safeAreaInsets
} = uni.getSystemInfoSync();
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const gotoBack = () => {
uni.navigateBack({
delta: 1
})
}
</script>
<style lang="scss" scoped>
.attentionList {
width: 100%;
min-height: 94.5vh;
background-color: #e8b596;
.schemeInfo{
height: 32vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
:deep(.u-cell__value){
max-width: 60vw;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 15px;
font-weight: 700;
color: #000;
}
</style>