排版

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

@@ -322,7 +322,6 @@ export default {
     .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;
 
@@ -335,12 +334,7 @@ export default {
             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);
-            }
+            margin: 10upx;
 
             // 图片容器
             .flower-img-box {
@@ -394,7 +388,6 @@ export default {
                     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;
@@ -402,6 +395,7 @@ export default {
                     width: 100%;
 
                     .qty-btn {
+                        margin: 0 2.66upx;
                         width: 20.19upx;
                         height: 20.19upx;
                         display: flex;
@@ -461,32 +455,29 @@ export default {
 
     // 底部按钮栏 - 再缩小 1/2 (总计 33.33%)
     .popup-footer {
-        height: 34upx;
+        height: 38upx;
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 16upx;
         padding: 0 14upx;
         border-top: 2upx solid #eeeeee;
         background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
 
         .footer-btn {
+            margin: 0 10upx;
             flex: 1;
-            height: 27upx;
+            height: 32upx;
             display: flex;
             align-items: center;
             justify-content: center;
             border-radius: 2.22upx;
             cursor: pointer;
             transition: all 0.3s;
-            font-size: 13upx;
-            font-weight: bold;
-            min-width: 41.67upx;
-            max-width: 69.44upx;
+            min-width: 42upx;
+            max-width: 69upx;
 
             text {
-                font-size: 13upx;
-                font-weight: bold;
+                font-size: 15upx;
             }
 
             &.cancel-btn {
@@ -507,10 +498,10 @@ export default {
     @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 {
+                margin: 14.06upx;
                 .flower-name {
                     font-size: 7.97upx;
                 }
@@ -540,23 +531,23 @@ export default {
     @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;
+                margin: 10.62upx;
 
                 .flower-name {
                     font-size: 6.56upx;
                 }
 
                 .quantity-controller {
-                    gap: 3.75upx;
                     padding: 3.38upx;
 
                     .qty-btn {
                         width: 17.81upx;
                         height: 17.81upx;
+                        margin: 0 1.88upx;
                         text {
                             font-size: 7.5upx;
                         }