talk_appAmin/pages/signln/signiddetails.vue

<template>
	<view class="uninavbar">
		<uni-nav-bar statusBar="false" :border="false" left-icon="left" title="签到明细" />
	</view>
	<view style="height: 24rpx;"></view>
	<view class="content" v-for="(item,index) in arr" :key="index">
		<view class="uni-list">
			<text class="uni-list-top-text">{{item.text}}</text>
			<view :class="item.type === '+'
			 ?'uni-list-right-add':'uni-list-right-remove'">{{item.type}}{{item.count}}</view>
			<text class="uni-list-bottom-text">{{item.time}}</text>
			<view class="uni-list--border-bottom"></view>
		</view>
	</view>

</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"
	let arr = reactive([{
			id: 1,
			text: "每日签到",
			time: "2024-05-21 00:00",
			count: 2,
			type: "+"
		},
		{
			id: 2,
			text: "关注",
			time: "2024-05-21 00:00",
			count: 2,
			type: "+"
		},
		{
			id: 3,
			text: "点赞",
			time: "2024-05-21 00:00",
			count: 2,
			type: "+"
		},
		{
			id: 3,
			text: "发布话题",
			time: "2024-05-21 00:00",
			count: 2,
			type: "+"
		},
		{
			id: 4,
			text: "邀请新用户",
			time: "2024-05-21 00:00",
			count: 5,
			type: "+"
		},
		{
			id: 5,
			text: "商品兑换",
			time: "2024-05-21 00:00",
			count: 200,
			type: "-"
		},
	]);
</script>

<style scoped>
	:deep(.uni-nav-bar-text.data-v-26544265) {
		font-size: 36rpx;
		font-weight: 600;
	}

	:deep(.uni-icons) {
		font-family: uniicons;
		text-decoration: none;
		text-align: center;
		width: 31rpx;
		height: 44rpx;
		line-height: 44rpx;
	}


	.content {
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 24rpx;
	}

	.uni-list {
		height: 92rpx;
	}

	.uni-list>text {
		display: block;
	}

	.uni-list>text:first-child {
		font-weight: 400;
		height: 28rpx;
		font-size: 28rpx;
		text-align: left;
		color: #000000;
	}

	.uni-list-bottom-text {
		font-weight: 400;
		width: 201rpx;
		height: 19rpx;
		font-size: 24rpx;
		text-align: left;
		color: #999999;
		margin-top: 14rpx;
	}

	.uni-list-right-add {
		float: right;
		justify-content: flex-start;
		color: #F99B46;
		font-size: 30 rpx;
	}

	.uni-list-right-remove {
		float: right;
		justify-content: flex-start;
		color: #FA3939;
		font-size: 30 rpx;
	}

	.uni-list--border-bottom {
		height: 4rpx;
		border-radius: 2px 2px 2px 2px;
		background: #eeeeee;
		margin-top: 32rpx;
	}
</style>