miniapp/src/pages/WoDe/index.less

.WoDe {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;

  .WoDeContent {
    width: 100%;
    position: relative;
    overflow: hidden;

    >.TopBg {
      width: 400vw;
      height: 400vw;
      position: relative;
      overflow: hidden;
      border-radius: 100%;
      margin-left: -150vw;
      margin-top: -340vw;

      >.ColorBg {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 60vw;
        z-index: 1;
        background-image: linear-gradient(#F35844, rgba(255, 141, 97, 1, 0.5));
      }

      >.UserInfo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        bottom: 60px;
        z-index: 2;
        width: 100vw;
        align-items: center;

        >.Icon {
          width: 196px;
          height: 196px;
          border-radius: 100%;
          position: relative;
          overflow: hidden;
          background-color: #fff;
          margin-right: 40px;
          margin-left: 30px;

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

        >.flex-item {
          position: relative;
          overflow: hidden;

          >text {
            display: block;
            white-space: nowrap;
            font-size: 30px;
            color: #333;
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;

            &:first-child {
              font-size: 34px;
              margin-bottom: 30px;
            }
          }
        }

        >text {
          font-size: 30px;
          line-height: 58px;
          border: 2px solid #000;
          border-radius: 8px;
          padding: 0 20px;
          margin-right: 30px;
        }
      }
    }

    >.UserTab {
      padding: 30px 0;
      margin-top: 20px;
      position: relative;
      overflow: hidden;

      >.Line {
        width: 100%;
        height: 20px;
        background-color: #f8f8f8;
      }

      >.flex-h {
        padding: 0 30px;
        align-items: center;

        >text {
          font-size: 44px;
          color: #F35844;
          margin-right: 20px;
        }

        >view {
          align-items: center;
          border-bottom: 2px solid #f8f8f8;

          >text {
            font-size: 32px;
            color: #999;
            line-height: 100px;
            margin-left: 20px;
            overflow: hidden;

            &:first-child {
              margin-left: 0;
              color: #333;
            }
          }
        }
      }
    }
  }
}