ops/front
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat

Browse Source
This commit is contained in:
daxiong
2026-05-02 09:59:06 +08:00
parent ea3e60c17c
commit 1af4075e9b
249 changed files with 11209 additions and 14884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/views/home/index.vue
View File

@@ -21,9 +21,7 @@
<div class="banner-overlay"></div>
<div class="banner-content">
<h1 class="banner-title">智能运维管理系统</h1>
<p class="banner-subtitle">
提供全方位的 IT 运维管理解决方案，让系统运行更稳定、更高效
</p>
<p class="banner-subtitle">提供全方位的 IT 运维管理解决方案，让系统运行更稳定、更高效</p>
</div>
</section>
@@ -32,7 +30,7 @@
<div class="section-container">
<h2 class="section-title">核心功能</h2>
<p class="section-subtitle">全面的运维管理工具，满足您的各种需求</p>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon icon-blue">
@@ -85,8 +83,6 @@
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-content">
@@ -96,7 +92,11 @@
</div>
<div class="footer-section">
<h4>帮助中心</h4>
<p><a href="#help" target="_blank">帮助中心</a>，技术支持邮箱:<a href="mailto:david.yan@qq.com">david.yan@qq.com</a></p>
<p>
<a href="#help" target="_blank">帮助中心</a>
，技术支持邮箱:
<a href="mailto:david.yan@qq.com">david.yan@qq.com</a>
</p>
</div>
<div class="footer-section">
<h4>版权信息</h4>
@@ -109,14 +109,7 @@
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import {
IconDashboard,
IconExclamationCircle,
IconChartLine,
IconSettings,
IconShield,
IconMessageCircle,
} from '@tabler/icons-vue'
import { IconDashboard, IconExclamationCircle, IconChartLine, IconSettings, IconShield, IconMessageCircle } from '@tabler/icons-vue'
const router = useRouter()
@@ -136,7 +129,7 @@ const scrollToSection = (id: string) => {
.home-page {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
// 顶部导航
.navbar {
position: fixed;
@@ -148,7 +141,7 @@ const scrollToSection = (id: string) => {
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
.navbar-content {
max-width: 1200px;
margin: 0 auto;
@@ -157,35 +150,35 @@ const scrollToSection = (id: string) => {
display: flex;
justify-content: space-between;
align-items: center;
.logo {
display: flex;
align-items: center;
gap: 12px;
img {
height: 32px;
width: auto;
}
.logo-text {
font-size: 20px;
font-weight: 600;
color: var(--color-text-1);
}
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
a {
color: var(--color-text-2);
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
&:hover {
color: rgb(var(--primary-6));
}
@@ -193,7 +186,7 @@ const scrollToSection = (id: string) => {
}
}
}
// Banner 区域
.banner {
position: relative;
@@ -253,16 +246,16 @@ const scrollToSection = (id: string) => {
}
}
}
// 功能特性区域
.features {
padding: 100px 24px;
background: #fff;
.section-container {
max-width: 1200px;
margin: 0 auto;
.section-title {
font-size: 36px;
font-weight: 700;
@@ -270,31 +263,31 @@ const scrollToSection = (id: string) => {
margin-bottom: 16px;
color: var(--color-text-1);
}
.section-subtitle {
font-size: 16px;
text-align: center;
color: var(--color-text-2);
margin-bottom: 60px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
.feature-card {
padding: 32px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
transition: all 0.3s;
cursor: pointer;
&:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 64px;
height: 64px;
@@ -305,7 +298,9 @@ const scrollToSection = (id: string) => {
margin-bottom: 24px;
color: #fff;
font-size: 32px;
transition: transform 0.3s, box-shadow 0.3s;
transition:
transform 0.3s,
box-shadow 0.3s;
&:hover {
transform: scale(1.1);
@@ -336,14 +331,14 @@ const scrollToSection = (id: string) => {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
}
h3 {
font-size: 20px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 12px;
}
p {
font-size: 14px;
color: var(--color-text-2);
@@ -353,16 +348,16 @@ const scrollToSection = (id: string) => {
}
}
}
// 数据中心区域
.datacenter {
padding: 100px 24px;
background: linear-gradient(135deg, rgb(var(--primary-1)) 0%, rgb(var(--primary-2)) 100%);
.section-container {
max-width: 1200px;
margin: 0 auto;
.section-title {
font-size: 36px;
font-weight: 700;
@@ -370,14 +365,14 @@ const scrollToSection = (id: string) => {
margin-bottom: 16px;
color: var(--color-text-1);
}
.section-subtitle {
font-size: 16px;
text-align: center;
color: var(--color-text-2);
margin-bottom: 60px;
}
.datacenter-content {
.datacenter-info {
.stat-item {
@@ -386,14 +381,14 @@ const scrollToSection = (id: string) => {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
.stat-number {
font-size: 48px;
font-weight: 700;
color: rgb(var(--primary-6));
margin-bottom: 8px;
}
.stat-label {
font-size: 16px;
color: var(--color-text-2);
@@ -403,41 +398,41 @@ const scrollToSection = (id: string) => {
}
}
}
// CTA 区域
.cta-section {
padding: 100px 24px;
background: #fff;
text-align: center;
.section-container {
max-width: 800px;
margin: 0 auto;
h2 {
font-size: 36px;
font-weight: 700;
color: var(--color-text-1);
margin-bottom: 16px;
}
p {
font-size: 18px;
color: var(--color-text-2);
margin-bottom: 40px;
}
.arco-btn {
margin: 8px;
}
}
}
// 页脚
.footer {
background: var(--color-bg-1);
padding: 60px 24px 24px;
.footer-content {
max-width: 1200px;
margin: 0 auto;
@@ -445,7 +440,7 @@ const scrollToSection = (id: string) => {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
.footer-section {
h4 {
font-size: 18px;
@@ -453,27 +448,27 @@ const scrollToSection = (id: string) => {
color: var(--color-text-1);
margin-bottom: 16px;
}
p {
font-size: 14px;
color: var(--color-text-2);
line-height: 1.6;
}
ul {
list-style: none;
padding: 0;
margin: 0;
li {
margin-bottom: 12px;
a {
color: var(--color-text-2);
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
&:hover {
color: rgb(var(--primary-6));
}
@@ -482,14 +477,14 @@ const scrollToSection = (id: string) => {
}
}
}
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding-top: 24px;
border-top: 1px solid var(--color-border);
text-align: center;
p {
font-size: 14px;
color: var(--color-text-3);
@@ -505,33 +500,33 @@ const scrollToSection = (id: string) => {
.navbar-content {
.nav-links {
gap: 12px;
a {
display: none;
}
}
}
}
.banner {
padding: 120px 16px 60px;
min-height: 400px;
.banner-title {
font-size: 32px !important;
}
.banner-subtitle {
font-size: 16px !important;
}
}
.features,
.datacenter,
.cta-section {
padding: 60px 16px;
}
.features {
.feature-grid {
grid-template-columns: 1fr;