<template>
    <view style="height: 100%">
        <custom-nav-bar position="fixed" color="black" left-text="我的家庭医生" left-arrow border />

        <block>
            <view class="doctor-my flex flex-col flex-center">
                <view class="title">请对此服务做出评价</view>
                <view class="title-into flex flex-col flex-center">
                    <text>管理指导机构：宋古乡卫生院</text>
                    <text>联系电话：0</text>
                </view>
            </view>
            <view class="mediate-select-list">
                <view class="mediate-select-item flex" v-for="(item, index) in 3" :key="index">
                    <view class="select-left">
                        <image src="" class="mediate-head"></image>
                    </view>

                    <view class="select-right flex1 flex flex-col flex-between">
                        <view class="select-title flex flex-v-center flex-between">
                            <text class="name name-doctor">测试</text>
                        </view>
                        <view class="select-msg flex flex-col">
                            <text>管理指导机构：宋古乡卫生院</text>
                            <text>联系电话：0</text>
                        </view>
                    </view>
                </view>
            </view>
        </block>

        <view class="msg-content flex flex-col flex-v-center">
            <text class="msg-explain">您尚未签约家庭医生团队</text>
            <view class="msg-state flex flex-center flex-col">
                <image class="msg-state-img" src="https://zongzhi.xuqidata.com:5009/xq-ssg/77a936e8a4f5e388816ad7b3d31625336f782a62e946cf2d32517db731ce1cc5.png"></image>
                <text class="msg-state-text">未申请</text>
            </view>
            <view class="msg-bth">申请签约家庭医生</view>
        </view>
    </view>
</template>

<script>
// packages/people/pages/doctor-my/doctor-my.js
export default {
    data() {
        return {};
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {}
};
</script>
<style lang="less">
.doctor-my {
    margin-top: 51rpx;

    .title {
        font-size: 36rpx;
        font-weight: 500;
        color: #000000;
        line-height: 36rpx;
        padding-left: 6rpx;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            z-index: -1;
            width: 150rpx;
            height: 10rpx;
            background: var(--title-guides-color);
            border-radius: 2rpx;
            transform: translateX(-50%);
        }
    }

    .title-into {
        margin-top: 25rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        line-height: 40rpx;
    }
}

.mediate-select-list {
    margin-top: 54rpx;
    width: 100%;

    .mediate-select-item {
        padding: 24rpx 0;
        border-top: 1px solid #efefef;

        .select-left {
            width: 218rpx;
            height: 218rpx;

            .mediate-head {
                width: 100%;
                height: 100%;
                border-radius: 8rpx;
            }
        }

        .select-right {
            margin-left: 20rpx;

            .select-title {
                margin-top: 27rpx;

                .name {
                    font-size: 32rpx;
                    font-weight: 400;
                    color: #333333;
                    line-height: 32rpx;
                    border-radius: 2rpx;
                    padding-right: 52rpx;
                }

                .name-doctor {
                    background: linear-gradient(94deg, #ffffff 0%, #1593f7 100%);
                }

                .name-red {
                    background: linear-gradient(94deg, #ffffff 0%, #fd3352 100%);
                }

                .name-green {
                    background: linear-gradient(94deg, #ffffff 0%, #09c3ae 100%);
                }
            }

            .select-msg {
                margin-top: 24rpx;
                height: 100%;
                font-size: 26rpx;
                font-weight: 400;
                color: #333333;
                line-height: 32rpx;
            }
        }
    }
}

.msg-content {
    padding-top: 150rpx;
    .msg-explain {
        font-size: 36rpx;
        font-weight: 500;
        color: #666666;
        line-height: 50rpx;
    }

    .msg-state {
        margin-top: 80rpx;
        width: 400rpx;
        height: 300rpx;
        background: url('https://zongzhi.xuqidata.com:5009/xq-ssg/77a936e8a4f5e388816ad7b3d31625336f782a62e946cf2d32517db731ce1cc5.png');
        background-size: 100% 100%;

        .msg-state-img {
            width: 108rpx;
            height: 108rpx;
        }

        .msg-state-text {
            margin-top: 25rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #666666;
            line-height: 32rpx;
        }
    }

    .msg-bth {
        margin-top: 149rpx;
        width: 500rpx;
        height: 100rpx;
        background: #0091ff;
        border-radius: 50rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 100rpx;
        text-align: center;
    }
}
</style>
