From 4f5a36621fa67b6f7dcffbed870eb42efcd8ed0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?mac=C2=B7ufutx?= Date: Thu, 12 Jun 2025 19:01:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=2020250612=20=E9=A6=96=E9=A1=B5=E3=80=81N?= =?UTF-8?q?avbar=E3=80=81Footer=E7=AD=89=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 4 + package.json | 2 + postcss.config.cjs | 2 +- src/App.vue | 38 +--- src/assets/images/logo.png | Bin 0 -> 5956 bytes src/main.ts | 14 ++ src/router/routes.ts | 75 +++++--- src/style.css | 4 +- src/views/Home/Home.vue | 31 +++ src/views/Home/sections/Banner.vue | 95 ++++++++++ src/views/Home/sections/CoreValue.vue | 50 +++++ src/views/Home/sections/CustomerFeedback.vue | 188 +++++++++++++++++++ src/views/Home/sections/GlobalService.vue | 50 +++++ src/views/Home/sections/Partners.vue | 124 ++++++++++++ src/views/Home/sections/UseCases.vue | 113 +++++++++++ vite.config.ts | 31 ++- 16 files changed, 753 insertions(+), 68 deletions(-) create mode 100644 src/assets/images/logo.png create mode 100644 src/views/Home/Home.vue create mode 100644 src/views/Home/sections/Banner.vue create mode 100644 src/views/Home/sections/CoreValue.vue create mode 100644 src/views/Home/sections/CustomerFeedback.vue create mode 100644 src/views/Home/sections/GlobalService.vue create mode 100644 src/views/Home/sections/Partners.vue create mode 100644 src/views/Home/sections/UseCases.vue diff --git a/components.d.ts b/components.d.ts index d5b6134..9ff4061 100644 --- a/components.d.ts +++ b/components.d.ts @@ -8,7 +8,11 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { + ElTabPane: typeof import('element-plus/es')['ElTabPane'] + ElTabs: typeof import('element-plus/es')['ElTabs'] + Footer: typeof import('./src/components/Footer.vue')['default'] HelloWorld: typeof import('./src/components/HelloWorld.vue')['default'] + Navbar: typeof import('./src/components/Navbar.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] Test: typeof import('./src/components/Test.vue')['default'] diff --git a/package.json b/package.json index 56a2f4f..9f8a9a5 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "dependencies": { "@vueuse/core": "^13.3.0", "axios": "^1.9.0", + "element-plus": "^2.10.1", "pinia": "^2.1.7", "postcss-px-to-viewport": "^1.1.1", "vue": "^3.5.13", @@ -52,6 +53,7 @@ "postcss": "^8.4.24", "postcss-px-to-viewport-8-plugin": "^1.2.5", "prettier": "^3.5.3", + "sass": "^1.89.2", "typescript": "5.1.6", "unplugin-auto-import": "^19.3.0", "unplugin-vue-components": "^28.7.0", diff --git a/postcss.config.cjs b/postcss.config.cjs index 6362885..303c5eb 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -32,7 +32,7 @@ module.exports = { plugins: { 'postcss-px-to-viewport-8-plugin': { unitToConvert: 'px', - viewportWidth: 750, + viewportWidth: 1920, unitPrecision: 5, viewportUnit: 'vw', fontViewportUnit: 'vw', diff --git a/src/App.vue b/src/App.vue index 4a48484..ad7ce98 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,42 +1,14 @@ - diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..4f1c98171ed96125208a7fe6bb1d657f18cbec5f GIT binary patch literal 5956 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 { // 安装 i18n 插件 ctx.app.use(i18n) + ctx.app.use(ElementPlus, { + locale: zhCn + }) // 路由守卫：设置页面标题 ctx.router.beforeEach((to, _from, next) => { diff --git a/src/router/routes.ts b/src/router/routes.ts index 8bc365c..852d83d 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -1,40 +1,53 @@ // src/router/routes.ts import type { RouteRecordRaw } from 'vue-router' // 添加type关键字 -import Home from '@/views/Home.vue' -import About from '@/views/About.vue' -import I18nDemo from '../views/I18nDemo.vue' - +import Home from '@/views/Home/Home.vue' +// import About from '@/views/About.vue' +// import I18nDemo from '../views/I18nDemo.vue' +import Layout from '@/layout/Layout.vue' const routes: RouteRecordRaw[] = [ - { - path: '/i18n-demo', - name: 'I18nDemo', - component: I18nDemo, - meta: { - title: '国际化演示' - } - }, { path: '/', - name: 'Home', - component: Home, - meta: { - title: '首页 - 极简官网' // 明确指定title为string类型 - } as { title: string } // 强制类型断言 - }, - { - path: '/about', - name: 'About', - component: About, - meta: { - title: '关于我们 - 极简官网' - } as { title: string } - }, - { - path: '/:pathMatch(.*)*', - name: 'NotFound', - component: () => import('@/views/NotFound.vue'), - meta: { title: '404 - 页面不存在' } as { title: string } + component: Layout, + children: [ + { path: '', name: 'Home', component: Home }, + { path: 'news', name: 'News', component: () => import('@/views/News.vue') }, + { path: 'network', name: 'Network', component: () => import('@/views/Network.vue') }, + { path: 'dating', name: 'Dating', component: () => import('@/views/Dating.vue') }, + { path: 'app', name: 'App', component: () => import('@/views/App.vue') }, + { path: 'ecosystem', name: 'Ecosystem', component: () => import('@/views/Ecosystem.vue') }, + { path: 'about', name: 'About', component: () => import('@/views/About.vue') } + ] } + // { + // path: '/i18n-demo', + // name: 'I18nDemo', + // component: I18nDemo, + // meta: { + // title: '国际化演示' + // } + // }, + // { + // path: '/', + // name: 'Home', + // component: Home, + // meta: { + // title: '首页 - 极简官网' // 明确指定title为string类型 + // } as { title: string } // 强制类型断言 + // }, + // { + // path: '/about', + // name: 'About', + // component: About, + // meta: { + // title: '关于我们 - 极简官网' + // } as { title: string } + // }, + // { + // path: '/:pathMatch(.*)*', + // name: 'NotFound', + // component: () => import('@/views/NotFound.vue'), + // meta: { title: '404 - 页面不存在' } as { title: string } + // } ] export default routes diff --git a/src/style.css b/src/style.css index 79ef228..8b122da 100644 --- a/src/style.css +++ b/src/style.css @@ -62,9 +62,9 @@ button:focus-visible { } #app { - max-width: 1280px; + /*max-width: 1280px;*/ margin: 0 auto; - padding: 2rem; + /*padding: 2rem;*/ text-align: center; } diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue new file mode 100644 index 0000000..bc32358 --- /dev/null +++ b/src/views/Home/Home.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/views/Home/sections/Banner.vue b/src/views/Home/sections/Banner.vue new file mode 100644 index 0000000..1f7bc3b --- /dev/null +++ b/src/views/Home/sections/Banner.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/src/views/Home/sections/CoreValue.vue b/src/views/Home/sections/CoreValue.vue new file mode 100644 index 0000000..da32bf3 --- /dev/null +++ b/src/views/Home/sections/CoreValue.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/views/Home/sections/CustomerFeedback.vue b/src/views/Home/sections/CustomerFeedback.vue new file mode 100644 index 0000000..ed332d5 --- /dev/null +++ b/src/views/Home/sections/CustomerFeedback.vue @@ -0,0 +1,188 @@ + + + + + diff --git a/src/views/Home/sections/GlobalService.vue b/src/views/Home/sections/GlobalService.vue new file mode 100644 index 0000000..0335937 --- /dev/null +++ b/src/views/Home/sections/GlobalService.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/views/Home/sections/Partners.vue b/src/views/Home/sections/Partners.vue new file mode 100644 index 0000000..9e54dd9 --- /dev/null +++ b/src/views/Home/sections/Partners.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/src/views/Home/sections/UseCases.vue b/src/views/Home/sections/UseCases.vue new file mode 100644 index 0000000..16e8629 --- /dev/null +++ b/src/views/Home/sections/UseCases.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/vite.config.ts b/vite.config.ts index 252c7ec..e706f19 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,20 +5,38 @@ import path from 'path' // 引入 path 模块 import viteImagemin from 'vite-plugin-imagemin' // 新插件 import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' +// 引入 ElementPlus 相关解析器 +import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import legacy from '@vitejs/plugin-legacy' export default defineConfig({ plugins: [ vue(), + legacy({ targets: ['ie >= 11'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'], modernPolyfills: true // 启用现代浏览器的 polyfill }), AutoImport({ - imports: ['vue', 'vue-router'] // 自动导入 Vue、Vue Router API + imports: ['vue', 'vue-router'], // 自动导入 Vue、Vue Router API + // 自动导入 Vue 相关函数，以及 ElementPlus 的相关函数等 + resolvers: [ + ElementPlusResolver({ + importStyle: 'sass', // 可选：按需导入样式 + directives: true, // 导入指令 + version: '2.3.6' // 版本号 + }) + ] }), Components({ + // 自动导入 ElementPlus 的组件 + resolvers: [ + ElementPlusResolver({ + importStyle: 'sass', + directives: true + }) + ], dirs: ['src/components'] // 自动扫描组件目录 }), viteImagemin({ @@ -42,6 +60,17 @@ export default defineConfig({ } } }, + css: { + preprocessorOptions: { + less: { + // 关键配置：自动注入 global.less + additionalData: `@import "@/styles/global.less";`, + + // 可选：如果需要自定义 Less 选项 + javascriptEnabled: true + } + } + }, resolve: { alias: { '@': path.resolve(__dirname, 'src') // 添加路径别名