MoeNovaClient/pages/my/job.scss

page {
  background-color: #fff;
  font-family: "PingFang SC-Medium";
  min-height: 100vh;
}

.page {
  min-height: 100vh;
  background-color: #fff;
  position: relative;
  background: url("../../static/me/job/rw_bg_01.png") center top / 100% auto
      no-repeat,
    #f2f6f2;
}

// 顶部黄色背景
.PageHeader {
  background: url("../../static/me/job/rw_bg_01.png") center top / 100% auto
      no-repeat,
    #f2f6f2;
  background-position-y: var(--status-bar-height);
}
.occupyHigh {
  height: calc(var(--status-bar-height) + 150rpx);
  width: 100%;
}

// 内容区域
.content-area {
  position: relative;
  z-index: 1;
  padding: 0 20rpx;
}
// 星源余额展示区
.person-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  padding-bottom: 48rpx;
  .person-info-left {
    display: flex;
    .avator {
      width: 100rpx;
      height: 100rpx;
      border: 4rpx solid #fff;
      margin-right: 28rpx;
    }
    .title-area {
      .my-bean-title {
        font-size: 24rpx;
      }
      .bean-number {
        display: flex;
        align-items: center;
        font-family: "CustomFont";
        font-weight: 700;
        font-size: 48rpx;
        color: #1f1f1f;
        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 8rpx;
        }
      }
    }
  }
  .exchange-btn {
    width: 140rpx;
    height: 52rpx;
    background: #1f1f1f;
    border-radius: 26rpx;
    font-size: 24rpx;
    color: #acf934;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 星愿打卡区域
.starWishCheckIn {
  width: 710rpx;
  height: 380rpx;
  background: url("../../static/me/job/rw_bg_02.png") top left/100% no-repeat,
    #ffffff;
  box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(231, 231, 231, 0.29);
  border-radius: 20rpx;
  padding: 20rpx;
  padding-top: 96rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  position: relative;
  left: 0;
  top: 0;

  .title {
    position: absolute;
    left: 20rpx;
    top: 20rpx;
    width: 200rpx;
    height: 104rpx;
  }
  .card {
    width: 328rpx;
    height: 238rpx;
    padding: 28rpx 26rpx 22rpx 24rpx;
    box-sizing: border-box;
    .card-title {
      font-weight: 700;
      font-size: 28rpx;
      color: #ffffff;
      font-family: "CustomFont";
    }
    .card-desc {
      font-weight: 400;
      font-size: 22rpx;
      color: rgba(255, 255, 255, 0.8);
      width: 180rpx;
      padding-bottom: 20rpx;
    }
    .card-btn {
      width: 276rpx;
      height: 64rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 10rpx;

      font-weight: 400;
      font-size: 28rpx;

      &.card-reward {
        background: url("../../static/me/job/rw_btn_01.png") center/100%
          no-repeat;
        color: #c88618;
      }
      &.sign-btn {
        background: url("../../static/me/job/rw_btn_02.png") center/100%
          no-repeat;
        color: #0484ce;
      }
    }
    &.purple-card {
      position: relative;
      left: 0;
      top: 0;
      background: url("../../static/me/job/sy_img_xingyuandaka01.png")
        center/100% no-repeat;
      .bg-box {
        position: absolute;
        left: 0;
        top: 0;
        border-radius:15rpx;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 156rpx;
          height: 156rpx;
        }
      }
    }
    &.yellow-card {
      background: url("../../static/me/job/sy_img_xingyuandaka02.png")
        center/100% no-repeat;
    }
  }
}

// 任务列表
.task-list-box {
  box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(231, 231, 231, 0.29);
  border-radius: 20rpx;
  background: url("../../static/me/job/rw_bg_02.png") top left/100% no-repeat,
    #ffffff;
  padding: 20rpx;
  box-sizing: border-box;
  .task-header {
    display: flex;
    align-items: center;

    image {
      width: 200rpx;
      height: 50rpx;
      margin-right: 4rpx;
    }
    .task-subtitle {
      font-weight: 400;
      font-size: 22rpx;
      color: #999999;
    }
  }
  .task-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #f0f0f0;
    justify-content: space-between;
    .task-info {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      max-width: 408rpx;
      image {
        width: 88rpx;
        height: 88rpx;
        flex-shrink: 0;
        margin-right: 20rpx;
      }
      .task-name {
        color: #333;
        margin-bottom: 6rpx;
        max-width: 310rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #1f1f1f;
        font-family: "PingFang SC-Bold";
      }

      .task-desc {
        max-width: 310rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #999999;
      }
    }

    .task-reward {
      font-size: 28rpx;
      color: #1f1f1f;
      margin-right: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 36rpx;
        height: 36rpx;
      }
    }

    .task-btn {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 140rpx;
      height: 52rpx;
      background: #1f1f1f;
      border-radius: 26rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #acf934;
      border: 2rpx solid #1f1f1f;

      &.task-completed {
        background-color: #fff;
        color: #1f1f1f;
        border: 2rpx solid #1f1f1f;
      }
    }
  }
}

