dykj-football/pages/index/compontents/integralGuess.vue

<template>
	<view style="background-color: #e13977; height: 30vh; padding: 0 3%;">
		<view style="margin-bottom: 5%; position: relative;">
			<u-icon name="arrow-left" color="#646668" size="24" style="position: absolute; top: 11px;" @click="gotoBack" />
			<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbarOne">积分竞猜</view>
		</view>
		<view>
			<view class="Title">
				<text>最新竞猜</text>
				<text style="color: #fff;">我的积分:20</text>
			</view>
			<view v-for="(item,index) in list" :key="index">
				<view class="content">
					<view class="moneyBuy">
						<view class="money-content">
							<span>{{"四月门派冠军"}}</span>
						</view>
					</view>
					<u-line style="width: 95%;"></u-line>
					<view class="timeSession">
						<view style="width: 30%; display: flex; justify-content: space-around;">
							<span style="font-size: 18px;font-weight: 700; color: #eabc9e;">X5</span>
							<u-tag text="未竞猜" type="warning" size="mini" plain plainFill></u-tag>
						</view>
						<view>
							<span style="font-size: 14px; font-weight: 600;">{{'发布时间:'+item.time}}</span>
						</view>
					</view>
					<u-line style="width: 95%;"></u-line>
					<view class="userInfo">
						<view class="userTag">
							<view v-for="(item, index) in item.tagList" :key="index">
								<view class="grid-item">
									<u-tag :text="item.name" type="warning" size="large" plain plainFill></u-tag>
								</view>
							</view>
						</view>
					</view>
					<view style="width: 95%;">
						<u-input placeholder="请输入积分" border="surround" v-model="value" />
						<u-button text="提交" size="main" shape="circle" color="#1989f9" style="margin: 3% 0 ;"/>
					</view>
				</view>
			</view>
		</view>
		<view class="Title">
			<text>最新竞猜</text>
			<text style="color: #fff;">我的积分:20</text>
		</view>
		<view v-for="(item,index) in list" :key="index">
			<view class="content">
				<view class="moneyBuy">
					<view class="money-content">
						<span>{{"三月门派冠军"}}</span>
					</view>
				</view>
				<u-line style="width: 95%;"></u-line>
				<view class="timeSession">
					<view style="width: 30%; display: flex; justify-content: space-around;">
						<span style="font-size: 18px;font-weight: 700; color: #eabc9e;">X5</span>
						<u-tag text="已结算" type="info" size="mini" plain plainFill></u-tag>
					</view>
					<view>
						<span style="font-size: 14px; font-weight: 600;">{{'发布时间:'+item.time}}</span>
					</view>
				</view>
				<u-line style="width: 95%;"></u-line>
				<view class="userInfo">
					<view class="userTag">
						<view v-for="(item, index) in item.tagList" :key="index">
							<view class="grid-item">
								<u-tag :text="item.name" type="warning" size="large" plain plainFill></u-tag>
							</view>
						</view>
					</view>
				</view>
			</view>
		</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
		})
	}
	const list = [{
		originalPrice: '998.00',
		isNoBuy: '未购买',
		currentPrice: '496.00',
		discount: '5折',
		content: '我是内容',
		time: '2024-04-19 10:00:00',
		league: '殴足欧洲联赛',
		teamOne: '利叶古通',
		teamTwo: '高思维',
		name: '程博士',
		deadHeat: '中',
		tagList: [{
				name: '评级:掌门'
			},
			{
				name: 'AI提问工程师'
			},
			{
				name: '数字化及AI先行者'
			},
			{
				name: '数字化及AI先行者'
			},

		]
	}, ]
</script>

<style lang="scss" scoped>
	.page-navbarOne {
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 30rpx;
		color: #fff;
		text-align: center;
	}

	.Title {
		font-weight: 700;
		font-size: 15px;
		margin-bottom: 3%;
		display: flex;
		justify-content: space-between;
	}

	.content {
		width: 100%;
		// min-height: 35vh;
		background-color: #fff;
		border: 1px solid #f6f6f6;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 5%;

		.moneyBuy {
			width: 94%;
			height: 5vh;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.money-discount {
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.money-top {
					width: 40%;
					position: relative;

					.money-text {
						display: flex;
						justify-content: space-around;
						position: relative;

						span::before {
							content: "";
							position: absolute;
							top: 50%;
							left: 18px;
							width: 48%;
							height: 1px;
							background-color: #e4b698;
							transform: translateY(-50%);
						}
					}

					.discounted {
						position: absolute;
						color: red;
						font-size: 18px;
						font-weight: 600;
						top: 10px;
						left: 22px;
					}
				}

				.discountNum {
					color: red;
					font-size: 20px;
					font-weight: 700;
					transform: skewy(10deg);
				}
			}

			.money-content {
				font-weight: 700;
				width: 90%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.timeSession {
			width: 94%;
			height: 8vh;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.teamVs {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
			}
		}

		.userInfo {
			width: 94%;
			min-height: 10vh;
			max-height: 30vh;
			overflow-y: auto;

			.userTag {
				width: 100%;
				margin: 5% 0;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				/* 创建两列 */
				grid-gap: 10px;

				/* 列间隔 */
				.grid-item {
					text-align: center;
					background-color: #fff;
					border-radius: 5px;
				}
			}
		}
	}

	.btnStyle {
		width: 50px;
	}
</style>