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

<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="attentionList">
		<view v-for="(index,item) in 3" :key="index">
			<view class="ListStrip">
				<view class="ListName">
					<u-avatar shape="circle" size="55" :src="src" customStyle="margin: -3px 5px -3px 0" />
					<span>{{'法无边'}}</span>
				</view>
				<view class="ListContent">
					<view class="contentText">
						<span>{{'二月探花'}}</span>
						<span>{{'五连红'}}</span>
					</view>
					<view class="">
						<u-tag text="法国" type="warning" size="mini" plain></u-tag>
					</view>
					<view class="">
						<u-tag text="法国各级联赛" type="warning" size="mini" plain></u-tag>
					</view>
				</view>
			</view>
		</view>
		<view class="listBottom">没有更多了</view>
	</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%;
		padding: 5%;

		.ListStrip {
			width: 90%;
			height: 17vh;
			border: 1px solid #f1f1f1;
			border-radius: 10px;
			margin-bottom: 5%;
			display: flex;
			justify-content: space-between;

			.ListName {
				width: 40%;
				display: flex;
				justify-content: space-evenly;
				margin-top: 7%;
				font-size: 12px;
			}

			.ListContent {
				width: 60%;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-around;
				padding-right: 5%;

				.contentText {
					width: 80%;
					display: flex;
					justify-content: space-evenly;
					color: #cc3e3e;
					font-size: 14px;
					font-weight: 700;
				}
			}
		}
	}

	.listBottom {
		text-align: center;
		width: 90%;
		font-weight: 600;
		color: #c4c4c4;
	}
</style>