// 兑换弹窗
.NicknamePopUpWindowBox {
  ::v-deep.uv-popup .uv-popup__content {
    border-radius: 28rpx 28rpx 0 0;
    min-height: 400rpx;
    background: url("../../static/me/wd_bg_jianjie.png") center top/100% auto
        no-repeat,
      #f2f6f2 !important;
    padding-bottom: 40rpx;
  }
}

.NicknamePopUpWindow {
  .nickname-heard {
    padding: 0 32rpx;
    padding-top: 20rpx;
    padding-bottom: -26rpx;
    display: flex;
    flex-direction: center;
    align-items: center;
    position: relative;
    left: 0;
    top: 0;
    width: 100vw;
    box-sizing: border-box;
    .available-mCoin {
      font-weight: 400;
      font-size: 24rpx;
      color: #1f1f1f;
    }
    .exchange-title {
      position: absolute;
      left: 50%;
      top: calc(50% + 10rpx);
      transform: translate(-50%, -50%);
      font-family: "CustomFont";
      font-weight: 700;
      font-size: 36rpx;
      color: #1f1f1f;
    }
  }
  .content-box {
    width: 686rpx;
    height: 420rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 0 auto;
    margin-bottom: 40rpx;
    padding: 24rpx;
    .prompt {
      font-weight: 400;
      font-size: 28rpx;
      color: #1f1f1f;
      padding-bottom: 24rpx;
      text {
        color: #999999;
        font-size: 24rpx;
      }
    }
    ::v-deep.uv-input {
      background-color: #f2f6f2;
    }
    .input-box {
      width: 100%;
      height: 88rpx;
      background: #f2f6f2;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 60rpx;
      padding: 18rpx 24rpx;
      > image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 16rpx;
      }
      .input {
      }
    }

    .tips-text {
      font-size: 24rpx;
      color: #999;
      text-align: center;
      display: block;
      text-align: center;
      padding: 20rpx 0;
    }
  }
}

// 星源余额展示区
.bean-balance {
  width: 690rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

  .balance-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .title-area {
      display: flex;
      flex-direction: row;
      align-items: center;

      .yellow-dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #90d369;
        margin-right: 10rpx;
      }

      .my-bean-title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .exchange-btn {
      width: 120rpx;
      height: 60rpx;
      background-color: #90d369;
      border-radius: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #fff;
      font-weight: bold;
    }
  }

  .bean-number {
    font-size: 80rpx;
    font-weight: bold;
    color: #333;
    margin-top: 20rpx;
  }
}

// 星愿打卡区域
.sign-cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 30rpx;

  .card {
    width: 330rpx;
    height: 240rpx;
    border-radius: 24rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .card-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 10rpx;
    }

    .card-desc {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 30rpx;
    }

    .card-reward {
      font-size: 30rpx;
      color: #ffffff;
      font-weight: bold;
    }

    .card-progress {
      font-size: 36rpx;
      color: #ffffff;
      font-weight: bold;
      margin-top: auto;
    }

    .sign-btn {
      width: 180rpx;
      height: 70rpx;
      background-color: #ffffff;
      border-radius: 35rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      margin-top: auto;
    }
  }

  .purple-card {
    background-color: #9c27b0;
  }

  .yellow-card {
    background-color: #90d369;
  }
}

