| | |
| | | <el-breadcrumb class="app-breadcrumb" separator="/">
|
| | | <transition-group name="breadcrumb">
|
| | | <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
| | | <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
|
| | | <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
|
| | | item.meta.title }}</span>
|
| | | <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
| | | </el-breadcrumb-item>
|
| | | </transition-group>
|
| | |
| | | </script>
|
| | |
|
| | | <style lang='scss' scoped>
|
| | | .app-breadcrumb.el-breadcrumb {
|
| | | display: inline-block;
|
| | | font-size: 14px;
|
| | | line-height: 50px;
|
| | | margin-left: 8px;
|
| | |
|
| | | .no-redirect {
|
| | | color: #97a8be;
|
| | | cursor: text;
|
| | | }
|
| | | }
|
| | | </style> |
| | | .app-breadcrumb.el-breadcrumb { |
| | | display: inline-block; |
| | | font-size: 14px; |
| | | line-height: 56px; |
| | | margin-left: 8px; |
| | | |
| | | :deep(.el-breadcrumb__inner) { |
| | | color: var(--text-secondary); |
| | | font-weight: 500; |
| | | transition: color 0.2s ease; |
| | | } |
| | | |
| | | :deep(.el-breadcrumb__separator) { |
| | | color: var(--text-tertiary); |
| | | } |
| | | |
| | | a { |
| | | color: var(--text-secondary); |
| | | |
| | | &:hover { |
| | | color: var(--current-color); |
| | | } |
| | | } |
| | | |
| | | .no-redirect { |
| | | color: var(--current-color); |
| | | font-weight: 600; |
| | | cursor: text; |
| | | } |
| | | } |
| | | </style> |