feat: 合并代码
This commit is contained in:
赵毅
commit
142e1ad8fe
@ -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"
|
||||
},
|
||||
|
||||
@ -0,0 +1,74 @@
|
||||
# slider-range
|
||||
uni-app 滑块区间选择组件
|
||||
|
||||
可根据具体需求，修改、自定义其他内容。
|
||||
|
||||
## 属性说明
|
||||
|
||||
|属性名|类型|默认值|说明|
|
||||
| -- | -- | --|--|
|
||||
| value | Array<Number, Number> | [0,100] |滑块已选中区间的值|
|
||||
| min | Number| 0 | 滑块区间最小值 |
|
||||
| max | Number | 100 | 滑块区间最大值 |
|
||||
| step | Number | 1 | 拖动时的步长 |
|
||||
| disabled | Boolean | false | 是否为禁用状态 |
|
||||
| height | Number | 50 | 滑块容器高度 |
|
||||
| barHeight | Number | 5 | 滑块进度条高度 |
|
||||
| backgroundColor | String | #e9e9e9| 滑块进度条背景色|
|
||||
| activeColor | String | #1aad19 | 已选中区间进度条颜色|
|
||||
| blockSize | Number | 20 | 滑块大小 |
|
||||
| blockColor | String | #fff | 滑块颜色 |
|
||||
| decorationVisible | Boolean | false | 是否显示滑块内装饰元素|
|
||||
| tipVisible | Boolean | true | 是否显示滑块值提示文本 |
|
||||
| fomat| Function | | 滑块值提示文本格式化函数，**注意**：小程序中此属性必传，否则会报错，如果无需格式化，可以简单返回原始值： `format(val) { return val }`；H5中可以不传。|
|
||||
|
||||
|
||||
## 使用示例
|
||||
|
||||
```html
|
||||
|
||||
<slider-range
|
||||
:value="rangeValue"
|
||||
:min="rangeMin"
|
||||
:max="rangMax"
|
||||
:step="5"
|
||||
:bar-height="3"
|
||||
:block-size="26"
|
||||
background-color="#EEEEF6"
|
||||
active-color="#FF6B00"
|
||||
:format="format"
|
||||
:decorationVisible="true"
|
||||
@change="handleRangeChange"
|
||||
></slider-range>
|
||||
|
||||
|
||||
```
|
||||
|
||||
```javascript
|
||||
|
||||
import SliderRange from '../components/slider-range/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
SliderRange
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rangeMin: 5,
|
||||
rangMax: 200,
|
||||
rangeValue: [10, 50]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
format(val) {
|
||||
return val + '%'
|
||||
},
|
||||
handleRangeChange(e) {
|
||||
this.rangeValue = e
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
效果图
|
||||
|
||||
|
||||
@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<view
|
||||
class="slider-range"
|
||||
:class="{ disabled: disabled }"
|
||||
:style="{ paddingLeft: blockSize / 2 + 'px', paddingRight: blockSize / 2 + 'px' }"
|
||||
>
|
||||
<view class="slider-range-inner" :style="{ height: height + 'px' }">
|
||||
<view
|
||||
class="slider-bar"
|
||||
:style="{
|
||||
height: barHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<!-- 背景条 -->
|
||||
<view
|
||||
class="slider-bar-bg"
|
||||
:style="{
|
||||
backgroundColor: backgroundColor,
|
||||
}"
|
||||
></view>
|
||||
|
||||
<!-- 滑块实际区间 -->
|
||||
<view
|
||||
class="slider-bar-inner"
|
||||
:style="{
|
||||
width: ((values[1] - values[0]) / (max - min)) * 100 + '%',
|
||||
left: lowerHandlePosition + '%',
|
||||
backgroundColor: activeColor,
|
||||
}"
|
||||
></view>
|
||||
</view>
|
||||
|
||||
<!-- 滑动块-左 -->
|
||||
<view
|
||||
class="slider-handle-block"
|
||||
:class="{ decoration: decorationVisible }"
|
||||
:style="{
|
||||
backgroundColor: blockColor,
|
||||
width: blockSize + 'px',
|
||||
height: blockSize + 'px',
|
||||
left: lowerHandlePosition + '%',
|
||||
}"
|
||||
@touchstart="_onTouchStart"
|
||||
@touchmove="_onBlockTouchMove"
|
||||
@touchend="_onBlockTouchEnd"
|
||||
data-tag="lowerBlock"
|
||||
></view>
|
||||
|
||||
<!-- 滑动块-右 -->
|
||||
<view
|
||||
class="slider-handle-block"
|
||||
:class="{ decoration: decorationVisible }"
|
||||
:style="{
|
||||
backgroundColor: blockColor,
|
||||
width: blockSize + 'px',
|
||||
height: blockSize + 'px',
|
||||
left: higherHandlePosition + '%',
|
||||
}"
|
||||
@touchstart="_onTouchStart"
|
||||
@touchmove="_onBlockTouchMove"
|
||||
@touchend="_onBlockTouchEnd"
|
||||
data-tag="higherBlock"
|
||||
></view>
|
||||
|
||||
<!-- 滑块值提示 -->
|
||||
<view v-if="tipVisible" class="range-tip" :style="lowerTipStyle">{{ format(values[0]) }}</view>
|
||||
<view v-if="tipVisible" class="range-tip" :style="higherTipStyle">{{ format(values[1]) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
//滑块区间当前取值
|
||||
value: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [0, 100]
|
||||
},
|
||||
},
|
||||
//最小值
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
//最大值
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
format: {
|
||||
type: Function,
|
||||
default: function(val) {
|
||||
return val
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
//滑块容器高度
|
||||
height: {
|
||||
height: Number,
|
||||
default: 50,
|
||||
},
|
||||
//区间进度条高度
|
||||
barHeight: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
//背景条颜色
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#e9e9e9',
|
||||
},
|
||||
//已选择的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#1aad19',
|
||||
},
|
||||
//滑块大小
|
||||
blockSize: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
blockColor: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
tipVisible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
decorationVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
values: [this.min, this.max],
|
||||
startDragPos: 0, // 开始拖动时的坐标位置
|
||||
startVal: 0, //开始拖动时较小点的值
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 较小点滑块的坐标
|
||||
lowerHandlePosition() {
|
||||
return ((this.values[0] - this.min) / (this.max - this.min)) * 100
|
||||
},
|
||||
// 较大点滑块的坐标
|
||||
higherHandlePosition() {
|
||||
return ((this.values[1] - this.min) / (this.max - this.min)) * 100
|
||||
},
|
||||
lowerTipStyle() {
|
||||
if (this.lowerHandlePosition < 90) {
|
||||
return `left: ${this.lowerHandlePosition}%;`
|
||||
}
|
||||
return `right: ${100 - this.lowerHandlePosition}%;transform: translate(50%, -100%);`
|
||||
},
|
||||
higherTipStyle() {
|
||||
if (this.higherHandlePosition < 90) {
|
||||
return `left: ${this.higherHandlePosition}%;`
|
||||
}
|
||||
return `right: ${100 - this.higherHandlePosition}%;transform: translate(50%, -100%);`
|
||||
},
|
||||
},
|
||||
created: function() {},
|
||||
onLoad: function(option) {},
|
||||
watch: {
|
||||
//滑块当前值
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
if (this._isValuesValid(newVal) && (newVal[0] !== this.values[0] || newVal[1] !== this.values[1])) {
|
||||
this._updateValue(newVal)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
_updateValue(newVal) {
|
||||
// 步长大于区间差，或者区间最大值和最小值相等情况
|
||||
if (this.step >= this.max - this.min) {
|
||||
throw new RangeError('Invalid slider step or slider range')
|
||||
}
|
||||
|
||||
let newValues = []
|
||||
if (Array.isArray(newVal)) {
|
||||
newValues = [newVal[0], newVal[1]]
|
||||
}
|
||||
if (typeof newValues[0] !== 'number') {
|
||||
newValues[0] = this.values[0]
|
||||
} else {
|
||||
newValues[0] = Math.round((newValues[0] - this.min) / this.step) * this.step + this.min
|
||||
}
|
||||
if (typeof newValues[1] !== 'number') {
|
||||
newValues[1] = this.values[1]
|
||||
} else {
|
||||
newValues[1] = Math.round((newValues[1] - this.min) / this.step) * this.step + this.min
|
||||
}
|
||||
|
||||
// 新值与原值相等，不做处理
|
||||
if (this.values[0] === newValues[0] && this.values[1] === newValues[1]) {
|
||||
return
|
||||
}
|
||||
// 左侧滑块值小于最小值时，设置为最小值
|
||||
if (newValues[0] < this.min) {
|
||||
newValues[0] = this.min
|
||||
}
|
||||
// 右侧滑块值大于最大值时，设置为最大值
|
||||
if (newValues[1] > this.max) {
|
||||
newValues[1] = this.max
|
||||
}
|
||||
// 两个滑块重叠或左右交错，使两个滑块保持最小步长的间距
|
||||
if (newValues[0] >= newValues[1]) {
|
||||
// 左侧未动，右侧滑块滑到左侧滑块之左
|
||||
if (newValues[0] === this.values[0]) {
|
||||
newValues[1] = newValues[0] + this.step
|
||||
} else {
|
||||
// 右侧未动， 左侧滑块滑到右侧之右
|
||||
newValues[0] = newValues[1] - this.step
|
||||
}
|
||||
}
|
||||
|
||||
this.values = newValues
|
||||
this.$emit('change', this.values)
|
||||
},
|
||||
_onTouchStart: function(event) {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
this.isDragging = true
|
||||
let tag = event.target.dataset.tag
|
||||
|
||||
//兼容h5平台及某版本微信
|
||||
let e = event.changedTouches ? event.changedTouches[0] : event
|
||||
this.startDragPos = e.pageX
|
||||
|
||||
this.startVal = tag === 'lowerBlock' ? this.values[0] : this.values[1]
|
||||
},
|
||||
_onBlockTouchMove: function(e) {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
this._onDrag(e)
|
||||
},
|
||||
_onBlockTouchEnd: function(e) {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
this.isDragging = false
|
||||
this._onDrag(e)
|
||||
},
|
||||
_onDrag(event) {
|
||||
if (!this.isDragging) {
|
||||
return
|
||||
}
|
||||
let view = uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select('.slider-range-inner')
|
||||
|
||||
view
|
||||
.boundingClientRect(data => {
|
||||
let sliderWidth = data.width
|
||||
const tag = event.target.dataset.tag
|
||||
let e = event.changedTouches ? event.changedTouches[0] : event
|
||||
let diff = ((e.pageX - this.startDragPos) / sliderWidth) * (this.max - this.min)
|
||||
let nextVal = this.startVal + diff
|
||||
|
||||
if (tag === 'lowerBlock') {
|
||||
this._updateValue([nextVal, null])
|
||||
} else {
|
||||
this._updateValue([null, nextVal])
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
},
|
||||
_isValuesValid: function(values) {
|
||||
return Array.isArray(values) && values.length == 2
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slider-range {
|
||||
position: relative;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
.slider-range-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider-range.disabled .slider-bar-inner {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.slider-range.disabled .slider-handle-block {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.slider-bar {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.slider-bar-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10000px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.slider-bar-inner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10000px;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.slider-handle-block {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 3px 2px rgba(227, 229, 241, 0.5);
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.slider-handle-block.decoration::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 6upx;
|
||||
height: 24upx;
|
||||
top: 50%;
|
||||
left: 29%;
|
||||
transform: translateY(-50%);
|
||||
background: #eeedf2;
|
||||
border-radius: 3upx;
|
||||
z-index: 13;
|
||||
}
|
||||
|
||||
.slider-handle-block.decoration::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 6upx;
|
||||
height: 24upx;
|
||||
top: 50%;
|
||||
right: 29%;
|
||||
transform: translateY(-50%);
|
||||
background: #eeedf2;
|
||||
border-radius: 3upx;
|
||||
z-index: 13;
|
||||
}
|
||||
|
||||
.range-tip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 24upx;
|
||||
color: #666;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="demo-slider-range">
|
||||
<view class="section-title">普通用法</view>
|
||||
<view class="slider-item">
|
||||
<slider-range
|
||||
:value="slider1.rangeValue"
|
||||
:min="slider1.min"
|
||||
:max="slider1.max"
|
||||
:step="slider1.step"
|
||||
:bar-height="barHeight"
|
||||
:block-size="blockSize"
|
||||
:background-color="backgroundColor"
|
||||
:format="format1"
|
||||
@change="handleRangeChange"
|
||||
></slider-range>
|
||||
</view>
|
||||
<view class="section-title">自定义</view>
|
||||
<view class="slider-item">
|
||||
<slider-range
|
||||
:value="slider2.rangeValue"
|
||||
:min="slider2.min"
|
||||
:max="slider2.max"
|
||||
:step="slider2.step"
|
||||
:bar-height="barHeight"
|
||||
:block-size="blockSize"
|
||||
:background-color="backgroundColor"
|
||||
:active-color="slider2.activeColor"
|
||||
:format="format2"
|
||||
:decorationVisible="slider2.decorationVisible"
|
||||
@change="handleRangeChange"
|
||||
></slider-range>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SliderRange from '../../components/slider-range/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
SliderRange,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
barHeight: 3,
|
||||
blockSize: 26,
|
||||
backgroundColor: '#EEEEF6',
|
||||
slider1: {
|
||||
min: 50,
|
||||
max: 200,
|
||||
step: 10,
|
||||
rangeValue: [50, 150],
|
||||
},
|
||||
slider2: {
|
||||
rangeMin: 0,
|
||||
rangMax: 100,
|
||||
rangeValue: [8, 80],
|
||||
step: 1,
|
||||
activeColor: '#FF6B00',
|
||||
decorationVisible: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
format1(val) {
|
||||
return val
|
||||
},
|
||||
format2(val) {
|
||||
return `${val}%`
|
||||
},
|
||||
handleRangeChange(e) {
|
||||
this.rangeValue = e
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-slider-range {
|
||||
background-color: #fff;
|
||||
padding: 100rpx 40rpx 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
padding: 0 0 20rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.slider-item:not(:last-child) {
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,411 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.MasterItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.MasterItem_left {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.MasterItem_right {
|
||||
flex: 1;
|
||||
margin-left: 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.MasterItem_info {
|
||||
box-sizing: border-box;
|
||||
padding: 12rpx 0 20rpx 20rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.MasterItem_more {
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FF370B;
|
||||
padding: 30rpx 0;
|
||||
border-top: 1rpx solid #EBEBEB;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
@ -1,5 +1,176 @@
|
||||
<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_left">
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
林师傅
|
||||
<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="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 class="MasterItem_more" @click="masterInfo">
|
||||
查看资料
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Btn">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
@ -12,19 +183,26 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
top: "",
|
||||
localHeight: ""
|
||||
localHeight: "",
|
||||
show1:false,
|
||||
show2:false,
|
||||
show3:false,
|
||||
show4:false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
masterInfo(){
|
||||
NavgateTo("../masterInfo/index")
|
||||
},
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
onload(options) {
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
// this.top = meun.height + meun.top;
|
||||
this.localHeight = meun.height;
|
||||
},
|
||||
onShow() {
|
||||
|
||||
@ -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>
|
||||
@ -0,0 +1,189 @@
|
||||
.banner {
|
||||
margin: 0 auto;
|
||||
margin-top: 30rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 20rpx;
|
||||
width: 100%;
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.serverTitBox {
|
||||
padding: 30rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.serverTit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.serverTit_right {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.serverTit_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 40rpx;
|
||||
color: #222222;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.msg {
|
||||
font-size: 26rpx;
|
||||
color: #E9BE62;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 36rpx;
|
||||
}
|
||||
|
||||
.serverCon {
|
||||
margin-top: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.priceSelect {
|
||||
padding: 24rpx 20rpx;
|
||||
}
|
||||
|
||||
.serverList {
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.serverListTit {
|
||||
font-size: 63rpx;
|
||||
color: #222222;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.serverItem {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #EBEBEB;
|
||||
}
|
||||
|
||||
.serverItem_left {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
margin-right: 14rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.serverItem_right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.msg_tit {
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.msg_price {
|
||||
font-size: 26rpx;
|
||||
color: rgba(153, 153, 153, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.msg_price span {
|
||||
color: #FF370B;
|
||||
}
|
||||
|
||||
.serverItem_right_btn {
|
||||
width: 180rpx;
|
||||
height: 50rpx;
|
||||
background: #FF370B;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.serverItem_right_btn .more {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
/* 防止内容溢出 */
|
||||
|
||||
}
|
||||
|
||||
.minPrice,
|
||||
.maxPrice {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
background: #F6F7FB;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.slider-range {
|
||||
flex: 1 !important;
|
||||
margin: 0 10rpx;
|
||||
/* 添加左右间距 */
|
||||
min-width: 0;
|
||||
/* 防止 flex 子项溢出 */
|
||||
}
|
||||
@ -1,5 +1,65 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<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="line"></div>
|
||||
<div class="serverTitBox">
|
||||
<div class="serverTit">
|
||||
<div class="serverTit_left">
|
||||
<div class="tit">空调清洗</div>
|
||||
<div class="msg">
|
||||
平台保障
|
||||
</div>
|
||||
</div>
|
||||
<div class="serverTit_right">已预约100+</div>
|
||||
</div>
|
||||
<div class="serverCon">专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="priceSelect">
|
||||
<div class="tit">价格范围</div>
|
||||
|
||||
<div class="range">
|
||||
<div class="minPrice">￥10</div>
|
||||
<slider-range style="flex: 1;" :value="rangeValue" :min="rangeMin" :max="rangeMax" :step="5" :bar-height="3"
|
||||
:block-size="26" background-color="#EEEEF6" active-color="#FF6B00" :format="format"
|
||||
:decorationVisible="true" @change="handleRangeChange"></slider-range>
|
||||
<div class="maxPrice">￥39</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="serverList">
|
||||
<div class="serverListTit">匹配的服务商(3)</div>
|
||||
|
||||
<div class="serverItem">
|
||||
<div class="serverItem_left">
|
||||
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||
</div>
|
||||
<div class="serverItem_right">
|
||||
<div class="serverItem_right_msg">
|
||||
<div class="msg_tit">安心家政</div>
|
||||
<div class="msg_price">价格范围： <span>￥80-￥150</span></div>
|
||||
</div>
|
||||
|
||||
<div class="serverItem_right_btn" @click="selectMaster">
|
||||
选择师傅
|
||||
<div class="more">
|
||||
<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
@ -7,22 +67,38 @@
|
||||
<script>
|
||||
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
||||
import { apiArr } from '../../../api/reservation';
|
||||
import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// 注册组件
|
||||
SliderRange
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: "",
|
||||
localHeight: ""
|
||||
localHeight: "",
|
||||
rangeMin: 5,
|
||||
rangeMax: 200,
|
||||
rangeValue: [10, 50]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
format(val) {
|
||||
return val + '%'
|
||||
},
|
||||
handleRangeChange(e) {
|
||||
this.rangeValue = e
|
||||
},
|
||||
selectMaster(){
|
||||
NavgateTo("../chooseMaster/index")
|
||||
},
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
onload(options) {
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
|
||||
@ -640,8 +640,8 @@
|
||||
"path": "serverInfo/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "服务详情"
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user