jiangchengfeiyi-xiaochengxu/pages/store-home/main/main.vue

<template>
	<view class="flex-col page">
		<view class="flex-col">
			<view class="flex-row items-center section">
				<text class="text">商品</text>
				<view class="flex-row section_2 ml-15">
					<image class="image"
						src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=348b14e68c9ce02a3b9fe870f131c4c7.png" />
					<input class="text-wrapper ml-2" placeholder="请输入想要搜索的商品" />
				</view>
			</view>
			<view class="flex-col justify-start items-center image-wrapper mt-3">
				<image class="shrink-0 image_2"
					src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=bf3dfe8c3d572943e00870d83c40b20c.png" />
			</view>
		</view>
		<view class="flex-row relative group">
			<view class="shrink-0 section_3"></view>
			<view class="flex-col shrink-0 group_1 pos_5">
				<view class="flex-col items-center section_6 list-item_1 mt-4" v-for="(item, index) in sort"
					:key="index">
					<image class="image_3" :src="item.imgurl" />
					<text class="font_3 text_5 mt-3">{{ item.name }}</text>
				</view>
			</view>
			<view class="flex-col justify-start flex-1 relative section_4">
				<view class="flex-col items-start section_5">
					<text class="font_2 text_3">材料包</text>
					<text class="font text_4 mt-6">提供材料自行DIY</text>
				</view>
				<view class="flex-col shrink-0 pos">
					<!-- <scroll-view style="height: 1000rpx;" scroll-y="true"> -->
						<view class="flex-row list-item mt-5" v-for="(item, index) in product_list" :key="index">
							
							<image class="self-center image_4" :src="item.imgurl" />
							<view class="flex-col items-start self-center group_5">
								<text class="font_2">{{ item.product_name }}</text>
								<text class="font mt-13">{{ item.detail }}</text>
								<text class="font_4 text_7 mt-13">￥{{ item.value }}</text>
							</view> 
							<image class="self-start image_5"
								src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=806f54ff88b61d172a611e704c80a85c.png" />
						
						</view>
					<!-- </scroll-view> -->
				</view>
			</view>
			<!-- <view class="flex-col shrink-0 pos">
				<scroll-view style="height: 1000rpx;" scroll-y="true">
					<view class="flex-row list-item mt-5" v-for="(item, index) in product_list" :key="index">
						<image class="self-center image_4" :src="item.imgurl" />
						<view class="flex-col items-start self-center group_5">
							<text class="font_2">{{ item.product_name }}</text>
							<text class="font mt-13">{{ item.detail }}</text>
							<text class="font_4 text_7 mt-13">￥{{ item.value }}</text>
						</view> 
						<image class="self-start image_5"
							src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=806f54ff88b61d172a611e704c80a85c.png" />
					</view>
				</scroll-view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import img1 from '@/pages/store-home/main/img/cailiaobao.png';
	import img2 from '@/pages/store-home/main/img/shouchiwu.png';
	import img3 from '@/pages/store-home/main/img/toushi.png';
	import img4 from '@/pages/store-home/main/img/dingzhi.png';
	import img5 from '@/pages/store-home/main/img/jifenduihuan.png';
	import product_img from '@/pages/store-home/main/img/shangpingtupian.png';
	const sort = ref([{
			name: "材料包",
			imgurl: img1
		},
		{
			name: "手持物",
			imgurl: img2
		},
		{
			name: "头饰",
			imgurl: img3
		},
		{
			name: "定制",
			imgurl: img4
		},
		{
			name: "积分商城",
			imgurl: img5
		}
	])
	const product_list = ref([{
			product_name: "琉璃发簪体验包",
			detail: "非遗材料包，匠心独运",
			value: "750",
			imgurl: product_img
		},
		{
			product_name: "琉璃发簪体验包",
			detail: "非遗材料包，匠心独运",
			value: "750",
			imgurl: product_img
		},
		{
			product_name: "琉璃发簪体验包",
			detail: "非遗材料包，匠心独运",
			value: "750",
			imgurl: product_img
		},
		{
			product_name: "琉璃发簪体验包",
			detail: "非遗材料包，匠心独运",
			value: "750",
			imgurl: product_img
		},
		{
			product_name: "琉璃发簪体验包",
			detail: "非遗材料包，匠心独运",
			value: "750",
			imgurl: product_img
		},
		{
			product_name: "琉璃发簪体验包",
			detail: "非遗材料包，匠心独运",
			value: "750",
			imgurl: product_img
		},
		{
			product_name: "琉璃发簪体验包",
			detail: "非遗材料包，匠心独运",
			value: "750",
			imgurl: product_img
		},
		{
			product_name: "琉璃发簪体验包",
			detail: "非遗材料包，匠心独运",
			value: "750",
			imgurl: product_img
		}
	])
	const product_type = [{
		type: "材料包",
		detail: "提供材料自行DIY"
	}]
