dykj-football/pages/user/compontents/purchasedPlan.vue

80 lines
1.8 KiB
Vue

<template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view style="background-color: #ddd;">
<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>
<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>