<template>
  <view>
    <cpn-navbar title="预约护理" :is-back="true"></cpn-navbar>

    <view>
      <!-- 用户信息 -->
<!--      <view class="user-info" v-if="detail.customer">-->
<!--        <view class="top">-->
<!--          <view class="left">-->
<!--            <u-image :src="detail.customer.sex === '男' ? vuex_male_img : vuex_female_img" width="104"-->
<!--                     height="104" shape="circle"></u-image>-->
<!--          </view>-->
<!--          <view class="center">-->
<!--            <view class="name">{{detail.customer.name}}</view>-->
<!--            <view class="infos">-->
<!--              <view class="age">{{ageComputed(detail.customer.idcard)}}岁-->
<!--              </view>-->
<!--              <view class="sex">{{detail.customer.sex}}</view>-->
<!--              <view class="organ">机构护理</view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="right">-->
<!--            <template v-if="detail.status === 0">-->
<!--              <view class="icon1"></view>-->
<!--              <view>待护理</view>-->
<!--            </template>-->
<!--            <template v-if="detail.status === 1">-->
<!--              <view class="icon3"></view>-->
<!--              <view>护理中</view>-->
<!--            </template>-->
<!--            <template v-if="detail.status === 2">-->
<!--              <view class="icon2"></view>-->
<!--              <view>已护理</view>-->
<!--            </template>-->
<!--          </view>-->
<!--        </view>-->

<!--        <view class="line"></view>-->

<!--        <view class="bottom">-->
<!--          <view class="client">-->
<!--            <u-icon name="/static/detail/people.png" width="26" height="26"></u-icon>-->
<!--            <view>委托人：{{detail.customer.contact_name}}</view>-->
<!--          </view>-->
<!--          <view class="address">-->
<!--            <u-icon name="map" width="28" height="28" color="#1479FF"></u-icon>-->
<!--            <view>{{ addressFormat(detail.customer.customer_address) }}</view>-->
<!--          </view>-->
<!--          <view class="phone">-->
<!--            <u-icon name="phone" width="28" height="28" color="#1479FF"></u-icon>-->
<!--            <view>{{detail.customer.phone}}</view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style lang="scss">
.user-info {
  width: 710rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

  margin: 40rpx auto 0 auto;
  position: relative;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding-top: 34rpx;
    padding-bottom: 30rpx;

    .left {
      padding-left: 20rpx;
    }

    .center {
      flex: 1;

      padding-left: 24rpx;

      .name {
        height: 48rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        line-height: 24rpx;
      }

      .infos {
        display: flex;
        align-items: center;

        padding-top: 20rpx;

        .age {
          height: 34rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #A7AFBC;
          line-height: 34rpx;
        }

        .sex {
          width: 40rpx;
          height: 40rpx;
          background: #FDECEC;
          opacity: 0.5;
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          text-align: center;
          line-height: 40rpx;

          margin-left: 20rpx;
        }

        .organ {
          width: 140rpx;
          height: 40rpx;
          background: #F9F9F9;
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          line-height: 40rpx;
          text-align: center;

          margin-left: 20rpx;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;

      padding-right: 20rpx;
    }
  }

  .line {
    width: 670rpx;
    height: 2rpx;
    border: 2rpx solid #EEEFF5;

    margin: 30rpx auto 0 auto;
  }

  .bottom {

    padding: 26rpx 0 34rpx 24rpx;
    position: relative;

    .bottom-item {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #36596A;

      &>view {
        padding-left: 16rpx;
      }
    }

    .client {
      @extend .bottom-item;
    }

    .address {
      @extend .bottom-item;

      padding-top: 18rpx;
    }

    .phone {
      @extend .bottom-item;

      padding-top: 18rpx;
    }
  }

  .re-location {
    display: flex;
    align-items: center;

    position: absolute;
    bottom: 36rpx;
    right: 20rpx;

    .text {
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #A7AFBC;
      line-height: 34rpx;

      padding-right: 8rpx;
    }
  }
}
</style>