// 任务列表
.task-list {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

  .task-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 30rpx;

    .task-title {
      font-size: 34rpx;
      color: #333;
      font-weight: bold;
      margin-right: 20rpx;
    }

    .task-subtitle {
      font-size: 24rpx;
      color: #999;
    }
  }

  .task-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #f0f0f0;

    .task-info {
      flex: 1;

      .task-name {
        font-size: 30rpx;
        color: #333;
        margin-bottom: 6rpx;
      }

      .task-desc {
        font-size: 24rpx;
        color: #999;
      }
    }

    .task-reward {
      font-size: 30rpx;
      color: #90d369;
      font-weight: bold;
      margin-right: 20rpx;
    }

    .task-btn {
      width: 120rpx;
      height: 60rpx;
      background-color: #90d369;
      border-radius: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
      color: #fff;
      font-weight: bold;
    }

    .task-completed {
      background-color: #f0f0f0;
      color: #999;
    }
  }
}

// 星源兑换弹窗
.exchange-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .popup-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 24rpx 24rpx 0 0;
    padding-bottom: 50rpx;

    .popup-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;

      .available-balance {
        font-size: 28rpx;
        color: #333;
      }

      .exchange-title {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .exchange-area {
      background-color: #ffffff;
      margin: 0 30rpx;
      border-radius: 20rpx;
      padding: 30rpx;

      .exchange-title-area {
        margin-bottom: 40rpx;

        .exchange-main-title {
          font-size: 34rpx;
          color: #333;
          font-weight: bold;
          display: block;
          margin-bottom: 10rpx;
        }

        .exchange-subtitle {
          font-size: 24rpx;
          color: #999;
        }
      }

      .input-area {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 50rpx;

        .bean-icon {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          background-color: #ffe156;
          margin-right: 20rpx;
        }

        .exchange-input {
          flex: 1;
          height: 60rpx;
          font-size: 30rpx;
        }
      }

      .action-area {
        display: flex;
        flex-direction: column;
        align-items: center;

        .exchange-btn-large {
          width: 100%;
          height: 90rpx;
          background-color: #90d369;
          border-radius: 45rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32rpx;
          color: #fff;
          font-weight: bold;
          margin-bottom: 20rpx;
        }

        .tips-text {
          font-size: 24rpx;
          color: #999;
          text-align: center;
        }
      }
    }
  }
}

// 签到弹窗
.sign-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .sign-popup-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 30rpx;
    padding-bottom: 50rpx;

    .sign-popup-header {
      position: relative;
      padding-bottom: 30rpx;

      .sign-popup-title {
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
        margin-bottom: 30rpx;
        display: block;
      }

      .sign-notify-switch {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;

        .sign-notify-text {
          font-size: 24rpx;
          color: #666666;
          margin-right: 10rpx;
        }

        .sign-switch {
          transform: scale(0.7);
        }
      }

      .sign-days-tag {
        display: inline-block;
        padding: 6rpx 20rpx;
        background-color: #ffd54f;
        border-radius: 24rpx;
        font-size: 24rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .vip-area {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 30rpx;

      .vip-left {
        .vip-text {
          font-size: 26rpx;
          color: #333333;
        }
      }

      .vip-right {
        .vip-offer {
          font-size: 24rpx;
          color: #9c27b0;
        }
      }
    }

    .sign-grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 0 -10rpx;
      margin-bottom: 40rpx;

      .sign-grid-item {
        width: calc(33.33% - 20rpx);
        background-color: #f5f5f5;
        border-radius: 12rpx;
        padding: 20rpx;
        margin: 10rpx;
        position: relative;
        height: 180rpx;
        display: flex;
        flex-direction: column;

        .sign-day-num {
          font-size: 24rpx;
          color: #666666;
          margin-bottom: 10rpx;
        }

        .sign-item-img {
          width: 70rpx;
          height: 70rpx;
          background-color: #dddddd;
          border-radius: 50%;
          margin: 10rpx auto;
        }

        .sign-item-name {
          font-size: 24rpx;
          color: #333333;
          text-align: center;
          margin-top: auto;
        }

        .sign-vip-tag {
          position: absolute;
          top: 20rpx;
          right: 20rpx;
          padding: 4rpx 10rpx;
          background-color: #9c27b0;
          border-radius: 10rpx;
          font-size: 20rpx;
          color: #ffffff;
        }

        .sign-received-mask {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 12rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          .received-text {
            font-size: 28rpx;
            color: #ffffff;
            font-weight: bold;
          }
        }
      }
    }

    .sign-btn-large {
      width: 100%;
      height: 90rpx;
      background-color: #9c27b0;
      border-radius: 45rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      color: #ffffff;
      font-weight: bold;

      &.sign-btn-disabled {
        background-color: #cccccc;
        color: #999999;
      }
    }
  }
}