<template><div class="asders"><el-aside width="200px"><div class="boxbody"><div>源码外卖</div><el-switch v-model="isCollapse" :active-value="true" :inactive-value="false"></el-switch></div><el-menu:collapse="isCollapse"routerunique-opened:default-active="$router.path"class="el-menu-vertical-demo"background-color="rgba(220,38,38,0.2)"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/last"><i class="el-icon-menu"></i><span slot="title">后台首页</span></el-menu-item><el-menu-item index="/order"><i class="el-icon-menu"></i><span slot="title">订单管理</span></el-menu-item><el-submenu index="/goods"><template slot="title"><i class="el-icon-location"></i><span>商品管理</span></template><el-menu-item-group><el-menu-item index="/goods/list">商品列表</el-menu-item><el-menu-item index="/goods/add">商品添加</el-menu-item><el-menu-item index="/goods/index">商品分类</el-menu-item></el-menu-item-group></el-submenu><el-menu-item index="/shop"><i class="el-icon-menu"></i><span slot="title">店铺管理</span></el-menu-item><el-submenu index="/account"><template slot="title"><i class="el-icon-location"></i><span>账号管理</span></template><el-menu-item-group><el-menu-item index="/account/list">账号列表</el-menu-item><el-menu-item index="/account/add">添加账号</el-menu-item><el-menu-item index="/account/index">修改密码</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="/sale"><template slot="title"><i class="el-icon-location"></i><span>销售统计</span></template><el-menu-item-group><el-menu-item index="/sale/goods">商品统计</el-menu-item><el-menu-item index="/sale/index">销售统计</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside></div>
</template><script>
export default {data() {return {isCollapse: false};},methods: {change() {this.isCollapse = !this.isCollapse;},handleResize() {console.log(document.body.offsetWidth);if (document.body.offsetWidth <= 700) {this.isCollapse = true;} else {this.isCollapse = false;}}},created() {this.handleResize;window.addEventListener("resize", this.handleResize);}
};
</script><style lang="scss" scoped>
.asders {height: 100%;background: url("../../assets/OIP-C.jpg") center, center/cover;
}
.el-menu {height: 100%;transition: all linear 0.3s;
}
.boxbody {height: 50px;display: flex;padding: 30px;align-items: center;background: url("../../assets/OIP-C.jpg") center center/cover;div {text-align: center;color: rgb(83, 50, 50);font-size: 18px;font-weight: bold;}
}
.el-aside {color: #333;text-align: center;line-height: 200px;height: 100%;
}
</style>