maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改到家服务搜索页面样式

Browse Source
This commit is contained in:
赵毅 2025-11-03 16:29:18 +08:00
parent d74ce1a51d
commit 4666f8fb7b
3 changed files with 193 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/homeServer/searchAll/index.css
View File

@ -205,71 +205,86 @@ page {
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5; border-bottom: 1rpx solid #f5f5f5;
} }
.filter-title { .filter-title {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
margin-bottom: 20rpx; margin-bottom: 20rpx;
font-weight: bold; font-weight: bold;
} }
.filter-options { .filter-options {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 15rpx; gap: 15rpx;
} }
.filter-option { .filter-option {
background: #f5f5f5; border-radius: 10rpx;
border-radius: 50rpx; border: 1rpx solid #cccccc;
padding: 12rpx 30rpx; padding: 12rpx 30rpx;
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
white-space: nowrap; white-space: nowrap;
} }
.filter-option.active { .filter-option.active {
background: #ff370b; background: #ff370b;
color: white; color: white;
} }
.price-range { .price-range {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20rpx; gap: 20rpx;
margin-top: 10rpx; margin-top: 10rpx;
} }
.price-input { .price-input {
flex: 1; flex: 1;
height: 60rpx; height: 60rpx;
background: #f5f5f5; border: 1rpx solid #cccccc;
border-radius: 10rpx; border-radius: 10rpx;
padding: 0 20rpx; padding: 0 20rpx;
font-size: 24rpx; font-size: 24rpx;
border: none;
} }
.price-separator { .price-separator {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
} }
.filter-buttons { .filter-buttons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
margin-top: 10rpx; margin-top: 10rpx;
} }
.reset-button { .reset-button {
width: 200rpx; width: 200rpx;
height: 70rpx; height: 70rpx;
border: 1rpx solid #7abbff; border: 1rpx solid #cccccc;
border-radius: 50rpx; border-radius: 50rpx;
background: #f0f7ff; background: #d9d9d9;
color: #409eff; color: black;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx; font-size: 28rpx;
} }
.confirm-button { .confirm-button {
width: 200rpx; width: 200rpx;
height: 70rpx; height: 70rpx;
background: #409eff; background: #ff370b;
border-radius: 50rpx; border-radius: 50rpx;
color: white; color: white;
font-size: 28rpx; font-size: 28rpx;
border: none; display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
} }
.MasterItem_Info_right_1 { .MasterItem_Info_right_1 {
@ -401,6 +416,7 @@ page {
.local span { .local span {
font-weight: 700; font-weight: 700;
margin: 0 10rpx;
} }
.filterMore1 { .filterMore1 {
@ -409,27 +425,32 @@ page {
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
margin-top: 20rpx; margin: 40rpx 0 20rpx 0;
} }
.filterMoreItem { .filterMoreItem {
font-size: 28rpx; font-size: 26rpx;
color: #222222; color: #222222;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #f6f6fa;
padding: 0 20rpx; padding: 0 20rpx;
margin-right: 10rpx; margin-right: 10rpx;
margin-right: 20rpx; margin-right: 20rpx;
border-radius: 20rpx; border-radius: 10rpx;
border: 1rpx solid #cccccc;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
} }
.filterMoreItem-active {
color: #ff702c !important;
border: 1rpx solid #ff702c;
}
.filterMore2_item { .filterMore2_item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20rpx; margin: 0 10rpx 45rpx 10rpx;
color: #999; color: #999;
} }

312
packages/homeServer/searchAll/index.vue
View File

@ -1,16 +1,15 @@
<template> <template>
<view class="container2"> <view class="container2">
<div class="header"> <view class="header">
<div class="Filter"> <view class="Filter">
<div class="Filter_left"> <view class="Filter_left">
<div <view
v-for="filter in filters" v-for="filter in filters"
:key="filter.id" :key="filter.id"
class="FilterItem" class="FilterItem"
:class="{ active: selectedFilter === filter.id }" :class="{ active: selectedFilter === filter.id }"
@click=" @click="
showDialog(filter.id); showDialog(filter.id);
selectedFilter = filter.id;
" "
> >
{{ filter.label }} {{ filter.label }}
@ -22,158 +21,158 @@
" "
:class="{ iconStyle: selectedFilter === filter.id }" :class="{ iconStyle: selectedFilter === filter.id }"
></image> ></image>
</div> </view>
</div> </view>
<div class="Filter_right" @click="showDialog(6)"> <view class="Filter_right" @click="showDialog(6)">
<text :class="{ activeFilter: show6 }">筛选</text> <text :class="{ activeFilter: show6 }">筛选</text>
<image <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png"
></image> ></image>
</div> </view>
</div> </view>
<!-- 位置筛选 --> <!-- 位置筛选 -->
<div class="FilterMore" v-if="show1"> <view class="FilterMore" v-if="show1">
<div class="local">距离 <span>上海公馆</span></div> <view class="local">距离 <span>上海公馆</span> ></view>
<div class="filterMore1"> <view class="filterMore1">
<div class="filterMoreItem">附近</div> <view class="filterMoreItem filterMoreItem-active">附近</view>
<div class="filterMoreItem">500m</div> <view class="filterMoreItem">500m</view>
<div class="filterMoreItem">1km</div> <view class="filterMoreItem">1km</view>
<div class="filterMoreItem">3km</div> <view class="filterMoreItem">3km</view>
<div class="filterMoreItem">5km</div> <view class="filterMoreItem">5km</view>
<div class="filterMoreItem">10km</div> <view class="filterMoreItem">10km</view>
</div> </view>
</div> </view>
<!-- 综合筛选 --> <!-- 综合筛选 -->
<div class="FilterMore" v-if="show2"> <view class="FilterMore" v-if="show2">
<div class="filterMore2_item"> <view class="filterMore2_item">
<div class="filterMore2_item_left">综合</div> <view class="filterMore2_item_left">综合</view>
<div class="filterMore2_item_right"> <view class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon> <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div> </view>
</div> </view>
<div class="filterMore2_item"> <view class="filterMore2_item">
<div class="filterMore2_item_left active3">从高到低</div> <view class="filterMore2_item_left active3">从高到低</view>
<div class="filterMore2_item_right"> <view class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon> <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div> </view>
</div> </view>
<div class="filterMore2_item"> <view class="filterMore2_item">
<div class="filterMore2_item_left">从低到高</div> <view class="filterMore2_item_left">从低到高</view>
<div class="filterMore2_item_right"> <view class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon> <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div> </view>
</div> </view>
</div> </view>
<!-- 排序筛选 --> <!-- 排序筛选 -->
<div class="FilterMore" v-if="show3"> <view class="FilterMore" v-if="show3">
<div class="filterMore2_item"> <view class="filterMore2_item">
<div class="filterMore2_item_left2">智能排序</div> <view class="filterMore2_item_left2">智能排序</view>
<div class="filterMore2_item_right"> <view class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon> <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div> </view>
</div> </view>
<div class="filterMore2_item"> <view class="filterMore2_item">
<div class="filterMore2_item_left2 active3">距离优先</div> <view class="filterMore2_item_left2 active3">距离优先</view>
<div class="filterMore2_item_right"> <view class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon> <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div> </view>
</div> </view>
<div class="filterMore2_item"> <view class="filterMore2_item">
<div class="filterMore2_item_left2">好评优先</div> <view class="filterMore2_item_left2">好评优先</view>
<div class="filterMore2_item_right"> <view class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon> <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div> </view>
</div> </view>
<div class="filterMore2_item"> <view class="filterMore2_item">
<div class="filterMore2_item_left2">销量优先</div> <view class="filterMore2_item_left2">销量优先</view>
<div class="filterMore2_item_right"> <view class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon> <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div> </view>
</div> </view>
</div> </view>
<!-- 高级筛选面板 --> <!-- 高级筛选面板 -->
<div class="FilterMore" v-if="show6"> <view class="FilterMore" v-if="show6">
<div class="filter-section"> <view class="filter-section">
<div class="filter-title">满意度</div> <view class="filter-title">满意度</view>
<div class="filter-options"> <view class="filter-options">
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedSatisfaction.includes('5+') }" :class="{ active: selectedSatisfaction.includes('5+') }"
@click="toggleSatisfaction('5+')" @click="toggleSatisfaction('5+')"
> >
5分及以上 5分及以上
</div> </view>
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedSatisfaction.includes('4.9+') }" :class="{ active: selectedSatisfaction.includes('4.9+') }"
@click="toggleSatisfaction('4.9+')" @click="toggleSatisfaction('4.9+')"
> >
4.9分及以上 4.9分及以上
</div> </view>
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedSatisfaction.includes('4.8+') }" :class="{ active: selectedSatisfaction.includes('4.8+') }"
@click="toggleSatisfaction('4.8+')" @click="toggleSatisfaction('4.8+')"
> >
4.8分及以上 4.8分及以上
</div> </view>
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedSatisfaction.includes('4.7+') }" :class="{ active: selectedSatisfaction.includes('4.7+') }"
@click="toggleSatisfaction('4.7+')" @click="toggleSatisfaction('4.7+')"
> >
4.7分及以上 4.7分及以上
</div> </view>
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedSatisfaction.includes('4.6+') }" :class="{ active: selectedSatisfaction.includes('4.6+') }"
@click="toggleSatisfaction('4.6+')" @click="toggleSatisfaction('4.6+')"
> >
4.6分及以上 4.6分及以上
</div> </view>
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedSatisfaction.includes('4.5+') }" :class="{ active: selectedSatisfaction.includes('4.5+') }"
@click="toggleSatisfaction('4.5+')" @click="toggleSatisfaction('4.5+')"
> >
4.5分及以上 4.5分及以上
</div> </view>
</div> </view>
</div> </view>
<div class="filter-section"> <view class="filter-section">
<div class="filter-title">评论数量</div> <view class="filter-title">评论数量</view>
<div class="filter-options"> <view class="filter-options">
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedReviewCount === '1-100' }" :class="{ active: selectedReviewCount === '1-100' }"
@click="selectedReviewCount = '1-100'" @click="selectedReviewCount = '1-100'"
> >
1-100 1-100
</div> </view>
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedReviewCount === '100-500' }" :class="{ active: selectedReviewCount === '100-500' }"
@click="selectedReviewCount = '100-500'" @click="selectedReviewCount = '100-500'"
> >
100-500 100-500
</div> </view>
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedReviewCount === '500+' }" :class="{ active: selectedReviewCount === '500+' }"
@click="selectedReviewCount = '500+'" @click="selectedReviewCount = '500+'"
> >
500以上 500以上
</div> </view>
</div> </view>
</div> </view>
<div class="filter-section"> <view class="filter-section">
<div class="filter-title">价格范围</div> <view class="filter-title">价格范围</view>
<div class="price-range"> <view class="price-range">
<input <input
type="number" type="number"
v-model="minPrice" v-model="minPrice"
@ -189,55 +188,55 @@
class="price-input" class="price-input"
@input="validatePriceRange" @input="validatePriceRange"
/> />
</div> </view>
</div> </view>
<div class="filter-section"> <view class="filter-section">
<div class="filter-title">类别</div> <view class="filter-title">类别</view>
<div class="filter-options"> <view class="filter-options">
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedCategory === 'airConditioner' }" :class="{ active: selectedCategory === 'airConditioner' }"
@click="selectedCategory = 'airConditioner'" @click="selectedCategory = 'airConditioner'"
> >
空调维修 空调维修
</div> </view>
<div <view
class="filter-option" class="filter-option"
:class="{ active: selectedCategory === 'refrigerator' }" :class="{ active: selectedCategory === 'refrigerator' }"
@click="selectedCategory = 'refrigerator'" @click="selectedCategory = 'refrigerator'"
> >
冰箱维修 冰箱维修
</div> </view>
</div> </view>
</div> </view>
<div class="filter-buttons"> <view class="filter-buttons">
<button class="reset-button" @click="resetFilters">重置</button> <button class="reset-button" @click="resetFilters">重置</button>
<button class="confirm-button" @click="applyFilters">确定</button> <button class="confirm-button" @click="applyFilters">确定</button>
</div> </view>
</div> </view>
</div> </view>
<div class="main"> <view class="main">
<!-- 遮罩 --> <!-- 遮罩 -->
<div class="dialogBox" v-if="isShowDia"></div> <view class="dialogBox" v-if="isShowDia" @click="closeAllFilters"></view>
<div class="MasterList"> <view class="MasterList">
<div class="MasterItem" v-for="(item, index) in 5" :key="index"> <view class="MasterItem" v-for="(item, index) in 5" :key="index">
<div class="MasterItem_right"> <view class="MasterItem_right">
<div class="MasterItem_info"> <view class="MasterItem_info">
<div class="MasterItem_Info_left"> <view class="MasterItem_Info_left">
<image <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"
></image> ></image>
<div class="state state1">待服务</div> <view class="state state1">待服务</view>
<div class="state state2" v-if="false">休息中</div> <view class="state state2" v-if="false">休息中</view>
<div class="state state3" v-if="false">服务中</div> <view class="state state3" v-if="false">服务中</view>
</div> </view>
<div class="MasterItem_Info_right"> <view class="MasterItem_Info_right">
<div class="MasterItem_Info_right_1"> <view class="MasterItem_Info_right_1">
<div class="master_info_right_left"> <view class="master_info_right_left">
林师傅 林师傅
<image <image
class="Medal" class="Medal"
@ -255,29 +254,29 @@
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"
></image> ></image>
<span>4.8</span> <span>4.8</span>
</div> </view>
<div class="master_info_right_right" @click="masterInfo"> <view class="master_info_right_right" @click="masterInfo">
查看资料 查看资料
</div> </view>
</div> </view>
<div class="MasterItem_Info_right_2"> <view class="MasterItem_Info_right_2">
52岁 广东梅州人 5-10年 52岁 广东梅州人 5-10年
</div> </view>
<div class="MasterItem_Info_right_3"> <view class="MasterItem_Info_right_3">
<span>500+</span>预定 <span>100+</span>评价 <span>500+</span>预定 <span>100+</span>评价
</div> </view>
<div class="MasterItem_Info_right_4"> <view class="MasterItem_Info_right_4">
<div class="tagItem tag1">积极主动</div> <view class="tagItem tag1">积极主动</view>
<div class="tagItem tag2">技术精湛</div> <view class="tagItem tag2">技术精湛</view>
<div class="tagItem tag3">技术精湛</div> <view class="tagItem tag3">技术精湛</view>
</div> </view>
<div class="MasterItem_Info_right_5"> <view class="MasterItem_Info_right_5">
价格范围： <span>￥500-￥800</span> 价格范围： <span>￥500-￥800</span>
</div> </view>
<div class="MasterItem_Info_right_6"> <view class="MasterItem_Info_right_6">
<image <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
></image> ></image>
@ -287,13 +286,13 @@
<image <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
></image> ></image>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</view> </view>
</template> </template>
@ -339,18 +338,8 @@ export default {
}; };
}, },
watch: { watch: {
show1(val) { // 修改watch逻辑，只在点击空白区域关闭筛选器时清除选中状态
if (!val) this.selectedFilter = null; // 而不是在切换不同筛选器时清除
},
show2(val) {
if (!val) this.selectedFilter = null;
},
show3(val) {
if (!val) this.selectedFilter = null;
},
show6(val) {
if (!val) this.selectedFilter = null;
},
}, },
methods: { methods: {
masterInfo() { masterInfo() {
@ -401,6 +390,9 @@ export default {
this.isShowDia = false; this.isShowDia = false;
}, },
showDialog(index) { showDialog(index) {
// 先更新选中的过滤器ID
this.selectedFilter = index;
// 然后处理显示状态
this[`show${index}`] = !this[`show${index}`]; this[`show${index}`] = !this[`show${index}`];
this.logOtherButtons(index); this.logOtherButtons(index);
this.isShowDia = this[`show${index}`]; this.isShowDia = this[`show${index}`];
@ -412,6 +404,14 @@ export default {
} }
} }
}, },
closeAllFilters() {
// 关闭所有筛选面板并重置选中状态
for (let i = 1; i <= 6; i++) {
this[`show${i}`] = false;
}
this.isShowDia = false;
this.selectedFilter = null;
},
}, },
onReady() {}, onReady() {},

4
packages/localLife/detail/index.css
View File

@ -128,9 +128,7 @@ page {
font-weight: 500; font-weight: 500;
font-size: 36rpx; font-size: 36rpx;
color: #FFFFFF; color: #FFFFFF;
/* display: inline-block; */ background: #b1b0b0;
/* padding: 10rpx 44rpx; */
background: #cccccc;
border-radius: 100rpx 100rpx 100rpx 100rpx; border-radius: 100rpx 100rpx 100rpx 100rpx;
margin-right: 20rpx; margin-right: 20rpx;
} }