<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>

<script>
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
import { apiArr } from '../../../api/reservation';

export default {
    data() {
        return {
            top: "",
            localHeight: ""
        }
    },
    methods: {

    },
    onReady() {

    },

    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        this.localHeight = meun.height;
    },
    onShow() {

    },

    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom() {

    },

}
</script>

<style>
@import url("./index.css");

/* 添加渐变色样式 */
.gradient-progress .u-line-progress__active {
    background: linear-gradient( 90deg, #FFFFFF 0%, #FF370B 100%);
}
</style>