新增收银页面
This commit is contained in:
@@ -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>
|
||||
117
src/components/leftMenu.vue
Normal file
117
src/components/leftMenu.vue
Normal file
@@ -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>
|
||||
94
src/components/skuModal.vue
Normal file
94
src/components/skuModal.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user