From fbccde4070d20501216d0be814cc83b22d7e2862 Mon Sep 17 00:00:00 2001
From: zhangxzz <zhangxzz@example.org>
Date: Tue, 11 Jun 2024 09:41:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=84=E6=AF=94=E5=8A=9E=E6=B3=95=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HomePage.vue | 919 +++++++++++++++++++-----------------
 1 file changed, 486 insertions(+), 433 deletions(-)

diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 5961c1f..470a4c1 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -1,113 +1,367 @@
 <template>
-    <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>
-                <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>
-            <!-- 标题 -->
-            <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>
-            <!-- 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 -->
-        <div class="video-section">
-            <div class="text-content">
-                <h2>军事需求解决方案论证报告遴选评比办法要点</h2>
-                <p>&emsp;&emsp;为保障“开创”系列军事需求解决方案创意行动（以下简称“开创行动”）顺利开展，确保公平、公正、公开完成军事需求解决方案论证报告评比遴选，
-                    现就遴选评比办法要点进行说明。</p>
-                <h3>一、时间地点</h3>
-                <p>&emsp;&emsp;2024年8月底，地点另行通知。</p>
-                <h3>二、组织领导</h3>
-                <p>&emsp;&emsp;在“开创专项”项目组的指导下，成立评审工作领导小组，下设计划协调组和3个评审专家组。其中，评审专家组主要以申报书评审专家组成员库为基
-                    础，针对低轨星座对抗、订单式火力打击和分布式动态防御3类现实问题，遴选相关领域行业专家成立论证报告评审专家组成员库。</p>
-                <h3>三、评审原则</h3>
-                <p>&emsp;&emsp;“开创行动”军事需求解决方案论证报告评审是对前期通过“开创行动”军事需求解决方案申报书评审的深化研究团队提交的论证报告进行评比遴选。
-                    按照“需求对接、敏捷响应，快速转化、示范引领”的思路，严格评审要求，切实按照标准，评选出能够清晰有效解决实际问题、具有深化研究价值
-                    的创意方案论证报告，主要把握突出完整性、前瞻性、创新性、实践性原则。</p>
-                <h3>四、评审内容</h3>
-                <p>&emsp;&emsp;依据总体方案中明确的3类现实问题，对入围团队提交的“开创行动”军事需求解决方案论证报告进行分组评审。评审分为综合内容评审和专项内容评
-                    审，均依据“开创行动”军事需求解决方案论证报告评比标准进行评判。</p>
-                <p>&emsp;&emsp;<b>（一）综合内容评审。</b>依据标准遴选出各个方面均优秀的论证报告。</p>
-                <p>&emsp;&emsp;<b>（二）专项内容评审。</b>依据标准遴选出在某一方面或则几方面具有明显亮点的论证报告。</p>
-                <h3>五、评审流程</h3>
-                <p>&emsp;&emsp;按照成立专家组、初评、初评结果网络公示、复评、复评结果网络公示的流程组织实施。</p>
-                <p>&emsp;&emsp;<b>（一）成立专家组。</b>分三个步骤：一是基于论证报告评审专家组成员库，区分3类现实问题，临机成立3个评审专家组，每组专家数量不少于11人；各组设组长1名，主要由“开创专项”专家支撑组人员担任。二是临机成立评审专家委员会，以“开创专项”专家支撑组人员为主，设主任委员1名，副主任委员1名，委员不少于11名。三是各评审小组长根据专家专业特长，临机分配每项论证报告的主、副审专家。
-                </p>
-                <p>&emsp;&emsp;<b>（二）初评。</b>按照综合内容评审、专项内容评审、综合评议的顺序，各组以会议评审方式并行组织实施。</p>
-                <p>&emsp;&emsp;<b>综合内容评审。</b>分五个步骤：一是评审专家依据“开创行动”军事需求解决方案论证报告评比标准，重点评审分配的主、副审论证报告，兼顾评审其他论证报告。二是每项论证报告的主、副审专家进行综合评议，独立对作品进行记名评价和量化打分，并从技术角度给出初步评审意见表；同时独立对本组内其他论证报告进行量化打分。三是统计结果，采取百分制，按照组长分数占比15%、主审分数占比15%、副审分数占比10%、其它专家平均分数占比60%规则，计算单个项目总分数（保留小数点后2位），按照分数从高至低限额产生评审结果，多个论证报告分数相同时，评审组长召集集中评议并针对分数相同的项目开展重新打分。四是财务评审，按照评审工作领导小组批准的比例，各组财务专家对入围论证报告开展财务评审。五是确定综合内容评审结果，各评审组长召集会议集中评议，组织填写“开创行动”军事需求解决方案论证报告评审评分表、评审意见表。
-                </p>
-                <p>&emsp;&emsp;<b>专项内容评审。</b>分3个步骤：一是对综合内容评审阶段未入围的论证报告，每位评审专家依据评比标准，各自推荐不超过2份的专项具有明显亮点的项目。二是组长召集专家会议，对推荐的专项集中评议，按照记名限额表决产生专项论证报告初评结果。三是组织入围专项的推荐专家填写评审意见表，组长负责审核。
-                </p>
-                <p>&emsp;&emsp;<b>综合评议。</b>分2个步骤：一是评审专家委员会综合考虑体系构建、领域分布、转化落地、名额数量等因素，区分综合内容和专项内容两大类，逐项评议通过初评的论证报告，必要时请有关组长和主审专家参加，确定评议结果，填写评审情况表。二是评审专家委员会协助向评审领导小组报告初评结果，确定公示名单建议。
-                </p>
-                <p>&emsp;&emsp;<b>（三）初评结果网络公示。</b>初评结果依托“红山开源”平台进行公示，公示周期为7个工作日，项目组负责收集公示意见。</p>
-                <p>&emsp;&emsp;<b>（四）复评。</b>每个赛道初评成绩的前6名进入复评，复评采取现场答辩与专家会议评审相结合方式，按照综合内容答辩、综合评议的顺序开展。</p>
-                <p>&emsp;&emsp;<b>综合内容答辩。</b>分五个步骤：一是根据专业特长和同单位回避等原则，评审专家委员会主任委员和副主任委员商议后确定每项论证报告的主、副审专家。二是答辩，初评入围的每个综合内容项目，安排18分钟答辩时间，其中前8分钟为项目阐述时间，后10分钟为专家提问时间；相应主、副审专家负责提问，其它专家可补充提问。三是综合评审，逐项答辩结束后，主任委员组织综合评审，每名专家委员按照“开创行动”军事需求解决方案论证报告评比标准，独立对所分配的项目进行记名评价和量化打分，并填写专家组评审意见表。四是统计结果，采取百分制，取平均分作为该论证报告的最后得分（保留小数点后2位），80分以上按照分数从高至低限额产生评审结果，分数相同时，主任委员组织对分数相同的项目重新打分。五是确定评审结果，主任委员召集会议集中讨论结果，限额确定入围项目，组织填写评审意见表。
-                </p>
-                <p>&emsp;&emsp;<b>综合评议。</b>评审专家委员会协助向评审领导小组报告复评结果，填写评审情况表，确定公示名单建议。</p>
-                <p>&emsp;&emsp;<b>（五）复评结果网络公示。</b>依托“红山开源”平台进行公示，公示周期为7个工作日，项目组负责收集公示意见。</p>
-                <hr>
-                <p class="p-zhu">
-                    &emsp;&emsp;注：本通知仅对评比办法要点进行简要说明，评审工作领导小组人员名单、评审专家组成员库人员名单不对外公开；军事需求解决方案论证报告评比标准，以及完整评比办法向项目组申请查询（联系人贾龙飞老师，联系电话19158870920）。
-                </p>
-            </div>
-        </div>
-
-        <!-- 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>
-            </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 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>
+        <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>
+      <!-- 标题 -->
+      <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>
+      <!-- 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 -->
+    <div class="video-section">
+      <div class="text-content">
+        <h2>“开创”系列需求解决方案 论证报告遴选评比办法要点</h2>
+        <p>
+          &emsp;&emsp;为保障“开创”系列需求解决方案创意行动（以下简称“开创行动”）顺利开展，确保公平、公正、公开完成需求解决方案论证报告评比遴选，现就遴选评比办法要点进行说明。
+        </p>
+        <h3>一、时间地点</h3>
+        <p>&emsp;&emsp;2024年8月底，地点另行通知。</p>
+        <h3>二、组织领导</h3>
+        <p>
+          &emsp;&emsp;在“开创行动”项目组的指导下，成立评审工作领导小组，下设计划协调组和3个评审专家组。其中，评审专家组主要以申报书评审专家组成员库为基础，针对前期方案中明确的3类现实问题，遴选相关领域行业专家成立论证报告评审专家组成员库。
+        </p>
+        <h3>三、评审原则</h3>
+        <p>
+          &emsp;&emsp;“开创行动”需求解决方案论证报告评审是对前期通过“开创行动”需求解决方案申报书评审的深化研究团队提交的论证报告进行评比遴选。按照“需求对接、敏捷响应，快速转化、示范引领”的思路，严格评审要求，切实按照标准，评选出能够清晰有效解决实际问题、具有深化研究价值的创意方案论证报告，主要把握突出完整性、前瞻性、创新性、实践性原则。
+        </p>
+        <h3>四、评审内容</h3>
+        <p>
+          &emsp;&emsp;依据总体方案中明确的3类现实问题，对入围团队提交的“开创行动”需求解决方案论证报告进行分组评审。评审分为综合内容评审和专项内容评审，均依据“开创行动”需求解决方案论证报告评比标准进行评判。
+        </p>
+        <p>
+          &emsp;&emsp;<b>（一）综合内容评审。</b>依据标准遴选出各个方面均优秀的论证报告。
+        </p>
+        <p>
+          &emsp;&emsp;<b>（二）专项内容评审。</b>依据标准遴选出在某一方面或则几方面具有明显亮点的论证报告。
+        </p>
+        <h3>五、评审流程</h3>
+        <p>
+          &emsp;&emsp;按照成立专家组、初评、初评结果网络公示、复评、复评结果网络公示的流程组织实施。
+        </p>
+        <p>
+          &emsp;&emsp;<b>（一）成立专家组。</b>分三个步骤：一是基于论证报告评审专家组成员库，区分3类现实问题，临机成立3个评审专家组，每组专家数量不少于11人；各组设组长1名，主要由“开创行动”专家支撑组人员担任。二是临机成立评审专家委员会，以“开创行动”专家支撑组人员为主，设主任委员1名，副主任委员1名，委员不少于11名。三是各评审小组长根据专家专业特长，临机分配每项论证报告的主、副审专家。
+        </p>
+        <p>
+          &emsp;&emsp;<b>（二）初评。</b>按照综合内容评审、专项内容评审、综合评议的顺序，各组以会议评审方式并行组织实施。
+        </p>
+        <p>
+          &emsp;&emsp;<b>综合内容评审。</b>分五个步骤：一是评审专家依据“开创行动”需求解决方案论证报告评比标准，重点评审分配的主、副审论证报告，兼顾评审其他论证报告。二是每项论证报告的主、副审专家进行综合评议，独立对作品进行记名评价和量化打分，并从技术角度给出初步评审意见表；同时独立对本组内其他论证报告进行量化打分。三是统计结果，采取百分制，按照组长分数占比15%、主审分数占比15%、副审分数占比10%、其它专家平均分数占比60%规则，计算单个项目总分数（保留小数点后2位），按照分数从高至低限额产生评审结果，多个论证报告分数相同时，评审组长召集集中评议并针对分数相同的项目开展重新打分。四是财务评审，按照评审工作领导小组批准的比例，各组财务专家对入围论证报告开展财务评审。五是确定综合内容评审结果，各评审组长召集会议集中评议，组织填写“开创行动”需求解决方案论证报告评审评分表、评审意见表。
+        </p>
+        <p>
+          &emsp;&emsp;<b>专项内容评审。</b>分3个步骤：一是对综合内容评审阶段未入围的论证报告，每位评审专家依据评比标准，各自推荐不超过2份的专项具有明显亮点的项目。二是组长召集专家会议，对推荐的专项集中评议，按照记名限额表决产生专项论证报告初评结果。三是组织入围专项的推荐专家填写评审意见表，组长负责审核。
+        </p>
+        <p>
+          &emsp;&emsp;<b>综合评议。</b>分2个步骤：一是评审专家委员会综合考虑体系构建、领域分布、转化落地、名额数量等因素，区分综合内容和专项内容两大类，逐项评议通过初评的论证报告，必要时请有关组长和主审专家参加，确定评议结果，填写评审情况表。二是评审专家委员会协助向评审领导小组报告初评结果，确定公示名单建议。
+        </p>
+        <p>
+          &emsp;&emsp;<b>（三）初评结果网络公示。</b>初评结果依托“红山开源”平台进行公示，公示周期为7个工作日，项目组负责收集公示意见。
+        </p>
+        <p>
+          &emsp;&emsp;<b>（四）复评。每个赛道初评成绩的前6名进入复评，</b>复评采取现场答辩与专家会议评审相结合方式，按照综合内容答辩、综合评议的顺序开展。
+        </p>
+        <p>
+          &emsp;&emsp;<b>综合内容答辩。</b>分五个步骤：一是根据专业特长和同单位回避等原则，评审专家委员会主任委员和副主任委员商议后确定每项论证报告的主、副审专家。二是答辩，初评入围的每个综合内容项目，安排18分钟答辩时间，其中前8分钟为项目阐述时间，后10分钟为专家提问时间；相应主、副审专家负责提问，其它专家可补充提问。三是综合评审，逐项答辩结束后，主任委员组织综合评审，每名专家委员按照“开创行动”需求解决方案论证报告评比标准，独立对所分配的项目进行记名评价和量化打分，并填写专家组评审意见表。四是统计结果，采取百分制，取平均分作为该论证报告的最后得分（保留小数点后2位），80分以上按照分数从高至低限额产生评审结果，分数相同时，主任委员组织对分数相同的项目重新打分。五是确定评审结果，主任委员召集会议集中讨论结果，限额确定入围项目，组织填写评审意见表。
+        </p>
+        <p>
+          &emsp;&emsp;<b>综合评议。</b>评审专家委员会协助向评审领导小组报告初评结果，填写评审情况表，确定公示名单建议。
+        </p>
+        <p>
+          &emsp;&emsp;<b>（五）复评结果网络公示。</b>依托“红山开源”平台进行公示，公示周期为7个工作日，项目组负责收集公示意见。
+        </p>
+        <hr />
+        <p class="p-zhu">
+          &emsp;&emsp;注：本通知仅对评比办法要点进行简要说明，评审工作领导小组人员名单、评审专家组成员库人员名单不对外公开；需求解决方案论证报告评比标准，以及完整评比办法向项目组申请查询（联系人贾龙飞老师，联系电话19158870920）。
+        </p>
+      </div>
+    </div>
+
+    <!-- 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
+        >
+      </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: {},
+  name: "HomePage",
+  methods: {},
 };
 </script>
 
 <style scoped lang="scss">
 .banner-section {
-    width: 100%;
-    height: 470px;
+  width: 100%;
+  height: 470px;
+  position: relative;
+  background-image: url("../assets/banner.svg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+
+  ul {
+    list-style-type: none;
+    margin: 0px;
+    padding: 0px;
+    width: 750px;
+    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;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+
+    .banner-logo {
+      width: 200px;
+      height: auto;
+    }
+
+    .banner-blank {
+      width: 30px;
+      height: auto;
+    }
+
+    .banner-title {
+      width: 1070px;
+      height: auto;
+    }
+  }
+}
+
+.video-section {
+  width: 100%;
+  height: auto;
+  background-color: #dae5ff;
+  position: relative;
+  padding-top: 60px;
+  padding-bottom: 60px;
+  display: flex;
+  justify-content: center;
+
+  .text-content {
+    width: 70%;
+    height: auto;
+
+    h3,
+    p {
+      text-align: left;
+      line-height: 30px;
+    }
+
+    h2 {
+      line-height: 50px;
+    }
+
+    hr {
+      border: none;
+      height: 1px;
+      background-color: #cccccc;
+      margin: 30px 0;
+    }
+  }
+}
+
+.footer-section {
+  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%;
+  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);
+  }
+}
+
+/* 波浪效果 - 止 */
+
+/* 媒体查询 - 起 */
+@media (max-width: 600px) {
+  .banner-section {
+    width: 100vw;
+    height: 31.8vw;
     position: relative;
     background-image: url("../assets/banner.svg");
     background-repeat: no-repeat;
@@ -115,405 +369,204 @@ export default {
     background-position: center;
 
     ul {
-        list-style-type: none;
-        margin: 0px;
-        padding: 0px;
-        width: 750px;
-        height: 75px;
+      list-style-type: none;
+      margin: 0px;
+      padding: 0px;
+      width: 54vw;
+      height: 5.1vw;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: absolute;
+      top: 0px;
+      left: 3.4vw;
+
+      img {
+        width: 8.9vw;
+        margin-right: 2vw;
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+        outline: none;
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        position: absolute;
-        top: 0px;
-        left: 50px;
 
-        img {
-            width: 130px;
-            margin-right: 30px;
+        &:hover {
+          color: rgb(88, 93, 230);
         }
+      }
 
-        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;
-        }
+      li {
+        height: auto;
+        color: #ffffff;
+        font-size: 1.72vw;
+        font-weight: 600;
+        letter-spacing: 0.1vw;
+        transform: scale(0.7);
+      }
     }
 
     .logo-and-title {
-        width: 1300px;
+      width: 89vw;
+      height: auto;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+
+      .banner-logo {
+        width: 13.7vw;
         height: auto;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        display: flex;
+      }
 
-        .banner-logo {
-            width: 200px;
-            height: auto;
-        }
+      .banner-blank {
+        width: 2vw;
+        height: auto;
+      }
 
-        .banner-blank {
-            width: 30px;
-            height: auto;
-        }
-
-        .banner-title {
-            width: 1070px;
-            height: auto;
-        }
+      .banner-title {
+        width: 73.3vw;
+        height: auto;
+      }
     }
+  }
 
-}
-
-.video-section {
-    width: 100%;
+  .video-section {
+    width: 100vw;
     height: auto;
     background-color: #dae5ff;
     position: relative;
-    padding-top: 60px;
-    padding-bottom: 60px;
+    padding-top: 6vw;
+    padding-bottom: 6vw;
     display: flex;
     justify-content: center;
 
     .text-content {
-        width: 70%;
-        height: auto;
+      width: 80%;
+      height: auto;
 
-        h3,
-        p {
-            text-align: left;
-            line-height: 30px;
-        }
+      h3,
+      p {
+        text-align: left;
+      }
 
-        h2 {
-            line-height: 50px;
-        }
+      h2 {
+        font-size: 3.2vw;
+        line-height: 5vw;
+      }
 
-        hr {
-            border: none;
-            height: 1px;
-            background-color: #cccccc;
-            margin: 30px 0;
-        }
+      h3 {
+        font-size: 2.8vw;
+        line-height: 4.5vw;
+      }
+
+      p {
+        font-size: 2.5vw;
+        line-height: 4.5vw;
+      }
+
+      hr {
+        border: none;
+        height: 0.02vw;
+        background-color: #cccccc;
+        margin: 4vw 0;
+      }
     }
-}
+  }
 
-.footer-section {
-    width: 100%;
-    height: 200px;
+  .footer-section {
+    width: 100vw;
+    height: 13.7vw;
     background-color: rgb(22, 32, 70);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: #cccccc;
-    font-size: 12px;
+    // font-size: 0.82vw;
+    font-size: 1.34vw;
     letter-spacing: 1px;
 
     p {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0;
+      height: 2.05vw;
+      line-height: 2.05vw;
+      transform: scale(0.6);
+
+      img {
+        width: 1.58vw;
+      }
+
+      span {
         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);
-            }
+      a {
+        text-decoration: none;
+        color: inherit;
+        outline: none;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          color: rgb(250, 197, 53);
         }
+      }
     }
 
     .police-img {
-        border-radius: 50%;
+      border-radius: 50%;
     }
-}
+  }
 
