point-app/pagesHome/market/sort.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<input type="text" placeholder="寻找您喜爱的商品" @tap="toCommon('pagesHome/market/search')" placeholder-class="placss">
			</view>
			<view class="two">
				<view class="two_1">
					<view class="list" v-for="(item,index) in typeList" :key="index">
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="two_2">
					<view class="marketList" v-for="(tag,indexs) in marketList" :key="indexs">
						<view class="title">
							{{tag.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				active: '0',
				typeList: [ //商品分类
					{
						name: '休闲食品'
					},
					{
						name: '进口食品'
					},
					{
						name: '粮油调味'
					},
					{
						name: '酒饮冲调'
					},
					{
						name: '时令水果'
					},
					{
						name: '品质生鲜'
					},
					{
						name: '居家用品'
					},
					{
						name: '个护清洁'
					},
					{
						name: '3C产品'
					},
					{
						name: '母婴玩具'
					},
					{
						name: '服饰配件'
					},
					{
						name: '礼卡专区'
					},
					{
						name: '植物饮食'
					}
				],
				marketList: [ //产品列表
					{
						name: '坚果炒货'

					},
					{
						name: '坚果炒货'
					}
				]
			};
		},
		onShow: function() {},
		methods: {

		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			border-bottom: 1px solid var(--f85Color);
			padding: 2vw;

			input {
				padding: 2vw;
				background-color: var(--f1Color);
				font-size: var(--font14Size);
				border-radius: 5px;
			}
		}

		.two {
			position: relative;
			flex-grow: 1;
			display: flex;
			flex-direction: row;

			.two_1 {
				width: 25vw;
				height: 91vh;
				background-color: #FAFAFA;

				.list {
					text-align: center;
					padding: 2.5vw 0;
					border-bottom: 1px solid #ff0000;

					text {
						font-size: 14px;
					}
				}
			}

			.two_2 {
				width: 75vw;
				border: 1px solid #0000ff;

				// .marketList {
				// 	.title {
				// 		font-size: 16px;
				// 		margin: 0 0 2vw 0;
				// 	}

				// 	.market {
				// 		display: flex;
				// 		flex-direction: row;
				// 		justify-content: space-around;
				// 		flex-wrap: wrap;

				// 		.list {
				// 			text-align: center;

				// 			.image {
				// 				width: 10vw;
				// 				height: 10vw;
				// 			}

				// 			.name {
				// 				font-size: 14px;
				// 			}
				// 		}
				// 	}
				// }
			}

		}
	}
</style>