chore: update

app/components/AppDownloadPopup.vue

+<script setup lang="ts">
+import { useStore } from '@/composables/useStore'
+const { visibleAppDownloadPopup } = useStore()
+
+const closePopup = () => {
+  const store = useStore()
+  visibleAppDownloadPopup.value = false
+}
+</script>
+
+<template>
+  <div class="app-download-popup" v-show="visibleAppDownloadPopup">
+    <div class="app-download-dialog">
+      <div class="app-download-close" @click="closePopup"><IconsIconClose /></div>
+      <div class="app-download-pic">
+        <img src="https://webapp-pub.ezijing.com/www/pc/next/app_screen.png" />
+      </div>
+      <div class="app-download-content">
+        <h2>探索数智世界<br />从<span>数智学堂</span>开始!</h2>
+        <dl>
+          <dt><img src="https://webapp-pub.ezijing.com/www/pc/next/qrcode_app.png" alt="二维码" /></dt>
+          <dd>
+            <h3>扫码下载APP</h3>
+            <p>目前仅支持安卓系统安装，其他版本敬请期待</p>
+          </dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-download-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+
+  .app-download-dialog {
+    position: relative;
+    width: 1000px;
+    height: 500px;
+    background: #ffffff;
+    box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.12);
+    border-radius: 12px 12px 12px 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fff url(https://webapp-pub.ezijing.com/www/pc/next/app_download_bg.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .app-download-close {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    cursor: pointer;
+  }
+  .app-download-pic {
+    width: 340px;
+    img {
+      width: 100%;
+    }
+  }
+  .app-download-content {
+    margin-left: 76px;
+    h2 {
+      font-size: 36px;
+      font-weight: 600;
+      color: #333333;
+      span {
+        color: var(--main-color);
+      }
+    }
+    dl {
+      margin-top: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      dt {
+        width: 114px;
+        height: 114px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      dd {
+        h3 {
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
+        }
+        p {
+          margin-top: 10px;
+          font-size: 12px;
+          color: #6c6c6c;
+        }
+      }
+    }
+  }
+}
+</style>

app/components/AppFooter.vue

