1

common/css/font-icon.css

@@ -2,9 +2,9 @@
   font-family: "iconfont"; /* Project id 3674157 */
   /* Color fonts */
   src: 
-       url('//at.alicdn.com/t/c/font_3674157_4egmlcp9c8w.woff2?t=1664261897033') format('woff2'),
-       url('//at.alicdn.com/t/c/font_3674157_4egmlcp9c8w.woff?t=1664261897033') format('woff'),
-       url('//at.alicdn.com/t/c/font_3674157_4egmlcp9c8w.ttf?t=1664261897033') format('truetype');
+       url('//at.alicdn.com/t/c/font_3674157_g66ibypnxco.woff2?t=1664268545368') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3674157_g66ibypnxco.woff?t=1664268545368') format('woff'),
+       url('//at.alicdn.com/t/c/font_3674157_g66ibypnxco.ttf?t=1664268545368') format('truetype');
 }
 
 .iconfont {
@@ -15,6 +15,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shangjiantou:before {
+  content: "\e603";
+}
+
+.icon-xiajiantou:before {
+  content: "\e604";
+}
+
+.icon-shangjiantou-copy:before {
+  content: "\e714";
+}
+
+.icon-xiajiantou-copy:before {
+  content: "\e715";
+}
+
 .icon-del:before {
   content: "\e616";
 }
@@ -54,4 +70,3 @@
 .icon-daipinglun:before {
   content: "\e602";
 }
-

pagesHome/market/search.vue

@@ -8,17 +8,20 @@
 				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
 					<view class="list-scroll-view">
 						<view class="two_1">
-							<view class="cond_1">
-								默认
-							</view>
-							<view class="cond_1">
-								默认
-							</view>
-							<view class="cond_1">
-								默认
-							</view>
-							<view class="cond_1">
-								默认
+							<view :class="['list',condActive==index?'activeList':'']" v-for="(item,index) in condList" :key="index" @tap="toCond(index,item)">
+								<view class="name">
+									{{item.name}}
+								</view>
+								<view class="icon">
+									<view class="icon_1">
+										<text :class="['iconfont',item.shangActive]" v-if="condActive==index&&shang==true"></text>
+										<text :class="['iconfont',item.shang]" v-else></text>
+									</view>
+									<view class="icon_1">
+										<text :class="['iconfont', item.xiaActive]" v-if="condActive==index&&xia==true"></text>
+										<text :class="['iconfont', item.xia]" v-else></text>
+									</view>
+								</view>
 							</view>
 						</view>
 						<view class="two_2">
@@ -72,6 +75,35 @@
 						money: '10.00',
 						is_sale: true
 					},
+				],
+				condActive: 0,
+				shang: false,
+				xia: false,
+				condList: [ // 筛选
+					{
+						name: '默认',
+					},
+					{
+						name: '销量',
+						shang: 'icon-shangjiantou',
+						shangActive: 'icon-shangjiantou-copy',
+						xia: 'icon-xiajiantou',
+						xiaActive: 'icon-xiajiantou-copy'
+					},
+					{
+						name: '价格',
+						shang: 'icon-shangjiantou',
+						shangActive: 'icon-shangjiantou-copy',
+						xia: 'icon-xiajiantou',
+						xiaActive: 'icon-xiajiantou-copy'
+					},
+					{
+						name: '浏览量',
+						shang: 'icon-shangjiantou',
+						shangActive: 'icon-shangjiantou-copy',
+						xia: 'icon-xiajiantou',
+						xiaActive: 'icon-xiajiantou-copy'
+					}
 				]
 			};
 		},
@@ -85,6 +117,18 @@
 			toInput(e) {
 				const that = this;
 				that.$set(that.searchInfo, `name`, e.detail.value)
+			},
+			// 筛选
+			toCond(index, e) {
+				const that = this;
+				that.$set(that, `condActive`, index);
+				if (that.xia == false) {
+					that.$set(that, `shang`, false);
+					that.$set(that, `xia`, true);
+				} else if (that.xia == true) {
+					that.$set(that, `shang`, true);
+					that.$set(that, `xia`, false);
+				}
 			}
 		}
 	}
@@ -118,6 +162,33 @@
 				padding: 2vw;
 				display: flex;
 				flex-direction: row;
+				justify-content: space-around;
+
+				.list {
+					display: flex;
+					flex-direction: row;
+
+					.icon {
+						position: relative;
+						top: -5px;
+						left: 2px;
+
+						.icon_1 {
+							height: 10px;
+
+							.iconfont {
+								font-size: 12px;
+							}
+						}
+					}
+				}
+
+				.activeList {
+					.name {
+						color: #ff0000;
+					}
+
+				}
 			}
 
 			.two_2 {
@@ -188,6 +259,8 @@
 				.list:nth-child(2n) {
 					margin: 0 0 2vw 0;
 				}
+
+
 			}
 		}
 	}