diff --git a/about.html b/about.html
index ac97186..c739871 100644
--- a/about.html
+++ b/about.html
@@ -1,6 +1,7 @@
{include file="header"}
+
@@ -10,7 +11,7 @@
-
+
{include file="public/header"}
@@ -281,4 +282,4 @@
- {include file="footer"}
+ {include file="footer"}
\ No newline at end of file
diff --git a/css/about.css b/css/about.css
new file mode 100644
index 0000000..946cb08
--- /dev/null
+++ b/css/about.css
@@ -0,0 +1,588 @@
+/* ============================================
+ About 页面专属样式 - 深色科技风格
+ 与 index.html 保持一致的设计语言
+ ============================================ */
+
+/* CSS 变量：统一的容器边距 */
+#about {
+ --container-max-width: 1440px;
+ --container-padding-x: 20px;
+}
+
+/* About 页面整体背景 - 统一深色，与首页一致 */
+#about {
+ background: linear-gradient(180deg, #020617 0%, #0F172A 50%, #020617 100%);
+ min-height: 100vh;
+}
+
+/* About 页面 section-content 统一左右边距 */
+#about .section-content {
+ padding-left: var(--container-padding-x);
+ padding-right: var(--container-padding-x);
+}
+
+/* ============================================
+ Banner 区域 - 深色科技风格
+ ============================================ */
+
+.about .server-banner2 {
+ position: relative;
+ height: 400px;
+ width: 100%;
+ /* 深色科技渐变背景 */
+ background:
+ radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+ radial-gradient(ellipse at 80% 70%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
+ linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* 深色遮罩层 */
+.about .server-banner2::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(90deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.3) 100%);
+ pointer-events: none;
+ z-index: 1;
+}
+
+.about .server-banner2 .section-content {
+ position: relative;
+ z-index: 2;
+ text-align: center;
+}
+
+.about .server-banner2 h1 {
+ font-size: 56px;
+ line-height: 1.2;
+ font-weight: 700;
+ color: #FFFFFF;
+ margin-bottom: 20px;
+ background: linear-gradient(120deg,
+ #FFFFFF 0%,
+ #FFFFFF 40%,
+ #E0F2FE 48%,
+ #BFDBFE 50%,
+ #E0F2FE 52%,
+ #FFFFFF 60%,
+ #FFFFFF 100%);
+ background-size: 200% 100%;
+ -webkit-background-clip: text;
+ background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: shine 6s linear infinite;
+ filter: drop-shadow(0 0 20px rgba(191, 219, 254, 0.8));
+}
+
+@keyframes shine {
+ 0% {
+ background-position: -200% 0;
+ }
+
+ 100% {
+ background-position: 200% 0;
+ }
+}
+
+.about .server-banner2 .server-banner-desc {
+ font-size: 18px;
+ color: rgba(226, 232, 240, 0.85);
+ line-height: 1.8;
+}
+
+/* ============================================
+ 关于主题云区域
+ ============================================ */
+
+.about-details {
+ background: transparent;
+ padding: 80px 0;
+}
+
+.about-details h2 {
+ font-size: 36px;
+ font-weight: 600;
+ color: #F9FAFB;
+ margin-bottom: 40px;
+ text-align: center;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.about-details .about-details-box {
+ gap: 60px;
+}
+
+.about-details .about-details-left {
+ flex: 1;
+ background: rgba(30, 41, 59, 0.6);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 16px;
+ padding: 40px;
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.about-details .about-details-left p {
+ font-size: 16px;
+ text-indent: 32px;
+ line-height: 32px;
+ color: rgba(226, 232, 240, 0.9);
+ margin-bottom: 20px;
+}
+
+.about-details .about-details-right {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ max-width: 500px;
+}
+
+.about-details .about-details-right .about-details-item {
+ flex: 0 1 calc(50% - 10px);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 30px 20px;
+ background: rgba(30, 41, 59, 0.7);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 12px;
+ transition: all 0.3s ease;
+ box-shadow:
+ 0 4px 16px rgba(15, 23, 42, 0.3),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.about-details .about-details-right .about-details-item:hover {
+ transform: translateY(-5px);
+ border-color: rgba(56, 189, 248, 0.4);
+ box-shadow:
+ 0 8px 32px rgba(56, 189, 248, 0.3),
+ inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.about-details .about-details-right .about-details-item h2 {
+ font-size: 48px;
+ font-weight: 700;
+ color: #38BDF8;
+ margin-bottom: 10px;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.about-details .about-details-right .about-details-item p {
+ font-size: 14px;
+ color: rgba(203, 213, 225, 0.8);
+ margin-top: 10px;
+}
+
+/* ============================================
+ 为什么选择我们 / 价值观区域
+ ============================================ */
+
+.about-reason {
+ padding: 80px 0;
+ background: transparent;
+}
+
+.about-why {
+ background: transparent;
+}
+
+.about-reason .section-title h2 {
+ font-size: 36px;
+ font-weight: 600;
+ color: #F9FAFB;
+ text-align: center;
+ margin-bottom: 60px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.about-reason .reason {
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+}
+
+.about-reason .reason-box {
+ flex: 0 1 calc(33.333% - 20px);
+ min-width: 280px;
+ max-width: 400px;
+ padding: 40px 30px;
+ height: auto;
+ min-height: 280px;
+ background: rgba(30, 41, 59, 0.7);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 12px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ position: relative;
+ overflow: hidden;
+}
+
+.about-reason .reason-box::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle at center,
+ rgba(56, 189, 248, 0.15) 0%,
+ transparent 50%);
+ opacity: 0;
+ transition: opacity 0.5s ease;
+ pointer-events: none;
+}
+
+.about-reason .reason-box:hover {
+ transform: translateY(-8px);
+ border-color: rgba(56, 189, 248, 0.4);
+ box-shadow:
+ 0 12px 40px rgba(56, 189, 248, 0.3),
+ inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.about-reason .reason-box:hover::before {
+ opacity: 1;
+}
+
+.about-reason .reason-box h4 {
+ font-size: 22px;
+ font-weight: 600;
+ color: #38BDF8;
+ margin-bottom: 20px;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.about-reason .reason-box p {
+ font-size: 16px;
+ line-height: 28px;
+ color: rgba(226, 232, 240, 0.85);
+}
+
+/* 携手千行百业区域样式 */
+.about-together {
+ background: transparent;
+}
+
+.about-together .reason-box {
+ background: rgba(30, 41, 59, 0.8);
+ border: 1px solid rgba(56, 189, 248, 0.3);
+}
+
+.about-together .reason-box h4 {
+ color: #FFFFFF;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.about-together .reason-box p {
+ color: rgba(226, 232, 240, 0.9);
+}
+
+/* ============================================
+ 里程碑区域（保持原有深色风格）
+ ============================================ */
+
+.about-time {
+ background: rgba(15, 23, 42, 0.8);
+ padding: 80px 0;
+}
+
+.about-time .section-title h2 {
+ font-size: 36px;
+ font-weight: 600;
+ color: #F9FAFB;
+ text-align: center;
+ margin-bottom: 60px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+/* ============================================
+ 荣誉资质、精选客户案例
+ ============================================ */
+
+.about-box {
+ padding: 80px 0;
+ background: transparent;
+}
+
+.about-box .section-title h2 {
+ font-size: 36px;
+ font-weight: 600;
+ color: #F9FAFB;
+ text-align: center;
+ margin-bottom: 60px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.about-box .box-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+ margin: 0;
+}
+
+.about-box .box-list .box-item {
+ flex: 0 1 calc(33.333% - 20px);
+ min-width: 300px;
+ max-width: 400px;
+ padding: 40px;
+ height: auto;
+ min-height: 260px;
+ text-align: center;
+ background: rgba(30, 41, 59, 0.7);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 12px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow:
+ 0 8px 32px rgba(15, 23, 42, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ cursor: pointer;
+}
+
+.about-box .box-list .box-item:hover {
+ transform: translateY(-8px);
+ border-color: rgba(56, 189, 248, 0.4);
+ box-shadow:
+ 0 12px 40px rgba(56, 189, 248, 0.3),
+ inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.about-box .box-list .box-item img {
+ width: 100%;
+ max-width: 248px;
+ height: auto;
+ border-radius: 8px;
+ background: rgba(15, 23, 42, 0.3);
+}
+
+.about-box .box-list .box-item p,
+.about-box .box-list .box-item h4 {
+ color: rgba(226, 232, 240, 0.9);
+ margin-top: 20px;
+}
+
+.about-box .box-list .box-item h4 {
+ font-size: 18px;
+ font-weight: 600;
+ color: #38BDF8;
+}
+
+/* 精选客户案例样式 */
+.about-example {
+ background: transparent;
+}
+
+.about-example .box-list .box-item {
+ min-height: 280px;
+}
+
+/* ============================================
+ 联系我们区域
+ ============================================ */
+
+.about-custom {
+ padding: 80px 0;
+ background: transparent;
+}
+
+.about-custom .section-title h2 {
+ font-size: 36px;
+ font-weight: 600;
+ color: #F9FAFB;
+ text-align: center;
+ margin-bottom: 60px;
+ background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.about-custom .custom {
+ margin-top: 40px;
+ gap: 40px;
+}
+
+.about-custom .custom-box {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 30px;
+ background: rgba(30, 41, 59, 0.7);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(148, 163, 184, 0.2);
+ border-radius: 12px;
+ transition: all 0.3s ease;
+ box-shadow:
+ 0 4px 16px rgba(15, 23, 42, 0.3),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.about-custom .custom-box:hover {
+ transform: translateY(-5px);
+ border-color: rgba(56, 189, 248, 0.4);
+ box-shadow:
+ 0 8px 32px rgba(56, 189, 248, 0.3),
+ inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.about-custom .custom-box p {
+ font-size: 16px;
+ color: rgba(226, 232, 240, 0.9);
+}
+
+.about-custom .btn-contact {
+ margin-top: 40px;
+}
+
+.about-custom .btn-contact .btn {
+ position: relative;
+ overflow: hidden;
+ font-size: 16px;
+ font-weight: 600;
+ padding: 14px 48px;
+ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+ border: none;
+ box-shadow: 0 12px 40px rgba(56, 189, 248, 0.4);
+ transition: all 0.3s ease;
+}
+
+.about-custom .btn-contact .btn::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+ transform: rotate(45deg);
+ transition: all 0.6s ease;
+}
+
+.about-custom .btn-contact .btn:hover::before {
+ left: 100%;
+}
+
+.about-custom .btn-contact .btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 16px 48px rgba(56, 189, 248, 0.6);
+}
+
+.about-custom .btn-contact .btn a {
+ color: #FFFFFF;
+ text-decoration: none;
+}
+
+/* ============================================
+ 移动端适配
+ ============================================ */
+
+@media (max-width: 768px) {
+
+ .about .server-banner2 {
+ height: 300px;
+ }
+
+ .about .server-banner2 h1 {
+ font-size: 36px;
+ }
+
+ .about .server-banner2 .server-banner-desc {
+ font-size: 16px;
+ }
+
+ .about-details {
+ padding: 60px 0;
+ }
+
+ .about-details .about-details-box {
+ flex-direction: column;
+ gap: 30px;
+ }
+
+ .about-details .about-details-right {
+ max-width: 100%;
+ }
+
+ .about-details .about-details-right .about-details-item {
+ flex: 0 1 calc(50% - 10px);
+ }
+
+ .about-reason {
+ padding: 60px 0;
+ }
+
+ .about-reason .reason-box {
+ flex: 0 1 100%;
+ min-width: auto;
+ }
+
+ .about-time {
+ padding: 60px 0;
+ }
+
+ .about-box {
+ padding: 60px 0;
+ }
+
+ .about-box .box-list .box-item {
+ flex: 0 1 100%;
+ min-width: auto;
+ }
+
+ .about-custom {
+ padding: 60px 0;
+ }
+
+ .about-custom .custom {
+ flex-direction: column;
+ gap: 20px;
+ }
+}
\ No newline at end of file