From 80ecb51f425dd9b3711a319a417f26d2a7203b8a Mon Sep 17 00:00:00 2001
From: zhangxiaozhuozhuo <7658685+zhangxiaozhuozhuo@user.noreply.gitee.com>
Date: Mon, 25 Mar 2024 15:09:06 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=BE=AE=E4=BF=A1=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=99=A8=E6=98=BE=E7=A4=BA=E8=87=AA=E5=8A=A8=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7=E5=AD=97=E4=BD=93=E9=97=AE=E9=A2=98=EF=BC=88=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8scale=E7=BC=A9=E5=B0=8F=E5=AD=97=E4=BD=93=EF=BC=8C?=
 =?UTF-8?q?=E5=8E=9F=E5=AD=97=E5=8F=B7=E6=94=BE=E5=A4=A7=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HomePage.vue | 298 ++++++++++++++++++++++++++----------
 1 file changed, 216 insertions(+), 82 deletions(-)

diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 17fda6c..ec3c0d5 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -4,11 +4,17 @@
         <div class="banner-section">
             <!-- 菜单栏 -->
             <ul>
-                <a href="https://www.osredm.com"><img src="../assets/osredm.png" alt=""></a>
+                <a href="https://www.osredm.com"
+                    ><img src="../assets/osredm.png" alt=""
+                /></a>
                 <li><a href="https://www.osredm.com">首页</a></li>
-                <li><a href="https://www.osredm.com/explore/all">开源项目</a></li>
+                <li>
+                    <a href="https://www.osredm.com/explore/all">开源项目</a>
+                </li>
                 <li><a href="https://www.osredm.com/task">创客空间</a></li>
-                <li><a href="https://fc.osredm.com/competitions">开放竞赛</a></li>
+                <li>
+                    <a href="https://fc.osredm.com/competitions">开放竞赛</a>
+                </li>
                 <li><a href="https://fc.osredm.com/forums">论坛交流</a></li>
                 <li><a href="https://www.osredm.com/notice">公告</a></li>
             </ul>
@@ -19,15 +25,35 @@
                 <img class="banner-title" src="../assets/kc-title.png" />
             </div>
             <!-- 下载视频 -->
-            <button class="download-button" @click="downloadVideo">宣传视频下载</button>
+            <button class="download-button" @click="downloadVideo">
+                宣传视频下载
+            </button>
             <!-- waves -->
-            <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
+            <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" />
+                    <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="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>
@@ -35,17 +61,39 @@
 
         <!-- Video Section -->
         <div class="video-section">
-            <video class="video-box"
+            <video
+                class="video-box"
                 src="https://osredm-oss.obs.cn-north-4.myhuaweicloud.com/%E5%BC%80%E5%88%9B%E6%B4%BB%E5%8A%A80315-%E5%85%AC%E5%BC%80%E7%89%88.mp4"
-                controls autoplay muted></video>
+                controls
+                autoplay
+                muted
+            ></video>
             <!-- waves -->
-            <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
+            <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" />
+                    <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="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>
@@ -55,25 +103,50 @@
         <div class="intro-section" id="intro">
             <div class="intro-box">
                 <div class="intro-title-box">
-                    <img class="aside-img" src="../assets/left-icon.png" alt="" />
+                    <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="" />
+                    <img
+                        class="aside-img"
+                        src="../assets/right-icon.png"
+                        alt=""
+                    />
                 </div>
                 <div class="intro-text-box">
                     <p>项目名称：“开创”系列军事需求解决方案创意征集行动。</p>
-                    <p>
-                        选题类别和范围、提案模板等信息，请与项目联络员联系。贾龙飞，19158870920。
-                    </p>
+                    <p>选题类别和范围、提案模板等信息，请与项目联络员联系。</p>
+                    <p>贾龙飞，19158870920。</p>
                 </div>
             </div>
             <!-- waves -->
-            <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
+            <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" />
+                    <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="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>
@@ -83,23 +156,49 @@
         <div class="logo-section" id="bigLogo">
             <div class="logo-box">
                 <div class="logo-title-box">
-                    <img class="aside-img" src="../assets/left-icon.png" alt="" />
+                    <img
+                        class="aside-img"
+                        src="../assets/left-icon.png"
+                        alt=""
+                    />
                     <h1 class="logo-title">项目LOGO</h1>
-                    <img class="aside-img" src="../assets/right-icon.png" alt="" />
+                    <img
+                        class="aside-img"
+                        src="../assets/right-icon.png"
+                        alt=""
+                    />
                 </div>
                 <div class="logo-icon-box">
-                    <img src="../assets/red-kc-logo.png" alt="">
-                    <img src="../assets/blue-kc-logo.png" alt="">
+                    <img src="../assets/red-kc-logo.png" alt="" />
+                    <img src="../assets/blue-kc-logo.png" alt="" />
                 </div>
             </div>
             <!-- waves -->
