From 6a579374ec8e9c6225a27dd99a2b95a47b930b0f Mon Sep 17 00:00:00 2001
From: zxzz <2652816967@qq.com>
Date: Sun, 24 Mar 2024 18:01:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B3=A2=E6=B5=AA=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HomePage.vue | 234 ++++++++++++++++++++++++++++--------
 1 file changed, 185 insertions(+), 49 deletions(-)

diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 6f6da35..f4462e2 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -2,21 +2,41 @@
     <div class="home-page">
         <!-- Banner Section -->
         <div class="banner-section">
-            <!-- 菜单栏 -->
-            <div class="menu-box">
-                <div class="osredm-logo">logo</div>
-                <div class="go-sy">首页</div>
-                <div class="go-kyxm">开源项目</div>
-                <div class="go-ckkj">创客空间</div>
-            </div>
-            <!-- 图标&标题 -->
             <div class="logo-and-title">
                 <img class="banner-logo" src="../assets/kc-logo.png" />
                 <div class="banner-blank"></div>
                 <img class="banner-title" src="../assets/kc-title.png" />
             </div>
-            <!-- 下载按钮 -->
             <div class="download-button">宣传视频下载</div>
+            <!-- waves -->
+            <svg
+                class="waves"
+                viewBox="0 24 150 28"
+                preserveAspectRatio="none"
+                shapeRendering="auto"
+            >
+                <defs>
+                    <path
+                        id="wave-path"
+                        d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+                    />
+                </defs>
+                <g class="parallax">
+                    <use
+                        href="#wave-path"
+                        x="50"
+                        y="3"
+                        fill="rgba(255,255,255,0.6)"
+                    />
+                    <use
+                        href="#wave-path"
+                        x="50"
+                        y="0"
+                        fill="rgba(255,255,255,0.45)"
+                    />
+                    <use href="#wave-path" x="50" y="9" fill="#dae5ff" />
+                </g>
+            </svg>
         </div>
 
         <!-- Video Section -->
@@ -28,12 +48,90 @@
                 autoplay
                 muted
             ></video>
+            <!-- waves -->
+            <svg
+                class="waves"
+                viewBox="0 24 150 28"
+                preserveAspectRatio="none"
+                shapeRendering="auto"
+            >
+                <defs>
+                    <path
+                        id="wave-path"
+                        d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+                    />
+                </defs>
+                <g class="parallax">
+                    <use
+                        href="#wave-path"
+                        x="50"
+                        y="3"
+                        fill="rgba(0,55,175,0.2)"
+                    />
+                    <use
+                        href="#wave-path"
+                        x="50"
+                        y="0"
+                        fill="rgba(0,55,175,0.2)"
+                    />
+                    <use href="#wave-path" x="50" y="9" fill="#180e8d" />
+                </g>
+            </svg>
         </div>
 
         <!-- 简介 Section -->
         <div class="intro-section" id="intro">
-            <div class="intro-box"></div>
-            <!-- <p>项目简介</p> -->
+            <div class="intro-box">
+                <!-- <p>项目简介</p> -->
+                <div class="intro-title-box">
+                    <img
+                        class="aside-img"
+                        src="../assets/left-icon.png"
+                        alt=""
+                    />
+                    <h1 class="intro-title">项目简介</h1>
+                    <img
+                        class="aside-img"
+                        src="../assets/right-icon.png"
+                        alt=""
+                    />
+                </div>
+                <dir class="intro-text-box">
+                    <p>项目名称：“开创”系列军事需求解决方案创意征集行动。</p>
+                    <p>
+                        选题类别和范围、提案模板等信息，请与项目联络员联系。贾龙飞，19158870920。....
+                    </p>
+                </dir>
+            </div>
+            <!-- waves -->
+            <svg
+                class="waves"
+                viewBox="0 24 150 28"
+                preserveAspectRatio="none"
+                shapeRendering="auto"
+            >
+                <defs>
+                    <path
+                        id="wave-path"
+                        d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+                    />
+                </defs>
+                <g class="parallax">
+                    <use
+                        href="#wave-path"
+                        x="50"
+                        y="3"
+                        fill="rgba(255,255,255,0.6)"
+                    />
+                    <use
+                        href="#wave-path"
+                        x="50"
+                        y="0"
+                        fill="rgba(255,255,255,0.45)"
+                    />
+                    <use href="#wave-path" x="50" y="9" fill="#dae5ff" />
+                </g>
+            </svg>
         </div>
 
         <!-- logo Section -->
