Browse Source

🐞 fix(page): 修复页面样式丢失

陈雪 1 week ago
parent
commit
99bf64638b

+ 5 - 0
src/assets/img/menu/add.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.333333" y="0.333333" width="39.3333" height="39.3333" rx="7.66667" fill="#F67F20"/>
+<rect x="0.333333" y="0.333333" width="39.3333" height="39.3333" rx="7.66667" stroke="#E6E6E6" stroke-width="0.666667"/>
+<path d="M20.0003 12.2917V20M20.0003 27.7084V20M20.0003 20H27.7087M20.0003 20H12.292" stroke="white" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

+ 4 - 0
src/assets/img/menu/delete.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.699148" y="0.699148" width="38.6017" height="38.6017" rx="9.73563" stroke="#E03B1F" stroke-width="1.3983"/>
+<path d="M29.969 15.7202L30.1132 15.722C30.6481 15.7618 31.0581 16.1615 31.0865 16.6427L31.0727 16.911L30.6169 21.9343L30.1388 26.8366C30.0376 27.8152 29.9471 28.6407 29.8689 29.2904C29.5973 31.5549 27.964 32.9552 25.5019 32.9967C21.6653 33.0605 17.9775 33.0598 14.3962 32.9901C12.0053 32.9449 10.3961 31.5295 10.1293 29.2996L9.94489 27.6567L9.62263 24.4701L9.29252 20.9732L8.91507 16.7755C8.86815 16.237 9.30317 15.7653 9.8867 15.722C10.4216 15.6823 10.8956 16.0163 11.007 16.4871L11.0504 16.8718L11.4048 20.807L11.7918 24.886C11.9654 26.6517 12.116 28.0807 12.2364 29.0845C12.3885 30.3552 13.132 31.0092 14.4403 31.0339C17.9935 31.1031 21.6538 31.1038 25.4634 31.0404C26.8513 31.0171 27.6066 30.3695 27.7619 29.0748L27.9455 27.4408C27.9992 26.9372 28.0567 26.3813 28.1174 25.7774L28.5048 21.7658L28.9714 16.6185C29.0146 16.1248 29.4477 15.7464 29.969 15.7202ZM8.01604 13.4642C7.43063 13.4642 6.95605 13.0262 6.95605 12.4859C6.95605 11.9906 7.35483 11.5813 7.87221 11.5165L8.01604 11.5076H12.6339C13.1827 11.5076 13.6631 11.1817 13.8349 10.7121L13.877 10.5671L14.2358 8.92001C14.5519 7.82911 15.5781 7.0524 16.7807 6.9648L17.0081 6.95654H22.9907C24.2132 6.95654 25.2928 7.66908 25.7084 8.77009L25.7784 8.981L26.1217 10.5668C26.2295 11.0636 26.6699 11.4346 27.2025 11.498L27.3649 11.5076H31.983C32.5684 11.5076 33.043 11.9456 33.043 12.4859C33.043 12.9811 32.6442 13.3905 32.1269 13.4552L31.983 13.4642H8.01604ZM22.9907 8.91314H17.0081C16.7107 8.91314 16.4463 9.07379 16.3365 9.27571L16.2993 9.36442L15.9558 10.951C15.9137 11.1446 15.8528 11.3311 15.7751 11.5089L24.2239 11.5091C24.1753 11.3982 24.1334 11.2839 24.0984 11.1666L24.0429 10.9506L23.7149 9.42541C23.6383 9.16078 23.4015 8.96704 23.1158 8.92274L22.9907 8.91314Z" fill="#E03B1F"/>
+</svg>

+ 5 - 0
src/assets/img/menu/reduce.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.333333" y="0.333333" width="39.3333" height="39.3333" rx="7.66667" fill="#F67F20"/>
+<rect x="0.333333" y="0.333333" width="39.3333" height="39.3333" rx="7.66667" stroke="#E6E6E6" stroke-width="0.666667"/>
+<path d="M27.7087 20H20.0003H12.292" stroke="white" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

+ 10 - 0
src/components/noProduct.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="w-full h-[80%] flex flex-col items-center justify-center">
+    <img class="w-[45%]" src="/imgs/noFoods.svg" alt="" />
+    <div class="text-[15px] font-semibold">{{ t('menu.noProducts') }}</div>
+  </div>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+</script>

+ 127 - 0
src/views/menu/components/rightOrder/components/order.vue

