初始

fdd5d261 · liubinyu · fdd5d261 · fdd5d261 · fdd5d261 · fdd5d261
Commit fdd5d261 authored May 07, 2025 by liubinyu
76 changed files
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/index.html
+++ b/index.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "ai-astro",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.9.0",
+    "element-plus": "^2.9.9",
+    "pinia": "^3.0.2",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.3",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.3",
+    "vite": "^6.3.5"
+  }
+}
--- a/public/img/bg/1.png
+++ b/public/img/bg/1.png
--- a/public/img/bg/10.png
+++ b/public/img/bg/10.png
--- a/public/img/bg/11.png
+++ b/public/img/bg/11.png
--- a/public/img/bg/12.png
+++ b/public/img/bg/12.png
--- a/public/img/bg/13.png
+++ b/public/img/bg/13.png
--- a/public/img/bg/2.png
+++ b/public/img/bg/2.png
--- a/public/img/bg/3.png
+++ b/public/img/bg/3.png
--- a/public/img/bg/4.png
+++ b/public/img/bg/4.png
--- a/public/img/bg/5.png
+++ b/public/img/bg/5.png
--- a/public/img/bg/6.png
+++ b/public/img/bg/6.png
--- a/public/img/bg/7.png
+++ b/public/img/bg/7.png
--- a/public/img/bg/8.png
+++ b/public/img/bg/8.png
--- a/public/img/bg/9.png
+++ b/public/img/bg/9.png
--- a/public/img/lang.png
+++ b/public/img/lang.png
--- a/public/img/logo.png
+++ b/public/img/logo.png
--- a/public/img/xz/Aquarius.png
+++ b/public/img/xz/Aquarius.png
--- a/public/img/xz/Aquarius1.png
+++ b/public/img/xz/Aquarius1.png
--- a/public/img/xz/Aries.png
+++ b/public/img/xz/Aries.png
--- a/public/img/xz/Aries1.png
+++ b/public/img/xz/Aries1.png
--- a/public/img/xz/Cancer.png
+++ b/public/img/xz/Cancer.png
--- a/public/img/xz/Cancer1.png
+++ b/public/img/xz/Cancer1.png
--- a/public/img/xz/Capricornus.png
+++ b/public/img/xz/Capricornus.png
--- a/public/img/xz/Capricornus1.png
+++ b/public/img/xz/Capricornus1.png
--- a/public/img/xz/Gemini.png
+++ b/public/img/xz/Gemini.png
--- a/public/img/xz/Gemini1.png
+++ b/public/img/xz/Gemini1.png
--- a/public/img/xz/HLibra.png
+++ b/public/img/xz/HLibra.png
--- a/public/img/xz/HLibra1.png
+++ b/public/img/xz/HLibra1.png
--- a/public/img/xz/Leo.png
+++ b/public/img/xz/Leo.png
--- a/public/img/xz/Leo1.png
+++ b/public/img/xz/Leo1.png
--- a/public/img/xz/Pisces.png
+++ b/public/img/xz/Pisces.png
--- a/public/img/xz/Pisces1.png
+++ b/public/img/xz/Pisces1.png
--- a/public/img/xz/Sagittarius.png
+++ b/public/img/xz/Sagittarius.png
--- a/public/img/xz/Sagittarius1.png
+++ b/public/img/xz/Sagittarius1.png
--- a/public/img/xz/Scorpio.png
+++ b/public/img/xz/Scorpio.png
--- a/public/img/xz/Scorpio1.png
+++ b/public/img/xz/Scorpio1.png
--- a/public/img/xz/Taurus.png
+++ b/public/img/xz/Taurus.png
--- a/public/img/xz/Taurus1.png
+++ b/public/img/xz/Taurus1.png
--- a/public/img/xz/Virgo.png
+++ b/public/img/xz/Virgo.png
--- a/public/img/xz/Virgo1.png
+++ b/public/img/xz/Virgo1.png
--- a/src/App.vue
+++ b/src/App.vue
+<script setup>
+import { provide } from 'vue';
+import _const from './utils/const'
+provide('_const', _const)
+</script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped></style>
--- a/src/assets/font/Roboto/Roboto-Black-1.ttf
+++ b/src/assets/font/Roboto/Roboto-Black-1.ttf
--- a/src/assets/font/Roboto/Roboto-BlackItalic-2.ttf
+++ b/src/assets/font/Roboto/Roboto-BlackItalic-2.ttf
--- a/src/assets/font/Roboto/Roboto-Bold-3.ttf
+++ b/src/assets/font/Roboto/Roboto-Bold-3.ttf
--- a/src/assets/font/Roboto/Roboto-BoldCondensed.ttf
+++ b/src/assets/font/Roboto/Roboto-BoldCondensed.ttf
--- a/src/assets/font/Roboto/Roboto-BoldCondensedItalic.ttf
+++ b/src/assets/font/Roboto/Roboto-BoldCondensedItalic.ttf
--- a/src/assets/font/Roboto/Roboto-BoldItalic-6.ttf
+++ b/src/assets/font/Roboto/Roboto-BoldItalic-6.ttf
--- a/src/assets/font/Roboto/Roboto-Condensed.ttf
+++ b/src/assets/font/Roboto/Roboto-Condensed.ttf
--- a/src/assets/font/Roboto/Roboto-CondensedItalic.ttf
+++ b/src/assets/font/Roboto/Roboto-CondensedItalic.ttf
--- a/src/assets/font/Roboto/Roboto-Italic-9.ttf
+++ b/src/assets/font/Roboto/Roboto-Italic-9.ttf
--- a/src/assets/font/Roboto/Roboto-Light-10.ttf
+++ b/src/assets/font/Roboto/Roboto-Light-10.ttf
--- a/src/assets/font/Roboto/Roboto-LightItalic-11.ttf
+++ b/src/assets/font/Roboto/Roboto-LightItalic-11.ttf
--- a/src/assets/font/Roboto/Roboto-Medium-12.ttf
+++ b/src/assets/font/Roboto/Roboto-Medium-12.ttf
--- a/src/assets/font/Roboto/Roboto-MediumItalic-13.ttf
+++ b/src/assets/font/Roboto/Roboto-MediumItalic-13.ttf
--- a/src/assets/font/Roboto/Roboto-Regular-14.ttf
+++ b/src/assets/font/Roboto/Roboto-Regular-14.ttf
--- a/src/assets/font/Roboto/Roboto-Thin-15.ttf
+++ b/src/assets/font/Roboto/Roboto-Thin-15.ttf
--- a/src/assets/font/Roboto/Roboto-ThinItalic-16.ttf
+++ b/src/assets/font/Roboto/Roboto-ThinItalic-16.ttf
--- a/src/components/GHeader.vue
+++ b/src/components/GHeader.vue
+<script setup>
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+import { useI18n } from 'vue-i18n'
+const { locale } = useI18n()
+function changeLocale(val) {
+  if (locale.value === val) return
+  locale.value = val
+  localStorage.setItem('locale', val)
+}
+
+const active = ref()
+const navList = reactive([
+  { name: 'Home', route: 'Home' },
+  { name: 'ConstellationForecast', route: 'Forecast' },
+  // { name: 'AnalysisConstellationPersonality' },
+])
+function navClick(nav) {
+  if (nav.route) {
+    active.value = nav.route
+    if (nav.route && nav.route !== router.currentRoute.value.name) {
+      router.push({ name: nav.route })
+    }
+  }
+}
+navClick(navList.find(i => i.route === router.currentRoute.value.name))
+
+// function login() {
+//   router.push({ name: 'Login' })
+// }
+</script>
+
+<template>
+  <div class="gc-header">
+    <img class="logo" src="/img/logo.png" alt="">
+    <div class="nav-list">
+      <div v-for="nav in navList" class="btn" :class="{ active: active === nav.route }"
+        @click="navClick(nav, 1)">
+        {{ $t(nav.name) }}
+        <Transition>
+          <div v-show="active === nav.route" class="line"></div>
+        </Transition>
+      </div>
+    </div>
+    <div class="right g-flex-center">
+      <el-dropdown @command="changeLocale">
+        <img class="icon-lang" src="/img/lang.png" alt="">
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="en">English</el-dropdown-item>
+            <el-dropdown-item command="zh">简体中文</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <!-- <div class="login-btn g-flex-center" @click="login">{{ $t('Login') }}</div> -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gc-header {
+  padding: 0 7vw;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.gc-header .logo {
+  /* width: 12vw; */
+  width: 228px;
+  flex-shrink: 0;
+}
+
+.gc-header .nav-list {
+  flex: 1;
+  margin: 0 5vw;
+  display: flex;
+  align-items: center;
+  gap: 5vw;
+}
+
+.nav-list .btn {
+  padding: 16px 2px;
+  font-family: Roboto-Regular;
+  font-weight: 400;
+  font-size: 18px;
+  cursor: pointer;
+  position: relative;
+}
+
+.nav-list .btn:hover {
+  color: var(--theme-color);
+}
+
+.nav-list .btn.active {
+  font-family: Roboto-Bold;
+  color: var(--theme-color);
+}
+
+.nav-list .btn .line {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 50px;
+  height: 4px;
+  background-color: var(--theme-color);
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.gc-header .right {
+  flex-shrink: 0;
+}
+
+.right .icon-lang {
+  width: 28px;
+  height: 28px;
+  margin-right: 1.4vw;
+  cursor: pointer;
+}
+
+.right .login-btn {
+  width: 112px;
+  height: 42px;
+  background: rgba(9, 0, 74, 0.31);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #FFFFFF;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.right .login-btn:hover {
+  border-color: var(--theme-color);
+  color: var(--theme-color);
+}
+</style>
\ No newline at end of file
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
+{
+  "Login": "Login",
+  "Home": "Home",
+  "ConstellationForecast": "Constellation Forecast",
+  "AnalysisConstellationPersonality": "Analysis of Constellation Personality",
+  ":": ":",
+  "Your Personal Ai Astrologist": "Your Personal Ai Astrologist",
+  "Let AI decode": "Let AI decode your zodiac secrets and guide you on a journey of precise divination",
+  "Unlock Your Day": "Unlock Your Day : Horoscope",
+  "Daily": "Daily",
+  "Horoscope": "Horoscope",
+  "Let the": "Let the ",
+  "guide your day": " guide your day — explore today’s celestial revelations for your sign.",
+  "Aries": "Aries",
+  "Taurus": "Taurus",
+  "Gemini": "Gemini",
+  "Cancer": "Cancer",
+  "Leo": "Leo",
+  "Virgo": "Virgo",
+  "HLibra": "HLibra",
+  "Scorpio": "Scorpio",
+  "Sagittarius": "Sagittarius",
+  "Capricornus": "Capricornus",
+  "Aquarius": "Aquarius",
+  "Pisces": "Pisces",
+  "more": "more",
+  "Your Personalized Zodiac Reading": "Your Personalized Zodiac Reading",
+  "Create an exclusive horoscope": "Create an exclusive horoscope guide for you, embark on your journey to the stars, and make the future within reach!",
+  "Constellation identity intelligent recognition": "Constellation identity intelligent recognition",
+  "Automatically locate the user's": "Automatically locate the user's constellation. By calculating the birth date in milliseconds, the user's zodiac sign is automatically matched without the need for manual selection, improving the smoothness of the experience.",
+  "Multi dimensional fortune prediction": "Multi dimensional fortune prediction",
+  "Daily/weekly/monthly": "Daily/weekly/monthly fortune report. Based on astronomical data and user behavior analysis, generate personalized fortune interpretation, covering six dimensions including emotions, wealth, and health.",
+  "AI exclusive divination": "AI exclusive divination, online answers",
+  "AI real-time analysis": "AI real-time analysis of star orbit puzzles, quantum level divination algorithm enables multi-dimensional energy field sensing, fingertip touch instantly generates your exclusive destiny map",
+  "Get Application": "Get Application",
+  "Download the app": "Download the app now to unlock exclusive zodiac signs and gain insights into daily fortune guides!",
+  "App Store": "App Store",
+  "Android App Store": "Android App Store",
+  "Come and check out": "Come and check out today's constellation guide",
+  "Today's fortune keywords": "Today's fortune keywords",
+  "Lucky index": "Lucky index",
+  "Lucky numbers": "Lucky numbers",
+  "Lucky color": "Lucky color",
+  "Company Name": "Company Name",
+  "Company Value": "DigiFlow CO., LIMITED",
+  "Address": "Address",
+  "Address Value": "WORKSHOP 63, 3/F, BLOCK A ,EAST SUN INDUSTRIAL CENTRE NO.16 SHING YIP STREET , KWUN TONG",
+  "Phone": "Phone",
+  "Phone Value": "+852 62027412"
+}
\ No newline at end of file
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
+import { createI18n } from 'vue-i18n'
+import en from './en.json'
+import zh from './zh.json'
+
+const locale = localStorage.getItem('locale') || 'en'
+
+const i18n = createI18n({
+  legacy: false,
+  locale,
+  messages: {
+    en,
+    zh
+  }
+})
+
+export default i18n
\ No newline at end of file
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
+{
+  "Login": "登录",
+  "Home": "首页",
+  "ConstellationForecast": "星座预测",
+  "AnalysisConstellationPersonality": "星座性格解析",
+  ":": "：",
+  "Your Personal Ai Astrologist": "你的专属AI占星师",
+  "Let AI decode": "让AI为你揭开星座密码，开启精准占卜之旅。",
+  "Unlock Your Day": "解锁你的一天：星座运势",
+  "Daily": "每日",
+  "Horoscope": "星座运势",
+  "Let the": "让",
+  "guide your day": "指引你的一天 —— 为你的星座探索今天的星座启示。",
+  "Aries": "白羊座",
+  "Taurus": "金牛座",
+  "Gemini": "双子座",
+  "Cancer": "巨蟹座",
+  "Leo": "狮子座",
+  "Virgo": "处女座",
+  "HLibra": "天秤座",
+  "Scorpio": "天蝎座",
+  "Sagittarius": "射手座",
+  "Capricornus": "摩羯座",
+  "Aquarius": "水瓶座",
+  "Pisces": "双鱼座",
+  "more": "更多",
+  "Your Personalized Zodiac Reading": "您专属的星座测运",
+  "Create an exclusive horoscope": "为您打造专属星座指南，开启您的星际之旅，让未来触手可及！",
+  "Constellation identity intelligent recognition": "星座身份智能识别‌",
+  "Automatically locate the user's": "自动定位用户星座‌。通过出生日期毫秒级计算，自动匹配用户星座，无需手动选择，提升体验流畅度。",
+  "Multi dimensional fortune prediction": "多维度运势预测‌",
+  "Daily/weekly/monthly": "日/周/月运势报告‌‌。基于天文数据与用户行为分析，生成个性化运势解读，覆盖情感、财富、健康等 6 大维度。",
+  "AI exclusive divination": "AI专属占卜。在线解答",
+  "AI real-time analysis": "AI实时解析星轨谜题，量子级占卜算法开启多维能量场感应，指尖触碰即刻生成你的专属命运图谱",
+  "Get Application": "获取应用",
+  "Download the app": "立即下载APP，解锁专属星座运势，洞见每日运势指南！",
+  "App Store": "App Store",
+  "Android App Store": "Android App Store",
+  "Come and check out": "快来查看今日份的星座指南",
+  "Today's fortune keywords": "今日运势关键词",
+  "Lucky index": "幸运指数",
+  "Lucky numbers": "幸运数字",
+  "Lucky color": "幸运色",
+  "Company Name": "公司名称",
+  "Company Value": "畅流数码有限公司",
+  "Address": "地址",
+  "Address Value": "香港九龍觀塘成業街16號怡生工業中心A座3樓63室",
+  "Phone": "联系电话",
+  "Phone Value": "+852 62027412"
+}
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createPinia } from 'pinia'
+import router from './router'
+import i18n from './i18n'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './style.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.use(i18n)
+app.use(ElementPlus)
+app.mount('#app')
\ No newline at end of file
--- a/src/router/index.js
+++ b/src/router/index.js
+import { createRouter, createWebHistory } from 'vue-router'
+// import { useAppStore } from '@/store'
+
+const routes = [
+  // {
+  //   path: '/login',
+  //   name: 'Login',
+  //   component: () => import('@/views/login.vue'),
+  // },
+  {
+    path: '/',
+    name: 'Index',
+    component: () => import('@/views/index.vue'),
+    redirect: '/home',
+    children: [
+      {
+        path: '/home',
+        name: 'Home',
+        component: () => import('@/views/home.vue'),
+      },
+      {
+        path: '/forecast',
+        name: 'Forecast',
+        component: () => import('@/views/forecast.vue'),
+      }
+    ]
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/',
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+// const whiteList = ['Login'];
+router.beforeEach((to, from, next) => {
+  // if (!whiteList.includes(to.name) && !useAppStore().user?.id) {
+  //   return next({ name: 'Login' });
+  // }
+  next();
+})
+
+export default router
--- a/src/store/index.js
+++ b/src/store/index.js
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    // user: {},
+  }),
+})
\ No newline at end of file
--- a/src/style.css
+++ b/src/style.css
+:root {
+  color: #FFFFFF;
+  background-color: #0F0C29;
+  --theme-color: #FF8800;
+  --layout-header-height: 100px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.g-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@font-face {
+  font-family: Roboto-Regular;
+  src: url('@/assets/font/Roboto/Roboto-Regular-14.ttf');
+}
+
+@font-face {
+  font-family: Roboto-Bold;
+  src: url('@/assets/font/Roboto/Roboto-Bold-3.ttf');
+}
\ No newline at end of file
--- a/src/utils/const.js
+++ b/src/utils/const.js
+export default {
+  ConstellationList: [
+    { key: 'Aries' },
+    { key: 'Taurus' },
+    { key: 'Gemini' },
+    { key: 'Cancer' },
+    { key: 'Leo' },
+    { key: 'Virgo' },
+    { key: 'HLibra' },
+    { key: 'Scorpio' },
+    { key: 'Sagittarius' },
+    { key: 'Capricornus' },
+    { key: 'Aquarius' },
+    { key: 'Pisces' },
+  ]
+}
\ No newline at end of file
--- a/src/views/forecast.vue
+++ b/src/views/forecast.vue
+<script setup>
+</script>
+
+<template>
+  <div class="page">
+    Forecast
+  </div>
+</template>
+
+<style scoped>
+</style>
--- a/src/views/home.vue
+++ b/src/views/home.vue
+<script setup>
+import { inject } from 'vue';
+const _const = inject('_const')
+
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-bg">
+      <img src="/img/bg/1.png" alt="">
+      <img src="/img/bg/2.png" alt="">
+      <img src="/img/bg/3.png" alt="">
+      <img src="/img/bg/4.png" alt="">
+      <img src="/img/bg/5.png" alt="">
+      <img src="/img/bg/6.png" alt="">
+      <img src="/img/bg/7.png" alt="">
+      <img src="/img/bg/8.png" alt="">
+      <img src="/img/bg/9.png" alt="">
+      <img src="/img/bg/10.png" alt="">
+      <img src="/img/bg/11.png" alt="">
+      <img src="/img/bg/12.png" alt="">
+      <img src="/img/bg/13.png" alt="">
+    </div>
+    <div class="main">
+      <div class="position-center txt1 title1">{{ $t('Your Personal Ai Astrologist') }}</div>
+      <div class="position-center txt2 title2">{{ $t('Let AI decode') }}</div>
+      <div class="position-center txt1 title3">{{ $t('Unlock Your Day') }}</div>
+      <div class="position-center txt2 title4">
+        {{ $t('Let the') }}<span style="color: var(--theme-color);">Astro Fly</span>{{ $t('guide your day') }}
+      </div>
+      <div class="position-center constellation-list">
+        <div v-for="item in _const.ConstellationList" class="constellation">
+          <img :src="`/img/xz/${item.key}.png`" alt="">
+          {{ $t(item.key) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  height: 6000px;
+}
+
+.page .page-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 0;
+}
+
+.page .page-bg img {
+  width: 100%;
+  display: block;
+}
+
+.page .main {
+  position: relative;
+  z-index: 1;
+}
+
+.position-center {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.txt1 {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 2.604vw;
+  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.66);
+}
+
+.txt2 {
+  font-family: Roboto-Regular;
+  font-weight: 400;
+  font-size: 1.25vw;
+  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.66);
+}
+
+.main .title1 {
+  top: 27.5vw;
+}
+
+.main .title2 {
+  top: 33.073vw;
+}
+
+.main .title3 {
+  top: 65.833vw;
+}
+
+.main .title4 {
+  top: 71.042vw;
+}
+</style>
--- a/src/views/index.vue
+++ b/src/views/index.vue
+<script setup>
+import GHeader from '@/components/GHeader.vue'
+</script>
+
+<template>
+  <div class="layout">
+    <GHeader class="layout-header" />
+    <router-view />
+  </div>
+</template>
+
+<style scoped>
+.layout {
+  position: relative;
+}
+
+.layout-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  height: var(--layout-header-height);
+  background: linear-gradient(180deg, rgba(14, 0, 85, 0.71) 0%, rgba(4, 0, 106, 0) 100%);
+  z-index: 1;
+}
+</style>
\ No newline at end of file
--- a/src/views/login.vue
+++ b/src/views/login.vue
+<script setup>
+</script>
+
+<template>
+  <div class="page">
+    Login
+  </div>
+</template>
+
+<style scoped>
+</style>
--- a/vite.config.js
+++ b/vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: [
+      //配置别名
+      { find: '@', replacement: resolve(__dirname, './src') },
+    ],
+  },
+})
\ No newline at end of file