修改标签栏样式

This commit is contained in:
jmal 2024-03-18 14:33:03 +08:00
parent 9467abc6c0
commit fd88b2d6c1
3 changed files with 43 additions and 24 deletions

View File

@ -22,43 +22,33 @@
</el-menu>
</el-scrollbar>
</div>
<div class="scrollbar-tag" :class="{ collapse: isCollapse }">标签</div>
<div v-if="showTag && tagList.length > 0" class="scrollbar-tag" :class="{ collapse: isCollapse }">标签</div>
<div class="scroll-decoration-top"></div>
<el-scrollbar class="tag-list" wrap-class="scrollbar-wrapper">
<div v-if="isCollapse">
<ul class="infinite-list">
<el-tooltip
class="item"
<el-tooltip class="item"
v-if="showTag"
effect="dark"
:content="tag.name"
placement="right"
v-for="tag in tagList"
:key="tag.tagId"
>
:key="tag.tagId">
<li class="infinite-list-item collapse">
<svg-icon
:style="{ color: tag.color, fontSize: '14px' }"
icon-class="tag2"
></svg-icon>
<svg-icon :style="{ color: tag.color, fontSize: '14px' }" icon-class="tag2"></svg-icon>
</li>
</el-tooltip>
</ul>
</div>
<div v-else>
<ul class="infinite-list">
<li
v-for="tag in tagList"
<li v-for="tag in tagList"
v-if="showTag"
:key="tag.id"
class="infinite-list-item"
@click="tagClick(tag)"
>
<!-- <router-link :to="'/tag?tagId=' + tag.id" @click.native="tagClick(tag)">-->
<svg-icon
:style="{ color: tag.color, fontSize: '14px' }"
icon-class="tag2"
></svg-icon>
@click="tagClick(tag)">
<svg-icon :style="{ color: tag.color, fontSize: '14px' }" icon-class="tag2"></svg-icon>
<span>{{ tag.name }}</span>
<!-- </router-link>-->
</li>
</ul>
</div>
@ -125,6 +115,7 @@ export default {
showCopyBtn: false,
takeUpSpace: 0,
tagList: [],
showTag: false
}
},
computed: {
@ -173,18 +164,28 @@ export default {
},
watch: {
isCollapse(val){
},
$route(to) {
console.log(to.meta.menuType)
this.showTag = to.meta !== undefined && to.meta.menuType !== undefined && to.meta.menuType === 0;
}
},
mounted() {
tagApi.tagList({userId: this.$store.state.user.userId,}).then(res => {
this.tagList = res.data
})
this.getTagList()
Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
},
destroyed() {
Bus.$off('msg/file/change')
},
methods: {
getTagList() {
if (this.$route.meta.menuType === 0) {
this.showTag = true
}
tagApi.tagList({userId: this.$store.state.user.userId}).then(res => {
this.tagList = res.data
})
},
onmessage(msg) {
const takeUpSpace = msg.space
if (takeUpSpace) {
@ -293,6 +294,24 @@ export default {
.el-scrollbar {
padding-bottom: 15px;
}
>>> .submenu-title-noDropdown {
padding-left: 15px !important;
padding-right: 10px !important;
}
>>> .el-submenu__title {
padding-left: 15px !important;
padding-right: 10px !important;
.el-submenu__icon-arrow {
right: 15px;
}
}
>>> .nest-menu {
.el-menu-item {
padding-left: 25px !important;
padding-right: 20px !important;
min-width: unset;
}
}
}
.quota-space {
font-size: 14px;

View File

@ -9,7 +9,7 @@ $menuHover:#d9d9d9;
$subMenuBg:#f5f5f5;
$subMenuHover:#d9d9d9;
$sideBarWidth: 150px;
$sideBarWidth: 160px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

View File

@ -13,7 +13,7 @@
<el-tab-pane label="基本设置" name="1">
<div v-if="activeName === '1'">
<div class="config-itme-label">网盘名称:
<el-input placeholder="请输入网盘名称" v-model="netdiskName" minlength="1" maxlength="8" size="medium"
<el-input placeholder="请输入网盘名称" v-model="netdiskName" minlength="1" maxlength="10" size="medium"
:style="{width: inputNetdiskNameWidth+'px'}"
@keyup.enter.native="updateNetdiskName" @input="inputNetdiskName">
<el-button v-if="showAckBtn" slot="append" icon="el-icon-check" @click="updateNetdiskName"></el-button>