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

add hemo,help

Browse Source
This commit is contained in:
yanweidonog
2026-03-21 10:26:44 +08:00
parent 93713e3e3c
commit d5388f3f08
8 changed files with 1726 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

530
src/views/home/index.vue Normal file
View File

@@ -0,0 +1,530 @@
<template>
<div class="home-page">
<!-- 顶部导航 -->
<header class="navbar">
<div class="navbar-content">
<div class="logo">
<img src="@/assets/logo.svg" alt="Logo" />
<span class="logo-text">智能运维管理系统</span>
</div>
<nav class="nav-links">
<a href="#home">首页</a>
<a href="#help">帮助中心</a>
<a-button type="primary" @click="goToLogin">登录系统</a-button>
</nav>
</div>
</header>
<!-- Banner 区域 -->
<section id="home" class="banner">
<div class="banner-content">
<h1 class="banner-title">智能运维管理系统</h1>
<p class="banner-subtitle">
提供全方位的 IT 运维管理解决方案，让系统运行更稳定、更高效
</p>
</div>
<div class="banner-decoration">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
</section>
<!-- 功能特性区域 -->
<section id="features" class="features">
<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-dashboard />
</div>
<h3>实时监控仪表盘</h3>
<p>多维度数据展示，实时掌握系统运行状态，关键指标一目了然</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-alert />
</div>
<h3>智能告警管理</h3>
<p>灵活的告警策略配置，多渠道通知，确保问题及时发现和处理</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-chart-line />
</div>
<h3>数据分析报表</h3>
<p>丰富的可视化报表，深度数据分析，为决策提供有力支持</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-settings />
</div>
<h3>资源配置管理</h3>
<p>统一的资源配置中心，规范化管理，提升运维效率</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-shield />
</div>
<h3>权限安全管理</h3>
<p>细粒度的权限控制，多重安全保障，确保系统数据安全</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-feedback />
</div>
<h3>问题反馈跟踪</h3>
<p>完善的问题反馈机制，全流程跟踪，快速响应解决</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h4>系统信息</h4>
<p>系统版本:v1.2.0 部署环境:生产环境</p>
</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>
</div>
<div class="footer-section">
<h4>版权信息</h4>
<p>Copyright &copy; 2026 智能运维管理系统。All rights reserved.</p>
</div>
</div>
</footer>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goToLogin = () => {
router.push('/login')
}
const scrollToSection = (id: string) => {
const element = document.getElementById(id)
if (element) {
element.scrollIntoView({ behavior: 'smooth' })
}
}
</script>
<style scoped lang="less">
.home-page {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
// 顶部导航
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: rgba(255, 255, 255, 0.95);
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;
padding: 0 24px;
height: 100%;
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));
}
}
}
}
}
// Banner 区域
.banner {
position: relative;
padding: 160px 24px 100px;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.banner-content {
text-align: center;
z-index: 1;
.banner-title {
font-size: 48px;
font-weight: 700;
color: var(--color-text-1);
margin-bottom: 16px;
background: linear-gradient(135deg, rgb(var(--primary-6)), rgb(var(--primary-4)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.banner-subtitle {
font-size: 20px;
color: var(--color-text-2);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.banner-actions {
display: flex;
gap: 16px;
justify-content: center;
}
}
.banner-decoration {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
.circle {
position: absolute;
border-radius: 50%;
opacity: 0.1;
&.circle-1 {
width: 400px;
height: 400px;
background: rgb(var(--primary-6));
top: -200px;
right: -100px;
}
&.circle-2 {
width: 300px;
height: 300px;
background: rgb(var(--success-6));
bottom: -150px;
left: -100px;
}
&.circle-3 {
width: 200px;
height: 200px;
background: rgb(var(--warning-6));
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
// 功能特性区域
.features {
padding: 100px 24px;
background: #fff;
.section-container {
max-width: 1200px;
margin: 0 auto;
.section-title {
font-size: 36px;
font-weight: 700;
text-align: center;
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;
display: flex;
align-items: center;
justify-content: center;
background: rgb(var(--primary-6));
border-radius: 12px;
margin-bottom: 24px;
color: #fff;
font-size: 32px;
}
h3 {
font-size: 20px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 12px;
}
p {
font-size: 14px;
color: var(--color-text-2);
line-height: 1.6;
}
}
}
}
}
// 数据中心区域
.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;
text-align: center;
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 {
text-align: center;
padding: 32px;
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);
}
}
}
}
}
}
// 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;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
.footer-section {
h4 {
font-size: 18px;
font-weight: 600;
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));
}
}
}
}
}
}
.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);
}
}
}
}
// 响应式设计
@media (max-width: 768px) {
.home-page {
.navbar {
.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;
}
}
}
}
</style>