新增：关于页面（初版编写）

LuoXi-Project · Dec 17, 2024 · 0dad1dd · 0dad1dd
1 parent 7d5781c
commit 0dad1dd
Show file tree

Hide file tree

Showing 3 changed files with 173 additions and 4 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>关于洛曦</title>
+    <link href="fontawesome-5.15.4/css/fontawesome.css" rel="stylesheet">
+    <link href="fontawesome-5.15.4/css/brands.css" rel="stylesheet">
+    <link href="fontawesome-5.15.4/css/solid.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/about.css">
+    <link rel="stylesheet" href="css/mobile.css">
+</head>
+
+<body>
+    <div class="container about-container">
+        <header>
+            <div class="logo">
+                <a href="index.html">洛曦</a>
+            </div>
+            <div class="menu">
+                <ul>
+                    <li><a href="index.html">主页</a></li>
+                    <li><a href="about.html">关于</a></li>
+                </ul>
+            </div>
+            <div class="socialIcon">
+                <a href="http://wpa.qq.com/msgrd?v=3&uin=327209194&site=qq&menu=yes" target="_blank">
+                    <i class="fab fa-qq"></i>
+                </a>
+                <a href="https://pd.qq.com/s/hff4u66vd" target="_blank">
+                    <i class="fa fa-comment"></i>
+                </a>
+
+                <a href="https://github.com/Ikaros-521" target="_blank">
+                    <i class="fab fa-github"></i>
+                </a>
+            </div>
+        </header>
+
+        <main>
+            <section class="about-section">
+                <h1 class="about-title">关于洛曦</h1>
+                <div class="about-content">
+                    <div class="about-card">
+                        <h2>项目组简介</h2>
+                        <p>洛曦是一家专注于AI技术创新和应用的项目组。我们致力于将最前沿的人工智能技术转化为实用的产品和解决方案,为用户提供智能、高效、个性化的服务体验。</p>
+                    </div>
+                    <div class="about-card">
+                        <h2>创始人介绍</h2>
+                        <p>洛曦由AI领域的从业人员创立。我们的团队拥有丰富的行业经验和技术积累,在机器学习、自然语言处理、计算机视觉等领域有深厚的研究背景。我们热衷于探索AI的无限可能,并将其转化为改变生活的创新应用。</p>
+                    </div>
+                    <div class="about-card">
+                        <h2>我们的愿景</h2>
+                        <p>我们的愿景是通过AI技术赋能各行各业,推动社会进步和人类发展。我们相信,人工智能将成为未来世界的核心驱动力,而我们正在努力成为这一革命性变革的先驱者和引领者。</p>
+                    </div>
+                    <div class="about-card" id="products">
+                        <h2>产品与服务</h2>
+                        <ul class="product-list">
+                            <li>AI Vtuber: 结合最先进技术的虚拟AI主播</li>
+                            <li>直播弹幕助手: 智能化的直播互动工具</li>
+                            <li>洛曦AI: 全方位的AI无人直播系统</li>
+                            <li>定制化AI解决方案: 为企业提供量身定制的AI应用</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <div class="footer">
+            <span>&copy; 2024 </span><a href="#" target="_blank" title="洛曦AI">洛曦AI</a><span> 保留所有权利。</span>
+        </div>
+    </div>
+</body>
+
+</html>
+
diff --git a/css/about.css b/css/about.css
@@ -0,0 +1,92 @@
+.about-container {
+    min-height: 100vh;
+    background-image: linear-gradient(90deg, #3d1f52, #7940a8);
+    color: #fff;
+    padding: 40px 20px;
+}
+
+.about-section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 0;
+}
+
+.about-title {
+    font-size: 3rem;
+    text-align: center;
+    margin-bottom: 40px;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+}
+
+.about-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 40px;
+}
+
+.about-card {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    padding: 30px;
+    transition: transform 0.3s ease;
+}
+
+.about-card:hover {
+    transform: translateY(-10px);
+}
+
+.about-card h2 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+}
+
+.about-card p {
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+.product-list {
+    list-style-type: none;
+    padding: 0;
+}
+
+.product-list li {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.product-list li::before {
+    content: '•';
+    color: #fff;
+    font-size: 1.5em;
+    margin-right: 10px;
+}
+
+.footer {
+    position: absolute;
+    bottom: 10px;
+    text-align: center;
+    width: 100%;
+    color: white;
+}
+
+.footer a {
+    color: white;
+}
+
+@media (max-width: 768px) {
+    .about-title {
+        font-size: 2rem;
+    }
+
+    .about-card h2 {
+        font-size: 1.5rem;
+    }
+
+    .about-card p {
+        font-size: 0.9rem;
+    }
+}
+
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">
@@ -23,9 +23,8 @@
             </div>
             <div class="menu">
                 <ul>
-                    <li><a href="">主页</a></li>
-                    <li><a href="">产品</a></li>
-                    <li><a href="">关于</a></li>
+                    <li><a href="index.html">主页</a></li>
+                    <li><a href="about.html">关于</a></li>
                 </ul>
             </div>
             <div class="socialIcon">