80 lines
1.8 KiB
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>
|