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

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

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

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

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

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

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