miniapp/src/pages/mine/index.scss

.Page.Mine {
  background: #fff;
  > scroll-view {
    width: 100%;
    height: 100%;
    .PageContent {
      position: relative;
      overflow: hidden;
      min-height: 100vh;
      > .Content {
        position: relative;
        overflow: hidden;
        > .UserInfo {
          position: relative;
          overflow: hidden;
          padding: 0 30px;
          margin-top: 30px;
          > .UserIcon {
            width: 120px;
            height: 120px;
            position: relative;
            overflow: hidden;
            background: #eee;
            border-radius: 100%;
            margin: 0 auto;
            z-index: 2;
            > image {
              width: 100%;
              height: 100%;
            }
          }
          > .OtherInfo {
            position: relative;
            overflow: hidden;
            background: #193c83;
            border-radius: 24px;
            margin-top: -60px;
            z-index: 1;
            > .Name {
              padding: 90px 20px 0;
              > view {
                position: relative;
                z-index: 2;
                > text {
                  display: block;
                  text-align: center;
                  font-size: 34px;
                  color: #fff;
                  line-height: 40px;
                }
                > view {
                  margin-top: 20px;
                  border-top: 2px dashed rgba(255, 255, 255, 0.3);
                  text-align: center;
                  font-size: 0;
                  white-space: nowrap;
                  padding: 20px 0;
                  > text {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 28px;
                    color: #fff;
                    line-height: 40px;
                    &.iconfont {
                      width: 36px;
                      line-height: 36px;
                      background: #fff;
                      border-radius: 100%;
                      color: #193c83;
                      margin-right: 10px;
                    }
                  }
                }
              }
              > .Role {
                width: 200px;
                position: absolute;
                right: -55px;
                top: 20px;
                font-size: 22px;
                color: #193c83;
                line-height: 50px;
                background: #fff602;
                text-align: center;
                transform: rotateZ(45deg);
                -webkit-transform: rotateZ(45deg);
                z-index: 3;
              }
              > .New {
                font-size: 90px;
                font-weight: bold;
                color: rgba(255, 255, 255, 0.1);
                display: inline-block;
                position: absolute;
                z-index: 1;
                right: 30px;
                top: 30px;
              }
              > .iconfont {
                font-size: 200px;
                color: rgba(255, 255, 255, 0.1);
                display: inline-block;
                position: absolute;
                z-index: 1;
                left: 30px;
                top: 10px;
              }
            }
          }
        }
        > .MenuList {
          position: relative;
          overflow: hidden;
          margin-top: 20px;
          > view {
            position: relative;
            overflow: hidden;
            border-top: 20px solid #f8f8f8;
            &:first-child {
              border: none;
            }
            > .flex-h {
              align-items: center;
              padding: 0 30px;
              &:first-child {
                >view {
                  border: none;
                }
              }
              > .Icon {
                width: 44px;
                height: 44px;
                margin-right: 20px;
                position: relative;
                overflow: hidden;
                >image {
                  width: 100%;
                  height: 100%;
                }
              }
              > .flex-h {
                align-items: center;
                border-top: 2px solid #eee;
                > text {
                  font-size: 32px;
                  line-height: 100px;
                  &.iconfont {
                    color: #ccc;
                    font-size: 40px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}