MoeNovaClient/pages/vip/M_purchase.scss

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
page {
  background-color: #f2f6f2;
}
.page {
  background-color: #f2f6f2;
  width: 100%;
  min-height: 100vh;
}

.topbg {
}
.topBody {
  width: 750rpx;
  min-height: 100vh;
  padding-bottom: 220rpx;
  position: relative;
  left: 0;
  top: 0;
  .PageHeader {
    background-color: #f2f6f2;

    ::v-deep .uni-icons {
      color: #1f1f1f !important;
    }

    .fa {
      color: #1f1f1f;
    }

    .more-options {
      position: relative;
      display: inline-block;

      .fa {
        font-size: 40rpx;
        padding: 0 20rpx;
      }

      .dropdown-menu {
        position: absolute;
        top: calc(100% + 10rpx);
        right: 20rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 0;
        width: 200rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
        z-index: 100;
        transform-origin: top right;
        animation: dropdownAnimation 0.2s ease-out;

        .dropdown-item {
          padding: 24rpx 0;
          color: #333333;
          font-size: 28rpx;
          position: relative;
          text-align: center;

          &:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1rpx;
            background-color: #f2f6f2;
          }

          &:active {
            background-color: #f8f8f8;
          }
        }
      }
    }
  }
  .reserveASeat {
    width: 100%;
    background: transparent;
    height: calc(var(--status-bar-height) + 90rpx);
  }
  .myGoldCoin-box {
    width: 686rpx;
    height: 196rpx;
    background: linear-gradient(to right, #444444, #1f1f1f);
    border-radius: 20rpx;
    margin: 0 auto;
    padding-top: 50rpx;
    padding-left: 40rpx;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 32rpx;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
    .myGoldCoin-box-content {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 24px;
      color: #acf934;
      line-height: 1.5;
    }
  }
}

@keyframes dropdownAnimation {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-5rpx);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

  .title {
    font-size: 34rpx;
  }
}
.thread {
  height: 210rpx;
  padding: 50rpx;
  font-size: 52rpx;
  color: #6e6a6a;
  padding-top: 80rpx;
}
.myinfo {
  width: 686rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 auto;

  .purchaseList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 4rpx;
    gap: 18rpx;
    .item {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      width: 218rpx;
      height: 168rpx;
      background: #ffffff;
      border-radius: 20rpx;
      border: 2px solid #fff;
      .num1 {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 40rpx;
        .name {
          font-size: 36rpx;
          color: #1f1f1f;
          padding-left: 4rpx;
          font-weight: 600;
        }
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .num2 {
        text-align: center;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .name {
          font-size: 28rpx;
          color: #999999;
          margin-top: 12rpx;
        }
      }
    }
    .itemSel {
      background: linear-gradient(
        180deg,
        #f0ffd9 0%,
        rgba(240, 255, 217, 0) 99%
      );
      border: 2px solid #1f1f1f;
      .num1 {
        .name {
          color: rgba(32, 32, 32, 1);
        }
      }
      .num2 {
        .name {
          color: #999;
        }
      }
    }
  }
  .jinchu {
    padding-top: 30rpx;
    padding-bottom: 20rpx;
    font-weight: 600;
    font-size: 28rpx;
    color: rgba(32, 32, 32, 1);
  }
  .mingxiList {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 686rpx;
    height: 88rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 0 auto;
    margin-bottom: 16rpx;
    padding: 0;
    padding-left: 25rpx;
    padding-right: 20rpx;
    .left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .icon {
        width: 48rpx;
      }
      background: rgba(22, 22, 22, 0);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
    .right {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      .icon {
        height: 32rpx;
        width: 32rpx;
      }
    }
  }
  .line {
    width: 690rpx;
    height: 2rpx;
    margin-top: 20rpx;
    background: #393939;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .agree {
    width: 90%;
   
    color: #666666;
    font-size: 24rpx;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    text-align: left;
    line-height: 32rpx;

    .agree2 {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding-right: 8rpx;
      flex-shrink: 0;
    }

    .xy {
      color: #0084ff;
      display: inline;
    }

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }
 
}
.blankHeight {
  height: 100rpx;
}