<template> <div class="PaymentManagementHome"> <a-layout style="padding: 24px 0; background: #fff; min-height: calc(100vh - 186px);min-width:1100px"> <a-layout-sider width="200" style="background: #fff"> <a-menu mode="inline" :defaultSelectedKeys="[defaultSelectedKeys]" :defaultOpenKeys="['sub1']" style="height: 100%" @click="routerPush" > <a-menu-item class="itemFlex" key="accountManagement"><div :class="[chooseMenuList === 'accountManagement' ? 'menuIcon menuIcon1_2' : 'menuIcon menuIcon1_1']"></div>账户中心</a-menu-item> <a-menu-item class="itemFlex" key="rechargeRecord"><div :class="[chooseMenuList === 'rechargeRecord' ? 'menuIcon menuIcon2_2' : 'menuIcon menuIcon2_1']"></div>充值记录</a-menu-item> <a-menu-item class="itemFlex" key="allowancePayment"><div :class="[chooseMenuList === 'allowancePayment' ? 'menuIcon menuIcon3_2' : 'menuIcon menuIcon3_1']"></div>津贴发放</a-menu-item> <a-menu-item class="itemFlex" key="recordsOfConsumption"><div :class="[chooseMenuList === 'recordsOfConsumption' ? 'menuIcon menuIcon4_2' : 'menuIcon menuIcon4_1']"></div>消费记录</a-menu-item> <a-menu-item class="itemFlex" key="systemReconciliation"><div :class="[chooseMenuList === 'systemReconciliation' ? 'menuIcon menuIcon6_2' : 'menuIcon menuIcon6_1']"></div>系统对账</a-menu-item> <a-menu-item class="itemFlex" key="cashierManagement"><div :class="[chooseMenuList === 'cashierManagement' ? 'menuIcon menuIcon5_2' : 'menuIcon menuIcon5_1']"></div>设置收银员</a-menu-item> <a-menu-item class="itemFlex" key="SetAdministrators"><div :class="[chooseMenuList === 'SetAdministrators' ? 'menuIcon menuIcon5_2' : 'menuIcon menuIcon5_1']"></div>设置管理员</a-menu-item> <a-menu-item class="itemFlex" key="paymentManagementSetting"><div :class="[chooseMenuList === 'paymentManagementSetting' ? 'menuIcon menuIcon7_2' : 'menuIcon menuIcon7_1']"></div>设置中心</a-menu-item> <!-- <a-menu-item key="operationLog">操作日志</a-menu-item> --> </a-menu> </a-layout-sider> <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }"> <router-view/> </a-layout-content> </a-layout> </div> </template> <script> export default { name: 'paymentManagementHome', data () { return { defaultSelectedKeys: 'defaultSelectedKeys', chooseMenuList: 'accountManagement' } }, created () { this.defaultSelectedKeys = this.$route.name this.chooseMenuList = this.$route.name }, watch: { $route (to, from) { this.defaultSelectedKeys = to.name this.chooseMenuList = to.name } }, methods: { routerPush (obj) { this.chooseMenuList = obj.key this.$router.push({ name: obj.key }) } } } </script> <style lang="less" scoped> .itemFlex{ display: flex; align-items: center; } .menuIcon{ width: 13px; height: 13px; margin-right: 5px; margin-top: 1px; background-size: cover; display: inline-block; } .menuIcon1_1{ background-image: url('../../../assets/menuIcon/accountManagement1.png'); } .menuIcon1_2{ background-image: url('../../../assets/menuIcon/accountManagement2.png'); } .menuIcon2_1{ background-image: url('../../../assets/menuIcon/rechargeRecord1.png'); } .menuIcon2_2{ background-image: url('../../../assets/menuIcon/rechargeRecord2.png'); } .menuIcon3_1{ background-image: url('../../../assets/menuIcon/allowancePayment1.png'); } .menuIcon3_2{ background-image: url('../../../assets/menuIcon/allowancePayment2.png'); } .menuIcon4_1{ background-image: url('../../../assets/menuIcon/recordsOfConsumption1.png'); } .menuIcon4_2{ background-image: url('../../../assets/menuIcon/recordsOfConsumption2.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'); } </style>