page {
  background-color: rgba(247, 246, 250, 1);
}

.page-title {
  width: 344rpx;
  height: 34rpx;
}
.page {
  padding: 44rpx 40rpx 0;
  .user {
    display: flex;
    align-items: center;
    .avatar-wrapper {
      flex-shrink: 0;
      padding: 0;
      margin: 0;
      width: 108rpx;
      height: 108rpx;
      outline: none;
      border: 2px solid #fff;
      border-radius: 50%;
      &::after {
        border: none;
      }
      .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .wrap {
      flex: 1;
      padding-left: 24rpx;
      .nickname {
        font-size: 36rpx;
        font-weight: bold;
        color: rgba(1, 1, 5, 1);
      }
      .hostipal {
        margin-top: 16rpx;
        line-height: 32rpx;
        font-size: 28rpx;
        color: rgba(105, 104, 110, 1);
        .tag {
          margin-left: 10rpx;
          height: 32rpx;
          display: inline-block;
          font-size: 24rpx;
          color: rgba(255, 255, 255, 1);
          padding: 0 10rpx;
          background: rgba(195, 148, 255, 1);
          border-radius: 8rpx 8rpx 8rpx 8rpx;
        }
      }
    }
  }
  .banner {
    margin-top: 50rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;
    .edc {
      height: 384rpx;
      box-shadow: 0 4rpx 40rpx rgba(119, 80, 234, 0.34);
      border-radius: 32rpx;
      .e-img {
        width: 100%;
        height: 100%;
      }
    }
    .v-swiper {
      position: relative;
      height: 384rpx;
      border-radius: 32rpx;
      .swiper-item {
        border-radius: 32rpx;
        background-color: #fff;
        .item1 {
          padding: 32rpx;
          .i-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .date {
              .year {
                font-size: 24rpx;
                color: rgba(173, 172, 178, 1);
                line-height: 32rpx;
              }
              .day {
                display: flex;
                align-items: baseline;
                font-size: 36rpx;
                color: rgba(173, 172, 178, 1);
                line-height: 40rpx;
                .sub {
                  font-size: 22rpx;
                }
              }
            }
            .icon {
              width: 68rpx;
              height: 68rpx;
            }
          }
          .content {
            margin-top: 28rpx;
            font-size: 30rpx;
            color: rgba(33, 29, 46, 1);
            line-height: 56rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
        }
        .item2 {
          padding: 32rpx;
          .i-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .date {
              .year {
                font-size: 24rpx;
                color: rgba(173, 172, 178, 1);
                line-height: 32rpx;
              }
              .day {
                display: flex;
                align-items: baseline;
                font-size: 36rpx;
                color: rgba(173, 172, 178, 1);
                line-height: 40rpx;
                .sub {
                  font-size: 22rpx;
                }
              }
            }
            .icon {
              width: 68rpx;
              height: 68rpx;
            }
          }
          .status1 {
            margin-top: 38rpx;
            font-size: 40rpx;
            color: rgba(195, 49, 0, 1);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 12rpx;
            .s-icon {
              width: 36rpx;
              height: 36rpx;
            }
          }
          .status2 {
            margin-top: 38rpx;
            font-size: 40rpx;
            color: rgba(69, 163, 83, 1);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 12rpx;
            .s-icon {
              width: 36rpx;
              height: 36rpx;
            }
          }
          .status3 {
            margin-top: 38rpx;
            font-size: 40rpx;
            color: rgba(185, 130, 255, 1);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 12rpx;
            .s-icon {
              width: 36rpx;
              height: 36rpx;
            }
          }
          .name {
            margin-top: 44rpx;
            font-size: 28rpx;
            color: rgba(105, 104, 110, 1);
            line-height: 44rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .item3 {
          padding: 32rpx;
          .i-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .date {
              .year {
                font-size: 24rpx;
                color: rgba(173, 172, 178, 1);
                line-height: 32rpx;
              }
              .day {
                display: flex;
                align-items: baseline;
                font-size: 36rpx;
                color: rgba(173, 172, 178, 1);
                line-height: 40rpx;
                .sub {
                  font-size: 22rpx;
                }
              }
            }
            .icon {
              width: 68rpx;
              height: 68rpx;
            }
          }
          .status4 {
            margin-top: 38rpx;
            font-size: 40rpx;
            color: rgba(185, 130, 255, 1);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 12rpx;
            .s-icon {
              width: 36rpx;
              height: 36rpx;
            }
          }
          .status2 {
            margin-top: 38rpx;
            font-size: 40rpx;
            color: rgba(69, 163, 83, 1);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 12rpx;
            .s-icon {
              width: 36rpx;
              height: 36rpx;
            }
          }
          .name {
            margin-top: 44rpx;
            font-size: 28rpx;
            color: rgba(105, 104, 110, 1);
            line-height: 44rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .item4 {
          padding: 32rpx;
          .i-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .date {
              .year {
                font-size: 24rpx;
                color: rgba(173, 172, 178, 1);
                line-height: 32rpx;
              }
              .day {
                display: flex;
                align-items: baseline;
                font-size: 36rpx;
                color: rgba(173, 172, 178, 1);
                line-height: 40rpx;
                .sub {
                  font-size: 22rpx;
                }
              }
            }
            .icon {
              width: 68rpx;
              height: 68rpx;
            }
          }
          .num-line {
            display: flex;
            align-items: baseline;
            font-size: 72rpx;
            color: rgba(185, 130, 255, 1);
            font-weight: bold;
            .sub {
              font-size: 32rpx;
              color: rgba(33, 29, 46, 1);
            }
          }
          .name {
            margin-top: 44rpx;
            font-size: 28rpx;
            color: rgba(105, 104, 110, 1);
            line-height: 44rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }

        .item5 {
          padding: 96rpx 22rpx 0;
          .icon1 {
            width: 276rpx;
            height: 214rpx;
          }
          .title {
            margin-top: -60rpx;
            font-size: 32rpx;
            color: rgba(173, 172, 178, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8rpx;
            .icon2 {
              width: 36rpx;
              height: 36rpx;
            }
          }
        }
      }
      .dots {
        position: absolute;
        bottom: 16rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        .dot {
          flex-shrink: 0;
          width: 8rpx;
          height: 8rpx;
          border-radius: 50%;
          background-color: rgba(231, 234, 236, 1);
          transition: all 0.3s ease;
          &.active {
            width: 12rpx;
            height: 12rpx;
            background-color: rgba(195, 148, 255, 1);
          }
        }
      }
    }
  }
  .ad {
    margin-top: 40rpx;
    .swiper {
      height: 224rpx;
      .ad-img {
        display: block;
        width: 100%;
        height: 224rpx;
        border-radius: 24rpx;
        box-shadow: 0 4rpx 22rpx 0 rgba(0, 0, 0, 0.03);
      }
    }
  }
  .briefing {
    margin-top: 40rpx;
    .b-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        width: 140rpx;
        height: 44rpx;
      }
      .more {
        font-size: 28rpx;
        color: rgba(173, 172, 178, 1);
      }
    }
    .scroll {
      margin: 24rpx -40rpx 0;
      padding-left: 40rpx;
      overflow-x: auto;
      display: flex;
      flex-wrap: nowrap;
      gap: 24rpx;
      &::-webkit-scrollbar {
        display: none;
      }
      .card {
        flex-shrink: 0;
        width: 304rpx;
        height: 404rpx;
        border-radius: 32rpx;
      }
      .none {
        padding: 102rpx 12rpx 0;
        flex-shrink: 0;
        width: 304rpx;
        background-color: #fff;
        border-radius: 32rpx;
        .icon {
          display: block;
          margin: 0 auto;
          width: 276rpx;
          height: 230rpx;
        }
        .content {
          margin-top: -90rpx;
          font-size: 32rpx;
          color: rgba(173, 172, 178, 1);
          line-height: 48rpx;
          text-align: center;
        }
      }
    }
  }
  .sop {
    margin-top: 40rpx;
    .s-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        width: 156rpx;
        height: 44rpx;
      }
      .more {
        font-size: 28rpx;
        color: rgba(173, 172, 178, 1);
      }
    }
    .scroll {
      margin: 24rpx -40rpx 0;
      padding-left: 40rpx;
      overflow-x: auto;
      display: flex;
      flex-wrap: nowrap;
      gap: 24rpx;
      &::-webkit-scrollbar {
        display: none;
      }
      .card {
        flex-shrink: 0;
        width: 304rpx;
        .photo {
          width: 100%;
          height: 304rpx;
          border-radius: 32rpx 32rpx 0 0;
        }
        .content {
          padding: 20rpx;
          height: 132rpx;
          box-sizing: border-box;
          background-color: #fff;
          border-radius: 0 0 32rpx 32rpx;
          .center {
            font-size: 28rpx;
            color: rgba(33, 29, 46, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      .none {
        padding: 102rpx 12rpx 0;
        flex-shrink: 0;
        width: 304rpx;
        background-color: #fff;
        border-radius: 32rpx;
        .icon {
          display: block;
          margin: 0 auto;
          width: 276rpx;
          height: 230rpx;
        }
        .content {
          margin-top: -90rpx;
          font-size: 32rpx;
          color: rgba(173, 172, 178, 1);
          line-height: 48rpx;
          text-align: center;
        }
      }
    }
  }
  .message {
    margin-top: 16rpx;
    height: 150rpx;
    position: relative;
    .content {
      position: absolute;
      top: 48rpx;
      left: 212rpx;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 1);
      display: flex;
      align-items: baseline;
      .num {
        font-size: 48rpx;
        color: rgba(140, 117, 208, 1);
        font-weight: bold;
      }
      &.dot::after {
        position: absolute;
        right: -18rpx;
        top: 10rpx;
        content: '';
        width: 18rpx;
        height: 18rpx;
        flex-shrink: 0;
        border-radius: 50%;
        background-color: rgba(241, 44, 54, 1);
      }
    }
  }
  .list {
    margin-top: 40rpx;
    border-radius: 24rpx;
    .list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        width: 140rpx;
        height: 44rpx;
      }
      .more {
        font-size: 28rpx;
        color: rgba(173, 172, 178, 1);
      }
    }
    .card {
      margin: 24rpx 0 0;
      padding: 32rpx;
      background-color: #fff;
      border-radius: 24rpx;
      display: flex;
      gap: 24rpx;
      .photo {
        flex-shrink: 0;
        width: 176rpx;
        height: 176rpx;
        border-radius: 24rpx;
      }
      .wrap {
        padding-top: 12rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          color: rgba(33, 29, 46, 1);
          line-height: 44rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .w-footer {
          margin-top: 28rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .date {
            font-size: 28rpx;
            color: rgba(173, 172, 178, 1);
          }
          .options {
            display: flex;
            align-items: center;
            gap: 60rpx;
            .o-item {
              font-size: 28rpx;
              color: rgba(173, 172, 178, 1);
              display: flex;
              align-items: center;
              gap: 12rpx;
              background-color: transparent;
              padding: 0;
              &::after {
                border: none;
              }
              .icon {
                width: 36rpx;
                height: 36rpx;
              }
            }
          }
        }
      }
    }
    .none {
      margin-top: 28rpx;
      padding: 32rpx;
      border-radius: 32rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      gap: 46rpx;
      .icon {
        width: 176rpx;
        height: 176rpx;
      }
      .content {
        font-size: 32rpx;
        color: rgba(173, 172, 178, 1);
      }
    }
  }
  .bottom {
    margin: 56rpx auto 0;
    display: block;
    width: 234rpx;
    height: 86rpx;
  }
}