@@ -4,6 +4,7 @@ const { locale } = useI18n()
 const items = [
   {
     name: '院校客户',
+    href: '/#school',
     items: [
       {
         name: 'AI教学基础层',
@@ -29,6 +30,7 @@ const items = [
   },
   {
     name: '个人客户',
+    href: '/#personal',
     items: [
       {
         name: '国际留学',
@@ -51,6 +53,7 @@ const items = [
 
   {
     name: '政企客户',
+    href: '/#enterprise',
     items: [
       {
         name: '教育部',

app/components/AppHeader.vue

 <script setup>
 import { Search } from '@element-plus/icons-vue'
 import IconPhone from './icons/IconPhone.vue'
+import { useStore } from '@/composables/useStore'
+const { visibleAppDownloadPopup } = useStore()
 const { locale, setLocale } = useI18n()
 const runtimeConfig = useRuntimeConfig()
 
+const showDownloadPopup = () => {
+  visibleAppDownloadPopup.value = true
+}
+
 const navList = [
   {
     name: '院校客户',
@@ -49,7 +55,7 @@ const navList = [
           { name: 'AI+专业改造', href: '/solution/ai' },
           { name: '新双高建设', href: '/solution/new-double-high' },
           { name: '应用型本科', href: '/solution/applied-undergraduate' },
-          { name: '产教融合实训基地', href: '/digital/base' },
+          { name: '产教融合实训基地', href: '/solution/base' },
           { name: '国赛/省赛/行业赛', href: '/competition' },
           { name: '国际合作', href: '/solution/international' },
         ],
@@ -229,7 +235,7 @@ const navList = [
       { name: '联系我们', href: '/about/contact' },
     ],
   },
-  { name: '下载APP' },
+  { name: '下载APP', onClick: showDownloadPopup },
 ]
 
 const searchKeyword = ref('')
@@ -285,7 +291,8 @@ const handleSearch = () => {
             v-for="item in navList"
             :key="item.name"
             :class="{ 'nav-item': true, 'is-position-relative': !item.isFull }">
-            <NuxtLink :to="item.path" class="nav-link">{{ item.name }}</NuxtLink>
+            <NuxtLink :to="item.path" class="nav-link" v-if="!item.onClick">{{ item.name }}</NuxtLink>
+            <a href="javascript:;" class="nav-link" @click="item.onClick" v-else>{{ item.name }}</a>
             <template v-if="item.items">
               <div class="nav-item-full-box" v-if="item.isFull">
                 <div class="nav-item-full-box-inner">
@@ -447,6 +454,7 @@ const handleSearch = () => {
 }
 
 .register-btn:hover {
+  color: #fff;
   background: rgba(255, 255, 255, 0.1);
 }
 

app/components/AppRightAside.vue

@@ -63,11 +63,8 @@
             width="150px" />
         </div>
       </li>
-      <li>
+      <li @click="showDownloadPopup">
         <div class="text">APP</div>
-        <div class="hover">
-          <img src="https://webapp-pub.ezijing.com/www/pc/next/qrcode_app.png" width="150px" />
-        </div>
       </li>
       <li>
         <div class="text">小程序</div>
@@ -92,7 +89,12 @@
 
 <script setup>
 import { sendCode, checkCode, postNes } from '@/api/index'
+import { useStore } from '@/composables/useStore'
+const { visibleAppDownloadPopup } = useStore()
 
+const showDownloadPopup = () => {
+  visibleAppDownloadPopup.value = true
+}
 const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
 
 const { t } = useI18n()
@@ -175,7 +177,7 @@ watch(
       formInfo.projectId = '1012'
     }
   },
-  { immediate: true }
+  { immediate: true },
 )
 
 const submitEnroll = async () => {

app/components/home/menu.vue

@@ -23,7 +23,7 @@ const menuGroups = [
       {
         name: '数智经济<br/>产教融合基地',
         iconName: 'economy',
-        path: '/digital/base',
+        path: '/solution/base',
       },
       {
         name: '数字教材',

app/components/home/school.vue

@@ -55,7 +55,7 @@ const rows = [
       },
       {
         icon: 6,
-        items: [{ name: '产教融合实训基地', href: '/digital/base' }],
+        items: [{ name: '产教融合实训基地', href: '/solution/base' }],
       },
       {
         icon: 7,

app/components/icons/IconClose.vue

+<script setup lang="ts">
+const props = defineProps({
+  size: { type: [Number, String], default: 32 },
+  color: { type: String, default: '#707070' },
+  bg: { type: String, default: '#ededed' },
+  strokeWidth: { type: [Number, String], default: 2 },
+})
+</script>
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 32 32" role="img">
+    <circle :fill="bg" cx="16" cy="16" r="16" />
+    <line :stroke="color" stroke-linecap="round" :stroke-width="strokeWidth" x1="10" y1="10" x2="22" y2="22" />
+    <line :stroke="color" stroke-linecap="round" :stroke-width="strokeWidth" x1="22" y1="10" x2="10" y2="22" />
+  </svg>
+</template>

app/composables/useStore.ts

+
+const store = reactive({
+  visibleAppDownloadPopup: false,
+});
+
+export const useStore = () => {
+  return toRefs(store);
+}
\ No newline at end of file

app/layouts/default.vue

@@ -4,5 +4,6 @@
     <slot />
     <AppFooter />
     <AppRightAside />
+    <AppDownloadPopup />
   </div>
 </template>

app/pages/about/paid.vue

@@ -16,7 +16,7 @@
       </div>
       <div class="card-bd">
         <div class="news-content">
-          <img src="https://webapp-pub.ezijing.com/hr/images/news.png?v=2" alt="" style="width: 600px" />
+          <img src="https://webapp-pub.ezijing.com/hr/images/news.png?v=2" style="width: 600px" />
           <div class="right-content">
             <ul>
               <span class="AppLink" @click="showQrDialog = true"

app/pages/ai/index.vue

@@ -227,7 +227,7 @@ const tabList = [
               </dl>
             </template>
             <template v-if="tabIndex === 1">
-              <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_2.png" alt="" />
+              <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_2.png" />
             </template>
           </div>
         </div>
@@ -249,8 +249,8 @@ const tabList = [
           产品自研，技术实力雄厚：清控紫荆教育坚持产品自研，技术实力十分雄厚。公司拥有一支30余人的技术研发团队，经过近10年持续自主研发沉淀，技术愈发精湛。团队成员由30余位来自哈佛、哥伦比亚、清华、北大等国际一流大学的人才组成，是国际化的专业团队，且40%以上员工具有研究生及研究生以上学历，高学历人才占比高，为技术研发提供了坚实的人才支撑。此外，公司还持有多项由中华人民共和国国家版权局颁发的计算机软件著作权登记证书，彰显出强大的自主创新与技术成果转化能力。
         </p>
         <div class="bz-pics">
-          <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/fwbz_1.png" alt="" width="278" />
-          <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/fwbz_2.png" alt="" width="962" />
+          <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/fwbz_1.png" width="278" />
+          <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/fwbz_2.png" width="962" />
         </div>
       </div>
     </section>
@@ -301,7 +301,9 @@ const tabList = [
         line-height: 1;
       }
       h2 {
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: 500;
         font-size: 24px;
         color: #ffffff;
@@ -373,7 +375,9 @@ const tabList = [
     }
   }
   .jx-desc {
-    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-family:
+      Source Han Sans CN,
+      Source Han Sans CN;
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
@@ -389,14 +393,18 @@ const tabList = [
       border-radius: 12px;
       h2 {
         padding: 50px 0 20px;
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: bold;
         font-size: 22px;
         text-align: center;
       }
       h3 {
         padding-bottom: 20px;
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: 400;
         font-size: 18px;
         text-align: center;
@@ -411,7 +419,9 @@ const tabList = [
         gap: 14px;
       }
       dt {
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: bold;
         font-size: 30px;
         color: #e3a7b8;
@@ -419,7 +429,9 @@ const tabList = [
       }
       dd {
         h4 {
-          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-family:
+            Source Han Sans CN,
+            Source Han Sans CN;
           font-weight: 500;
           font-size: 18px;
           line-height: 1;
@@ -466,7 +478,9 @@ const tabList = [
     }
   }
   .bz-desc {
-    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-family:
+      Source Han Sans CN,
+      Source Han Sans CN;
     font-weight: 400;
     font-size: 16px;
     color: #333333;
@@ -488,13 +502,17 @@ const tabList = [
         }
       }
       h3 {
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: bold;
         font-size: 22px;
         margin-bottom: 22px;
       }
       p {
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: 400;
         font-size: 16px;
         color: #333333;
@@ -544,14 +562,18 @@ const tabList = [
     &-content {
       h3 {
         padding: 45px 0 30px;
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: 500;
         font-size: 20px;
         color: #ffffff;
         line-height: 1;
       }
       p {
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: 400;
         font-size: 16px;
         color: #ffffff;

app/pages/bi/index.vue

@@ -88,7 +88,7 @@ const tabList = [
               </dl>
             </template>
             <template v-if="tabIndex === 1">
-              <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_2.png" alt="" />
+              <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_2.png" />
             </template>
           </div>
         </div>
@@ -147,7 +147,9 @@ const tabList = [
         line-height: 1;
       }
       h2 {
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: 500;
         font-size: 24px;
         color: #ffffff;
@@ -167,7 +169,9 @@ const tabList = [
   }
 
   .jx-desc {
-    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-family:
+      Source Han Sans CN,
+      Source Han Sans CN;
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
@@ -208,7 +212,9 @@ const tabList = [
     }
   }
   .bz-desc {
-    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-family:
+      Source Han Sans CN,
+      Source Han Sans CN;
     font-weight: 400;
     font-size: 16px;
     color: #333333;
@@ -250,14 +256,18 @@ const tabList = [
     &-content {
       h3 {
         padding: 45px 0 30px;
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: 500;
         font-size: 20px;
         color: #ffffff;
         line-height: 1;
       }
       p {
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
         font-weight: 400;
         font-size: 16px;
         color: #ffffff;

app/pages/platform/new-business-studies/3.vue

+<!-- AIGC网络直播实验室 -->
+<script setup>
+import { ref } from 'vue'
+
+// 核心模块
+const mkList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1.png',
+    title: 'AIGC 内容智造平台',
+    desc: '文生图 / 图生图 / 数字人',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_1.png',
+        title: '集成主流大模型（SD/MJ/ChatGPT）API',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_2.png',
+        title: '开箱即用的 LoRA 模型训练环境',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_3.png',
+        title: '可视化 Prompt 提示词编写助手',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2.png',
+    title: '数字营销实战平台',
+    desc: '投放策略 / 数据回流 / 效果分析',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_1.png',
+        title: 'AIGC 营销全案工作流（Workflow）教学',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_2.png',
+        title: '支持数字人直播间搭建与脚本生成',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_3.png',
+        title: '企业级算力调度，无需高性能本地显卡',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3.png',
+    title: '创意资产管理平台',
+    desc: 'Prompt库 / 模型库 / 版权存证',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_1.png',
+        title: '作品智能评分（构图/色彩/Prompt准确度）',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_2.png',
+        title: '支持生成内容版权存证与确权模拟',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_3.png',
+        title: '与全国大学生广告艺术大赛标准衔接',
+      },
+    ],
+  },
+])
+
+const zyList = ref([
+  { title: '案例1:某国潮美妆品牌 AI产品海报生成与精修', industry: '电商设计', hours: 16 },
+  { title: '案例2:小红书爆款文案生成与 AI配图工作流', industry: '新媒体', hours: 8 },
+  { title: '案例3:基于 ControlNet 的室内装修效果图快速渲染', industry: '房地产', hours: 12 },
+  { title: '案例4:虚拟数字人带货直播间搭建与话术训练', industry: '直播电商', hours: 24 },
+  { title: '案例5:品牌IP 形象(三视图)设计与 3D 化漫游', industry: '品牌管理', hours: 16 },
+  { title: '案例6:快消品包装 LORA 模型训练与风格迁移', industry: '产品包装', hours: 20 },
+  { title: '案例7:短视频分镜脚本自动生成与动态视频合成', industry: '短视频', hours: 16 },
+  { title: '案例8:游戏角色原画概念设计与变体迭代', industry: '游戏娱乐', hours: 12 },
+  { title: '案例9:活动运营主视觉 Key Visual 的多尺寸延展', industry: '活动运营', hours: 8 },
+  { title: '案例10: 企业智能客服问答库搭建与微调实战', industry: '客户服务', hours: 12 },
+])
+
+const numList = ref([
+  { num: '5000+', desc: '条商业级 Prompt 库' },
+  { num: '50', desc: '个行业微调模型' },
+  { num: '200+', desc: '个实操演示视频' },
+  { num: '10', desc: '大营销全案场景' },
+  { num: 'Cloud', desc: '云端算力支持' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '品牌需求Brief',
+    tag: '真实商业场景',
+    name: '企业级需求 Brief 还原',
+    items: [
+      '1:1 还原 4A 广告公司与甲方沟通的原始需求文档；',
+      '培养学生从模糊的商业需求中提炼视觉关键词的能力；',
+      '包含品牌调性规范（VI）与禁忌词（Negative Prompts）分析。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/3/tab1.png',
+  },
+  {
+    title: 'Prompt工程手册',
+    tag: '核心引擎',
+    name: 'Prompt 提示词工程手册',
+    items: [
+      '结构化拆解提示词公式：主体+环境+光影+风格+渲染参数；',
+      '对比不同权重（Weighting）对生成结果的影响；',
+      '包含 Midjourney 与 Stable Diffusion 双平台的参数调优指南。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/3/tab2.png',
+  },
+  {
+    title: 'AIGC工作流PPT',
+    tag: '教学课件',
+    name: 'AIGC 全案实战 PPT',
+    items: [
+      '完整展现从创意构思、草图绘制到 AI 生成、后期精修的全流程；',
+      '深度解析 ControlNet 骨架绑定与边缘检测技术在营销中的应用；',
+      '包含商业版权合规与 AI 标识添加的法律风险规避教学。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/3/tab3.png',
+  },
+  {
+    title: '实操演示视频',
+    tag: '高清录播',
+    name: '专家级实操演示视频',
+    items: [
+      '4K 高清录屏，记录 Stable Diffusion WebUI 的每一个参数设置细节；',
+      '重点演示“局部重绘（Inpainting）”与“扩图（Outpainting）”技巧；',
+      '配套企业导师画外音讲解，剖析“为什么这么调”的底层逻辑。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/3/tab4.png',
+  },
+])
+
+// 标准服务
+const bzfwList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_1.png',
+    title: '平台部署',
+    desc: `私有化算力服务器部署
+SD/WebUI 环境配置
+校园网内网穿透访问
+多账号权限管理系统`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_2.png',
+    title: '资源更新',
+    desc: `每季度新增商业案例
+热门 LoRA 模型库同步
+优秀学生作品库迭代
+教学 PPT 每年升级`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '师资培训',
+    desc: `AIGC 工具操作培训
+寒暑假师资研修班
+双师型教师认证辅导
+教学成果奖申报指导`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '运营支持',
+    desc: `大广赛/互联网+竞赛指导
+校园 AIGC 艺术展策划
+7x24小时技术响应
+企业导师进校园讲座`,
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['一流专业建设咨询', 'AIGC 创客空间规划', '校企横向课题对接', '微专业课程开发'])
+</script>
+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/3/banner.jpg" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>AIGC智能营销实验室</h2>
+          <span></span>
+          <h6>创意 · 效率 · 破圈 · 智能</h6>
+          <p>
+            面向数字媒体、市场营销及电子商务专业，打造“技术+艺术+商业”的融合型实训平台。 集成 Midjourney、Stable
+            Diffusion 及 LLM 大模型营销应用，通过 Prompt 工程与工作流实战， 培养具备 AI 内容生产力的新时代营销人才。
+          </p>
+        </div>
+      </div>
+    </div>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">核心模块</h2>
+        <p class="section-title-desc">构建 AIGC 时代的内容生产与营销闭环</p>
+        <div class="mk-list">
+          <div class="mk-item" v-for="item in mkList" :key="item.title">
+            <div class="box">
+              <img :src="item.icon" />
+              <p>{{ item.title }}</p>
+              <span>{{ item.desc }}</span>
+            </div>
+            <ul>
+              <li v-for="item in item.children" :key="item.title">
+                <img :src="item.icon" />
+                <p>{{ item.title }}</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">商业实战案例资源</h2>
+        <p class="section-info">源自真实商业Brief（需求书），还原 4A 广告公司作业流程</p>
+        <div class="zy">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>场景名称</th>
+                <th>所属行业</th>
+                <th>学时</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in zyList" :key="item.title">
+                <td>{{ item.title }}</td>
+                <td>{{ item.industry }}</td>
+                <td>{{ item.hours }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="num">
+            <li v-for="item in numList" :key="item.desc">
+              <span>{{ item.num }}</span>
+              <em>{{ item.desc }}</em>
+            </li>
+          </ul>
+        </div>
+        <div class="tab">
+          <ul class="tab-header">
+            <li
+              v-for="(item, index) in tabList"
+              :class="{ 'is-active': index === tabActive }"
+              :key="index"
+              @mouseover="tabActive = index">
+              {{ item.title }}
+            </li>
+          </ul>
+          <div class="tab-body" v-for="(item, index) in tabList" :key="index" v-show="index === tabActive">
+            <div class="tab-body-pic">
+              <img :src="item.img" :alt="item.title" />
+            </div>
+            <div class="tab-body-content">
+              <span>{{ item.tag }}</span>
+              <h4>{{ item.title }}</h4>
+              <ul>
+                <li v-for="subItem in item.items" :key="subItem">{{ subItem }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <h2 class="section-title">实验室配套服务</h2>
+        <h3 class="section-subtitle">标准服务</h3>
+        <ul class="bz-list">
+          <li v-for="item in bzfwList" :key="item.title">
+            <img :src="item.icon" />
+            <div class="cover">
+              <h4>{{ item.title }}</h4>
+              <p v-html="item.desc"></p>
+            </div>
+          </li>
+        </ul>
+        <h3 class="section-subtitle">增值服务</h3>
+        <ul class="zz-list">
+          <li v-for="item in zzfwList" :key="item">{{ item }}</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  img {
+    width: 100%;
+    height: 650px;
+    object-fit: cover;
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 1;
+    color: #ffffff;
+    h2 {
+      font-size: 60px;
+      font-family:
+        Source Han Sans CN-Bold,
+        Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+    }
+    h3 {
+      margin-bottom: 20px;
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 4px;
+    }
+    span {
+      margin: 46px 0;
+      width: 60px;
+      height: 6px;
+      background: #ffffff;
+    }
+    h6 {
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+    }
+    p {
+      margin-top: 30px;
+      max-width: 600px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      line-height: 30px;
+    }
+    a {
+      margin-top: 28px;
+      width: 112px;
+      height: 36px;
+      font-size: 16px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 36px;
+      background: #aa1941;
+      text-align: center;
+    }
+  }
+  .cover-inner {
+    height: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+
+.section-inner {
+  width: 1300px;
+  margin: 90px auto;
+}
+.section-title {
+  margin-bottom: 40px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  text-align: center;
+}
+.section-title-desc {
+  margin-bottom: 50px;
+  font-family:
+    Source Han Sans CN,
+    Source Han Sans CN;
+  font-weight: 400;
+  font-size: 18px;
+  color: #666666;
+  line-height: 30px;
+  text-align: center;
+}
+.section-subtitle {
+  display: inline-block;
+  margin: 36px 0;
+  font-size: 20px;
+  line-height: 32px;
+  color: #424242;
+  border-bottom: 1px solid var(--main-color);
+}
+.section-desc {
+  font-size: 16px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+}
+.section-info {
+  margin: 40px 0 70px;
+  font-size: 18px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+  text-align: center;
+}
+
+.section-pic {
+  text-align: center;
+  img {
+    max-width: 100%;
+  }
+}
+.mk-list {
+  display: flex;
+  gap: 60px;
+  .mk-item {
+    flex: 1;
+  }
+  .box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    background-color: var(--main-color);
+    color: #fff;
+    p {
+      margin-top: 40px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
+    span {
+      margin-top: 15px;
+    }
+  }
+  ul {
+    margin-top: 40px;
+  }
+  li {
+    margin-top: 25px;
+    img {
+      margin: 0 18px;
+    }
+    display: flex;
+    align-items: center;
+    height: 60px;
+    background: #f2f2f2;
+    font-size: 15px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #424242;
+  }
+}
+.bz-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 38px;
+  li {
+    position: relative;
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  h4 {
+    padding: 64px 0 45px;
+    font-size: 24px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  p {
+    font-size: 16px;
+    font-family:
+      Source Han Sans CN-Regular,
+      Source Han Sans CN;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 40px;
+    text-align: center;
+    white-space: pre-wrap;
+  }
+}
+.zz-list {
+  display: flex;
+  gap: 25px;
+  li {
+    flex: 1;
+    font-size: 22px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 80px;
+    text-align: center;
+    border: 1px solid var(--main-color);
+    border-left-width: 10px;
+  }
+}
+.al-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  li {
+    img {
+      width: 100%;
+    }
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  width: 320px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  li {
+    padding: 20px;
+    height: 130px;
+    background: #ffffff;
+    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    &:first-child {
+      grid-column: span 2;
+    }
+    &:hover {
+      color: #fff;
+      background-color: var(--main-color);
+      span {
+        color: #fff;
+      }
+    }
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-style: normal;
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+    }
+  }
+}
+.table {
+  thead {
+    th {
+      padding: 20px;
+      font-size: 18px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+      color: #fff;
+      background-color: #aa1941;
+      border: 1px solid #aa1941;
+    }
+    th:nth-child(2) {
+      background: #931638;
+    }
+  }
+  tbody {
+    td {
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      line-height: 1;
+      color: #262626;
+      padding: 10px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2),
+    td:nth-child(3) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin: 60px 0 90px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 18px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    line-height: 70px;
+    color: #333333;
+    background: #fff;
+    text-align: center;
+    border: 1px solid #d5d5d5;
+    cursor: pointer;
+    &.is-active {
+      color: #fff;
+      background-color: var(--main-color);
+      border: 1px solid var(--main-color);
+    }
+    & + li {
+      margin-top: 22px;
+    }
+  }
+}
+.tab-body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  background-color: #fff;
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+  &-pic {
+    position: relative;
+
+    margin: 0 90px;
+    width: 200px;
+    height: 240px;
+    img {
+      position: relative;
+      max-width: 100%;
+      height: auto;
+      z-index: 10;
+    }
+    &::before {
+      z-index: 1;
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 100%;
+      height: 100%;
+      background: #ededed;
+    }
+  }
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    span {
+      width: 80px;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      color: var(--main-color);
+      background: #f8e9ed;
+      border-radius: 8px 8px 8px 8px;
+    }
+    h4 {
+      margin: 20px 0 40px;
+      font-weight: bold;
+      font-size: 22px;
+    }
+    li {
+      position: relative;
+      font-size: 16px;
+      color: #333333;
+      line-height: 36px;
+      padding-left: 20px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        background-color: var(--main-color);
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>

app/pages/platform/new-business-studies/4.vue

+<!-- AIGC网络直播实验室 -->
+<script setup>
+import { ref } from 'vue'
+
+// 核心模块
+const mkList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1.png',
+    title: '交互式量化投研平台',
+    desc: '对话生成策略 / 智能回测 / 因子库',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_1.png',
+        title: 'Text-to-Code自然语言生成Python量化代码',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_2.png',
+        title: '集成Wind/Tushare等主流金融数据接口',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_3.png',
+        title: '内置 100+ 经典 Alpha 因子与遗传算法挖掘环境',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2.png',
+    title: '金融大模型训练工厂',
+    desc: '研报微调 / 舆情分析 / 知识图谱',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_1.png',
+        title: '基于 BERT/GPT 的金融新闻舆情情感分析',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_2.png',
+        title: '毫秒级高频交易回测引擎与 Tick 级数据重放',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_3.png',
+        title: '自动化生成专业投研日报与风险评估报告',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3.png',
+    title: '智能风控与监管沙箱',
+    desc: '风险归因 / 压力测试 / 合规审查',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_1.png',
+        title: '多资产组合优化（Markowitz/Black-Litterman）',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_2.png',
+        title: '支持 ESG 报告智能评分与绿色金融评级实战',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_3.png',
+        title: '与全国高校金融科技学会/量化大赛标准衔接',
+      },
+    ],
+  },
+])
+const zyList = ref([
+  { title: '案例1:基于 LLM 的财经新闻情感评分与事件驱动策略', industry: 'NLP金融', hours: 16 },
+  { title: '案例2:沪深300指数增强:遗传算法挖掘 Alpha 因子', industry: '量化选股', hours: 20 },
+  { title: '案例3:AIGC 辅助生成商品期货双均线 CTA 策略代码', industry: 'CTA策略', hours: 12 },
+  { title: '案例4:基于知识图谱的企业信贷风险穿透式监管', industry: '金融风控', hours: 16 },
+  { title: '案例5:50ETF 期权波动率曲面拟合与套利策略回测', industry: '金融衍生品', hours: 24 },
+  { title: '案例6:使用 FinGPT 微调模型自动撰写行业研究报告', industry: '智能投研', hours: 8 },
+  { title: '案例7:高频订单流(Order Flow)微观结构特征分析', industry: '高频交易', hours: 16 },
+  { title: '案例8:基于机器学习(XGBoost)的违约概率预测', industry: '金融风控', hours: 12 },
+  { title: '案例9:宏观经济指标预测:LSTM 与Transformer 模型对比', industry: '宏观分析', hours: 16 },
+  { title: '案例10:构建 Smart Beta 投资组合与风险归因分析', industry: '资产配置', hours: 12 },
+])
+
+const numList = ref([
+  { num: 'TB级', desc: '高频行情与另类数据' },
+  { num: '100+', desc: '预置经典因子库' },
+  { num: '1ms', desc: '超低延时回测引擎' },
+  { num: '10', desc: '金融微调大模型' },
+  { num: 'Python', desc: 'C++ / Python 双栈' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '策略需求(Prompt)',
+    tag: '投资意向书',
+    name: '自然语言描述投资策略',
+    items: [
+      '模拟基金经理下达的模糊投资指令，训练学生的需求拆解能力；',
+      '通过 Prompt Engineering 将业务逻辑转化为量化因子定义；',
+      '包含数据清洗规则、滑点设置及手续费率等实战约束条件。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/4/tab1.png',
+  },
+  {
+    title: 'AI生成代码',
+    tag: '核心引擎',
+    name: 'Text-to-Code 自动编程',
+    items: [
+      '基于微调后的 CodeLlama/StarCoder 模型，一键生成 Python 策略代码；',
+      '自动补全 Pandas 数据处理逻辑与 Talib 技术指标计算；',
+      '提供代码解释器，帮助非计算机专业学生理解量化逻辑。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/4/tab2.png',
+  },
+  {
+    title: '回测绩效报告',
+    tag: '绩效归因',
+    name: '专业级量化回测报告',
+    items: [
+      '可视化展示累计收益、回撤曲线及持仓分布；',
+      '动计算夏普比率、索提诺比率、信息比率等关键指标；',
+      '支持 Brinson 归因分析，明确超额收益来源于选股还是择时。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/4/tab3.png',
+  },
+  {
+    title: '实战教学视频',
+    tag: '实战课程',
+    name: '全流程实操演示视频',
+    items: [
+      '业界导师手把手教学，从数据获取到模型上线的完整闭环；',
+      '重点讲解“过拟合（Overfitting）”陷阱的识别与规避；',
+      '涵盖 Python 环境搭建、Docker 部署等工程化技能。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/4/tab4.png',
+  },
+])
+
+// 标准服务
+const bzfwList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_1.png',
+    title: '数据服务',
+    desc: `股票/期货/期权历史数据
+Level-2 高频行情快照
+上市公司财务报表库
+宏观经济数据库同步`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_2.png',
+    title: '算力平台',
+    desc: `GPU 并行计算集群
+金融大模型私有化部署
+JupyterHub 教学环境
+多租户资源隔离管理`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '培训服务',
+    desc: `Python 金融数据分析培训
+FinTech 师资研修班
+量化大赛赛前辅导
+CFA/FRM 考证融合课程`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '技术支持',
+    desc: `系统运维与定期巡检
+策略代码调试支持
+7x24小时在线响应
+数据接口定制开发`,
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['金融科技专业申报', '校企联合实验室共建', '省级虚拟仿真项目申报', '量化私募实习直通车'])
+</script>
+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/4/banner.jpg" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>AIGC金融工程智能创新实验室</h2>
+          <span></span>
+          <h6>量化 · 算法 · 投研 · 智造</h6>
+          <p>
+            面向金融工程、金融科技及经济学专业，深度融合大语言模型（LLM）与量化交易体系。 提供 FinGPT
+            金融大模型微调、自然语言生成策略代码（Text-to-Code）、智能舆情因子挖掘等实训环境，
+            培养具备“AI+金融”双重能力的复合型金融科技人才。
+          </p>
+        </div>
+      </div>
+    </div>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">核心模块</h2>
+        <p class="section-title-desc">重构金融投研范式，打造智能化交易流水线</p>
+        <div class="mk-list">
+          <div class="mk-item" v-for="item in mkList" :key="item.title">
+            <div class="box">
+              <img :src="item.icon" />
+              <p>{{ item.title }}</p>
+              <span>{{ item.desc }}</span>
+            </div>
+            <ul>
+              <li v-for="item in item.children" :key="item.title">
+                <img :src="item.icon" />
+                <p>{{ item.title }}</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">金融实战案例资源</h2>
+        <p class="section-info">源自顶级私募与券商金工组真实项目，覆盖 Alpha、CTA、期权等核心策略</p>
+        <div class="zy">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>场景名称</th>
+                <th>所属行业</th>
+                <th>学时</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in zyList" :key="item.title">
+                <td>{{ item.title }}</td>
+                <td>{{ item.industry }}</td>
+                <td>{{ item.hours }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="num">
+            <li v-for="item in numList" :key="item.desc">
+              <span>{{ item.num }}</span>
+              <em>{{ item.desc }}</em>
+            </li>
+          </ul>
+        </div>
+        <div class="tab">
+          <ul class="tab-header">
+            <li
+              v-for="(item, index) in tabList"
+              :class="{ 'is-active': index === tabActive }"
+              :key="index"
+              @mouseover="tabActive = index">
+              {{ item.title }}
+            </li>
+          </ul>
+          <div class="tab-body" v-for="(item, index) in tabList" :key="index" v-show="index === tabActive">
+            <div class="tab-body-pic">
+              <img :src="item.img" :alt="item.title" />
+            </div>
+            <div class="tab-body-content">
+              <span>{{ item.tag }}</span>
+              <h4>{{ item.title }}</h4>
+              <ul>
+                <li v-for="subItem in item.items" :key="subItem">{{ subItem }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <h2 class="section-title">实验室配套服务</h2>
+        <h3 class="section-subtitle">标准服务</h3>
+        <ul class="bz-list">
+          <li v-for="item in bzfwList" :key="item.title">
+            <img :src="item.icon" />
+            <div class="cover">
+              <h4>{{ item.title }}</h4>
+              <p v-html="item.desc"></p>
+            </div>
+          </li>
+        </ul>
+        <h3 class="section-subtitle">增值服务</h3>
+        <ul class="zz-list">
+          <li v-for="item in zzfwList" :key="item">{{ item }}</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  img {
+    width: 100%;
+    height: 650px;
+    object-fit: cover;
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 1;
+    color: #ffffff;
+    h2 {
+      font-size: 60px;
+      font-family:
+        Source Han Sans CN-Bold,
+        Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+    }
+    h3 {
+      margin-bottom: 20px;
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 4px;
+    }
+    span {
+      margin: 46px 0;
+      width: 60px;
+      height: 6px;
+      background: #ffffff;
+    }
+    h6 {
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+    }
+    p {
+      margin-top: 30px;
+      max-width: 600px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      line-height: 30px;
+    }
+    a {
+      margin-top: 28px;
+      width: 112px;
+      height: 36px;
+      font-size: 16px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 36px;
+      background: #aa1941;
+      text-align: center;
+    }
+  }
+  .cover-inner {
+    height: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+
+.section-inner {
+  width: 1300px;
+  margin: 90px auto;
+}
+.section-title {
+  margin-bottom: 40px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  text-align: center;
+}
+.section-title-desc {
+  margin-bottom: 50px;
+  font-family:
+    Source Han Sans CN,
+    Source Han Sans CN;
+  font-weight: 400;
+  font-size: 18px;
+  color: #666666;
+  line-height: 30px;
+  text-align: center;
+}
+.section-subtitle {
+  display: inline-block;
+  margin: 36px 0;
+  font-size: 20px;
+  line-height: 32px;
+  color: #424242;
+  border-bottom: 1px solid var(--main-color);
+}
+.section-desc {
+  font-size: 16px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+}
+.section-info {
+  margin: 40px 0 70px;
+  font-size: 18px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+  text-align: center;
+}
+
+.section-pic {
+  text-align: center;
+  img {
+    max-width: 100%;
+  }
+}
+.mk-list {
+  display: flex;
+  gap: 60px;
+  .mk-item {
+    flex: 1;
+  }
+  .box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    background-color: var(--main-color);
+    color: #fff;
+    p {
+      margin-top: 40px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
+    span {
+      margin-top: 15px;
+    }
+  }
+  ul {
+    margin-top: 40px;
+  }
+  li {
+    margin-top: 25px;
+    img {
+      margin: 0 18px;
+    }
+    display: flex;
+    align-items: center;
+    height: 60px;
+    background: #f2f2f2;
+    font-size: 15px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #424242;
+  }
+}
+.bz-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 38px;
+  li {
+    position: relative;
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  h4 {
+    padding: 64px 0 45px;
+    font-size: 24px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  p {
+    font-size: 16px;
+    font-family:
+      Source Han Sans CN-Regular,
+      Source Han Sans CN;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 40px;
+    text-align: center;
+    white-space: pre-wrap;
+  }
+}
+.zz-list {
+  display: flex;
+  gap: 25px;
+  li {
+    flex: 1;
+    font-size: 22px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 80px;
+    text-align: center;
+    border: 1px solid var(--main-color);
+    border-left-width: 10px;
+  }
+}
+.al-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  li {
+    img {
+      width: 100%;
+    }
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  width: 320px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  li {
+    padding: 20px;
+    height: 130px;
+    background: #ffffff;
+    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    &:first-child {
+      grid-column: span 2;
+    }
+    &:hover {
+      color: #fff;
+      background-color: var(--main-color);
+      span {
+        color: #fff;
+      }
+    }
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-style: normal;
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+    }
+  }
+}
+.table {
+  thead {
+    th {
+      padding: 20px;
+      font-size: 18px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+      color: #fff;
+      background-color: #aa1941;
+      border: 1px solid #aa1941;
+    }
+    th:nth-child(2) {
+      background: #931638;
+    }
+  }
+  tbody {
+    td {
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      line-height: 1;
+      color: #262626;
+      padding: 10px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2),
+    td:nth-child(3) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin: 60px 0 90px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 18px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    line-height: 70px;
+    color: #333333;
+    background: #fff;
+    text-align: center;
+    border: 1px solid #d5d5d5;
+    cursor: pointer;
+    &.is-active {
+      color: #fff;
+      background-color: var(--main-color);
+      border: 1px solid var(--main-color);
+    }
+    & + li {
+      margin-top: 22px;
+    }
+  }
+}
+.tab-body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  background-color: #fff;
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+  &-pic {
+    position: relative;
+
+    margin: 0 90px;
+    width: 200px;
+    height: 240px;
+    img {
+      position: relative;
+      max-width: 100%;
+      height: auto;
+      z-index: 10;
+    }
+    &::before {
+      z-index: 1;
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 100%;
+      height: 100%;
+      background: #ededed;
+    }
+  }
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    span {
+      width: 70px;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      color: var(--main-color);
+      background: #f8e9ed;
+      border-radius: 8px 8px 8px 8px;
+    }
+    h4 {
+      margin: 20px 0 40px;
+      font-weight: bold;
+      font-size: 22px;
+    }
+    li {
+      position: relative;
+      font-size: 16px;
+      color: #333333;
+      line-height: 36px;
+      padding-left: 20px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        background-color: var(--main-color);
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>

app/pages/platform/new-business-studies/6.vue

@@ -96,6 +96,7 @@ const tabList = ref([
       '自动生成“痛点+信任+利益点+逼单”的标准化带货脚本；',
       '支持根据商品属性（美妆/食品/数码）自动调整语言风格。',
     ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/6/tab1.png',
   },
   {
     title: '数字人配置(Avatar)',
@@ -106,6 +107,7 @@ const tabList = ref([
       '支持“文本驱动”与“音频驱动”两种模式，口型匹配精准；',
       '内置 50+ 种情绪动作（点赞、比心、挥手），提升直播间互动感。',
     ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/6/tab2.png',
   },
   {
     title: '直播推流(OBS)',
@@ -116,6 +118,7 @@ const tabList = ref([
       '支持虚拟摄像头技术，将 AI 数字人画面无缝推流至各大平台；',
       '模拟真实网络波动环境，训练学生处理卡顿、断流等突发状况。',
     ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/6/tab3.png',
   },
   {
     title: '数据复盘(Data)',
@@ -126,6 +129,7 @@ const tabList = ref([
       '通过流量漏斗模型，分析“曝光-进入-停留-互动-转化”各环节流失率；',
       '自动生成复盘报告，提供优化建议（如：调整开播时间、优化商品顺序）。',
     ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/6/tab4.png',
   },
 ])
 
@@ -241,7 +245,6 @@ const jfalList = ref([
             </li>
           </ul>
         </div>
-        <h3 class="section-subtitle">案例资源示例</h3>
         <div class="tab">
           <ul class="tab-header">
             <li
@@ -252,10 +255,19 @@ const jfalList = ref([
               {{ item.title }}
             </li>
           </ul>
-          <ul class="tab-body" v-for="(item, index) in tabList" :key="index" v-show="index === tabActive">
-            <li v-for="item in item.children" :key="item"><img :src="item" /></li>
+          <div class="tab-body" v-for="(item, index) in tabList" :key="index" v-show="index === tabActive">
+            <div class="tab-body-pic">
+              <img :src="item.img" :alt="item.title" />
+            </div>
+            <div class="tab-body-content">
+              <span>{{ item.tag }}</span>
+              <h4>{{ item.title }}</h4>
+              <ul>
+                <li v-for="subItem in item.items" :key="subItem">{{ subItem }}</li>
               </ul>
             </div>
+          </div>
+        </div>
         <h2 class="section-title">实验室配套服务</h2>
         <h3 class="section-subtitle">标准服务</h3>
         <ul class="bz-list">
@@ -631,7 +643,7 @@ const jfalList = ref([
 }
 .tab {
   display: flex;
-  margin-bottom: 70px;
+  margin: 60px 0 90px;
 }
 .tab-header {
   margin-right: 38px;
@@ -664,6 +676,69 @@ const jfalList = ref([
   display: flex;
   align-items: center;
   justify-content: space-evenly;
+  background-color: #fff;
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+  &-pic {
+    position: relative;
+
+    margin: 0 90px;
+    width: 130px;
+    height: 240px;
+    img {
+      position: relative;
+      max-width: 100%;
+      height: auto;
+      z-index: 10;
+    }
+    &::before {
+      z-index: 1;
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 130px;
+      height: 240px;
+      background: #ededed;
+      border-radius: 12px;
+    }
+  }
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    span {
+      width: 70px;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      color: var(--main-color);
+      background: #f8e9ed;
+      border-radius: 8px 8px 8px 8px;
+    }
+    h4 {
+      margin: 20px 0 40px;
+      font-weight: bold;
+      font-size: 22px;
+    }
+    li {
+      position: relative;
+      font-size: 16px;
+      color: #333333;
+      line-height: 36px;
+      padding-left: 20px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
         background-color: var(--main-color);
+        border-radius: 50%;
+      }
+    }
+  }
 }
 </style>

app/pages/platform/new-engineering/3.vue

+<!-- AIGC网络直播实验室 -->
+<script setup>
+import { ref } from 'vue'
+
+// 核心模块
+const mkList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1.png',
+    title: '综合实践教学平台',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_1.png',
+        title: '内置多个开箱即用教学环境',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_2.png',
+        title: '内置多门信息安全基础及提升课程资源',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_3.png',
+        title: '支持多种训练环境及教师远程辅助',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_4.png',
+        title: '支持多种虚拟化技术及部署方式',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2.png',
+    title: '教学管理平台',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_1.png',
+        title: '一站式理论+实践学习平台',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_2.png',
+        title: '结合配套教学资源实现开箱即用',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_3.png',
+        title: '工业级产品与教学管理的完美适配',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_4.png',
+        title: '全面支撑课程评价和专业建设数据要求',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3.png',
+    title: '实验管理平台',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_1.png',
+        title: '灵活的实验配置实现丰富教学场景支撑',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_2.png',
+        title: '实验成绩多维构成及综合评分制',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_3.png',
+        title: '实验报告在线灵活填写及自动评分',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_4.png',
+        title: '与大赛平台无缝衔接',
+      },
+    ],
+  },
+])
+
+const zyList = ref([
+  { title: '案例1:某电商网站全链路 SQL 注入与数据加固', industry: '互联网', hours: 16 },
+  { title: '案例2:银行核心系统勒索木马溯源取证分析', industry: '金融', hours: 16 },
+  { title: '案例3:工业互联网 PLC 控制指令重放攻击模拟', industry: '工控', hours: 12 },
+  { title: '案例4:跨境邮件钓鱼防御与社会工程学溯源', industry: '政府', hours: 8 },
+  { title: '案例5:安卓端恶意扣费软件逆向分析实战', industry: '移动安全', hours: 16 },
+  { title: '案例6:DDoS 洪流攻击识别与 WAF 防御配置', industry: '运营商', hours: 12 },
+  { title: '案例7:企业内网横向移动与域渗透攻防实操', industry: '企业服务', hours: 24 },
+  { title: '案例8:无线 Wi-Fi 协议漏洞分析与 WPA 爆破预防', industry: '通用', hours: 8 },
+  { title: '案例9:云原生 K8s 容器逃逸漏洞利用与修补', industry: '云计算', hours: 16 },
+  { title: '案例10:零信任架构下的身份认证绕过模拟', industry: '信息技术', hours: 12 },
+])
+
+const numList = ref([
+  { num: '10', desc: '个核心教学案例' },
+  { num: '52', desc: '套教学 PPT' },
+  { num: '148', desc: '个教学视频' },
+  { num: '40', desc: '份实验手册' },
+  { num: '200', desc: '个实验靶点' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '案例原文',
+    tag: '实战背景',
+    name: '案例原文展示',
+    items: [
+      '基于真实行业脱敏案例，完整复现攻击路径与手法；',
+      '包含原始攻击包分析、漏洞成因详述及专家深度点评；',
+      '提供标准PDF下载，适用于课堂深度研讨与复盘分析。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/3/tab1.png',
+  },
+  {
+    title: '案例指导书',
+    tag: '操作指南',
+    name: '案例指导书预览',
+    items: [
+      '详尽的实验手册，包含环境拓扑规划与工具配置步骤；',
+      '提供每一步骤的预期结果截图，辅助学生纠错；',
+      '内置Flag获取点引导，确保实训过程闭环且可衡量。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/3/tab2.png',
+  },
+  {
+    title: '教学PPT',
+    tag: '教研资源',
+    name: '标准化教学PPT课件',
+    items: [
+      '配套标准化课件，逻辑清晰，覆盖从基础到进阶知识；',
+      '内置动态攻击原理图解，降低抽象技术理解门槛；',
+      '支持教师二次定制，适配不同专业背景的授课需求。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/3/tab3.png',
+  },
+  {
+    title: '教学视频',
+    tag: '视频演示',
+    name: '高品质实操录播视频',
+    items: [
+      '专家级实操录屏，全程演示漏洞挖掘、利用与加固；',
+      '针对实训中的易错点提供语音详解，辅助学生自学；',
+      '4K高清画质，确保控制台指令与代码细节一目了然。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/3/tab4.png',
+  },
+])
+
+// 标准服务
+const bzfwList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_1.png',
+    title: '产品服务',
+    desc: `本地私有化部署服务
+产品配置调试服务
+公有云账号分发
+一年期免费升级`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_2.png',
+    title: '资源服务',
+    desc: `配套课程资源
+课程资源免费更新
+行业案例免费升级
+CVE漏洞库同步`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '培训服务',
+    desc: `产品使用培训
+师资培训服务
+产品维护培训
+CTF竞赛带队指导`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '技术支持',
+    desc: `产品功能与性能巡检
+平台日常管理维护
+产品在线技术支持
+产品电话技术支持`,
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['顶层设计服务', '实验室空间规划', '行业专家讲座', '精品课联合申报'])
+</script>
+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/3/banner.jpg" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>信息安全实践教学平台</h2>
+          <span></span>
+          <h6>专业 · 深度 · 实战 · 智能</h6>
+          <p>
+            针对高校网络空间安全人才培养，提供从基础通识到专业攻防的全流程实训。集成 Kali Linux、Metasploit
+            等深度实战环境，支持 CTF 夺旗赛模式与 AWD 实时对抗。
+          </p>
+        </div>
+      </div>
+    </div>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">核心模块</h2>
+        <div class="mk-list">
+          <div class="mk-item" v-for="item in mkList" :key="item.title">
+            <div class="box">
+              <img :src="item.icon" />
+              <p>{{ item.title }}</p>
+            </div>
+            <ul>
+              <li v-for="item in item.children" :key="item.title">
+                <img :src="item.icon" />
+                <p>{{ item.title }}</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">案例资源介绍</h2>
+        <p class="section-info">以真实安全事件为原型，高度复原企业实战攻防场景</p>
+        <div class="zy">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>场景名称</th>
+                <th>所属行业</th>
+                <th>学时</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in zyList" :key="item.title">
+                <td>{{ item.title }}</td>
+                <td>{{ item.industry }}</td>
+                <td>{{ item.hours }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="num">
+            <li v-for="item in numList" :key="item.desc">
+              <span>{{ item.num }}</span>
+              <em>{{ item.desc }}</em>
+            </li>
+          </ul>
+        </div>
+        <div class="tab">
+          <ul class="tab-header">
+            <li
+              v-for="(item, index) in tabList"
+              :class="{ 'is-active': index === tabActive }"
+              :key="index"
+              @mouseover="tabActive = index">
+              {{ item.title }}
+            </li>
+          </ul>
+          <div class="tab-body" v-for="(item, index) in tabList" :key="index" v-show="index === tabActive">
+            <div class="tab-body-pic">
+              <img :src="item.img" :alt="item.title" />
+            </div>
+            <div class="tab-body-content">
+              <span>{{ item.tag }}</span>
+              <h4>{{ item.title }}</h4>
+              <ul>
+                <li v-for="subItem in item.items" :key="subItem">{{ subItem }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <h2 class="section-title">产品配套服务</h2>
+        <h3 class="section-subtitle">标准服务</h3>
+        <ul class="bz-list">
+          <li v-for="item in bzfwList" :key="item.title">
+            <img :src="item.icon" />
+            <div class="cover">
+              <h4>{{ item.title }}</h4>
+              <p v-html="item.desc"></p>
+            </div>
+          </li>
+        </ul>
+        <h3 class="section-subtitle">增值服务</h3>
+        <ul class="zz-list">
+          <li v-for="item in zzfwList" :key="item">{{ item }}</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  img {
+    width: 100%;
+    height: 650px;
+    object-fit: cover;
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 1;
+    color: #ffffff;
+    h2 {
+      font-size: 60px;
+      font-family:
+        Source Han Sans CN-Bold,
+        Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+    }
+    h3 {
+      margin-bottom: 20px;
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 4px;
+    }
+    span {
+      margin: 46px 0;
+      width: 60px;
+      height: 6px;
+      background: #ffffff;
+    }
+    h6 {
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+    }
+    p {
+      margin-top: 30px;
+      max-width: 600px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      line-height: 30px;
+    }
+    a {
+      margin-top: 28px;
+      width: 112px;
+      height: 36px;
+      font-size: 16px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 36px;
+      background: #aa1941;
+      text-align: center;
+    }
+  }
+  .cover-inner {
+    height: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+
+.section-inner {
+  width: 1300px;
+  margin: 90px auto;
+}
+.section-title {
+  margin-bottom: 40px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  text-align: center;
+}
+.section-title-desc {
+  margin-bottom: 50px;
+  font-family:
+    Source Han Sans CN,
+    Source Han Sans CN;
+  font-weight: 400;
+  font-size: 18px;
+  color: #666666;
+  line-height: 30px;
+  text-align: center;
+}
+.section-subtitle {
+  display: inline-block;
+  margin: 36px 0;
+  font-size: 20px;
+  line-height: 32px;
+  color: #424242;
+  border-bottom: 1px solid var(--main-color);
+}
+.section-desc {
+  font-size: 16px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+}
+.section-info {
+  margin: 40px 0 70px;
+  font-size: 18px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+  text-align: center;
+}
+
+.section-pic {
+  text-align: center;
+  img {
+    max-width: 100%;
+  }
+}
+.mk-list {
+  display: flex;
+  gap: 60px;
+  .mk-item {
+    flex: 1;
+  }
+  .box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    background-color: var(--main-color);
+    color: #fff;
+    p {
+      margin-top: 40px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
+    span {
+      margin-top: 15px;
+    }
+  }
+  ul {
+    margin-top: 40px;
+  }
+  li {
+    margin-top: 25px;
+    img {
+      margin: 0 18px;
+    }
+    display: flex;
+    align-items: center;
+    height: 60px;
+    background: #f2f2f2;
+    font-size: 15px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #424242;
+  }
+}
+.bz-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 38px;
+  li {
+    position: relative;
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  h4 {
+    padding: 64px 0 45px;
+    font-size: 24px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  p {
+    font-size: 16px;
+    font-family:
+      Source Han Sans CN-Regular,
+      Source Han Sans CN;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 40px;
+    text-align: center;
+    white-space: pre-wrap;
+  }
+}
+.zz-list {
+  display: flex;
+  gap: 25px;
+  li {
+    flex: 1;
+    font-size: 22px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 80px;
+    text-align: center;
+    border: 1px solid var(--main-color);
+    border-left-width: 10px;
+  }
+}
+.al-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  li {
+    img {
+      width: 100%;
+    }
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  width: 320px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  li {
+    padding: 20px;
+    height: 130px;
+    background: #ffffff;
+    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    &:first-child {
+      grid-column: span 2;
+    }
+    &:hover {
+      color: #fff;
+      background-color: var(--main-color);
+      span {
+        color: #fff;
+      }
+    }
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-style: normal;
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+    }
+  }
+}
+.table {
+  thead {
+    th {
+      padding: 20px;
+      font-size: 18px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+      color: #fff;
+      background-color: #aa1941;
+      border: 1px solid #aa1941;
+    }
+    th:nth-child(2) {
+      background: #931638;
+    }
+  }
+  tbody {
+    td {
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      line-height: 1;
+      color: #262626;
+      padding: 10px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2),
+    td:nth-child(3) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin: 60px 0 90px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 18px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    line-height: 70px;
+    color: #333333;
+    background: #fff;
+    text-align: center;
+    border: 1px solid #d5d5d5;
+    cursor: pointer;
+    &.is-active {
+      color: #fff;
+      background-color: var(--main-color);
+      border: 1px solid var(--main-color);
+    }
+    & + li {
+      margin-top: 22px;
+    }
+  }
+}
+.tab-body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  background-color: #fff;
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+  &-pic {
+    position: relative;
+
+    margin: 0 90px;
+    width: 200px;
+    height: 240px;
+    img {
+      position: relative;
+      max-width: 100%;
+      height: auto;
+      z-index: 10;
+    }
+    &::before {
+      z-index: 1;
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 100%;
+      height: 100%;
+      background: #ededed;
+    }
+  }
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    span {
+      width: 80px;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      color: var(--main-color);
+      background: #f8e9ed;
+      border-radius: 8px 8px 8px 8px;
+    }
+    h4 {
+      margin: 20px 0 40px;
+      font-weight: bold;
+      font-size: 22px;
+    }
+    li {
+      position: relative;
+      font-size: 16px;
+      color: #333333;
+      line-height: 36px;
+      padding-left: 20px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        background-color: var(--main-color);
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>

app/pages/platform/new-engineering/4.vue

+<!-- AIGC网络直播实验室 -->
+<script setup>
+import { ref } from 'vue'
+
+// 核心模块
+const mkList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1.png',
+    title: '网络仿真教学平台',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_1.png',
+        title: '支持复杂网络拓扑拖拽式构建',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_2.png',
+        title: '内置 TCP/IP 协议深度解析课程',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_3.png',
+        title: '真实路由器/交换机 OS 模拟环境',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_4.png',
+        title: 'SDN 软件定义网络实验支持',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2.png',
+    title: '教务与资源管理',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_1.png',
+        title: '网络流量可视化与实时数据包分析',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_2.png',
+        title: '支持移动互联网与 Wi-Fi 协议仿真',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_3.png',
+        title: '实验报告自动拓扑截图与配置比对',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_4.png',
+        title: '全面支撑网络工程专业建设数据要求',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3.png',
+    title: '流量实训管理平台',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_1.png',
+        title: 'VPN 与加密通信隧道构建实验',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_2.png',
+        title: '多维度的网络故障排查评分机制',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_3.png',
+        title: '防火墙策略配置与 ACL 规则验证',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_4.png',
+        title: '与网络技术技能大赛无缝衔接',
+      },
+    ],
+  },
+])
+
+const zyList = ref([
+  { title: '案例1:基于 ARP 欺骗的中间人攻击与防御实战', industry: '局域网安全', hours: 12 },
+  { title: '案例2:OSPF 路由协议认证配置与路由毒化分析', industry: '路由安全', hours: 12 },
+  { title: '案例3:企业级防火墙双机热备与策略绕过测试', industry: '边界防御', hours: 16 },
+  { title: '案例4:DDoS SYN Flood 洪泛攻击流量分析与清洗', industry: '流量分析', hours: 8 },
+  { title: '案例5:IPSec VPN 隧道构建与加密数据截获分析', industry: '传输安全', hours: 16 },
+  { title: '案例6:交换机 VLAN 跳跃攻击原理与端口安全配置', industry: '交换安全', hours: 12 },
+  { title: '案例7:Wireshark 数据包深度嗅探与敏感信息提取', industry: '协议分析', hours: 24 },
+  { title: '案例8:DNS 劫持攻击复现与 DNSSEC 安全部署', industry: '基础服务', hours: 8 },
+  { title: '案例9:企业内网 ACL 访问控制列表规划与渗透测试', industry: '访问控制', hours: 16 },
+  { title: '案例10:SDN 环境下流表溢出攻击与控制器防护', industry: '新型网络', hours: 12 },
+])
+
+const numList = ref([
+  { num: '12', desc: '个网络工程案例' },
+  { num: '60', desc: '个拓扑工程文件' },
+  { num: '120', desc: '个配置演示视频' },
+  { num: '35', desc: '份标准流量包' },
+  { num: '500+', desc: '份标准流量包' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '流量分析报告',
+    tag: '攻击溯源',
+    name: '异常流量溯源分析',
+    items: [
+      '基于真实 Wireshark 抓包数据，还原网络攻击全过程；',
+      '详细标注 TCP 三次握手异常及 DDoS 攻击特征指纹；',
+      '提供完整的流量清洗策略建议与防火墙规则配置模板。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/4/tab1.png',
+  },
+  {
+    title: '设备配置指导书',
+    tag: '配置命令',
+    name: '标准设备配置手册',
+    items: [
+      '包含华为/思科主流厂商设备的标准命令行（CLI）配置代码；',
+      '分步骤讲解 VLAN 划分、路由协议配置及 ACL 部署流程；',
+      '提供拓扑连线图与接口地址规划表，快速搭建实验环境。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/4/tab2.png',
+  },
+  {
+    title: '协议原理PPT',
+    tag: '理论课件',
+    name: '网络协议原理课件',
+    items: [
+      '图解 OSI 七层模型与 TCP/IP 四层架构的数据封装过程；',
+      '动态演示 ARP 解析、DHCP 交互及 TCP 滑动窗口机制；',
+      '重点剖析协议头部字段在安全防御中的关键作用。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/4/tab3.png',
+  },
+  {
+    title: '抓包演示视频',
+    tag: '实验录像',
+    name: '协议抓包与攻防实录',
+    items: [
+      '高清录制网络攻击下的数据包变化过程（如明文密码截获）；',
+      '演示使用 Wireshark 进行过滤器筛选与流追踪的操作技巧；',
+      '对比防御策略生效前后的网络连通性与流量特征差异。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/4/tab4.png',
+  },
+])
+
+// 标准服务
+const bzfwList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_1.png',
+    title: '产品服务',
+    desc: `实验室拓扑规划
+仿真引擎部署调试
+公有云账号分发
+设备镜像库升级`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_2.png',
+    title: '资源服务',
+    desc: `配套流量包资源
+攻击特征库更新
+网络协议案例升级
+行业标准规范同步`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '培训服务',
+    desc: `网络设备配置培训
+师资培训服务
+HCIE/CCIE 讲师指导
+网络技能大赛集训`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '技术支持',
+    desc: `实验环境定期巡检
+平台日常管理维护
+远程技术协助
+故障应急响应`,
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['网络工程专业建设', '实训室空间设计', '行业专家讲座', '一流课程申报支持'])
+</script>
+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/4/banner.jpg" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>网络安全实验室</h2>
+          <span></span>
+          <h6>互联 · 协议 · 仿真 · 防御</h6>
+          <p>
+            聚焦网络基础设施安全与通信协议分析，提供从路由交换基础到高级网络攻防的全场景实训。内置 Wireshark
+            流量分析、GNS3 网络仿真及企业级下一代防火墙（NGFW）虚拟环境，满足网络工程与安全运维人才培养需求。
+          </p>
+        </div>
+      </div>
+    </div>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">核心模块</h2>
+        <div class="mk-list">
+          <div class="mk-item" v-for="item in mkList" :key="item.title">
+            <div class="box">
+              <img :src="item.icon" />
+              <p>{{ item.title }}</p>
+            </div>
+            <ul>
+              <li v-for="item in item.children" :key="item.title">
+                <img :src="item.icon" />
+                <p>{{ item.title }}</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">案例资源介绍</h2>
+        <p class="section-info">源自真实企业网络架构，覆盖路由交换、边界安全与流量分析全场景</p>
+        <div class="zy">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>场景名称</th>
+                <th>所属行业</th>
+                <th>学时</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in zyList" :key="item.title">
+                <td>{{ item.title }}</td>
+                <td>{{ item.industry }}</td>
+                <td>{{ item.hours }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="num">
+            <li v-for="item in numList" :key="item.desc">
+              <span>{{ item.num }}</span>
+              <em>{{ item.desc }}</em>
+            </li>
+          </ul>
+        </div>
+        <div class="tab">
+          <ul class="tab-header">
+            <li
+              v-for="(item, index) in tabList"
+              :class="{ 'is-active': index === tabActive }"
+              :key="index"
+              @mouseover="tabActive = index">
+              {{ item.title }}
+            </li>
+          </ul>
+          <div class="tab-body" v-for="(item, index) in tabList" :key="index" v-show="index === tabActive">
+            <div class="tab-body-pic">
+              <img :src="item.img" :alt="item.title" />
+            </div>
+            <div class="tab-body-content">
+              <span>{{ item.tag }}</span>
+              <h4>{{ item.title }}</h4>
+              <ul>
+                <li v-for="subItem in item.items" :key="subItem">{{ subItem }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <h2 class="section-title">产品配套服务</h2>
+        <h3 class="section-subtitle">标准服务</h3>
+        <ul class="bz-list">
+          <li v-for="item in bzfwList" :key="item.title">
+            <img :src="item.icon" />
+            <div class="cover">
+              <h4>{{ item.title }}</h4>
+              <p v-html="item.desc"></p>
+            </div>
+          </li>
+        </ul>
+        <h3 class="section-subtitle">增值服务</h3>
+        <ul class="zz-list">
+          <li v-for="item in zzfwList" :key="item">{{ item }}</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  img {
+    width: 100%;
+    height: 650px;
+    object-fit: cover;
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 1;
+    color: #ffffff;
+    h2 {
+      font-size: 60px;
+      font-family:
+        Source Han Sans CN-Bold,
+        Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+    }
+    h3 {
+      margin-bottom: 20px;
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 4px;
+    }
+    span {
+      margin: 46px 0;
+      width: 60px;
+      height: 6px;
+      background: #ffffff;
+    }
+    h6 {
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+    }
+    p {
+      margin-top: 30px;
+      max-width: 600px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      line-height: 30px;
+    }
+    a {
+      margin-top: 28px;
+      width: 112px;
+      height: 36px;
+      font-size: 16px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 36px;
+      background: #aa1941;
+      text-align: center;
+    }
+  }
+  .cover-inner {
+    height: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+
+.section-inner {
+  width: 1300px;
+  margin: 90px auto;
+}
+.section-title {
+  margin-bottom: 40px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  text-align: center;
+}
+.section-title-desc {
+  margin-bottom: 50px;
+  font-family:
+    Source Han Sans CN,
+    Source Han Sans CN;
+  font-weight: 400;
+  font-size: 18px;
+  color: #666666;
+  line-height: 30px;
+  text-align: center;
+}
+.section-subtitle {
+  display: inline-block;
+  margin: 36px 0;
+  font-size: 20px;
+  line-height: 32px;
+  color: #424242;
+  border-bottom: 1px solid var(--main-color);
+}
+.section-desc {
+  font-size: 16px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+}
+.section-info {
+  margin: 40px 0 70px;
+  font-size: 18px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+  text-align: center;
+}
+
+.section-pic {
+  text-align: center;
+  img {
+    max-width: 100%;
+  }
+}
+.mk-list {
+  display: flex;
+  gap: 60px;
+  .mk-item {
+    flex: 1;
+  }
+  .box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    background-color: var(--main-color);
+    color: #fff;
+    p {
+      margin-top: 40px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
+    span {
+      margin-top: 15px;
+    }
+  }
+  ul {
+    margin-top: 40px;
+  }
+  li {
+    margin-top: 25px;
+    img {
+      margin: 0 18px;
+    }
+    display: flex;
+    align-items: center;
+    height: 60px;
+    background: #f2f2f2;
+    font-size: 15px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #424242;
+  }
+}
+.bz-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 38px;
+  li {
+    position: relative;
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  h4 {
+    padding: 64px 0 45px;
+    font-size: 24px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  p {
+    font-size: 16px;
+    font-family:
+      Source Han Sans CN-Regular,
+      Source Han Sans CN;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 40px;
+    text-align: center;
+    white-space: pre-wrap;
+  }
+}
+.zz-list {
+  display: flex;
+  gap: 25px;
+  li {
+    flex: 1;
+    font-size: 22px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 80px;
+    text-align: center;
+    border: 1px solid var(--main-color);
+    border-left-width: 10px;
+  }
+}
+.al-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  li {
+    img {
+      width: 100%;
+    }
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  width: 320px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  li {
+    padding: 20px;
+    height: 130px;
+    background: #ffffff;
+    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    &:first-child {
+      grid-column: span 2;
+    }
+    &:hover {
+      color: #fff;
+      background-color: var(--main-color);
+      span {
+        color: #fff;
+      }
+    }
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-style: normal;
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+    }
+  }
+}
+.table {
+  thead {
+    th {
+      padding: 20px;
+      font-size: 18px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+      color: #fff;
+      background-color: #aa1941;
+      border: 1px solid #aa1941;
+    }
+    th:nth-child(2) {
+      background: #931638;
+    }
+  }
+  tbody {
+    td {
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      line-height: 1;
+      color: #262626;
+      padding: 10px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2),
+    td:nth-child(3) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin: 60px 0 90px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 18px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    line-height: 70px;
+    color: #333333;
+    background: #fff;
+    text-align: center;
+    border: 1px solid #d5d5d5;
+    cursor: pointer;
+    &.is-active {
+      color: #fff;
+      background-color: var(--main-color);
+      border: 1px solid var(--main-color);
+    }
+    & + li {
+      margin-top: 22px;
+    }
+  }
+}
+.tab-body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  background-color: #fff;
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+  &-pic {
+    position: relative;
+
+    margin: 0 90px;
+    width: 200px;
+    height: 240px;
+    img {
+      position: relative;
+      max-width: 100%;
+      height: auto;
+      z-index: 10;
+    }
+    &::before {
+      z-index: 1;
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 100%;
+      height: 100%;
+      background: #ededed;
+    }
+  }
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    span {
+      width: 80px;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      color: var(--main-color);
+      background: #f8e9ed;
+      border-radius: 8px 8px 8px 8px;
+    }
+    h4 {
+      margin: 20px 0 40px;
+      font-weight: bold;
+      font-size: 22px;
+    }
+    li {
+      position: relative;
+      font-size: 16px;
+      color: #333333;
+      line-height: 36px;
+      padding-left: 20px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        background-color: var(--main-color);
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>

app/pages/platform/new-engineering/5.vue

+<!-- AIGC网络直播实验室 -->
+<script setup>
+import { ref } from 'vue'
+
+// 核心模块
+const mkList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1.png',
+    title: '嵌入式开发实验平台',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_1.png',
+        title: '集成 30+ 种主流工业级传感器模块',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_2.png',
+        title: '支持 STM32/ESP32/RISC-V 多架构开发',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_3.png',
+        title: '提供 PCB 设计与 Altium Designer 课程',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_4.png',
+        title: 'FreeRTOS/LiteOS 实时操作系统移植实战',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2.png',
+    title: '无线传感网实训平台',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_1.png',
+        title: 'ZigBee/LoRa/NB-IoT 全场景协议组网',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_2.png',
+        title: '边缘计算网关配置与 MQTT 协议对接',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_3.png',
+        title: 'OTA 远程固件升级技术实现',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2_4.png',
+        title: '移动端 APP 与微信小程序开发支持',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3.png',
+    title: '行业应用与云平台',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_1.png',
+        title: '物联网云平台大数据可视化大屏',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_2.png',
+        title: '数字孪生(Digital Twin)虚实交互',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_3.png',
+        title: '完整覆盖智能家居/工业/农业行业案例',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_4.png',
+        title: '支持物联网职业技能大赛设备标准',
+      },
+    ],
+  },
+])
+
+const zyList = ref([
+  { title: '案例1:基于 STM32 的智能家居环境监测系统', industry: '传感器/单片机', hours: 16 },
+  { title: '案例2:智慧农业大棚 ZigBee 无线组网控制', industry: '无线传感网', hours: 20 },
+  { title: '案例3:基于 ESP32 的 Wi-Fi 遥控小车与视频回传', industry: '嵌入式/网络', hours: 16 },
+  { title: '案例4:NB-loT智能路灯远程监控与故障上报', industry: '窄带物联网', hours: 12 },
+  { title: '案例5:工业 Modbus 协议数据采集与 PLC 通信', industry: '工业互联网', hours: 24 },
+  { title: '案例6:基于 RFID 的智能仓储物流追踪系统', industry: '射频识别', hours: 12 },
+  { title: '案例7:边缘计算网关 MQTT 协议上云实战', industry: '云平台对接', hours: 16 },
+  { title: '案例8:LoRa 远距离山体滑坡监测预警系统', industry: '低功耗广域网', hours: 20 },
+  { title: '案例9:Android 端智能门锁蓝牙解锁 App 开发', industry: '移动开发', hours: 16 },
+  { title: '案例10:智慧社区垃圾桶满溢检测与路径规划', industry: '综合应用', hours: 24 },
+])
+
+const numList = ref([
+  { num: '10', desc: '个行业级综合案例' },
+  { num: '20', desc: '套硬件实验箱' },
+  { num: '200+', desc: '份源码工程' },
+  { num: '45', desc: '本实验指导书' },
+  { num: '10', desc: '个毕设级项目' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '硬件接线图',
+    tag: '硬件连接',
+    name: '高清实物接线图解',
+    items: [
+      '提供 Fritzing 风格的实物连线图，降低硬件入门门槛；',
+      '标注引脚定义（VCC/GND/IO），防止短路与接错；',
+      '包含原理图与 PCB 布局文件，支持深入电路分析。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/5/tab1.png',
+  },
+  {
+    title: '嵌入式源码',
+    tag: '核心代码',
+    name: '驱动与应用层源码',
+    items: [
+      '提供标准 C 语言驱动库（HAL库/标准库），注释详尽；',
+      '封装 MQTT/TCP 通信接口，简化网络编程难度；',
+      '包含 Android/微信小程序端源码，打通端到端链路。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/5/tab2.png',
+  },
+  {
+    title: '物联网云平台',
+    tag: '数据可视化',
+    name: '云平台数据交互',
+    items: [
+      '支持对接阿里云 IoT、腾讯云、OneNET 等主流平台；',
+      '零代码拖拽生成数据可视化大屏，实时监控设备状态；',
+      '支持云端规则引擎配置，实现远程反向控制与报警。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/5/tab3.png',
+  },
+  {
+    title: '实验指导书',
+    tag: '教学文档',
+    name: '保姆级实验指导',
+    items: [
+      '步骤详尽，包含环境搭建、代码烧录、现象观察全流程；',
+      '常见问题（FAQ）速查，快速解决驱动安装与编译报错；',
+      '提供配套教学 PPT 与 1080P 实操演示视频。',
+    ],
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/5/tab4.png',
+  },
+])
+
+// 标准服务
+const bzfwList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_1.png',
+    title: '产品服务',
+    desc: `硬件设备安装调试
+开发环境(Keil/IAR)部署
+云平台账号开通
+硬件质保与维修`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_2.png',
+    title: '资源服务',
+    desc: `项目源码库更新
+新技术(鸿蒙/RISC-V)案例
+行业应用案例升级
+课程题库资源同步`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '培训服务',
+    desc: `嵌入式讲师师资培训
+物联网技能大赛指导
+硬件焊接与调试培训
+1+X 证书考证培训`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '技术支持',
+    desc: `PCB 定制设计支持
+毕设项目技术辅导
+远程代码调试协助
+平台日常管理维护`,
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['物联网专业建设规划', '创客空间/实验室设计', '企业工程师进校讲座', '校企合作项目孵化'])
+</script>
+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/next/platform/new-engineering/5/banner.jpg" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>物联网实验室</h2>
+          <span></span>
+          <h6>感知 · 连接 · 智能 · 融合</h6>
+          <p>
+            面向物联网工程专业，构建“端-边-管-云-用”全栈式实训体系。平台涵盖传感器技术、嵌入式系统开发、无线通信协议（ZigBee/NB-IoT）、边缘计算网关及物联网云平台开发，助力培养具备软硬结合能力的复合型人才。
+          </p>
+        </div>
+      </div>
+    </div>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">核心模块</h2>
+        <div class="mk-list">
+          <div class="mk-item" v-for="item in mkList" :key="item.title">
+            <div class="box">
+              <img :src="item.icon" />
+              <p>{{ item.title }}</p>
+            </div>
+            <ul>
+              <li v-for="item in item.children" :key="item.title">
+                <img :src="item.icon" />
+                <p>{{ item.title }}</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">案例资源介绍</h2>
+        <p class="section-info">源自真实行业应用，覆盖从底层驱动编写到上层云端开发的完整链路</p>
+        <div class="zy">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>场景名称</th>
+                <th>所属行业</th>
+                <th>学时</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in zyList" :key="item.title">
+                <td>{{ item.title }}</td>
+                <td>{{ item.industry }}</td>
+                <td>{{ item.hours }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="num">
+            <li v-for="item in numList" :key="item.desc">
+              <span>{{ item.num }}</span>
+              <em>{{ item.desc }}</em>
+            </li>
+          </ul>
+        </div>
+        <div class="tab">
+          <ul class="tab-header">
+            <li
+              v-for="(item, index) in tabList"
+              :class="{ 'is-active': index === tabActive }"
+              :key="index"
+              @mouseover="tabActive = index">
+              {{ item.title }}
+            </li>
+          </ul>
+          <div class="tab-body" v-for="(item, index) in tabList" :key="index" v-show="index === tabActive">
+            <div class="tab-body-pic">
+              <img :src="item.img" :alt="item.title" />
+            </div>
+            <div class="tab-body-content">
+              <span>{{ item.tag }}</span>
+              <h4>{{ item.title }}</h4>
+              <ul>
+                <li v-for="subItem in item.items" :key="subItem">{{ subItem }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <h2 class="section-title">产品配套服务</h2>
+        <h3 class="section-subtitle">标准服务</h3>
+        <ul class="bz-list">
+          <li v-for="item in bzfwList" :key="item.title">
+            <img :src="item.icon" />
+            <div class="cover">
+              <h4>{{ item.title }}</h4>
+              <p v-html="item.desc"></p>
+            </div>
+          </li>
+        </ul>
+        <h3 class="section-subtitle">增值服务</h3>
+        <ul class="zz-list">
+          <li v-for="item in zzfwList" :key="item">{{ item }}</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  img {
+    width: 100%;
+    height: 650px;
+    object-fit: cover;
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 1;
+    color: #ffffff;
+    h2 {
+      font-size: 60px;
+      font-family:
+        Source Han Sans CN-Bold,
+        Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+    }
+    h3 {
+      margin-bottom: 20px;
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 4px;
+    }
+    span {
+      margin: 46px 0;
+      width: 60px;
+      height: 6px;
+      background: #ffffff;
+    }
+    h6 {
+      font-size: 24px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+    }
+    p {
+      margin-top: 30px;
+      max-width: 600px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      line-height: 30px;
+    }
+    a {
+      margin-top: 28px;
+      width: 112px;
+      height: 36px;
+      font-size: 16px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 36px;
+      background: #aa1941;
+      text-align: center;
+    }
+  }
+  .cover-inner {
+    height: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+
+.section-inner {
+  width: 1300px;
+  margin: 90px auto;
+}
+.section-title {
+  margin-bottom: 40px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  text-align: center;
+}
+.section-title-desc {
+  margin-bottom: 50px;
+  font-family:
+    Source Han Sans CN,
+    Source Han Sans CN;
+  font-weight: 400;
+  font-size: 18px;
+  color: #666666;
+  line-height: 30px;
+  text-align: center;
+}
+.section-subtitle {
+  display: inline-block;
+  margin: 36px 0;
+  font-size: 20px;
+  line-height: 32px;
+  color: #424242;
+  border-bottom: 1px solid var(--main-color);
+}
+.section-desc {
+  font-size: 16px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+}
+.section-info {
+  margin: 40px 0 70px;
+  font-size: 18px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  line-height: 34px;
+  color: #666666;
+  text-align: center;
+}
+
+.section-pic {
+  text-align: center;
+  img {
+    max-width: 100%;
+  }
+}
+.mk-list {
+  display: flex;
+  gap: 60px;
+  .mk-item {
+    flex: 1;
+  }
+  .box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    background-color: var(--main-color);
+    color: #fff;
+    p {
+      margin-top: 40px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
+    span {
+      margin-top: 15px;
+    }
+  }
+  ul {
+    margin-top: 40px;
+  }
+  li {
+    margin-top: 25px;
+    img {
+      margin: 0 18px;
+    }
+    display: flex;
+    align-items: center;
+    height: 60px;
+    background: #f2f2f2;
+    font-size: 15px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #424242;
+  }
+}
+.bz-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 38px;
+  li {
+    position: relative;
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  h4 {
+    padding: 64px 0 45px;
+    font-size: 24px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  p {
+    font-size: 16px;
+    font-family:
+      Source Han Sans CN-Regular,
+      Source Han Sans CN;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 40px;
+    text-align: center;
+    white-space: pre-wrap;
+  }
+}
+.zz-list {
+  display: flex;
+  gap: 25px;
+  li {
+    flex: 1;
+    font-size: 22px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 80px;
+    text-align: center;
+    border: 1px solid var(--main-color);
+    border-left-width: 10px;
+  }
+}
+.al-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  li {
+    img {
+      width: 100%;
+    }
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  width: 320px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  li {
+    padding: 20px;
+    height: 130px;
+    background: #ffffff;
+    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    &:first-child {
+      grid-column: span 2;
+    }
+    &:hover {
+      color: #fff;
+      background-color: var(--main-color);
+      span {
+        color: #fff;
+      }
+    }
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-style: normal;
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+    }
+  }
+}
+.table {
+  thead {
+    th {
+      padding: 20px;
+      font-size: 18px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      line-height: 1;
+      color: #fff;
+      background-color: #aa1941;
+      border: 1px solid #aa1941;
+    }
+    th:nth-child(2) {
+      background: #931638;
+    }
+  }
+  tbody {
+    td {
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      line-height: 1;
+      color: #262626;
+      padding: 10px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2),
+    td:nth-child(3) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin: 60px 0 90px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 18px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    line-height: 70px;
+    color: #333333;
+    background: #fff;
+    text-align: center;
+    border: 1px solid #d5d5d5;
+    cursor: pointer;
+    &.is-active {
+      color: #fff;
+      background-color: var(--main-color);
+      border: 1px solid var(--main-color);
+    }
+    & + li {
+      margin-top: 22px;
+    }
+  }
+}
+.tab-body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  background-color: #fff;
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+  &-pic {
+    position: relative;
+
+    margin: 0 90px;
+    width: 200px;
+    height: 240px;
+    img {
+      position: relative;
+      max-width: 100%;
+      height: auto;
+      z-index: 10;
+    }
+    &::before {
+      z-index: 1;
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 100%;
+      height: 100%;
+      background: #ededed;
+    }
+  }
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    span {
+      width: 80px;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      color: var(--main-color);
+      background: #f8e9ed;
+      border-radius: 8px 8px 8px 8px;
+    }
+    h4 {
+      margin: 20px 0 40px;
+      font-weight: bold;
+      font-size: 22px;
+    }
+    li {
+      position: relative;
+      font-size: 16px;
+      color: #333333;
+      line-height: 36px;
+      padding-left: 20px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        background-color: var(--main-color);
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>