@@ -0,0 +1,127 @@
+<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
+
+<template>
+  <div class="h-full bg-gray-50">
+    <div class="w-full mx-auto">
+      <div class="bg-white rounded-lg p-3">
+        <div class="flex items-center justify-between mb-3">
+          <h1 class="text-sm font-medium">Orders #45892</h1>
+        </div>
+
+        <div class="space-y-4 mb-6 overflow-auto h-[200px]">
+          <div
+            v-for="(item, index) in orderItems"
+            :key="index"
+            class="flex items-center justify-between p-4 bg-white border border-gray-100 rounded-lg"
+          >
+            <div class="flex items-center space-x-4">
+              <div class="w-16 h-16 rounded-full overflow-hidden">
+                <img :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
+              </div>
+              <div>
+                <h3 class="font-sm">{{ item.name }}</h3>
+                <p class="text-xxs text-gray-500">Size: Large, Middle, Small</p>
+                <p class="text-orange-500 font-medium mt-1">${{ item.price.toFixed(2) }}</p>
+              </div>
+            </div>
+            <div class="flex items-center space-x-4">
+              <button
+                class="w-4 h-4 flex items-center justify-center bg-orange-100 text-orange-500 rounded-lg !rounded-button whitespace-nowrap"
+                @click="decreaseQuantity(index)"
+              >
+                <img src="@/assets/img/menu/reduce.svg" alt="" />
+              </button>
+              <span class="w-4 text-center">{{ item.quantity }}</span>
+              <button
+                class="w-4 h-4 flex items-center justify-center bg-orange-500 text-white rounded-lg !rounded-button whitespace-nowrap"
+                @click="increaseQuantity(index)"
+              >
+                <img src="@/assets/img/menu/add.svg" alt="" />
+              </button>
+              <button
+                class="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-red-500 !rounded-button whitespace-nowrap"
+                @click="removeItem(index)"
+              >
+                <img src="@/assets/img/menu/delete.svg" alt="" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="border-t border-gray-100 pt-4">
+          <div class="mb-4">
+            <h3 class="font-medium mb-2">Order Notes</h3>
+            <p class="text-gray-600 text-sm">No Chili, No Cilantro</p>
+          </div>
+
+          <div class="flex items-center justify-between pt-4 border-t border-gray-100">
+            <span class="font-medium">Total</span>
+            <span class="text-sm font-medium">${{ total.toFixed(2) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+
+interface OrderItem {
+  name: string
+  price: number
+  quantity: number
+  image: string
+}
+
+const orderItems = ref<OrderItem[]>([
+  {
+    name: 'Spicy Seasoned Seafood',
+    price: 4.85,
+    quantity: 2,
+    image: 'https://ai-public.mastergo.com/ai/img_res/1c3d3c5704265a819a659a8d3589bc21.jpg',
+  },
+  {
+    name: 'Premium Grade Mackerel (Cleaned)',
+    price: 4.65,
+    quantity: 2,
+    image: 'https://ai-public.mastergo.com/ai/img_res/6d4be10ce5e234dcec1509d199a41a99.jpg',
+  },
+  {
+    name: 'Grilled Sea Bass',
+    price: 4.85,
+    quantity: 2,
+    image: 'https://ai-public.mastergo.com/ai/img_res/a20aaccbc775fd5729c8b8c6dac46563.jpg',
+  },
+])
+
+const total = computed(() => {
+  return orderItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
+})
+
+const increaseQuantity = (index: number) => {
+  orderItems.value[index].quantity += 1
+}
+
+const decreaseQuantity = (index: number) => {
+  if (orderItems.value[index].quantity > 1) {
+    orderItems.value[index].quantity -= 1
+  }
+}
+
+const removeItem = (index: number) => {
+  orderItems.value.splice(index, 1)
+}
+</script>
+
+<style scoped>
+.order-item {
+  transition: all 0.3s ease;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>

+ 38 - 0
src/views/menu/components/rightOrder/rightOrder.vue

@@ -0,0 +1,38 @@
+<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
+
+<template>
+  <div class="h-full bg-white flex flex-col items-center justify-between">
+    <!-- Empty state section -->
+    <div class="h-[80%]">
+      <noProduct v-if="false"></noProduct>
+      <order v-else></order>
+    </div>
+    <!-- Action buttons section -->
+    <div class="w-full max-w-md px-1 h-[20%] bg-white">
+      <div class="grid grid-cols-2 gap-4 mb-1">
+        <button
+          class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors"
+        >
+          Registration
+        </button>
+        <button
+          class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors"
+        >
+          Kitchen Receipt
+        </button>
+      </div>
+      <button
+        class="rounded text-sm w-full py-3 px-6 mb-1 text-white bg-[#999] !rounded-button whitespace-nowrap hover:bg-gray-200 transition-colors"
+      >
+        Choose A Table For Payment
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import noProduct from '@/components/noProduct.vue'
+import order from './components/order.vue'
+</script>
+
+<style scoped></style>

+ 3 - 6
src/views/menu/index.vue

@@ -67,14 +67,11 @@
             </div>
           </div>
         </div>
-        <div @click="show = !show" class="h-[50px] border" v-for="item in 50">
-          {{ item }}
-        </div>
       </div>
     </div>
-    <!-- <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
+    <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
       <rightOrder></rightOrder>
-    </div> -->
+    </div>
     <OrderDrawer v-model:show="show" />
   </div>
 </template>
@@ -84,7 +81,7 @@ import { useStore } from '../../stores'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
-// import rightOrder from './components/rightOrder/rightOrder.vue'
+import rightOrder from './components/rightOrder/rightOrder.vue'
 import OrderDrawer from './components/order-drawer.vue'
 
 const { t } = useI18n()