-            <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
+            <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" />
+                    <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="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>
@@ -109,14 +208,22 @@
         <div class="poster-section" id="poster">
             <div class="poster-box">
                 <div class="poster-title-box">
-                    <img class="aside-img" src="../assets/left-icon.png" alt="" />
+                    <img
+                        class="aside-img"
+                        src="../assets/left-icon.png"
+                        alt=""
+                    />
                     <h1 class="poster-title">宣传海报</h1>
-                    <img class="aside-img" src="../assets/right-icon.png" alt="" />
+                    <img
+                        class="aside-img"
+                        src="../assets/right-icon.png"
+                        alt=""
+                    />
                 </div>
                 <div class="poster-picture-box">
-                    <img src="../assets/poster-one.png" alt="">
-                    <img src="../assets/poster-two.png" alt="">
-                    <img src="../assets/poster-three.png" alt="">
+                    <img src="../assets/poster-one.png" alt="" />
+                    <img src="../assets/poster-two.png" alt="" />
+                    <img src="../assets/poster-three.png" alt="" />
                 </div>
             </div>
             <!-- waves -->
@@ -135,16 +242,37 @@
         <!-- footer Section -->
         <div class="footer-section" id="footer">
             <p>
-                <span class="mail"><img src="../assets/youxiang.png"
-                        alt="">&nbsp;support@osredm.com&nbsp;&nbsp;&nbsp;&nbsp;</span>
-                <span class="address"><img src="../assets/dituguanli.png" alt="">&nbsp;北京市海淀区西三环北路72号</span>
+                <span class="mail"
+                    ><img
+                        src="../assets/youxiang.png"
+                        alt=""
+                    />&nbsp;support@osredm.com&nbsp;&nbsp;&nbsp;&nbsp;</span
+                >
+                <span class="address"
+                    ><img
+                        src="../assets/dituguanli.png"
+                        alt=""
+                    />&nbsp;北京市海淀区西三环北路72号</span
+                >
             </p>
             <p>
-                <a href="https://www.osredm.com/">版权所有：红山开源社区&nbsp;&nbsp;&nbsp;&nbsp;</a>
-                <a class="police" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034576">
-                    <img class="police-img" src="https://forge.osredm.com/police.png" />&nbsp;京公网安备 11010802034576 号</a>
-                <a class="police-number"
-                    href="https://beian.miit.gov.cn/#/Integrated/index">&nbsp;&nbsp;&nbsp;&nbsp;京ICP备2021005060-1</a>
+                <a href="https://www.osredm.com/"
+                    >版权所有：红山开源社区&nbsp;&nbsp;&nbsp;&nbsp;</a
+                >
+                <a
+                    class="police"
+                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034576"
+                >
+                    <img
+                        class="police-img"
+                        src="https://forge.osredm.com/police.png"
+                    />&nbsp;京公网安备 11010802034576 号</a
+                >
+                <a
+                    class="police-number"
+                    href="https://beian.miit.gov.cn/#/Integrated/index"
+                    >&nbsp;&nbsp;&nbsp;&nbsp;京ICP备2021005060-1</a
+                >
             </p>
         </div>
     </div>
@@ -156,18 +284,19 @@ export default {
     methods: {
         downloadVideo() {
             // 创建一个a标签
-            const link = document.createElement('a');
+            const link = document.createElement("a");
             // 设置视频的URL
-            link.href = 'https://osredm-oss.obs.cn-north-4.myhuaweicloud.com/%E5%BC%80%E5%88%9B%E6%B4%BB%E5%8A%A80315-%E5%85%AC%E5%BC%80%E7%89%88%2B%E7%BA%A2%E5%B1%B1%E5%BC%80%E6%BA%90logo.mp4'; // 将XXX替换为视频的实际URL
+            link.href =
+                "https://osredm-oss.obs.cn-north-4.myhuaweicloud.com/%E5%BC%80%E5%88%9B%E6%B4%BB%E5%8A%A80315-%E5%85%AC%E5%BC%80%E7%89%88%2B%E7%BA%A2%E5%B1%B1%E5%BC%80%E6%BA%90logo.mp4"; // 将XXX替换为视频的实际URL
             // 设置下载属性，给下载的文件命名为kaichaung-video.mp4
-            link.setAttribute('download', 'kaichaung-video.mp4');
+            link.setAttribute("download", "kaichaung-video.mp4");
             // 模拟点击a标签以开始下载
             document.body.appendChild(link);
             link.click();
             // 移除a标签
             document.body.removeChild(link);
-        }
-    }
+        },
+    },
 };
 </script>
 
