添加更多
This commit is contained in:
魏啾
@@ -13,19 +13,23 @@
|
||||
</el-icon>
|
||||
<el-text class="text">{{ item.label }}</el-text>
|
||||
</router-link>
|
||||
<div class="item more">
|
||||
<div class="item more" @click="moreref.show()">
|
||||
<el-icon class="icon">
|
||||
<Operation />
|
||||
</el-icon>
|
||||
<el-text class="text">更多</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 更多 -->
|
||||
<more ref="moreref"></more>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import more from '@/components/more.vue'
|
||||
const route = useRoute()
|
||||
const moreref = ref(null)
|
||||
console.log(route.path)
|
||||
const menus = ref([
|
||||
{
|
||||
@@ -62,6 +66,83 @@ const menus = ref([
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drawerbox {
|
||||
:deep(.el-drawer__body) {
|
||||
background: #1c1d1f !important;
|
||||
}
|
||||
|
||||
.drawerbox_box {
|
||||
color: #fff;
|
||||
|
||||
.drawerbox_bo_top {
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
.drawerbox_bo_top_left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawerbox_bo_top_ring {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.drawerbox_bo_top_ring_tb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
|
||||
span {
|
||||
width: 80px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawerbox_bo_box {
|
||||
width: 100%;
|
||||
|
||||
.drawerbox_bo_box_itemb_felx {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0 20px;
|
||||
|
||||
.drawerbox_bo_box_itembox:nth-child(1) {
|
||||
margin-left: 0px;
|
||||
|
||||
}
|
||||
|
||||
.drawerbox_bo_box_itembox {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
|
||||
.drawerbox_bo_box_icon {
|
||||
border-radius: 6px;
|
||||
background: #2196f3;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.drawerbox_bo_box_icontext {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left_menu_wrap {
|
||||
height: 100vh;
|
||||
width: 90px;
|
||||
|
||||
182
src/components/more.vue
Normal file
182
src/components/more.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="drawerbox">
|
||||
<el-drawer size="50%" :with-header="false" direction="rtl" v-model="dialogVisible" style="padding: 0;">
|
||||
<div class="drawerbox_box">
|
||||
<div class="drawerbox_bo_top">
|
||||
<div class="drawerbox_bo_top_left">
|
||||
<div class="drawerbox_bo_top_left_one">
|
||||
{{ store.userInfo.loginName }}
|
||||
</div>
|
||||
<div class="drawerbox_bo_top_left_tow" style="margin-top: 10px;">
|
||||
收银员：{{ store.userInfo.userCode }} <span style="color: #666;">登录：{{
|
||||
store.userInfo.loginTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="drawerbox_bo_top_ring">
|
||||
<div class="drawerbox_bo_top_ring_tb">
|
||||
<el-icon style="margin: 0 auto;" size="20">
|
||||
<FolderAdd />
|
||||
</el-icon>
|
||||
<span>修改密码</span>
|
||||
</div>
|
||||
<div class="drawerbox_bo_top_ring_tb" style="margin-left: 10px;">
|
||||
<el-icon style="margin: 0 auto;" size="20">
|
||||
<CopyDocument />
|
||||
</el-icon>
|
||||
<span>最小化</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="drawerbox_bo_box">
|
||||
<div style="padding:10px;color: #999; font-weight:bold;">系统</div>
|
||||
<div class="drawerbox_bo_box_itemb_felx">
|
||||
<div class="drawerbox_bo_box_itembox">
|
||||
<div class="drawerbox_bo_box_icon">
|
||||
<el-icon size="40" style="margin:30px;">
|
||||
<Setting />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="drawerbox_bo_box_icontext">
|
||||
设置
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="drawerbox_bo_box_itembox" @click="screenref.show()">
|
||||
<div class="drawerbox_bo_box_icon">
|
||||
<el-icon size="40" style="margin:30px;">
|
||||
<Setting />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="drawerbox_bo_box_icontext">
|
||||
锁屏
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxabsolute">
|
||||
<div>
|
||||
银收客-餐饮版20-1
|
||||
</div>
|
||||
<div>
|
||||
有效期
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
<!-- <screen ref="screenref"></screen> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useUser } from "@/store/user.js"
|
||||
|
||||
const store = useUser()
|
||||
const screenref = ref(null)
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
function show() {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drawerbox {
|
||||
:deep(.el-drawer__body) {
|
||||
background: #1c1d1f !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.boxabsolute {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 20px;
|
||||
|
||||
div {
|
||||
color: #8c9196;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawerbox_box {
|
||||
color: #fff;
|
||||
|
||||
.drawerbox_bo_top {
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
.drawerbox_bo_top_left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawerbox_bo_top_ring {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.drawerbox_bo_top_ring_tb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
|
||||
span {
|
||||
width: 80px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawerbox_bo_box {
|
||||
width: 100%;
|
||||
|
||||
.drawerbox_bo_box_itemb_felx {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0 20px;
|
||||
|
||||
.drawerbox_bo_box_itembox:nth-child(1) {
|
||||
margin-left: 0px;
|
||||
|
||||
}
|
||||
|
||||
.drawerbox_bo_box_itembox {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
|
||||
.drawerbox_bo_box_icon {
|
||||
border-radius: 6px;
|
||||
background: #2196f3;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.drawerbox_bo_box_icontext {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
109
src/components/screen.vue
Normal file
109
src/components/screen.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="drawerbox">
|
||||
<el-drawer size="50%" :with-header="false" direction="rtl" v-model="dialogVisible" style="padding: 0;">
|
||||
<div class="drawerbox_box">
|
||||
111
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useUser } from "@/store/user.js"
|
||||
|
||||
const store = useUser()
|
||||
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
function show() {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drawerbox {
|
||||
:deep(.el-drawer__body) {
|
||||
background: #1c1d1f !important;
|
||||
}
|
||||
|
||||
.drawerbox_box {
|
||||
color: #fff;
|
||||
|
||||
.drawerbox_bo_top {
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
.drawerbox_bo_top_left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawerbox_bo_top_ring {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.drawerbox_bo_top_ring_tb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
|
||||
span {
|
||||
width: 80px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawerbox_bo_box {
|
||||
width: 100%;
|
||||
|
||||
.drawerbox_bo_box_itemb_felx {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0 20px;
|
||||
|
||||
.drawerbox_bo_box_itembox:nth-child(1) {
|
||||
margin-left: 0px;
|
||||
|
||||
}
|
||||
|
||||
.drawerbox_bo_box_itembox {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
|
||||
.drawerbox_bo_box_icon {
|
||||
border-radius: 6px;
|
||||
background: #2196f3;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.drawerbox_bo_box_icontext {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user