基礎sell介面v1

package.json

@@ -33,7 +33,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.6",
     "postcss": "^8.4.45",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.2.2",
     "vite": "^5.2.10",
     "vite-plugin-pwa": "^0.20.0",

src/routes/sales/add_sell.tsx

@@ -36,18 +36,21 @@ const styles = {
     color: 'black',
   },
   grid: {
-    padding: 10,
+    padding: '10px',
     display: 'flex',
+    flexWrap: 'wrap',
+    gap: '10px',
     justifyContent: 'space-between',
-    gap: 10,
   },
   card: {
-    width: '50%',
-    marginBottom: 10,
-    padding: 10,
+    flex: '1 1 calc(25% - 10px)',
+    maxWidth: 'calc(25% - 10px)',
+    marginBottom: '10px',
+    padding: '10px',
     backgroundColor: '#555',
-    borderRadius: 10,
+    borderRadius: '10px',
     color: 'white',
+    boxSizing: 'border-box',
   },
   productName: {
     fontSize: 16,
@@ -116,13 +119,6 @@ function EventSale() {
                   <p style={styles.productInfo}>價格: {p.price} 元</p>
                 </div>
               ))
-            }{
-              sales.map((p) => (
-                <div key={p.id} style={styles.card}>
-                  <h1 style={styles.productName}>{p.product}</h1>
-                  <p style={styles.productInfo}>價格: {p.price} 元</p>
-                </div>
-              ))
             }
           </div>
         </div>