<template>


  <view class="personnel_list">
    <view class="cards">
      <view class="cards_head">
        <text style="font-size: 32rpx">最后更新:2020-25-2</text>
        <text>更新档案</text>
        <text>查看档案</text>
      </view>
      <view class="cards_content">
        <view class="right">
          <view class="">
            <text>人员姓名 :</text>
            <text> { item.name }</text>
          </view>
          <view class="">
            <text>联系电话 :</text>
            <text>{ item.phone }</text>
          </view>
          <view class="">
            <text>所属片区 :</text>
            <text> 所属片区 </text>
          </view>
        </view>

        <view class="left">
          <view class="cir">
            <u--image
              class="u_avatar"
              :showLoading="true"
              :src="'../../static/img/public/man.png'"
              width="112.28rpx"
              height="112.28rpx"
              shape="circle"
            ></u--image>
          </view>
        </view>
      </view>
    </view>
  </view>


</template>

<style lang="scss">

.personnel_list {
  padding: 28rpx 0;
  margin-bottom: 130rpx;

  .cards {
    margin: 0 auto;
    margin-bottom: 28rpx;
    width: 694rpx;
    background: #ffffff;
    border-radius: 30rpx;
    opacity: 1;
    overflow: hidden;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

    .cards_head {
      padding: 28rpx;
      background-color: $theme-oa-color;
      color: white;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
    }

    .cards_content {
      padding: 28rpx;
      display: flex;
      justify-content: space-between;

      .left {
        text-align: center;
        // padding: 15rpx 25rpx;
        padding-top: 20rpx;

        width: 160rpx;
        background-color: $theme-oa-color;
        color: white;
        border-radius: 40rpx;

        .cir {
          width: 120rpx;
          height: 120rpx;
          background-color: #ffffff;
          margin-left: 25rpx;
          border-radius: 120rpx;
          position: relative;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        view {
          text:nth-child(2) {
            margin-left: 20rpx;
          }
        }
      }
    }

    .u_avatar {
      position: absolute;
      top: 50%;
      left: 50%;

      transform: translate(-50%, -50%);
    }
  }
}

</style>
