Skip to content

M
mingPayPc
Commit 594c7258 by liang ce
Options

图片

parent 3b561967
Showing with 71 additions and 64 deletions
src/components/common/Home.vue
......@@ -7,7 +7,7 @@
<a-menu
theme="light"
mode="horizontal"
:defaultSelectedKeys="['accountManagement']"
:defaultSelectedKeys="[defaultSelectedKeys]"
:style="{ lineHeight: '64px' }"
@click="routerPush"
>
......@@ -37,15 +37,18 @@ export default {
components: {},
data () {
return {
title: []
title: [],
defaultSelectedKeys: 'accountManagement'
}
},
created () {
this.title = this.$route.meta.title ? this.$route.meta.title.split('/') : ''
this.defaultSelectedKeys = this.$route.matched[2].name ? this.$route.matched[2].name : ''
},
watch: {
$route (to, from) {
this.title = to.meta.title.split('/')
this.defaultSelectedKeys = this.$route.matched[1].name ? this.$route.matched[1].name : ''
}
},
computed: {},
......
src/components/pages/CanteenManagement/CanteenManagementHome.vue
......@@ -9,10 +9,18 @@
style="height: 100%"
@click="routerPush"
>
<a-menu-item class="itemFlex" key="classificationOfDishes">菜品分类</a-menu-item>
<a-menu-item class="itemFlex" key="menuManagement">菜品管理</a-menu-item>
<a-menu-item class="itemFlex" key="consumptionOrder">消费订单</a-menu-item>
<a-menu-item class="itemFlex" key="consumptionStatistics">消费统计</a-menu-item>
<a-menu-item class="itemFlex" key="classificationOfDishes">
<div :class="[chooseMenuList === 'classificationOfDishes' ? 'menuIcon menuIcon1_2' : 'menuIcon menuIcon1_1']"></div><div>菜品分类</div>
</a-menu-item>
<a-menu-item class="itemFlex" key="menuManagement">
<div :class="[chooseMenuList === 'menuManagement' ? 'menuIcon menuIcon2_2' : 'menuIcon menuIcon2_1']"></div>菜品管理
</a-menu-item>
<a-menu-item class="itemFlex" key="consumptionOrder">
<div :class="[chooseMenuList === 'consumptionOrder' ? 'menuIcon menuIcon3_2' : 'menuIcon menuIcon3_1']"></div>消费订单
</a-menu-item>
<a-menu-item class="itemFlex" key="consumptionStatistics">
<div :class="[chooseMenuList === 'consumptionStatistics' ? 'menuIcon menuIcon4_2' : 'menuIcon menuIcon4_1']"></div>消费统计
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
......@@ -52,6 +60,7 @@ export default {
<style lang="less" scoped>
.itemFlex{
vertical-align:bottom;
display: flex;
align-items: center;
}
......@@ -63,52 +72,28 @@ export default {
background-size: cover;
display: inline-block;
}
.menuIcon1_1{
background-image: url('../../../assets/menuIcon/accountManagement1.png');
}
.menuIcon1_2{
background-image: url('../../../assets/menuIcon/accountManagement2.png');
background-image: url('../../../assets/canteenIcon/classificationOfDishes1.png');
}
.menuIcon2_1{
background-image: url('../../../assets/menuIcon/rechargeRecord1.png');
.menuIcon1_1{
background-image: url('../../../assets/canteenIcon/classificationOfDishes2.png');
}
.menuIcon2_2{
background-image: url('../../../assets/menuIcon/rechargeRecord2.png');
background-image: url('../../../assets/canteenIcon/menuManagement1.png');
}
.menuIcon3_1{
background-image: url('../../../assets/menuIcon/allowancePayment1.png');
.menuIcon2_1{
background-image: url('../../../assets/canteenIcon/menuManagement2.png');
}
.menuIcon3_2{
background-image: url('../../../assets/menuIcon/allowancePayment2.png');
background-image: url('../../../assets/canteenIcon/consumptionOrder1.png');
}
.menuIcon4_1{
background-image: url('../../../assets/menuIcon/recordsOfConsumption1.png');
.menuIcon3_1{
background-image: url('../../../assets/canteenIcon/consumptionOrder2.png');
}
.menuIcon4_2{
background-image: url('../../../assets/menuIcon/recordsOfConsumption2.png');
background-image: url('../../../assets/canteenIcon/consumptionStatistics1.png');
}
.menuIcon5_1{
background-image: url('../../../assets/menuIcon/cashierManagement1.png');
}
.menuIcon5_2{
background-image: url('../../../assets/menuIcon/cashierManagement2.png');
}
.menuIcon6_1{
background-image: url('../../../assets/menuIcon/systemReconciliation1.png');
}
.menuIcon6_2{
background-image: url('../../../assets/menuIcon/systemReconciliation2.png');
}
.menuIcon7_1{
background-image: url('../../../assets/menuIcon/paymentManagementSetting1.png');
}
.menuIcon7_2{
background-image: url('../../../assets/menuIcon/paymentManagementSetting2.png');
}
.menuIcon8_1{
background-image: url('../../../assets/menuIcon/paymentManagementSetting1.png');
}
.menuIcon8_2{
background-image: url('../../../assets/menuIcon/paymentManagementSetting2.png');
.menuIcon4_1{
background-image: url('../../../assets/canteenIcon/consumptionStatistics2.png');
}
</style>
src/components/pages/CanteenManagement/MenuManagement.vue
......@@ -3,11 +3,16 @@
<a-button style="margin-bottom: 20px" type="primary" @click="showModal()">添加菜品</a-button>
<div style="display: flex">
<div class="productionMenu">
<div class="menuItem" style="font-weight: bold;height: 52px;lint-height: 52px;">菜品所有分类</div>
<div :class="item.productCategoryId === menuId ? 'menuItem menuItemAction' : 'menuItem'" v-for="item in dataSource" :key="item.productCategoryId" @click="changeMenuItem(item.productCategoryId)">
{{item.productCategoryName}}
<div class="menuProductStatus" v-if="item.isDisplay === 'HIDDEN'">
<img src="../../../assets/hiddenMenu.png" alt="">
<div class="productionMenuTitle">菜品所有分类</div>
<div class="productionMenuList">
<div :class="item.productCategoryId === menuId ? 'menuItem menuItemAction' : 'menuItem'" v-show="item.isDisplay === 'DISPLAY'" v-for="item in dataSource" :key="item.productCategoryId" @click="changeMenuItem(item.productCategoryId)">
{{item.productCategoryName}}
</div>
</div>
<div class="productionMenuTitle">以下分类已隐藏</div>
<div class="productionMenuList">
<div :class="item.productCategoryId === menuId ? 'menuItem menuItemAction' : 'menuItem'" v-show="item.isDisplay === 'HIDDEN'" v-for="item in dataSource" :key="item.productCategoryId" @click="changeMenuItem(item.productCategoryId)">
{{item.productCategoryName}}
</div>
</div>
</div>
......@@ -431,13 +436,24 @@ export default {
background: #fafafa;
width: 200px;
}
.productionMenu>.menuItem{
.productionMenuTitle{
background: #e6f7ff;
font-weight: bold;
height: 52px;
line-height: 52px;
text-align: center;
color: #1890ff;
}
.productionMenuList>.menuItem{
height: 40px;
line-height: 40px;
position: relative;
text-align: center
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.productionMenu>.menuItemAction{
.productionMenuList>.menuItemAction{
background: #ffffff;
color: #1890ff;
}
......@@ -453,16 +469,16 @@ export default {
margin-top: 8px;
color: #666;
}
.menuProductStatus{
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
}
.menuProductStatus img{
width: 40px;
height: 40px;
display: block;
}
// .menuProductStatus{
// position: absolute;
// left: 0;
// top: 0;
// width: 40px;
// height: 40px;
// }
// .menuProductStatus img{
// width: 40px;
// height: 40px;
// display: block;
// }
</style>
src/components/pages/PaymentManagement/AllowanceDetails.vue
......@@ -36,8 +36,8 @@
<div>{{allowanceDetails.recipient}}</div>
</div>
</div>
<div class="clickshowsearchUserMessage" @click="this.isshow = !this.isshow"><a href="javascript:;">查看具体成员</a></div>
<div class="searchUserMessage" v:if="isshow">
<div class="clickshowsearchUserMessage" @click="changeIsShow"><a href="javascript:;">查看具体成员</a></div>
<div class="searchUserMessage" v-if="isshow">
<div class="positionDiv"></div>
<div style="margin-bottom: 8px">
<label>请输入查询人员：</label><a-input style="width:220px" v-model="searchData" placeholder="" />
......@@ -79,6 +79,9 @@ export default {
},
back () {
this.$router.go(-1)
},
changeIsShow () {
this.isshow = !this.isshow
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment