feat : 合并代码
This commit is contained in:
赵毅
commit
04e3f4eed8
@ -12,7 +12,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="Filter">
|
<div class="Filter">
|
||||||
<div class="Filter_left">
|
<div class="Filter_left">
|
||||||
<div class="FilterItem" @click="show1=!show1">
|
<div class="FilterItem" @click="show1 = !show1">
|
||||||
附近
|
附近
|
||||||
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
</div>
|
</div>
|
||||||
@ -107,7 +107,7 @@
|
|||||||
|
|
||||||
<!-- 分类筛选 -->
|
<!-- 分类筛选 -->
|
||||||
<div class="FilterMore3" v-if="show4">
|
<div class="FilterMore3" v-if="show4">
|
||||||
<div class="filterMore3Item" v-for="(item,index) in 9" :key="index">家电维修</div>
|
<div class="filterMore3Item" v-for="(item, index) in 9" :key="index">家电维修</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -119,7 +119,8 @@
|
|||||||
<div class="MasterItem" v-for="(item, index) in 3" :key="index">
|
<div class="MasterItem" v-for="(item, index) in 3" :key="index">
|
||||||
<div class="MasterItem_left">
|
<div class="MasterItem_left">
|
||||||
<image src="http://192.168.0.172:5500/community_providentFund_Group_1444.png"></image>
|
<image src="http://192.168.0.172:5500/community_providentFund_Group_1444.png"></image>
|
||||||
<image v-if="false" src="http://192.168.0.172:5500/community_providentFund_Ellipse_160.png"></image>
|
<image v-if="false" src="http://192.168.0.172:5500/community_providentFund_Ellipse_160.png">
|
||||||
|
</image>
|
||||||
</div>
|
</div>
|
||||||
<div class="MasterItem_right">
|
<div class="MasterItem_right">
|
||||||
<div class="MasterItem_info">
|
<div class="MasterItem_info">
|
||||||
@ -132,7 +133,8 @@
|
|||||||
<div class="MasterItem_Info_right">
|
<div class="MasterItem_Info_right">
|
||||||
<div class="MasterItem_Info_right_1">
|
<div class="MasterItem_Info_right_1">
|
||||||
林师傅
|
林师傅
|
||||||
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png"></image>
|
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png">
|
||||||
|
</image>
|
||||||
<image class="Medal" v-if="false"
|
<image class="Medal" v-if="false"
|
||||||
src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
||||||
</image>
|
</image>
|
||||||
@ -184,16 +186,19 @@ export default {
|
|||||||
return {
|
return {
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: "",
|
localHeight: "",
|
||||||
show1:false,
|
show1: false,
|
||||||
show2:false,
|
show2: false,
|
||||||
show3:false,
|
show3: false,
|
||||||
show4:false,
|
show4: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
masterInfo(){
|
masterInfo() {
|
||||||
NavgateTo("../masterInfo/index")
|
NavgateTo("../masterInfo/index")
|
||||||
},
|
},
|
||||||
|
back() {
|
||||||
|
NavgateTo("1")
|
||||||
|
},
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
|
|
||||||
|
|||||||
@ -6,6 +6,7 @@ page {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchBox_left,
|
.searchBox_left,
|
||||||
@ -31,7 +32,6 @@ page {
|
|||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-top: 30rx;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -118,9 +118,10 @@ page {
|
|||||||
background: #FF370B;
|
background: #FF370B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.master_info_right{
|
.master_info_right {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.master_info_right1 {
|
.master_info_right1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -158,9 +159,11 @@ page {
|
|||||||
.master_info_right2 span {
|
.master_info_right2 span {
|
||||||
color: #FF370B;
|
color: #FF370B;
|
||||||
}
|
}
|
||||||
.master_info_right3{
|
|
||||||
|
.master_info_right3 {
|
||||||
margin-top: 13rpx;
|
margin-top: 13rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.master_info_right3_item {
|
.master_info_right3_item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -175,6 +178,327 @@ page {
|
|||||||
margin-left: 23rpx;
|
margin-left: 23rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.master_info_right3_item>div{
|
.master_info_right3_item>div {
|
||||||
margin-right: 27rpx;
|
margin-right: 27rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.master_msg {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 54rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_msg_item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_msg_item image {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
margin-bottom: 6rox;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_msg_itemText {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #222222;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tagList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 56rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tag {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: rgba(255, 178, 23, 0.1);
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #555555;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tag:nth-child(2n) {
|
||||||
|
background: rgba(255, 81, 42, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tag:nth-child(3n) {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tag:nth-child(5n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Badge {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Tit {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #222222;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgList {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgItem {
|
||||||
|
width: 164rpx;
|
||||||
|
height: 123rpx;
|
||||||
|
margin-right: 25rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgItem:nth-child(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommend {
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20 {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20 .master_info_right1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20 .master_info_right_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right_right {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20 .master_info_right2 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20 .master_info_right3 {
|
||||||
|
display: flex;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20 .master_info_right3 span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.MasterItem_Info_right_4 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagItem {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #555555;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag1 {
|
||||||
|
background: rgba(255, 178, 23, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag2 {
|
||||||
|
background: rgba(255, 81, 42, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag3 {
|
||||||
|
background: rgba(175, 175, 175, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Evaluate {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.EvaluateItem {
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #EBEBEB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_ava {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_msg {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_time {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_msg1 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_msg2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_msg2 image {
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_main {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #222222;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Evaluate .Tit {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
width: 750rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255, 27, 27, 0.05);
|
||||||
|
padding: 26rpx 40rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbtn1 {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: linear-gradient(91deg, #FFB95E 0%, #FF9100 100%);
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
margin-left: 14rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbtn2 {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerIcon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #222222;
|
||||||
|
margin-right: 52rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footerIcon1 {
|
||||||
|
width: 38.33rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footerIcon2 {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 37rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@ -12,6 +12,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 阿姨 -->
|
||||||
|
<div class="aunt" v-if="false">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<swiper>
|
<swiper>
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
@ -47,23 +49,233 @@
|
|||||||
<div class="master_info_right3">
|
<div class="master_info_right3">
|
||||||
<div class="master_info_right3_item">
|
<div class="master_info_right3_item">
|
||||||
<div>专业性</div>
|
<div>专业性</div>
|
||||||
<u-line-progress class="gradient-progress" :showText="false" :percentage="30" activeColor="transparent"></u-line-progress>
|
<u-line-progress class="gradient-progress" :showText="false" :percentage="100"
|
||||||
|
activeColor="transparent"></u-line-progress>
|
||||||
<span>80分</span>
|
<span>80分</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="master_info_right3_item">
|
<div class="master_info_right3_item">
|
||||||
<div>好评率</div>
|
<div>好评率</div>
|
||||||
<u-line-progress class="gradient-progress" :showText="false" :percentage="30" activeColor="transparent"></u-line-progress>
|
<u-line-progress class="gradient-progress" :showText="false" :percentage="30"
|
||||||
|
activeColor="transparent"></u-line-progress>
|
||||||
<span>80%</span>
|
<span>80%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="master_info_right3_item">
|
<div class="master_info_right3_item">
|
||||||
<div>准时率</div>
|
<div>准时率</div>
|
||||||
<u-line-progress class="gradient-progress" :showText="false" :percentage="30" activeColor="transparent"></u-line-progress>
|
<u-line-progress class="gradient-progress" :showText="false" :percentage="30"
|
||||||
|
activeColor="transparent"></u-line-progress>
|
||||||
<span>80%</span>
|
<span>80%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="master_msg">
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon1.png"></image>
|
||||||
|
<div class="master_msg_itemText">52岁</div>
|
||||||
|
<div>广东梅州人</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon2.png"></image>
|
||||||
|
<div class="master_msg_itemText">5-10年</div>
|
||||||
|
<div>服务经验</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon3.png"></image>
|
||||||
|
<div class="master_msg_itemText">500+</div>
|
||||||
|
<div>成功预约</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon4.png"></image>
|
||||||
|
<div class="master_msg_itemText">100+</div>
|
||||||
|
<div>用户评价</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_tagList">
|
||||||
|
<div class="master_tag" v-for="(item, index) in 8" :key="index">积极主动</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Badge">
|
||||||
|
<div class="Tit">职业证书</div>
|
||||||
|
<div class="imgList">
|
||||||
|
<div class="imgItem" v-for="(item, index) in 5" :key="index">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="recommend">
|
||||||
|
<div class="Tit">推荐师傅</div>
|
||||||
|
|
||||||
|
<div class="master_info mt20" v-for="(item, index) in 3" :key="index">
|
||||||
|
<div class="master_info_left">
|
||||||
|
<image src="http://192.168.0.172:5500/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="master_info_right">
|
||||||
|
<div class="master_info_right1">
|
||||||
|
<div class="master_info_right_left">林师傅
|
||||||
|
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png"></image>
|
||||||
|
<image class="Medal" v-if="false"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
||||||
|
</image>
|
||||||
|
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right_right">
|
||||||
|
查看资料
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_info_right2">
|
||||||
|
52岁 广东梅州人 5-10年
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_info_right3">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="MasterItem_Info_right_5">
|
||||||
|
价格范围： <span>￥500-￥800</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 师傅 -->
|
||||||
|
<div class="masters">
|
||||||
|
<div class="master">
|
||||||
|
<div class="master_info">
|
||||||
|
<div class="master_info_left">
|
||||||
|
<image src="http://192.168.0.172:5500/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="master_info_right">
|
||||||
|
<div class="master_info_right1">
|
||||||
|
林师傅
|
||||||
|
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png"></image>
|
||||||
|
<image class="Medal" v-if="false" src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
||||||
|
</image>
|
||||||
|
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right2">
|
||||||
|
价格范围： <span>￥500-￥800</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right3">
|
||||||
|
<div class="master_info_right3_item">
|
||||||
|
<div>专业性</div>
|
||||||
|
<u-line-progress class="gradient-progress" :showText="false" :percentage="100"
|
||||||
|
activeColor="transparent"></u-line-progress>
|
||||||
|
<span>80分</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right3_item">
|
||||||
|
<div>好评率</div>
|
||||||
|
<u-line-progress class="gradient-progress" :showText="false" :percentage="30"
|
||||||
|
activeColor="transparent"></u-line-progress>
|
||||||
|
<span>80%</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right3_item">
|
||||||
|
<div>准时率</div>
|
||||||
|
<u-line-progress class="gradient-progress" :showText="false" :percentage="30"
|
||||||
|
activeColor="transparent"></u-line-progress>
|
||||||
|
<span>80%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_msg">
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon1.png"></image>
|
||||||
|
<div class="master_msg_itemText">52岁</div>
|
||||||
|
<div>广东梅州人</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon2.png"></image>
|
||||||
|
<div class="master_msg_itemText">5-10年</div>
|
||||||
|
<div>服务经验</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon3.png"></image>
|
||||||
|
<div class="master_msg_itemText">500+</div>
|
||||||
|
<div>成功预约</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon4.png"></image>
|
||||||
|
<div class="master_msg_itemText">100+</div>
|
||||||
|
<div>用户评价</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_tagList">
|
||||||
|
<div class="master_tag" v-for="(item, index) in 8" :key="index">积极主动</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Evaluate">
|
||||||
|
<div class="Tit">客户点评</div>
|
||||||
|
<div class="EvaluateItem">
|
||||||
|
<div class="evaluateItem_header">
|
||||||
|
<div class="evaluateItem_ava">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_msg">
|
||||||
|
<div class="evaluateItem_msg1">TP</div>
|
||||||
|
<div class="evaluateItem_msg2">
|
||||||
|
<image v-for="(item, index) in 5" :key="index"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_stait.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_time">2025-06-24</div>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_main">
|
||||||
|
真好啊！真棒啊！优秀！
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="more" @click="EvaluateMore">查看更多</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Badge">
|
||||||
|
<div class="Tit">职业证书</div>
|
||||||
|
<div class="imgList">
|
||||||
|
<div class="imgItem" v-for="(item, index) in 5" :key="index">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部 -->
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footerIcon" @click="Vendor">
|
||||||
|
<image id="footerIcon1" src="http://192.168.0.172:5500/homeServer_serverInfoIcon.png"></image>
|
||||||
|
服务商
|
||||||
|
</div>
|
||||||
|
<div class="footerIcon">
|
||||||
|
<image id="footerIcon2" src="http://192.168.0.172:5500/homeServer_CollectIcon.png"></image>
|
||||||
|
收藏
|
||||||
|
</div>
|
||||||
|
<div class="footerbtn1">联系客服</div>
|
||||||
|
<div class="footerbtn2">立即预约</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -80,7 +292,12 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
EvaluateMore(){
|
||||||
|
NavgateTo("../masterReview/index")
|
||||||
|
},
|
||||||
|
Vendor(){
|
||||||
|
NavgateTo('../vendor/index')
|
||||||
|
},
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
|
|
||||||
@ -109,7 +326,7 @@ export default {
|
|||||||
@import url("./index.css");
|
@import url("./index.css");
|
||||||
|
|
||||||
/* 添加渐变色样式 */
|
/* 添加渐变色样式 */
|
||||||
.gradient-progress .u-line-progress__active {
|
.u-line-progress__line {
|
||||||
background: linear-gradient( 90deg, #FFFFFF 0%, #FF370B 100%);
|
background: linear-gradient(90deg, #FFFFFF 0%, #FF370B 100%) !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -0,0 +1,102 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_left,
|
||||||
|
.searchBox_right,
|
||||||
|
.searchBox_mid {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_left {
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_right {
|
||||||
|
opacity: 0;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_mid {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #222222;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.EvaluateList {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.EvaluateItem {
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #EBEBEB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_ava {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_msg {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_time {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_msg1 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_msg2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_msg2 image {
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_main {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #222222;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evaluateItem_Score {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.EvaluateItem:last-child{
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
@ -1,6 +1,41 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
|
<view class="searchBox_left">
|
||||||
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
|
</view>
|
||||||
|
<div class="searchBox_mid">
|
||||||
|
评价(38)
|
||||||
|
</div>
|
||||||
|
<div class="searchBox_right">
|
||||||
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="EvaluateList">
|
||||||
|
<div class="EvaluateItem" v-for="item,index in 3" :key="index">
|
||||||
|
<div class="evaluateItem_header">
|
||||||
|
<div class="evaluateItem_ava">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_msg">
|
||||||
|
<div class="evaluateItem_msg1">TP</div>
|
||||||
|
<div class="evaluateItem_msg2">
|
||||||
|
<image v-for="(item, index) in 5" :key="index"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_stait.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_time">2025-06-24</div>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_main">
|
||||||
|
真好啊！真棒啊！优秀！
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_Score">
|
||||||
|
技术评级：70分
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -22,7 +57,7 @@ export default {
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onload(options) {
|
onLoad(options) {
|
||||||
const meun = menuButtonInfo();
|
const meun = menuButtonInfo();
|
||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
|
|||||||
418
packages/homeServer/vendor/index.css
vendored
Normal file
418
packages/homeServer/vendor/index.css
vendored
Normal file
@ -0,0 +1,418 @@
|
|||||||
|
.searchIpt {
|
||||||
|
width: 710rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 36rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchIpt image {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
height: 30rpx;
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendor {
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorInfo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorInfo_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorInfo_img {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorInfo_info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendor_name {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendor_fs {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorInfo_right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorInfo_right image {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorMsg {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 34rpx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorMsg_Item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorMsg_Item image {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorMsg_Item_msg {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendorMsg_Item_msg .num {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #222222;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 11rpx;
|
||||||
|
height: 74rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabItem {
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabItem:first-child {
|
||||||
|
border-right: 1rpx solid #EBEBEB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #000000;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active::after {
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 2rpx;
|
||||||
|
background: #FF370B;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: -18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cateList {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cateItem {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
padding: 10rpx 14rpx;
|
||||||
|
margin-right: 50rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.active2{
|
||||||
|
background: #FFF5F5;
|
||||||
|
border: 1rpx solid #FF370B;
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
.cateItem:nth-child(4n){
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
border-bottom: 1rpx solid #EBEBEB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 130rpx;
|
||||||
|
margin-right: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_left image {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state1 {
|
||||||
|
background: #AECE2B;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.state2 {
|
||||||
|
background: #CECECE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state3 {
|
||||||
|
background: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Medal {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
margin-right: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star {
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right1 span {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right2 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right2 span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right3 {
|
||||||
|
margin-top: 13rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right3_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right3_item span {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #222222;
|
||||||
|
margin-left: 23rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right3_item>div {
|
||||||
|
margin-right: 27rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_msg {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 54rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_msg_item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_msg_item image {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
margin-bottom: 6rox;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_msg_itemText {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #222222;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tagList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 56rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tag {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: rgba(255, 178, 23, 0.1);
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #555555;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tag:nth-child(2n) {
|
||||||
|
background: rgba(255, 81, 42, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tag:nth-child(3n) {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_tag:nth-child(5n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right_right {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right2 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right3 {
|
||||||
|
display: flex;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right3 span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_4 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagItem {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #555555;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag1 {
|
||||||
|
background: rgba(255, 178, 23, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag2 {
|
||||||
|
background: rgba(255, 81, 42, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag3 {
|
||||||
|
background: rgba(175, 175, 175, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
152
packages/homeServer/vendor/index.vue
vendored
Normal file
152
packages/homeServer/vendor/index.vue
vendored
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<div class="searchIpt" @click="search">
|
||||||
|
<image src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
|
||||||
|
<u--input placeholder="请输入内容" border="none" disabled v-model="value" @change="change"></u--input>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
|
||||||
|
<div class="vendor">
|
||||||
|
<div class="vendorInfo">
|
||||||
|
<div class="vendorInfo_left">
|
||||||
|
<div class="vendorInfo_img">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
<div class="vendorInfo_info">
|
||||||
|
<div class="vendor_name">专业到家服务</div>
|
||||||
|
<div class="vendor_fs">120个粉丝</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vendorInfo_right">
|
||||||
|
<image src="http://192.168.0.172:5500/local_start1.png"></image>
|
||||||
|
<image v-if="false" src="http://192.168.0.172:5500/local_start2.png"></image>
|
||||||
|
<div>收藏</div>
|
||||||
|
<div v-if="false">取消收藏</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vendorMsg">
|
||||||
|
<div class="vendorMsg_Item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon1.png"></image>
|
||||||
|
<div class="vendorMsg_Item_msg">
|
||||||
|
<div class="num">150+</div>
|
||||||
|
<div>服务师傅</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vendorMsg_Item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_CumulativeIcon.png"></image>
|
||||||
|
<div class="vendorMsg_Item_msg">
|
||||||
|
<div class="num">5000+</div>
|
||||||
|
<div>累计订单</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vendorMsg_Item">
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_masterIcon2.png"></image>
|
||||||
|
<div class="vendorMsg_Item_msg">
|
||||||
|
<div class="num">10+</div>
|
||||||
|
<div>行业经验</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="tabList">
|
||||||
|
<div class="tabItem active">推荐</div>
|
||||||
|
<div class="tabItem">分类</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cateList">
|
||||||
|
<div class="cateItem active2" v-for="item,index in 5" :key="index">家电清洗</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_info" v-for="(item, index) in 3" :key="index">
|
||||||
|
<div class="master_info_left">
|
||||||
|
<image src="http://192.168.0.172:5500/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="master_info_right">
|
||||||
|
<div class="master_info_right1">
|
||||||
|
<div class="master_info_right_left">林师傅
|
||||||
|
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png"></image>
|
||||||
|
<image class="Medal" v-if="false" src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
||||||
|
</image>
|
||||||
|
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right_right">
|
||||||
|
查看资料
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_info_right2">
|
||||||
|
52岁 广东梅州人 5-10年
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_info_right3">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="MasterItem_Info_right_5">
|
||||||
|
价格范围： <span>￥500-￥800</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
||||||
|
import { apiArr } from '../../../api/reservation';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
top: "",
|
||||||
|
localHeight: "",
|
||||||
|
value: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
search(){
|
||||||
|
// 搜索后再跳页面
|
||||||
|
// NavgateTo("../vendorSearch/index")
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(options) {
|
||||||
|
const meun = menuButtonInfo();
|
||||||
|
this.top = meun.top;
|
||||||
|
this.localHeight = meun.height;
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
|
*/
|
||||||
|
onReachBottom() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url("./index.css");
|
||||||
|
</style>
|
||||||
419
packages/homeServer/vendorSearch/index.css
Normal file
419
packages/homeServer/vendorSearch/index.css
Normal file
@ -0,0 +1,419 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f6f6fa;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 160rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter_right {
|
||||||
|
width: 133rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter_right image {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-left: 7rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iptBox {
|
||||||
|
width: 431rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
margin-left: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iptBox image {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iptBox .u-input {
|
||||||
|
padding: 0 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterItem {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterItem image {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterList {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 12rpx 20rpx 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #EBEBEB;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
}
|
||||||
|
.MasterItem:last-child{
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.MasterItem_right {
|
||||||
|
flex: 1;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_info {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.MasterItem_Info_left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 130rpx;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_left image {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state1 {
|
||||||
|
background: #AECE2B;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.state2 {
|
||||||
|
background: #CECECE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state3 {
|
||||||
|
background: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #222222;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Medal {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
margin-right: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star {
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_1 span {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_2 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_3 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
display: flex;
|
||||||
|
color: #999999;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_3 span {
|
||||||
|
color: #FF370B;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_4 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagItem {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #555555;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag1 {
|
||||||
|
background: rgba(255, 178, 23, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag2 {
|
||||||
|
background: rgba(255, 81, 42, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag3 {
|
||||||
|
background: rgba(175, 175, 175, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_6 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_6 image {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.Btn {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
width: 600rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 60rpx;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.local {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.local span {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMoreItem {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f6f6fa;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore2_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore2_item_left {}
|
||||||
|
|
||||||
|
.active2 {
|
||||||
|
color: #ff702c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore2_item_left2 {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.filterMore3Item {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #555555;
|
||||||
|
width: 130rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
margin-bottom: 18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore3Item:nth-child(4n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen-black-bg {
|
||||||
|
/* position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 9;
|
||||||
|
overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterMore3 {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterMore {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialogBox {
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
z-index: 8;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.master_info_right_left{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.master_info_right_right {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
227
packages/homeServer/vendorSearch/index.vue
Normal file
227
packages/homeServer/vendorSearch/index.vue
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
|
<view class="searchBox_add">
|
||||||
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
|
</view>
|
||||||
|
<div class="iptBox">
|
||||||
|
<image src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
|
||||||
|
<u--input placeholder="请输入内容" border="none" v-model="value" @change="change"></u--input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Filter">
|
||||||
|
<div class="Filter_left">
|
||||||
|
<div class="FilterItem" @click="show1 = !show1">
|
||||||
|
附近
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
综合
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
排序
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
分类
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
地区
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Filter_right">
|
||||||
|
筛选
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filter.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 位置筛选 -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 综合筛选 -->
|
||||||
|
<div class="FilterMore" v-if="show2">
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left">综合</div>
|
||||||
|
<div 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 active2">从高到低</div>
|
||||||
|
<div 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">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 排序筛选 -->
|
||||||
|
<div class="FilterMore" v-if="show3">
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left2">智能排序</div>
|
||||||
|
<div 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 active2">距离优先</div>
|
||||||
|
<div 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">
|
||||||
|
<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">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分类筛选 -->
|
||||||
|
<div class="FilterMore3" v-if="show4">
|
||||||
|
<div class="filterMore3Item" v-for="(item, index) in 9" :key="index">家电维修</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<!-- 遮罩 -->
|
||||||
|
<div class="dialogBox" v-if="show1"></div>
|
||||||
|
|
||||||
|
<div class="MasterList">
|
||||||
|
<div class="MasterItem" v-for="(item, index) in 3" :key="index">
|
||||||
|
<div class="MasterItem_right">
|
||||||
|
<div class="MasterItem_info">
|
||||||
|
<div class="MasterItem_Info_left">
|
||||||
|
<image src="http://192.168.0.172:5500/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">
|
||||||
|
林师傅
|
||||||
|
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png">
|
||||||
|
</image>
|
||||||
|
<image class="Medal" v-if="false"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
||||||
|
</image>
|
||||||
|
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_info_right_right" @click="masterInfo">
|
||||||
|
查看资料
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="MasterItem_Info_right_2">52岁 广东梅州人 5-10年</div>
|
||||||
|
<div 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>
|
||||||
|
|
||||||
|
<div class="MasterItem_Info_right_5">
|
||||||
|
价格范围： <span>￥500-￥800</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="MasterItem_Info_right_6">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Btn">
|
||||||
|
确定
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
||||||
|
import { apiArr } from '../../../api/reservation';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
top: "",
|
||||||
|
localHeight: "",
|
||||||
|
show1: false,
|
||||||
|
show2: false,
|
||||||
|
show3: false,
|
||||||
|
show4: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
masterInfo() {
|
||||||
|
NavgateTo("../masterInfo/index")
|
||||||
|
},
|
||||||
|
back(){
|
||||||
|
NavgateTo("1")
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(options) {
|
||||||
|
const meun = menuButtonInfo();
|
||||||
|
this.top = meun.top;
|
||||||
|
// this.top = meun.height + meun.top;
|
||||||
|
this.localHeight = meun.height;
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
|
*/
|
||||||
|
onReachBottom() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url("./index.css");
|
||||||
|
</style>
|
||||||
14
pages.json
14
pages.json
@ -671,6 +671,20 @@
|
|||||||
"navigationBarBackgroundColor": "#fff",
|
"navigationBarBackgroundColor": "#fff",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "vendor/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarBackgroundColor": "#fff",
|
||||||
|
"navigationBarTitleText": "服务商"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "vendorSearch/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarBackgroundColor": "#fff",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user