新增收银页面

dist-electron/main.js

@@ -3,10 +3,12 @@ const electron = require("electron");
 electron.app.whenReady().then(() => {
   const win = new electron.BrowserWindow({
     title: "Main window",
+    width: 1200,
+    height: 800,
     fullscreenable: true,
-    fullscreen: true,
+    fullscreen: false,
     simpleFullscreen: true,
-    frame: false,
+    frame: true,
     webPreferences: {
       // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
       nodeIntegration: true,

electron/main.js

@@ -3,10 +3,12 @@ import { app, BrowserWindow, ipcMain } from "electron";
 app.whenReady().then(() => {
   const win = new BrowserWindow({
     title: "Main window",
+    width: 1200,
+    height: 800,
     fullscreenable: true,
-    fullscreen: true,
+    fullscreen: false,
     simpleFullscreen: true,
-    frame: false,
+    frame: true,
     webPreferences: {
       // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
       nodeIntegration: true,

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.2",
     "element-plus": "^2.4.3",
     "pinia": "^2.1.7",

src/App.vue

@@ -1,18 +1,33 @@
 <template>
-  <div class="wrapper">
+  <el-config-provider size="large">
-    <div class="animation">
+    <div class="container">
-      <router-view v-slot="{ Component }">
+      <div class="left" v-if="route.path !== 'login'">
-        <transition :name="transitionName">
+        <left-menu />
-          <component :is="Component"></component>
+      </div>
-        </transition>
+      <div class="view">
-      </router-view>
+        <router-view />
+        <!-- <div class="wrapper">
+          <div class="animation">
+            <router-view v-slot="{ Component }">
+              <transition :name="transitionName">
+                <component :is="Component"></component>
+              </transition>
+            </router-view>
+          </div>
+        </div> -->
+      </div>
     </div>
-  </div>
+  </el-config-provider>
 </template>
 
 <script setup>
-import { useRouter } from "vue-router";
+import leftMenu from '@/components/leftMenu.vue'
+
+import { useRouter, useRoute } from "vue-router";
 import { ref } from "vue";
+
+const route = useRoute()
+
 let transitionName = ref();
 let router = useRouter();
 router.beforeEach((to, from) => {
@@ -36,44 +51,107 @@ router.beforeEach((to, from) => {
   box-sizing: border-box;
   user-select: none;
 }
+
+:root {
+  --primary-color: #2FAFA2;
+  --el-color-primary: var(--primary-color) !important;
+  --el-button-hover-bg-color: var(--primary-color) !important;
+  --el-color-primary-light-3: lighten(var(--primary-color), 20%) !important;
+  --el-color-primary-dark-2: darken(var(--primary-color), 20%) !important;
+}
+
+/*定义滚动条高宽及背景
+ 高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+/*定义滚动条轨道
+ 内阴影+圆角*/
+::-webkit-scrollbar-track {
+  background-color: #F5F5F5;
+}
+
+/*定义滑块
+     内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #d3d3d3;
+}
+
+
 .mt50 {
   margin-top: 50px;
 }
+
+.container {
+  display: flex;
+
+  .view {
+    flex: 1;
+    height: 100vh;
+    padding: 20px;
+    background-color: #efefef;
+  }
+}
+
+.content {
+  display: flex;
+  height: 100%;
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
 .wrapper {
   overflow-x: hidden;
+
   .animation {
     display: flex;
     width: 200%;
-    & > div {
+
+    &>div {
       width: 50%;
     }
+
     .slide-left-enter-active,
     .slide-left-leave-active,
     .slide-right-enter-active,
     .slide-right-leave-active {
       transition: transform 0.3s;
     }
+
     .slide-right-enter-from {
       transform: translateX(0);
     }
+
     .slide-right-enter-to {
       transform: translateX(-100%);
     }
+
     .slide-right-leave-from {
       transform: translateX(0);
     }
+
     .slide-right-leave-to {
       transform: translateX(-100%);
     }
+
     .slide-left-enter-from {
       transform: translateX(-200%);
     }
+
     .slide-left-enter-to {
       transform: translateX(-100%);
     }
+
     .slide-left-leave-from {
       transform: translateX(0);
     }
+
     .slide-left-leave-to {
       transform: translateX(100%);
     }

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/leftMenu.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="left_menu_wrap">
+        <div class="item online">
+            <el-icon class="icon">
+                <Monitor />
+            </el-icon>
+            <el-text type="success">在线</el-text>
+        </div>
+        <router-link class="item" :class="{ active: route.path == item.path }" v-for="item in menus" :key="item.path"
+            :to="item.path">
+            <el-icon class="icon">
+                <component :is="item.icon" />
+            </el-icon>
+            <el-text class="text">{{ item.label }}</el-text>
+        </router-link>
+        <div class="item more">
+            <el-icon class="icon">
+                <Operation />
+            </el-icon>
+            <el-text class="text">更多</el-text>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+console.log(route.path)
+const menus = ref([
+    {
+        label: '收银',
+        path: '/',
+        icon: 'ShoppingCartFull'
+    },
+    {
+        label: '台桌',
+        path: '/table',
+        icon: 'Reading'
+    },
+    {
+        label: '订单',
+        path: '/order',
+        icon: 'Tickets'
+    },
+    {
+        label: '网络',
+        path: '/internat',
+        icon: 'Paperclip'
+    },
+    {
+        label: '会员',
+        path: '/user',
+        icon: 'User'
+    },
+    {
+        label: '交班',
+        path: '/work',
+        icon: 'SwitchButton'
+    }
+])
+</script>
+
+<style scoped lang="scss">
+.left_menu_wrap {
+    height: 100vh;
+    width: 120px;
+    background-color: #555;
+    display: flex;
+    flex-direction: column;
+
+    .item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-decoration: none;
+
+        &:first-child {
+            border-bottom: 1px solid #666;
+        }
+
+        &.online {
+
+            .icon,
+            .text {
+                color: var(--el-color-success);
+            }
+        }
+
+        &.active {
+            background-color: #333;
+
+            .icon,
+            .text {
+                color: #fff;
+            }
+        }
+
+        &.more {
+            margin-top: 30px;
+        }
+
+        .icon {
+            color: #999;
+            font-size: 32px;
+            margin-bottom: 4px;
+        }
+
+        .text {
+            color: #999;
+            font-size: 22px;
+        }
+    }
+}
+</style>

src/components/skuModal.vue

@@ -0,0 +1,94 @@
+<template>
+    <el-dialog title="选择规格" width="800" v-model="show">
+        <div class="header">选择规格</div>
+        <div class="row">
+            <div class="title">规格</div>
+            <div class="sku_wrap">
+                <div class="item">默认（1人份）</div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="title">温度</div>
+            <div class="sku_wrap">
+                <div class="item">冰</div>
+                <div class="item">热</div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="title">糖度</div>
+            <div class="sku_wrap">
+                <div class="item">不另外加糖</div>
+                <div class="item">半糖</div>
+                <div class="item">标准糖</div>
+            </div>
+        </div>
+        <div class="footer">
+            <div class="btn">
+                <el-button plain style="width: 100%;" @click="show = false">取消</el-button>
+            </div>
+            <div class="btn">
+                <el-button type="primary" style="width: 100%;">确认</el-button>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const show = ref(true)
+
+</script>
+
+<style scoped lang="scss">
+.header {
+    color: #999;
+    font-size: 20px;
+}
+
+.row {
+    border-bottom: 1px solid #ececec;
+    margin-top: 20px;
+
+    .title {
+        font-size: 20px;
+    }
+
+    .sku_wrap {
+        display: flex;
+        padding: 14px 0;
+
+        .item {
+            color: var(--primary-color);
+            padding: 8px 16px;
+            font-size: 18px;
+            border: 1px solid var(--primary-color);
+            margin-right: 14px;
+            border-radius: 2px;
+
+            &.active {
+                background-color: var(--primary-color);
+                color: #fff;
+            }
+
+            &:hover {
+                cursor: pointer;
+                background-color: var(--primary-color);
+                color: #fff;
+            }
+        }
+    }
+}
+
+.footer {
+    display: flex;
+    padding-top: 100px;
+
+    .btn {
+        flex: 1;
+
+        &:last-child {
+            margin-left: 14px;
+        }
+    }
+}
+</style>

src/main.js

@@ -5,28 +5,33 @@ import ElementPlus from "element-plus";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import "element-plus/dist/index.css";
 import "element-plus/theme-chalk/dark/css-vars.css";
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import store from "./store";
 
-let matchMedia = window.matchMedia("(prefers-color-scheme: light)");
+// let matchMedia = window.matchMedia("(prefers-color-scheme: light)");
-setDarkMode(matchMedia.matches);
+// setDarkMode(matchMedia.matches);
-matchMedia.addEventListener("change", function () {
+// matchMedia.addEventListener("change", function () {
-  console.log(`当前的主题是:${this.matches ? "light" : "dark"}`);
+//   console.log(`当前的主题是:${this.matches ? "light" : "dark"}`);
-  setDarkMode(this.matches);
+//   setDarkMode(this.matches);
-});
+// });
 
-// 设置主题模式
+// // 设置主题模式
-function setDarkMode(flag) {
+// function setDarkMode(flag) {
-  if (flag) {
+//   if (flag) {
-    document.querySelector("#html").classList.add("light");
+//     document.querySelector("#html").classList.add("light");
-    document.querySelector("#html").classList.remove("dark");
+//     document.querySelector("#html").classList.remove("dark");
-  } else {
+//   } else {
-    document.querySelector("#html").classList.add("dark");
+//     document.querySelector("#html").classList.add("dark");
-    document.querySelector("#html").classList.remove("light");
+//     document.querySelector("#html").classList.remove("light");
-  }
+//   }
-}
+// }
 
 const app = createApp(App);
 
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
 app.use(router);
 app.use(store);
 app.use(ElementPlus, { locale: zhCn });

src/router/index.js

@@ -23,6 +23,14 @@ const routes = [
     },
     component: () => import("@/views/register.vue"),
   },
+  {
+    path: "/table",
+    name: "table",
+    meta: {
+      index: 1,
+    },
+    component: () => import("@/views/table.vue"),
+  }
 ];
 
 const router = createRouter({

src/views/cashier.vue

@@ -0,0 +1,3 @@
+<template>
+    收银
+</template>

src/views/home.vue

@@ -1,13 +1,568 @@
 <template>
-  <el-button type="primary">我是{{ userStore.name }}</el-button>
+  <div class="content">
-  <el-button @click="changeUser">改变用户</el-button>
+    <div class="cart_wrap card">
+      <div class="menu_top">
+        <div class="menu">
+          <el-icon class="icon">
+            <TakeawayBox />
+          </el-icon>
+          <el-text class="t">(1)</el-text>
+        </div>
+        <div class="number">
+          <el-text class="t">#2</el-text>
+        </div>
+        <div class="select_user">
+          <el-icon class="icon">
+            <UserFilled />
+          </el-icon>
+          <el-text class="t">选择会员</el-text>
+          <el-icon class="arrow">
+            <ArrowRight />
+          </el-icon>
+        </div>
+      </div>
+      <div class="shop_operation">
+        <div class="shop_list">
+          <div class="item" v-for="item in 3" :key="item">
+            <div class="name_wrap">
+              <span>鲜肉</span>
+              <span>￥1.00</span>
+            </div>
+            <div class="sku_list">
+              <div class="tag">默认1份</div>
+              <div class="tag">热</div>
+              <div class="tag">半糖</div>
+            </div>
+            <div class="num">
+              <el-text>X1</el-text>
+            </div>
+          </div>
+        </div>
+        <div class="operation_wrap">
+          <div class="item">
+            <el-icon class="icon">
+              <SemiSelect />
+            </el-icon>
+          </div>
+          <div class="item number">
+            <el-text class="num">1</el-text>
+          </div>
+          <div class="item">
+            <el-icon class="icon add">
+              <CloseBold />
+            </el-icon>
+          </div>
+          <div class="item">
+            <el-icon class="icon">
+              <Filter />
+            </el-icon>
+            <el-text class="t">规格</el-text>
+          </div>
+          <div class="item">
+            <el-icon class="icon">
+              <ShoppingBag />
+            </el-icon>
+            <el-text class="t">赠送</el-text>
+          </div>
+          <div class="item">
+            <el-icon class="icon">
+              <Box />
+            </el-icon>
+            <el-text class="t">打包</el-text>
+          </div>
+          <div class="item">
+            <el-icon class="icon">
+              <Delete />
+            </el-icon>
+            <el-text class="t">删除</el-text>
+          </div>
+          <div class="item">
+            <el-icon class="icon">
+              <Sell />
+            </el-icon>
+            <el-text class="t">挂单</el-text>
+          </div>
+          <div class="item">
+            <el-icon class="icon">
+              <RefreshRight />
+            </el-icon>
+            <el-text class="t">清空</el-text>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="top">
+          <div class="left">
+            <div class="selected">
+              <el-icon class="icon">
+                <CircleCheckFilled />
+              </el-icon>
+            </div>
+            <el-text class="t">打包(￥0.00)</el-text>
+          </div>
+          <div class="num-wrap">
+            <el-text>共6种商品，7件</el-text>
+          </div>
+        </div>
+        <div class="btm">
+          <div class="editor">
+            <el-icon>
+              <Edit />
+            </el-icon>
+          </div>
+          <div class="button">
+            <div class="js">
+              <el-text class="t">￥3.09</el-text>
+              <el-text class="t">结算</el-text>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="shop_manage card">
+      <div class="header">
+        <div class="menus">
+          <div class="item active">
+            <el-text>全部</el-text>
+          </div>
+          <div class="item">
+            <el-text>咖啡</el-text>
+          </div>
+          <div class="item">
+            <el-text>测试</el-text>
+          </div>
+          <div class="item">
+            <el-text>套餐</el-text>
+          </div>
+        </div>
+        <div class="all">
+          <el-icon class="icon">
+            <Menu />
+          </el-icon>
+        </div>
+      </div>
+      <div class="search_wrap">
+        <div class="input">
+          <el-input placeholder="商品名称或首字母简称" prefix-icon="Search"></el-input>
+        </div>
+        <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
+      </div>
+      <div class="shop_list" :class="{ img: shopListType == 'img' }">
+        <div class="item_wrap" v-for="item in 7" :key="item">
+          <div class="item">
+            <div class="dot">2</div>
+            <div class="cover" v-if="shopListType == 'img'">
+              <el-image src="https://img1.baidu.com/it/u=2183780444,2807225961&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"
+                style="width: 100%;height: 100%;" fit="cover"></el-image>
+            </div>
+            <div class="name"><el-text>酱香拿铁</el-text></div>
+            <div class="empty" v-if="shopListType == 'text'"></div>
+            <div class="price">
+              <el-text>￥0.03</el-text>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <skuModal />
 </template>
 
 <script setup>
-import { useUserStore } from "@/store/user";
+import skuModal from '@/components/skuModal.vue'
-const userStore = useUserStore();
 
-const changeUser = () => {
+import { ref } from 'vue'
-  userStore.login("李四");
+const shopListType = ref('text')
-};
+
+// 切换商品显示模式
+function changeShopListType() {
+  if (shopListType.value == 'text') {
+    shopListType.value = 'img'
+  } else {
+    shopListType.value = 'text'
+  }
+}
 </script>
+
+<style scoped lang="scss">
+.cart_wrap {
+  width: 550px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .menu_top {
+    flex-shrink: 0;
+    display: flex;
+    height: 60px;
+    $fs: 20px;
+
+    .menu {
+      background-color: var(--el-color-warning);
+      color: #fff;
+      width: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        font-size: 24px;
+        position: relative;
+        top: 2px;
+      }
+
+      .t {
+        color: #fff;
+        margin-left: 4px;
+        font-size: $fs;
+      }
+    }
+
+    .number {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      background-color: var(--el-color-info-light-7);
+      padding-left: 20px;
+
+      .t {
+        font-size: $fs;
+      }
+    }
+
+    .select_user {
+      display: flex;
+      align-items: center;
+      background-color: var(--el-color-info-light-8);
+      padding: 0 20px;
+
+      .icon {
+        color: var(--el-color-primary);
+        font-size: 24px;
+      }
+
+      .t {
+        font-size: $fs;
+        padding: 0 10px;
+      }
+
+      .arrow {
+        color: #999;
+        font-size: 20px;
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+
+  .shop_operation {
+    flex: 1;
+    display: flex;
+
+    .shop_list {
+      flex: 1;
+      height: calc(100vh - 40px - 60px - 130px);
+      overflow-y: auto;
+      border-right: 1px solid #ececec;
+
+      .item {
+        padding: 20px;
+
+        &:not(:last-child) {
+          border-bottom: 1px solid #ececec;
+        }
+
+        .name_wrap {
+          display: flex;
+          justify-content: space-between;
+          font-size: 20px;
+        }
+
+        .sku_list {
+          display: flex;
+          padding-top: 10px;
+
+          .tag {
+            padding: 4px 10px;
+            background-color: var(--el-color-danger);
+            color: #fff;
+            margin-right: 10px;
+          }
+        }
+
+        .num {
+          padding-top: 10px;
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+    }
+
+    .operation_wrap {
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      .item {
+        width: 100px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #efefef;
+        border-radius: 6px;
+
+        &.number {
+          background-color: transparent;
+          height: auto;
+        }
+
+        .num {
+          color: #333;
+          font-size: 18px;
+        }
+
+        .icon {
+          color: #333;
+        }
+
+        .add {
+          transform: rotate(-45deg);
+        }
+
+        .t {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}
+
+.footer {
+  padding: 20px;
+  border-top: 1px solid #ececec;
+
+  .left {
+    display: flex;
+    align-items: center;
+
+    .selected {
+
+      .icon {
+        display: block;
+        font-size: 18px;
+      }
+    }
+
+    .t {
+      margin-left: 4px;
+    }
+  }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .btm {
+    $h: 70px;
+    display: flex;
+    height: $h;
+    padding-top: 20px;
+    gap: 20px;
+
+    .editor {
+      width: $h;
+      border: 1px solid #ececec;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #555;
+      font-size: 22px;
+    }
+
+    .button {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      border-radius: 6px;
+      background-color: var(--primary-color);
+      padding: 0 20px;
+
+      &:hover {
+        cursor: pointer;
+        background-color: var(--el-color-primary-light-3);
+      }
+
+      &:active {
+        background-color: var(--el-color-primary-dark-2);
+      }
+
+      .js {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .t {
+          color: #fff;
+          font-size: 20px;
+        }
+
+        :deep(span) {
+          width: auto;
+          display: inline;
+        }
+      }
+    }
+  }
+}
+
+.shop_manage {
+  flex: 1;
+  margin-left: 20px;
+  height: 100%;
+
+  .header {
+    display: flex;
+    height: 80px;
+    justify-content: space-between;
+    border-bottom: 1px solid #ececec;
+
+    .menus {
+      display: flex;
+      padding: 0 10px;
+
+      .item {
+        padding: 0 10px;
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        span {
+          font-size: 24px;
+        }
+
+        &.active {
+          &::after {
+            content: "";
+            width: 70%;
+            height: 2px;
+            border-radius: 4px;
+            position: absolute;
+            bottom: 0;
+            left: 15%;
+            background-color: var(--primary-color);
+          }
+
+          span {
+            color: #333;
+          }
+        }
+      }
+    }
+
+    .all {
+      width: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      &::before {
+        content: "";
+        height: 60%;
+        border-left: 1px solid #ececec;
+        position: absolute;
+        left: 0;
+        top: 20%;
+      }
+
+      .icon {
+        color: #555;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .search_wrap {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 20px;
+  }
+
+  .shop_list {
+    max-height: calc(100vh - 40px - 80px - 80px);
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 10px;
+
+    &.img {
+      .item_wrap {
+        width: 25%;
+      }
+    }
+
+    .item_wrap {
+      width: 20%;
+      padding: 0 10px;
+      padding-bottom: 20px;
+    }
+
+    .item {
+      border: 1px solid #ececec;
+      border-radius: 10px;
+      overflow: hidden;
+      position: relative;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      .dot {
+        padding: 0 8px;
+        background-color: var(--el-color-danger);
+        color: #fff;
+        border-radius: 20px;
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        z-index: 1;
+        font-size: 12px;
+      }
+
+      .cover {
+        width: 100%;
+        height: 300px;
+      }
+
+      .name {
+        padding: 14px 10px;
+
+        span {
+          font-weight: bold;
+          font-size: 18px;
+        }
+      }
+
+      .empty {
+        height: 50px;
+      }
+
+      .price {
+        padding: 10px 20px;
+        background-color: var(--primary-color);
+
+        span {
+          color: #fff;
+          font-weight: bold;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/table.vue

@@ -0,0 +1,3 @@
+<template>
+    <el-text>台桌</el-text>
+</template>