wx-fensisiyu/pageA/commodity.vue

<template>
	<view>
		<view class="index-navbar">
			<view class="" style="position: relative;width: 750rpx;height: 570rpx">
				<image class="index-bg" src="static/images/shangpin.png" mode=""></image>
				<u-navbar title-color='#fff' title-width='300' title='商品详情' :is-back="true" :border-bottom="false"
					:background="{background:'rgba(0,0,0,0)'}" :isFixed="true"></u-navbar>
			</view>
		</view>
		<view class="" style="margin-top: 20rpx;padding: 10rpx 24rpx;">
			<view class="title">
				透真海洋极地提取物水乳两件套补水保湿提亮肤色
			</view>
			<view class="u-flex u-row-between">
				<view class="u-flex">
					<text class="fu" style="font-size: 32rpx;">￥</text>
					<text class="money">919.00</text>
					<text class="fu">+</text>
					<text class="money">300</text>
					<text class="fu" style="margin-left: 6rpx;">积分</text>
				</view>
				<text class="fen">已兑换612件</text>
			</view>
			<view class="u-flex u-row-between" style="margin-top: 26rpx;">
				<text class="pingjia">用户评价</text>
				<view class="u-flex">
					<text class="all" style="margin-right: 18rpx;">全部</text>
					<u-icon name="arrow-right" color: #9D9BA7; size="14"></u-icon>
				</view>
			</view>
			<view class="ping" style="margin-top: 20rpx;">
				<view class="u-flex">
					<image class="image" src="" mode=""></image>
					<view class="">
						<text class="name">乔治的晚餐</text>
					</view>
				</view>
				<view class="concent">
					补水效果很好，我是敏感肌没有出现刺痛发痒症状一切，吸收很快我很喜欢，还会回购的。
				</view>
			</view>
		</view>
		<view class="info">
			商品详情
		</view>
		<view class="" style="height: 134rpx;"></view>
		<view class="bottom u-flex u-row-center" @click="submit">
			<view class="duihuan">立即兑换</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			submit(){
				uni.navigateTo({
					url:'/pageA/submit'
				})
			}
		}
	}
</script>

<style lang="scss">
	.fen {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #C2C2C2;
	}

	.all {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #9D9BA7;
	}

	.pingjia {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
		color: #111111;
	}

	.concent {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #9D9CA1;
	}

	.name {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
		color: #111111;
	}

	.ping {
		width: 702rpx;
		height: 210rpx;
		background: rgba(247, 246, 251, 1);
		border-radius: 8rpx;
		padding: 22rpx 28rpx;
	}

	.image {
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
	}

	.duihuan {
		width: 702rpx;
		height: 90rpx;
		background: rgba(143, 211, 243, 1);
		border-radius: 46rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 90rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.bottom {
		width: 750rpx;
		height: 134rpx;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.fu {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 105rpx;
		color: #F64016;
	}

	.money {
		font-size: 44rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		line-height: 42rpx;
		color: #F64016;
	}

	.title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 60rpx;
		color: #111111;
	}

	.info {
		width: 750rpx;
		height: 76rpx;
		background-color: #F8F8F8;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 76rpx;
		color: #111111;
		text-align: center;
	}

	.index-bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 750rpx;
		height: 100%;
	}
</style>