介绍

src/components/common/BalancePannel.vue

@@ -101,8 +101,7 @@
                         <template #label>
                             <div class="text-sm font-bold">姓名</div>
                         </template>
-                        <n-input v-model:value="form.name" placeholder="请输入真实姓名" :allow-input="onlyAllowNumber">
-                        </n-input>
+                        <n-input v-model:value="form.name" placeholder="请输入真实姓名"> </n-input>
                     </n-form-item>
                     <n-form-item path="account" label="银行卡号">
                         <template #label>

src/components/common/VipPannel.vue

@@ -59,13 +59,22 @@
                 :key="String(item.id)"
             >
                 <div
-                    class="choose-btn flex-shrink-0 flex-col items-center text-center pb-5 pt-4 border border-[#9EA4B0] dark:border-white rounded-[16px]"
+                    class="choose-btn flex flex-shrink-0 flex-col justify-center items-center text-center h-[86px] border border-[#9EA4B0] dark:border-white rounded-[16px]"
                     :class="{ prim: chooseMemberId === item.id, recommend: item.id === 4 }"
                     @click="chooseMemberId = item.id"
                 >
-                    <div class="text-black dark:text-white text-base">{{ item.name }}</div>
-                    <div class="text-3xl font-medium"><span class="text-base">¥</span>{{ item.price }}</div>
-
+                    <div class="text-black dark:text-white text-base" :class="{ 'text-[15px]': item.id === 4 }">
+                        {{ item.name }}
+                    </div>
+                    <div
+                        class="text-3xl font-medium mt-[-1px]"
+                        :class="{ 'text-[25px] leading-[28px] mt-[-3px]': item.id === 4 }"
+                    >
+                        <span class="text-base">¥</span>{{ item.price }}
+                    </div>
+                    <div class="text-[#A2A49D] text-xs" v-if="item.id === 4">
+                        原价 <span class="line-through">1299</span>
+                    </div>
                     <template v-if="chooseMemberId == item.id">
                         <img :src="chooseRe" v-if="item.id === 4" alt="" class="choose-img" />
                         <img :src="choose" v-else alt="" class="choose-img"
@@ -84,7 +93,7 @@
         <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"
                 ><span class="text-lg mr-1">¥{{ chooseMemberInfo?.price || 0 }} </span>
-                 {{ isVip ? '立即续费' : '立即开通' }}</n-button
+                {{ isVip ? '立即续费' : '立即开通' }}</n-button
             >
         </div>
 

src/components/common/minePannel.vue

@@ -21,7 +21,7 @@
         <n-card :bordered="false">
             <n-row gutter="12">
                 <n-col :span="12">
-                    <div class="share-btn cursor-pointer" @click="showShareModal = true">
+                    <div class="share-btn cursor-pointer" @click="shareEvent">
                         <div class="share-text">
                             <div class="text1">邀请好友</div>
                             <div class="text2">一起赚钱</div>
@@ -69,7 +69,7 @@ import { UserAvatar, VipCard, Share, BalancePannel, OfficalAccount } from '@/com
 import { NCard, NRow, NCol, useMessage, NButton, useDialog, NModal } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import { ref } from 'vue'
-import { useUserStore } from '@/store'
+import { useUserStore, useUserMemberStore } from '@/store'
 import { emitter } from '@/plugins'
 import { fetchUserBalance } from '@/api'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
@@ -120,6 +120,25 @@ fetchUserBalance().then((res: any) => {
     balance.value = res.balance
 })
 
+const userMemberStore = useUserMemberStore()
+function shareEvent() {
+    if (userMemberStore.isVip()) {
+        showShareModal.value = true
+    } else {
+        dialog.create({
+            title: '提示',
+            content: '加入会员才能开通分享功能',
+            positiveText: '加入会员',
+            negativeText: '取消',
+            maskClosable: false,
+            onPositiveClick: () => {
+                goVip()
+            }
+        })
+    }
+    //
+}
+
 const showOffical = ref(false)
 </script>
 

src/views/page/HomeView.vue

@@ -3,36 +3,54 @@
         class="page h-full flex flex-col bg-cover bg-center overflow-auto"
         :style="{ backgroundImage: `url(${isMobile ? h5Bg : pcBg})` }"
     >
-        <n-page-header>
-            <template #title>
-                <div class="flex items-center py-3 lg:py-8 pl-4 lg:pl-52" @click="showConsoleEve">
-                    <n-avatar :size="isMobile ? 'small' : 'large'" :src="logo"></n-avatar>
-                    <span class="ml-3 text-white text-base lg:text-lg alimamaShuHeiTi">CHILLGPT </span>
-                </div>
-            </template>
-            <template #extra>
-                <div class="flex items-center py-3 lg:py-8 pr-4 lg:pr-52">
-                    <template v-if="isLogin">
-                        <n-button text v-if="isMobile" @click="goMine">
-                            <user-avatar avatarType="small" onlyAvatar />
+        <NConfigProvider
+            :theme-overrides="{
+                Button: {
+                    heightSmall: '24px'
+                }
+            }"
+        >
+            <n-page-header>
+                <template #title>
+                    <div class="flex items-center py-3 lg:py-8 pl-4 lg:pl-15 2xl:pl-52" @click="showConsoleEve">
+                        <n-avatar :size="isMobile ? 'small' : 'medium'" :src="logo"></n-avatar>
+                        <span class="ml-[6px] lg:ml-3 text-white text-base lg:text-lg alimamaShuHeiTi">CHILLGPT </span>
+                    </div>
+                </template>
+                <template #extra>
+                    <div class="flex items-center py-3 lg:py-[30px] pr-4 lg:pr-15 2xl:pr-52">
+                        <n-button text class="!p-[8px] !mr-[8px] lg:!p-[12px] lg:!mr-[12px]" @click="showDesc = true">
+                            <img
+                                class="w-[20px] h-[20px] lg:w-[24px] lg:h-[24px]"
+                                src="@/assets/icon_jieshao.png"
+                                alt=""
+                            />
+                            <span class="text-white ml-[4px] lg:ml-[6px] text-xs lg:text-sm">介绍</span>
                         </n-button>
