瀏覽代碼

fix: made price area clickable and promoted price field to top of modal

unknown 1 天之前
父節點
當前提交
92fae5c5a8
共有 2 個文件被更改,包括 17 次插入15 次删除
  1. 5 5
      src/components/admin/OrderCard.vue
  2. 12 10
      src/pages/Admin.vue

+ 5 - 5
src/components/admin/OrderCard.vue

@@ -196,12 +196,12 @@
         </div>
 
         <div class="space-y-4 mb-8">
-           <div class="flex justify-between items-baseline group/edit relative">
-             <span class="text-[10px] font-bold uppercase text-muted-foreground">{{ t("admin.fields.totalPrice") }}</span>
-             <div class="flex items-center gap-2">
-               <p class="text-2xl font-black font-display text-primary">{{ order.invoice_amount || 0 }} EUR</p>
-               <button @click.stop="$emit('edit-order', order)" class="opacity-0 group-hover/edit:opacity-100 p-1 text-primary"><Edit2 class="w-3.5 h-3.5" /></button>
+           <div class="space-y-1 group/edit cursor-pointer hover:bg-primary/5 p-2 -m-2 rounded-xl transition-colors" @click="$emit('edit-order', order)">
+             <div class="flex justify-between items-baseline">
+               <span class="text-[10px] font-bold uppercase text-muted-foreground">{{ t("admin.fields.totalPrice") }}</span>
+               <Edit2 class="w-3 h-3 text-primary opacity-30 group-hover/edit:opacity-100 transition-opacity" />
              </div>
+             <p class="text-2xl font-black font-display text-primary">{{ order.invoice_amount || 0 }} EUR</p>
            </div>
            
            <div class="pt-4 border-t border-primary/10 space-y-3">

+ 12 - 10
src/pages/Admin.vue

@@ -162,26 +162,28 @@
                 </div>
 
                 <div class="space-y-4">
+                  <div class="p-4 bg-primary/5 rounded-2xl border border-primary/20 space-y-4">
+                    <div class="space-y-1">
+                      <label class="text-[10px] font-bold uppercase text-primary ml-1">{{ t("admin.fields.finalPrice") }} (EUR)</label>
+                      <input v-model.number="orderForm.total_price" type="number" step="0.01" class="w-full bg-background border border-primary/30 rounded-xl px-4 py-3 text-2xl font-black text-primary focus:ring-4 ring-primary/10 outline-none" />
+                    </div>
+                    <div class="space-y-1">
+                      <label class="text-[10px] font-bold uppercase text-muted-foreground ml-1">{{ t("admin.fields.quantity") }}</label>
+                      <input v-model.number="orderForm.quantity" type="number" class="w-full bg-background border border-border/50 rounded-xl px-4 py-2 text-sm font-bold focus:ring-2 ring-primary/20 outline-none" />
+                    </div>
+                  </div>
                   <div class="space-y-1">
                     <label class="text-[10px] font-bold uppercase text-muted-foreground ml-1">{{ t("admin.fields.shippingAddress") }}</label>
                     <input v-model="orderForm.shipping_address" class="w-full bg-background border border-border/50 rounded-xl px-4 py-3 text-sm focus:ring-2 ring-primary/20 outline-none" />
                   </div>
                   <div class="space-y-1">
                     <label class="text-[10px] font-bold uppercase text-muted-foreground ml-1">{{ t("admin.fields.projectNotes") }}</label>
-                    <textarea v-model="orderForm.notes" class="w-full bg-background border border-border/50 rounded-xl px-4 py-3 text-sm h-[132px] focus:ring-2 ring-primary/20 outline-none resize-none" />
+                    <textarea v-model="orderForm.notes" class="w-full bg-background border border-border/50 rounded-xl px-4 py-3 text-sm h-[80px] focus:ring-2 ring-primary/20 outline-none resize-none" />
                   </div>
                 </div>
             </div>
 
-            <div class="p-6 bg-primary/5 rounded-2xl border border-primary/10 grid grid-cols-2 md:grid-cols-4 gap-6">
-                <div class="space-y-1">
-                  <label class="text-[10px] font-bold uppercase text-primary/60 ml-1">{{ t("admin.fields.finalPrice") }} (EUR)</label>
-                  <input v-model.number="orderForm.total_price" type="number" step="0.01" class="w-full bg-background border border-border/50 rounded-xl px-3 py-2 text-sm font-bold" />
-                </div>
-                <div class="space-y-1">
-                  <label class="text-[10px] font-bold uppercase text-primary/60 ml-1">{{ t("admin.fields.quantity") }}</label>
-                  <input v-model.number="orderForm.quantity" type="number" class="w-full bg-background border border-border/50 rounded-xl px-3 py-2 text-sm font-bold" />
-                </div>
+            <div class="p-6 bg-muted/20 rounded-2xl border border-border/10 grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div class="space-y-1">
                   <label class="text-[10px] font-bold uppercase text-primary/60 ml-1">{{ t("admin.fields.material") }}</label>
                   <select v-model="orderForm.material_name" class="w-full bg-background border border-border/50 rounded-xl px-3 py-2 text-sm">