家政页面样式开发

common/styles/global/pages.scss

@@ -38,4 +38,44 @@
 		}
 }
 	
-	
+/*** 家政页面***/
+.jiazheng-search-box{
+	width: 100%;box-sizing: border-box;padding: 20rpx 20rpx;position: relative;
+	display: flex;justify-content: space-between;align-items: center;
+	.jiazheng-search-right{display: flex;margin-left: auto;}
+	.all-type-list{
+		position: absolute;top: 80rpx;left: 0;right: 0;background-color: #fff;font-size: 30rpx;
+		box-sizing: border-box;padding: 0 20rpx;
+		.all-type-item{box-sizing: border-box;padding: 10rpx 0;position: relative;}
+		.all-type-active{color: #3fd2a1;}
+		.all-type-active::after{content: '';width: 30rpx;height: 30rpx;display: block;
+		position: absolute;right: 20rpx;top:50%;transform: translateY(-50%);
+		background-image: url("@/static/images/common/duihao-icon.svg");@include ezy-no-repeat-contain();
+		}
+	}
+	.select-item-box{
+		font-size: 30rpx;
+		.select-jt-default,.select-jt-click{
+			width: 16rpx;height: 16rpx;vertical-align: middle;margin-left: 10rpx;
+			background-image: url("@/static/images/common/sanjiao-shixin-icon.svg");@include ezy-no-repeat-contain();
+		}
+		.select-jt-click{transform: rotate(180deg);}
+	}
+	
+	.saixuan-item-box{
+		margin-right: 42rpx;font-size: 26rpx;color: #000;
+		text{vertical-align: middle;}
+		.saixuan-jt-default,.saixuan-jt-click{
+			width: 16rpx;height: 16rpx;vertical-align: middle;margin-left: 6rpx;@include ezy-no-repeat-cover();
+			}
+		.saixuan-jt-default{background-image: url("@/static/images/common/sanjiao-xia-icon.svg");}
+		.saixuan-jt-click{
+			background-image: url("@/static/images/common/sanjiao-shang-icon.svg");
+		}
+	}
+	.saixuan-active text{color: #3fd2a1;}
+	
+	
+	
+	.uni-icons{display: flex;align-items:center;}
+}	

pages/admin/Jiazheng/index.vue

@@ -2,25 +2,29 @@
 	<view>
 		<view class="jiazheng-uni-list">
 
-			<view>
+			<view class="jiazheng-search-box">
 
-				<view @click="clickAlltype">
-					全部类型
-				</view>
-				<view v-if="isOpen" v-for="(item,index) in allType" :key="index" @click="onSelectCell(item,index)">
-					<view class="le-dropdown-cell-active-text">{{item.label}}</view>
-					<view v-show="item.value==typeChecked" class=""></view>
-				</view>
-
-				<view>
-					更新时间
+				<view @click="clickAlltype" class="select-item-box">
+					<text>全部类型</text><icon :class="allJtClass"/>
 				</view>
-				<view>
-					录入时间
+				<view class="all-type-list">
+					<view v-if="isOpen" v-for="(item,index) in allType" :key="index" @click="onSelectCell(item,index)" class="all-type-item all-type-active">
+						<view class="le-dropdown-cell-active-text">{{item.label}}</view>
+						<view v-show="item.value==typeChecked"></view>
+					</view>
 				</view>
-				<view>
-					<view  @click="toggle('top')">搜索</view>
+				<view class="jiazheng-search-right">
+					<!--  当前点击 增加 saixuan-active-->
+					<view class="saixuan-item-box saixuan-active">
+						<text>更新时间</text><icon :class="updataJtClass"/>
+					</view>
+					<view class="saixuan-item-box">
+						<!-- class切换  saixuan-jt-default  saixuan-jt-click-->
+						<text>录入时间</text><icon :class="luruJtClass"/>
+					</view>
+					<uni-icons type="search" size="16" color="#000" @click="toggle('top')"></uni-icons>
 				</view>
+				
 			</view>
 			
 			<view>
@@ -86,13 +90,17 @@
 	let isOpen = ref(false)
 	let typeChecked = ref(1)
 	const popup = ref(null);
+	const allJtClass = 'select-jt-default';
+	const updataJtClass = 'saixuan-jt-default';
+	const luruJtClass = 'saixuan-jt-click';
 	const clickAlltype = (data) => {
 		isOpen.value = true
 	}
 	const onSelectCell = (data, index) => {
 		console.log('data', data);
 		console.log('index', index);
-		isOpen.value = false
+		isOpen.value = false;
+		allJtClass = 'select-jt-click'
 	}
 	const toggle = (data, index) => {
 		popup.value.open('top')

static/images/common/duihao-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1739945987581" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4185" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M380.342857 801.645714a53.394286 53.394286 0 0 1-36.571428-16.091428l-218.331429-217.234286a55.588571 55.588571 0 0 1 0-77.165714 54.125714 54.125714 0 0 1 76.8 0l178.102857 179.2L835.291429 272.091429a53.394286 53.394286 0 0 1 76.434285 0 54.125714 54.125714 0 0 1 0 76.8L418.742857 785.554286a54.491429 54.491429 0 0 1-38.4 16.091428z" p-id="4186" fill="#3fd2a1"></path></svg>

static/images/common/sanjiao-shang-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1739949756756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11792" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M174.673782 398.525792l4.007114-5.099965 291.426539-373.025969A52.092494 52.092494 0 0 1 511.271434 0a52.82106 52.82106 0 0 1 41.163998 20.399858L848.961935 400.711491a39.706866 39.706866 0 0 1 5.828531 20.76414 36.428317 36.428317 0 0 1-36.428317 36.428318H204.909285a36.428317 36.428317 0 0 1-36.428317-36.428318 39.342583 39.342583 0 0 1 6.192814-21.128424z" fill="#3fd2a1" p-id="11793" data-spm-anchor-id="a313x.search_index.0.i25.2a503a81P08cc4" class=""></path><path d="M174.673782 625.474208a39.342583 39.342583 0 0 1-6.192814-21.128424 36.428317 36.428317 0 0 1 36.428317-36.428317h614.18143a36.428317 36.428317 0 0 1 36.428317 36.428317 39.706866 39.706866 0 0 1-5.82853 20.764141l-297.25507 378.490217a52.82106 52.82106 0 0 1-41.163998 20.399858 52.092494 52.092494 0 0 1-41.163999-20.399858l-291.426539-373.025969-4.007114-5.099965z" fill="#dbdbdb" p-id="11794" data-spm-anchor-id="a313x.search_index.0.i22.2a503a81P08cc4" class="selected"></path></svg>

static/images/common/sanjiao-shixin-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1739949996459" class="icon" viewBox="0 0 1706 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13319" xmlns:xlink="http://www.w3.org/1999/xlink" width="79.96875" height="48"><path d="M853.333333 1024l853.333334-1024H0z" fill="#333333" p-id="13320" data-spm-anchor-id="a313x.search_index.0.i32.2a503a81P08cc4" class="selected"></path></svg>

static/images/common/sanjiao-xia-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1739949756756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11792" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M174.673782 398.525792l4.007114-5.099965 291.426539-373.025969A52.092494 52.092494 0 0 1 511.271434 0a52.82106 52.82106 0 0 1 41.163998 20.399858L848.961935 400.711491a39.706866 39.706866 0 0 1 5.828531 20.76414 36.428317 36.428317 0 0 1-36.428317 36.428318H204.909285a36.428317 36.428317 0 0 1-36.428317-36.428318 39.342583 39.342583 0 0 1 6.192814-21.128424z" fill="#dbdbdb" p-id="11793" data-spm-anchor-id="a313x.search_index.0.i25.2a503a81P08cc4" class="selected"></path><path d="M174.673782 625.474208a39.342583 39.342583 0 0 1-6.192814-21.128424 36.428317 36.428317 0 0 1 36.428317-36.428317h614.18143a36.428317 36.428317 0 0 1 36.428317 36.428317 39.706866 39.706866 0 0 1-5.82853 20.764141l-297.25507 378.490217a52.82106 52.82106 0 0 1-41.163998 20.399858 52.092494 52.092494 0 0 1-41.163999-20.399858l-291.426539-373.025969-4.007114-5.099965z" fill="#3fd2a1" p-id="11794" data-spm-anchor-id="a313x.search_index.0.i22.2a503a81P08cc4" class=""></path></svg>