@@ -59,7 +157,7 @@ export default {
 };
 </script>
   
-<style scoped>
+<style scoped lang="scss">
 .banner-section {
     width: 100%;
     height: 680px;
@@ -69,36 +167,6 @@ export default {
     background-size: cover;
     background-position: center;
 
-    .menu-box {
-        width: 550px;
-        height: 60px;
-        background-color: aquamarine;
-        position: absolute;
-        top: 50px;
-        left: 90px;
-        display: flex;
-
-        .osredm-logo {
-            width: 250px;
-            height: 60px;
-        }
-
-        .go-sy {
-            width: 100px;
-            height: 60px;
-        }
-
-        .go-kyxm {
-            width: 100px;
-            height: 60px;
-        }
-
-        .go-ckkj {
-            width: 100px;
-            height: 60px;
-        }
-    }
-
     .logo-and-title {
         width: 1300px;
         height: auto;
@@ -132,7 +200,7 @@ export default {
         letter-spacing: 3px;
         line-height: 60px;
         position: absolute;
-        bottom: 8%;
+        bottom: 12%;
         left: 50%;
         transform: translate(-50%, -50%);
     }
@@ -140,15 +208,15 @@ export default {
 
 .video-section {
     width: 100%;
-    height: 780px;
+    height: 850px;
     background-color: #dae5ff;
     position: relative;
 
     .video-box {
-        width: 1100px;
+        width: 1150px;
         height: auto;
         position: absolute;
-        top: 50%;
+        top: 45%;
         left: 50%;
         transform: translate(-50%, -50%);
     }
@@ -161,13 +229,47 @@ export default {
     position: relative;
 
     .intro-box {
-        border: 1px solid #000000;
         width: 1100px;
         height: 100%;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        color: #ffffff;
+
+        .intro-title-box {
+            height: 200px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .aside-img {
+                width: 300px;
+                height: auto;
+            }
+
+            .intro-title {
+                width: 200px;
+            }
+        }
+
+        .intro-text-box {
+            margin: 0;
+            padding: 0;
+            height: 200px;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: flex-start;
+
+            p {
+                width: 100%;
+                font-size: 18px;
+                margin-left: 100px;
+            }
+        }
     }
 }
 
@@ -177,7 +279,6 @@ export default {
     background-color: #dae5ff;
     position: relative;
     .logo-box {
-        border: 1px solid #000000;
         width: 1100px;
         height: 100%;
         position: absolute;
@@ -186,13 +287,13 @@ export default {
         transform: translate(-50%, -50%);
     }
 }
+
 .poster-section {
     width: 100%;
     height: 600px;
     background-color: #180e8d;
     position: relative;
     .poster-box {
-        border: 1px solid #000000;
         width: 1100px;
         height: 100%;
         position: absolute;
@@ -207,5 +308,40 @@ export default {
     height: 200px;
     background-color: rgb(22, 32, 70);
 }
+
+/* 波浪效果 - 起 */
+.waves {
+    width: 100%;
+    height: 8vh;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -2px;
+    height: 10vh;
+}
+.parallax > use {
+    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+}
+.parallax > use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+}
+.parallax > use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+}
+.parallax > use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+}
+@keyframes move-forever {
+    0% {
+        transform: translate3d(-90px, 0, 0);
+    }
+    100% {
+        transform: translate3d(85px, 0, 0);
+    }
+}
+/* 波浪效果 - 止 */
 </style>
   
\ No newline at end of file