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",
|
||||
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:"上门服务",
|
||||
url:"/packages/homeServer/index/index"
|
||||
},
|
||||
|
||||
@ -160,7 +160,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="MasterItem_more">
|
||||
<div class="MasterItem_more" @click="masterInfo">
|
||||
查看资料
|
||||
</div>
|
||||
</div>
|
||||
@ -191,7 +191,9 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
masterInfo(){
|
||||
NavgateTo("../masterInfo/index")
|
||||
},
|
||||
},
|
||||
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>
|
||||
<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>
|
||||
</template>
|
||||
@ -22,7 +86,7 @@ export default {
|
||||
|
||||
},
|
||||
|
||||
onload(options) {
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
@ -43,4 +107,9 @@ export default {
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
|
||||
/* 添加渐变色样式 */
|
||||
.gradient-progress .u-line-progress__active {
|
||||
background: linear-gradient( 90deg, #FFFFFF 0%, #FF370B 100%);
|
||||
}
|
||||
</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:
|
||||
/*!********************************************************************************************!*\
|
||||
!*** D:/projection/Hbuilder/uniapp-ZHSQ/node_modules/uview-ui/libs/config/props/navbar.js ***!
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "packages/homeServer/chooseMaster/index",
|
||||
"pathName": "packages/homeServer/chooseMaster/index",
|
||||
"name": "packages/homeServer/masterInfo/index",
|
||||
"pathName": "packages/homeServer/masterInfo/index",
|
||||
"query": "",
|
||||
"scene": null,
|
||||
"launchMode": "default"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user