优化样式。

This commit is contained in:
unknown 2024-07-05 22:25:24 +08:00
parent f0eeea8483
commit 950cff7a6c
2 changed files with 103 additions and 85 deletions

View File

@ -3,83 +3,83 @@ import { Theme } from "../../types/setting";
const themeList: Array<Theme> = [ const themeList: Array<Theme> = [
{ {
name: "#FFFFFF", name: "#FFFFFF",
mainFontColor: "#505050FF", mainFontColor: "#505050",
secondFontColor: "#505050FF", secondFontColor: "#505050",
mainBackgroundColor: "#FFFFFFFF", mainBackgroundColor: "#FFFFFF",
secondBackgroundColor: "#DCDEDFFF", secondBackgroundColor: "#DCDEDF",
borderColor: "#F0F0F0FF", borderColor: "#F0F0F0",
}, },
{ {
name: "#2B2B2B", name: "#2B2B2B",
mainFontColor: "#BBBBBBFF", mainFontColor: "#BBBBBB",
secondFontColor: "#BBBBBBFF", secondFontColor: "#BBBBBB",
mainBackgroundColor: "#2B2B2BFF", mainBackgroundColor: "#2B2B2B",
secondBackgroundColor: "#3C3F41FF", secondBackgroundColor: "#3C3F41",
borderColor: "#373737FF", borderColor: "#373737",
}, },
{ {
name: "#508CC8", name: "#508CC8",
mainFontColor: "#FFFFFFFF", mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFFFF", secondFontColor: "#FFFFFF",
mainBackgroundColor: "#508CC8FF", mainBackgroundColor: "#508CC8",
secondBackgroundColor: "#6FA0D2FF", secondBackgroundColor: "#6FA0D2",
borderColor: "#5A94CDFF", borderColor: "#5A94CD",
}, },
{ {
name: "#024351", name: "#024351",
mainFontColor: "#FFFFFFFF", mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFFFF", secondFontColor: "#FFFFFF",
mainBackgroundColor: "#024351FF", mainBackgroundColor: "#024351",
secondBackgroundColor: "#025A6CFF", secondBackgroundColor: "#025A6C",
borderColor: "#064D5CFF", borderColor: "#064D5C",
}, },
{ {
name: "#516FA3", name: "#516FA3",
mainFontColor: "#FFFFFFFF", mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFFFF", secondFontColor: "#FFFFFF",
mainBackgroundColor: "#516FA3FF", mainBackgroundColor: "#516FA3",
secondBackgroundColor: "#91A8D0FF", secondBackgroundColor: "#91A8D0",
borderColor: "#5D78A7FF", borderColor: "#5D78A7",
}, },
{ {
name: "#45326E", name: "#45326E",
mainFontColor: "#FFFFFFFF", mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFFFF", secondFontColor: "#FFFFFF",
mainBackgroundColor: "#45326EFF", mainBackgroundColor: "#45326E",
secondBackgroundColor: "#5F4B8BFF", secondBackgroundColor: "#5F4B8B",
borderColor: "#4C3A73FF", borderColor: "#4C3A73",
}, },
{ {
name: "#693030", name: "#693030",
mainFontColor: "#FFFFFFFF", mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFFFF", secondFontColor: "#FFFFFF",
mainBackgroundColor: "#693030FF", mainBackgroundColor: "#693030",
secondBackgroundColor: "#955151FF", secondBackgroundColor: "#955151",
borderColor: "#733535FF", borderColor: "#733535",
}, },
{ {
name: "#9F2F4A", name: "#9F2F4A",
mainFontColor: "#FFFFFFFF", mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFFFF", secondFontColor: "#FFFFFF",
mainBackgroundColor: "#9F2F4AFF", mainBackgroundColor: "#9F2F4A",
secondBackgroundColor: "#EA6F8CFF", secondBackgroundColor: "#EA6F8C",
borderColor: "#AD3350FF", borderColor: "#AD3350",
}, },
{ {
name: "#000000,#FFDB00", name: "#000000,#FFDB00",
mainFontColor: "#B3B3B3FF", mainFontColor: "#B3B3B3",
secondFontColor: "#000000FF", secondFontColor: "#000000",
mainBackgroundColor: "#000000FF", mainBackgroundColor: "#000000",
secondBackgroundColor: "#FFDB00FF", secondBackgroundColor: "#FFDB00",
borderColor: "#1D1D1DFF", borderColor: "#1D1D1D",
}, },
{ {
name: "#000000,#FFFFFF", name: "#000000,#FFFFFF",
mainFontColor: "#B3B3B3FF", mainFontColor: "#B3B3B3",
secondFontColor: "#000000FF", secondFontColor: "#000000",
mainBackgroundColor: "#000000FF", mainBackgroundColor: "#000000",
secondBackgroundColor: "#FFFFFFFF", secondBackgroundColor: "#FFFFFF",
borderColor: "#1D1D1DFF", borderColor: "#1D1D1D",
}, },
]; ];

