@charset "utf-8";
body {
  width: 19.2rem;
  opacity: 0; }

* {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  font-family: "PingFang SC Medium", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif; }

.flex {
  display: flex; }

ul {
  list-style: none; }

img {
  border: none; }

a {
  text-decoration: none;
  color: black; }

input, textarea {
  outline: none; }

.hide {
  display: none; }

@media screen and (max-width: 600px) {
  body {
    width: 7.5rem; } }
.account-banner {
  padding-top: 1.7rem;
  height: 2.9rem;
  background-image: url("../../images/test/account-banner.png");
  background-size: 100% 2.9rem;
  background-position: bottom;
  background-repeat: no-repeat; }
  .account-banner .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .account-banner .container .left-userinfo {
      display: flex;
      align-items: center; }
      .account-banner .container .left-userinfo .avatar {
        width: 1.88rem;
        height: 1.88rem;
        display: block;
        border-radius: 50%;
        object-fit: cover;
        margin-right: .7rem; }
      .account-banner .container .left-userinfo .name-area .username {
        color: #fff;
        font-size: .28rem;
        margin-bottom: .14rem; }
      .account-banner .container .left-userinfo .name-area .info-tip {
        color: #cb0b18;
        font-size: 13px;
        margin-bottom: .24rem; }
      .account-banner .container .left-userinfo .name-area .upload-btn {
        position: relative;
        padding: .08rem .15rem;
        border-radius: 50px;
        font-size: 14px;
        color: #999999;
        border: 1px solid #999999;
        cursor: pointer;
        width: fit-content; }
        .account-banner .container .left-userinfo .name-area .upload-btn input {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1000;
          opacity: 0; }
    .account-banner .container .logout-btn {
      position: relative;
      padding: .08rem .15rem;
      border-radius: 50px;
      font-size: 14px;
      color: #fff;
      border: 1px solid #fff;
      cursor: pointer;
      width: fit-content;
      margin-top: -.5rem;
      display: block; }

