.

src/api/index.ts

@@ -2,229 +2,34 @@ import type { AxiosProgressEvent, GenericAbortSignal } from 'axios'
 import { post, get } from '@/utils/request'
 import { useAuthStore, useSettingStore } from '@/store'
 
-export function fetchChatAPI<T = any>(
-    prompt: string,
-    options?: { conversationId?: string; parentMessageId?: string },
-    signal?: GenericAbortSignal
-) {
-    return post<T>({
-        url: '/chat/chat',
-        data: { prompt, options },
-        signal
-    })
-}
-
-export function fetchChatConfig<T = any>() {
-    return post<T>({
-        url: '/chat/config'
-    })
-}
-
-export function fetchChatAPIProcess<T = any>(params: {
-    url?: string | null
-    prompt: string
-    options?: { conversationId?: string; parentMessageId?: string }
-    signal?: GenericAbortSignal
-    onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
-}) {
-    const settingStore = useSettingStore()
-    const authStore = useAuthStore()
-
-    let data: Record<string, any> = {
-        prompt: params.prompt,
-        options: params.options
-    }
-
-    console.log(authStore.isChatGPTAPI)
-
-    // if (authStore.isChatGPTAPI) {
-    data = {
-        ...data,
-        systemMessage: settingStore.systemMessage,
-        temperature: settingStore.temperature,
-        top_p: settingStore.top_p
-    }
-    // }
-
-    return post<T>({
-        url: params.url || '/chat/chat-process1',
-        data,
-        signal: params.signal,
-        onDownloadProgress: params.onDownloadProgress
-    })
-}
-
-export function fetchSession<T>() {
-    return post<T>({
-        url: '/chat/session'
-    })
-}
-
-export function fetchVerify<T>(token: string) {
-    return post<T>({
-        url: '/verify',
-        data: { token }
-    })
-}
-
-export function fetchPhoneLogin<T>(phone: string | number, code: string | number, invitor?: string | number) {
-    return post<T>({
-        url: '/auth/phoneLogin',
-        data: { phone, code, invitor }
-    })
-}
-
-export function fetchMy<T>() {
-    return get<T>({
-        url: '/users/my'
-    })
-}
-
-export function fetchSendVerify<T>(data: { phone: string | number; token: string; sig: string; sessionId: string }) {
-    return post<T>({
-        url: '/sms/sendVerify',
-        data
-    })
-}
-
-export function fetchOpenid<T>(code: string) {
-    return get<T>({
-        url: '/weixin/code2openid',
-        data: { code }
-    })
-}
-
-export function fetchJsapiSign<T>(url: string) {
-    return post<T>({
-        url: '/weixin/jsapiSign',
-        data: { url }
-    })
-}
-
-export function fetchPay<T>(openid: string) {
-    return get<T>({
-        url: '/weixin/pay',
-        data: { openid }
-    })
-}
-
-export function fetchRedirectUrl<T>(url: string, state?: string) {
-    return post<T>({
-        url: '/weixin/redirectUrl',
-        data: { url, state }
-    })
-}
 
-export function fetchMyMember<T>() {
-    return get<T>({
-        url: '/membership/get'
-    })
-}
 
-export function fetchGetMemberships<T>() {
-    return get<Array<T>>({
-        url: '/membership/plans'
-    })
-}
-
-export function fetchMembershipRenew<T>(planId: string | number) {
-    return post<T>({
-        url: '/membership/renew',
-        data: {
-            planId,
-            type: 'JSAPI',
-            openid: window.sessionStorage.getItem('openid')
-        }
-    })
-}
-
-export function fetchUserBalance<T>() {
+export function fetchCase<T>() {
     return get<T>({
-        url: '/userBalance/get'
+        url: '/web/cases'
     })
 }
 
-export function fetchUserBalanceRecords<T>() {
-    return get<Array<T>>({
-        url: '/userBalance/records/get'
-    })
-}
-
-export function fetchWithdraw<T>(data: any) {
-    return post<Array<T>>({
-        url: '/withdraw/apply',
-        data: data
-    })
-}
-
-export function fetchCommissionRecords<T>() {
-    return get<Array<T>>({
-        url: '/commission/records/get'
-    })
-}
-
-export function fetchSystemMessage<T>() {
+export function fetchHomeCase<T>() {
     return get<T>({
-        url: '/sys-config/system_message'
+        url: '/web/homeCases'
     })
 }
 
-export function fetchMasks<T>(num: number) {
+export function fetchBase<T>() {
     return get<T>({
-        url: '/admin/mask/getRandom/' + num
+        url: '/web/base'
     })
 }
 
-export function fetchGetMask<T>(id: any) {
+export function fetchQuestion<T>() {
     return get<T>({
-        url: `/admin/mask/get/${id}`
+        url: '/web/question'
     })
 }
 
-export function fetchGetMoments<T>(data: any) {
-    return post<T>({
-        url: `/moments`,
-        data: data
-    })
-}
-
-export function fetchGetMomentsDetail<T>(id: any) {
-    return get<T>({
-        url: `/moments/get/${id}`
-    })
-}
-
-export function fetchChatRoles<T>(num: number) {
-    return get<T>({
-        url: '/chatRole/getRandom/' + num
-    })
-}
-
-export function fetchGetChatRole<T>(id: any) {
-    return get<T>({
-        url: '/chatRole/get/' + id
-    })
-}
-
-export function fetchGetCompany<T>() {
-    return get<T>({
-        url: '/org/'
-    })
-}
-
-export function fetchGetUserFileds<T>(userId: any, orgId: any) {
+export function fetchAbility<T>(id: any) {
     return get<T>({
-        url: '/form/getUserFields',
-        data: {
-            userId,
-            orgId
-        }
-    })
-}
-
-export function fetchUserFileds<T>(datas: any) {
-    return post<T>({
-        url: '/form/userFileds',
-        data: datas
+        url: `/web/ability/${id}`
     })
 }

src/components/common/AppHeader.vue

@@ -1,31 +1,31 @@
 <template>
-    <NConfigProvider
-        :theme-overrides="{
-            Menu: {
-                fontSize: '16px'
-            }
-        }"
-    >
-        <n-affix :top="0" class="w-full z-20" :class="{ 'bg-[#ffffffe6]': scrolly > 0 }">
-            <n-page-header>
-                <template #title>
+    <el-affix :offset="0">
+        <el-page-header icon="" title=" " :class="{ 'bg-[#ffffffe6]': scrolly > 0 }">
+            <template #content>
+                <div class="flex items-center">
                     <div
-                        class="flex items-center py-8 lg:py-3 pl-52 md:pl-4 lg:pl-10 2xl:pl-15"
+                        class="flex flex-shrink-0 items-center py-8 lg:py-3 pl-42 lg:pl-10 md:!pl-2 2xl:pl-15"
                         @click="showConsoleEve"
                     >
                         <!-- <n-avatar :size="isMobile ? 'small' : 'medium'" :src="logo"></n-avatar> -->
                         <!-- <span class="ml-[6px] lg:ml-3 text-black text-base lg:text-lg alimamaShuHeiTi">走马AI助手 </span> -->
-                        <img :src="logo" class="h-[28px] md:h-[40px]" alt="" />
-                        <span class="miSans text-[26px] text-black ml-2 md:text-lg md:ml-1">ZOUMAAI</span>
+                        <img :src="logo" class=" flex-shrink-0 h-[40px] md:h-[28px] w-auto block" alt="" />
+                        <span class="miSans text-[26px] text-black ml-2 md:text-lg md:ml-1 md:hidden">ZOUMAAI</span>
                     </div>
-                </template>
-                <template #subtitle>
-                    <n-menu class="px-14" v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
-                </template>
-                <template #extra> </template>
-            </n-page-header>
-        </n-affix>
-    </NConfigProvider>
+                    <el-menu
+                        :default-active="activeKey"
+                        router
+                        class="!ml-12 !border-none md:!ml-5"
+                        mode="horizontal"
+                        :ellipsis="false"
+                    >
+                        <el-menu-item index="/home">首页</el-menu-item>
+                        <el-menu-item index="/case">客户案例</el-menu-item>
+                    </el-menu>
+                </div>
+            </template>
+        </el-page-header>
+    </el-affix>
 </template>
 
 <script setup lang="ts">
@@ -66,42 +66,7 @@ function showConsoleEve() {
     }
 }
 
-const menuOptions: MenuOption[] = [
-    {
-        label: () =>
-            h(
-                RouterLink,
-                {
-                    to: {
-                        name: 'home',
-                        params: {
-                            lang: 'zh-CN'
-                        }
-                    }
-                },
-                '首页'
-            ),
-        key: 'home'
-    },
-    {
-        label: () =>
-            h(
-                RouterLink,
-                {
-                    to: {
-                        name: 'about',
-                        params: {
-                            lang: 'zh-CN'
-                        }
-                    }
-                },
-                '联系我们'
-            ),
-        key: 'about'
-    }
-]
-
-const activeKey = ref('home')
+const activeKey = ref('/home')
 
 const route = useRoute()
 
@@ -109,8 +74,15 @@ watch(
     route,
     () => {
         console.log(route)
-        activeKey.value = route.name?.toString() || 'home'
+        activeKey.value = route.path?.toString() || '/home'
     },
     { immediate: true }
 )
 </script>
+
+<style lang="less" scoped>
+.el-menu {
+    --el-menu-bg-color: transparent;
+    --el-menu-item-font-size: 16px;
+}
+</style>

src/components/common/ConnectForm.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <el-form :model="formVal" ref="form" :rules="rules" label-width="0px" :inline="false" size="large">
+            <el-form-item label="" prop="phone">
+                <el-input v-model="formVal.phone" maxlength="11" placeholder="请输入手机号（必填"></el-input>
+            </el-form-item>
+            <el-form-item label="" prop="industry">
+                <el-select v-model="formVal.industry" class="w-full" placeholder="请选择所属行业">
+                    <el-option v-for="(item, index) in industries" :key="index" :label="item" :value="item" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button
+                    class="!border-none w-full !h-12 !rounded-lg tracking-[0.08em] !text-sm !text-white mb-4 mt-2 hover:opacity-80 !bg-[#303133]"
+                    type="primary"
+                    @click="onSubmit"
+                    >预约回电</el-button
+                >
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const formVal = reactive({
+    phone: '',
+    industry: ''
+})
+
+const rules = {
+    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+    industry: [{ required: true, message: '请选择所属行业', trigger: 'change' }]
+}
+
+const industries = [
+    '科技产业',
+    '互联网',
+    '软件开发',
+    '教育',
+    '金融保险',
+    '医疗',
+    '建筑房产',
+    '电商',
+    '自媒体',
+    '广告传媒',
+    '咨询',
+    '商务服务',
+    '生活服务',
+    '汽车',
+    '文体娱乐',
+    '营销',
+    '交通物流',
+    '餐饮业',
+    '旅游',
+    '政务',
+    '消费品',
+    '工业制造',
+    '其他'
+]
+
+function onSubmit() {}
+</script>
+
+<style lang="less" scoped></style>

src/components/common/index.ts

@@ -1,4 +1,5 @@
 import NaiveProvider from './NaiveProvider.vue'
 import AppHeader from './AppHeader.vue'
+import ConnectForm from './ConnectForm.vue'
 
-export { NaiveProvider,AppHeader }
+export { NaiveProvider, AppHeader, ConnectForm }

src/hooks/useRolling.ts

@@ -4,15 +4,12 @@ enum Direction {
     Right = 2
 }
 
-function rolling(rollingList: Array<String> = []) {}
-
-export function useRolling(rollingList: Array<String> = []) {
+export function useRolling(list: Array<String> = []) {
     const nowActive = ref(0)
     const nowIndex = ref(0)
     const nowDirection = ref(Direction.Left)
-
     const rollingText = ref('')
-
+    let rollingList: Array<String>=[];
     const rolling = () => {
         if (rollingList.length > 0) {
             if (rollingList[nowActive.value].length >= nowIndex.value && nowDirection.value === Direction.Left) {
@@ -50,12 +47,16 @@ export function useRolling(rollingList: Array<String> = []) {
     }
 
     const timer: any = ref(null)
-    onMounted(() => {
+
+    function startRolling(list: Array<String> = []) {
+        rollingList = list
+        console.log(rollingList)
         rolling()
-    })
+    }
 
     return {
-        rollingText
+        rollingText,
+        startRolling
     }
 }
 

src/router/index.ts

@@ -3,26 +3,37 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 
 export const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
-    }
-  ]
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            redirect: 'home'
+        },
+        {
+            path: '/home',
+            name: 'home',
+            component: HomeView
+        },
+        {
+            path: '/about',
+            name: 'about',
+            // route level code-splitting
+            // this generates a separate chunk (About.[hash].js) for this route
+            // which is lazy-loaded when the route is visited.
+            component: () => import('../views/AboutView.vue')
+        },
+        {
+            path: '/case',
+            name: 'case',
+            // route level code-splitting
+            // this generates a separate chunk (About.[hash].js) for this route
+            // which is lazy-loaded when the route is visited.
+            component: () => import('../views/CaseView.vue')
+        }
+    ]
 })
 
-
 export async function setupRouter(app: App) {
-  app.use(router)
-  await router.isReady()
-}
+    app.use(router)
+    await router.isReady()
+}