</script>

<style lang="scss" scoped>
	.ml-15 {
		margin-left: 28.13rpx;
	}

	.mt-3 {
		margin-top: 5.63rpx;
	}

	.mt-5 {
		margin-top: 9.38rpx;
	}

	.mt-13 {
		margin-top: 24.38rpx;
	}

	.page {
		background-color: #f5f5dc;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 22.5rpx 39.28rpx 16.88rpx;
		background-color: #f7de98;
	}

	.text {
		color: #c1651a;
		font-size: 37.5rpx;
		font-family: STFangsong;
		line-height: 36.19rpx;
	}

	.section_2 {
		padding: 7.5rpx 30.43rpx;
		background-color: #ffffff;
		border-radius: 28.13rpx;
		height: 63.75rpx;
	}

	.image {
		width: 48.75rpx;
		height: 48.75rpx;
	}

	.text-wrapper {
		margin-right: 5.31rpx;
	}

	.image-wrapper {
		margin-left: 22.5rpx;
		margin-right: 24.38rpx;
		background-color: #ffffff;
		border-radius: 28.13rpx;
		overflow: hidden;
		border: solid 9.38rpx #ffffff;
	}

	.image_2 {
		width: 91.25vw;
		height: 37.5vw;
	}

	.group {
		position: relative;
		
		border: 3px solid brown;
		margin-top: 22.5rpx;
		// height: 1000rpx;
	}

	.section_3 {
		background-color: #FFFEF8;
		width: 151.88rpx;
		// height: 1156.88rpx;
	}

	.group_1 {
		width: 142.5rpx;
	}

	.pos_5 {
		position: absolute;
		left: 5.63rpx;
		top: 5.63rpx;
	}

	.section_6 {
		padding: 11.25rpx 0 9.94rpx;
		background-color: #fffef8;
		border-radius: 9.38rpx;
	}

	.list-item_1:first-child {
		margin-top: 0;
	}

	.image_3 {
		border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
		width: 48.75rpx;
		height: 48.75rpx;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: STFangsong;
		line-height: 28.65rpx;
		color: #c1651a;
	}

	.text_5 {
		line-height: 28.26rpx;
	}

	.section_4 {
		border: 3px solid blue;
		overflow: auto;
		margin-right: 7.5rpx;
		padding-bottom: 790.13rpx;
		background-color: #f8e8c1;
		border-radius: 0rpx 18.75rpx 0rpx 0rpx;
		// height: 760.88rpx;
	}

	.section_5 {
		padding: 18.06rpx 16.24rpx 14.94rpx;
		background-color: #C1651A;
		
		border-radius: 0rpx 18.75rpx 0rpx 0rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: STFangsong;
		line-height: 28.65rpx;
		color: #000000;
	}

	.text_3 {
		line-height: 28.26rpx;
	}

	.font {
		font-size: 22.5rpx;
		font-family: STFangsong;
		line-height: 21.56rpx;
		color: #727272;
	}

	.text_4 {
		line-height: 21.15rpx;
	}

	.pos {
		position: absolute;
		border: 3px solid red;
		// height: 500rpx;
		right: 15rpx;
		top: 99.38rpx;
	}

	.list-item {
		padding: 20.63rpx 27.88rpx 22.5rpx;
		background-color: #fffef8;
		border-radius: 9.38rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.image_4 {
		border-radius: 9.38rpx;
		width: 131.25rpx;
		height: 131.25rpx;
	}

	.group_5 {
		margin-left: 24.84rpx;
	}

	.font_4 {
		font-size: 26.25rpx;
		font-family: STFangsong;
		line-height: 18rpx;
		color: #ff0000;
	}

	.text_7 {
		-webkit-text-stroke: 1.88rpx #ff000040;
	}

	.image_5 {
		margin: 75rpx 3.77rpx 0 96.71rpx;
		border-radius: 9.38rpx;
		width: 56.25rpx;
		height: 56.25rpx;
	}

	@import url(../../../common/css/global.css);
</style>