View File

@ -401,47 +401,65 @@
<span class="block font-semibold">{{ <span class="block font-semibold">{{
store.language.color store.language.color
}}</span> }}</span>
<NFormItem class="mt-1" :label="store.language.mainColor"> <div class="flex items-center">
<NColorPicker <NFormItem
:modes="['hex']" class="mt-1 flex-1"
v-model:value="mainBackgroundColor" :label="store.language.mainColor"
@complete="changeMainBackgroundColor" >
:to="false" <NColorPicker
></NColorPicker> :modes="['hex']"
</NFormItem> v-model:value="mainBackgroundColor"
<NFormItem class="mt-1" :label="store.language.secondaryColor"> @complete="changeMainBackgroundColor"
<NColorPicker :to="false"
:modes="['hex']" :show-alpha="false"
v-model:value="secondBackgroundColor" ></NColorPicker>
@complete="changeSecondBackgroundColor" </NFormItem>
:to="false" <NFormItem
></NColorPicker> class="mt-1 flex-1 ml-[10px]"
</NFormItem> :label="store.language.fontMainColor"
<NFormItem class="mt-1" :label="store.language.fontMainColor"> >
<NColorPicker <NColorPicker
:modes="['hex']" :modes="['hex']"
v-model:value="mainFontColor" v-model:value="mainFontColor"
@complete="changeMainFontColor" @complete="changeMainFontColor"
:to="false" :to="false"
></NColorPicker> :show-alpha="false"
</NFormItem> ></NColorPicker>
<NFormItem </NFormItem>
class="mt-1" </div>
:label="store.language.fontSecondaryColor" <div class="flex items-center">
> <NFormItem
<NColorPicker class="mt-1 flex-1"
:modes="['hex']" :label="store.language.secondaryColor"
v-model:value="secondFontColor" >
@complete="changeSecondFontColor" <NColorPicker
:to="false" :modes="['hex']"
></NColorPicker> v-model:value="secondBackgroundColor"
</NFormItem> @complete="changeSecondBackgroundColor"
:to="false"
:show-alpha="false"
></NColorPicker>
</NFormItem>
<NFormItem
class="mt-1 flex-1 ml-[10px]"
:label="store.language.fontSecondaryColor"
>
<NColorPicker
:modes="['hex']"
v-model:value="secondFontColor"
@complete="changeSecondFontColor"
:to="false"
:show-alpha="false"
></NColorPicker>
</NFormItem>
</div>
<NFormItem class="mt-1" :label="store.language.borderColor"> <NFormItem class="mt-1" :label="store.language.borderColor">
<NColorPicker <NColorPicker
:modes="['hex']" :modes="['hex']"
v-model:value="borderColor" v-model:value="borderColor"
@complete="changeBorderColor" @complete="changeBorderColor"
:to="false" :to="false"
:show-alpha="false"
></NColorPicker> ></NColorPicker>
</NFormItem> </NFormItem>
</NForm> </NForm>