|
|
@@ -7,7 +7,7 @@
|
|
|
:collapse-transition="false"
|
|
|
default-active="/accountdata"
|
|
|
router
|
|
|
- class="el-menu-vertical-demo"
|
|
|
+ class="aside-menu"
|
|
|
text-color="#939599"
|
|
|
active-text-color="#fdfb60"
|
|
|
>
|
|
|
@@ -55,8 +55,27 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
+.aside-menu {
|
|
|
+ position: relative;
|
|
|
+ // el-menu-item is-active
|
|
|
+ &.active {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffa526;
|
|
|
+ // background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 4px;
|
|
|
+ height: 50px;
|
|
|
+ background: #ffa526;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.container {
|
|
|
padding-bottom: 200px;
|
|
|
+
|
|
|
/deep/ .el-menu {
|
|
|
width: 200px;
|
|
|
background: #1c1e26 !important;
|
|
|
@@ -68,6 +87,9 @@ export default {
|
|
|
margin-left: 24px !important;
|
|
|
}
|
|
|
.el-menu-item {
|
|
|
+ height: 60px !important;
|
|
|
+ line-height: 60px !important;
|
|
|
+ margin-bottom: 10px !important;
|
|
|
background: #1c1e26 !important;
|
|
|
font-size: 16px;
|
|
|
padding-left: 78px !important;
|
|
|
@@ -76,6 +98,19 @@ export default {
|
|
|
font-size: 18px !important;
|
|
|
}
|
|
|
}
|
|
|
+ .el-menu .is-active {
|
|
|
+ &::before {
|
|
|
+ width: 3px;
|
|
|
+ height: 36px;
|
|
|
+ background: linear-gradient(90deg, #fdfb60 0%, #fdfb60 0%, #ff8f3e 100%);
|
|
|
+ border-radius: 2px;
|
|
|
+ content: '';
|
|
|
+ height: 36px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.icon {
|
|
|
width: 24px;
|
