//引入全局配置
@import "c/conf";
@import "c/mx";
@import "c/f";
@import "a/c";

page {
  background-color: $bgc1;
  padding-bottom: 20rpx;
}

.m-list {
  .list {
    .item {
      position: relative;
      margin: 20rpx auto;
      width: 710rpx;
      height: 200rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      overflow: hidden;

      .pic {
        position: absolute;
        top: 0;
        left: 0;
        width: 200rpx;
        height: 200rpx;

        .pic-bg {
          display: block;
          width: 200rpx;
          height: 200rpx;
          opacity: 0.1;
        }
        .pic-show {
          display: block;
          position: absolute;
          right: -10rpx;
          bottom: 0;
          width: 120rpx;
          height: 120rpx;
        }
      }

      .info {
        position: absolute;
        left: 240rpx;
        top: 50%;
        width: 240rpx;
        transform: translateY(-50%);

        .name {
          @include toeM(3);
          display: block;
          line-height: 50rpx;
          font-size: 34rpx;
          color: $fc1;
        }

        .status {
          line-height: 30rpx;
          image {
            margin-right: 10rpx;
            width: 30rpx;
            height: 30rpx;
            vertical-align: bottom;
          }
          text {
            font-size: 26rpx;
            color: $fc3;
          }

          &.z-on {
          }
        }
      }
      .operate {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 40rpx;
        height: 60rpx;
        margin: auto 0;

        .btn {
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          background: #e60000;
          border-radius: 30rpx;
          font-size: 26rpx;
          color: #ffffff;

          &.z-grey {
            background-color: #999999;
          }
        }
      }
    }
  }
}