.container {
  padding: 24rpx 0;
  color: #fff;

  .userinfo {
    margin: 0 auto;
    width: 714rpx;
    text-align: center;
    position: relative;
    height: 220rpx;

    >image {
      width: 100%;
      height: 100%;
    }

    .usercon {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      font-size: 0;
      left: 0;

      .icon {
        width: 160rpx;
        height: 160rpx;
        position: absolute;
        top: 20rpx;
        left: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        >image{
          width: 33.3%;
          height: 33.3%;
        }
      }

      .roominfo {
        position: absolute;
        top: 10rpx;
        left: 236rpx;
        width: 100%;

        >view {
          color: #fff;
          font-size: 28rpx;
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          width: calc(100% - 280rpx);
          margin-top: 6rpx;

          >text {
            &.date {
              font-weight: normal;
            }
          }
        }
      }


      .barcon {
        position: absolute;
        top: 110rpx;
        left: 232rpx;
        display: flex;
        align-items: center;

        .bar {
          width: 130rpx;
          height: 68rpx;
          background: #012b4f;
          clip-path: polygon(0 0%, 100% 0, 96% 96%, 0 100%);
          display: flex;
          align-items: center;
          padding: 0 20rpx;
          box-sizing: border-box;
          justify-content: space-between;

          >image {
            width: 36rpx;
          }

          >text {
            font-size: 34rpx;
            font-weight: bold;
            white-space: nowrap; 
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
          }

         

        }

        .rbar{
          width: 164rpx;
          clip-path: polygon(0% 4%, 100% 0, 94% 96%, 0 98%);
          margin-left: 20rpx;
        }

        .txt_img{
          width: 36rpx;
          margin-left: 16rpx;
        }

        .txt_img1{
          width: 60rpx;
          margin-left: 6rpx;
        }
      }



    }
  }

  .record {
    width: 686rpx;
    height: calc(100% - 490rpx);
    margin: 40rpx auto 0;
    position: relative;
    >view {
      padding: 30rpx 20rpx;
      background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.9) 100%);
      box-shadow: 6rpx 10rpx 27rpx 0rpx rgba(75, 126, 160, 0.6);
      box-sizing: border-box;
      border: 5rpx solid #fff;
      border-radius: 10rpx;
      height: 100%;
      color: #765842;
      transition: all .3s ease;

    }

    .re_detail {
      width: 100%;
    }

    .re_header {
      font-size: 32rpx;
      width: 100%;
      border-bottom: 4rpx solid #fff;
      padding: 10rpx 30rpx 30rpx;
      color: #4C2508;
      box-sizing: border-box;
      text-align: center;

      >image {
        height: 58rpx;
        display: inline-block;
        vertical-align: middle;
      }

      .jiantou {
        height: 40rpx;
        margin-right: 20rpx;
      }

    }

 
    .re_list {
      padding: 36rpx 10rpx;
      color: #765842;
      height: calc(100% - 120rpx);

      .lst_header,
      .lst_item {
        display: flex;
        justify-content: space-between;
        width: 100%;

        >text {
          width: 20%;
          text-align: center;

          &:first-of-type {
            width: 14%;
            margin-left: 50rpx;
          }

          &:nth-of-type(2) {
            width: 30%;
          }
        }
      }

      .lst_con {
        height: calc(100% - 84rpx);
        overflow-y: auto;
        overflow-x: hidden;
      }

      .lst_header {
        font-weight: bold;
        font-size: 34rpx;
        margin-bottom: 30rpx;
      }

      .lst_item {
        margin-bottom: 40rpx;
        position: relative;
        >image{
          position: absolute;
          display: none;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
        }
      }

      .itemactive{
        color: #FFB618;
        >image{
          display: inline-block;
          width: 50rpx;
        }
      }
    }
  }

  .btn_con{
    width: 686rpx;
    margin: 44rpx auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >image{
      width: 50%;
    }
    >view{
      width: 50%;
      position: relative;
      >image{
        width: 100%;
      }
      >button{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: 0;
        z-index: 999;
      }
    }
  }
}