|
|
@@ -1,8 +1,21 @@
|
|
|
<template>
|
|
|
<el-menu :default-active="active" class="side-bar" :collapse="true" :router="true">
|
|
|
- <el-menu-item v-for="tab in sidebar" :index="tab.name" :key="tab.name" v-show="!tab.hide">
|
|
|
+ <el-menu-item v-for="tab in sidebar" :index="tab.name" :key="tab.name" v-show="!tab.hide" style="height: 70px;">
|
|
|
<el-tooltip placement="right" :content="tab.description">
|
|
|
- <i class="icon" :target="tab.name"></i>
|
|
|
+ <i class="icon" :target="tab.name">
|
|
|
+ <div v-if="calculateLength(tab.description) === 1" class="title" style="margin-left: 2px;">
|
|
|
+ {{tab.description}}
|
|
|
+ </div>
|
|
|
+ <div v-else-if="calculateLength(tab.description) === 2" class="title" style="margin-left: -3px;">
|
|
|
+ {{tab.description}}
|
|
|
+ </div>
|
|
|
+ <div v-else-if="calculateLength(tab.description) === 3" class="title" style="margin-left: -8px;">
|
|
|
+ {{tab.description}}
|
|
|
+ </div>
|
|
|
+ <div v-else class="title" style="margin-left: -3px;">
|
|
|
+ {{tab.description.slice(0, 3)}}
|
|
|
+ </div>
|
|
|
+ </i>
|
|
|
</el-tooltip>
|
|
|
</el-menu-item>
|
|
|
</el-menu>
|
|
|
@@ -13,11 +26,11 @@ const sidebar = [
|
|
|
{ name: 'schedule', description: '项目规划', hide: false },
|
|
|
{ name: 'taskList', description: '任务列表', hide: false },
|
|
|
{ name: 'bugList', description: '缺陷列表', hide: false },
|
|
|
- { name: 'pipeline', description: '流水线与产物', hide: false },
|
|
|
+ { name: 'pipeline', description: '流水线及产物', hide: false },
|
|
|
{ name: 'database', description: '数据库', hide: false },
|
|
|
{ name: 'apitest', description: '测试', hide: false },
|
|
|
- { name: 'statistics', description: '详细数据', hide: true },
|
|
|
{ name: 'invite', description: '项目关联', hide: false },
|
|
|
+ { name: 'git', description: '提交记录', hide: false },
|
|
|
];
|
|
|
|
|
|
export default {
|
|
|
@@ -33,6 +46,20 @@ export default {
|
|
|
return li[li.length - 1];
|
|
|
},
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ calculateLength(name) {
|
|
|
+ if (name.length === 2) {
|
|
|
+ return 1;
|
|
|
+ }
|
|
|
+ if (name.length === 3) {
|
|
|
+ return 2;
|
|
|
+ }
|
|
|
+ if (name.length === 4) {
|
|
|
+ return 3;
|
|
|
+ }
|
|
|
+ return 0;
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -57,30 +84,36 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.icon[target=schedule]{
|
|
|
- background-image: url("../assets/icon/navigation.svg");
|
|
|
+ background-image: url("../assets/icon_new/schedule.svg");
|
|
|
.el-menu-item:hover & {
|
|
|
- background-image: url("../assets/icon/navigation-hover.svg");
|
|
|
+ background-image: url("../assets/icon_new/schedule-hover.svg");
|
|
|
+ color: #2c2c2c;
|
|
|
}
|
|
|
.el-menu-item.is-active & {
|
|
|
- background-image: url("../assets/icon/navigation-using.svg");
|
|
|
+ background-image: url("../assets/icon_new/schedule-using.svg");
|
|
|
+ color: #1296db;
|
|
|
}
|
|
|
}
|
|
|
.icon[target=taskList]{
|
|
|
- background-image: url("../assets/icon/task.svg");
|
|
|
+ background-image: url("../assets/icon_new/task.svg");
|
|
|
.el-menu-item:hover & {
|
|
|
- background-image: url("../assets/icon/task-hover.svg");
|
|
|
+ background-image: url("../assets/icon_new/task-hover.svg");
|
|
|
+ color: #2c2c2c;
|
|
|
}
|
|
|
.el-menu-item.is-active & {
|
|
|
- background-image: url("../assets/icon/task-using.svg");
|
|
|
+ background-image: url("../assets/icon_new/task-using.svg");
|
|
|
+ color: #1296db;
|
|
|
}
|
|
|
}
|
|
|
.icon[target=bugList]{
|
|
|
- background-image: url("../assets/icon/bug.svg");
|
|
|
+ background-image: url("../assets/icon_new/bug.svg");
|
|
|
.el-menu-item:hover & {
|
|
|
- background-image: url("../assets/icon/bug-hover.svg");
|
|
|
+ background-image: url("../assets/icon_new/bug-hover.svg");
|
|
|
+ color: #2c2c2c;
|
|
|
}
|
|
|
.el-menu-item.is-active & {
|
|
|
- background-image: url("../assets/icon/bug-using.svg");
|
|
|
+ background-image: url("../assets/icon_new/bug-using.svg");
|
|
|
+ color: #1296db;
|
|
|
}
|
|
|
}
|
|
|
.icon[target=statistics]{
|
|
|
@@ -93,39 +126,64 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.icon[target=pipeline]{
|
|
|
- background-image: url("../assets/icon/training.svg");
|
|
|
+ background-image: url("../assets/icon_new/pipeline.svg");
|
|
|
.el-menu-item:hover & {
|
|
|
- background-image: url("../assets/icon/training-hover.svg");
|
|
|
+ background-image: url("../assets/icon_new/pipeline-hover.svg");
|
|
|
+ color: #2c2c2c;
|
|
|
}
|
|
|
.el-menu-item.is-active & {
|
|
|
- background-image: url("../assets/icon/training-using.svg");
|
|
|
+ background-image: url("../assets/icon_new/pipeline-using.svg");
|
|
|
+ color: #1296db;
|
|
|
}
|
|
|
}
|
|
|
.icon[target=database]{
|
|
|
- background-image: url("../assets/icon/database.svg");
|
|
|
+ background-image: url("../assets/icon_new/database.svg");
|
|
|
.el-menu-item:hover & {
|
|
|
- background-image: url("../assets/icon/database-hover.svg");
|
|
|
+ background-image: url("../assets/icon_new/database-hover.svg");
|
|
|
+ color: #2c2c2c;
|
|
|
}
|
|
|
.el-menu-item.is-active & {
|
|
|
- background-image: url("../assets/icon/database-using.svg");
|
|
|
+ background-image: url("../assets/icon_new/database-using.svg");
|
|
|
+ color: #1296db;
|
|
|
}
|
|
|
}
|
|
|
.icon[target=apitest]{
|
|
|
- background-image: url("../assets/icon/test.svg");
|
|
|
+ background-image: url("../assets/icon_new/test.svg");
|
|
|
.el-menu-item:hover & {
|
|
|
- background-image: url("../assets/icon/test-hover.svg");
|
|
|
+ background-image: url("../assets/icon_new/test-hover.svg");
|
|
|
+ color: #2c2c2c;
|
|
|
}
|
|
|
.el-menu-item.is-active & {
|
|
|
- background-image: url("../assets/icon/test-using.svg");
|
|
|
+ background-image: url("../assets/icon_new/test-using.svg");
|
|
|
+ color: #1296db;
|
|
|
}
|
|
|
}
|
|
|
.icon[target=invite]{
|
|
|
- background-image: url("../assets/icon/link.svg");
|
|
|
+ background-image: url("../assets/icon_new/link.svg");
|
|
|
+ .el-menu-item:hover & {
|
|
|
+ background-image: url("../assets/icon_new/link-hover.svg");
|
|
|
+ color: #2c2c2c;
|
|
|
+ }
|
|
|
+ .el-menu-item.is-active & {
|
|
|
+ background-image: url("../assets/icon_new/link-using.svg");
|
|
|
+ color: #1296db;
|
|
|
+ }
|
|
|
+}
|
|
|
+.icon[target=git]{
|
|
|
+ background-image: url("../assets/icon_new/git.svg");
|
|
|
.el-menu-item:hover & {
|
|
|
- background-image: url("../assets/icon/link-hover.svg");
|
|
|
+ background-image: url("../assets/icon_new/git-hover.svg");
|
|
|
+ color: #2c2c2c;
|
|
|
}
|
|
|
.el-menu-item.is-active & {
|
|
|
- background-image: url("../assets/icon/link-using.svg");
|
|
|
+ background-image: url("../assets/icon_new/git-using.svg");
|
|
|
+ color: #1296db;
|
|
|
}
|
|
|
}
|
|
|
+.title{
|
|
|
+ font-size: 9px;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|