完成开创专项竞赛活动宣传页面

src/components/HomePage.vue

@@ -2,38 +2,29 @@
     <div class="home-page">
         <!-- Banner Section -->
         <div class="banner-section">
+            <!-- 菜单栏 -->
+            <ul>
+                <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/task">创客空间</a></li>
+            </ul>
+            <!-- 标题 -->
             <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>
+            <!-- 下载视频 -->
+            <button class="download-button" @click="downloadVideo">宣传视频下载</button>
             <!-- waves -->
-            <svg
+            <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
-                class="waves"
-                viewBox="0 24 150 28"
-                preserveAspectRatio="none"
-                shapeRendering="auto"
-            >
                 <defs>
-                    <path
+                    <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" />
-                        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
+                    <use href="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" />
-                        href="#wave-path"
+                    <use href="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" />
-                        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>
@@ -41,39 +32,17 @@
 
         <!-- Video Section -->
         <div class="video-section">
-            <video
+            <video class="video-box"
-                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
+                controls autoplay muted></video>
-                autoplay
-                muted
-            ></video>
             <!-- waves -->
-            <svg
+            <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
-                class="waves"
-                viewBox="0 24 150 28"
-                preserveAspectRatio="none"
-                shapeRendering="auto"
-            >
                 <defs>
-                    <path
+                    <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" />
-                        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
+                    <use href="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" />
-                        href="#wave-path"
+                    <use href="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" />
-                        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>
@@ -82,53 +51,26 @@
         <!-- 简介 Section -->
         <div class="intro-section" id="intro">
             <div class="intro-box">
-                <!-- <p>项目简介</p> -->
                 <div class="intro-title-box">
-                    <img
+                    <img class="aside-img" src="../assets/left-icon.png" alt="" />
-                        class="aside-img"
-                        src="../assets/left-icon.png"
-                        alt=""
-                    />
                     <h1 class="intro-title">项目简介</h1>
-                    <img
+                    <img class="aside-img" src="../assets/right-icon.png" alt="" />
-                        class="aside-img"
-                        src="../assets/right-icon.png"
-                        alt=""
-                    />
                 </div>
-                <dir class="intro-text-box">
+                <div class="intro-text-box">
                     <p>项目名称：“开创”系列军事需求解决方案创意征集行动。</p>
                     <p>
-                        选题类别和范围、提案模板等信息，请与项目联络员联系。贾龙飞，19158870920。....
+                        选题类别和范围、提案模板等信息，请与项目联络员联系。贾龙飞，19158870920。
                     </p>
-                </dir>
+                </div>
             </div>
             <!-- waves -->
-            <svg
+            <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
-                class="waves"
-                viewBox="0 24 150 28"
-                preserveAspectRatio="none"
-                shapeRendering="auto"
-            >
                 <defs>
-                    <path
+                    <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" />
-                        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
+                    <use href="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" />
-                        href="#wave-path"
+                    <use href="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" />
-                        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>
@@ -136,27 +78,96 @@
 
         <!-- logo Section -->
         <div class="logo-section" id="bigLogo">
-            <div class="logo-box"></div>
+            <div class="logo-box">
-            <!-- <p>项目LOGO</p> -->
+                <div class="logo-title-box">
+                    <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="" />
+                </div>
+                <div class="logo-icon-box">
+                    <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">
+                <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="poster-section" id="poster">
-            <div class="poster-box"></div>
+            <div class="poster-box">
-            <!-- <p>宣传海报</p> -->
+                <div class="poster-title-box">
+                    <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="" />
+                </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="">
+                </div>
+            </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="rgb(22, 32, 70)" />
+                </g>
+            </svg>
         </div>
 
         <!-- footer Section -->
-        <div class="footer-section" id="footer"></div>
+        <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>
+            </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>
+            </p>
+        </div>
     </div>
 </template>
-  
+
 <script>
 export default {
     name: "HomePage",
+    methods: {
+        downloadVideo() {
+            // 创建一个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
+            // 设置下载属性，给下载的文件命名为kaichaung-video.mp4
+            link.setAttribute('download', 'kaichaung-video.mp4');
+            // 模拟点击a标签以开始下载
+            document.body.appendChild(link);
+            link.click();
+            // 移除a标签
+            document.body.removeChild(link);
+        }
+    }
 };
 </script>
