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