feat: 优化主题切换代码

This commit is contained in:
奔跑的面条 2024-12-18 09:01:21 +08:00
parent 5d6850b47d
commit 026e4809c8

View File

@ -7,9 +7,8 @@
size="small" size="small"
@click="selectThemeHandle(item)" @click="selectThemeHandle(item)"
> >
<div class="go-flex-items-center"> <n-ellipsis class="go-mr-1" style="text-align: left">{{ item.name }} </n-ellipsis>
<n-ellipsis style="text-align: left; width: 72px">{{ item.name }} </n-ellipsis> <n-space :wrap="false" :wrap-item="false" :size="2">
<n-space :wrap-item="false" :size="2">
<span <span
class="theme-color-item" class="theme-color-item"
v-for="colorItem in item.colors" v-for="colorItem in item.colors"
@ -18,7 +17,6 @@
></span> ></span>
</n-space> </n-space>
</div> </div>
</div>
</n-gi> </n-gi>
</n-grid> </n-grid>
<div class="go-my-4">行业模板</div> <div class="go-my-4">行业模板</div>
@ -30,9 +28,8 @@
size="small" size="small"
@click="selectThemeHandle(item)" @click="selectThemeHandle(item)"
> >
<div class="go-flex-items-center"> <n-ellipsis class="go-mr-2" style="text-align: left">{{ item.name }} </n-ellipsis>
<n-ellipsis style="text-align: left; width: 72px">{{ item.name }} </n-ellipsis> <n-space :wrap="false" :wrap-item="false" :size="2">
<n-space :wrap-item="false" :size="2">
<span <span
class="theme-color-item" class="theme-color-item"
v-for="colorItem in item.colors" v-for="colorItem in item.colors"
@ -41,7 +38,6 @@
></span> ></span>
</n-space> </n-space>
</div> </div>
</div>
</n-gi> </n-gi>
</n-grid> </n-grid>
</template> </template>
@ -227,17 +223,16 @@ $radius: 6px;
$itemRadius: 2px; $itemRadius: 2px;
.theme-item { .theme-item {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
height: 34px; height: 34px;
padding: 0 16px; padding: 0 8px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
border-radius: $radius; border-radius: $radius;
@include fetch-bg-color('background-color4-shallow'); @include fetch-bg-color('background-color4-shallow');
&.active { &.active {
/* border: 1px solid v-bind('themeColor'); */
/* border-bottom: 1px solid rgba(0, 0, 0, 0); */
color: v-bind('themeColor'); color: v-bind('themeColor');
} }
.theme-color-item { .theme-color-item {