新增收银页面

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>