diff --git a/.eslintrc.cjs b/.eslintrc.cjs index acb9a63..ee92741 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -28,7 +28,19 @@ module.exports = { 'vue/no-undef-components': [ 'error', { - ignorePatterns: ['router-link', 'router-view'] + ignorePatterns: [ + 'router-link', + 'router-view', + 'ElTabs', + 'ElTabPane', + 'ElButton', + 'ElPagination', + // 添加其他使用的 Element Plus 组件 + 'RouterLink', + 'RouterView' + ] + // 允许的组件前缀（Element Plus 组件以 El 开头） + // allowComponentPrefixes: ['El'] } ], // 针对非 Vue 文件禁用 Vue 规则 diff --git a/components.d.ts b/components.d.ts index 9ff4061..4bc87cd 100644 --- a/components.d.ts +++ b/components.d.ts @@ -8,6 +8,8 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { + ElButton: typeof import('element-plus/es')['ElButton'] + ElPagination: typeof import('element-plus/es')['ElPagination'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] Footer: typeof import('./src/components/Footer.vue')['default'] diff --git a/src/components/Footer.vue b/src/components/Footer.vue new file mode 100644 index 0000000..7488aed --- /dev/null +++ b/src/components/Footer.vue @@ -0,0 +1,175 @@ + + + + + diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue new file mode 100644 index 0000000..fd98578 --- /dev/null +++ b/src/components/Navbar.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue new file mode 100644 index 0000000..e8c403b --- /dev/null +++ b/src/layout/Layout.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/src/router/routes.ts b/src/router/routes.ts index 852d83d..6f6ed6a 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -1,6 +1,12 @@ // src/router/routes.ts import type { RouteRecordRaw } from 'vue-router' // 添加type关键字 import Home from '@/views/Home/Home.vue' +import News from '@/views/News/News.vue' +import Network from '@/views/Network/Network.vue' +import Dating from '@/views/Dating/Dating.vue' +import App from '@/views/App/App.vue' +import Ecosystem from '@/views/Ecosystem/Ecosystem.vue' +import About from '@/views/About/About.vue' // import About from '@/views/About.vue' // import I18nDemo from '../views/I18nDemo.vue' import Layout from '@/layout/Layout.vue' @@ -10,12 +16,12 @@ const routes: RouteRecordRaw[] = [ 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: 'news', name: 'News', component: News }, + { path: 'network', name: 'Network', component: Network }, + { path: 'dating', name: 'Dating', component: Dating }, + { path: 'app', name: 'App', component: App }, + { path: 'ecosystem', name: 'Ecosystem', component: Ecosystem }, + { path: 'about', name: 'About', component: About } ] } // { diff --git a/src/styles/global.less b/src/styles/global.less new file mode 100644 index 0000000..cef9d7c --- /dev/null +++ b/src/styles/global.less @@ -0,0 +1,263 @@ +// ==================== 1. 颜色变量 ==================== +@primary-color: #313fa8; // 主色调（蓝色） +@primary-light: #748EA6; // 主色浅色调 +@success-color: #67c23a; // 成功色（绿色） +@warning-color: #e6a23c; // 警告色（橙色） +@danger-color: #f56c6c; // 危险色（红色） +@info-color: #909399; // 信息色（灰色） + +@primary-dark: #1060FF; // 主色深色调（用于按钮激活态、边框） +@primary-light-2: #a3b3c6; // 主色超浅色调（用于背景渐变） + +// 辅助色（扩展功能模块色彩） +@secondary-purple: #7e57c2; // 紫色（用于功能标签、辅助按钮） +@secondary-cyan: #00acc1; // 青色（用于数据可视化、进度条） +@secondary-yellow: #ffb300; // 黄色（用于提示、警告轻量化场景） +@secondary-pink: #ec407a; // 粉红色（用于情感化功能、互动元素） + +// 中性色阶（扩展文本/背景层次） +@neutral-100: #f5f7fa; // 超浅灰（背景色） +@neutral-200: #e4e7ed; // 浅灰（边框、分隔线） +@neutral-300: #c0c4cc; // 中灰（次要文本、禁用状态） +@neutral-400: #909399; // 深灰（主要文本、非激活状态） +@neutral-900: #1e2328; // 近黑色（标题、强调文本） + +// 状态色（扩展交互状态） +@status-loading: #909399; // 加载中（骨架屏、加载指示器） +@status-disabled: #c0c4cc; // 禁用态（按钮、输入框） +@status-pending: #e6a23c; // 待处理（流程状态、任务标签） +@status-urgent: #ff4d4f; // 紧急（通知、告警标签） + +@text-color: #0E0E0E; // 主文本色 +@text-color-secondary: #66676C; // 次要文本色 +@text-color-light: #748EA6; // 浅色文本 +@bg-color: #fff; // 背景色 +@bg-color-light: #f5f7fa; // 浅背景色 +@border-color: #dcdfe6; // 边框色 + + +// ==================== 2. 字体定义 ==================== +@font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; +@font-size-xs: 12px; // 超小字体 +@font-size-sm: 14px; // 小字体 +@font-size-md: 16px; // 中等字体 +@font-size-lg: 18px; // 大字体 +@font-size-xl: 24px; // 超大字体 +@font-size-xxl: 32px; // 特大字体 + +@font-weight-normal: 400; +@font-weight-medium: 500; +@font-weight-bold: 700; + + +// ==================== 3. 间距变量 ==================== +@space-xs: 4px; // 超小间距 +@space-sm: 8px; // 小间距 +@space-md: 16px; // 中等间距 +@space-lg: 24px; // 大间距 +@space-xl: 32px; // 超大间距 +@space-xxl: 48px; // 特大间距 + +@border-radius-sm: 4px; // 小圆角 +@border-radius-md: 8px; // 中等圆角 +@border-radius-lg: 12px; // 大圆角 +@border-radius-full: 50%; // 圆形 + + +// ==================== 4. 容器宽度 ==================== +@container-width: 1200px; // 页面最大宽度 +@container-padding: 20px; // 容器内边距 + + +// ==================== 5. 重置样式 ==================== +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: @font-family; + font-size: @font-size-md; + line-height: 1.5; + color: @text-color; + background-color: @bg-color; +} + +a { + color: @primary-color; + text-decoration: none; + &:hover { + color: @primary-light; + //text-decoration: underline; + } +} + +ul, ol { + list-style: none; +} + +img { + max-width: 100%; + height: auto; + vertical-align: middle; + border: 0; +} + +h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: @font-weight-medium; + margin-bottom: @space-md; +} + + +// ==================== 6. 工具类 ==================== +// 清除浮动 +.clearfix() { + &::before, + &::after { + content: ""; + display: table; + } + &::after { + clear: both; + } +} +// global.less 或 App.vue 全局样式 +html, body { + margin: 0; + padding: 0; + // 明确设置基础字体大小，建议用相对单位（如 rem 适配） + //font-size: 14px; + font-family: "Microsoft YaHei", sans-serif; // 统一字体 +} +// Flex 布局 +.flex() { + display: flex; +} + +.flex-column() { + display: flex; + flex-direction: column; +} + +.flex-row() { + display: flex; + flex-direction: row; +} + +.flex-center() { + display: flex; + align-items: center; + justify-content: center; +} + +.flex-between() { + display: flex; + justify-content: space-between; + align-items: center; +} + +// 文本工具类 +.text-center { + text-align: center; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +// 间距工具类 +.mt(@value) { margin-top: @value; } +.mb(@value) { margin-bottom: @value; } +.ml(@value) { margin-left: @value; } +.mr(@value) { margin-right: @value; } +.mx(@value) { margin-left: @value; margin-right: @value; } +.my(@value) { margin-top: @value; margin-bottom: @value; } +.pa(@value) { padding: @value; } +.pt(@value) { padding-top: @value; } +.pb(@value) { padding-bottom: @value; } +.pl(@value) { padding-left: @value; } +.pr(@value) { padding-right: @value; } +.px(@value) { padding-left: @value; padding-right: @value; } +.py(@value) { padding-top: @value; padding-bottom: @value; } + +// 响应式工具类（示例，可根据需求扩展） +@mobile-breakpoint: 768px; +@tablet-breakpoint: 1024px; + +@media (max-width: @mobile-breakpoint) { + .mobile-hide { + display: none; + } +} + +@media (min-width: @tablet-breakpoint) { + .tablet-show { + display: block; + } +} +// ==================== 6. 工具类 扩展 ==================== +// Flex 布局补充 +.justify-start { justify-content: flex-start; } +.justify-end { justify-content: flex-end; } +.justify-around { justify-content: space-around; } + +// 垂直对齐 +.align-top { align-items: flex-start; } +.align-middle { align-items: center; } +.align-bottom { align-items: flex-end; } + +// 文本工具类 +.text-bold { font-weight: @font-weight-bold; } +.text-muted { color: @text-color-light; } + +// 响应式工具类 +@media (max-width: @mobile-breakpoint) { + .mobile-hide { display: none !important; } + .mobile-show { display: block !important; } +} +@media (min-width: @tablet-breakpoint) { + .desktop-only { display: block !important; } +} + +// ==================== 7. 阴影系统 ==================== +@shadow-base: 0 2px 8px rgba(0,0,0,0.03); +@shadow-hover: 0 4px 16px rgba(0,0,0,0.08); + +// 工具类 +.shadow { box-shadow: @shadow-base; } +.shadow-hover { + transition: all 0.3s ease; + &:hover { + box-shadow: @shadow-hover; + transform: translateY(-2px); + } +} + +// ==================== 8. 交互动效 ==================== +// 交互动效变量 +@transition: all 0.3s ease; // 基础过渡动画 +// 基础过渡 +.transition-base() { + transition: all 0.3s ease; +} + +// 卡片悬停效果 +.card-hover() { + .transition-base(); + &:hover { + box-shadow: @shadow-hover; + transform: translateY(-2px); + } +} \ No newline at end of file diff --git a/src/views/About.vue b/src/views/About.vue deleted file mode 100644 index 8080add..0000000 --- a/src/views/About.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - - - diff --git a/src/views/About/About.vue b/src/views/About/About.vue new file mode 100644 index 0000000..d2b119d --- /dev/null +++ b/src/views/About/About.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/views/About/sections/Banner.vue b/src/views/About/sections/Banner.vue new file mode 100644 index 0000000..c3f2352 --- /dev/null +++ b/src/views/About/sections/Banner.vue @@ -0,0 +1,153 @@ + + + + + diff --git a/src/views/App/App.vue b/src/views/App/App.vue new file mode 100644 index 0000000..d2b119d --- /dev/null +++ b/src/views/App/App.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/views/App/sections/Banner.vue b/src/views/App/sections/Banner.vue new file mode 100644 index 0000000..7b89e72 --- /dev/null +++ b/src/views/App/sections/Banner.vue @@ -0,0 +1,153 @@ + + + + + diff --git a/src/views/Contact.vue b/src/views/Contact.vue deleted file mode 100644 index 15f3cfa..0000000 --- a/src/views/Contact.vue +++ /dev/null @@ -1,7 +0,0 @@ - - diff --git a/src/views/Dating/Dating.vue b/src/views/Dating/Dating.vue new file mode 100644 index 0000000..d2b119d --- /dev/null +++ b/src/views/Dating/Dating.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/views/Dating/sections/Banner.vue b/src/views/Dating/sections/Banner.vue new file mode 100644 index 0000000..41f0f4b --- /dev/null +++ b/src/views/Dating/sections/Banner.vue @@ -0,0 +1,153 @@ + + + + + diff --git a/src/views/Ecosystem/Ecosystem.vue b/src/views/Ecosystem/Ecosystem.vue new file mode 100644 index 0000000..d2b119d --- /dev/null +++ b/src/views/Ecosystem/Ecosystem.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/views/Ecosystem/sections/Banner.vue b/src/views/Ecosystem/sections/Banner.vue new file mode 100644 index 0000000..59d732d --- /dev/null +++ b/src/views/Ecosystem/sections/Banner.vue @@ -0,0 +1,153 @@ + + + + + diff --git a/src/views/Home.vue b/src/views/Home.vue deleted file mode 100644 index 8ec1fad..0000000 --- a/src/views/Home.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - - - diff --git a/src/views/Home/sections/Banner.vue b/src/views/Home/sections/Banner.vue index 1f7bc3b..b60b5a1 100644 --- a/src/views/Home/sections/Banner.vue +++ b/src/views/Home/sections/Banner.vue @@ -4,6 +4,21 @@ Banner背景 +
+
+
+ +
+ {{ item.title }} +
+
@@ -14,6 +29,37 @@ @@ -35,44 +81,62 @@ } } - .banner-content { + .news-panel { position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - max-width: 1200px; - padding: 0 20px; - - .main-title { - font-size: 48px; - font-weight: bold; - margin-bottom: 20px; - } - - .sub-title { - font-size: 24px; - margin-bottom: 40px; - } - - .action-btn { - padding: 12px 30px; - font-size: 18px; - background-color: #007bff; - color: #fff; - border: none; - border-radius: 25px; + top: 230px; + right: 169px; + padding: 20px 20px 0 20px; + width: 320px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + border-radius: 10px; + background: rgba(51, 51, 51, 0.3); + backdrop-filter: blur(10px); + .news-item { + display: flex; + align-items: center; + padding: 12px; + border-radius: @border-radius-md; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; - transition: background-color 0.3s; - - &:hover { - background-color: #005eb8; + margin-bottom: 12px; + &:hover, + &.active { + background: rgba(255, 255, 255, 0.3); + transform: translateX(6px); } - } - .contact-phone { - margin-top: 20px; - font-size: 16px; + .icon { + width: 32px; + height: 32px; + border-radius: 50%; + overflow: hidden; + margin-right: 15px; + transition: transform 0.3s ease; + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: all 0.3s ease; + } + } + + .text { + font-size: @font-size-md; + color: #ffffff; + transition: color 0.3s ease; + } + + &:hover .text, + &.active .text { + color: @text-color; + } + + &:hover .icon, + &.active .icon { + background-image: linear-gradient(to bottom, #6280d0, #4bbce9); + transform: scale(1.15); // 图标轻微放大 + } } } } diff --git a/src/views/Home/sections/CoreValue.vue b/src/views/Home/sections/CoreValue.vue index da32bf3..fe5d8ae 100644 --- a/src/views/Home/sections/CoreValue.vue +++ b/src/views/Home/sections/CoreValue.vue @@ -19,25 +19,25 @@ diff --git a/src/views/Network/sections/Banner.vue b/src/views/Network/sections/Banner.vue new file mode 100644 index 0000000..41db2e4 --- /dev/null +++ b/src/views/Network/sections/Banner.vue @@ -0,0 +1,159 @@ + + + + + diff --git a/src/views/Network/sections/CoreValue.vue b/src/views/Network/sections/CoreValue.vue new file mode 100644 index 0000000..fe5d8ae --- /dev/null +++ b/src/views/Network/sections/CoreValue.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/views/Network/sections/CustomerFeedback.vue b/src/views/Network/sections/CustomerFeedback.vue new file mode 100644 index 0000000..c445e74 --- /dev/null +++ b/src/views/Network/sections/CustomerFeedback.vue @@ -0,0 +1,187 @@ + + + + + diff --git a/src/views/Network/sections/GlobalService.vue b/src/views/Network/sections/GlobalService.vue new file mode 100644 index 0000000..e9432f7 --- /dev/null +++ b/src/views/Network/sections/GlobalService.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/src/views/Network/sections/Partners.vue b/src/views/Network/sections/Partners.vue new file mode 100644 index 0000000..e97fcff --- /dev/null +++ b/src/views/Network/sections/Partners.vue @@ -0,0 +1,123 @@ + + + + + diff --git a/src/views/Network/sections/UseCases.vue b/src/views/Network/sections/UseCases.vue new file mode 100644 index 0000000..ec6ac7e --- /dev/null +++ b/src/views/Network/sections/UseCases.vue @@ -0,0 +1,144 @@ + + + + + diff --git a/src/views/News/News.vue b/src/views/News/News.vue new file mode 100644 index 0000000..88f8da0 --- /dev/null +++ b/src/views/News/News.vue @@ -0,0 +1,459 @@ + + + + + diff --git a/src/views/News/sections/Banner.vue b/src/views/News/sections/Banner.vue new file mode 100644 index 0000000..9a9c446 --- /dev/null +++ b/src/views/News/sections/Banner.vue @@ -0,0 +1,153 @@ + + + + +