MoeNovaClient/components/dialogs/ShopDialog.scss

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

  .shop-header {
    margin-top: -60rpx;
    width: 802rpx;
    height: 150rpx;
    margin-left: -50rpx;
    margin-right: -50rpx;
    background: url('/static/island/UI/shop/shop_header.png') no-repeat center center;
    background-size: contain;
  }

  .shop-name {
    width: 300rpx;
    height: 60rpx;
    margin: 0 auto;
    background: url('/static/island/UI/title_bg.png') no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .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;
        width: 90%;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between;

        .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 {
          flex-shrink: 0;
          margin-right: 20rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .item-grid {
            position: relative;
            display: flex;
            width: 120rpx;
            height: 120rpx;
            .item-icon {
              width: 120rpx;
              height: 120rpx;
              background: #FBD6A9;
              border-radius: 16rpx;
              padding: 5rpx;
              box-sizing: border-box;
              border: 2rpx solid #DEB691;
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            }

            .owned-text {
              font-size: 20rpx;
              color:#A95F3C;
              white-space: normal;
              line-height: 1.2;
              width: 95%;
              margin: 12rpx 2rpx 2rpx 2rpx;
              background: rgba(255, 255, 255, 0.8);
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              border-radius: 0 0 16rpx 16rpx;
              text-align: center;
            }
          }
        }

        .item-center {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin: 0 20rpx 0 0;

          .item-name {
            color: #987453;
            font-size: 24rpx;
            font-weight: bold;
            margin-bottom: 6rpx;
            text-align: left;
          }

          .item-details {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0rpx;

            .detail-text {
              color: #987453;
              font-size: 20rpx;
              text-align: left;
              white-space: pre-wrap;
              line-height: 1.4;
            }
          }
        }

        .item-right {
          flex-shrink: 0;
          
          .buy-btn {
            min-width: 150rpx;
            height: 55rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #ffffff;
            background-image: url('/static/island/UI/btn_green.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border: none;
            padding: 0;

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

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

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

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