Tcode平台改造升级-关于我们页面开发

src/components/Header/index.vue

@@ -375,13 +375,13 @@
           </div>
         </li>
 
-        <li><a href="javascript:;" class="LNK">关于我们 <i class="ico-arrow-down"></i></a>
-          <div class="nav-hover">
-            <ul class="hover-child">
-              <li class="child-item"><a href="/about/intro" class="LNK">公司介绍</a></li>
-              <li class="child-item"><a href="/about/contact" class="LNK">联系我们</a></li>
-            </ul>
-          </div>
+        <li><a href="/intro" class="LNK">关于我们 <i class="ico-arrow-down"></i></a>
+<!--          <div class="nav-hover">-->
+<!--            <ul class="hover-child">-->
+<!--              <li class="child-item"><a href="/about/intro" class="LNK">公司介绍</a></li>-->
+<!--              <li class="child-item"><a href="/about/contact" class="LNK">联系我们</a></li>-->
+<!--            </ul>-->
+<!--          </div>-->
         </li>
       </ul>
     </div>

src/router/config/home.ts

@@ -186,6 +186,19 @@ export default [
           asideMenu: 'drawer' // 左侧菜单抽屉模式
         }
       },
+      {
+        path: '/intro',
+        name: 'Intro',
+        component: () => import('@/views/Jyh/Intro/index.vue'),
+        meta: {
+          title: '关于我们',
+          reportTitle: '关于我们',
+          className: 'w-full min-w-full',
+          hiddenFooter: true,
+          hasMobile: true,
+          asideMenu: 'drawer' // 左侧菜单抽屉模式
+        }
+      },
       {
         path: 'Insights',
         name: 'Insights',

src/views/Jyh/Intro/component/ItemPower.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="item-power">
+    <h4 class="wow xsddhxg animated" style="visibility: visible;">我们的实力</h4>
+    <div class="power-slider wow xsddhxg animated" style="visibility: visible;">
+      <div class="power-list"> <!-- Flex布局容器 -->
+        <!-- 第一个模块 -->
+        <div class="power-item">
+          <div class="s-item">
+            <img src="@/assets/v3/first.png" alt="演练成绩">
+            <div class="s-txt">
+              <h5>演练成绩</h5>
+              <div class="ul-out">
+                <ul class="EASE">
+                  <li>2024 武汉市东西湖区网络安全实战攻防演练第一名</li>
+                  <li>2023 "磐石行动"东西湖区工业和信息化领域网络安全实战攻防第一名</li>
+                  <li>2022、2023 湖北省数字政府网络安全攻防演练第一名</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 第二个模块 -->
+        <div class="power-item">
+          <div class="s-item">
+            <img src="@/assets/v3/sl5.png" alt="国家级漏洞库全支撑">
+            <div class="s-txt">
+              <h5>国家级漏洞库全支撑</h5>
+              <div class="ul-out">
+                <ul class="EASE">
+                  <li>国家信息安全漏洞共享平台（CNVD）技术组支撑单位</li>
+                  <li>国家信息安全漏洞库（CNNVD）技术支撑单位等级证书（一级）</li>
+                  <li>工业和信息化部网络安全威胁和漏洞信息共享平台（NVDB）</li>
+                  <li>通用网络产品安全漏洞专业库（三星级）</li>
+                  <li>信创政务产品安全漏洞专业库-技术支撑单位（三级）</li>
+                  <li>工业和信息化部移动互联网 APP 产品安全漏洞库-技术支撑单位</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 第三个模块 -->
+        <div class="power-item">
+          <div class="s-item">
+            <img src="@/assets/v3/sl6.png" alt="权威漏洞机构能力认可">
+            <div class="s-txt">
+              <h5>权威漏洞机构能力认可</h5>
+              <div class="ul-out">
+                <ul class="EASE">
+                  <li>NVDB 2023 年度漏洞治理合作最具贡献单位、优秀漏洞合作治理单位、优秀漏洞报送机构</li>
+                  <li>CNVD 2023 年度漏洞信息报送贡献单位、2022 年度漏洞应急工作突出贡献单位</li>
+                  <li>CNVD 2020 年度原创漏洞发现贡献单位、最具价值漏洞奖</li>
+                  <li>CNNVD 2023 年度（第一期）漏洞激励一级贡献奖、二级贡献奖</li>
+                  <li>CNNVD 2024 年度（第一期）漏洞激励一级贡献奖</li>
+                  <li>CNNVD 2023 年度重大漏洞消控优秀贡献奖</li>
+                  <li>CNNVD 2023 年度、2022 年度优秀技术支撑单位</li>
+                  <li>2023 年提交漏洞 1500+，原创漏洞 290+，63%为高危以上漏洞</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ItemPower"
+}
+</script>
+
+<style lang="scss" scoped>
+.pg-intro .item-power {
+  background-color: #f1f2f5;
+  padding: 80px 0;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.pg-intro .item-power h4 {
+  color: #333;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 1px;
+  letter-spacing: 1.7px;
+  line-height: 40px;
+  text-align: center;
+  margin: 0;
+}
+
+.pg-intro .item-power .power-slider {
+  margin: 50px auto 0;
+  width: 100%;
+  max-width: 1600px;
+}
+
+.pg-intro .item-power .power-list {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  gap: 30px;
+  flex-wrap: wrap;
+}
+
+.pg-intro .item-power .power-item {
+  width: calc(33.333% - 20px);
+  min-width: 320px;
+  height: 490px;
+}
+
+.pg-intro .item-power .power-item .s-item {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.pg-intro .item-power .power-item .s-item .hd {
+  display: none;
+}
+
+.pg-intro .item-power .power-item .s-item>img {
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  object-position: center top;
+  width: 100%;
+}
+
+// 核心：s-txt 基础样式 + 过渡动画
+.pg-intro .item-power .power-item .s-txt {
+  background-color: #fffffff5;
+  bottom: 0;
+  color: #333;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  height: 179px; /* 默认高度 */
+  left: 0;
+  line-height: 24px;
+  overflow: hidden;
+  padding: 33px 36px;
+  position: absolute;
+  right: 0;
+  text-align: left;
+  transition: height 0.4s ease-out; /* 仅过渡高度，保证动画流畅 */
+  width: 100%;
+}
+
+// 鼠标悬浮到s-item（整个模块）时，s-txt 高度变为340px
+.pg-intro .item-power .power-item .s-item:hover .s-txt {
+  height: 340px; /* 悬浮延伸高度 */
+}
+
+// 基础状态：ul-out 高度限制，隐藏多余内容
+.pg-intro .item-power .power-item .s-txt .ul-out {
+  height: 70px;
+  overflow: hidden;
+  transition: height 0.4s ease-out; /* 内容高度也加过渡 */
+}
+
+// 悬浮时：ul-out 高度自动，显示全部内容
+.pg-intro .item-power .power-item .s-item:hover .s-txt .ul-out {
+  height: auto;
+  overflow: visible;
+}
+
+.pg-intro .item-power .power-item .s-txt .ul-out ul {
+  margin: 16px 0 0;
+}
+
+.pg-intro .item-power .power-item .s-txt .ul-out ul:first-child {
+  margin: 0;
+}
+
+.pg-intro .item-power .power-item .s-txt h5 {
+  color: #333;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30px;
+  margin: 0 0 5px;
+  text-align: left;
+}
+
+.pg-intro .item-power .power-item .s-txt li {
+  font-style: normal;
+  padding: 0 0 0 16px;
+  position: relative;
+  text-align: left;
+  transition: all .4s ease-out;
+}
+
+.pg-intro .item-power .power-item .s-txt li:after {
+  background: #4bad52;
+  border-radius: 50%;
+  content: "";
+  height: 6px;
+  left: 0;
+  position: absolute;
+  top: 12px;
+  transform: translateY(-50%);
+  width: 6px;
+}
+
+// 响应式适配
+@media (max-width: 1200px) {
+  .pg-intro .item-power .power-item {
+    width: calc(50% - 15px);
+  }
+}
+
+@media (max-width: 768px) {
+  .pg-intro .item-power .power-item {
+    width: 100%;
+    margin-bottom: 20px;
+    // 移动端悬浮高度适当调整（可选）
+    height: auto;
+  }
+  .pg-intro .item-power .power-item .s-txt {
+    height: auto;
+    position: relative;
+  }
+}
+</style>

src/views/Jyh/Intro/component/ItemRank.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="item-rank">
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <div class="JBFont"><span class="comStatistic" data-animation-running="false">90</span><i>+</i></div>
+      <p class="name">发明专利</p></div>
+<!--    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">-->
+<!--      <div class="JBFont"><span class="comStatistic" data-animation-running="false">120</span><i>+</i></div>-->
+<!--      <p class="name">软件著作权</p></div>-->
+<!--    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">-->
+<!--      <div class="JBFont"><span class="comStatistic" data-animation-running="false">20</span></div>-->
+<!--      <p class="name">标准制定</p></div>-->
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <div class="JBFont"><span class="comStatistic" data-animation-running="false">12</span></div>
+      <p class="name">网络安全资质</p></div>
+<!--    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">-->
+<!--      <div class="JBFont"><span class="comStatistic" data-animation-running="false">80</span><i>+</i></div>-->
+<!--      <p class="name">产品资质</p></div>-->
+<!--    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">-->
+<!--      <div class="JBFont"><span class="comStatistic" data-animation-running="false">140</span><i>+</i></div>-->
+<!--      <p class="name">产品兼容性认证</p></div>-->
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <div class="JBFont">数百个</div>
+      <p class="name">高质量漏洞贡献</p></div>
+
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <div class="JBFont"><span class="comStatistic" data-animation-running="false">500</span><i>+</i></div>
+      <p class="name">关基客户</p>
+    </div>
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <div class="JBFont"><span class="comStatistic" data-animation-running="false">10亿</span><i>+</i></div>
+      <p class="name">组件扫描</p>
+    </div>
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <div class="JBFont"><span class="comStatistic" data-animation-running="false">99.9</span><i>%</i></div>
+      <p class="name">检出率</p>
+    </div>
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <div class="JBFont"><span class="comStatistic" data-animation-running="false">7x24</span></div>
+      <p class="name">应急响应</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ItemRank"
+}
+</script>
+
+<style lang="scss" scoped>
+.pg-intro .item-rank {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 auto;
+  padding: 60px 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center
+}
+
+.pg-intro .item-rank .rank-item {
+  padding: 0 40px;
+  position: relative;
+  text-align: center
+}
+
+.pg-intro .item-rank .rank-item:last-child:after {
+  display: none
+}
+
+.pg-intro .item-rank .rank-item:after {
+  border: 1px solid #d8d8d8;
+  content: "";
+  height: 63px;
+  position: absolute;
+  right: -1px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 1px
+}
+
+.pg-intro .item-rank .rank-item>div {
+  font-size: 42px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 1px;
+  line-height: 57px;
+  min-width: 100px;
+  text-align: center
+}
+
+.pg-intro .item-rank .rank-item .name {
+  color: #333;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  margin: -1px 0 0;
+  text-align: center
+}
+</style>

src/views/Jyh/Intro/component/ItemTrip.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="pg-intro item-trip">
+    <h4 class="main-title">我们的旅程</h4>
+
+    <div class="trip-slider" ref="tripSliderRef" @mousemove="handleMouseMove">
+      <swiper
+        :slides-per-view="'auto'"
+        :grab-cursor="true"
+        class="mySwiper"
+      >
+        <swiper-slide v-for="(item, index) in rawTimelineData" :key="index">
+          <div :class="['s-item', item.className, { 'ON': true }]">
+            <div class="imgMask">
+              <img :src="item.image" :alt="item.year">
+            </div>
+
+            <div class="s-txt">
+              <h5>
+                {{ item.year }}
+                <span></span> <!-- 年份下方的圆点 -->
+              </h5>
+              <ul>
+                <li v-for="(txt, i) in item.details" :key="i">{{ txt }}</li>
+              </ul>
+            </div>
+          </div>
+
+          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="timeline-svg">
+            <line v-if="index === 0" x1="0" y1="290" x2="700" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
+
+            <template v-else-if="index === 1">
+              <line x1="0" y1="290" x2="250" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
+              <line x1="250" y1="290" x2="700" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
+            </template>
+
+            <template v-else-if="index === 2">
+              <line x1="0" y1="290" x2="250" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
+              <line x1="250" y1="290" x2="800" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
+            </template>
+
+            <template v-else-if="index === 3">
+              <line x1="0" y1="290" x2="250" y2="280" style="stroke:#4bad52;" stroke-width="2"></line>
+              <line x1="250" y1="280" x2="500" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
+            </template>
+
+            <template v-else-if="index === 4">
+              <line x1="0" y1="290" x2="250" y2="300" style="stroke:#4bad52;" stroke-width="2"></line>
+              <line x1="250" y1="300" x2="500" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
+            </template>
+
+            <template v-else-if="index === 5">
+              <line x1="0" y1="290" x2="700" y2="290" style="stroke:#4bad52;" stroke-width="2"></line>
+            </template>
+          </svg>
+        </swiper-slide>
+      </swiper>
+
+      <div
+        class="btn-tip EASE drop"
+        :class="{ 'drag': isDragging }"
+        :style="cursorStyle"
+      >
+        <i class="ICO"></i>
+        <span>点击并拖动</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+
+// 鼠标跟随逻辑
+const tripSliderRef = ref(null);
+const mouseX = ref(0);
+const mouseY = ref(0);
+const isDragging = ref(false);
+
+const handleMouseMove = (event) => {
+  if (tripSliderRef.value) {
+    const rect = tripSliderRef.value.getBoundingClientRect();
+    mouseX.value = event.clientX - rect.left;
+    mouseY.value = event.clientY - rect.top;
+  }
+};
+
+const cursorStyle = computed(() => {
+  return {
+    left: `${mouseX.value}px`,
+    top: `${mouseY.value}px`,
+    opacity: mouseX.value > 0 && mouseY.value > 0 ? 1 : 0,
+    transform: `translate(-50%, -50%) scale(${isDragging.value ? 1.2 : 1})`,
+  };
+});
+
+import pic1 from '@/assets/v3/intro/1.png'
+import pic2 from '@/assets/v3/intro/2.png'
+import pic3 from '@/assets/v3/intro/3.png'
+import pic4 from '@/assets/v3/intro/4.png'
+
+// 时间线数据
+const rawTimelineData = ref([
+  { year: 'intro_our_journey', image: '1.png', className: 'blank-left', details: ['xxx', 'xxx', 'xxx', 'xxx'] },
+  {
+    year: '2020',
+    image: pic1,
+    className: 's1 ON',
+    details: [
+      '武汉金银湖实验室成立',
+    ]
+  },
+  {
+    year: '2021',
+    image: pic2,
+    className: 's2 ON',
+    details: [
+      '发布SCA'
+    ]
+  },
+  {
+    year: '2023',
+    image: pic3,
+    className: 's3 ON',
+    details: [
+      '武汉金银湖实验室融资'
+    ]
+  },
+  {
+    year: '2025',
+    image: pic4,
+    className: 's4 ON',
+    details: [
+      '推出态势感知中心',
+      // '首次商业化发布漏洞扫描系统：洞察（D-Sensor）',
+      // '核心团队参加世界黑客防御赛 DEFCON CTF 获得全球亚军',
+    ]
+  },
+  {
+    year: '',
+    image: '1.png',
+    className: 'blank-right',
+    details: []
+  }
+]);
+
+</script>
+
+<style lang="scss" scoped>
+/* 原有样式保持不变，新增2015/2016圆点的单独样式 */
+.pg-intro .item-trip {
+  background: linear-gradient(180deg, #000, #1a2c3a);
+  overflow: hidden;
+  padding: 83px 0 66px
+}
+
+.pg-intro .item-trip .main-title {
+  color: #fff;
+  font-size: 28px;
+  font-weight: 400;
+  letter-spacing: 1.7px;
+  line-height: 40px;
+  text-align: center
+}
+
+.pg-intro .item-trip .trip-slider {
+  margin: 50px 0 0;
+  position: relative;
+  height: 500px;
+  cursor: none;
+}
+
+.mySwiper {
+  height: 100%;
+  padding-bottom: 50px;
+}
+
+.pg-intro .item-trip .trip-slider .swiper-slide {
+  padding-right: 100px !important;
+  width: 500px !important;
+  position: relative;
+}
+
+.pg-intro .item-trip .trip-slider .swiper-slide:first-child {padding-top: 74px;}
+.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(2) {padding-top: 33px;}
+.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(3) {padding-top: 29px;}
+.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(4) {padding-top: 29px;}
+.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(5) {padding-top: 29px;}
+.pg-intro .item-trip .trip-slider .swiper-slide:nth-child(6) {padding-top: 29px;}
+
+.pg-intro .item-trip .trip-slider svg {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.pg-intro .item-trip .trip-slider .blank-left, .pg-intro .item-trip .trip-slider .blank-right {
+  visibility: hidden
+}
+
+.pg-intro .item-trip .btn-tip {
+  background: #4bad52;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 14px;
+  height: 100px;
+  width: 100px;
+  line-height: 24px;
+  text-align: center;
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+.pg-intro .item-trip .btn-tip .ICO {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAYCAQAAADgvTPPAAAAAXNSR0IArs4c6QAAAMVJREFUeJzNzr0JQlEMQOGAhQPYvBnEDQRXUCuxdBHB0gmcwFZsBDewtRNLsXOEh3JsrmjxfnIhCaZLuNzzifznsOJO3/C/NVcGOc+hNAVsgIeSkPJju7wIXQ5Kgkc+g+CVVxI88wqCd76FkPITz3wDISpfQ4jMVxCYAa+4fCIcgRsdEWHEE1iGAgouwOmzzmMJKX+m9z0FEirykYSafBShIR9BaMl7ExR5T4Iy70XIyP8QhoaAXUZeRIQpewpDwIJtRj5y3lb5MPSwyxcQAAAAAElFTkSuQmCC);
+  display: block;
+  height: 12px;
+  margin: 34px auto 7px;
+  width: 32px
+}
+
+.pg-intro .item-trip .trip-slider .s-item {
+  color: #fff;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 27px;
+  text-align: left
+}
+
+.pg-intro .item-trip .trip-slider .s-item h5 {
+  background: linear-gradient(15deg, #49ac8c, #79ba49);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-size: 28px;
+  font-weight: 400;
+  letter-spacing: 1.7px;
+  line-height: 40px;
+  position: relative;
+  text-align: center
+}
+
+/* 通用圆点样式 */
+.pg-intro .item-trip .trip-slider .s-item h5 span {
+  background: #4bad52;
+  border-radius: 50%;
+  bottom: -20px;
+  height: 14px;
+  left: 50%;
+  position: absolute;
+  transform: translate(-50%);
+  width: 14px;
+  z-index: 2; /* 确保圆点在线上方 */
+}
+
+/* 2015的圆点：在线上方抬高 */
+.pg-intro .item-trip .trip-slider .s-item.s3 h5 span {
+  bottom: -10px; /* 比默认高10px，位于线（y=280）的上方 */
+}
+
+/* 2016的圆点：在线下方降低 */
+.pg-intro .item-trip .trip-slider .s-item.s4 h5 span {
+  bottom: -30px; /* 比默认低10px，位于线（y=300）的下方 */
+}
+
+.pg-intro .item-trip .trip-slider .s-item .imgMask {
+  height: 176px;
+  margin: 0 auto 26px;
+  width: 176px;
+  overflow: hidden;
+  border-radius: 50%;
+}
+
+.pg-intro .item-trip .trip-slider .s-item .imgMask img {
+  display: block;
+  height: 0;
+  margin: 0 auto;
+  width: 0;
+  transition: height .4s ease-out, width .4s ease-out;
+  object-fit: cover;
+}
+
+.pg-intro .item-trip .trip-slider .s-item.ON .imgMask img {
+  height: 176px;
+  width: 176px;
+}
+
+.pg-intro .item-trip .trip-slider .s-item .s-txt ul {
+  margin: 50px 0 0
+}
+
+.pg-intro .item-trip .trip-slider li {
+  padding: 0 0 0 16px;
+  position: relative;
+  text-align: left;
+  transition: all .4s ease-out
+}
+
+.pg-intro .item-trip .trip-slider li:after {
+  background: #4bad52;
+  border-radius: 50%;
+  content: "";
+  height: 6px;
+  left: 0;
+  position: absolute;
+  top: 10px;
+  width: 6px
+}
+</style>

src/views/Jyh/Intro/component/ModBanner.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="mod-banner">
+    <div class="txt xyCenter"><p class="zh wow animated" style="visibility: visible;">守护每一行代码的安全</p>
+      <p class="en wow animated" style="visibility: visible;">Profile</p></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ModBanner"
+}
+</script>
+
+<style lang="scss" scoped>
+.pg-intro .mod-banner {
+  background: url(@/assets/v3/banner.C9fFbpMH.png) no-repeat 50%;
+  background-size: 100% 100%;
+  height: 400px;
+  position: relative
+}
+
+.pg-intro .mod-banner .txt {
+  left: 50%;
+  position: absolute;
+  top: 50%
+}
+
+.pg-intro .mod-banner .txt .zh {
+  color: #fff;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 2px;
+  letter-spacing: 1px;
+  line-height: 56px
+}
+
+.pg-intro .mod-banner .txt .en {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 9px;
+  line-height: 20px;
+  text-align: center
+}
+
+.xyCenter {
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+</style>

src/views/Jyh/Intro/component/ModCenter.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="mod-center">
+    <div class="item-who" data-aos="slide-up">
+      <div class="in"><h4 class="wow animated" style="visibility: visible;">我们是谁</h4>
+        <div class="txt wow animated" style="visibility: visible;">
+          <div class="txt-item">
+            <p>武汉金银湖实验室成立于数字安全产业高速发展的关键阶段，是聚焦网络安全、数据安全、人工智能安全等前沿领域的新型研发机构，依托武汉科教资源优势与产业基础，打造集技术攻关、成果转化、人才培养于一体的国家级数字安全创新平台。</p>
+            <p>实验室汇聚了来自国内顶尖高校、科研院所及龙头企业的核心研发团队，深耕实战化网络安全防护、零信任架构、数据安全治理、工业控制系统安全等关键领域，在国家级网络安全攻防演练、关键信息基础设施保护、数字安全技术标准制定等方面成果显著，为区域乃至全国数字安全保障提供核心支撑。</p>
+          </div>
+          <div class="txt-item">
+            <p>面向数字经济时代的安全挑战，武汉金银湖实验室立足"实战导向、技术突破、产业赋能"的核心理念，构建以网络安全攻防验证平台、数据安全治理体系、工业互联网安全防护系统、AI安全风险监测平台等为核心的技术体系，通过政产学研用深度融合，为政府、金融、能源、交通等关键行业提供定制化、体系化的数字安全解决方案与技术服务。</p>
+            <p>金银湖，得名于武汉东西湖核心生态地标，寓意实验室如湖水般包容创新、稳守安全底线；实验室以"守护数字空间安全，赋能数字经济发展"为使命，致力于攻克数字安全领域"卡脖子"技术，推动安全技术创新与产业落地，筑牢数字时代安全屏障。</p>
+          </div>
+        </div>
+      </div>
+      <div class="building wow animated" style="visibility: visible;"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ModCenter"
+}
+</script>
+
+<style lang="scss" scoped>
+.pg-intro .item-who {
+  background: #f5f5f5;
+  position: relative
+}
+
+.pg-intro .item-who .building {
+  background: url(@/assets/v3/building.DsPJNC9Y.png) no-repeat top;
+  background-size: 100% 100%;
+  bottom: 0;
+  height: 95%;
+  position: absolute;
+  right: 0;
+  width: 461px
+}
+
+.pg-intro .item-who .in {
+  margin: 0 auto;
+  max-width: 1236px;
+  padding: 90px 0;
+  position: relative
+}
+
+.pg-intro .item-who h4 {
+  color: #4bad52;
+  font-size: 28px;
+  letter-spacing: 1px;
+  letter-spacing: 1.7px;
+  line-height: 40px
+}
+
+.pg-intro .item-who .txt,.pg-intro .item-who h4 {
+  font-style: normal;
+  font-weight: 400;
+  text-align: left
+}
+
+.pg-intro .item-who .txt {
+  color: #333;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 14px;
+  line-height: 24px;
+  position: relative;
+  z-index: 2
+}
+
+.pg-intro .item-who .txt .txt-item {
+  margin: 0 66px 0 0;
+  text-align: justify;
+  width: 453px
+}
+
+.pg-intro .item-who .txt p {
+  margin: 20px 0 0;
+  text-indent: 2em
+}
+</style>

src/views/Jyh/Intro/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="pg-intro">
+    <ModBanner />
+    <ModCenter />
+    <ItemRank />
+    <ItemPower />
+    <ItemTrip />
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import ModBanner from './component/ModBanner.vue'
+import ModCenter from './component/ModCenter.vue'
+import ItemRank from './component/ItemRank.vue'
+import ItemPower from './component/ItemPower.vue'
+import ItemTrip from './component/ItemTrip.vue'
+
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>