.top {
  height: 158rpx;
  display: flex;
  justify-content: space-between;
  position: relative;

  .top-one {
    // padding-top: 15rpx;
    padding-left: 30rpx;

    .top-two {
      width: 250rpx;
      padding-left: 25rpx;
    }

    .head {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
    }

    .head image {
      width: 100%;
      height: 100%;
    }

    // .top-portrait-pic {
    //   border-radius: 50% !important;
    //   width: 120rpx !important;
    //   height: 120rpx !important;
    // }

    .top-name {
      padding-bottom: 15rpx;
      margin-top: 15rpx;
      font-size: 30rpx;
      font-weight: bold;
      white-space: nowrap;
    }

    .top-sex {
      width: 26rpx;
      height: 26rpx;
      margin-left: 8rpx;
      margin-top: 6rpx;
    }

    .top-quan {
      width: 72rpx;
      height: 34rpx;
      background: #fafafa;
      border: 1px solid #67c23a;
      border-radius: 8rpx;
      color: #67c23a;
      font-size: 24rpx;
      margin-left: 10rpx;
      margin-top: 4rpx;
      text-align: center;
      line-height: 30rpx;
    }

    .top-info {
      font-size: 24rpx;
      color: #999999;
      width: 350rpx;
    }
  }

  .top-btn {
    position: absolute;
    top: 50rpx;
    right: 50rpx;
  }
}

.top-line {
  height: 10rpx;
  color: #f2f2f2 100%;
}

.title {
  display: flex;
  justify-content: space-between;
}

.card-title {
  display: flex;
  justify-content: space-between;
  background-color: #4395f9;
}

.card {
  height: 300rpx;
  width: 675rpx;
  margin-left: 35rpx;
}

.card-contain text {
  color: #999999;
  margin-top: 20rpx;
}

.card-contain-message {
  margin-top: 20rpx;
}

.grey-line {
  height: 14rpx;
  background: #f2f2f2;
}

.add-remote {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  right: 30rpx;
  bottom: 100rpx;
}

.contain {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #dcdcdd;
  height: 150rpx;
}

.contain-icon {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}

.contain-title {
  display: flex;
  justify-content: space-around;
}

// .scroll-view {
//   height: calc(100vh - 44px);
//   width: 100%;
//   background: #fafafa;

// }

.list {
  background: #fafafa;
  // padding: 26rpx 38rpx;
  .bar {
    padding: 12rpx 30rpx;
    background: #f2f2f2;
  }
  .item {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      transform: translateY(0.5);
      background-color: #f2f2f2;
    }
    // margin-bottom: 26rpx;
  }
}
.empty-box {
  padding-top: 15vh;
}

.contain-box {
  padding: 30rpx 138rpx;
  .box-flex {
    .box-image {
      width: 90rpx;
      height: 90rpx;
    }
  }
}
