|
|
@@ -0,0 +1,576 @@
|
|
|
+<template>
|
|
|
+ <view class="flower-grid-popup">
|
|
|
+ <!-- 标题栏 -->
|
|
|
+ <view class="popup-header">
|
|
|
+ <text class="popup-title">选择花材</text>
|
|
|
+ <view class="close-btn" @tap="handleCancel">
|
|
|
+ <text>✕</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 商品网格容器 -->
|
|
|
+ <scroll-view class="grid-scroll-container" scroll-y="true" :style="{height: scrollHeight}">
|
|
|
+ <view class="flowers-grid">
|
|
|
+ <view v-for="item in flowerList" :key="item.id" class="flower-grid-item">
|
|
|
+ <!-- 商品图片 -->
|
|
|
+ <view class="flower-img-box">
|
|
|
+ <image
|
|
|
+ :src="item.cover"
|
|
|
+ :style="{ backgroundColor: getImageBgColor(item.id) }"
|
|
|
+ mode="aspectFill"
|
|
|
+ class="flower-img"
|
|
|
+ lazy-load="false">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 商品信息 -->
|
|
|
+ <view class="flower-info">
|
|
|
+ <text class="flower-name">{{item.name}}</text>
|
|
|
+
|
|
|
+ <!-- 数量调整器 -->
|
|
|
+ <view class="quantity-controller">
|
|
|
+ <view class="qty-btn minus-btn" @tap="decreaseQty(item)">
|
|
|
+ <text>−</text>
|
|
|
+ </view>
|
|
|
+ <view class="qty-display">
|
|
|
+ <input
|
|
|
+ v-model.number="item.selectedQty"
|
|
|
+ type="number"
|
|
|
+ class="qty-input"
|
|
|
+ @blur="validateQty(item)">
|
|
|
+ </view>
|
|
|
+ <view class="qty-btn plus-btn" @tap="increaseQty(item)">
|
|
|
+ <text>+</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 底部按钮栏 -->
|
|
|
+ <view class="popup-footer">
|
|
|
+ <view class="footer-btn cancel-btn" @tap="handleCancel">
|
|
|
+ <text>取消</text>
|
|
|
+ </view>
|
|
|
+ <view class="footer-btn confirm-btn" @tap="handleConfirm">
|
|
|
+ <text>确认</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'selectFlowerGrid',
|
|
|
+ props: {
|
|
|
+ flowerData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ flowerList: [],
|
|
|
+ scrollHeight: '600upx',
|
|
|
+ // 默认模拟数据
|
|
|
+ defaultMockFlowers: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '自由女神A级',
|
|
|
+ cover: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="%23C41E3A" width="200" height="200"/><text x="100" y="100" font-size="24" fill="%23fff" text-anchor="middle" dominant-baseline="middle">自由女神</text></svg>',
|
|
|
+ price: 88,
|
|
|
+ stock: 150,
|
|
|
+ property: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '香槟玫瑰',
|
|
|
+ cover: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect fill="%23F4D03F" width="200" height="200"/%3E%3Ctext x="50%25" y="50%25" font-size="24" fill="%23333" text-anchor="middle" dy=".3em"%3E香槟玫瑰%3C/text%3E%3C/svg%3E',
|
|
|
+ price: 65,
|
|
|
+ stock: 200,
|
|
|
+ property: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: '白玫瑰',
|
|
|
+ cover: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect fill="%23FFFFFF" width="200" height="200"/%3E%3Crect fill="none" stroke="%23ddd" stroke-width="2" width="200" height="200"/%3E%3Ctext x="50%25" y="50%25" font-size="24" fill="%23333" text-anchor="middle" dy=".3em"%3E白玫瑰%3C/text%3E%3C/svg%3E',
|
|
|
+ price: 55,
|
|
|
+ stock: 180,
|
|
|
+ property: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: '粉玫瑰',
|
|
|
+ cover: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect fill="%23FFB6C1" width="200" height="200"/%3E%3Ctext x="50%25" y="50%25" font-size="24" fill="%23fff" text-anchor="middle" dy=".3em"%3E粉玫瑰%3C/text%3E%3C/svg%3E',
|
|
|
+ price: 60,
|
|
|
+ stock: 160,
|
|
|
+ property: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: '向日葵',
|
|
|
+ cover: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect fill="%23FFD700" width="200" height="200"/%3E%3Ctext x="50%25" y="50%25" font-size="24" fill="%23333" text-anchor="middle" dy=".3em"%3E向日葵%3C/text%3E%3C/svg%3E',
|
|
|
+ price: 45,
|
|
|
+ stock: 120,
|
|
|
+ property: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ name: '郁金香',
|
|
|
+ cover: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect fill="%23FF69B4" width="200" height="200"/%3E%3Ctext x="50%25" y="50%25" font-size="24" fill="%23fff" text-anchor="middle" dy=".3em"%3E郁金香%3C/text%3E%3C/svg%3E',
|
|
|
+ price: 50,
|
|
|
+ stock: 140,
|
|
|
+ property: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ name: '百合',
|
|
|
+ cover: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect fill="%23FFF8DC" width="200" height="200"/%3E%3Crect fill="none" stroke="%23ddd" stroke-width="2" width="200" height="200"/%3E%3Ctext x="50%25" y="50%25" font-size="24" fill="%23333" text-anchor="middle" dy=".3em"%3E百合%3C/text%3E%3C/svg%3E',
|
|
|
+ price: 75,
|
|
|
+ stock: 100,
|
|
|
+ property: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ name: '康乃馨',
|
|
|
+ cover: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect fill="%23FFB6C1" width="200" height="200"/%3E%3Ctext x="50%25" y="50%25" font-size="24" fill="%23fff" text-anchor="middle" dy=".3em"%3E康乃馨%3C/text%3E%3C/svg%3E',
|
|
|
+ price: 35,
|
|
|
+ stock: 250,
|
|
|
+ property: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ name: '绣球花',
|
|
|
+ cover: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect fill="%239370DB" width="200" height="200"/%3E%3Ctext x="50%25" y="50%25" font-size="24" fill="%23fff" text-anchor="middle" dy=".3em"%3E绣球花%3C/text%3E%3C/svg%3E',
|
|
|
+ price: 70,
|
|
|
+ stock: 110,
|
|
|
+ property: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ flowerData: {
|
|
|
+ handler(newData) {
|
|
|
+ // 如果没有传入数据或数据为空，使用默认模拟数据
|
|
|
+ const dataToUse = (newData && newData.length > 0) ? newData : this.defaultMockFlowers
|
|
|
+
|
|
|
+ this.flowerList = dataToUse.map(item => ({
|
|
|
+ ...item,
|
|
|
+ selectedQty: item.selectedQty || 0
|
|
|
+ }))
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.calculateScrollHeight()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 计算滚动区域高度
|
|
|
+ calculateScrollHeight() {
|
|
|
+ // 总高度 - 头部高度 - 底部按钮高度
|
|
|
+ this.scrollHeight = 'calc(100vh - 100upx - 90upx)'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 增加数量
|
|
|
+ increaseQty(item) {
|
|
|
+ this.$util.hitVoice()
|
|
|
+ item.selectedQty = parseInt(item.selectedQty) || 0
|
|
|
+ item.selectedQty++
|
|
|
+ },
|
|
|
+
|
|
|
+ // 减少数量
|
|
|
+ decreaseQty(item) {
|
|
|
+ this.$util.hitVoice()
|
|
|
+ item.selectedQty = parseInt(item.selectedQty) || 0
|
|
|
+ if (item.selectedQty > 0) {
|
|
|
+ item.selectedQty--
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 验证数量输入
|
|
|
+ validateQty(item) {
|
|
|
+ let qty = parseInt(item.selectedQty) || 0
|
|
|
+ if (qty < 0) {
|
|
|
+ item.selectedQty = 0
|
|
|
+ }
|
|
|
+ item.selectedQty = qty
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理取消
|
|
|
+ handleCancel() {
|
|
|
+ this.$emit('cancel')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理确认
|
|
|
+ handleConfirm() {
|
|
|
+ // 筛选已选择的商品（数量大于0）
|
|
|
+ const selectedItems = this.flowerList.filter(item => item.selectedQty > 0)
|
|
|
+
|
|
|
+ if (selectedItems.length === 0) {
|
|
|
+ this.$msg('请至少选择一种花材')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$emit('confirm', selectedItems)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取图片背景色
|
|
|
+ getImageBgColor(id) {
|
|
|
+ const colors = [
|
|
|
+ '#C41E3A', // 自由女神
|
|
|
+ '#F4D03F', // 香槟玫瑰
|
|
|
+ '#FFFFFF', // 白玫瑰
|
|
|
+ '#FFB6C1', // 粉玫瑰
|
|
|
+ '#FFD700', // 向日葵
|
|
|
+ '#FF69B4', // 郁金香
|
|
|
+ '#FFF8DC', // 百合
|
|
|
+ '#FFB6C1', // 康乃馨
|
|
|
+ '#9370DB' // 绣球花
|
|
|
+ ]
|
|
|
+ return colors[id - 1] || '#f5f5f5'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.flower-grid-popup {
|
|
|
+ width: 95vw;
|
|
|
+ height: 95vh;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 12upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.15);
|
|
|
+
|
|
|
+ // 头部 - 再缩小 1/2 (总计 33.33%)
|
|
|
+ .popup-header {
|
|
|
+ height: 27.78upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 11.11upx;
|
|
|
+ border-bottom: 2upx solid #eeeeee;
|
|
|
+ background-color:#c3cfe2;
|
|
|
+
|
|
|
+ .popup-title {
|
|
|
+ font-size: 16upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ letter-spacing: 0.28upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ width: 14upx;
|
|
|
+ height: 14upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ transition: all 0.3s;
|
|
|
+ box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 6.67upx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 滚动区域
|
|
|
+ .grid-scroll-container {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 5upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background: linear-gradient(180deg, #3385ff 0%, #2568d3 100%);
|
|
|
+ border-radius: 5upx;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: linear-gradient(180deg, #2568d3 0%, #1a4fa1 100%);
|
|
|
+ box-shadow: 0 0 5upx rgba(51, 133, 255, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 网格容器 - 缩小卡片 85%，增加边距
|
|
|
+ .flowers-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(116.81upx, 1fr));
|
|
|
+ gap: 25upx;
|
|
|
+ padding: 25upx 31.25upx;
|
|
|
+ grid-auto-rows: max-content;
|
|
|
+
|
|
|
+ .flower-grid-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fafafa;
|
|
|
+ padding: 10.63upx;
|
|
|
+ border-radius: 6.38upx;
|
|
|
+ transition: all 0.3s;
|
|
|
+ border: 1upx solid #e8e8e8;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #f5f7ff;
|
|
|
+ border-color: #3385ff;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(51, 133, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图片容器
|
|
|
+ .flower-img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ aspect-ratio: 1 / 1;
|
|
|
+ margin-bottom: 7.97upx;
|
|
|
+ border-radius: 5.31upx;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #C41E3A;
|
|
|
+ border: 1upx solid #e0e0e0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .flower-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 商品信息
|
|
|
+ .flower-info {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .flower-name {
|
|
|
+ font-size: 7.44upx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 7.97upx;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 1.4;
|
|
|
+ min-height: 14.88upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 数量调整器
|
|
|
+ .quantity-controller {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 5.31upx;
|
|
|
+ background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
|
|
|
+ border: 2upx solid #e8e8e8;
|
|
|
+ border-radius: 4.25upx;
|
|
|
+ padding: 4.25upx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .qty-btn {
|
|
|
+ width: 20.19upx;
|
|
|
+ height: 20.19upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 2upx solid #d0d0d0;
|
|
|
+ border-radius: 3.19upx;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 8.5upx;
|
|
|
+ color: #666666;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ transform: scale(0.95);
|
|
|
+ box-shadow: inset 0 2upx 4upx rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.minus-btn:active {
|
|
|
+ color: #ff6b6b;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.plus-btn:active {
|
|
|
+ color: #51cf66;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qty-display {
|
|
|
+ width: 26.56upx;
|
|
|
+ height: 20.19upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .qty-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部按钮栏 - 再缩小 1/2 (总计 33.33%)
|
|
|
+ .popup-footer {
|
|
|
+ height: 30.56upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 11.11upx;
|
|
|
+ padding: 0 13.89upx;
|
|
|
+ border-top: 2upx solid #eeeeee;
|
|
|
+ background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
|
|
|
+
|
|
|
+ .footer-btn {
|
|
|
+ flex: 1;
|
|
|
+ height: 16.67upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 2.22upx;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ font-size: 10upx;
|
|
|
+ font-weight: bold;
|
|
|
+ min-width: 41.67upx;
|
|
|
+ max-width: 69.44upx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 10upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.cancel-btn {
|
|
|
+ background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
|
|
|
+ color: #666666;
|
|
|
+ border: 2upx solid #d0d0d0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.confirm-btn {
|
|
|
+ background: linear-gradient(135deg, #3385ff 0%, #2568d3 100%);
|
|
|
+ color: #ffffff;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(51, 133, 255, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 商米显示器(1920x1080)特定适配 - 缩小卡片 85%
|
|
|
+ @media (min-width: 1800px) {
|
|
|
+ .flowers-grid {
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(127.5upx, 1fr));
|
|
|
+ gap: 28.13upx;
|
|
|
+ padding: 28.13upx 34.37upx;
|
|
|
+
|
|
|
+ .flower-grid-item {
|
|
|
+ .flower-name {
|
|
|
+ font-size: 7.97upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quantity-controller {
|
|
|
+ .qty-btn {
|
|
|
+ width: 22.3upx;
|
|
|
+ height: 22.3upx;
|
|
|
+ text {
|
|
|
+ font-size: 9.38upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qty-display {
|
|
|
+ width: 29.06upx;
|
|
|
+ height: 22.3upx;
|
|
|
+ .qty-input {
|
|
|
+ font-size: 7.97upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 平板/中等屏幕适配 - 缩小卡片 85%
|
|
|
+ @media (max-width: 1200px) {
|
|
|
+ .flowers-grid {
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(95.63upx, 1fr));
|
|
|
+ gap: 21.25upx;
|
|
|
+ padding: 18.75upx 21.88upx;
|
|
|
+
|
|
|
+ .flower-grid-item {
|
|
|
+ padding: 8.13upx;
|
|
|
+
|
|
|
+ .flower-name {
|
|
|
+ font-size: 6.56upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quantity-controller {
|
|
|
+ gap: 3.75upx;
|
|
|
+ padding: 3.38upx;
|
|
|
+
|
|
|
+ .qty-btn {
|
|
|
+ width: 17.81upx;
|
|
|
+ height: 17.81upx;
|
|
|
+ text {
|
|
|
+ font-size: 7.5upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qty-display {
|
|
|
+ width: 23.13upx;
|
|
|
+ height: 17.81upx;
|
|
|
+ .qty-input {
|
|
|
+ font-size: 6.56upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
