duck/pages/product/pointsExchange.vue

<template>
	<view class="exchange-wrapper">
		<view class="exgood-wrapper">
			<view class="ex-img-wrapper"><image src="../../static/img/ex1.jpg" mode=""></image></view>
			<view class="exgood-title">湿热肝上火气肺痰煲湿热肝上火气肺痰煲</view>
			<view class="ex-addr">
				<image src="../../static/img/shop.png" mode="" class="name-img"></image>
				子臣台州旗舰店
				<image src="../../static/img/point.png" mode="" class="point-img"></image>
				200m
			</view>
			<view class="ex-price">
				￥26+20
				<text class="tx1">积分</text>
				<text class="tx2">￥99</text>
			</view>
		</view>
		<view class="exgood-wrapper">
			<view class="ex-img-wrapper"><image src="../../static/img/ex1.jpg" mode=""></image></view>
			<view class="exgood-title">湿热肝上火气肺痰煲湿热肝上火气肺痰煲</view>
			<view class="ex-addr">
				<image src="../../static/img/shop.png" mode="" class="name-img"></image>
				子臣台州旗舰店
				<image src="../../static/img/point.png" mode="" class="point-img"></image>
				200m
			</view>
			<view class="ex-price">
				￥26+20
				<text class="tx1">积分</text>
				<text class="tx2">￥99</text>
			</view>
		</view>
		<view class="exgood-wrapper">
			<view class="ex-img-wrapper"><image src="../../static/img/ex1.jpg" mode=""></image></view>
			<view class="exgood-title">湿热肝上火气肺痰煲湿热肝上火气肺痰煲</view>
			<view class="ex-addr">
				<image src="../../static/img/shop.png" mode="" class="name-img"></image>
				子臣台州旗舰店
				<image src="../../static/img/point.png" mode="" class="point-img"></image>
				200m
			</view>
			<view class="ex-price">
				￥26+20
				<text class="tx1">积分</text>
				<text class="tx2">￥99</text>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.exchange-wrapper {
		// background-color: #fff;
		width: 696rpx;
		// height: 100rpx;
		margin: 28rpx auto 39rpx;
		// padding: 0 27rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		flex-wrap: wrap;
		.exgood-wrapper {
			width: 342rpx;
			height: 540rpx;
			box-shadow: 0px 4px 18px 0px rgba(144, 27, 33, 0.13);
			margin-bottom: 20rpx;
			.ex-img-wrapper {
				width: 342rpx;
				height: 338rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.exgood-title {
				margin-top: 33rpx;
				padding-left: 21rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.ex-addr {
				margin-top: 16rpx;
				padding-left: 22rpx;
				height: 22rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #dcb876;
				image {
					height: 22rpx;
				}
				.name-img {
					width: 26rpx;
					margin: 0 4rpx -3rpx 0;
				}
				.point-img {
					width: 16rpx;
					margin: 0 4rpx -3rpx 14rpx;
				}
			}
			.ex-price {
				margin-top: 17rpx;
				padding-left: 22rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #901b21;
				vertical-align: bottom;
				.tx1 {
					font-size: 24rpx;
					vertical-align: baseline;
					position: relative;
					top: -2rpx;
				}
				.tx2 {
					margin-left: 9rpx;
					font-size: 26rpx;
					font-weight: 500;
					text-decoration: line-through;
					color: #9d9d9d;
					line-height: 35rpx;
				}
			}
			.bg {
				position: absolute;
				top: 0;
				width: 342rpx;
				height: 540rpx;
				background-image: url(../../static/img/bg3.png);
				background-size: 100% 100%;
			}
		}
	}
	
</style>