feat:新增师傅列表 筛选样式
This commit is contained in:
parent
46634806f8
commit
e829761f5d
@ -48,7 +48,7 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
|
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
|
||||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_doorAc.png",
|
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
|
||||||
nav_name:"上门服务",
|
nav_name:"上门服务",
|
||||||
url:"/packages/homeServer/index/index"
|
url:"/packages/homeServer/index/index"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -160,7 +160,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="MasterItem_more">
|
<div class="MasterItem_more" @click="masterInfo">
|
||||||
查看资料
|
查看资料
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -191,7 +191,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
masterInfo(){
|
||||||
|
NavgateTo("../masterInfo/index")
|
||||||
|
},
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,180 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 30rx;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner swiper {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 710rpx;
|
||||||
|
height: 307rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dotList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #555555;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: #FF370B;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
padding: 26rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
@ -1,5 +1,69 @@
|
|||||||
<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">
|
||||||
|
刘师傅
|
||||||
|
</div>
|
||||||
|
<div class="searchBox_right">
|
||||||
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="banner">
|
||||||
|
<swiper>
|
||||||
|
<swiper-item>
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_banner.png"></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<div class="dotList">
|
||||||
|
<div class="dot active"></div>
|
||||||
|
<div class="dot"></div>
|
||||||
|
<div class="dot"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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="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 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>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -22,7 +86,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;
|
||||||
@ -43,4 +107,9 @@ export default {
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url("./index.css");
|
@import url("./index.css");
|
||||||
|
|
||||||
|
/* 添加渐变色样式 */
|
||||||
|
.gradient-progress .u-line-progress__active {
|
||||||
|
background: linear-gradient( 90deg, #FFFFFF 0%, #FF370B 100%);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
47
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
47
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
@ -981,6 +981,53 @@ exports.default = _default;
|
|||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ 1153:
|
||||||
|
/*!***************************************************************************************************!*\
|
||||||
|
!*** D:/projection/Hbuilder/uniapp-ZHSQ/uni_modules/uview-ui/components/u-line-progress/props.js ***!
|
||||||
|
\***************************************************************************************************/
|
||||||
|
/*! no static exports found */
|
||||||
|
/***/ (function(module, exports, __webpack_require__) {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
/* WEBPACK VAR INJECTION */(function(uni) {
|
||||||
|
|
||||||
|
Object.defineProperty(exports, "__esModule", {
|
||||||
|
value: true
|
||||||
|
});
|
||||||
|
exports.default = void 0;
|
||||||
|
var _default = {
|
||||||
|
props: {
|
||||||
|
// 激活部分的颜色
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: uni.$u.props.lineProgress.activeColor
|
||||||
|
},
|
||||||
|
inactiveColor: {
|
||||||
|
type: String,
|
||||||
|
default: uni.$u.props.lineProgress.color
|
||||||
|
},
|
||||||
|
// 进度百分比，数值
|
||||||
|
percentage: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: uni.$u.props.lineProgress.inactiveColor
|
||||||
|
},
|
||||||
|
// 是否在进度条内部显示百分比的值
|
||||||
|
showText: {
|
||||||
|
type: Boolean,
|
||||||
|
default: uni.$u.props.lineProgress.showText
|
||||||
|
},
|
||||||
|
// 进度条的高度，单位px
|
||||||
|
height: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: uni.$u.props.lineProgress.height
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
exports.default = _default;
|
||||||
|
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
/***/ 116:
|
/***/ 116:
|
||||||
/*!********************************************************************************************!*\
|
/*!********************************************************************************************!*\
|
||||||
!*** D:/projection/Hbuilder/uniapp-ZHSQ/node_modules/uview-ui/libs/config/props/navbar.js ***!
|
!*** D:/projection/Hbuilder/uniapp-ZHSQ/node_modules/uview-ui/libs/config/props/navbar.js ***!
|
||||||
|
|||||||
@ -8,8 +8,8 @@
|
|||||||
"miniprogram": {
|
"miniprogram": {
|
||||||
"list": [
|
"list": [
|
||||||
{
|
{
|
||||||
"name": "packages/homeServer/chooseMaster/index",
|
"name": "packages/homeServer/masterInfo/index",
|
||||||
"pathName": "packages/homeServer/chooseMaster/index",
|
"pathName": "packages/homeServer/masterInfo/index",
|
||||||
"query": "",
|
"query": "",
|
||||||
"scene": null,
|
"scene": null,
|
||||||
"launchMode": "default"
|
"launchMode": "default"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user