修改选中菜品规格的样式

src/views/order/console.vue

@@ -227,15 +227,20 @@
         <div v-if="currentItem">
         <div v-for="(specs, name) in groupSpecsByName(currentItem.specsList)" :key="name" class="mb-4">
             <div class="font-bold mb-2">{{ name }}</div>
-            <el-radio-group v-model="selectedSpecs[name]">
-            <el-radio
-                v-for="spec in specs"
-                :key="spec.id"
-                :label="spec.id"
-            >
-                {{ spec.value }}
-            </el-radio>
-            </el-radio-group>
+            <div class="flex flex-wrap gap-2">
+                <div
+                    v-for="spec in specs"
+                    :key="spec.id"
+                    class="flex-1 h-12 border rounded-md flex items-center justify-center cursor-pointer relative"
+                    :class="{'border-primary text-primary bg-[#EDEFFF]': selectedSpecs[name] === spec.id}"
+                    @click="selectedSpecs[name] = spec.id"
+                >
+                    <span>{{ spec.value }}</span>
+                    <el-icon v-if="selectedSpecs[name] === spec.id" class="absolute right-0 bottom-0 text-primary" style="font-size: 16px;">
+                        <Check />
+                    </el-icon>
+                </div>
+            </div>
         </div>
         </div>
         <template #footer>