-/* 波浪效果 - 起 */
+  /* 波浪效果 - 起 */
 
-.waves {
-    width: 100%;
-    height: 8vh;
+  .waves {
+    width: 100vw;
+    height: 6vw;
     position: absolute;
     left: 0;
     right: 0;
-    bottom: -2px;
-    height: 10vh;
-}
+    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;
-}
+  }
 
-@keyframes move-forever {
+  @keyframes move-forever {
     0% {
-        transform: translate3d(-90px, 0, 0);
+      transform: translate3d(-6.16vw, 0, 0);
     }
 
     100% {
-        transform: translate3d(85px, 0, 0);
+      transform: translate3d(53.13vw, 0, 0);
     }
-}
+  }
 
-/* 波浪效果 - 止 */
-
-/* 媒体查询 - 起 */
-@media (max-width: 600px) {
-    .banner-section {
-        width: 100vw;
-        height: 31.8vw;
-        position: relative;
-        background-image: url("../assets/banner.svg");
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
-
-        ul {
-            list-style-type: none;
-            margin: 0px;
-            padding: 0px;
-            width: 54vw;
-            height: 5.1vw;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            position: absolute;
-            top: 0px;
-            left: 3.4vw;
-
-            img {
-                width: 8.9vw;
-                margin-right: 2vw;
-            }
-
-            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: 1.72vw;
-                font-weight: 600;
-                letter-spacing: 0.1vw;
-                transform: scale(0.7);
-            }
-        }
-
-        .logo-and-title {
-            width: 89vw;
-            height: auto;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            display: flex;
-
-            .banner-logo {
-                width: 13.7vw;
-                height: auto;
-            }
-
-            .banner-blank {
-                width: 2vw;
-                height: auto;
-            }
-
-            .banner-title {
-                width: 73.3vw;
-                height: auto;
-            }
-        }
-
-    }
-
-    .video-section {
-        width: 100vw;
-        height: auto;
-        background-color: #dae5ff;
-        position: relative;
-        padding-top: 6vw;
-        padding-bottom: 6vw;
-        display: flex;
-        justify-content: center;
-
-        .text-content {
-            width: 80%;
-            height: auto;
-
-            h3,
-            p {
-                text-align: left;
-            }
-
-            h2 {
-                font-size: 3.2vw;
-                line-height: 5vw;
-            }
-
-            h3 {
-                font-size: 2.8vw;
-                line-height: 4.5vw;
-            }
-
-            p {
-                font-size: 2.5vw;
-                line-height: 4.5vw;
-            }
-
-            hr {
-                border: none;
-                height: 0.02vw;
-                background-color: #cccccc;
-                margin: 4vw 0;
-            }
-        }
-    }
-
-    .footer-section {
-        width: 100vw;
-        height: 13.7vw;
-        background-color: rgb(22, 32, 70);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        color: #cccccc;
-        // font-size: 0.82vw;
-        font-size: 1.34vw;
-        letter-spacing: 1px;
-
-        p {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin: 0;
-            height: 2.05vw;
-            line-height: 2.05vw;
-            transform: scale(0.6);
-
-            img {
-                width: 1.58vw;
-            }
-
-            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: 100vw;
-        height: 6vw;
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: -2vw;
-    }
-
-    .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(-6.16vw, 0, 0);
-        }
-
-        100% {
-            transform: translate3d(53.13vw, 0, 0);
-        }
-    }
-
-    /* 波浪效果 - 止 */
+  /* 波浪效果 - 止 */
 }
 
 /* 媒体查询 - 止 */