Update styling in setting.vue and PluginCardListView.vue

This commit is contained in:
jxxghp
2024-05-05 20:20:37 +08:00
parent c949ea2667
commit bee4264a39
2 changed files with 21 additions and 4 deletions

View File

@@ -66,13 +66,12 @@ const tabs = [
<template>
<div>
<VTabs v-model="activeTab" show-arrows>
<VTabs v-model="activeTab" show-arrows class="v-tabs-pill">
<VTab v-for="item in tabs" :key="item.icon" :value="item.tab">
<VIcon size="20" start :icon="item.icon" />
{{ item.title }}
</VTab>
</VTabs>
<VDivider />
<VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
<!-- 用户 -->
@@ -138,3 +137,19 @@ const tabs = [
</VWindow>
</div>
</template>
<
<style lang="scss">
.v-tabs.v-tabs-pill.v-slide-group-item--active.v-tab--selected.text-primary {
background-color: rgb(var(--v-theme-primary));
color: rgb(var(--v-theme-on-primary)) !important;
}
.v-tabs.v-tabs-pill.v-tab.v-tab--selected {
box-shadow: 0 2px 4px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity)), 0 0 transparent,
0 0 transparent;
}
.v-tabs.v-tabs-pill.v-btn:hover {
color: rgb(var(--v-theme-primary));
}
</style>

View File

@@ -335,8 +335,6 @@ onBeforeMount(async () => {
</VTab>
</VTabs>
<VDivider />
<VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
<!-- 我的插件 -->
<VWindowItem value="myplugin">
@@ -524,4 +522,8 @@ onBeforeMount(async () => {
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
padding-block-end: 1rem;
}
.v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}
</style>