<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>