wx-qhb/pageA/subsidy.vue

<template>
	<!-- 百万补贴 -->
	<view style="position: relative;">
		<image src="static/images/back.png"
			style="width: 750rpx;height: 468rpx;position: absolute;top: 0;left: 0;z-index: -1;" mode=""></image>
		<u-navbar :autoBack='true' :safeAreaInsetTop="true" bgColor="rgba(0,0,0,0)" :placeholder='true'>
			<view class="u-nav-slot u-flex" slot="left">
				<u-icon name="arrow-left" size="19" color='rgba(253, 252, 251, 1)'></u-icon>
				<view class="input">
					<u-icon name="search" color="rgba(153, 153, 153, 1)" size="32"></u-icon>
					<input type="text" :placeholder="Pleaseproductname" />
				</view>
			</view>
		</u-navbar>
		<!-- 标签 -->
		<view class=" u-row-center" style="margin-top: 52rpx;display: flex;flex-direction: column;align-items: center;">
			<image v-if="show==1" src="static/images/img1.png" style="width: 484rpx;height: 52rpx;" mode=""></image>
			<image v-if="show==2" src="static/images/img2.png" style="width: 346rpx;height: 64rpx;" mode=""></image>
			<image v-if="show==3" src="static/images/goshop.png" style="width: 382rpx;height: 52rpx;" mode=""></image>
			<!-- 			<image src="static/images/img1.png" style="width: 484rpx;height: 52rpx;" mode=""></image> -->
			<view class="biaopqian" style="margin-top: 20rpx;">
				<text>{{i18n.Goodgoods}}</text>
				<text style='margin-left:20rpx;margin-right:20rpx'>|</text>
				<text>{{i18n.Saveeverything}}</text>
				<text style='margin-left:20rpx;margin-right:20rpx'>|</text>
				<text>{{i18n.willpay}}</text>
			</view>
		</view>
		<!-- 商品 -->
		<view class="box">
			<view class="" style="margin-left: -22rpx;">
				<u-tabs :activeStyle="{
            color: 'rgba(248, 53, 39, 1)',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :list="list1" lineColor='rgba(248, 53, 39, 1)' @click="click"></u-tabs>
			</view>
			<view class="item u-flex" v-for="(child,index) in 6">
				<image src="../static/images/logo.png" style="width: 232rpx;height: 232rpx;" mode=""></image>
				<view class="u-row-between"
					style="height: 232rpx;display: flex;flex-direction: column;margin-left: 20rpx;">
					<view class="">
						<text>得宝天然无香抽取式面巾纸9…</text>
						<view class="u-flex" style="margin-top: 18rpx;column-gap: 18rpx;">
							<text class="tabs baoyou"
								style="background:rgba(248, 50, 36, 1) ;border: 2rpx solid rgba(248, 50, 36, 0);color:#FFFFFF ;">包邮</text>
							<text class="tabs" v-for="(item,idx) in 3" :key="idx">
								{{i18n.willpay}}
							</text>
						</view>
					</view>
					<view class="backimg" style="position: relative;" >
						<image src="./static/images/tab.png"
							style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 0;" mode="">
						</image>
						<view v-if="show==1" class="u-flex u-row-between"
							style="position: relative;z-index: 1;padding:0 24rpx ;text-align: center;line-height: 68rpx;">
							<view class="">
								<text class="textone">补贴价</text>
								<text class='texttwo' style="margin-left: 12rpx;">¥</text>
								<text class='texttwo' style="font-size: 40rpx;">16</text>
								<text class='texttwo'>.13</text>
							</view>
							<view class="">
								<text class="textthree">已补</text>
								<text class='textfour' style="margin-left: 8rpx;">¥</text>
								<text class='textfour' style="font-size:  28rpx;">25.8</text>
							</view>
						</view>
						<view v-if="show==2 || show==3" class="u-flex u-row-between"
							style="position: relative;z-index: 1;padding:0 24rpx ;text-align: center;line-height: 68rpx;">
							<view class="">
								<text v-if="show==2" class="textone">{{i18n.Subsidized}}</text>
								<text v-if="show==3" class="textone">包邮价</text>
								<text class='texttwo' style="margin-left: 12rpx;">¥</text>
								<text class='texttwo' style="font-size: 40rpx;">16</text>
								<text class='texttwo'>.13</text>
							</view>
							<view class="">
								<image src="static/images/qiang.png" style="width: 48rpx;height: 38rpx;" mode="">
								</image> 
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				show:1
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onLoad(options) {
			this.show = options.show
		}
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 1266rpx;
		background: #F4F4F4;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin-top: 36rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.baoyou {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
		}

		.textone {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #F83224;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
		}

		.texttwo {
			font-family: HarmonyOS_Sans_Medium;
			font-size: 24rpx;
			color: #F83224;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
		}

		.textthree {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FDFCFB;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
		}

		.textfour {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FDFCFB;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
		}

		.backimg {
			width: 418rpx;
			height: 68rpx;
		}

		.item {
			margin-top: 36rpx;
			background: #FDFCFB;
			border-radius: 16rpx;
			width: 702rpx;
			padding: 28rpx 16rpx;
			box-sizing: border-box;
			// height: 256rpx;
		}

		.tabs {
			padding: 0 8rpx;
			height: 32rpx;
			border-radius: 4rpx;
			border: 1rpx solid #E5BC78;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #D48700;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.input {
		width: 458rpx;
		height: 64rpx;
		background: #FDFCFB;
		border-radius: 36rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-left: 16rpx;
		display: flex;
		align-items: center;
	}

	.biaopqian {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}
</style>