cgst/pages/shop/product.vue

<template>
	<view class="center">
		<view class="top"><image src="https://cgst.liuniu946.com/image//shop-bg.png" mode=""></image></view>
		<view class="main-box">
			<view class="yuyue-item" v-for="(item, index) in list">
				<view class="share" v-if="index <= 2">
					<image class="share-img" v-if="index == 0" src="../../static/img/shop-product1.png" mode=""></image>
					<image class="share-img" v-if="index == 1" src="../../static/img/shop-product2.png" mode=""></image>
					<image class="share-img" v-if="index == 2" src="../../static/img/shop-product3.png" mode=""></image>
					<view class="share-font1" v-if="index == 0">NO.1</view>
					<view class="share-font2" v-if="index == 1">NO.2</view>
					<view class="share-font3" v-if="index == 2">NO.3</view>
				</view>
				<view class="yuyue-item-left">
					<view class="yuyue-item-left-bg"><image src="../../static/img/index-bg.png" mode=""></image></view>
					<image class="yuyue-item-left-image" :src="item.image" mode=""></image>
				</view>
				<view class="yuyue-item-right">
					<view class="yuyue-item-title clamp2">{{ item.store_name }}</view>
					<view class="yuyue-item-bottom-box">
						<view class="yuyue-item-price">￥{{ item.price }}</view>
						<view class="yuyue-item-btn">
							销量:
							<text>{{ item.sales }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
import { product } from '@/api/info.js';
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad(option) {
		this.loadData();
	},
	methods: {
		loadData() {
			loadIndexs({}).then(({ data }) => {
				this.carouselList = data.banner;
			});
			product({ page: 1, limit: 1000 }).then(({ data }) => {
				this.list = data.list;
			});
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	min-height: 100%;
	height: auto;
}
.top {
	width: 750rpx;
	height: 414rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.main-box {
	position: relative;
	z-index: 2;
	background: #ffffff;
	width: 750rpx;
	border-radius: 20rpx;
	padding-top: 38rpx;
	margin-top: -20rpx;
}
.yuyue-item {
	width: 710rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 10rpx;
	margin: 20rpx auto 0;
	padding: 20rpx 30rpx 20rpx 14rpx;
	position: relative;
	display: flex;
	justify-content: flex-start;
	.share {
		position: absolute;
		top: 0;
		right: 30rpx;
		line-height: 1;
		.share-img {
			width: 45rpx;
			height: 48rpx;
		}
		.share-font1 {
			margin-top: 8rpx;
			font-size: 21rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffa700;
		}
		.share-font2 {
			margin-top: 8rpx;
			font-size: 21rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #b5b5b4;
		}
		.share-font3 {
			margin-top: 8rpx;
			font-size: 21rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #e4865b;
		}
	}
	.yuyue-item-left {
		position: relative;
		.yuyue-item-left-bg {
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			left: 0;
			width: 236rpx;
			height: 236rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.yuyue-item-left-image {
			width: 236rpx;
			height: 236rpx;
		}
	}
	.yuyue-item-right {
		margin-left: 22rpx;
		padding: 10rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		.yuyue-item-title {
			width: 320rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.yuyue-item-bottom-box {
			display: flex;
			justify-content: space-between;
			.yuyue-item-price {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ff4c4c;
			}
			.yuyue-item-btn {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				text {
					color: #ff4c4c;
				}
			}
		}
	}
}
</style>