<template>
	<view class="page">
		<view class="index-navbar">
			<view class="" style="position: relative;;">
				<view class="back"></view>
				<u-navbar :is-back='true' title-width='300' title='积分商城' :border-bottom="false"
					:background="{background:'rgba(0,0,0,0)'}" :isFixed="true"></u-navbar>
			</view>
		</view>
		<view class="" style="padding: 0 24rpx;">
			<image style="width: 702rpx;height: 340rpx;" src="" mode=""></image>
		</view>
		<view class="" style="padding: 0 38rpx;" @click="commodity">
			<view style="margin-top: 52rpx;" class="u-flex" v-for="(item,index) in 10" :key="index">
				<image style="width: 160rpx;height: 160rpx;" src="" mode=""></image>
				<view class="">
					<text class="title">透真海洋极地提取物水乳两件套补水保湿提亮肤色</text>
					<view class="u-flex u-row-between">
						<view class="">
							<text class="num">已兑换820件</text>
							<view class="u-flex">
								<text class='sumoyl'>￥</text>
								<text class="money">6.20</text>
								<text class="font">+</text>
								<text class="money">300</text>
								<text class="font" style="margin-left: 10rpx;">积分</text>
							</view>
						</view>
						<view class="button">
							立即兑换
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

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

<style lang="scss">
	.sumoyl {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 105rpx;
		color: #F64016;
	}

	.money {
		font-size: 32rpx;
		font-family: DIN;
		font-weight: bold;
		line-height: 48rpx;
		color: #F64016;
	}

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

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

	.button {
		width: 174rpx;
		height: 60rpx;
		background: linear-gradient(130deg, #B8E7FB 0%, #97D6F6 100%);
		opacity: 1;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		// line-height: 40rpx;
		color: #FFFFFF;
	}

	.page {
		// padding: 0 28rpx;
		width: 750rpx;
		min-height: 100vh;
		// background: rgba(255, 255, 255, 1);
	}

	.back {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 750rpx;
		height: 542rpx;
		// width: 702rpx;
		// height: 464rpx;
		background: linear-gradient(135deg, #CFF4FE 0%, #D5E5FF 41%, #8FCCF1 100%);
		// padding: 22rpx 19rpx;
		// margin: 66rpx 0 22rpx;
		// border-radius: 16rpx;
	}
</style>