MoeNovaClient/components/dialogs/ShopDialog.scss

.shop-content {
  margin-top: 25rpx;
  margin-left: 10rpx;
  background: url('/static/island/UI/task/rw_bg.png') no-repeat center center;
  background-size: cover;
  width: 702rpx;
  height: 984rpx;
  display: flex;
  flex-direction: column;

  .shop-tabs {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60rpx;
    gap: 40rpx;

    .tab-item {
      color: #FFF;
      font-size: 32rpx;
      font-weight: bold;
      position: relative;
      padding: 0 20rpx;

      &.active {
        &::after {
          content: '';
          position: absolute;
          bottom: -10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 120rpx;
          height: 4rpx;
          background: #FFF;
          border-radius: 2rpx;
        }
      }
    }
  }

  .shop-items {
    flex: 1;
    overflow-y: auto;
    margin-top: 10rpx;
    margin-bottom: 18rpx;
    padding: 0 20rpx;

    &::-webkit-scrollbar {
      width: 6rpx;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(166, 124, 82, 0.3);
      border-radius: 3rpx;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
    }

    .shop-item {
      margin-bottom: 20rpx;

      .item-card {
        background: #FFF1E4;
        box-shadow: inset 0rpx 6rpx 0rpx 0rpx rgba(255,255,255,0.3), 
                    inset 0rpx -6rpx 0rpx 0rpx #F6E0CB, 
                    0rpx 4rpx 4rpx 0rpx #F3D2B2;
        border-radius: 28rpx;
        border: 2rpx solid #DEB691;
        padding: 20rpx;
        display: flex;
        position: relative;

        .new-tag {
          position: absolute;
          top: -10rpx;
          right: 20rpx;
          background: linear-gradient(to right, #FF6B6B, #FF8E8E);
          color: #FFF;
          font-size: 20rpx;
          padding: 4rpx 12rpx;
          border-radius: 10rpx;
        }

        .item-left {
          margin-right: 20rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .item-icon {
            width: 120rpx;
            height: 120rpx;
            background: linear-gradient(to bottom right, #B8E986, #7EC242);
            border-radius: 16rpx;
            padding: 10rpx;
          }

          .owned-text {
            margin-top: 10rpx;
            color: #987453;
            font-size: 24rpx;
          }
        }

        .item-info {
          flex: 1;
          display: flex;
          flex-direction: column;

          .item-name {
            color: #987453;
            font-size: 28rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }

          .item-details {
            margin-bottom: 20rpx;

            .detail-text {
              color: #987453;
              font-size: 24rpx;
              margin-right: 20rpx;
            }
          }

          .item-bottom {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .item-price {
              display: flex;
              align-items: center;
              gap: 8rpx;

              .currency-icon {
                width: 32rpx;
                height: 32rpx;
              }

              text {
                color: #987453;
                font-size: 28rpx;
                font-weight: bold;
              }
            }

            .buy-btn {
              min-width: 120rpx;
              height: 62rpx;
              line-height: 62rpx;
              text-align: center;
              font-size: 24rpx;
              color: #ffffff;
              background-image: url('/static/island/UI/btn_yellow.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              border: none;
              padding: 0 20rpx;

              &:active {
                transform: scale(0.95);
                opacity: 0.9;
              }
            }
          }
        }
      }
    }
  }
}