.account-container {
  padding: .6rem 0 1.8rem; }
  .account-container .container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; }
    .account-container .container .left-container {
      padding: 0.36rem 0.25rem;
      width: calc(4.2rem - 0.5rem);
      margin-right: 0.3rem;
      flex-shrink: 0;
      border: 1px solid #5d5d5d;
      border-radius: 10px; }
      .account-container .container .left-container .account-nav-list .account-nav-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: .68rem;
        margin-bottom: .36rem; }
        .account-container .container .left-container .account-nav-list .account-nav-item .name {
          font-size: 15px;
          color: #fff; }
        .account-container .container .left-container .account-nav-list .account-nav-item .goback span {
          width: 0.43rem;
          height: 0.43rem;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          transform: rotate(180deg); }
        .account-container .container .left-container .account-nav-list .account-nav-item:last-child {
          margin-bottom: 0; }
      .account-container .container .left-container .account-nav-list .account-nav-item-on {
        position: relative; }
        .account-container .container .left-container .account-nav-list .account-nav-item-on:after {
          position: absolute;
          content: '';
          width: 2px;
          height: 100%;
          background-color: #cb0b18;
          top: 0;
          left: calc(-.25rem - 1px); }
        .account-container .container .left-container .account-nav-list .account-nav-item-on .name {
          font-size: 18px;
          background-image: linear-gradient(to right, #fff 1%, #d70c19 70%);
          -webkit-background-clip: text;
          color: transparent; }
    .account-container .container .right-container {
      width: calc(100% - 4.5rem); }
      .account-container .container .right-container .total-collection {
        text-align: right;
        font-size: 13px;
        color: #fff; }
        .account-container .container .right-container .total-collection span {
          color: #d20c18; }
      .account-container .container .right-container .collection-list {
        margin-top: .16rem; }
        .account-container .container .right-container .collection-list .collection-item a {
          padding: .32rem .36rem;
          border-radius: 10px;
          background-color: #141414;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: .28rem; }
          .account-container .container .right-container .collection-list .collection-item a .name {
            background-image: linear-gradient(to right, #fff 1%, #d70c19 20%);
            -webkit-background-clip: text;
            color: transparent;
            width: calc(100% - 1.8rem);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; }
          .account-container .container .right-container .collection-list .collection-item a .time {
            width: 1.8rem;
            text-align: right;
            color: #fff;
            min-width: 155px; }
      .account-container .container .right-container .info-input-container .input-item {
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: .38rem; }
        .account-container .container .right-container .info-input-container .input-item .label {
          width: 1.7rem;
          text-align: right;
          margin-right: .3rem;
          flex-shrink: 0;
          color: #fff; }
        .account-container .container .right-container .info-input-container .input-item input {
          width: calc(100% - 2rem - .52rem);
          padding: .2rem .26rem;
          background-color: #141414;
          border-radius: 50px;
          color: #fff;
          border: none; }
        .account-container .container .right-container .info-input-container .input-item .email-btn {
          padding: .1rem .18rem;
          border-radius: 50px;
          color: #fff;
          background-image: linear-gradient(to right, #ff7d7d, #ff0011);
          position: absolute;
          right: .1rem;
          top: 50%;
          transform: translate(0, -50%);
          z-index: 100; }
      .account-container .container .right-container .info-input-container .btn-list {
        display: flex;
        align-items: center;
        justify-content: center; }
        .account-container .container .right-container .info-input-container .btn-list .btn-item {
          padding: .16rem .6rem;
          border-radius: 50px;
          margin: .12rem;
          border: none;
          font-size: 15px;
          cursor: pointer; }
        .account-container .container .right-container .info-input-container .btn-list input[type=reset] {
          background-color: #cccccc;
          color: #000; }
        .account-container .container .right-container .info-input-container .btn-list input[type=submit] {
          color: #fff;
          background-image: linear-gradient(to right, #ff7d7d, #ff0011); }

.login-area {
  padding-top: 3.2rem; }
  .login-area .welcome-area .container {
    display: flex;
    align-items: center; }
    .login-area .welcome-area .container img {
      height: .35rem;
      display: block;
      margin-right: .1rem; }
    .login-area .welcome-area .container p {
      font-size: .4rem;
      background-image: linear-gradient(to right, #fff 1%, #d70c19 50%);
      -webkit-background-clip: text;
      color: transparent; }
  .login-area .form-container {
    padding: 1rem 0 2.25rem;
    background-image: url("../../images/test/login-bg.png");
    background-size: cover; }
    .login-area .form-container .container {
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      .login-area .form-container .container .form-area {
        width: 5rem; }
        .login-area .form-container .container .form-area .login-type {
          display: flex;
          align-items: center;
          justify-content: center; }
          .login-area .form-container .container .form-area .login-type .type-item {
            width: 50%;
            text-align: center;
            font-size: 16px;
            color: #999999; }
          .login-area .form-container .container .form-area .login-type .type-item-on {
            color: #fff;
            font-size: 18px; }
        .login-area .form-container .container .form-area .input-item {
          position: relative;
          margin-top: .32rem; }
          .login-area .form-container .container .form-area .input-item input {
            padding: .14rem .16rem .14rem .5rem;
            border-radius: 50px;
            background-color: #141414;
            color: #fff;
            border: none;
            width: calc(100% - .66rem); }
          .login-area .form-container .container .form-area .input-item .iconfont {
            position: absolute;
            left: .2rem;
            top: 50%;
            transform: translate(0, -50%);
            background-image: linear-gradient(to right, #fff 1%, #d70c19 50%);
            -webkit-background-clip: text;
            color: transparent;
            font-size: .24rem; }
          .login-area .form-container .container .form-area .input-item .code {
            position: absolute;
            max-height: 100%;
            right: 0;
            top: 50%;
            transform: translate(0, -50%); }
          .login-area .form-container .container .form-area .input-item .code-btn {
            position: absolute;
            width: fit-content;
            padding: 0 10px;
            height: calc(100% - .1rem);
            right: 0;
            top: .05rem;
            border-radius: 50px;
            color: #fff;
            background-image: linear-gradient(to right, #ff7d7d, #ff0011);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer; }
          .login-area .form-container .container .form-area .input-item .getting {
            background: #ccc; }
        .login-area .form-container .container .form-area .submit-btn {
          width: 100%;
          height: .5rem;
          line-height: .5rem;
          text-align: center;
          color: #fff;
          font-size: 16px;
          background-image: linear-gradient(to right, #ff7d7d, #ff0011);
          margin: .32rem 0 .28rem;
          border: none;
          border-radius: 50px;
          cursor: pointer; }
        .login-area .form-container .container .form-area .link-list {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap; }
          .login-area .form-container .container .form-area .link-list .link-item {
            color: #999999; }
            .login-area .form-container .container .form-area .link-list .link-item span {
              color: #d70c19; }
        .login-area .form-container .container .form-area .checkbox-area {
          display: flex;
          align-items: center;
          margin-top: .24rem;
          cursor: pointer;
          color: #999999; }
          .login-area .form-container .container .form-area .checkbox-area .iconfont {
            font-size: .24rem;
            color: #d70c19;
            margin-right: 5px; }
          .login-area .form-container .container .form-area .checkbox-area a {
            color: #d70c19; }

/*# sourceMappingURL=user.css.map */