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