<template>
<div class="container">
<
el-container style="height:100vh;width: 100vw">
<
!-- 侧边导航栏
-->
<
el-aside class="business
-aside">
<div class="nav
-container">
<
el-button
v
-for="(btn, index) in navButtons"
:key="index"
:icon="btn.icon"
class="nav
-btn"
@click="btn.handler">
</
el-button>
</div>
<
el-button
class="back
-btn"
icon="
el-icon
-back"
@click="toIndexPage">
</
el-button>
</
el-aside>
<
!-- 主内容区
-->
<
el-container>
<
el-main class="main
-content">
<router
-view></router
-view>
</
el-main>
</
el-container>
</
el-container>
</div>
</template>
<script>
export default {
name: "PassengerCenter",
data() {
return {
navButtons: [
{ icon: '
el-icon
-user', handler: this.toDetail },
{ icon: '
el-icon
-s
-ticket', handler: this.toTicket },
{ icon: '
el-icon
-s
-order', handler: this.toBill },
{ icon: '
el-icon
-chat
-line
-round', handler: this.toNotation }
]
}
},
methods: {
// 保持原有路由方法不变
toTicket() { /*...*/
this.$router.replace('/passenger/myTicket',()=>{})
},
toBill() { /*...*/
this.$router.replace('/passenger/myBill',()=>{})
},
toNotation() {
this.$router.replace('/passenger/myNotation',()=>{})
},
toDetail() {
this.$router.replace('/passenger/myDetail',()=>{})
},
toIndexPage() { this.$router.push('/') }
}
}
</script>
<style scoped>
/* 商务蓝配色方案 */
.container {
height: 100%;
width: 100%;
background: #f5f8fa;
}
.business
-aside {
background: #409EFF
!important;
display: flex;
flex
-direction: column;
justify
-content: space
-between;
padding: 40px 0;
box
-shadow: 4px 0 15px rgba(0,0,0,0.1);
}
.nav
-container {
display: flex;
flex
-direction: column;
align
-items: center;
gap: 35px;
}
.nav
-btn {
--size: 80px;
//width: var(
--size)
!important;
//height: var(
--size)
!important;
font
-size: 32px
!important;
background: #409EFF
!important;
border: 2px solid #f5f8fa
!important;
color: white
!important;
transition: all 0.3s ease;
}
.nav
-btn:hover {
transform: scale(1.05);
box
-shadow: 0 4px 15px rgba(31, 73, 125, 0.4);
}
.back
-btn {
align
-s
elf: center;
background: #f5f8fa
!important;
color: #3375b9
!important;
border: none
!important;
}
.main
-content {
padding: 30px 5%;
background: linear
-gradient(to bottom right,
#f5f8fa 60%,
rgba(31, 73, 125, 0.05));
}
</style>
为什么没占满屏幕呢
文章讨论了element-ui库中的el-aside组件宽度默认为300px的问题，指出当widthprops被设置且宽度为空时，可能导致CSS样式失效。解决办法是在style中直接修改el-aside的宽度，避免使用!important。
扫一扫
3097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
