Tcode平台改造升级-解决方案页面开发

src/App.vue

@@ -184,34 +184,4 @@ body {
   font-weight: 400;
   word-break: break-word;
 }
-
-.LNK:link, .LNK:visited {
-  color: #fff;
-}
-
-
-img {
-  -webkit-transition: all .2s ease-out .1s;
-  transition: all .2s ease-out .1s;
-}
-
-img:hover {
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -webkit-transform: matrix(1.02, 0, 0, 1.02, 0, 0);
-  transform: matrix(1.02, 0, 0, 1.02, 0, 0);
-}
-
-.animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-
-.swiper-button-prev, .swiper-button-next {
-  color: white !important;
-}
-
 </style>

src/assets/css/jyh.scss

@@ -463,3 +463,77 @@
     padding: 20px !important;
   }
 }
+
+
+.LNK:link, .LNK:visited {
+  color: #fff;
+}
+
+
+img {
+  -webkit-transition: all .2s ease-out .1s;
+  transition: all .2s ease-out .1s;
+}
+
+img:hover {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform: matrix(1.02, 0, 0, 1.02, 0, 0);
+  transform: matrix(1.02, 0, 0, 1.02, 0, 0);
+}
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+
+.swiper-button-prev, .swiper-button-next {
+  color: white !important;
+}
+
+.GreenBtn {
+  background: #4bad52;
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  letter-spacing: .5px;
+  text-align: center;
+  -webkit-transition: all .4s ease-out;
+  transition: all .4s ease-out;
+}
+
+.GreenBtn:hover {
+  background: #7aba4a;
+}
+
+.GreenBtn .ICO {
+  left: 6px;
+  position: relative;
+}
+
+.EASE {
+  -webkit-transition: all .4s ease-out;
+  transition: all .4s ease-out;
+}
+
+.ICO {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.ic-down {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAMAAADJYP15AAAAAXNSR0IArs4c6QAAAHhQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////xqjkrAAAACd0Uk5TAAIGChUWIywtLjNES1Zpa3Z3eHl6e3x9hYiTm526u7/G0uzu9fj5nSjk/AAAAHxJREFUKM+1zEcOwjAABdEBTHESQi+mm+J//xuyIBJJbCQWMMu3GHjXJVV576fYafhHHn3Bg71pcL7rAIzlTY2LcO0BsHm5kwWKcMuqzVreVFxTWMkbnGxTYSFvnGxLYS5/0LKtMJOkSGGaVJhcMn7c9hR1zOEcoh7lh8UTxpYPktza7JUAAAAASUVORK5CYII=);
+  margin: 0 10px 0 0;
+  width: 11px;
+}
+
+.ic-arow, .ic-down {
+  display: inline-block;
+  height: 12px;
+}

src/components/Header/index.vue

@@ -339,13 +339,13 @@
           <!---->
         </li>
 
-        <li><a href="javascript:;" class="LNK">解决方案 <i class="ico-arrow-down"></i></a>
+        <li><a href="/solutions" class="LNK">解决方案 <i class="ico-arrow-down"></i></a>
-          <div class="nav-hover">
+<!--          <div class="nav-hover">-->
-            <ul class="hover-child">
+<!--            <ul class="hover-child">-->
-              <li class="child-item"><a href="/solutions/industry1" class="LNK">行业解决方案 1</a></li>
+<!--              <li class="child-item"><a href="/solutions/industry1" class="LNK">行业解决方案 1</a></li>-->
-              <li class="child-item"><a href="/solutions/industry2" class="LNK">行业解决方案 2</a></li>
+<!--              <li class="child-item"><a href="/solutions/industry2" class="LNK">行业解决方案 2</a></li>-->
-            </ul>
+<!--            </ul>-->
-          </div>
+<!--          </div>-->
         </li>
 
         <li><a href="javascript:;" class="LNK">数据服务 <i class="ico-arrow-down"></i></a>

src/router/config/home.ts

@@ -31,6 +31,18 @@ export default [
           asideMenu: 'drawer' // 左侧菜单抽屉模式
         }
       },