@@ -320,23 +449,25 @@ export default {
         }
 
         .intro-text-box {
+            box-sizing: border-box;
             margin: 0;
-            padding: 0;
-            height: 200px;
+            padding: 0 80px;
+            height: 230px;
             width: 900px;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: flex-start;
-            background: #234DC0;
-            border: 2px solid #A1B4FF;
+            background: #234dc0;
+            border: 2px solid #a1b4ff;
 
             p {
                 width: 100%;
                 font-size: 17px;
-                margin-left: 100px;
                 text-align: left;
                 letter-spacing: 2px;
+                margin: 0;
+                line-height: 60px;
             }
         }
     }
@@ -370,7 +501,7 @@ export default {
 
             .logo-title {
                 width: 200px;
-                color: #180E8D;
+                color: #180e8d;
             }
         }
 
@@ -489,10 +620,8 @@ export default {
     .police-img {
         border-radius: 50%;
     }
-
 }
 
-
 /* 波浪效果 - 起 */
 
 .waves {
@@ -505,21 +634,21 @@ export default {
     height: 10vh;
 }
 
-.parallax>use {
+.parallax > use {
     animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
 }
 
-.parallax>use:nth-child(1) {
+.parallax > use:nth-child(1) {
     animation-delay: -2s;
     animation-duration: 7s;
 }
 
-.parallax>use:nth-child(2) {
+.parallax > use:nth-child(2) {
     animation-delay: -3s;
     animation-duration: 10s;
 }
 
-.parallax>use:nth-child(3) {
+.parallax > use:nth-child(3) {
     animation-delay: -4s;
     animation-duration: 13s;
 }
@@ -580,9 +709,10 @@ export default {
             li {
                 height: auto;
                 color: #ffffff;
-                font-size: 1.2vw;
+                font-size: 1.5vw;
                 font-weight: 600;
                 letter-spacing: 0.1vw;
+                transform: scale(0.8);
             }
         }
 
@@ -618,7 +748,7 @@ export default {
             background-color: #3466ee;
             color: #ffffff;
             font-size: 1.71vw;
-            letter-spacing: 0.20vw;
+            letter-spacing: 0.2vw;
             line-height: 4.11vw;
             position: absolute;
             bottom: 12%;
@@ -627,7 +757,10 @@ export default {
             border-radius: 0.68vw;
 
             &:hover {
-                background-color: darken(#3466ee, 10%); // 在原背景颜色基础上加深10%
+                background-color: darken(
+                    #3466ee,
+                    10%
+                ); // 在原背景颜色基础上加深10%
             }
         }
     }
@@ -688,22 +821,23 @@ export default {
 
             .intro-text-box {
                 margin: 0;
-                padding: 0;
-                height: 13.7vw;
-                width: 61.64vw;
+                padding: 0vw 0.5vw;
+                height: 16vw;
+                width: 62vw;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: flex-start;
-                background: #234DC0;
-                border: 0.14vw solid #A1B4FF;
+                background: #234dc0;
+                border: 0.14vw solid #a1b4ff;
 
                 p {
-                    width: 61.64vw;
-                    font-size: 1.16vw;
-                    margin-left: 5vw;
+                    width: 100%;
+                    font-size: 1.45vw;
                     text-align: left;
-                    letter-spacing: 0.14;
+                    transform: scale(0.8);
+                    margin: 0;
+                    line-height: 3.8vw;
                 }
             }
         }
@@ -737,7 +871,7 @@ export default {
 
                 .logo-title {
                     width: 13.7vw;
-                    color: #180E8D;
+                    color: #180e8d;
                     font-size: 2.5vw;
                 }
             }
@@ -822,7 +956,8 @@ export default {
         justify-content: center;
         align-items: center;
         color: #cccccc;
-        font-size: 0.82vw;
+        // font-size: 0.82vw;
+        font-size: 1.15vw;
         letter-spacing: 1px;
 
         p {
@@ -832,9 +967,10 @@ export default {
             margin: 0;
             height: 2.05vw;
             line-height: 2.05vw;
+            transform: scale(0.7);
 
             img {
-                width: 1.03vw;
+                width: 1.35vw;
             }
 
             span {
@@ -858,10 +994,8 @@ export default {
         .police-img {
             border-radius: 50%;
         }
-
     }
 
-
     /* 波浪效果 - 起 */
 
     .waves {
@@ -873,21 +1007,21 @@ export default {
         bottom: -2vw;
     }
 
-    .parallax>use {
+    .parallax > use {
         animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
     }
 
-    .parallax>use:nth-child(1) {
+    .parallax > use:nth-child(1) {
         animation-delay: -2s;
         animation-duration: 7s;
     }
 
-    .parallax>use:nth-child(2) {
+    .parallax > use:nth-child(2) {
         animation-delay: -3s;
         animation-duration: 10s;
     }
 
-    .parallax>use:nth-child(3) {
+    .parallax > use:nth-child(3) {
         animation-delay: -4s;
         animation-duration: 13s;
     }