$page-margin: 40rpx;
page {
  background-color: #fafafa;
}

.page {
  position: relative;
  min-height: 100vh;
  .bg {
    margin-top: 96rpx;
    width: 100%;
  }
  .drug-bg {
    width: 100%;
  }
  .page-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 180rpx;
    .user {
      margin: 53rpx $page-margin 0;
      display: flex;
      align-items: center;
      .avatar {
        width: 87rpx;
        height: 87rpx;
        border-radius: 50%;
      }
      .content {
        margin-left: 33rpx;
        .name {
          font-size: 32rpx;
          color: #333333;
          font-weight: bold;
          line-height: 48rpx;
        }
        .info {
          font-size: 24rpx;
          color: #999999;
          line-height: 48rpx;
          .num {
            font-size: 32rpx;
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }
    .referral {
      margin: $page-margin $page-margin 0;
      .referral-img {
        margin-left: -20rpx;
        width: calc(100% + 20rpx);
        height: 234rpx;
      }
    }
    .doctor {
      margin: $page-margin $page-margin 0;
      padding: 70rpx 10rpx 10rpx;
      border-radius: 24rpx;
      .container {
        padding: 27rpx 0 27rpx 27rpx;
        display: flex;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 21rpx;
        .avatar {
          width: 104rpx;
          height: 104rpx;
          .a-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 3rpx solid #fff;
            box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(52, 44, 46, 0.17);
          }
        }
        .wrap {
          padding: 6rpx 16rpx 0;
          flex: 1;
          .name-wrap {
            display: flex;
            .name {
              position: relative;
              font-size: 36rpx;
              color: rgba(51, 51, 51, 1);
              font-weight: bold;
              display: flex;
              align-items: center;
              line-height: 40rpx;
              .n-content {
                max-width: 8em;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .bubble {
                margin-left: 8rpx;
                padding: 0 14rpx;
                height: 30rpx;
                line-height: 30rpx;
                box-sizing: border-box;
                text-align: center;
                font-size: 22rpx;
                color: rgba(255, 255, 255, 1);
                background: #ee951b;
                border-radius: 32rpx;
                position: relative;
                &::after {
                  position: absolute;
                  left: 14rpx;
                  bottom: -8rpx;
                  content: '';
                  width: 0;
                  height: 0;
                  border-style: solid;
                  border-width: 13rpx 13rpx 0 0;
                  border-color: #ee951b transparent transparent transparent;
                }
              }
            }
            .icon {
              margin-left: 4rpx;
              margin-top: -20rpx;
              display: inline-block;
              width: 36rpx;
              height: 24rpx;
            }
          }
          .content {
            margin-top: 16rpx;
            font-size: 26rpx;
            line-height: 38rpx;
            color: rgba(51, 51, 51, 1);
          }
          .hostipal {
            margin-top: 16rpx;
            font-size: 28rpx;
            color: #999999;
            line-height: 36rpx;
            overflow: hidden;
            .h-content {
              margin-right: 16rpx;
              display: inline;
            }
            .tag {
              display: inline-block;
              padding: 4rpx 12rpx;
              font-size: 22rpx;
              line-height: 1;
              color: #ffffff;
              background: #ee951b;
              line-height: 24rpx;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
            }
          }
        }
        .btn {
          align-self: center;
          width: 151rpx;
          height: 44rpx;
          font-size: 28rpx;
          color: #cf5375;
          background: linear-gradient(136deg, #ebeffe 0%, #fce3ec 100%), #ffffff;
          border-radius: 420rpx 0 0 420rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      &.doctor-drugs {
        .container {
          .btn {
            color: #ffffff;
            background: rgba(37, 217, 200, 1);
          }
        }
      }
    }
    .banner {
      margin: $page-margin;
      .swiper {
        width: 100%;
        height: 280rpx;
        .swiper-item {
          display: block;
          width: 100%;
          height: 240rpx;
          box-sizing: border-box;
          border-radius: 20rpx;
          .swiper-item-img {
            width: 100%;
            height: 100%;
          }
        }

        .wx-swiper-dot-active {
          width: 30rpx !important;
        }

        .wx-swiper-dot {
          width: 9rpx;
          height: 6rpx;
          border-radius: 2rpx;
        }
      }
    }
    .adl {
      position: relative;
      margin: $page-margin;
      .adl-bg {
        width: 100%;
        height: 240rpx;
      }
      .adl-container {
        padding: 63rpx 40rpx 24rpx;
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        .other {
          .new {
            position: absolute;
            left: -22rpx;
            top: 9rpx;
            .icon {
              width: 123rpx;
              height: 59rpx;
            }
            .new-text {
              position: absolute;
              width: 68rpx;
              height: 26rpx;
              top: 13rpx;
              left: 18rpx;
            }
          }
          .adl-title {
            width: 334rpx;
            height: 86rpx;
          }
          .title {
            font-size: 44rpx;
            font-weight: bold;
            color: #fff;
            line-height: 48rpx;
            .blod {
              // font-size: 50rpx;
            }
          }
          .num {
            font-size: 25rpx;
            line-height: 36rpx;
            color: #fff;
          }
          .status {
            margin-top: 18rpx;
            padding: 0 25rpx;
            display: inline-block;
            font-size: 22rpx;
            color: #e04775;
            background-color: #fff;
            border-radius: 17rpx;
          }
          .btn {
            margin-top: 10rpx;
            width: 206rpx;
            height: 54rpx;
            border-radius: 30rpx;
            text-align: center;
            line-height: 54rpx;
            background: #ffffff linear-gradient(136deg, #e6edfe 0%, #fee0ea 100%);
            opacity: 1;
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #cf5375;
            font-weight: bold;
            .icon {
              width: 21rpx;
              height: 21rpx;
              margin-left: 9rpx;
            }
          }
          .o-aside {
            position: absolute;
            top: 7rpx;
            right: 0;
            .badge {
              width: 302rpx;
              height: 233rpx;
            }
          }
        }
      }
      &.adl-drugs {
        .adl-container {
          .other {
            .title {
              color: #fff;
            }
            .num {
              color: #fff;
            }
            .status {
              color: #24d8c8;
            }
            .btn {
              width: 206rpx;
              height: 54rpx;
              background: #ffffff;
              font-size: 28rpx;
              color: #25d9c8;
              font-weight: bold;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 32rpx 32rpx 32rpx 32rpx;
              .icon {
                width: 21rpx;
                height: 21rpx;
              }
            }
            .o-aside {
              .box {
                .change {
                  color: #ffffff;
                }
                .center {
                  background: linear-gradient(163deg, #fcfcfc 70%, #2fdbca 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }
                .b-line {
                  background: linear-gradient(61deg, #ffffff 30%, #f08f35 49%, #e55273 100%);
                  &::after {
                    border-color: transparent transparent #fff transparent;
                  }
                }
              }
            }
          }
        }
      }
    }
    .drug-record {
      position: relative;
      margin: $page-margin $page-margin 64rpx;
      padding: 24rpx 40rpx;
      border-radius: 24rpx;
      background: linear-gradient(to bottom, #25d9c8 0%, #a8ede6 100%);
      .d-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .status {
          display: flex;
          align-items: center;
          .name {
            margin-right: 10rpx;
            font-size: 28rpx;
            color: #fff;
            font-weight: bold;
          }
          .icons {
            display: flex;
            align-items: center;
            .icon {
              margin-right: 14rpx;
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
        .more {
          font-size: 24rpx;
          color: #ffffff;
        }
      }
      .d-line {
        margin: 31rpx 0 25rpx;
        width: 26rpx;
        height: 4rpx;
        background: #ffffff;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
      }
      .date {
        .d-name {
          font-size: 24rpx;
          color: #ffffff;
        }
        .d-str {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #ffffff;
          font-weight: bold;
          .week {
            font-weight: bold;
            margin-left: 10rpx;
            font-size: 20rpx;
            color: #26dac9;
            width: 55rpx;
            height: 24rpx;
            line-height: 24rpx;
            text-align: center;
            border-radius: 6rpx 6rpx 6rpx 6rpx;
            background: #ffffff;
          }
        }
      }
      .d-card {
        min-width: 300rpx;
        padding: 15rpx 24rpx 23rpx;
        position: absolute;
        top: 95rpx;
        right: 32rpx;
        box-shadow: 8rpx 16rpx 24rpx 0 #dfdfdf;
        background-color: #fff;
        border-radius: 24rpx;
        .dc-header {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #12245c;
          font-weight: bold;
          .over-date {
            margin-left: 17rpx;
            font-size: 20rpx;
            color: #bec3d1;
          }
        }
        .dc-content {
          margin-top: 13rpx;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          .c-l {
            display: flex;
            align-items: flex-end;
            .box {
              padding: 0 20rpx;
              height: 59rpx;
              font-size: 48rpx;
              color: #ffffff;
              text-align: center;
              line-height: 59rpx;
              background-color: #12245c;
              border-radius: 6rpx 6rpx 6rpx 6rpx;
              opacity: 1;
              font-weight: bold;
            }
            .sub {
              margin-left: 10rpx;
              font-size: 24rpx;
              color: #12245c;
            }
            &.today {
              .box {
                padding: 5rpx 8rpx;
                font-size: 32rpx;
                background: linear-gradient(91deg, #12245c 0%, rgba(18, 36, 92, 0.52) 100%);
              }
            }
          }
          .more {
            font-size: 24rpx;
            color: #25d9c8;
          }
        }
      }
      .d-noraml {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .n-left {
          // padding: 40rpx 0;
          flex-shrink: 0;
          margin-right: 40rpx;
          .title {
            font-size: 28rpx;
            color: #ffffff;
            line-height: 48rpx;
            font-weight: bold;
          }
          .btn {
            margin-top: 46rpx;
            width: 206rpx;
            height: 54rpx;
            background: #ffffff;
            font-size: 28rpx;
            color: #25d9c8;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            .icon {
              width: 21rpx;
              height: 21rpx;
            }
          }
        }
        .n-right {
          flex: 1;
          display: flex;
          justify-content: space-between;
          .item {
            .icon {
              margin: 0 auto;
              width: 64rpx;
              height: 64rpx;
              background: linear-gradient(120deg, #a7ede6 0%, #3cd9ca 100%);
              border-radius: 12rpx 12rpx 12rpx 12rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              image {
                width: 48rpx;
                height: 48rpx;
              }
            }
            .name {
              margin: 4rpx;
              font-size: 20rpx;
              color: #ffffff;
            }
          }
        }
      }
    }
    .live {
      margin: $page-margin 0;
      .header {
        margin: 0 $page-margin;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          color: #474747;
          font-weight: bold;
        }
        .more {
          font-size: 24rpx;
          color: #cccccc;
        }
      }
      .live-container {
        margin-top: 24rpx;
        margin-left: $page-margin;
        overflow-x: auto;
        overflow-y: hidden;
        &::-webkit-scrollbar {
          display: none;
        }
        .scroll {
          display: flex;
          flex-wrap: nowrap;
          .live-item {
            flex-shrink: 0;
            width: 670rpx;
            height: 331rpx;
            margin-right: 30rpx;
            .live-img {
              width: 100%;
              height: 100%;
              border-radius: 24rpx;
            }
          }
        }
      }
    }
    .live-up {
      margin: $page-margin 0;
      .header {
        margin: 0 $page-margin;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          color: #474747;
          font-weight: bold;
        }
        .more {
          font-size: 24rpx;
          color: #cccccc;
        }
      }
      .live-container {
        margin-top: 24rpx;
        margin-left: $page-margin;
        overflow-x: auto;
        overflow-y: hidden;
        &::-webkit-scrollbar {
          display: none;
        }
        .scroll {
          display: flex;
          flex-wrap: nowrap;
          .live-item {
            flex-shrink: 0;
            width: 670rpx;
            height: 331rpx;
            margin-right: 30rpx;
            .live-img {
              width: 100%;
              height: 100%;
              border-radius: 24rpx;
            }
          }
          .item {
            margin-right: 30rpx;
            flex-shrink: 0;
            width: 418rpx;
            border-radius: 24rpx;
            border: 1px solid #d6d9e1;
            .photo-wrap {
              position: relative;
              width: 100%;
              height: 235rpx;
              border-radius: 24rpx 24rpx 0 0;
              .photo {
                width: 100%;
                height: 100%;
                border-radius: 24rpx 24rpx 0 0;
              }
              .status {
                position: absolute;
                left: 0;
                top: 0;
                padding: 5rpx 18rpx;
                background: #ffffff linear-gradient(136deg, #e7eeff 0%, #fde0ea 100%);
                border-radius: 24rpx 0 24rpx 0;
                display: flex;
                align-items: center;
                font-size: 24rpx;
                color: #cf5375;
                .dot {
                  margin-right: 10rpx;
                  width: 10rpx;
                  height: 10rpx;
                  border-radius: 50%;
                  background: #cf5375;
                }
                &.bad {
                  color: #484848;
                  background: #e6e6e6;
                  .dot {
                    display: none;
                  }
                }
              }
              .date {
                padding: 18rpx 18rpx 8rpx;
                position: absolute;
                left: 40rpx;
                bottom: 0;
                background: #e04775;
                border-radius: 11rpx 11rpx 0rpx 0rpx;
                text-align: center;
                .d-title {
                  font-size: 22rpx;
                  color: #ffffff;
                  font-weight: bold;
                  .icon {
                    margin-right: -10rpx;
                  }
                }
                .ymd {
                  font-size: 18rpx;
                  color: #fff;
                  line-height: 28rpx;
                  border-bottom: 2rpx solid rgba(255, 255, 255, 0.34);
                }
                .hm {
                  font-size: 18rpx;
                  color: #fff;
                  line-height: 28rpx;
                }
              }
            }
            .content {
              padding: 24rpx 28rpx;
              display: flex;
              align-items: center;
              border-radius: 0 0 24rpx 24rpx;
              background-color: #fff;
              .name {
                max-width: 4em;
                font-size: 28rpx;
                color: #666666;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
              .labels {
                margin-left: 10rpx;
                flex: 1;
                .label {
                  display: block;
                  font-size: 24rpx;
                  color: #cccccc;
                  max-width: 4em;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                }
                .label:not(:first-of-type) {
                  display: none;
                }
              }
              .btn {
                flex-shrink: 0;
                padding: 0 13rpx;
                height: 48rpx;
                line-height: 48rpx;
                font-size: 28rpx;
                font-weight: bold;
                color: #cf5375;
                border-radius: 24rpx;
                background: #ffffff linear-gradient(136deg, #e7eefe 0%, #fee0ea 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                .icon {
                  width: 40rpx;
                  height: 40rpx;
                }
              }
            }
          }
        }
        &.live-container-drugs {
          .scroll {
            .item {
              .content {
                .btn {
                  .icon {
                    margin-right: 10rpx;
                    width: 24rpx;
                    height: 24rpx;
                  }
                  background: #25d9c8;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
    .live-up-new {
      margin: 0 40rpx;
      .l-banner {
        width: 100%;
        height: 834rpx;
        border-radius: 24rpx;
        .live-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .item {
        margin-top: 24rpx;
        padding: 24rpx;
        background: #ffffff;
        border-radius: 24rpx;
        display: flex;
        .photo-wrap {
          flex-shrink: 0;
          width: 182rpx;
          height: 182rpx;
          position: relative;
          .photo {
            width: 100%;
            height: 100%;
            border-radius: 24rpx;
          }
          .status {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40rpx;
            font-size: 24rpx;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10rpx;
            background-color: rgba(0, 0, 0, 0.46);
            border-radius: 0 0 24rpx 24rpx;
            .icon {
              width: 20rpx;
              height: 20rpx;
            }
            &.active {
              background-color: rgba(207, 83, 117, 1);
            }
          }
        }
        .content {
          flex: 1;
          padding-left: 24rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            font-size: 32rpx;
            color: rgba(72, 72, 72, 1);
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .labels {
            margin-top: 16rpx;
            max-width: 56vw;
            font-size: 28rpx;
            color: rgba(173, 173, 173, 1);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .c-footer {
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20rpx;
            padding: 0 0 0 16rpx;
            background-color: rgba(250, 250, 250, 1);
            border-radius: 48rpx;
            .date {
              font-size: 24rpx;
              color: rgba(72, 72, 72, 1);
            }
            .btn {
              width: 128rpx;
              height: 48rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 8rpx;
              background-color: rgba(207, 83, 117, 1);
              border-radius: 24rpx;
              font-size: 24rpx;
              color: rgba(255, 255, 255, 1);
              .icon {
                width: 24rpx;
                height: 24rpx;
              }
            }
          }
        }
      }
    }
    .story {
      margin: $page-margin 0;
      .header {
        margin: 0 $page-margin;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          color: #474747;
          font-weight: bold;
        }
        .more {
          font-size: 24rpx;
          color: #cccccc;
        }
      }
      .story-container {
        position: relative;
        margin-top: 24rpx;
        overflow-x: auto;
        overflow-y: hidden;
        &::-webkit-scrollbar {
          display: none;
        }
        &::after {
          position: sticky;
          left: 0;
          bottom: 0;
          margin-top: -253rpx;
          display: block;
          content: '';
          width: 100vw;
          height: 253rpx;
          background: #cf5375;
        }
        &.story-container-drugs {
          &::after {
            display: none;
          }
        }
        .scroll {
          position: relative;
          display: flex;
          flex-wrap: nowrap;
          padding-left: $page-margin;
          padding-bottom: 55rpx;
          .story-item {
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            width: 281rpx;
            height: 375rpx;
            margin-right: 40rpx;
            .story-img {
              width: 100%;
              height: 100%;
              border-radius: 24rpx;
            }
            .story-content {
              position: absolute;
              left: 0;
              bottom: 0;
              padding: 40rpx 29rpx 26rpx;
              box-sizing: border-box;
              width: 100%;
              font-size: 24rpx;
              line-height: 32rpx;
              color: #273a65;
              font-weight: bold;
              background: linear-gradient(180deg, rgba(236, 236, 236, 0) 0%, rgba(236, 236, 236, 1) 100%);
              border-radius: 0 0 24rpx 24rpx;
            }
          }
        }
      }
    }
    .server {
      margin: $page-margin;
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          color: #474747;
          font-weight: bold;
        }
        .more {
          font-size: 24rpx;
          color: #cccccc;
        }
      }
      .server-container {
        margin-top: 24rpx;
        .two {
          display: flex;
          justify-content: space-between;
          .item {
            position: relative;
            flex: 1;
            height: 163rpx;
            display: flex;
            justify-content: flex-end;
            .item-bg {
              width: 100%;
              height: 100%;
              border-radius: 24rpx;
              border: 1px solid #d7dae1;
            }
            .item-container {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border: 2px solid #d7dae1;
              padding: 28rpx 31rpx;
              box-sizing: border-box;
              border-radius: 24rpx;
              .title {
                font-size: 28rpx;
                font-weight: bold;
                color: #666666;
              }
              .line {
                margin-top: 20rpx;
                width: 25rpx;
                height: 4rpx;
                background-color: #666666;
              }
              .en {
                margin-top: 20rpx;
                font-size: 20rpx;
                color: #666666;
              }
              .icon {
                position: absolute;
                bottom: 0;
                right: 0;
                border-radius: 0 0 24rpx 0;
                width: 106rpx;
                height: 107rpx;
              }
            }
          }
          .item:not(:first-of-type) {
            margin-left: 30rpx;
          }
        }
        .four {
          margin-top: 24rpx;
          padding: 22rpx 30rpx;
          border-radius: 24rpx;
          background-color: #fff;
          display: flex;
          align-items: center;
          border: 1px solid #d5d8e0;
          .item {
            flex: 1;
            text-align: center;
            .icon {
              width: 95rpx;
              height: 95rpx;
            }
            .name {
              font-size: 24rpx;
              color: #666666;
            }
          }
        }
      }
    }
    .book {
      margin: $page-margin;
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          color: #474747;
          font-weight: bold;
        }
        .more {
          font-size: 24rpx;
          color: #cccccc;
        }
      }
      .swiper {
        margin: 0 -40rpx;
        height: 700rpx;
        .swiper-item {
          padding: 32rpx 40rpx;
          box-sizing: border-box;
          .book-list {
            padding: 0 32rpx;
            border-radius: 32rpx;
            box-shadow: 0 0 32rpx 1rpx rgba(0, 0, 0, 0.08);

            .card {
              padding: 32rpx 0;
              display: flex;
              > view:not(:last-of-type),
              > image {
                margin-right: 24rpx;
              }

              .cover {
                flex-shrink: 0;
                width: 210rpx;
                height: 140rpx;
                position: relative;

                .photo {
                  width: 100%;
                  height: 100%;
                  border-radius: 8rpx;
                }

                .label {
                  position: absolute;
                  top: 12rpx;
                  left: 0;
                  font-size: 16rpx;
                  color: #fff;
                  padding: 4rpx 10rpx;
                  background-color: #293b61;
                }
              }

              .content {
                font-size: 28rpx;
                color: #666666;
                font-weight: bold;
                .title {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 3;
                  -webkit-box-orient: vertical;
                }
              }
            }

            .card:not(:last-of-type) {
              border-bottom: 1rpx solid rgba(152, 175, 225, 0.5);
            }
          }
        }

        .wx-swiper-dot-active {
          width: 30rpx !important;
        }

        .wx-swiper-dot {
          width: 9rpx;
          height: 6rpx;
          border-radius: 2rpx;
        }
      }
    }
  }
  .reg {
    position: fixed;
    left: 64rpx;
    bottom: calc(env(safe-area-inset-bottom) + 120rpx);
    width: 622rpx;
    background-color: rgba(39, 58, 101, 0.8);
    box-shadow: 0 8rpx 24rpx rgba(92, 144, 220, 0.25);
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 24rpx;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
    .blod {
      font-weight: bold;
    }
    .reg-close {
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
  .reg-audit {
    position: fixed;
    left: 34rpx;
    bottom: calc(env(safe-area-inset-bottom) + 120rpx);
    width: 682rpx;
    background-color: rgba(39, 58, 101, 0.8);
    box-shadow: 0 8rpx 24rpx rgba(92, 144, 220, 0.25);
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 24rpx;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
    .blod {
      font-weight: bold;
    }
  }
  .public {
    position: fixed;
    left: 30rpx;
    bottom: calc(env(safe-area-inset-bottom) + 120rpx);
    width: 690rpx;
    height: 152rpx;
    box-shadow: 0rpx 2rpx 16rpx 0rpx #390f1b2d;
    border-radius: 24rpx;
    background: linear-gradient(346deg, #ffffff 0%, #ffe2eb 100%);
    border: 2rpx solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 48rpx 0 32rpx;
    .logo {
      flex-shrink: 0;
      width: 88rpx;
      height: 88rpx;
    }
    .wrap {
      padding: 0 24rpx;
      flex: 1;
      .title {
        font-size: 32rpx;
        color: rgba(40, 48, 49, 1);
        font-weight: bold;
      }
      .content {
        margin-top: 4rpx;
        font-size: 28rpx;
        color: rgba(154, 161, 162, 1);
      }
    }
    .btn {
      width: 158rpx;
      height: 64rpx;
      font-size: 32rpx;
      color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #cf5375;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }
    .close {
      position: absolute;
      top: 0;
      right: 0;
      width: 48rpx;
      height: 48rpx;
    }
  }
}

.slidearea {
  width: 30rpx;
  position: fixed;
  right: 0;
  top: 0;
  height: calc(100vh - env(safe-area-inset-bottom) - 120rpx);
  // background-color: #000;
  z-index: 10;
  .mview {
    position: relative;
    width: 30rpx;
    height: 30rpx;
    .slidebar {
      position: absolute;
      top: 15rpx;
      left: 40rpx;
      transform: translate(-100%, -50%);
      padding: 20rpx;
      width: 346rpx;
      height: 234rpx;
      white-space: nowrap;
    }
  }
}

.question {
  position: fixed;
  z-index: 10;
  width: 154rpx;
  height: 136rpx;
  right: 28rpx;
  bottom: 242rpx;
  &-img {
    width: 100%;
    height: 100%;
  }
}

.official-account {
  position: fixed;
  bottom: 180rpx;
  left: 20rpx;
  width: calc(100% - 40rpx);
}