.

src/components/common/VipPannel.vue

@@ -5,14 +5,14 @@
             <img :src="isDark ? vipBlock : vipBlockLight" class="block" alt="" />
         </n-card>
 
-        <div class="px-5 vip-list pt-5">
+        <div class="px-5 vip-list pt-6">
             <n-card
-                class="rounded-lg overflow-hidden exclusive"
+                class="rounded-lg overflow-hidden exclusive !dark:bg-[#1B1D24]"
                 title=""
                 content-style="padding:0 0 20px"
                 :header-style="{
                     padding: '8px 15px 12px',
-                    background: isDark ? '' : '#F6F3FF'
+                    background: isDark ? '#16171B' : '#F6F3FF'
                 }"
             >
                 <template #header>
@@ -81,9 +81,10 @@
 
         <div class="btn-list flex items-align"></div>
 
-        <div class="px-6 py-3 mt-4 btn bg-white dark:bg-[#2C2C32]">
+        <div class="px-6 py-3 mt-4 btn bg-white dark:bg-[#0F1014]">
             <n-button class="alimamaShuHeiTi" type="primary" size="large" round block @click="submit" :loading="loading"
-                >¥{{ chooseMemberInfo?.price || 0 }} {{ isVip ? '立即续费' : '立即开通' }}</n-button
+                ><span class="text-lg mr-1">¥{{ chooseMemberInfo?.price || 0 }} </span>
+                 {{ isVip ? '立即续费' : '立即开通' }}</n-button
             >
         </div>
 
@@ -373,6 +374,7 @@ function goChat() {
 
 .dark {
     .choose-btn {
+        background-color: #1b1d24;
         &.prim {
             background: linear-gradient(310deg, #30155a 0%, #2d2c61 100%);
         }
@@ -397,9 +399,12 @@ function goChat() {
     box-shadow: 0px 2px 4px 0px rgba(158, 164, 176, 0.1);
 }
 
-.btn{
+.btn {
     position: sticky;
     bottom: 0;
     z-index: 20;
+    .n-button {
+        --n-font-size: 16px;
+    }
 }
 </style>

src/hooks/useTheme.ts

@@ -30,11 +30,18 @@ export function useTheme() {
                 textColorPrimary: '#fff',
                 textColorPressedPrimary: '#fff',
                 textColorFocusPrimary: '#fff',
-                textColorHoverPrimary: '#fff',
+                textColorHoverPrimary: '#fff'
+            },
+            Input: {
+                color: '#ffffff00',
+                border: isDark.value ? '1px solid #2B3038' : '1px solid rgb(224,224,230)'
+            },
+            Card: {
+                colorModal: isDark.value ? '#20223c' : '#fff'
+            },
+            Dialog:{
+                color: isDark.value ? '#20223c' : '#fff'
             }
-            // Input: {
-            //     textColor: '#ffffff'
-            // }
         }
     })
 

src/styles/global.less

@@ -25,7 +25,7 @@ body {
 }
 
 .alimamaShuHeiTi {
-    font-family: 'AlimamaShuHeiTi'!important;
+    font-family: 'AlimamaShuHeiTi' !important;
 }
 
 .text-color-1 {

src/views/chat/Chat.vue

@@ -16,6 +16,7 @@ import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore, useAppStore, usePromptStore, useAuthStore, useUserMemberStore } from '@/store'
 import { fetchChatAPIProcess } from '@/api'
 import { t } from '@/locales'
+import { useTheme } from '@/hooks/useTheme'
 import { emitter } from '@/plugins'
 
 let controller = new AbortController()
@@ -432,6 +433,8 @@ onUnmounted(() => {
     if (loading.value) controller.abort()
 })
 
+const { isDark } = useTheme()
+
 const appStore = useAppStore()
 const showMine = ref(false)
 function goMine() {
@@ -565,8 +568,10 @@ function goVip() {
         </footer>
 
         <n-modal v-model:show="showMine" transform-origin="center">
-            <n-card :border="false" class="!max-w-xl !rounded-xl">
-                <mine-pannel></mine-pannel>
+            <n-card :bordered="false" class="!max-w-xl !rounded-xl" content-style="padding:0">
+                <div class="pt-3 rounded-xl">
+                    <mine-pannel></mine-pannel>
+                </div>
             </n-card>
         </n-modal>
 
@@ -574,11 +579,17 @@ function goVip() {
             v-model:show="showVip"
             :block-scroll="false"
             transform-origin="center"
-            class="max-w-md py-3"
+            class="max-w-md"
             style="width: 75%"
         >
-            <n-card :border="false" class="!rounded-xl !max-h-[80vh]" content-style="padding:0;overflow:auto">
-                <vip-pannel></vip-pannel>
+            <n-card
+                :bordered="false"
+                class="!rounded-xl !max-h-[80vh] !overflow-hidden"
+                content-style="padding:0;overflow:auto"
+            >
+                <div class="vipCard py-3 rounded-xl" :class="{ dark: isDark }">
+                    <vip-pannel></vip-pannel>
+                </div>
             </n-card>
         </n-modal>
 
@@ -587,3 +598,13 @@ function goVip() {
         </n-modal>
     </div>
 </template>
+
+<style lang="less" scoped>
+.vipCard {
+    background: linear-gradient(180deg, #f7f3ff, #f7f3ff 180px, #fff 200px, #fff);
+
+    &.dark {
+        background: linear-gradient(180deg, #000033, #000033 180px, #0f1014 200px, #0f1014);
+    }
+}
+</style>

src/views/page/HomeView.vue

@@ -89,13 +89,31 @@
                 }"
                 class="mt-16 w-5/6 sm:w-80"
             >
-                <n-button type="primary" class="alimamaShuHeiTi" block round size="large" @click="goChat" :loading="loading">
+                <n-button
+                    type="primary"
+                    class="alimamaShuHeiTi"
+                    block
+                    round
+                    size="large"
+                    @click="goChat"
+                    :loading="loading"
+                >
                     立即体验
                 </n-button>
             </NConfigProvider>
         </div>
 
-        <NConfigProvider :theme="darkTheme">
+        <NConfigProvider
+            :theme="darkTheme"
+            :theme-overrides="{
+                Card: {
+                    colorModal: '#20223c'
+                },
+                Input: {
+                    border: '1px solid #2B3038'
+                }
+            }"
+        >
             <n-modal v-model:show="showLogin" transform-origin="center">
                 <n-card class="!max-w-xl !rounded-xl">
                     <div class="text-white text-2xl text-center font-bold py-8">登录</div>

src/views/page/VipView.vue

@@ -59,10 +59,10 @@ export default defineComponent({
 
 <style lang="less" scoped>
 .page {
-    background: linear-gradient(180deg, #f7f3ff, #f7f3ff 170px, #fff 181px, #fff);
+    background: linear-gradient(180deg, #f7f3ff, #f7f3ff 210px, #fff 240px, #fff);
 
     &.dark {
-        background: #0f1014;
+        background: linear-gradient(180deg, #000033, #000033 210px, #0F1014 240px, #0F1014);
     }
 }
 :deep(.n-page-header) {