排版

ghsPad/src/pages/home/components/selectFlowerGrid.vue

@@ -2,7 +2,7 @@
     <view class="flower-grid-popup">
         <!-- 标题栏 -->
         <view class="popup-header">
-            <text class="popup-title">选择花材</text>
+            <text class="popup-title">多颜色选择</text>
             <view class="close-btn" @tap="handleCancel">
                 <text>✕</text>
             </view>
@@ -240,9 +240,9 @@ export default {
 <style lang="scss" scoped>
 .flower-grid-popup {
     width: 80vw;
-    height: 99vh;
+    height: 98vh;
     background-color: #ffffff;
-    border-radius: 0 0 12upx 12upx;
+    border-radius: 0;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -260,15 +260,15 @@ export default {
         background-color:#c3cfe2;
 
         .popup-title {
-            font-size: 16upx;
+            font-size: 14upx;
             font-weight: bold;
             color: #333333;
             letter-spacing: 0.28upx;
         }
 
         .close-btn {
-            width: 14upx;
-            height: 14upx;
+            width: 16upx;
+            height: 16upx;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -277,16 +277,10 @@ export default {
             background-color: #ffffff;
             transition: all 0.3s;
             box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
-
             text {
-                font-size: 6.67upx;
+                font-size: 9upx;
                 color: #666666;
             }
-
-            &:active {
-                background-color: #e0e0e0;
-                box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.2);
-            }
         }
     }
 
@@ -464,7 +458,7 @@ export default {
         background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
 
         .footer-btn {
-            margin: 0 10upx;
+            margin: 0 20upx;
             flex: 1;
             height: 32upx;
             display: flex;
@@ -493,77 +487,6 @@ export default {
             }
         }
     }
-
-    // 商米显示器(1920x1080)特定适配 - 缩小卡片 85%
-    @media (min-width: 1800px) {
-        .flowers-grid {
-            grid-template-columns: repeat(auto-fit, minmax(127.5upx, 1fr));
-            padding: 28.13upx 34.37upx;
-
-            .flower-grid-item {
-                margin: 14.06upx;
-                .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));
-            padding: 18.75upx 21.88upx;
-
-            .flower-grid-item {
-                padding: 8.13upx;
-                margin: 10.62upx;
-
-                .flower-name {
-                    font-size: 6.56upx;
-                }
-
-                .quantity-controller {
-                    padding: 3.38upx;
-
-                    .qty-btn {
-                        width: 17.81upx;
-                        height: 17.81upx;
-                        margin: 0 1.88upx;
-                        text {
-                            font-size: 7.5upx;
-                        }
-                    }
-
-                    .qty-display {
-                        width: 23.13upx;
-                        height: 17.81upx;
-                        .qty-input {
-                            font-size: 6.56upx;
-                        }
-                    }
-                }
-            }
-        }
-    }
 }
 </style>