<template>
	<view style="background-color: #fff;">
		<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
		<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">已购方案</view>
	</view>
	<u-line></u-line>
	<view class="scheme">
		<view class="content" v-for="(item,index) in List" :key="index">
			<span>{{item.content}}</span>
			<u-tag style="position: absolute; right: 10px; top: 0;" :text="item.tagName" :type="item.tagName === '中' ? 'success' : item.tagName === '负' ? 'error' : 'warning' " size="mini"></u-tag>
		</view>
	</view>
	<view class="listBottom">没有更多了</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
		})
	}
	const List = ref([
		{
			content: '又是这样出蛊惑的数据',
			tagName: '未结算',
		},
		{
			content: '又是这样出蛊惑的数据',
			tagName: '中',
		},
		{
			content: '又是这样出蛊惑的数据',
			tagName: '负',
		}
	])
</script>

<style lang="scss" scoped>
	
.scheme{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.content{
		margin-top: 4%;
		width: 89%;
		padding: 0 3%;
		min-height: 8vh;
		border: 1px solid #f6f6f6;
		border-radius: 5px;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		align-items: center;
		position: relative;
	}
}
	.listBottom {
		margin-top: 4%;
		text-align: center;
		width: 100%;
		font-size: 14px;
		font-weight: 600;
		color: #c4c4c4;
	}
	
	
</style>