sookie/blog-admin-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

导航tab美化

Browse Source
This commit is contained in:
灌糖包子 2026-03-19 23:30:31 +08:00
parent 8a2ba4e2bf
commit 2c8789b8cb
Signed by: sookie
GPG Key ID: 0599BECB75C1E68D
2 changed files with 66 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/static/common.less
View File

@ -202,7 +202,67 @@ html, body, #app, .layout {
overflow: auto; overflow: auto;
} }
} }
.el-tabs--card.nav-tabs > .el-tabs__header { .el-tabs--card.nav-tabs {
margin-bottom: 0; > .el-tabs__header {
border-bottom: none; margin-bottom: 0;
border-bottom: none;
background: var(--el-bg-color);
padding: 0 4px;
border-radius: 8px 8px 0 0;
.el-tabs__nav-wrap {
margin-bottom: 0;
}
.el-tabs__nav {
border: none;
}
.el-tabs__item {
height: 36px;
line-height: 36px;
padding: 0 16px;
font-size: var(--el-font-size-small);
color: var(--el-text-color-secondary);
border: none;
border-radius: 6px 6px 0 0;
margin-right: 2px;
transition: color 0.2s, background 0.2s;
position: relative;
&:hover {
color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
}
&.is-active {
color: var(--el-color-primary);
font-weight: var(--el-font-weight-primary);
background: var(--el-fill-color);
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--el-color-primary);
border-radius: 2px 2px 0 0;
}
}
.is-icon-close {
font-size: 11px;
margin-left: 4px;
border-radius: 50%;
transition: background 0.2s;
&:hover {
background: var(--el-color-danger-light-7);
color: var(--el-color-danger);
}
}
}
}
} }

6
src/views/api/Music.vue
View File

@ -153,7 +153,7 @@ import { ref, reactive } from 'vue'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { useBaseList } from '@/model/baselist' import { useBaseList } from '@/model/baselist'
import { MsgResult, Page } from '@/model/common.dto' import { MsgResult, Page } from '@/model/common.dto'
import { ElUploadInstance, ElMessage, ElMessageBox } from 'element-plus' import { UploadInstance, ElMessage, ElMessageBox } from 'element-plus'
import { MusicModel, MusicLibModel, MusicLyricModel, MusicPlayerItem } from '@/model/api/music' import { MusicModel, MusicLibModel, MusicLyricModel, MusicPlayerItem } from '@/model/api/music'
import APlayer from './aplayer/vue-aplayer.vue' import APlayer from './aplayer/vue-aplayer.vue'
import prettyBytes from 'pretty-bytes' import prettyBytes from 'pretty-bytes'
@ -179,7 +179,7 @@ class MusicPage extends Page {
} }
const store = useStore() const store = useStore()
const { loading, modalLoading, total, search, setLoadData, loadDataBase, reset, pageChange, pageSizeChange, datetimeFormat } = useBaseList(new MusicPage()) const { loading, modalLoading, total, search, setLoadData, loadDataBase, reset, pageChange, pageSizeChange } = useBaseList(new MusicPage())
const currentRow = ref<MusicModel | null>(null) const currentRow = ref<MusicModel | null>(null)
const libIdSelected = ref<string | null>(null) const libIdSelected = ref<string | null>(null)
@ -193,7 +193,7 @@ const musicPlaying = ref(false)
const musicList = ref<MusicPlayerItem[]>([]) const musicList = ref<MusicPlayerItem[]>([])
const currentMusic = ref<MusicPlayerItem>() const currentMusic = ref<MusicPlayerItem>()
const lyricForm = ref<VForm>() const lyricForm = ref<VForm>()
const musicUpload = ref<ElUploadInstance>() const musicUpload = ref<UploadInstance>()
const player = ref<any>() const player = ref<any>()
const lyricRuleValidate = { const lyricRuleValidate = {