-  
+
 <style scoped lang="scss">
 .banner-section {
     width: 100%;
@@ -167,6 +178,45 @@ export default {
     background-size: cover;
     background-position: center;
 
+    ul {
+        list-style-type: none;
+        margin: 0px;
+        padding: 0px;
+        width: 450px;
+        height: 75px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        top: 0px;
+        left: 50px;
+
+        img {
+            width: 130px;
+            margin-right: 30px;
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+            outline: none;
+            display: flex;
+            align-items: center;
+
+            &:hover {
+                color: rgb(88, 93, 230);
+            }
+        }
+
+        li {
+            height: auto;
+            color: #ffffff;
+            font-size: 18px;
+            font-weight: 600;
+            letter-spacing: 2px;
+        }
+    }
+
     .logo-and-title {
         width: 1300px;
         height: auto;
@@ -175,6 +225,7 @@ export default {
         left: 50%;
         transform: translate(-50%, -50%);
         display: flex;
+
         .banner-logo {
             width: 200px;
             height: auto;
@@ -184,6 +235,7 @@ export default {
             width: 30px;
             height: auto;
         }
+
         .banner-title {
             width: 1070px;
             height: auto;
@@ -203,6 +255,11 @@ export default {
         bottom: 12%;
         left: 50%;
         transform: translate(-50%, -50%);
+        border-radius: 10px;
+
+        &:hover {
+            background-color: darken(#3466ee, 10%); // 在原背景颜色基础上加深10%
+        }
     }
 }
 
@@ -224,7 +281,7 @@ export default {
 
 .intro-section {
     width: 100%;
-    height: 500px;
+    height: 600px;
     background-color: #180e8d;
     position: relative;
 
@@ -236,8 +293,67 @@ export default {
         left: 50%;
         transform: translate(-50%, -50%);
         color: #ffffff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
         .intro-title-box {
+            height: 150px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 60px;
+
+            .aside-img {
+                width: 300px;
+                height: auto;
+            }
+
+            .intro-title {
+                width: 200px;
+                letter-spacing: 2px;
+            }
+        }
+
+        .intro-text-box {
+            margin: 0;
+            padding: 0;
+            height: 200px;
+            width: 900px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            background: #234DC0;
+            border: 2px solid #A1B4FF;
+
+            p {
+                width: 100%;
+                font-size: 17px;
+                margin-left: 100px;
+                text-align: left;
+                letter-spacing: 2px;
+            }
+        }
+    }
+}
+
+.logo-section {
+    width: 100%;
+    height: 560px;
+    background-color: #dae5ff;
+    position: relative;
+
+    .logo-box {
+        width: 1100px;
+        height: 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        .logo-title-box {
             height: 200px;
             width: 100%;
             display: flex;
@@ -249,50 +365,36 @@ export default {
                 height: auto;
             }
 
-            .intro-title {
+            .logo-title {
                 width: 200px;
+                color: #180E8D;
             }
         }
 
-        .intro-text-box {
+        .logo-icon-box {
             margin: 0;
             padding: 0;
-            height: 200px;
             width: 100%;
+            height: auto;
             display: flex;
-            flex-direction: column;
+            justify-content: center;
-            justify-content: flex-start;
+            align-items: center;
-            align-items: flex-start;
 
-            p {
+            img {
-                width: 100%;
+                width: 150px;
-                font-size: 18px;
+                height: auto;
-                margin-left: 100px;
+                margin: 0px 50px;
             }
         }
     }
 }
 
-.logo-section {
-    width: 100%;
-    height: 500px;
-    background-color: #dae5ff;
-    position: relative;
-    .logo-box {
-        width: 1100px;
-        height: 100%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-}
-
 .poster-section {
     width: 100%;
-    height: 600px;
+    height: 800px;
     background-color: #180e8d;
     position: relative;
+
     .poster-box {
         width: 1100px;
         height: 100%;
@@ -300,6 +402,42 @@ export default {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        color: #ffffff;
+
+        .poster-title-box {
+            height: 200px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 25px;
+
+            img {
+                width: 200x;
+                height: auto;
+            }
+
+            .poster-title {
+                width: 200px;
+                letter-spacing: 2px;
+            }
+        }
+
+        .poster-picture-box {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+                width: 300px;
+                height: auto;
+                margin: 0px 30px;
+            }
+        }
     }
 }
 
@@ -307,8 +445,51 @@ export default {
     width: 100%;
     height: 200px;
     background-color: rgb(22, 32, 70);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #cccccc;
+    font-size: 12px;
+    letter-spacing: 1px;
+
+    p {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0;
+        height: 30px;
+        line-height: 30px;
+
+        img {
+            width: 15px;
+        }
+
+        span {
+            display: flex;
+            align-items: center;
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+            outline: none;
+            display: flex;
+            align-items: center;
+
+            &:hover {
+                color: rgb(250, 197, 53);
+            }
+        }
+    }
+
+    .police-img {
+        border-radius: 50%;
+    }
+
 }
 
+
 /* 波浪效果 - 起 */
 .waves {
     width: 100%;
@@ -319,29 +500,35 @@ export default {
     bottom: -2px;
     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;
 }
+
 @keyframes move-forever {
     0% {
         transform: translate3d(-90px, 0, 0);
     }
+
     100% {
         transform: translate3d(85px, 0, 0);
     }
 }
+
 /* 波浪效果 - 止 */
-</style>
+</style>
-