1

pages.json

@@ -48,20 +48,8 @@
 				"navigationBarTitleText": "我的"
 			}
 		}
-
 	],
 	"subPackages": [ //分包配置
-		{
-			"root": "pagesA",
-			"pages": [ //分包一
-				// {
-				// 	"path": "adminHome/index",
-				// 	"style": {
-				// 		"navigationBarTitleText": "管理中心"
-				// 	}
-				// }
-			]
-		},
 		{
 			"root": "pagesMy",
 			"pages": [ //我的
@@ -93,6 +81,12 @@
 					"style": {
 						"navigationBarTitleText": "商品搜索"
 					}
+				},
+				{
+					"path": "market/sort",
+					"style": {
+						"navigationBarTitleText": "商品分类"
+					}
 				}
 			]
 		}

pages/home/index.vue

@@ -3,7 +3,7 @@
 		<scroll-view class="scrollView" scroll-with-animation :scroll-into-view="topItem" scroll-y="true" @scroll="handleScroll">
 			<view class="main" id="top">
 				<view class="zero one">
-					<input type="text" placeholder="搜索商品" @tap="toCommon('pagesHome/market/search')">
+					<input type="text" placeholder="搜索商品" @tap="toCommon('pagesHome/market/search')" placeholder-class="placss">
 				</view>
 				<view class="zero two">
 					<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
@@ -13,7 +13,7 @@
 					</swiper>
 				</view>
 				<view class="zero thr">
-					<view class="list" v-for="(item,index) in btnList" :key="index">
+					<view class="list" v-for="(item,index) in btnList" :key="index" @tap="toCommon(item.route)">
 						<image class="image" :src="item.url" mode=""></image>
 						<view class="textOver name">
 							{{item.name}}
@@ -83,7 +83,7 @@
 					{
 						name: '商品分类',
 						url: require('@/static/logo.png'),
-						route: ''
+						route: 'pagesHome/market/sort'
 					},
 					{
 						name: '首农专区',
@@ -278,6 +278,10 @@
 				padding: 1.5vw 0;
 			}
 
+			.placss {
+				color: var(--fffColor);
+			}
+
 		}
 
 		.two {

pagesHome/market/sort.vue

@@ -0,0 +1,123 @@
+<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>
+			</view>
+		</view>
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				typeList: [ //商品分类
+					{
+						name: '休闲食品'
+					},
+					{
+						name: '进口食品'
+					},
+					{
+						name: '粮油调味'
+					},
+					{
+						name: '酒饮冲调'
+					},
+					{
+						name: '时令水果'
+					},
+					{
+						name: '品质生鲜'
+					},
+					{
+						name: '居家用品'
+					},
+					{
+						name: '个护清洁'
+					},
+					{
+						name: '3C产品'
+					},
+					{
+						name: '母婴玩具'
+					},
+					{
+						name: '服饰配件'
+					},
+					{
+						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;
+			}
+
+		}
+	}
+</style>