src/store/modules/auth/index.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { getToken, removeToken, setToken, changeLoalName } from './helper'
-import { fetchSession, fetchPhoneLogin } from '@/api'
+// import { fetchSession, fetchPhoneLogin } from '@/api'
 import { Response } from '@/utils/request'
 
 interface SessionResponse {
@@ -27,13 +27,13 @@ export const useAuthStore = defineStore('auth-store', {
 
     actions: {
         async getSession() {
-            try {
-                const { data } = await fetchSession<Response<SessionResponse>>()
-                this.session = { ...data }
-                return Promise.resolve(data)
-            } catch (error) {
-                return Promise.reject(error)
-            }
+            // try {
+            //     const { data } = await fetchSession<Response<SessionResponse>>()
+            //     this.session = { ...data }
+            //     return Promise.resolve(data)
+            // } catch (error) {
+            //     return Promise.reject(error)
+            // }
         },
 
         setToken(token: string) {
@@ -46,10 +46,10 @@ export const useAuthStore = defineStore('auth-store', {
             removeToken()
         },
 
-        async phoneLogin(phone: string | number, code: string | number, invitor?: string | number) {
-            const data = await fetchPhoneLogin<any>(phone, code, invitor)
+        // async phoneLogin(phone: string | number, code: string | number, invitor?: string | number) {
+        //     const data = await fetchPhoneLogin<any>(phone, code, invitor)
 
-            this.setToken(data.access_token)
-        }
+        //     this.setToken(data.access_token)
+        // }
     }
 })

src/store/modules/settings/helper.ts

@@ -1,18 +1,16 @@
 import { ss } from '@/utils/storage'
-import { fetchSystemMessage } from '@/api'
+// import { fetchSystemMessage } from '@/api'
 
 const LOCAL_NAME = 'settingsStorage'
-let defalutSystem = ''
+// let defalutSystem = ''
 
 export interface SettingsState {
-    systemMessage: string
     temperature: number
     top_p: number
 }
 
 export function defaultSetting(): SettingsState {
     return {
-        systemMessage: defalutSystem,
         temperature: 0.8,
         top_p: 1
     }
@@ -32,7 +30,7 @@ export function removeLocalState() {
 }
 
 export function getSystem() {
-    fetchSystemMessage().then((res: any) => {
-        defalutSystem = res.value
-    })
+    // fetchSystemMessage().then((res: any) => {
+    //     defalutSystem = res.value
+    // })
 }

src/styles/global.less

@@ -46,3 +46,3169 @@ body {
 .text-color-3 {
     color: var(--text-color-3);
 }
+html {
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    margin: 0;
+}
+
+main {
+    display: block;
+}
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+}
+
+pre {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+a {
+    background-color: transparent;
+}
+
+abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    -webkit-text-decoration: underline dotted currentColor;
+    text-decoration: underline dotted currentColor;
+}
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+small {
+    font-size: 80%;
+}
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+img {
+    border-style: none;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+}
+
+button,
+input {
+    overflow: visible;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+    -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal;
+}
+
+progress {
+    vertical-align: baseline;
+}
+
+textarea {
+    overflow: auto;
+}
+
+[type='checkbox'],
+[type='radio'] {
+    box-sizing: border-box;
+    padding: 0;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+    height: auto;
+}
+
+[type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+
+[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+details {
+    display: block;
+}
+
+summary {
+    display: list-item;
+}
+
+template {
+    display: none;
+}
+
+[hidden] {
+    display: none;
+}
+
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+address,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+hr,
+form,
+fieldset,
+legend,
+label,
+input,
+button,
+textarea,
+select,
+optgroup,
+option,
+table,
+caption,
+tfoot,
+thead,
+tbody,
+tr,
+th,
+td,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+nav,
+section,
+summary,
+menu {
+    margin: 0;
+    padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+}
+
+ul,
+ol,
+menu {
+    list-style: none outside;
+}
+
+label[for] {
+    cursor: pointer;
+}
+
+blockquote,
+q,
+address,
+abbr,
+dfn,
+cite {
+    font-style: inherit;
+    font-weight: inherit;
+}
+
+embed,
+object,
+iframe,
+img,
+audio,
+video,
+canvas,
+progress {
+    display: block;
+    margin: 0;
+    padding: 0;
+}
+
+hr {
+    display: block;
+    border: 0 none;
+    border-top: 1px solid;
+    background-color: transparent;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
+    line-height: inherit;
+}
+
+.el-notification {
+    z-index: 9999 !important;
+}
+
+.el-date-editor .el-range-separator {
+    width: 10%;
+}
+
+.el-col .el-button {
+    width: 100%;
+}
+
+.el-button + .el-button {
+    margin-left: 0 !important;
+}
+
+.el-message-box__btns .el-button + .el-button {
+    margin-left: 12px !important;
+}
+
+.chato-tab .el-tabs__item {
+    color: #596780;
+    font-weight: 400;
+}
+
+.chato-tab .el-tabs__item.is-active {
+    color: #303133;
+    font-weight: 500;
+}
+
+.chato-tab .el-tabs__item:hover {
+    color: #303133;
+}
+
+.chato-tab .el-tabs__nav-wrap:after {
+    background-color: transparent;
+}
+
+.chato-tab .el-tabs__active-bar {
+    background-color: #303133;
+}
+
+.el-dialog__footer .el-button + .el-button {
+    margin-left: 12px !important;
+}
+
+* {
+    box-sizing: inherit;
+}
+
+pre {
+    margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+h7 {
+    margin: 0;
+}
+
+html,
+body {
+    height: 100%;
+    overflow-y: auto;
+}
+
+*:focus {
+    outline: none;
+}
+
+*.focus-visible {
+    outline: none;
+}
+
+*:focus-visible {
+    outline: none;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    width: 6px;
+    background: transparent;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #f2f3f5;
+    background-clip: padding-box;
+    min-height: 28px;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #cecece;
+}
+
+a {
+    text-decoration: none;
+}
+
+body {
+    font:
+        16px/1 Source Han Sans CN,
+        Helvetica Neue,
+        Arial,
+        sans-serif;
+    color: var(--el-text-color-primary);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.cm-link {
+    color: #7c5cfc;
+    text-decoration: none;
+}
+
+.cm-link:hover {
+    text-decoration: underline;
+}
+
+.cm-link-preview {
+    color: var(--el-table-text-color);
+}
+
+.description {
+    font-size: 12px;
+    line-height: 1.25;
+    color: #9da3af;
+}
+
+.error {
+    color: #f56c6c !important;
+}
+
+.form-item-extra {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-flow: row-reverse;
+    margin-top: 12px;
+    width: 100%;
+    line-height: 1.25;
+    color: #9da3af;
+    font-size: 12px;
+}
+
+.form-item-extra .char-count {
+    margin-left: 1.5em;
+    white-space: nowrap;
+}
+
+.form-item-extra .char-count.error {
+    color: #f56c6c;
+}
+
+.form-item-extra .description {
+    font-size: 12px;
+}
+
+.theme-color {
+    color: #7c5cfc;
+    text-decoration: none;
+}
+
+.theme-color.active {
+    font-weight: 700;
+}
+
+.dialog-box-container .el-dialog__body {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+.default-avatar {
+    position: relative;
+    cursor: pointer;
+}
+
+.default-avatar:hover:after {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-block;
+    content: '替换';
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+    text-align: center;
+    z-index: 999;
+    color: #fff;
+    border-radius: 100%;
+    background-color: #00000080;
+}
+
+.custom-select {
+    --el-border-color: transparent;
+    --el-border-color-hover: transparent;
+    --el-select-disabled-border: transparent;
+    --el-select-input-focus-border-color: transparent;
+}
+
+.custom-select .el-select__caret {
+    border-color: transparent;
+}
+
+.custom-select .el-input__inner {
+    color: #3d3d3d !important;
+}
+
+.custom-select .el-input {
+    border: none;
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.custom-select .el-input.is-focus .el-input__wrapper {
+    box-shadow: none !important;
+}
+
+.work-break {
+    word-break: break-word;
+}
+
+#app {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.page-body-container {
+    height: 100%;
+    overflow-y: auto;
+}
+
+.page-center-container {
+    width: 80%;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.page-content-container {
+    padding-bottom: 32px;
+    min-height: 100%;
+    height: auto;
+}
+
+.home-center-padding {
+    padding-left: 13%;
+    padding-right: 13%;
+}
+
+@media (max-width: 1023px) {
+    .home-center-padding {
+        padding-left: 5%;
+        padding-right: 5%;
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    .page-center-container {
+        width: 100%;
+        padding: 0 16px;
+    }
+
+    .page-content-container {
+        padding-bottom: 16px;
+    }
+}
+
+.common-span {
+    position: absolute;
+    padding: 0.5em 0.7em;
+    color: #d9d9e3;
+    font-size: 0.8em;
+    cursor: pointer;
+}
+
+.top-set-bg {
+    background-color: #343541;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    left: 0;
+}
+
+.hljs {
+    color: #adbac7 !important;
+}
+
+pre .token.operator {
+    background-color: transparent !important;
+}
+
+.copy-button {
+    right: 0;
+    top: 0;
+}
+
+.language {
+    display: none;
+    bottom: 0;
+    right: 0;
+}
+
+.markdown-body pre {
+    background-color: #272822 !important;
+}
+
+.copy-btn-code .text {
+    position: fixed;
+    top: 10000px;
+    opacity: 0;
+    visibility: hidden;
+}
+
+pre {
+    position: relative;
+    overflow-x: auto;
+    background-color: #272822;
+    color: #abb2bf;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+pre code {
+    font-family:
+        Consolas,
+        Monaco,
+        Andale Mono,
+        Ubuntu Mono,
+        monospace;
+    font-size: 0.9em;
+}
+
+:root .markdown-body {
+    color: inherit;
+    white-space: normal;
+    background-color: transparent;
+}
+
+:root .markdown-body pre {
+    background-color: #272822 !important;
+}
+
+:root .markdown-body pre code {
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+}
+
+:root .markdown-body table {
+    width: auto;
+}
+
+:root .markdown-body img {
+    width: 90px;
+    height: 90px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    float: left;
+    border-radius: 4px;
+}
+
+:root .markdown-body li ul,
+:root .markdown-body li ol {
+    margin-top: 0.25em;
+}
+
+:root .markdown-body h1 {
+    font-size: 1.5em;
+}
+
+:root .markdown-body h2 {
+    font-size: 1.25em;
+}
+
+:root .markdown-body h3 {
+    font-size: 1.1em;
+}
+
+:root .markdown-body ol,
+:root .markdown-body ul {
+    list-style-type: revert;
+}
+
+:root .markdown-body hr {
+    height: 1px;
+    margin: 16px 0;
+    background-color: #d2d8e5;
+}
+
+.visible {
+    visibility: visible;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+.fixed {
+    position: fixed;
+}
+
+
+
+.absolute {
+    position: absolute;
+}
+
+.relative {
+    position: relative;
+}
+
+
+.select-all {
+    -webkit-user-select: all;
+    -moz-user-select: all;
+    user-select: all;
+}
+
+.resize {
+    resize: both;
+}
+
+.list-disc {
+    list-style-type: disc;
+}
+
+.grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license
+
+Copyright (c) 2013 Daniel Eden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+.animated {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+}
+.animated.hinge {
+    animation-duration: 2s;
+}
+@keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    to {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-30px);
+    }
+    60% {
+        transform: translateY(-15px);
+    }
+}
+.bounce {
+    animation-name: bounce;
+}
+@keyframes flash {
+    0%,
+    50%,
+    to {
+        opacity: 1;
+    }
+    25%,
+    75% {
+        opacity: 0;
+    }
+}
+.flash {
+    animation-name: flash;
+}
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+    to {
+        transform: scale(1);
+    }
+}
+.pulse {
+    animation-name: pulse;
+}
+@keyframes shake {
+    0%,
+    to {
+        transform: translate(0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: translate(-10px);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: translate(10px);
+    }
+}
+.shake {
+    animation-name: shake;
+}
+@keyframes swing {
+    20% {
+        transform: rotate(15deg);
+    }
+    40% {
+        transform: rotate(-10deg);
+    }
+    60% {
+        transform: rotate(5deg);
+    }
+    80% {
+        transform: rotate(-5deg);
+    }
+    to {
+        transform: rotate(0);
+    }
+}
+.swing {
+    transform-origin: top center;
+    animation-name: swing;
+}
+@keyframes tada {
+    0% {
+        transform: scale(1);
+    }
+    10%,
+    20% {
+        transform: scale(0.9) rotate(-3deg);
+    }
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: scale(1.1) rotate(3deg);
+    }
+    40%,
+    60%,
+    80% {
+        transform: scale(1.1) rotate(-3deg);
+    }
+    to {
+        transform: scale(1) rotate(0);
+    }
+}
+.tada {
+    animation-name: tada;
+}
+@keyframes wobble {
+    0% {
+        transform: translate(0);
+    }
+    15% {
+        transform: translate(-25%) rotate(-5deg);
+    }
+    30% {
+        transform: translate(20%) rotate(3deg);
+    }
+    45% {
+        transform: translate(-15%) rotate(-3deg);
+    }
+    60% {
+        transform: translate(10%) rotate(2deg);
+    }
+    75% {
+        transform: translate(-5%) rotate(-1deg);
+    }
+    to {
+        transform: translate(0);
+    }
+}
+.wobble {
+    animation-name: wobble;
+}
+@keyframes bounceIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.3);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.05);
+    }
+    70% {
+        transform: scale(0.9);
+    }
+    to {
+        transform: scale(1);
+    }
+}
+.bounceIn {
+    animation-name: bounceIn;
+}
+@keyframes bounceInDown {
+    0% {
+        opacity: 0;
+        transform: translateY(-2000px);
+    }
+    60% {
+        opacity: 1;
+        transform: translateY(30px);
+    }
+    80% {
+        transform: translateY(-10px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+.bounceInDown {
+    animation-name: bounceInDown;
+}
+@keyframes bounceInLeft {
+    0% {
+        opacity: 0;
+        transform: translate(-2000px);
+    }
+    60% {
+        opacity: 1;
+        transform: translate(30px);
+    }
+    80% {
+        transform: translate(-10px);
+    }
+    to {
+        transform: translate(0);
+    }
+}
+.bounceInLeft {
+    animation-name: bounceInLeft;
+}
+@keyframes bounceInRight {
+    0% {
+        opacity: 0;
+        transform: translate(2000px);
+    }
+    60% {
+        opacity: 1;
+        transform: translate(-30px);
+    }
+    80% {
+        transform: translate(10px);
+    }
+    to {
+        transform: translate(0);
+    }
+}
+.bounceInRight {
+    animation-name: bounceInRight;
+}
+@keyframes bounceInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(2000px);
+    }
+    60% {
+        opacity: 1;
+        transform: translateY(-30px);
+    }
+    80% {
+        transform: translateY(10px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+.bounceInUp {
+    animation-name: bounceInUp;
+}
+@keyframes bounceOut {
+    0% {
+        transform: scale(1);
+    }
+    25% {
+        transform: scale(0.95);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.3);
+    }
+}
+.bounceOut {
+    animation-name: bounceOut;
+}
+@keyframes bounceOutDown {
+    0% {
+        transform: translateY(0);
+    }
+    20% {
+        opacity: 1;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(2000px);
+    }
+}
+.bounceOutDown {
+    animation-name: bounceOutDown;
+}
+@keyframes bounceOutLeft {
+    0% {
+        transform: translate(0);
+    }
+    20% {
+        opacity: 1;
+        transform: translate(20px);
+    }
+    to {
+        opacity: 0;
+        transform: translate(-2000px);
+    }
+}
+.bounceOutLeft {
+    animation-name: bounceOutLeft;
+}
+@keyframes bounceOutRight {
+    0% {
+        transform: translate(0);
+    }
+    20% {
+        opacity: 1;
+        transform: translate(-20px);
+    }
+    to {
+        opacity: 0;
+        transform: translate(2000px);
+    }
+}
+.bounceOutRight {
+    animation-name: bounceOutRight;
+}
+@keyframes bounceOutUp {
+    0% {
+        transform: translateY(0);
+    }
+    20% {
+        opacity: 1;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-2000px);
+    }
+}
+.bounceOutUp {
+    animation-name: bounceOutUp;
+}
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+.fadeIn {
+    animation-name: fadeIn;
+}
+@keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.fadeInDown {
+    animation-name: fadeInDown;
+}
+@keyframes fadeInDownBig {
+    0% {
+        opacity: 0;
+        transform: translateY(-2000px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.fadeInDownBig {
+    animation-name: fadeInDownBig;
+}
+@keyframes fadeInLeft {
+    0% {
+        opacity: 0;
+        transform: translate(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translate(0);
+    }
+}
+.fadeInLeft {
+    animation-name: fadeInLeft;
+}
+@keyframes fadeInLeftBig {
+    0% {
+        opacity: 0;
+        transform: translate(-2000px);
+    }
+    to {
+        opacity: 1;
+        transform: translate(0);
+    }
+}
+.fadeInLeftBig {
+    animation-name: fadeInLeftBig;
+}
+@keyframes fadeInRight {
+    0% {
+        opacity: 0;
+        transform: translate(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translate(0);
+    }
+}
+.fadeInRight {
+    animation-name: fadeInRight;
+}
+@keyframes fadeInRightBig {
+    0% {
+        opacity: 0;
+        transform: translate(2000px);
+    }
+    to {
+        opacity: 1;
+        transform: translate(0);
+    }
+}
+.fadeInRightBig {
+    animation-name: fadeInRightBig;
+}
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.fadeInUp {
+    animation-name: fadeInUp;
+}
+@keyframes fadeInUpBig {
+    0% {
+        opacity: 0;
+        transform: translateY(2000px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.fadeInUpBig {
+    animation-name: fadeInUpBig;
+}
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+.fadeOut {
+    animation-name: fadeOut;
+}
+@keyframes fadeOutDown {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+}
+.fadeOutDown {
+    animation-name: fadeOutDown;
+}
+@keyframes fadeOutDownBig {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(2000px);
+    }
+}
+.fadeOutDownBig {
+    animation-name: fadeOutDownBig;
+}
+@keyframes fadeOutLeft {
+    0% {
+        opacity: 1;
+        transform: translate(0);
+    }
+    to {
+        opacity: 0;
+        transform: translate(-20px);
+    }
+}
+.fadeOutLeft {
+    animation-name: fadeOutLeft;
+}
+@keyframes fadeOutLeftBig {
+    0% {
+        opacity: 1;
+        transform: translate(0);
+    }
+    to {
+        opacity: 0;
+        transform: translate(-2000px);
+    }
+}
+.fadeOutLeftBig {
+    animation-name: fadeOutLeftBig;
+}
+@keyframes fadeOutRight {
+    0% {
+        opacity: 1;
+        transform: translate(0);
+    }
+    to {
+        opacity: 0;
+        transform: translate(20px);
+    }
+}
+.fadeOutRight {
+    animation-name: fadeOutRight;
+}
+@keyframes fadeOutRightBig {
+    0% {
+        opacity: 1;
+        transform: translate(0);
+    }
+    to {
+        opacity: 0;
+        transform: translate(2000px);
+    }
+}
+.fadeOutRightBig {
+    animation-name: fadeOutRightBig;
+}
+@keyframes fadeOutUp {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+}
+.fadeOutUp {
+    animation-name: fadeOutUp;
+}
+@keyframes fadeOutUpBig {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-2000px);
+    }
+}
+.fadeOutUpBig {
+    animation-name: fadeOutUpBig;
+}
+@keyframes flip {
+    0% {
+        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+        animation-timing-function: ease-out;
+    }
+    40% {
+        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+        animation-timing-function: ease-out;
+    }
+    50% {
+        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+        animation-timing-function: ease-in;
+    }
+    80% {
+        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
+        animation-timing-function: ease-in;
+    }
+    to {
+        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+        animation-timing-function: ease-in;
+    }
+}
+.animated.flip {
+    backface-visibility: visible;
+    animation-name: flip;
+}
+@keyframes flipInX {
+    0% {
+        transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+    40% {
+        transform: perspective(400px) rotateX(-10deg);
+    }
+    70% {
+        transform: perspective(400px) rotateX(10deg);
+    }
+    to {
+        transform: perspective(400px) rotateX(0);
+        opacity: 1;
+    }
+}
+.flipInX {
+    backface-visibility: visible !important;
+}
+.flipInX {
+    animation-name: flipInX;
+}
+@keyframes flipInY {
+    0% {
+        transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    40% {
+        transform: perspective(400px) rotateY(-10deg);
+    }
+    70% {
+        transform: perspective(400px) rotateY(10deg);
+    }
+    to {
+        transform: perspective(400px) rotateY(0);
+        opacity: 1;
+    }
+}
+.flipInY {
+    backface-visibility: visible !important;
+}
+.flipInY {
+    animation-name: flipInY;
+}
+@keyframes flipOutX {
+    0% {
+        transform: perspective(400px) rotateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+}
+.flipOutX {
+    backface-visibility: visible !important;
+}
+.flipOutX {
+    animation-name: flipOutX;
+}
+@keyframes flipOutY {
+    0% {
+        transform: perspective(400px) rotateY(0);
+        opacity: 1;
+    }
+    to {
+        transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+}
+.flipOutY {
+    backface-visibility: visible !important;
+}
+.flipOutY {
+    animation-name: flipOutY;
+}
+@keyframes lightSpeedIn {
+    0% {
+        transform: translate(100%) skew(-30deg);
+        opacity: 0;
+    }
+    60% {
+        transform: translate(-20%) skew(30deg);
+        opacity: 1;
+    }
+    80% {
+        transform: translate(0) skew(-15deg);
+        opacity: 1;
+    }
+    to {
+        transform: translate(0) skew(0);
+        opacity: 1;
+    }
+}
+.lightSpeedIn {
+    animation-name: lightSpeedIn;
+    animation-timing-function: ease-out;
+}
+@keyframes lightSpeedOut {
+    0% {
+        transform: translate(0) skew(0);
+        opacity: 1;
+    }
+    to {
+        transform: translate(100%) skew(-30deg);
+        opacity: 0;
+    }
+}
+.lightSpeedOut {
+    animation-name: lightSpeedOut;
+    animation-timing-function: ease-in;
+}
+@keyframes rotateIn {
+    0% {
+        transform-origin: center center;
+        transform: rotate(-200deg);
+        opacity: 0;
+    }
+    to {
+        transform-origin: center center;
+        transform: rotate(0);
+        opacity: 1;
+    }
+}
+.rotateIn {
+    animation-name: rotateIn;
+}
+@keyframes rotateInDownLeft {
+    0% {
+        transform-origin: left bottom;
+        transform: rotate(-90deg);
+        opacity: 0;
+    }
+    to {
+        transform-origin: left bottom;
+        transform: rotate(0);
+        opacity: 1;
+    }
+}
+.rotateInDownLeft {
+    animation-name: rotateInDownLeft;
+}
+@keyframes rotateInDownRight {
+    0% {
+        transform-origin: right bottom;
+        transform: rotate(90deg);
+        opacity: 0;
+    }
+    to {
+        transform-origin: right bottom;
+        transform: rotate(0);
+        opacity: 1;
+    }
+}
+.rotateInDownRight {
+    animation-name: rotateInDownRight;
+}
+@keyframes rotateInUpLeft {
+    0% {
+        transform-origin: left bottom;
+        transform: rotate(90deg);
+        opacity: 0;
+    }
+    to {
+        transform-origin: left bottom;
+        transform: rotate(0);
+        opacity: 1;
+    }
+}
+.rotateInUpLeft {
+    animation-name: rotateInUpLeft;
+}
+@keyframes rotateInUpRight {
+    0% {
+        transform-origin: right bottom;
+        transform: rotate(-90deg);
+        opacity: 0;
+    }
+    to {
+        transform-origin: right bottom;
+        transform: rotate(0);
+        opacity: 1;
+    }
+}
+.rotateInUpRight {
+    animation-name: rotateInUpRight;
+}
+@keyframes rotateOut {
+    0% {
+        transform-origin: center center;
+        transform: rotate(0);
+        opacity: 1;
+    }
+    to {
+        transform-origin: center center;
+        transform: rotate(200deg);
+        opacity: 0;
+    }
+}
+.rotateOut {
+    animation-name: rotateOut;
+}
+@keyframes rotateOutDownLeft {
+    0% {
+        transform-origin: left bottom;
+        transform: rotate(0);
+        opacity: 1;
+    }
+    to {
+        transform-origin: left bottom;
+        transform: rotate(90deg);
+        opacity: 0;
+    }
+}
+.rotateOutDownLeft {
+    animation-name: rotateOutDownLeft;
+}
+@keyframes rotateOutDownRight {
+    0% {
+        transform-origin: right bottom;
+        transform: rotate(0);
+        opacity: 1;
+    }
+    to {
+        transform-origin: right bottom;
+        transform: rotate(-90deg);
+        opacity: 0;
+    }
+}
+.rotateOutDownRight {
+    animation-name: rotateOutDownRight;
+}
+@keyframes rotateOutUpLeft {
+    0% {
+        transform-origin: left bottom;
+        transform: rotate(0);
+        opacity: 1;
+    }
+    to {
+        transform-origin: left bottom;
+        transform: rotate(-90deg);
+        opacity: 0;
+    }
+}
+.rotateOutUpLeft {
+    animation-name: rotateOutUpLeft;
+}
+@keyframes rotateOutUpRight {
+    0% {
+        transform-origin: right bottom;
+        transform: rotate(0);
+        opacity: 1;
+    }
+    to {
+        transform-origin: right bottom;
+        transform: rotate(90deg);
+        opacity: 0;
+    }
+}
+.rotateOutUpRight {
+    animation-name: rotateOutUpRight;
+}
+@keyframes slideInDown {
+    0% {
+        opacity: 0;
+        transform: translateY(-2000px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+.slideInDown {
+    animation-name: slideInDown;
+}
+@keyframes slideInLeft {
+    0% {
+        opacity: 0;
+        transform: translate(-2000px);
+    }
+    to {
+        transform: translate(0);
+    }
+}
+.slideInLeft {
+    animation-name: slideInLeft;
+}
+@keyframes slideInRight {
+    0% {
+        opacity: 0;
+        transform: translate(2000px);
+    }
+    to {
+        transform: translate(0);
+    }
+}
+.slideInRight {
+    animation-name: slideInRight;
+}
+@keyframes slideOutLeft {
+    0% {
+        transform: translate(0);
+    }
+    to {
+        opacity: 0;
+        transform: translate(-2000px);
+    }
+}
+.slideOutLeft {
+    animation-name: slideOutLeft;
+}
+@keyframes slideOutRight {
+    0% {
+        transform: translate(0);
+    }
+    to {
+        opacity: 0;
+        transform: translate(2000px);
+    }
+}
+.slideOutRight {
+    animation-name: slideOutRight;
+}
+@keyframes slideOutUp {
+    0% {
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-2000px);
+    }
+}
+.slideOutUp {
+    animation-name: slideOutUp;
+}
+@keyframes hinge {
+    0% {
+        transform: rotate(0);
+        transform-origin: top left;
+        animation-timing-function: ease-in-out;
+    }
+    20%,
+    60% {
+        transform: rotate(80deg);
+        transform-origin: top left;
+        animation-timing-function: ease-in-out;
+    }
+    40% {
+        transform: rotate(60deg);
+        transform-origin: top left;
+        animation-timing-function: ease-in-out;
+    }
+    80% {
+        transform: rotate(60deg) translateY(0);
+        opacity: 1;
+        transform-origin: top left;
+        animation-timing-function: ease-in-out;
+    }
+    to {
+        transform: translateY(700px);
+        opacity: 0;
+    }
+}
+.hinge {
+    animation-name: hinge;
+}
+@keyframes rollIn {
+    0% {
+        opacity: 0;
+        transform: translate(-100%) rotate(-120deg);
+    }
+    to {
+        opacity: 1;
+        transform: translate(0) rotate(0);
+    }
+}
+.rollIn {
+    animation-name: rollIn;
+}
+@keyframes rollOut {
+    0% {
+        opacity: 1;
+        transform: translate(0) rotate(0);
+    }
+    to {
+        opacity: 0;
+        transform: translate(100%) rotate(120deg);
+    }
+}
+.rollOut {
+    animation-name: rollOut;
+}
+.svg-icon[data-v-a1ce81af] {
+    width: 1em;
+    height: 1em;
+}
+:root {
+    --el-color-primary-rgb: 124, 92, 252;
+    --el-color-success-rgb: 103, 194, 58;
+    --el-color-warning-rgb: 230, 162, 60;
+    --el-color-danger-rgb: 245, 108, 108;
+    --el-color-error-rgb: 245, 108, 108;
+    --el-color-info-rgb: 144, 147, 153;
+    --el-font-size-extra-large: 20px;
+    --el-font-size-large: 18px;
+    --el-font-size-medium: 16px;
+    --el-font-size-base: 14px;
+    --el-font-size-small: 13px;
+    --el-font-size-extra-small: 12px;
+    --el-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
+        Arial, sans-serif;
+    --el-font-weight-primary: 500;
+    --el-font-line-height-primary: 24px;
+    --el-index-normal: 1;
+    --el-index-top: 1000;
+    --el-index-popper: 2000;
+    --el-border-radius-base: 4px;
+    --el-border-radius-small: 2px;
+    --el-border-radius-round: 20px;
+    --el-border-radius-circle: 100%;
+    --el-transition-duration: 0.3s;
+    --el-transition-duration-fast: 0.2s;
+    --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+    --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+    --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),
+        opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+    --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
+    --el-transition-border: border-color var(--el-transition-duration-fast)
+        var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast)
+        var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+    --el-component-size-large: 40px;
+    --el-component-size: 32px;
+    --el-component-size-small: 24px;
+    color-scheme: light;
+    --el-color-white: #ffffff;
+    --el-color-black: #000000;
+    --el-color-primary: #7c5cfc;
+    --el-color-primary-light-3: #a38dfd;
+    --el-color-primary-light-5: #beaefe;
+    --el-color-primary-light-7: #d8cefe;
+    --el-color-primary-light-8: #e5defe;
+    --el-color-primary-light-9: #f2efff;
+    --el-color-primary-dark-2: #634aca;
+    --el-color-success: #67c23a;
+    --el-color-success-light-3: #95d475;
+    --el-color-success-light-5: #b3e19d;
+    --el-color-success-light-7: #d1edc4;
+    --el-color-success-light-8: #e1f3d8;
+    --el-color-success-light-9: #f0f9eb;
+    --el-color-success-dark-2: #529b2e;
+    --el-color-warning: #e6a23c;
+    --el-color-warning-light-3: #eebe77;
+    --el-color-warning-light-5: #f3d19e;
+    --el-color-warning-light-7: #f8e3c5;
+    --el-color-warning-light-8: #faecd8;
+    --el-color-warning-light-9: #fdf6ec;
+    --el-color-warning-dark-2: #b88230;
+    --el-color-danger: #f56c6c;
+    --el-color-danger-light-3: #f89898;
+    --el-color-danger-light-5: #fab6b6;
+    --el-color-danger-light-7: #fcd3d3;
+    --el-color-danger-light-8: #fde2e2;
+    --el-color-danger-light-9: #fef0f0;
+    --el-color-danger-dark-2: #c45656;
+    --el-color-error: #f56c6c;
+    --el-color-error-light-3: #f89898;
+    --el-color-error-light-5: #fab6b6;
+    --el-color-error-light-7: #fcd3d3;
+    --el-color-error-light-8: #fde2e2;
+    --el-color-error-light-9: #fef0f0;
+    --el-color-error-dark-2: #c45656;
+    --el-color-info: #909399;
+    --el-color-info-light-3: #b1b3b8;
+    --el-color-info-light-5: #c8c9cc;
+    --el-color-info-light-7: #dedfe0;
+    --el-color-info-light-8: #e9e9eb;
+    --el-color-info-light-9: #f4f4f5;
+    --el-color-info-dark-2: #73767a;
+    --el-bg-color: #ffffff;
+    --el-bg-color-page: #f2f3f5;
+    --el-bg-color-overlay: #ffffff;
+    --el-text-color-primary: #303133;
+    --el-text-color-regular: #606266;
+    --el-text-color-secondary: #909399;
+    --el-text-color-placeholder: #a8abb2;
+    --el-text-color-disabled: #c0c4cc;
+    --el-border-color: #dcdfe6;
+    --el-border-color-light: #e4e7ed;
+    --el-border-color-lighter: #ebeef5;
+    --el-border-color-extra-light: #f2f6fc;
+    --el-border-color-dark: #d4d7de;
+    --el-border-color-darker: #cdd0d6;
+    --el-fill-color: #f0f2f5;
+    --el-fill-color-light: #f5f7fa;
+    --el-fill-color-lighter: #fafafa;
+    --el-fill-color-extra-light: #fafcff;
+    --el-fill-color-dark: #ebedf0;
+    --el-fill-color-darker: #e6e8eb;
+    --el-fill-color-blank: #ffffff;
+    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
+    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12),
+        0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+    --el-disabled-bg-color: var(--el-fill-color-light);
+    --el-disabled-text-color: var(--el-text-color-placeholder);
+    --el-disabled-border-color: var(--el-border-color-light);
+    --el-overlay-color: rgba(0, 0, 0, 0.8);
+    --el-overlay-color-light: rgba(0, 0, 0, 0.7);
+    --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+    --el-mask-color: rgba(255, 255, 255, 0.9);
+    --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+    --el-border-width: 1px;
+    --el-border-style: solid;
+    --el-border-color-hover: var(--el-text-color-disabled);
+    --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
+    --el-svg-monochrome-grey: var(--el-border-color);
+}
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+    transition: opacity 0.2s linear;
+    transition: var(--el-transition-fade-linear);
+}
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+    opacity: 0;
+}
+.el-fade-in-linear-enter-active,
+.el-fade-in-linear-leave-active {
+    transition: opacity 0.2s linear;
+    transition: var(--el-transition-fade-linear);
+}
+.el-fade-in-linear-enter-from,
+.el-fade-in-linear-leave-to {
+    opacity: 0;
+}
+.el-fade-in-enter-active,
+.el-fade-in-leave-active {
+    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+    transition: all var(--el-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
+}
+.el-fade-in-enter-from,
+.el-fade-in-leave-active {
+    opacity: 0;
+}
+.el-zoom-in-center-enter-active,
+.el-zoom-in-center-leave-active {
+    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+    transition: all var(--el-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
+}
+.el-zoom-in-center-enter-from,
+.el-zoom-in-center-leave-active {
+    opacity: 0;
+    transform: scaleX(0);
+}
+.el-zoom-in-top-enter-active,
+.el-zoom-in-top-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition:
+        transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+        opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+    transition: var(--el-transition-md-fade);
+    transform-origin: center top;
+}
+.el-zoom-in-top-enter-active[data-popper-placement^='top'],
+.el-zoom-in-top-leave-active[data-popper-placement^='top'] {
+    transform-origin: center bottom;
+}
+.el-zoom-in-top-enter-from,
+.el-zoom-in-top-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+.el-zoom-in-bottom-enter-active,
+.el-zoom-in-bottom-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition:
+        transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+        opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+    transition: var(--el-transition-md-fade);
+    transform-origin: center bottom;
+}
+.el-zoom-in-bottom-enter-from,
+.el-zoom-in-bottom-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+.el-zoom-in-left-enter-active,
+.el-zoom-in-left-leave-active {
+    opacity: 1;
+    transform: scale(1);
+    transition:
+        transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+        opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+    transition: var(--el-transition-md-fade);
+    transform-origin: top left;
+}
+.el-zoom-in-left-enter-from,
+.el-zoom-in-left-leave-active {
+    opacity: 0;
+    transform: scale(0.45);
+}
+.collapse-transition {
+    transition:
+        0.3s height ease-in-out,
+        0.3s padding-top ease-in-out,
+        0.3s padding-bottom ease-in-out;
+    transition:
+        var(--el-transition-duration) height ease-in-out,
+        var(--el-transition-duration) padding-top ease-in-out,
+        var(--el-transition-duration) padding-bottom ease-in-out;
+}
+.el-collapse-transition-leave-active,
+.el-collapse-transition-enter-active {
+    transition:
+        0.3s max-height ease-in-out,
+        0.3s padding-top ease-in-out,
+        0.3s padding-bottom ease-in-out;
+    transition:
+        var(--el-transition-duration) max-height ease-in-out,
+        var(--el-transition-duration) padding-top ease-in-out,
+        var(--el-transition-duration) padding-bottom ease-in-out;
+}
+.horizontal-collapse-transition {
+    transition:
+        0.3s width ease-in-out,
+        0.3s padding-left ease-in-out,
+        0.3s padding-right ease-in-out;
+    transition:
+        var(--el-transition-duration) width ease-in-out,
+        var(--el-transition-duration) padding-left ease-in-out,
+        var(--el-transition-duration) padding-right ease-in-out;
+}
+.el-list-enter-active,
+.el-list-leave-active {
+    transition: all 1s;
+}
+.el-list-enter-from,
+.el-list-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+}
+.el-list-leave-active {
+    position: absolute !important;
+}
+.el-opacity-transition {
+    transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+    transition: opacity var(--el-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
+}
+.el-icon-loading {
+    animation: rotating 2s linear infinite;
+}
+.el-icon--right {
+    margin-left: 5px;
+}
+.el-icon--left {
+    margin-right: 5px;
+}
+@keyframes rotating {
+    0% {
+        transform: rotate(0);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+.el-icon {
+    --color: inherit;
+    height: 1em;
+    width: 1em;
+    line-height: 1em;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    fill: currentColor;
+    color: var(--color);
+    font-size: inherit;
+}
+.el-icon.is-loading {
+    animation: rotating 2s linear infinite;
+}
+.el-icon svg {
+    height: 1em;
+    width: 1em;
+}
+.el-notification {
+    --el-notification-width: 330px;
+    --el-notification-padding: 14px 26px 14px 13px;
+    --el-notification-radius: 8px;
+    --el-notification-shadow: var(--el-box-shadow-light);
+    --el-notification-border-color: var(--el-border-color-lighter);
+    --el-notification-icon-size: 24px;
+    --el-notification-close-font-size: var(--el-message-close-size, 16px);
+    --el-notification-group-margin-left: 13px;
+    --el-notification-group-margin-right: 8px;
+    --el-notification-content-font-size: var(--el-font-size-base);
+    --el-notification-content-color: var(--el-text-color-regular);
+    --el-notification-title-font-size: 16px;
+    --el-notification-title-color: var(--el-text-color-primary);
+    --el-notification-close-color: var(--el-text-color-secondary);
+    --el-notification-close-hover-color: var(--el-text-color-regular);
+    display: flex;
+    width: var(--el-notification-width);
+    padding: var(--el-notification-padding);
+    border-radius: var(--el-notification-radius);
+    box-sizing: border-box;
+    border: 1px solid var(--el-notification-border-color);
+    position: fixed;
+    background-color: var(--el-bg-color-overlay);
+    box-shadow: var(--el-notification-shadow);
+    transition:
+        opacity var(--el-transition-duration),
+        transform var(--el-transition-duration),
+        left var(--el-transition-duration),
+        right var(--el-transition-duration),
+        top 0.4s,
+        bottom var(--el-transition-duration);
+    word-wrap: anywhere;
+    overflow: hidden;
+    z-index: 9999;
+}
+.el-notification.right {
+    right: 16px;
+}
+.el-notification.left {
+    left: 16px;
+}
+.el-notification__group {
+    margin-left: var(--el-notification-group-margin-left);
+    margin-right: var(--el-notification-group-margin-right);
+}
+.el-notification__title {
+    font-weight: 700;
+    font-size: var(--el-notification-title-font-size);
+    line-height: var(--el-notification-icon-size);
+    color: var(--el-notification-title-color);
+    margin: 0;
+}
+.el-notification__content {
+    font-size: var(--el-notification-content-font-size);
+    line-height: 24px;
+    margin: 6px 0 0;
+    color: var(--el-notification-content-color);
+    text-align: justify;
+}
+.el-notification__content p {
+    margin: 0;
+}
+.el-notification .el-notification__icon {
+    height: var(--el-notification-icon-size);
+    width: var(--el-notification-icon-size);
+    font-size: var(--el-notification-icon-size);
+}
+.el-notification .el-notification__closeBtn {
+    position: absolute;
+    top: 18px;
+    right: 15px;
+    cursor: pointer;
+    color: var(--el-notification-close-color);
+    font-size: var(--el-notification-close-font-size);
+}
+.el-notification .el-notification__closeBtn:hover {
+    color: var(--el-notification-close-hover-color);
+}
+.el-notification .el-notification--success {
+    --el-notification-icon-color: var(--el-color-success);
+    color: var(--el-notification-icon-color);
+}
+.el-notification .el-notification--info {
+    --el-notification-icon-color: var(--el-color-info);
+    color: var(--el-notification-icon-color);
+}
+.el-notification .el-notification--warning {
+    --el-notification-icon-color: var(--el-color-warning);
+    color: var(--el-notification-icon-color);
+}
+.el-notification .el-notification--error {
+    --el-notification-icon-color: var(--el-color-error);
+    color: var(--el-notification-icon-color);
+}
+.el-notification-fade-enter-from.right {
+    right: 0;
+    transform: translate(100%);
+}
+.el-notification-fade-enter-from.left {
+    left: 0;
+    transform: translate(-100%);
+}
+.el-notification-fade-leave-to {
+    opacity: 0;
+}
+.markdown-body {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    margin: 0;
+    color: #24292f;
+    background-color: #fff;
+    font-family:
+        -apple-system,
+        BlinkMacSystemFont,
+        Segoe UI,
+        Noto Sans,
+        Helvetica,
+        Arial,
+        sans-serif,
+        'Apple Color Emoji',
+        'Segoe UI Emoji';
+    font-size: 16px;
+    line-height: 1.5;
+    word-wrap: break-word;
+}
+.markdown-body .octicon {
+    display: inline-block;
+    fill: currentColor;
+    vertical-align: text-bottom;
+}
+.markdown-body h1:hover .anchor .octicon-link:before,
+.markdown-body h2:hover .anchor .octicon-link:before,
+.markdown-body h3:hover .anchor .octicon-link:before,
+.markdown-body h4:hover .anchor .octicon-link:before,
+.markdown-body h5:hover .anchor .octicon-link:before,
+.markdown-body h6:hover .anchor .octicon-link:before {
+    width: 16px;
+    height: 16px;
+    content: ' ';
+    display: inline-block;
+    background-color: currentColor;
+    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+}
+
+.markdown-body details,
+.markdown-body figcaption,
+.markdown-body figure {
+    display: block;
+}
+.markdown-body summary {
+    display: list-item;
+}
+.markdown-body [hidden] {
+    display: none !important;
+}
+.markdown-body a {
+    background-color: transparent;
+    color: #0969da;
+    text-decoration: none;
+}
+.markdown-body abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    -webkit-text-decoration: underline dotted currentColor;
+    text-decoration: underline dotted currentColor;
+}
+.markdown-body b,
+.markdown-body strong {
+    font-weight: 600;
+}
+.markdown-body dfn {
+    font-style: italic;
+}
+.markdown-body h1 {
+    margin: 0.67em 0;
+    font-weight: 600;
+    padding-bottom: 0.3em;
+    font-size: 2em;
+    border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+}
+.markdown-body mark {
+    background-color: #fff8c5;
+    color: #24292f;
+}
+.markdown-body small {
+    font-size: 90%;
+}
+.markdown-body sub,
+.markdown-body sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+.markdown-body sub {
+    bottom: -0.25em;
+}
+.markdown-body sup {
+    top: -0.5em;
+}
+.markdown-body img {
+    border-style: none;
+    max-width: 100%;
+    box-sizing: content-box;
+    background-color: #fff;
+}
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre,
+.markdown-body samp {
+    font-family: monospace;
+    font-size: 1em;
+}
+.markdown-body figure {
+    margin: 1em 40px;
+}
+.markdown-body hr {
+    box-sizing: content-box;
+    overflow: hidden;
+    background: transparent;
+    border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #d0d7de;
+    border: 0;
+}
+.markdown-body input {
+    font: inherit;
+    margin: 0;
+    overflow: visible;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+.markdown-body [type='button'],
+.markdown-body [type='reset'],
+.markdown-body [type='submit'] {
+    -webkit-appearance: button;
+}
+.markdown-body [type='checkbox'],
+.markdown-body [type='radio'] {
+    box-sizing: border-box;
+    padding: 0;
+}
+.markdown-body [type='number']::-webkit-inner-spin-button,
+.markdown-body [type='number']::-webkit-outer-spin-button {
+    height: auto;
+}
+.markdown-body [type='search']::-webkit-search-cancel-button,
+.markdown-body [type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+.markdown-body ::-webkit-input-placeholder {
+    color: inherit;
+    opacity: 0.54;
+}
+.markdown-body ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+.markdown-body a:hover {
+    text-decoration: underline;
+}
+.markdown-body ::-moz-placeholder {
+    color: #6e7781;
+    opacity: 1;
+}
+.markdown-body ::placeholder {
+    color: #6e7781;
+    opacity: 1;
+}
+.markdown-body hr:before {
+    display: table;
+    content: '';
+}
+.markdown-body hr:after {
+    display: table;
+    clear: both;
+    content: '';
+}
+.markdown-body table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    display: block;
+    width: -moz-max-content;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+}
+.markdown-body td,
+.markdown-body th {
+    padding: 0;
+}
+.markdown-body details summary {
+    cursor: pointer;
+}
+.markdown-body details:not([open]) > *:not(summary) {
+    display: none !important;
+}
+.markdown-body a:focus,
+.markdown-body [role='button']:focus,
+.markdown-body input[type='radio']:focus,
+.markdown-body input[type='checkbox']:focus {
+    outline: 2px solid #0969da;
+    outline-offset: -2px;
+    box-shadow: none;
+}
+.markdown-body a:focus:not(.focus-visible),
+.markdown-body [role='button']:focus:not(.focus-visible),
+.markdown-body input[type='radio']:focus:not(.focus-visible),
+.markdown-body input[type='checkbox']:focus:not(.focus-visible) {
+    outline: solid 1px transparent;
+}
+.markdown-body a:focus:not(:focus-visible),
+.markdown-body [role='button']:focus:not(:focus-visible),
+.markdown-body input[type='radio']:focus:not(:focus-visible),
+.markdown-body input[type='checkbox']:focus:not(:focus-visible) {
+    outline: solid 1px transparent;
+}
+.markdown-body a.focus-visible,
+.markdown-body [role='button'].focus-visible,
+.markdown-body input[type='radio'].focus-visible,
+.markdown-body input[type='checkbox'].focus-visible {
+    outline: 2px solid #0969da;
+    outline-offset: -2px;
+    box-shadow: none;
+}
+.markdown-body a:focus-visible,
+.markdown-body [role='button']:focus-visible,
+.markdown-body input[type='radio']:focus-visible,
+.markdown-body input[type='checkbox']:focus-visible {
+    outline: 2px solid #0969da;
+    outline-offset: -2px;
+    box-shadow: none;
+}
+.markdown-body a:not([class]):focus,
+.markdown-body a:not([class]).focus-visible,
+.markdown-body input[type='radio']:focus,
+.markdown-body input[type='radio'].focus-visible,
+.markdown-body input[type='checkbox']:focus,
+.markdown-body input[type='checkbox'].focus-visible {
+    outline-offset: 0;
+}
+.markdown-body a:not([class]):focus,
+.markdown-body a:not([class]):focus-visible,
+.markdown-body input[type='radio']:focus,
+.markdown-body input[type='radio']:focus-visible,
+.markdown-body input[type='checkbox']:focus,
+.markdown-body input[type='checkbox']:focus-visible {
+    outline-offset: 0;
+}
+.markdown-body kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font:
+        11px ui-monospace,
+        SFMono-Regular,
+        SF Mono,
+        Menlo,
+        Consolas,
+        Liberation Mono,
+        monospace;
+    line-height: 10px;
+    color: #24292f;
+    vertical-align: middle;
+    background-color: #f6f8fa;
+    border: solid 1px rgba(175, 184, 193, 0.2);
+    border-bottom-color: #afb8c133;
+    border-radius: 6px;
+    box-shadow: inset 0 -1px #afb8c133;
+}
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+}
+.markdown-body h2 {
+    font-weight: 600;
+    padding-bottom: 0.3em;
+    font-size: 1.5em;
+    border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+}
+.markdown-body h3 {
+    font-weight: 600;
+    font-size: 1.25em;
+}
+.markdown-body h4 {
+    font-weight: 600;
+    font-size: 1em;
+}
+.markdown-body h5 {
+    font-weight: 600;
+    font-size: 0.875em;
+}
+.markdown-body h6 {
+    font-weight: 600;
+    font-size: 0.85em;
+    color: #57606a;
+}
+.markdown-body p {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+.markdown-body blockquote {
+    margin: 0;
+    padding: 0 1em;
+    color: #57606a;
+    border-left: 0.25em solid #d0d7de;
+}
+.markdown-body ul,
+.markdown-body ol {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 2em;
+}
+.markdown-body ol ol,
+.markdown-body ul ol {
+    list-style-type: lower-roman;
+}
+.markdown-body ul ul ol,
+.markdown-body ul ol ol,
+.markdown-body ol ul ol,
+.markdown-body ol ol ol {
+    list-style-type: lower-alpha;
+}
+.markdown-body dd {
+    margin-left: 0;
+}
+.markdown-body tt,
+.markdown-body code,
+.markdown-body samp {
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        SF Mono,
+        Menlo,
+        Consolas,
+        Liberation Mono,
+        monospace;
+    font-size: 12px;
+}
+.markdown-body pre {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        SF Mono,
+        Menlo,
+        Consolas,
+        Liberation Mono,
+        monospace;
+    font-size: 12px;
+    word-wrap: normal;
+}
+.markdown-body .octicon {
+    overflow: visible !important;
+}
+.markdown-body .octicon {
+    display: inline-block;
+    vertical-align: text-bottom;
+    fill: currentColor;
+}
+.markdown-body input::-webkit-outer-spin-button,
+.markdown-body input::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+    appearance: none;
+}
+.markdown-body:before {
+    display: table;
+    content: '';
+}
+.markdown-body:after {
+    display: table;
+    clear: both;
+    content: '';
+}
+.markdown-body > *:first-child {
+    margin-top: 0 !important;
+}
+.markdown-body > *:last-child {
+    margin-bottom: 0 !important;
+}
+.markdown-body a:not([href]) {
+    color: inherit;
+    text-decoration: none;
+}
+.markdown-body .absent {
+    color: #cf222e;
+}
+.markdown-body .anchor {
+    float: left;
+    padding-right: 4px;
+    margin-left: -20px;
+    line-height: 1;
+}
+.markdown-body .anchor:focus {
+    outline: none;
+}
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre,
+.markdown-body details {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+.markdown-body blockquote > :first-child {
+    margin-top: 0;
+}
+.markdown-body blockquote > :last-child {
+    margin-bottom: 0;
+}
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+    color: #24292f;
+    vertical-align: middle;
+    visibility: hidden;
+}
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+    text-decoration: none;
+}
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+    visibility: visible;
+}
+.markdown-body h1 tt,
+.markdown-body h1 code,
+.markdown-body h2 tt,
+.markdown-body h2 code,
+.markdown-body h3 tt,
+.markdown-body h3 code,
+.markdown-body h4 tt,
+.markdown-body h4 code,
+.markdown-body h5 tt,
+.markdown-body h5 code,
+.markdown-body h6 tt,
+.markdown-body h6 code {
+    padding: 0 0.2em;
+    font-size: inherit;
+}
+.markdown-body summary h1,
+.markdown-body summary h2,
+.markdown-body summary h3,
+.markdown-body summary h4,
+.markdown-body summary h5,
+.markdown-body summary h6 {
+    display: inline-block;
+}
+.markdown-body summary h1 .anchor,
+.markdown-body summary h2 .anchor,
+.markdown-body summary h3 .anchor,
+.markdown-body summary h4 .anchor,
+.markdown-body summary h5 .anchor,
+.markdown-body summary h6 .anchor {
+    margin-left: -40px;
+}
+.markdown-body summary h1,
+.markdown-body summary h2 {
+    padding-bottom: 0;
+    border-bottom: 0;
+}
+.markdown-body ul.no-list,
+.markdown-body ol.no-list {
+    padding: 0;
+    list-style-type: none;
+}
+.markdown-body ol[type='a'] {
+    list-style-type: lower-alpha;
+}
+.markdown-body ol[type='A'] {
+    list-style-type: upper-alpha;
+}
+.markdown-body ol[type='i'] {
+    list-style-type: lower-roman;
+}
+.markdown-body ol[type='I'] {
+    list-style-type: upper-roman;
+}
+.markdown-body ol[type='1'] {
+    list-style-type: decimal;
+}
+.markdown-body div > ol:not([type]) {
+    list-style-type: decimal;
+}
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ol,
+.markdown-body ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+.markdown-body li > p {
+    margin-top: 16px;
+}
+.markdown-body li + li {
+    margin-top: 0.25em;
+}
+.markdown-body dl {
+    padding: 0;
+}
+.markdown-body dl dt {
+    padding: 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: 600;
+}
+.markdown-body dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+}
+.markdown-body table th {
+    font-weight: 600;
+}
+.markdown-body table th,
+.markdown-body table td {
+    padding: 6px 13px;
+    border: 1px solid #d0d7de;
+}
+.markdown-body table tr {
+    background-color: #fff;
+    border-top: 1px solid hsla(210, 18%, 87%, 1);
+}
+.markdown-body table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+}
+.markdown-body table img {
+    background-color: transparent;
+}
+.markdown-body img[align='right'] {
+    padding-left: 20px;
+}
+.markdown-body img[align='left'] {
+    padding-right: 20px;
+}
+.markdown-body .emoji {
+    max-width: none;
+    vertical-align: text-top;
+    background-color: transparent;
+}
+.markdown-body span.frame {
+    display: block;
+    overflow: hidden;
+}
+.markdown-body span.frame > span {
+    display: block;
+    float: left;
+    width: auto;
+    padding: 7px;
+    margin: 13px 0 0;
+    overflow: hidden;
+    border: 1px solid #d0d7de;
+}
+.markdown-body span.frame span img {
+    display: block;
+    float: left;
+}
+.markdown-body span.frame span span {
+    display: block;
+    padding: 5px 0 0;
+    clear: both;
+    color: #24292f;
+}
+.markdown-body span.align-center {
+    display: block;
+    overflow: hidden;
+    clear: both;
+}
+.markdown-body span.align-center > span {
+    display: block;
+    margin: 13px auto 0;
+    overflow: hidden;
+    text-align: center;
+}
+.markdown-body span.align-center span img {
+    margin: 0 auto;
+    text-align: center;
+}
+.markdown-body span.align-right {
+    display: block;
+    overflow: hidden;
+    clear: both;
+}
+.markdown-body span.align-right > span {
+    display: block;
+    margin: 13px 0 0;
+    overflow: hidden;
+    text-align: right;
+}
+.markdown-body span.align-right span img {
+    margin: 0;
+    text-align: right;
+}
+.markdown-body span.float-left {
+    display: block;
+    float: left;
+    margin-right: 13px;
+    overflow: hidden;
+}
+.markdown-body span.float-left span {
+    margin: 13px 0 0;
+}
+.markdown-body span.float-right {
+    display: block;
+    float: right;
+    margin-left: 13px;
+    overflow: hidden;
+}
+.markdown-body span.float-right > span {
+    display: block;
+    margin: 13px auto 0;
+    overflow: hidden;
+    text-align: right;
+}
+.markdown-body code,
+.markdown-body tt {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    white-space: break-spaces;
+    background-color: #afb8c133;
+    border-radius: 6px;
+}
+.markdown-body code br,
+.markdown-body tt br {
+    display: none;
+}
+.markdown-body del code {
+    text-decoration: inherit;
+}
+.markdown-body samp {
+    font-size: 85%;
+}
+.markdown-body pre code {
+    font-size: 100%;
+}
+.markdown-body pre > code {
+    padding: 0;
+    margin: 0;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+}
+.markdown-body .highlight {
+    margin-bottom: 16px;
+}
+.markdown-body .highlight pre {
+    margin-bottom: 0;
+    word-break: normal;
+}
+.markdown-body .highlight pre,
+.markdown-body pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #f6f8fa;
+    border-radius: 6px;
+}
+.markdown-body pre code,
+.markdown-body pre tt {
+    display: inline;
+    max-width: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+}
+.markdown-body .csv-data td,
+.markdown-body .csv-data th {
+    padding: 5px;
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 1;
+    text-align: left;
+    white-space: nowrap;
+}
+.markdown-body .csv-data .blob-num {
+    padding: 10px 8px 9px;
+    text-align: right;
+    background: #ffffff;
+    border: 0;
+}
+.markdown-body .csv-data tr {
+    border-top: 0;
+}
+.markdown-body .csv-data th {
+    font-weight: 600;
+    background: #f6f8fa;
+    border-top: 0;
+}
+.markdown-body [data-footnote-ref]:before {
+    content: '[';
+}
+.markdown-body [data-footnote-ref]:after {
+    content: ']';
+}
+.markdown-body .footnotes {
+    font-size: 12px;
+    color: #57606a;
+    border-top: 1px solid #d0d7de;
+}
+.markdown-body .footnotes ol {
+    padding-left: 16px;
+}
+.markdown-body .footnotes ol ul {
+    display: inline-block;
+    padding-left: 16px;
+    margin-top: 16px;
+}
+.markdown-body .footnotes li {
+    position: relative;
+}
+.markdown-body .footnotes li:target:before {
+    position: absolute;
+    inset: -8px -8px -8px -24px;
+    pointer-events: none;
+    content: '';
+    border: 2px solid #0969da;
+    border-radius: 6px;
+}
+.markdown-body .footnotes li:target {
+    color: #24292f;
+}
+.markdown-body .footnotes .data-footnote-backref g-emoji {
+    font-family: monospace;
+}
+.markdown-body .pl-c {
+    color: #6e7781;
+}
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+    color: #0550ae;
+}
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+    color: #8250df;
+}
+.markdown-body .pl-smi,
+.markdown-body .pl-s .pl-s1 {
+    color: #24292f;
+}
+.markdown-body .pl-ent {
+    color: #116329;
+}
+.markdown-body .pl-k {
+    color: #cf222e;
+}
+.markdown-body .pl-s,
+.markdown-body .pl-pds,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sre,
+.markdown-body .pl-sr .pl-sra {
+    color: #0a3069;
+}
+.markdown-body .pl-v,
+.markdown-body .pl-smw {
+    color: #953800;
+}
+.markdown-body .pl-bu {
+    color: #82071e;
+}
+.markdown-body .pl-ii {
+    color: #f6f8fa;
+    background-color: #82071e;
+}
+.markdown-body .pl-c2 {
+    color: #f6f8fa;
+    background-color: #cf222e;
+}
+.markdown-body .pl-sr .pl-cce {
+    font-weight: 700;
+    color: #116329;
+}
+.markdown-body .pl-ml {
+    color: #3b2300;
+}
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+    font-weight: 700;
+    color: #0550ae;
+}
+.markdown-body .pl-mi {
+    font-style: italic;
+    color: #24292f;
+}
+.markdown-body .pl-mb {
+    font-weight: 700;
+    color: #24292f;
+}
+.markdown-body .pl-md {
+    color: #82071e;
+    background-color: #ffebe9;
+}
+.markdown-body .pl-mi1 {
+    color: #116329;
+    background-color: #dafbe1;
+}
+.markdown-body .pl-mc {
+    color: #953800;
+    background-color: #ffd8b5;
+}
+.markdown-body .pl-mi2 {
+    color: #eaeef2;
+    background-color: #0550ae;
+}
+.markdown-body .pl-mdr {
+    font-weight: 700;
+    color: #8250df;
+}
+.markdown-body .pl-ba {
+    color: #57606a;
+}
+.markdown-body .pl-sg {
+    color: #8c959f;
+}
+.markdown-body .pl-corl {
+    text-decoration: underline;
+    color: #0a3069;
+}
+.markdown-body g-emoji {
+    font-style: normal !important;
+}
+.markdown-body g-emoji {
+    display: inline-block;
+    min-width: 1ch;
+    font-family:
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        Segoe UI Symbol;
+    font-size: 1em;
+    font-weight: 400;
+    line-height: 1;
+    vertical-align: -0.075em;
+}
+.markdown-body g-emoji img {
+    width: 1em;
+    height: 1em;
+}
+.markdown-body .task-list-item {
+    list-style-type: none;
+}
+.markdown-body .task-list-item label {
+    font-weight: 400;
+}
+.markdown-body .task-list-item.enabled label {
+    cursor: pointer;
+}
+.markdown-body .task-list-item + .task-list-item {
+    margin-top: 4px;
+}
+.markdown-body .task-list-item .handle {
+    display: none;
+}
+.markdown-body .task-list-item-checkbox {
+    margin: 0 0.2em 0.25em -1.4em;
+    vertical-align: middle;
+}
+[dir='rtl'] .markdown-body .contains-task-list .task-list-item-checkbox {
+    margin: 0 -1.6em 0.25em 0.2em;
+}
+.markdown-body .contains-task-list {
+    position: relative;
+}
+.markdown-body .contains-task-list:hover .task-list-item-convert-container,
+.markdown-body .contains-task-list[focus-within] .task-list-item-convert-container {
+    display: block;
+    width: auto;
+    height: 24px;
+    overflow: visible;
+    clip: auto;
+}
+.markdown-body .contains-task-list:hover .task-list-item-convert-container,
+.markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
+    display: block;
+    width: auto;
+    height: 24px;
+    overflow: visible;
+    clip: auto;
+}
+.markdown-body ::-webkit-calendar-picker-indicator {
+    filter: invert(50%);
+}
+.el-alert {
+    --el-alert-padding: 8px 16px;
+    --el-alert-border-radius-base: var(--el-border-radius-base);
+    --el-alert-title-font-size: 13px;
+    --el-alert-description-font-size: 12px;
+    --el-alert-close-font-size: 12px;
+    --el-alert-close-customed-font-size: 13px;
+    --el-alert-icon-size: 16px;
+    --el-alert-icon-large-size: 28px;
+    width: 100%;
+    padding: var(--el-alert-padding);
+    margin: 0;
+    box-sizing: border-box;
+    border-radius: var(--el-alert-border-radius-base);
+    position: relative;
+    background-color: var(--el-color-white);
+    overflow: hidden;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    transition: opacity var(--el-transition-duration-fast);
+}
+.el-alert.is-light .el-alert__close-btn {
+    color: var(--el-text-color-placeholder);
+}
+.el-alert.is-dark .el-alert__close-btn,
+.el-alert.is-dark .el-alert__description {
+    color: var(--el-color-white);
+}
+.el-alert.is-center {
+    justify-content: center;
+}
+.el-alert--success {
+    --el-alert-bg-color: var(--el-color-success-light-9);
+}
+.el-alert--success.is-light {
+    background-color: var(--el-alert-bg-color);
+    color: var(--el-color-success);
+}
+.el-alert--success.is-light .el-alert__description {
+    color: var(--el-color-success);
+}
+.el-alert--success.is-dark {
+    background-color: var(--el-color-success);
+    color: var(--el-color-white);
+}
+.el-alert--info {
+    --el-alert-bg-color: var(--el-color-info-light-9);
+}
+.el-alert--info.is-light {
+    background-color: var(--el-alert-bg-color);
+    color: var(--el-color-info);
+}
+.el-alert--info.is-light .el-alert__description {
+    color: var(--el-color-info);
+}
+.el-alert--info.is-dark {
+    background-color: var(--el-color-info);
+    color: var(--el-color-white);
+}
+.el-alert--warning {
+    --el-alert-bg-color: var(--el-color-warning-light-9);
+}
+.el-alert--warning.is-light {
+    background-color: var(--el-alert-bg-color);
+    color: var(--el-color-warning);
+}
+.el-alert--warning.is-light .el-alert__description {
+    color: var(--el-color-warning);
+}
+.el-alert--warning.is-dark {
+    background-color: var(--el-color-warning);
+    color: var(--el-color-white);
+}
+.el-alert--error {
+    --el-alert-bg-color: var(--el-color-error-light-9);
+}
+.el-alert--error.is-light {
+    background-color: var(--el-alert-bg-color);
+    color: var(--el-color-error);
+}
+.el-alert--error.is-light .el-alert__description {
+    color: var(--el-color-error);
+}
+.el-alert--error.is-dark {
+    background-color: var(--el-color-error);
+    color: var(--el-color-white);
+}
+.el-alert__content {
+    display: table-cell;
+    padding: 0 8px;
+}
+.el-alert .el-alert__icon {
+    font-size: var(--el-alert-icon-size);
+    width: var(--el-alert-icon-size);
+}
+.el-alert .el-alert__icon.is-big {
+    font-size: var(--el-alert-icon-large-size);
+    width: var(--el-alert-icon-large-size);
+}
+.el-alert__title {
+    font-size: var(--el-alert-title-font-size);
+    line-height: 18px;
+    vertical-align: text-top;
+}
+.el-alert__title.is-bold {
+    font-weight: 700;
+}
+.el-alert .el-alert__description {
+    font-size: var(--el-alert-description-font-size);
+    margin: 5px 0 0;
+}
+.el-alert .el-alert__close-btn {
+    font-size: var(--el-alert-close-font-size);
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 15px;
+    cursor: pointer;
+}
+.el-alert .el-alert__close-btn.is-customed {
+    font-style: normal;
+    font-size: var(--el-alert-close-customed-font-size);
+    top: 9px;
+}
+.el-alert-fade-enter-from,
+.el-alert-fade-leave-active {
+    opacity: 0;
+}

src/views/CaseView.vue

@@ -0,0 +1,225 @@
+<template>
+    <main class="home-center-padding">
+        <div
+            data-v-79baa1b1=""
+            class="pt-[210px] pb-[88px] px-[118px] relative text-[28px] leading-[50px] text-center lg:text-xl lg:px-4 lg:pt-32 lg:pb-16"
+        >
+            <h2 data-v-79baa1b1="" class="font-normal lg:px-2 lg:mb-4">各个行业、各种规模的公司都适合使用 Chato</h2>
+            <h2 data-v-79baa1b1="" class="font-normal lg:px-2">用 Chato，连接企业智慧，超越传统运营，实现 AI 赋能</h2>
+            <div data-v-79baa1b1="" class="flex gap-6 flex-wrap justify-center mt-16 lg:gap-3 lg:mt-10">
+                <div
+                    data-v-79baa1b1=""
+                    id="Chato_case_industry_1"
+                    data-sensors-click=""
+                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
+                    style="background: linear-gradient(148deg, rgb(5, 255, 142) -19%, rgb(82, 200, 255) 134%)"
+                >
+                    <img src="@/assets/case1.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
+                    <span data-v-79baa1b1="">教培</span>
+                </div>
+                <div
+                    data-v-79baa1b1=""
+                    id="Chato_case_industry_2"
+                    data-sensors-click=""
+                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
+                    style="background: linear-gradient(153deg, rgb(66, 120, 246) -38%, rgb(81, 200, 255) 111%)"
+                >
+                    <img src="@/assets/case2.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
+                    <span data-v-79baa1b1="">咨询</span>
+                </div>
+                <div
+                    data-v-79baa1b1=""
+                    id="Chato_case_industry_3"
+                    data-sensors-click=""
+                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
+                    style="background: linear-gradient(148deg, rgb(53, 107, 255) -185%, rgb(253, 131, 255) 134%)"
+                >
+                    <img src="@/assets/case3.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
+                    <span data-v-79baa1b1="">新媒体</span>
+                </div>
+                <div
+                    data-v-79baa1b1=""
+                    id="Chato_case_industry_4"
+                    data-sensors-click=""
+                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
+                    style="background: linear-gradient(144deg, rgb(255, 76, 114) -31%, rgb(255, 232, 115) 136%)"
+                >
+                    <img src="@/assets/case4.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
+                    <span data-v-79baa1b1="">门店</span>
+                </div>
+                <div
+                    data-v-79baa1b1=""
+                    id="Chato_case_industry_5"
+                    data-sensors-click=""
+                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
+                    style="background: linear-gradient(146deg, rgb(66, 120, 246) -51%, rgb(81, 243, 255) 104%)"
+                >
+                    <img src="@/assets/case5.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
+                    <span data-v-79baa1b1="">医疗</span>
+                </div>
+                <div
+                    data-v-79baa1b1=""
+                    id="Chato_case_industry_6"
+                    data-sensors-click=""
+                    class="case-type-card lg:!w-16 lg:!h-16 lg:!text-sm lg:!gap-1 lg:!rounded-xl"
+                    style="background: linear-gradient(146deg, rgb(13, 238, 167) -38%, rgb(90, 208, 255) 128%)"
+                >
+                    <img src="@/assets/case6.png" class="w-8 h-8 lg:w-5 lg:h-5" alt="" />
+                    <span data-v-79baa1b1="">房产</span>
+                </div>
+                <div
+                    data-v-79baa1b1=""
+                    data-sensors-click=""
+                    id="Chato_case_industry_7"
+                    class="case-type-card !text-sm !gap-1 lg:!w-16 lg:!h-16 lg:!text-xs lg:!rounded-xl"
+                    style="
+                        background: linear-gradient(
+                            144deg,
+                            rgb(53, 107, 255) -29%,
+                            rgb(53, 164, 255) -29%,
+                            rgb(233, 109, 255) 131%
+                        );
+                    "
+                >
+                    <span data-v-79baa1b1="">100+个方案</span><span data-v-79baa1b1="">行业方案</span>
+                </div>
+            </div>
+            <div
+                data-v-79baa1b1=""
+                class="absolute top-[147px] left-[248px] w-64 h-64 rounded-full gray-lg-bg lg:left-[40px] lg:top-[100px]"
+            ></div>
+            <div
+                data-v-79baa1b1=""
+                class="absolute top-[170px] left-[277px] w-5 h-5 rounded-full green-lg-bg lg:left-[70px] lg:top-[130px]"
+            ></div>
+            <div
+                data-v-79baa1b1=""
+                class="absolute top-[232px] right-[200px] w-3 h-3 rounded-full blue-lg-bg lg:right-[40px] lg:top-[190px]"
+            ></div>
+        </div>
+        <template v-for="(item, index) in cases" :key="index">
+            <div data-v-79baa1b1="" class="text-4xl font-medium text-center mb-10 lg:text-2xl">
+                行业案例：{{ item['type'] }}
+            </div>
+            <div
+                data-v-79baa1b1=""
+                class="w-full grid grid-cols-[1fr_2fr] rounded-[28px] overflow-hidden border border-solid border-[#E4E7ED] mb-24 lg:grid-cols-1 lg:mb-12"
+            >
+                <div
+                    data-v-79baa1b1=""
+                    class="bg-[#F4F8FF] px-6 py-9 text-[#596780] text-base leading-6 border-r border-[#E4E7ED]"
+                >
+                    <div data-v-79baa1b1="" class="flex gap-3 items-center mb-6">
+                        <img data-v-79baa1b1="" :src="item['logo']" class="w-16 h-16 rounded-full object-cover" />
+                        <div data-v-79baa1b1="" class="flex-1">
+                            <p data-v-79baa1b1="" class="text-[#3D3D3D] text-base font-medium leading-6">
+                                {{ item['name'] }}
+                            </p>
+                            <div data-v-79baa1b1="" class="flex gap-2 flex-wrap mt-3">
+                                <span
+                                    v-for="(tag, tagIndex) in item['tags']"
+                                    :key="tagIndex"
+                                    data-v-79baa1b1=""
+                                    class="px-2 py-1 text-[#596780] text-xs bg-white rounded"
+                                    >{{ tag }}</span
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!---->
+                    <div data-v-79baa1b1="" class="space-y-4">
+                        <p data-v-79baa1b1="">{{ item['desc'] }}</p>
+                    </div>
+                    <p
+                        data-v-79baa1b1=""
+                        class="text-xl text-[#303133] font-medium mt-10 mb-5 lg:mt-5 lg:mb-2 lg:text-base"
+                    >
+                        客户概况
+                    </p>
+                    <div data-v-79baa1b1="" class="space-y-4 lg:space-y-2">
+                        <p data-v-79baa1b1="" v-for="(info, infoIndex) in item['info']" :key="infoIndex">
+                            {{ (info as any)['name'] }}：{{ (info as any)['value'] }}
+                        </p>
+                    </div>
+                </div>
+                <div data-v-79baa1b1="" class="bg-white px-16 py-10 text-[#3D3D3D] text-sm leading-5 shrink-0 lg:px-6">
+                    <p data-v-79baa1b1="" class="text-lg font-medium leading-5 mb-6">需求和痛点</p>
+                    <ul data-v-79baa1b1="" class="list-disc space-y-4 pl-4 marker:text-[#B5BED0] mb-10">
+                        <li data-v-79baa1b1="" v-for="(need, needIndex) in item['needs']" :key="needIndex">
+                            {{ need }}
+                        </li>
+                    </ul>
+                    <p data-v-79baa1b1="" class="text-lg font-medium leading-5 mb-6 text-[#7C5CFC]">解决方案</p>
+                    <ul data-v-79baa1b1="" class="list-disc space-y-4 pl-4 marker:text-[#B5BED0]">
+                        <li
+                            data-v-79baa1b1=""
+                            v-for="(solution, solutionIndex) in item['solution']"
+                            :key="solutionIndex"
+                        >
+                            {{ solution }}
+                        </li>
+                    </ul>
+                    <button
+                        data-v-79baa1b1=""
+                        aria-disabled="false"
+                        type="button"
+                        class="el-button el-button--primary el-button--large is-link mt-12 !font-normal lg:mt-6"
+                        id="Chato_case_create_bot_click"
+                        data-sensors-case-bot-name="百姓网"
+                    >
+                        <!--v-if--><span class="">立即体验 ZoumaAI</span>
+                    </button>
+                </div>
+            </div>
+        </template>
+    </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { fetchCase } from '@/api'
+
+const cases = ref([])
+fetchCase().then((res: any) => {
+    cases.value = res.map((item: any) => {
+        return {
+            ...item,
+            tags: item.tags.split(','),
+            info: item.info.split('_;').map((_info: any) => {
+                let _infos = _info.split('_,')
+                return {
+                    name: _infos[0],
+                    value: _infos[1]
+                }
+            }),
+            needs: item.needs.split('_;'),
+            solution: item.solution.split('_;')
+        }
+    })
+
+    console.log(cases.value)
+})
+</script>
+
+<style lang="less" scoped>
+.case-type-card {
+    display: flex;
+    height: 6rem;
+    width: 6rem;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    border-radius: 20px;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1rem;
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.home-center-padding {
+    padding-left: 13%;
+    padding-right: 13%;
+}
+</style>