MoeNovaClient/pages/my/normal.scss

page {
  background: url("../../static/me/wd_bg_bianjiziliao.png") top center/ 100%
      auto no-repeat,
    #f2f6f2;
}

.PageHeader {
  background: url("../../static/me/wd_bg_bianjiziliao.png") center top / 100%
      auto no-repeat,
    #f2f6f2;
  // background-position-y: var(--status-bar-height);
}
.topBody {
  width: 750rpx;
}
.list_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  width: 750rpx;
  .textContent {
    color: #1f1f1f;
    max-width: 400rpx;
  }
  .textPrompt {
    color: #999999;
  }
  .name {
    width: 690rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    color: #333;
    font-size: 28rpx;
    margin-top: 20rpx;
    .right {
      font-size: 28rpx;
      color: #ff2a95;
    }
  }
  .desc {
    width: 690rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    color: #999;
    font-size: 24rpx;
    margin-top: 20rpx;
  }
  .item {
    width: 690rpx;
    height: 84rpx;
    margin-top: 20rpx;
    background: #ffffff;
    position: relative;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    input {
      width: 100%;
      height: 100%;
      padding-left: 20rpx;
      font-size: 28rpx;
      color: #333;
      border: solid 1px #f0f0f0;
      border-radius: 12rpx;
    }
    .btn {
      position: absolute;
      right: 20rpx;
      top: 0rpx;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 84rpx;
      color: #ff2a95;
    }
    .arrow {
      width: 36rpx;
      position: absolute;
      right: 20rpx;
      top: 24rpx;
    }
  }
  .bcenter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 120rpx;
    .avator {
      width: 200rpx;
      height: 200rpx;
      position: relative;
      .img {
        width: 172rpx;
        height: 172rpx;
        border-radius: 86rpx;
      }
      .photo {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        bottom: 0;
        right: 10rpx;
      }
    }
  }
  .item2 {
    width: 690rpx;
    height: 84rpx;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .sex {
      width: 334rpx;
      height: 84rpx;
      background: #ffffff;
      border-radius: 24rpx;
      border: 2rpx solid #282828;
      color: #999;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .active {
      border: 4rpx solid #ff2a95;
      color: #ff2a95;
    }
    .sex2 {
      image {
        width: 172rpx;
      }
    }
  }
  .itemSex {
    width: 690rpx;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .sex2 {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      width: 210rpx;
      height: 210rpx;
      text {
        color: #999;
      }
      image {
        width: 132rpx;
        height: 132rpx;
      }
    }
    .active {
      text {
        color: #fff;
      }
      image {
        border: 4rpx solid #36d6ff;
        border-radius: 172rpx;
        width: 172rpx;
        height: 172rpx;
      }
    }
  }
  .itemSingle {
    width: 690rpx;
    height: 84rpx;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .slider {
      width: 100%;
    }
  }
  .itemXL {
    width: 690rpx;
  }
  .item_tag {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 690rpx;
    padding: 20rpx;
    padding-top: 4rpx;
    .tag {
      border-radius: 12rpx;
      margin-right: 16rpx;
      margin-top: 16rpx;
      padding: 8rpx 16rpx;
      height: 56rpx;
      border: 2rpx solid #eee;
      color: #333;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background: #eeeeee;
      .close {
        width: 28rpx;
        margin-left: 2rpx;
        position: relative;
      }
    }
    .active {
      border-radius: 20rpx;
      border: 2rpx solid #ff5967;
    }
    .addNew {
      margin-right: 10rpx;
      margin-top: 10rpx;
      padding: 0rpx 20rpx;
      height: 60rpx;
      border-radius: 12rpx;
      background: #1f1f1f;
      color: #fff;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-top: 40rpx;
    width: 100%;
  }
  .subtitle {
    font-size: 28rpx;
    color: #959595;
    text-align: center;
    margin-top: 20rpx;
    width: 100%;
  }
  .phone_input {
    width: 690rpx;
    height: 84rpx;
    margin-top: 40rpx;
    background: #ffffff;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    .area_code {
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333;
      border-right: 1rpx solid #e0e0e0;
    }
    .input {
      flex: 1;
      height: 100%;
      padding-left: 20rpx;
      font-size: 28rpx;
      color: #333;
    }
  }
  .code_input {
    width: 690rpx;
    height: 84rpx;
    margin-top: 20rpx;
    background: #ffffff;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    .input {
      flex: 1;
      height: 100%;
      padding-left: 20rpx;
      font-size: 28rpx;
      color: #333;
    }
    .btn {
      padding: 0 30rpx;
      font-size: 28rpx;
      color: #ff2a95;
      &.disabled {
        color: #999;
      }
    }
  }
}
.list_info2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  width: 750rpx;

  .item {
    width: 690rpx;
    height: 84rpx;
    margin-top: 10rpx;
    color: #fff;
    font-size: 28rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 0px #393939;

    .arrow {
      width: 36rpx;
    }
    .desc {
      color: #fff;
    }
  }
  .tips {
    padding: 30rpx;
    color: #959595;
  }
}
.btn_submit {
  width: 660rpx;
  height:88rpx;
  position: fixed;
  bottom: 50rpx;
  left: 45rpx;
  background: #1f1f1f;
  border-radius: 50rpx;
  font-weight: bold;
  font-size: 32rpx;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.btn_list {
  width: 660rpx;
  height: 96rpx;
  position: fixed;
  bottom: 50rpx;
  left: 45rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .btn_submit1 {
    width: 326rpx;
    height: 96rpx;
    border: 2rpx solid #d0d0d0;
    border-radius: 28rpx;
    font-weight: normal;
    font-size: 32rpx;
    color: #959595;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .btn_submit2 {
    width: 312rpx;
    height: 96rpx;
    background: linear-gradient(142deg, #ff5967 0%, #ff2a95 100%);
    border-radius: 28rpx;
    font-weight: normal;
    font-size: 32rpx;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
.picker-view {
  width: 690rpx;
  height: 400rpx;
  margin-top: 20rpx;
  background-color: #00000000;
}
.itemXll {
  line-height: 100rpx;
  text-align: center;
}
.selectLine {
  background: #80404040;
  border-radius: 24rpx;
  height: 100rpx;
  border: 0;
  border-top: 0;
}
// 给中间选中行添加border-radius
::v-deep .itemXll .selectLine {
  border-radius: 0 16rpx 16rpx 0;
}
::v-deep .itemXll .selectLine {
  border-radius: 16rpx 0 0 16rpx;
}

// 修改原有的上下边框颜色
::v-deep .selectLine::after {
  border-bottom: 0rpx solid #000;
}
::v-deep .selectLine::before {
  border-top: 0rpx solid #000;
}
.blankHeight {
  height: 300rpx;
}
.info_card {
  width: 710rpx;
  min-height: 120rpx;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 0;
  margin-top: 0rpx;

  .info_item {
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    padding-right: 20rpx;

    &:last-child {
      border-bottom: none;
    }

    .label {
      width: 120rpx;
      font-size: 28rpx;
      color: #1f1f1f;
      font-family: "PingFang SC-Medium";
    }

    .content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      input {
        text-align: right;
        font-size: 28rpx;
        color: #333;
      }

      .arrow {
        width: 36rpx;
        margin-left: 10rpx;
      }
    }
  }
}
.section_title {
  font-size: 26rpx;
  color: #1f1f1f;
  font-weight: 600;
  margin: 32rpx 0 20rpx 30rpx;
  font-family: "PingFang SC-Medium";
  width: 690rpx;
}
.openNicknamePopUpWindow {
  .input-box {
    position: relative;
    left: 0;
    top: 0;
  }
  ::v-deep.uv-input {
    width: 694rpx !important;
    height: 88rpx !important;
    border-radius: 20rpx !important;
    border: 1rpx solid #000000 !important;
    margin: 0 auto;
    margin-bottom: 44rpx;
  }
}
.openContentPopUpWindow {
  ::v-deep.uv-textarea {
    width: 694rpx !important;
    border-radius: 20rpx !important;
    border: 1rpx solid #000000 !important;
    margin: 0 auto;
    margin-bottom: 44rpx;
  }
}