+      {
+        path: '/solutions',
+        name: 'solutions',
+        component: () => import('@/views/Jyh/solutions/index.vue'),
+        meta: {
+          title: '解决方案',
+          className: 'w-full min-w-full',
+          hiddenFooter: true,
+          hasMobile: true,
+          asideMenu: 'drawer'
+        }
+      },
       {
         path: '/repoDetail/AIRepair',
         name: 'AIRepair',

src/views/Jyh/solutions/component/SltBrand.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="slt-brand" id="JTabAnchor">
+    <!-- 使用 vue-fast-marquee 组件替代原生 marquee 结构 -->
+    <div class="vfm-marquee-container wow animated">
+      <!-- 核心滚动组件：配置滚动参数匹配原有效果 -->
+      <Marquee
+        direction="left"
+        speed="20"
+        pauseOnHover="true"
+        pauseOnClick="false"
+        loop="infinite"
+        gradient="false"
+        class="vfm-marquee"
+      >
+        <!-- 图片列表（复用原有图片，仅调整容器结构） -->
+        <div class="vfm-parent">
+          <img src="@/assets/v3/brand/aiqiyi.jpg" alt="">
+          <img src="@/assets/v3/brand/bili.jpg" alt="">
+          <img src="@/assets/v3/brand/chinasouth.jpg" alt="">
+          <img src="@/assets/v3/brand/cm.jpg" alt="">
+          <img src="@/assets/v3/brand/didi.jpg" alt="">
+          <img src="@/assets/v3/brand/guangfa.jpg" alt="">
+          <img src="@/assets/v3/brand/guangfazhengqusn.jpg" alt="">
+          <img src="@/assets/v3/brand/guoxin.jpg" alt="">
+          <img src="@/assets/v3/brand/guozai.jpg" alt="">
+          <img src="@/assets/v3/brand/henanjich.jpg" alt="">
+          <img src="@/assets/v3/brand/huawei.jpg" alt="">
+          <img src="@/assets/v3/brand/kaifa.jpg" alt="">
+          <img src="@/assets/v3/brand/nankai.jpg" alt="">
+          <img src="@/assets/v3/brand/pana.jpg" alt="">
+          <img src="@/assets/v3/brand/sf.jpg" alt="">
+          <img src="@/assets/v3/brand/shanghaizhengquan.jpg" alt="">
+          <img src="@/assets/v3/brand/shenzhenzhengquan.jpg" alt="">
+          <img src="@/assets/v3/brand/spring.jpg" alt="">
+          <img src="@/assets/v3/brand/state.jpg" alt="">
+          <img src="@/assets/v3/brand/tsinghua.jpg" alt="">
+          <img src="@/assets/v3/brand/uni.jpg" alt="">
+          <img src="@/assets/v3/brand/vip.jpg" alt="">
+          <img src="@/assets/v3/brand/vivo.jpg" alt="">
+          <img src="@/assets/v3/brand/xhs.jpg" alt="">
+          <img src="@/assets/v3/brand/xingye.jpg" alt="">
+        </div>
+      </Marquee>
+    </div>
+  </div>
+</template>
+
+<script>
+// 1. 导入 vue-fast-marquee 组件
+import {Marquee} from 'vue-fast-marquee';
+import 'vue-fast-marquee/style.css';
+
+export default {
+  name: "SltBrand",
+  // 2. 注册组件
+  components: {
+    Marquee
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pg-solutions .slt-brand {
+  background-color: #fff;
+  padding: 17px 0
+}
+
+.pg-solutions .slt-brand img {
+  display: inline-block;
+  height: 66px;
+  margin: 0 44px 0 0;
+  width: 166px;
+  /* 确保图片垂直居中 */
+  vertical-align: middle;
+}
+
+/* 适配 vue-fast-marquee 组件样式，保留原有视觉 */
+.vfm-marquee-container {
+  width: 100%;
+  overflow: hidden; /* 隐藏滚动溢出 */
+}
+
+.vfm-marquee {
+  /* 继承原有容器样式 */
+  width: 100%;
+}
+
+.vfm-parent {
+  /* 确保图片行内排列，无换行 */
+  white-space: nowrap;
+}
+</style>

src/views/Jyh/solutions/component/SltTabs.vue

@@ -0,0 +1,518 @@
+<template>
+  <div class="slt-tabs wow animated" style="visibility: visible;">
+    <div class="tab-hd">
+      <div class="hd-item on"><span>行业解决方案</span></div>
+    </div><!---->
+    <div class="tab-bd bd-industry" style="">
+      <!-- 左侧行业标签栏（新增选中逻辑） -->
+      <div class="bd-tab">
+        <div class="bd-tab-inner">
+          <!-- 新增：所有行业案例（默认选中） -->
+          <div
+            class="bd-tab-item"
+            :class="{on: activeTab === 0}"
+            @click="changeTab(0)"
+          >
+            <div class="text-wrap">
+              <div class="main-text">所有行业案例</div>
+            </div>
+          </div>
+
+          <!-- 第一行4个行业 -->
+          <div
+            class="bd-tab-item"
+            :class="{on: activeTab === 1}"
+            @click="changeTab(1)"
+          >
+            <span class="icon">⚡</span>
+            <div class="text-wrap">
+              <div class="main-text">能源</div>
+              <div class="sub-text">电力/电网安全</div>
+            </div>
+          </div>
+          <div
+            class="bd-tab-item"
+            :class="{on: activeTab === 2}"
+            @click="changeTab(2)"
+          >
+            <span class="icon">🚆</span>
+            <div class="text-wrap">
+              <div class="main-text">交通</div>
+              <div class="sub-text">铁路/民航系统</div>
+            </div>
+          </div>
+          <div
+            class="bd-tab-item"
+            :class="{on: activeTab === 3}"
+            @click="changeTab(3)"
+          >
+            <span class="icon">🏦</span>
+            <div class="text-wrap">
+              <div class="main-text">金融</div>
+              <div class="sub-text">银行/证券风控</div>
+            </div>
+          </div>
+          <div
+            class="bd-tab-item"
+            :class="{on: activeTab === 4}"
+            @click="changeTab(4)"
+          >
+            <span class="icon">💧</span>
+            <div class="text-wrap">
+              <div class="main-text">水利</div>
+              <div class="sub-text">水务工控安全</div>
+            </div>
+          </div>
+
+          <!-- 第二行4个行业 -->
+          <div
+            class="bd-tab-item"
+            :class="{on: activeTab === 5}"
+            @click="changeTab(5)"
+          >
+            <span class="icon">🏛️</span>
+            <div class="text-wrap">
+              <div class="main-text">公共</div>
+              <div class="sub-text">服务/市政</div>
+            </div>
+          </div>
+          <div
+            class="bd-tab-item"
+            :class="{on: activeTab === 6}"
+            @click="changeTab(6)"
+          >
+            <span class="icon">💻</span>
+            <div class="text-wrap">
+              <div class="main-text">电子</div>
+              <div class="sub-text">政务/数字政府</div>
+            </div>
+          </div>
+          <div
+            class="bd-tab-item"
+            :class="{on: activeTab === 7}"
+            @click="changeTab(7)"
+          >
+            <span class="icon">🎖️</span>
+            <div class="text-wrap">
+              <div class="main-text">国防</div>
+              <div class="sub-text">科技/军工</div>
+            </div>
+          </div>
+          <div
+            class="bd-tab-item"
+            :class="{on: activeTab === 8}"
+            @click="changeTab(8)"
+          >
+            <span class="icon">📡</span>
+            <div class="text-wrap">
+              <div class="main-text">通信</div>
+              <div class="sub-text">运营商/5G</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧内容区（可根据activeTab扩展不同行业内容） -->
+      <div class="bd-con">
+        <div class="bd-con-inner">
+          <!-- 默认显示所有行业/金融行业内容，可扩展其他行业 -->
+          <div class="bd-con-item"><h4>证券期货业数据报送安全运营解决方案</h4>
+            <p class="descs">
+              证券期货业网络和信息安全态势感知平台获取行业各机构上报的网络安全监测数据，促进行业安全风险的快速处置及闭环。通过解读证监会最新要求和定期更新，基于多源数据自动收集与聚合、智能威胁检测、自动化事件响应等技术，满足合规告警数据生成及自动上报工作，为客户轻松满足上报合规的同时提升网络安全防护及运营能力。</p>
+            <div class="keys">关键词：证券期货业 丨 行业态感 丨 数据上报 丨 合规 丨 SOAR 丨 多源聚合</div>
+            <span class="EASE GreenBtn btn-down"><i class="EASE ICO ic-down"></i> 下载方案</span></div>
+          <div class="bd-con-item"><h4>金融机构场景化Web安全建设解决方案</h4>
+            <p class="descs">
+              随着金融行业互联网应用的快速发展，每家金融机构都具有各自特色的Web业务及网络架构，因此也带来了在不同场景下的Web应用防护建设需求，包括如DMZ/外联区/办公区等各区域边界的防护、混合云环境的一体化防护、信创/国产化建设改造、API安全、BOT防护等等，通过雷池WAF可一站式解决如上Web应用防护需求，在各类环境中提供出色的检测能力和稳定性。</p>
+            <div class="keys">关键词：WAF 丨 WAAP 丨 Web应用 丨 边界防护 丨 混合云 丨 信创 丨 国产化 丨 检测异构</div>
+            <span class="EASE GreenBtn btn-down"><i class="EASE ICO ic-down"></i> 下载方案</span></div>
+          <div class="bd-con-item"><h4>金融行业蓝军工具建设方案</h4>
+            <p class="descs">
+              近年来大量金融机构加大对蓝军建设的投入，参与内外部攻防/竞赛、内部安全检查、上线前测试等工作，需要可兼容实战运营场景、原生支持安全左移与蓝军工具、具有专业攻防服务支撑、适配多种编排场景、且能够实现高投入产出比的方案。本方案通过洞鉴实现实战与运营场景的兼容，无需大量开发和费用投入即可建立起客户自己的SDLC自动运营体系。</p>
+            <div class="keys">关键词：蓝军建设 丨 攻击队 丨 DevSecOps 丨 SDL 丨 攻防演练 丨 上线前测试 丨 竞赛工具</div>
+            <span class="EASE GreenBtn btn-down"><i class="EASE ICO ic-down"></i> 下载方案</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SltTabs",
+  data() {
+    return {
+      // 选中的tab索引：0=所有行业，1=能源，2=交通，3=金融，4=水利，5=公共，6=电子，7=国防，8=通信
+      activeTab: 0
+    };
+  },
+  methods: {
+    // 切换选中的行业tab
+    changeTab(index) {
+      this.activeTab = index;
+      // 可扩展：根据index加载对应行业的内容
+      // 示例：if(index === 1) { 加载能源行业内容 }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.pg-solutions .slt-tabs {
+  margin: 0 auto;
+  max-width: 1440px;
+  padding-bottom: 20px
+}
+
+.pg-solutions .slt-tabs .tab-hd {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 333px;
+  width: 1097px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 24px;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: .5px;
+  letter-spacing: 0;
+  line-height: 40px;
+  line-height: 47px
+}
+
+.pg-solutions .slt-tabs .tab-hd .hd-item {
+  cursor: pointer;
+  line-height: 40px;
+  margin: 0 5.5px;
+  padding: 34px 115px 37px 57px
+}
+
+.pg-solutions .slt-tabs .tab-hd .hd-item span {
+  display: block;
+  position: relative;
+  text-align: center
+}
+
+.pg-solutions .slt-tabs .tab-hd .hd-item span .ic-hot {
+  background-image: url(data:image/png;base64,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);
+  height: 27px;
+  position: absolute;
+  right: -40px;
+  top: -20px;
+  width: 57px
+}
+
+.pg-solutions .slt-tabs .tab-hd .hd-item.on {
+  color: #7aba4a;
+  font-style: normal
+}
+
+.pg-solutions .slt-tabs .tab-bd {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 10px
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-tab {
+  -ms-flex-negative: 0;
+  flex-shrink: 0
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-inner {
+  background: #fff;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 2 30px 0 rgba(0,0,0,.1);
+  box-shadow: 0 2 30px #0000001a;
+  padding: 43px 0 105px;
+  width: 264px
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  height: 75px;
+  letter-spacing: .5px;
+  line-height: 22px;
+  padding: 0 30px 0 58px;
+  position: relative;
+  text-align: left;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-transition: all .4s ease-out;
+  transition: all .4s ease-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none
+}
+
+/* 新增：emoji图标样式 */
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item .icon {
+  font-size: 18px;
+  margin-right: 12px;
+  line-height: 1;
+}
+
+/* 新增：文字容器样式（主标题+小字） */
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item .text-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* 新增：主文字样式 */
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item .main-text {
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 2px;
+}
+
+/* 新增：小字描述样式 */
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item .sub-text {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.2;
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item:before {
+  background: #4bad52;
+  content: "";
+  display: none;
+  height: 42px;
+  left: 46px;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  -webkit-transition: all .4s ease-out;
+  transition: all .4s ease-out;
+  width: 4px
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item:hover {
+  color: #4bad52;
+  /* 新增：hover时小字也变色 */
+}
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item:hover .main-text {
+  color: #4bad52;
+}
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item:hover .sub-text {
+  color: #4bad52;
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item.on {
+  background: linear-gradient(137deg,#eee,#d8d8d8);
+  color: #4bad52
+}
+
+/* 新增：选中时文字颜色 */
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item.on .main-text {
+  color: #4bad52;
+}
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item.on .sub-text {
+  color: #4bad52;
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item.on:after,.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item.on:before {
+  display: block
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-tab .bd-tab-item:after {
+  border: 15px solid #f1f2f5;
+  border-right-color: #e9eaed;
+  content: " ";
+  display: none;
+  height: 0;
+  pointer-events: none;
+  position: absolute;
+  right: -59px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 0
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con {
+  background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.03)),to(transparent));
+  background: linear-gradient(180deg,rgba(0,0,0,.03),transparent);
+  margin: 0 0 0 59px;
+  padding: 44px 103px 0 51px;
+  position: relative;
+  width: 100%
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-tit {
+  border-bottom: 2px solid rgba(0,0,0,.1);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 1.5px;
+  line-height: 33px;
+  padding: 34px 120px 27px 0;
+  position: relative
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-tit .btn-down {
+  color: #fff;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 1px;
+  line-height: 38px;
+  padding: 0 18px;
+  position: absolute;
+  right: 0;
+  text-align: justify;
+  top: 50%;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-tit .btn-down:hover .ic-down {
+  left: 6px;
+  top: 2px
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-inner {
+  background-color: #fff;
+  color: #333;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: .5px;
+  line-height: 24px;
+  margin-bottom: 101px;
+  padding: 0 35px;
+  text-align: justify
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-inner h5 {
+  color: #333;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: .5px;
+  letter-spacing: 1.2px;
+  line-height: 30px;
+  line-height: 25px;
+  margin: 42px 0 14px;
+  text-align: left
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-inner h5:first-child {
+  margin: 29px 0 14px
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-inner p {
+  margin: 14px 0 0
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-inner ul {
+  margin: 0 0 0 13px
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-inner ul li {
+  list-style: none;
+  margin-bottom: 12px;
+  position: relative
+}
+
+.pg-solutions .slt-tabs .tab-bd .bd-con .bd-con-inner ul li:before {
+  background: #4bad52;
+  border-radius: 4px;
+  content: "";
+  height: 7px;
+  left: -13px;
+  position: absolute;
+  top: 9px;
+  width: 7px
+}
+
+.pg-solutions .slt-tabs .bd-hot .bd-con .bd-con-inner {
+  border-radius: 8px;
+  padding-bottom: 60px
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-tab .bd-tab-item {
+  padding: 0 30px 0 57px
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-tab .bd-tab-item.on:before,.pg-solutions .slt-tabs .bd-industry .bd-tab .bd-tab-item:hover:before {
+  display: none
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-con .bd-con-inner {
+  background: none;
+  margin-bottom: 34px;
+  padding: 0
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-con .bd-con-inner .bd-con-item {
+  background: #fff;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,.1);
+  box-shadow: 0 0 25px #0000001a;
+  margin-bottom: 46px;
+  padding: 36px 35px 38px 34px
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-con .bd-con-inner .bd-con-item h4 {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 1.5px;
+  line-height: 33px;
+  text-align: left
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-con .bd-con-inner .bd-con-item .descs {
+  margin: 24px 0 0
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-con .bd-con-inner .bd-con-item .keys {
+  font-weight: 700;
+  margin: 24px 0 0
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-con .bd-con-inner .bd-con-item .btn-down {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  line-height: 38px;
+  margin: 24px 0 0;
+  padding: 0 17px 0 19px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 1px;
+  text-align: justify
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-con .bd-con-inner .bd-con-item .btn-down:hover .ic-down {
+  left: 6px;
+  top: 2px
+}
+
+.pg-solutions .slt-tabs .bd-industry .bd-con .bd-con-inner .bd-con-item .btn-down .ic-down {
+  margin-right: 13px
+}
+</style>

src/views/Jyh/solutions/component/SltTop.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="slt-top">
+    <div class="inner"><h2 class="wow animated" style="visibility: visible;">解决方案</h2>
+      <h3 class="wow animated" style="visibility: visible;">Tcode依托丰富的安全服务经验，深入理解多种实际应用场景，提供一系列成熟且易于实施<br>的解决方案，为更加多元化的企业网络安全体系建设保驾护航。
+      </h3><a href="javascript:;" class="btn GreenBtn EASE wow animated" style="visibility: visible;"><i
+        class="ICO EASE ic-ask"></i> 立即咨询</a></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SltTop"
+}
+</script>
+
+<style lang="scss" scoped>
+.pg-solutions .slt-top {
+  background: url(@/assets/v3/banner.BUj7z768.png) no-repeat 100% 0;
+  background-color: #eaeced;
+  background-size: auto 100%;
+  height: 460px;
+  position: relative
+}
+
+.pg-solutions .slt-top .inner {
+  margin: 0 auto;
+  padding: 153px 0 0;
+  width: 1292px
+}
+
+.pg-solutions .slt-top .inner h2 {
+  color: #333;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 1px;
+  line-height: 56px;
+  text-align: left
+}
+
+.pg-solutions .slt-top .inner h3 {
+  color: #666;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: .5px;
+  line-height: 26px;
+  margin: 10px 0 0;
+  max-width: 735px;
+  text-align: left
+}
+
+.pg-solutions .slt-top .inner .btn {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 38px;
+  line-height: 38px;
+  margin: 30px 0 0;
+  padding: 0 24px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center
+}
+
+.pg-solutions .slt-top .inner .btn:hover .ic-ask {
+  left: 3px
+}
+
+.pg-solutions .slt-top .inner .btn .ic-ask {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAoCAMAAACl6XjsAAAAAXNSR0IArs4c6QAAAMZQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////w08d2gAAAEF0Uk5TAAECBQYHCgsMDRQWGhwkJigtMDM1Ojs8QkZHVFtcaX2AhIyNkZKTlJ+trq+1trfHy8zP1tne5e3v8/j5+vv8/f4/dExkAAABMUlEQVQ4y52U13LCMBBFLxDABhJ6LwYSWmIgdGyD4f7/T/ECQ5BkW5PztjtnRm11gf+Q69lbx9navVyIlJ2ceOc0yQZZjQP9WTdvGPnuzOehobY6Zy4Kj6Kw4LmjsmoeB7FnGRvQq8lWes/ha+eT+7SkWVzGXzvxJS3RShxZF3t1HhNCq8m1vJE1m0JnyL6s9cXtJudsy1qb87c/Zct2ScXpa6Rrt+6F+UP6LsuyVqbrk98mAKRW9KzMSq2tMpbH3xSAKXdFIEgDijtOgdL1UkWYhurlWsKIY4RrGHOEDStRWoUbODSiNIOOjmbS0V1U6whfuheieb26j6X59PdB8rIRgwQAyY93RI5lENKQq5G/jArFB1Sg+s4KlOEgEhA1AoHB9SQ8Bh/YEaH60KIiOpgbzYY/R6b6czMAAAAASUVORK5CYII=);
+  display: inline-block;
+  height: 20px;
+  margin: 0 10px 0 0;
+  width: 19px
+}
+</style>

src/views/Jyh/solutions/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="pg-solutions">
+    <SltTop />
+    <SltBrand />
+    <SltTabs />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineComponent, onMounted } from 'vue';
+import SltTop from './component/SltTop.vue'
+import SltBrand from './component/SltBrand.vue'
+import SltTabs from './component/SltTabs.vue'
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.pg-solutions {
+  background-color: #f1f2f5;
+  color: #000c
+}
+
+</style>