-                        <n-popover placement="bottom" trigger="click" v-else>
-                            <template #trigger>
-                                <n-button text>
-                                    <user-avatar :avatarType="isMobile ? 'small' : 'large'" onlyAvatar />
-                                </n-button>
-                            </template>
-                            <n-button size="small" @click="logout" text>退出登录</n-button>
-                        </n-popover>
-                    </template>
+                        <template v-if="isLogin">
+                            <n-button text v-if="isMobile" @click="goMine">
+                                <user-avatar avatarType="small" onlyAvatar />
+                            </n-button>
+                            <n-popover placement="bottom" trigger="click" v-else>
+                                <template #trigger>
+                                    <n-button text>
+                                        <user-avatar :avatarType="isMobile ? 'small' : 'medium'" onlyAvatar />
+                                    </n-button>
+                                </template>
+                                <n-button size="small" @click="logout" text>退出登录</n-button>
+                            </n-popover>
+                        </template>
 
-                    <template v-else>
-                        <n-button v-if="!isMobile" type="primary" round @click="showLogin = true"> 登录 </n-button>
-                        <n-button v-else @click="$router.push('/login')" quaternary type="primary">登录</n-button>
-                    </template>
-                </div>
-            </template>
-        </n-page-header>
+                        <template v-else>
+                            <n-button v-if="!isMobile" type="primary" round @click="showLogin = true"> 登录 </n-button>
+                            <n-button v-else round @click="$router.push('/login')" type="primary" size="small"
+                                >登录</n-button
+                            >
+                        </template>
+                    </div>
+                </template>
+            </n-page-header>
+        </NConfigProvider>
 
         <div class="flex flex-col items-center content-center flex-1 pt-4 pb-24 lg:py-32 page-content">
             <img src="@/assets/brand.png" class="w-3/4 max-w-3xl" alt="" />
@@ -123,6 +141,39 @@
                 </n-card>
             </n-modal>
         </NConfigProvider>
+
+        <NConfigProvider
+            :theme="lightTheme"
+            :theme-overrides="{
+                Card: {
+                    colorModal: 'linear-gradient(180deg, rgba(196, 218, 255, 1), #fbf1ff)'
+                },
+                Input: {
+                    border: '1px solid #2B3038'
+                }
+            }"
+        >
+            <n-modal v-model:show="showDesc" class="!max-w-xl !w-[85%] !rounded-[12px]">
+                <n-card content-style="padding:2px">
+                    <div
+                        class="pt-[20px] rounded-[12px]"
+                        style="background: linear-gradient(180deg, #e8f2ff 0%, #fbf1ff 100%)"
+                    >
+                        <img class="w-[180px] block mx-[auto]" src="@/assets/png-wenzi.png" alt="" />
+                        <div class="text-center text-[10px] text-[#2900D499] uppercase">CHILLGPT introduce</div>
+                        <div class="text-black text-sm px-4 pb-[22px] pt-[10px]">
+                            <p>
+                                为维持高速稳定的客户体验，ChillGPT采用微软Microsoft
+                                Azure云服务器，微软Azure是业界第一名的智能AI、物联网、混合云，集机器学习、数据分析与信息系统服务集大成，是唯一在中国正式商用的国际公有云。OpenAi公司的ChatGPT即部署于微软Azure，确保了两者的同源与互通。
+                            </p>
+                            <p class="mt-[10px]">
+                                针对国内用户的使用习惯，ChillGPT专门对微信生态进行了全面优化，用户不用跳转到外部浏览器，将ChillGPT保存到“收藏”内，即可完成一键登录、使用，复制、分享等功能，在微信上的响应速度、使用体验远超同类产品。
+                            </p>
+                        </div>
+                    </div>
+                </n-card>
+            </n-modal>
+        </NConfigProvider>
     </n-el>
 </template>
 
@@ -137,6 +188,7 @@ import {
     NModal,
     NConfigProvider,
     darkTheme,
+    lightTheme,
     NEl,
     NPopover,
     useMessage,
@@ -160,6 +212,7 @@ import imgItem06 from '@/assets/png-06.png'
 import imgItem07 from '@/assets/png-07.png'
 import { init as initEruda } from '@/utils/console'
 import { useStorage } from '@vueuse/core'
+import borderImg from '@/assets/png-biankuang.png'
 
 const { isMobile } = useBasicLayout()
 
@@ -280,6 +333,9 @@ setTimeout(() => {
         router.replace({ query: {} }).catch(() => {})
     }
 }, 300)
+
+//介绍
+const showDesc = ref(false)
 </script>
 
 <style lang="less" scoped>