wx-qhb/pages/shopping/shopping.vue

<template>
	<!-- 十元购 -->
	<view style="position: relative;">
		<view class="back" style="z-index: -1;">
		</view>
		<u-navbar bgColor="#FE2E2E" :safeAreaInsetTop="true" :placeholder='true'>
			<view class="u-nav-slot" slot="left">
				<image src="../../static/shopping/title.png" style="width: 390rpx;height: 48rpx;" mode=""></image>
			</view>
		</u-navbar>
		<view class="input u-flex u-row-between" style="margin-top: 16rpx;">
			<view class="u-flex">
				<image src="../../static/shopping/search.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
				<input type="text" placeholder="请输入商品名称搜索" style="width: 500rpx;margin-left: 14rpx;" />
			</view>
			<view class="search">搜索</view>
		</view>
		<view class="content">
			<view class="">
				<u-tabs lineColor="#f56c6c" :activeStyle="{
            color: 'rgba(248, 53, 39, 1)',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :list="list1" @click="click"></u-tabs>
			</view>
			<view class="u-flex u-row-between" style="margin-top: 24rpx;flex-wrap: wrap;">
				<view class="item" v-for="(item,idx) in 6" :key="idx" style="margin-bottom: 20rpx;">
					<image src="/static/images/logo.png" style="width: 340rpx;height: 340rpx;" mode=""></image>
					<view class="" style="padding: 20rpx;box-sizing: border-box;">
						<text class="title">可心柔 V9系列婴儿保wadhbiuawd</text>
						<view class="u-flex" style="margin-top: 12rpx;flex-wrap: wrap;column-gap: 12rpx;">
							<view class="tabsa" v-for="(item,index) in 3">
								{{i18n.orderpaysforitself}}
							</view>
						</view>
						<view class="num">
							{{i18n.Soldout}}5000+{{i18n.piece}}
						</view>
						<view class="" style="margin-top: 16rpx;position: relative;">
							<image src="/static/shopping/btn.png"
								style="width: 300rpx;height: 68rpx;position: absolute;top:0;left:0;" mode=""></image>
							<view class="u-flex u-row-between"
								style="padding:10rpx 20rpx 0 26rpx;width: 85%;position: relative;z-index: 1;">
								<view class="" style="margin-top: 10rpx;">
									<text class="money">¥</text>
									<text class="money" style="font-size: 40rpx;">13.2</text>
								</view>
								<image src="../../static/shopping/shop.png" style="width: 82rpx;height: 38rpx;" mode="">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="" style="height: 80rpx;"></view> -->
		<view class="" style="height: 160rpx;"></view>
		<kj-tabbar :value1=2></kj-tabbar>
	</view>
</template>

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

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		// height: 1332rpx;
		background: linear-gradient(180deg, #FDFCFB 0%, #F4F4F4 100%);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: 32rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.item {
			width: 340rpx;
			height: 592rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #222222;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				display: block;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.tabsa {
				// width: 96rpx;
				// height: 32rpx;
				margin-top: 10rpx;
				border-radius: 4rpx;
				border: 1rpx solid #ED0909;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #ED0909;
				// line-height: 32rpx;
				text-align: center;
				font-style: normal;
				display: inline;
				padding: 0 4rpx;
				box-sizing: border-box;
			}

			.num {
				font-family: SFPro, SFPro;
				font-weight: 400;
				font-size: 20rpx;
				color: #555555;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
				margin-top: 16rpx;
			}

			.money {
				font-family: HarmonyOS_Sans_Medium;
				font-size: 20rpx;
				color: #F83224;
				line-height: 26rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.back {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 800rpx;
		background: #FE2E2E;
	}

	.input {
		width: 702rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		margin-left: 24rpx;
		box-sizing: border-box;
		padding: 0 8rpx 0 24rpx;

		.search {
			width: 100rpx;
			height: 56rpx;
			background: #F83224;
			border-radius: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
			font-style: normal;
		}
	}
</style>