talk_appAmin/pages/common/exchange/index.vue

<!-- 兑换商城 -->
<template class="content">
	<view class="cp">
		<view class="view-content" v-for="(item,index) in arr" :key="index">
			<view class="content-main">
				<view class="content-image">
					<image :src="item.src"></image>
				</view>
				<view class="content-text">
					<view class="text1">
						{{item.content}}
					</view>
					<view class="text-flex">

						<view class="text2">
							兑换所需
						</view>

						<view class="text3">
							<image src="../../static/images/sign/1.png"></image>
							<text>{{item.count}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";

	const count = ref("750");

	let arr = reactive([{
			id: 1,
			src: "https://cbu01.alicdn.com/img/ibank/2019/524/629/11890926425_297889188.jpg",
			content: "[端午礼盒] 西凤酒52度头曲礼盒 陕西凤香型白酒礼11111111111",
			count: 700
		},
		{
			id: 2,
			src: "https://cbu01.alicdn.com/img/ibank/2016/442/823/3216328244_1451018438.jpg",
			content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
			count: 200
		},
		{
			id: 3,
			src: "https://ts1.cn.mm.bing.net/th/id/R-C.2bcea282254788c581f0a18f47efb5f8?rik=rcZeIVRgTcWUkQ&riu=http%3a%2f%2fhimg2.huanqiu.com%2fattachment2010%2f2019%2f0429%2f10%2f58%2f20190429105829589.jpg&ehk=HCIAZrOId0EVKf%2bFyNg7cgff6Cg8WLUCNHpaDgwi1ng%3d&risl=&pid=ImgRaw&r=0",
			content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
			count: 500
		},
		{
			id: 3,
			src: "https://ts1.cn.mm.bing.net/th/id/R-C.2bcea282254788c581f0a18f47efb5f8?rik=rcZeIVRgTcWUkQ&riu=http%3a%2f%2fhimg2.huanqiu.com%2fattachment2010%2f2019%2f0429%2f10%2f58%2f20190429105829589.jpg&ehk=HCIAZrOId0EVKf%2bFyNg7cgff6Cg8WLUCNHpaDgwi1ng%3d&risl=&pid=ImgRaw&r=0",
			content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
			count: 500
		},
		{
			id: 3,
			src: "https://ts1.cn.mm.bing.net/th/id/R-C.2bcea282254788c581f0a18f47efb5f8?rik=rcZeIVRgTcWUkQ&riu=http%3a%2f%2fhimg2.huanqiu.com%2fattachment2010%2f2019%2f0429%2f10%2f58%2f20190429105829589.jpg&ehk=HCIAZrOId0EVKf%2bFyNg7cgff6Cg8WLUCNHpaDgwi1ng%3d&risl=&pid=ImgRaw&r=0",
			content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
			count: 500
		},
		{
			id: 3,
			src: "https://ts1.cn.mm.bing.net/th/id/R-C.2bcea282254788c581f0a18f47efb5f8?rik=rcZeIVRgTcWUkQ&riu=http%3a%2f%2fhimg2.huanqiu.com%2fattachment2010%2f2019%2f0429%2f10%2f58%2f20190429105829589.jpg&ehk=HCIAZrOId0EVKf%2bFyNg7cgff6Cg8WLUCNHpaDgwi1ng%3d&risl=&pid=ImgRaw&r=0",
			content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
			count: 500
		},
		{
			id: 3,
			src: "https://ts1.cn.mm.bing.net/th/id/R-C.2bcea282254788c581f0a18f47efb5f8?rik=rcZeIVRgTcWUkQ&riu=http%3a%2f%2fhimg2.huanqiu.com%2fattachment2010%2f2019%2f0429%2f10%2f58%2f20190429105829589.jpg&ehk=HCIAZrOId0EVKf%2bFyNg7cgff6Cg8WLUCNHpaDgwi1ng%3d&risl=&pid=ImgRaw&r=0",
			content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
			count: 500
		},
	]);

	function return_left() {
		console.log("返回事件")
	}
</script>

<style>
	.content {
		background: #faf9fa;
	}

	.view-top {
		/* height: 100rpx; */
	}

	.view-top-rigth-text {
		margin-top: 24rpx;
		margin-left: 479rpx;
		margin-right: 32rpx;
	}

	.view-top-rigth-text>text {
		font-weight: Regular;
		width: 239rpx;
		height: 31rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
	}


	.cp {
		display: grid;
		grid-template-columns: auto auto;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 23rpx;
		grid-column-gap: 26rpx;
		grid-row-gap: 24rpx;
	}

	.view-content {
		width: 330rpx;
		height: 482rpx;
		box-sizing: border-box;
	}

	.content-main {
		width: 330rpx;
		height: 482rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #ffffff;
	}

	.content-image>image {
		width: 330rpx;
		height: 330rpx;
		border-radius: 24rpx 24rpx 0 0;
		display: block;
	}

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

	.text1 {
		font-weight: Regular;
		width: 266rpx;
		height: 54rpx;
		line-height: 27rpx;
		font-size: 22rpx;
		text-align: left;
		color: #000000;

		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

	}

	.text-flex {
		margin-top: 28rpx;
		width: 330rpx;
		height: 20rpx;
	}

	.text2 {
		font-weight: Regular;
		width: 100rpx;
		height: 20rpx;
		font-size: 20rpx;
		text-align: left;
		color: #999999;
		line-height: 20rpx;
		align-items: center;
		float: left;
	}

	.text3 {
		float: right;
		margin-right: 24rpx;
		line-height: 19rpx;
	}

	.text3>image {
		width: 21rpx;
		height: 21rpx;
	}

	.text3>text {
		font-weight: Regular;
		width: 41rpx;
		height: 19rpx;
		font-size: 24rpx;
		text-align: left;
		color: #f99b46;
		padding: 1rpx;
		margin-left: 8rpx;
	}
</style>