chore: update

app/components/AppContact.vue

@@ -16,11 +16,7 @@ defineProps({
     </template>
     <template v-else-if="type === 2">
       <h4>联系我们</h4>
-      <p>
-        联系人：冯老师
-        <br />
-        联系电话：13522642018（微信同号）
-      </p>
+      <p>联系人：郝老师<br />联系电话：18501003911（微信同号）</p>
     </template>
     <template v-else>
       <h4>联系我们</h4>

app/components/AppFooter.vue

@@ -7,15 +7,15 @@ const items = [
     items: [
       {
         name: 'AI教学基础层',
-        href: '',
+        href: '/ai',
       },
       {
         name: 'AI专业建设中心',
-        href: '',
+        href: '/platform',
       },
       {
         name: '解决方案中心',
-        href: '',
+        href: 'solution/ai',
       },
       {
         name: '职业技能中心',
@@ -23,7 +23,7 @@ const items = [
       },
       {
         name: '学习服务中心',
-        href: '',
+        href: 'https://saas-learn.ezijing.com',
       },
     ],
   },

app/components/AppHeader.vue

@@ -46,42 +46,45 @@ const navList = [
       {
         name: '解决方案',
         items: [
-          { name: 'AI+专业改造', href: '/digital/yx_3' },
-          { name: '新双高建设', href: '/platform' },
-          { name: '应用型本科', href: '' },
+          { name: 'AI+专业改造', href: '/solution/ai' },
+          { name: '新双高建设', href: '/solution/new-double-high' },
+          { name: '应用型本科', href: '/solution/applied-undergraduate' },
           { name: '产教融合实训基地', href: '/digital/base' },
           { name: '国赛/省赛/行业赛', href: '/competition' },
-          { name: '国际合作', href: '/international' },
+          { name: '国际合作', href: '/solution/international' },
         ],
       },
       {
         name: 'AI专业建设',
-        items: [
+        groupItems: [
           {
             name: '新工科',
+            href: '/platform',
             items: [
-              { name: '大数据实验室', href: '/digital/yx_1_3' },
-              { name: '网络安全实验室', href: '/digital/yx_1_4' },
-              { name: '人工智能开发实验室', href: '/digital/yx_1_5' },
-              { name: '物联网实验室', href: '/digital/yx_1_6' },
-              { name: '信息安全实验室', href: '/digital/yx_1_7' },
+              { name: '大数据实验室', href: '/platform/new-engineering/1' },
+              { name: '网络安全实验室', href: '/platform/new-engineering/4' },
+              { name: '人工智能开发实验室', href: '/platform/new-engineering/2' },
+              { name: '物联网实验室', href: '/platform/new-engineering/5' },
+              { name: '信息安全实验室', href: '/platform/new-engineering/3' },
             ],
           },
           {
             name: '新商科',
+            href: '/platform',
             items: [
-              { name: 'AIGC智能营销实验室', href: '/competition' },
-              { name: 'AIGC金融工程智能创新实验室', href: '/competition' },
-              { name: 'AIGC融媒体实验室', href: '/competition' },
-              { name: 'AIGC网络主播实验室', href: '/competition' },
+              { name: 'AIGC智能营销实验室', href: '/platform/new-business-studies/3' },
+              { name: 'AIGC金融工程智能创新实验室', href: '/platform/new-business-studies/4' },
+              { name: 'AIGC融媒体实验室', href: '/platform/new-business-studies/5' },
+              { name: 'AIGC网络主播实验室', href: '/platform/new-business-studies/6' },
             ],
           },
           {
             name: '低空经济',
+            href: '/platform/dk',
             items: [
-              { name: '低空技术', href: '/competition' },
-              { name: '低空文旅', href: '/competition' },
-              { name: '低空物流', href: '/competition' },
+              { name: '低空技术', href: '/platform/dk' },
+              { name: '低空文旅', href: '/platform/dk' },
+              { name: '低空物流', href: '/platform/dk' },
             ],
           },
         ],
@@ -89,8 +92,8 @@ const navList = [
       {
         name: 'AI教学基础层',
         items: [
-          { name: '人工智能基础:数据分析通识课', href: '/digital/yx_1_3' },
-          { name: '人工智能应用通识课', href: '/digital/yx_1_4' },
+          { name: '人工智能基础:数据分析通识课', href: '/bi' },
+          { name: '人工智能应用通识课', href: '/ai' },
           { name: '数字教材', href: '/book' },
           { name: '个性化智能学习平台', href: 'https://saas-learn.ezijing.com/' },
           { name: '紫荆e-SaaS', href: 'https://e-saas.ezijing.com/' },
@@ -238,7 +241,7 @@ const toggleLocale = () => {
 const handleLogin = () => {
   window.open(
     runtimeConfig.public.loginURL + '/login/index?redirect_uri=' + encodeURIComponent(location.href),
-    '_blank'
+    '_blank',
   )
 }
 
@@ -303,7 +306,7 @@ const handleSearch = () => {
                             <NuxtLink :to="item.href" target="_blank">{{ item.name }}</NuxtLink>
                           </li>
                         </ul>
-                        <div class="group" v-if="subitem.groupItems">
+                        <div :class="{ group: subitem.groupItems.length > 3 }" v-if="subitem.groupItems">
                           <dl
                             class="nav-item-full-box-content-item-group"
                             v-for="groupItem in subitem.groupItems"
@@ -574,6 +577,8 @@ const handleSearch = () => {
       gap: 20px;
     }
     dt {
+      // min-width: 54px;
+      text-align-last: justify;
       font-weight: bold;
       color: var(--main-color);
       white-space: nowrap;

app/components/AppliedUndergraduateIcons.vue

+<script setup>
+defineProps({
+  name: { type: Number, required: true },
+})
+</script>
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="41"
+    height="41.044"
+    viewBox="0 0 41 41.044"
+    v-if="name == 1">
+    <defs>
+      <clipPath id="a"><rect fill="currentColor" width="41" height="41.044" /></clipPath>
+    </defs>
+    <g transform="translate(113 -10.89)">
+      <g transform="translate(-113 10.89)">
+        <g clip-path="url(#a)" transform="translate(0 0)">
+          <path
+            fill="currentColor"
+            d="M11.215,128.43H6.332A2.436,2.436,0,0,0,3.9,130.866v12.622a1.217,1.217,0,0,0,1.218,1.222,1.2,1.2,0,0,0,.68-.212l2.293-1.547a1.265,1.265,0,0,1,1.445,0l2.194,1.51a1.2,1.2,0,0,0,.688.219,1.218,1.218,0,0,0,1.222-1.222V130.866a2.436,2.436,0,0,0-2.425-2.436Zm.241,13.167-.666-.457a3.456,3.456,0,0,0-3.936,0l-.761.512V130.866a.242.242,0,0,1,.238-.241h4.883a.245.245,0,0,1,.241.241Zm0,0"
+            transform="translate(1.946 -122.552)" />
+          <path
+            fill="currentColor"
+            d="M-78.008,11.41h-29.26a5.852,5.852,0,0,0-5.852,5.852v29.26a5.852,5.852,0,0,0,1.714,4.138,5.852,5.852,0,0,0,4.138,1.714h17.483a12.516,12.516,0,0,1-2.071-16.956,12.516,12.516,0,0,1,16.774-3.23,12.76,12.76,0,0,1,2.926,2.56V17.262a5.852,5.852,0,0,0-1.714-4.138,5.852,5.852,0,0,0-4.138-1.714Zm3.658,18.653a14.707,14.707,0,0,0-17.816,2.3,14.707,14.707,0,0,0-2.3,17.816h-12.8a3.658,3.658,0,0,1-3.658-3.658V17.262a3.657,3.657,0,0,1,3.658-3.658h29.26a3.657,3.657,0,0,1,2.586,1.071,3.657,3.657,0,0,1,1.071,2.586Zm0,0"
+            transform="translate(113.114 -11.384)" />
+        </g>
+      </g>
+      <path
+        fill="currentColor"
+        d="M331.786,448.984a7.4,7.4,0,1,1-7.4,7.4,7.4,7.4,0,0,1,7.4-7.4m0-2.195a9.594,9.594,0,1,0,6.787,2.81,9.6,9.6,0,0,0-6.787-2.81Zm0,0"
+        transform="translate(-413.425 -414.1)" />
+      <path
+        fill="currentColor"
+        d="M468.7,541.743l3.376-3.424L468.7,534.9a1.031,1.031,0,0,1-.234-.366,1.145,1.145,0,0,1-.08-.41,1.094,1.094,0,0,1,.08-.4.967.967,0,0,1,.234-.366,1.028,1.028,0,0,1,1.5,0l4.082,4.137a1.14,1.14,0,0,1,.245.366,1.367,1.367,0,0,1,.1.442,1.142,1.142,0,0,1-.059.432.7.7,0,0,1-.223.34l-4.148,4.191a1.06,1.06,0,0,1-1.5,0,1,1,0,0,1-.234-.366,1.145,1.145,0,0,1-.08-.41,1.092,1.092,0,0,1,.08-.4,1,1,0,0,1,.234-.366Zm0,0"
+        transform="translate(-620.105 513.784) rotate(-90)" />
+    </g>
+  </svg>
+
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="43.145"
+    height="43.202"
+    viewBox="0 0 43.145 43.202"
+    v-if="name == 2">
+    <defs>
+      <clipPath id="a"><rect fill="currentColor" width="43.144" height="43.202" /></clipPath>
+    </defs>
+    <g transform="translate(61 -62.89)">
+      <g transform="translate(-61 62.89)">
+        <g clip-path="url(#a)" transform="translate(0)">
+          <path
+            fill="currentColor"
+            d="M-36.349,82.079A9.244,9.244,0,0,0-27.1,72.835a9.244,9.244,0,0,0-9.244-9.244,9.244,9.244,0,0,0-9.244,9.244,9.244,9.244,0,0,0,9.244,9.244Zm0-15.419a6.177,6.177,0,0,1,6.177,6.177,6.177,6.177,0,0,1-6.177,6.177,6.177,6.177,0,0,1-6.177-6.177,6.177,6.177,0,0,1,6.177-6.177Zm-9.244,15.419a8.917,8.917,0,0,0,1.041-.1,12.318,12.318,0,0,1-2.514-3.158,6.163,6.163,0,0,1-4.7-5.978,6.163,6.163,0,0,1,4.7-5.978A12.309,12.309,0,0,1-44.551,63.7a7.737,7.737,0,0,0-1.041-.111,9.244,9.244,0,0,0-9.244,9.244,9.244,9.244,0,0,0,9.244,9.244Zm-1.741,3.257A15.354,15.354,0,0,0-61,100.568a1.541,1.541,0,0,0,1.541,1.541,1.541,1.541,0,0,0,1.541-1.541,12.281,12.281,0,0,1,6.024-10.541,17.838,17.838,0,0,1,4.56-4.69Zm19.058,5.987h4.182a15.332,15.332,0,0,0-12.258-6.163,15.407,15.407,0,0,0-15.407,15.407,1.541,1.541,0,0,0,1.541,1.541,1.541,1.541,0,0,0,1.541-1.541A12.325,12.325,0,0,1-36.352,88.242a12.214,12.214,0,0,1,8.076,3.081Zm10.156,5.358a1.516,1.516,0,0,0-1.282-.736c-.034,0-.062.018-.092.018-.046,0-.089-.022-.136-.018h-4.394a1.541,1.541,0,0,0-1.541,1.541,1.541,1.541,0,0,0,1.541,1.541h.752l-3.858,3.861-6.493-6.5a1.6,1.6,0,0,0-1.208-.456,1.578,1.578,0,0,0-1.189.453l-7.593,7.6a1.6,1.6,0,0,0,.043,2.212,1.6,1.6,0,0,0,2.212.043l6.514-6.511,6.5,6.505a1.584,1.584,0,0,0,1.208.456,1.587,1.587,0,0,0,1.208-.456l4.98-4.98v.854a1.541,1.541,0,0,0,1.541,1.541,1.541,1.541,0,0,0,1.541-1.541V97.486a1.487,1.487,0,0,0-.259-.8Zm0,0"
+            transform="translate(61 -63.549)" />
+        </g>
+      </g>
+    </g>
+  </svg>
+
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="44.306"
+    height="42.823"
+    viewBox="0 0 44.306 42.823"
+    v-if="name == 3">
+    <defs>
+      <clipPath id="a"><rect fill="currentColor" width="44.306" height="42.823" /></clipPath>
+    </defs>
+    <g transform="translate(61 -74.89)">
+      <g transform="translate(-61 74.89)">
+        <g clip-path="url(#a)" transform="translate(0 0)">
+          <path
+            fill="currentColor"
+            d="M-59.418,93.532a1.582,1.582,0,0,1,1.571,1.4l.011.185v13.723a1.582,1.582,0,0,0,1.4,1.571l.185.011h8.1a1.582,1.582,0,0,1,1.576,1.49,1.582,1.582,0,0,1-1.393,1.663l-.184.011h-8.1a4.746,4.746,0,0,1-4.739-4.468l-.008-.278V95.114a1.582,1.582,0,0,1,1.582-1.582ZM-21.445,75.61a4.747,4.747,0,0,1,4.739,4.468l.008.279v28.48a4.747,4.747,0,0,1-4.468,4.739l-.278.008h-8.243a1.582,1.582,0,0,1-1.576-1.49,1.582,1.582,0,0,1,1.393-1.663l.183-.011h8.243a1.582,1.582,0,0,0,1.571-1.4l.011-.185V85.1H-53.089a1.583,1.583,0,0,1-1.582-1.582,1.583,1.583,0,0,1,1.582-1.582h33.226V80.357a1.582,1.582,0,0,0-1.4-1.571l-.185-.011H-56.253a1.582,1.582,0,0,0-1.571,1.4l-.011.185V82.25a1.582,1.582,0,0,1-1.489,1.578,1.582,1.582,0,0,1-1.664-1.393L-61,82.25V80.357a4.747,4.747,0,0,1,4.468-4.739l.279-.008ZM-59.418,85.879a1.582,1.582,0,0,1,1.571,1.4l.011.183v2.165a1.582,1.582,0,0,1-1.49,1.576,1.582,1.582,0,0,1-1.663-1.393L-61,89.625V87.461a1.582,1.582,0,0,1,1.582-1.582Zm0,0"
+            transform="translate(61 -75.565)" />
+        </g>
+      </g>
+      <path
+        fill="currentColor"
+        d="M177.309,382.809a7.911,7.911,0,0,0-7.911,7.911l.008.37a7.9,7.9,0,0,0,3.044,5.873l.111.084,0,3.166a1.582,1.582,0,0,0,1.582,1.582h6.329l.185-.011a1.582,1.582,0,0,0,1.4-1.571l0-3.168.112-.084a7.911,7.911,0,0,0-4.861-14.153Zm0,3.164a4.747,4.747,0,0,1,2.373,8.859l-.155.1a1.582,1.582,0,0,0-.633,1.266l0,2.43h-3.166V396.2a1.582,1.582,0,0,0-.788-1.37,4.747,4.747,0,0,1,2.371-8.859Zm0,0"
+        transform="translate(-216.158 -288.888)" />
+      <path
+        fill="currentColor"
+        d="M72.422,307.308a1.582,1.582,0,0,1,0,3.164H66.093a1.582,1.582,0,0,1,0-3.164ZM57.391,292.277a1.582,1.582,0,0,1,.185,3.153l-.185.011H55.809a1.582,1.582,0,0,1-.185-3.153l.185-.011Zm25.315,0a1.582,1.582,0,0,1,.185,3.153l-.185.011H81.124a1.582,1.582,0,0,1-.185-3.153l.185-.011Zm-2.278-8.006a1.582,1.582,0,0,1,.133,2.088l-.131.149-1.119,1.119a1.582,1.582,0,0,1-2.37-2.088l.131-.15,1.119-1.119a1.582,1.582,0,0,1,2.239,0Zm-22.341,0a1.582,1.582,0,0,1,2.237,0l1.119,1.117.131.15a1.582,1.582,0,0,1-2.37,2.088l-1.119-1.119-.131-.15a1.583,1.583,0,0,1,.131-2.089Zm11.17-3.861a1.582,1.582,0,0,1,1.571,1.4l.011.185v1.582a1.582,1.582,0,0,1-3.153.185l-.011-.185v-1.582a1.582,1.582,0,0,1,1.582-1.582Zm0,0"
+        transform="translate(-108.107 -192.819)" />
+    </g>
+  </svg>
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="43.677" height="45.547" viewBox="0 0 43.677 45.547" v-if="name == 4">
+    <g transform="translate(35.69 38.1)">
+      <path fill="currentColor" d="M297.367,572.076" transform="translate(-311.217 -570.164)" />
+      <path
+        fill="currentColor"
+        d="M7.987-16.261A21.76,21.76,0,0,1,1.854-1.1L1.162-3.294A19.761,19.761,0,0,0,6-16.261a19.8,19.8,0,0,0-6.639-14.8,19.9,19.9,0,0,0-4.445-3,19.721,19.721,0,0,0-8.762-2.041,19.717,19.717,0,0,0-8.765,2.043,19.9,19.9,0,0,0-4.4,2.966A19.8,19.8,0,0,0-33.7-16.261,19.759,19.759,0,0,0-28.945-3.389L-29.654-1.2A21.759,21.759,0,0,1-35.69-16.261,21.793,21.793,0,0,1-28.324-32.6a21.913,21.913,0,0,1,4.361-3.013,21.664,21.664,0,0,1,2.07-.951A21.724,21.724,0,0,1-13.852-38.1a21.724,21.724,0,0,1,8.041,1.534q1.005.4,1.96.894A21.886,21.886,0,0,1,.591-32.629,21.793,21.793,0,0,1,7.987-16.261Z" />
+      <path
+        fill="currentColor"
+        d="M99.281,93.98a14.85,14.85,0,0,1-1.637,6.8l-.914-2.9a13,13,0,1,0-24.85-.17V97.9l-.906,2.793a14.947,14.947,0,1,1,28.307-6.71Z"
+        transform="translate(-98.18 -109.449)" />
+      <path
+        fill="currentColor"
+        d="M375.22,317.568l-6.071-5.333a.461.461,0,0,0-.739.5l3.266,9.276a.461.461,0,0,0,.778.154c.435-.487,2.616-2.932,2.839-3.248a1.253,1.253,0,0,0,.035-1.208.453.453,0,0,0-.109-.141Zm-2.23.876c-.228.248-.472.514-.67.734l-1.468-3.633,2.549,2.449c-.1.116-.264.29-.411.45Zm.411.516"
+        transform="translate(-377.577 -327.254)" />
+      <path
+        fill="currentColor"
+        d="M172.8,218.2l4.237-5.374a1.109,1.109,0,0,0-.854-1.816H162.287a1.11,1.11,0,0,0-.837,1.838l4.491,5.172-2.914,8.99,0,.011-2.5,7.705a1.115,1.115,0,0,0,.431,1.265c1.874,1.272,6.429,4.231,8.242,4.231,1.885,0,6.854-3.411,8.33-4.456a1.107,1.107,0,0,0,.421-1.24Zm-3.6,19.807c-.655,0-3.395-1.474-6.305-3.386l2.188-6.75c0-.006.006-.01.008-.016h0l.183-.565,0-.018.046-.143c0-.006.007-.016.009-.021s0-.007,0-.01l2.878-8.879a1.318,1.318,0,0,0-.258-1.265l-3.234-3.728h9.113l-3.009,3.9c-.016.022-.032.044-.046.067a.826.826,0,0,0-.065.065,1.032,1.032,0,0,0-.087.163c-.008.013-.014.025-.021.038a1.078,1.078,0,0,0-.112.306,1.139,1.139,0,0,0-.013.136,1.1,1.1,0,0,0,0,.232c0,.026,0,.05,0,.076a.523.523,0,0,0,.022.1l5.082,16.11c-2.951,2.023-5.731,3.587-6.386,3.587Zm0,0"
+        transform="translate(-183.299 -232.774)" />
+    </g>
+  </svg>
+</template>

app/components/home/partner.vue

@@ -97,32 +97,20 @@ const currentList = computed(() => {
     </div>
     <div class="scroll-container">
       <div class="scroll-track" :key="activeTab">
-        <!-- 第一组 -->
-        <div
-          v-for="(column, index) in currentList"
-          :key="'a-' + index"
-          class="partner-column"
-          :class="{ 'partner-column-odd': index % 2 === 0, 'partner-column-even': index % 2 !== 0 }">
-          <div v-for="(item, idx) in column" :key="idx" class="partner-item">
-            <div class="partner-logo">
-              <img :src="item.icon" :alt="item.name" />
+        <template v-for="copy in 3" :key="copy">
+          <div
+            v-for="(column, index) in currentList"
+            :key="'a-' + index"
+            class="partner-column"
+            :class="{ 'partner-column-odd': index % 2 === 0, 'partner-column-even': index % 2 !== 0 }">
+            <div v-for="(item, idx) in column" :key="idx" class="partner-item">
+              <div class="partner-logo">
+                <img :src="item.icon" :alt="item.name" />
+              </div>
+              <div class="partner-name">{{ item.name }}</div>
             </div>
-            <div class="partner-name">{{ item.name }}</div>
           </div>
-        </div>
-        <!-- 第二组（用于无缝衔接） -->
-        <div
-          v-for="(column, index) in currentList"
-          :key="'b-' + index"
-          class="partner-column"
-          :class="{ 'partner-column-odd': index % 2 === 0, 'partner-column-even': index % 2 !== 0 }">
-          <div v-for="(item, idx) in column" :key="idx" class="partner-item">
-            <div class="partner-logo">
-              <img :src="item.icon" :alt="item.name" />
-            </div>
-            <div class="partner-name">{{ item.name }}</div>
-          </div>
-        </div>
+        </template>
       </div>
     </div>
   </div>
@@ -199,7 +187,7 @@ const currentList = computed(() => {
   .scroll-track {
     display: flex;
     gap: 24px;
-    animation: scroll 15s linear infinite;
+    animation: scroll 30s linear infinite;
     width: fit-content;
 
     &:hover {

app/components/home/school.vue

@@ -3,7 +3,7 @@ import SchoolIcons from './schoolIcons.vue'
 const rows = [
   {
     name: '学习<br/>服务',
-    items: [{ btns: [{ name: 'AI学习助手' }] }],
+    items: [{ btns: [{ name: 'AI学习助手', tips: '即将上线，敬请期待' }] }],
   },
   {
     name: '职业<br/>技能',
@@ -48,9 +48,9 @@ const rows = [
       {
         icon: 5,
         items: [
-          { name: 'AI+专业改造', href: '/digital/yx_3' },
-          { name: '新双高建设', href: '' },
-          { name: '应用型本科', href: '' },
+          { name: 'AI+专业改造', href: '/solution/ai' },
+          { name: '新双高建设', href: '/solution/new-double-high' },
+          { name: '应用型本科', href: '/solution/applied-undergraduate' },
         ],
       },
       {
@@ -67,7 +67,7 @@ const rows = [
       },
       {
         icon: 8,
-        items: [{ name: '国际合作', href: '' }],
+        items: [{ name: '国际合作', href: '/solution/international' }],
       },
     ],
   },
@@ -77,18 +77,20 @@ const rows = [
       {
         icon: 9,
         title: '新工科',
+        href: '/platform',
         desc: [
-          { name: '大数据实验室', href: '/digital/yx_1_3' },
-          { name: '网络安全实验室', href: '/digital/yx_1_4' },
-          { name: '人工智能开发实验室', href: '/digital/yx_1_5' },
-          { name: '物联网实验室', href: '/digital/yx_1_6' },
-          { name: '信息安全实验室', href: '/digital/yx_1_7' },
+          { name: '大数据实验室', href: '/platform/new-engineering/1' },
+          { name: '网络安全实验室', href: '/platform/new-engineering/4' },
+          { name: '人工智能开发实验室', href: '/platform/new-engineering/2' },
+          { name: '物联网实验室', href: '/platform/new-engineering/5' },
+          { name: '信息安全实验室', href: '/platform/new-engineering/3' },
         ],
         className: 'home-school-box-new-engineering',
       },
       {
         icon: 10,
         title: '新商科',
+        href: '/platform',
         desc: [
           { name: 'AIGC智能营销实验室', href: '/competition' },
           { name: 'AIGC金融工程智能创新实验室', href: '/competition' },
@@ -99,11 +101,12 @@ const rows = [
       {
         icon: 11,
         title: '低空经济',
+        href: '/platform/dk',
         desc: [
-          { name: '低空技术', href: '/competition' },
-          { name: '低空文旅', href: '/competition' },
-          { name: '低空物流', href: '/competition' },
-          { name: '…', href: '/competition' },
+          { name: '低空技术', href: '/platform/dk' },
+          { name: '低空文旅', href: '/platform/dk' },
+          { name: '低空物流', href: '/platform/dk' },
+          { name: '…', href: '/platform/dk' },
         ],
       },
     ],
@@ -114,10 +117,10 @@ const rows = [
       {
         className: 'home-school-box-ai',
         btns: [
-          { name: '人工智能基础：数据分析通识课', href: 'https://eec.ezijing.com/product' },
-          { name: '人工智能应用通识课', href: 'https://eec.ezijing.com/AI' },
+          { name: '人工智能基础：数据分析通识课', href: '/bi' },
+          { name: '人工智能应用通识课', href: '/ai' },
           { name: '数字教材', href: '/book' },
-          { name: '个性化智能学习平台', href: 'https://saas-learn.ezijing.com/' },
+          { name: '个性化智能学习平台', href: 'https://saas-learn.ezijing.com/', tips: '即将上线，敬请期待' },
           { name: '紫荆e-SaaS', href: 'https://e-saas.ezijing.com/' },
         ],
       },
@@ -162,7 +165,7 @@ const rows = [
                 </ul>
                 <div>
                   <div class="home-school-box-title" v-if="box.title">
-                    {{ box.title }}
+                    <a :href="box.href" target="_blank">{{ box.title }}</a>
                   </div>
                   <ul class="home-school-box-desc" v-if="box.desc">
                     <li v-for="desc in box.desc" :key="desc.name">
@@ -322,7 +325,9 @@ const rows = [
     position: absolute;
     right: 0;
     bottom: 0;
-    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: 51px;
     color: #dbd4d0;

app/pages/ai/index.vue

@@ -452,8 +452,6 @@ const tabList = [
       border-radius: 12px 0px 0px 12px;
       display: flex;
       gap: 18px;
-      dl {
-      }
       dt {
         margin-bottom: 10px;
         text-align: center;

app/pages/bi/index.vue

+<script setup>
+const tabIndex = ref(0)
+const tabList = [
+  {
+    name: '标准',
+    title: '以国标要求开发教学资源',
+    desc: '清控紫荆教育以国家教学资源开发标准为基础，提出了更高的企业课程开发标准，全面涵盖了课程大纲、课程导学、教学PPT、课程活动、课后训练等完整的教学流程。清控紫荆教育还提供了项目式教材、活页式教材等多种形式的教学资源开发标准，完整的覆盖了高校教学资源的方方面面。',
+  },
+  {
+    name: '实践教学',
+    title: '配套提供基于企业真实项目转化的行业案例集',
+    desc: `清控紫荆教育与行业企业合作，将行业企业真实的项目，转化为教学案例，并进行案例资源的二次开发，适配到商业数据分析实训平台，为高校提供了完整的行业真实案例支撑。
+商业数据分析实训平台目前配备10个案例，10篇案例原文、13个数据集、31份辅助资源、65份案例指导书、65套教学PPT、231个教学视频。下表显示为商业数据分析实训平台的行业案例集，以及每个案例配套的资源情况。`,
+  },
+]
+</script>
+
+<template>
+  <div class="bi-page">
+    <div class="banner">
+      <div class="banner-inner">
+        <h1>人工智能基础：数据分析通识课</h1>
+        <span class="line"></span>
+        <h2>“一体两翼”式设计AI+数据分析能力建设</h2>
+        <p>
+          创新“一体两翼”设计，基于企业真实使用的国产、工业级智能数据分析平台的“核心主体”，结合大模型赋能智能数据分析和工业级产品的教育适配化改造的“两翼”，辅以丰富完整的教学资源库，实现企业真实操作与教学场景的无缝衔接。
+        </p>
+      </div>
+    </div>
+    <section class="section" style="padding-bottom: 90px">
+      <h2 class="section-title">数据分析能力通识课建设</h2>
+      <div class="section-inner">
+        <p class="jx-desc">
+          为培养数字经济时代人人必备的数据分析基础技能，清控紫荆教育依托智能数据分析平台，契合地方产业数字化转型需求，通过“理论
+          +
+          企业真实案例实训”模式推进学校专业数字化改造，培育地方所需数字经济人才。理论课程覆盖商业数据分析核心知识，由行业专家授课，以“全流程数字化教学”
+          支撑
+          16个学时教学；实训课程含案例实训（课前预习、课中实操、课后考核）与企业生产性项目实操，遵循企业项目管理流程；紫荆教育提供全程服务，保障教学高质量落地。
+        </p>
+        <img src="https://webapp-pub.ezijing.com/www/pc/next/bi/bi_1.png" style="width: 100%" />
+      </div>
+    </section>
+    <section class="section" style="background: #f0f2f5; padding-bottom: 90px">
+      <h2 class="section-title">平台功能</h2>
+      <div class="section-inner">
+        <p class="jx-desc">
+          创新“一体两翼”设计，基于企业真实使用的国产、工业级智能数据分析平台的“核心主体”，结合大模型赋能智能数据分析和工业级产品的教育适配化改造的“两翼”，辅以丰富完整的教学资源库，实现企业真实操作与教学场景的无缝衔接。
+        </p>
+        <img src="https://webapp-pub.ezijing.com/www/pc/next/bi/bi_2.png" style="width: 100%" />
+      </div>
+    </section>
+
+    <section class="section jxzy">
+      <h2 class="section-title">教学资源</h2>
+      <div class="section-inner">
+        <div class="tab">
+          <ul class="tab-header">
+            <li
+              v-for="(item, index) in tabList"
+              :key="item.name"
+              :class="{ 'is-active': tabIndex === index }"
+              @mouseenter="tabIndex = index">
+              {{ item.name }}
+            </li>
+          </ul>
+          <div class="tab-body">
+            <div class="tab-content">
+              <h3>{{ tabList[tabIndex].title }}</h3>
+              <p>{{ tabList[tabIndex].desc }}</p>
+            </div>
+          </div>
+          <div class="box">
+            <template v-if="tabIndex === 0">
+              <dl>
+                <dt>标准化课程研发</dt>
+                <dd><img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_1-1.png" /></dd>
+              </dl>
+              <dl>
+                <dt>对标国家级一流课程的课程资源</dt>
+                <dd>
+                  <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_1-2.png" /><img
+                    src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_1-3.png" />
+                </dd>
+              </dl>
+              <dl>
+                <dt>标准化的建设模板</dt>
+                <dd><img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_1-4.png" /></dd>
+              </dl>
+            </template>
+            <template v-if="tabIndex === 1">
+              <img src="https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_2.png" alt="" />
+            </template>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section" style="padding-bottom: 90px">
+      <h2 class="section-title">“岗课赛证”全面融通</h2>
+      <div class="section-inner">
+        <img src="https://webapp-pub.ezijing.com/www/pc/next/bi/bi_3.png" style="width: 100%" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss">
+.bi-page {
+  background-color: #fff;
+  .section {
+    &-title {
+      padding: 60px 0;
+      font-weight: bold;
+      font-size: 30px;
+      color: #333;
+      line-height: 1;
+      text-align: center;
+    }
+    &-subtitle {
+      display: inline-block;
+      margin: 0 0 36px 0;
+      font-size: 20px;
+      line-height: 32px;
+      color: #424242;
+      border-bottom: 1px solid var(--main-color);
+    }
+    &-inner {
+      max-width: 1300px;
+      margin: 0 auto;
+    }
+  }
+  .banner {
+    height: 650px;
+    background: url('https://webapp-pub.ezijing.com/www/pc/next/bi/bi_banner.jpg') no-repeat center center;
+    background-size: cover;
+    &-inner {
+      max-width: 1300px;
+      height: 100%;
+      margin: 0 auto;
+      padding-left: 52px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      color: #fff;
+      h1 {
+        font-size: 60px;
+        font-weight: bold;
+        line-height: 1;
+      }
+      h2 {
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 500;
+        font-size: 24px;
+        color: #ffffff;
+        line-height: 42px;
+      }
+      .line {
+        margin: 46px 0;
+        width: 60px;
+        height: 6px;
+        background: #fff;
+      }
+      p {
+        max-width: 860px;
+        font-size: 18px;
+      }
+    }
+  }
+
+  .jx-desc {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 60px;
+  }
+
+  .jxzy {
+    position: relative;
+    height: 600px;
+    background: var(--main-color) url('https://webapp-pub.ezijing.com/www/pc/next/ai/jxzy_bg.png') no-repeat center
+      right;
+    .section-title {
+      color: #fff;
+    }
+    .box {
+      padding: 20px;
+      margin-left: -70px;
+      position: absolute;
+      left: 50%;
+      top: 180px;
+      right: 0;
+      height: 300px;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 12px 0px 0px 12px;
+      display: flex;
+      gap: 18px;
+      dt {
+        margin-bottom: 10px;
+        text-align: center;
+        line-height: 24px;
+        background: var(--main-color);
+        border-radius: 22px;
+      }
+      dd {
+        display: flex;
+        gap: 18px;
+      }
+    }
+  }
+  .bz-desc {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 16px;
+    color: #333333;
+    line-height: 24px;
+  }
+
+  .tab {
+    width: 540px;
+    color: #fff;
+    &-header {
+      display: flex;
+      gap: 50px;
+      border-bottom: 1px solid #ffffff;
+      padding: 0 10px;
+      li {
+        position: relative;
+        font-weight: 400;
+        font-size: 22px;
+        line-height: 1;
+        padding-bottom: 10px;
+        &.is-active {
+          font-size: 22px;
+          font-weight: bold;
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: -3px;
+            left: 0;
+            width: 30px;
+            height: 5px;
+            background-color: #ffffff;
+            left: 50%;
+            transform: translate(-50%, 0);
+            border-radius: 5px;
+          }
+        }
+      }
+    }
+    &-content {
+      h3 {
+        padding: 45px 0 30px;
+        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-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 30px;
+        white-space: pre-wrap;
+      }
+    }
+  }
+}
+</style>

app/pages/book/index.vue

@@ -119,14 +119,14 @@ const ptList = ref([
             <div class="bz-h1">企业资质与安全等保认证</div>
             <ul class="img-box">
               <li>
-                <img src="https://webapp-pub.ezijing.com/www/pc/next/szjc/zs1.png" />
+                <img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/z1.jpg" />
               </li>
               <li>
-                <img src="https://webapp-pub.ezijing.com/www/pc/next/szjc/zs2.png" />
+                <img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/z2.png" />
               </li>
-              <!-- <li>
+              <li>
                 <img src="https://webapp-pub.ezijing.com/www/pc/digital/szz/z3.jpg" />
-              </li> -->
+              </li>
             </ul>
           </div>
         </div>
@@ -153,14 +153,18 @@ const ptList = ref([
       line-height: 1;
       h2 {
         font-size: 36px;
-        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN-Bold,
+          Source Han Sans CN;
         font-weight: bold;
         line-height: 1;
       }
       h1 {
         margin-top: 20px;
         font-size: 60px;
-        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN-Bold,
+          Source Han Sans CN;
         font-weight: bold;
         line-height: 1;
         span {
@@ -176,14 +180,18 @@ const ptList = ref([
       h6 {
         margin-bottom: 30px;
         font-size: 20px;
-        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN-Medium,
+          Source Han Sans CN;
         font-weight: 500;
         line-height: 1;
       }
       p {
         max-width: 720px;
         font-size: 18px;
-        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-family:
+          Source Han Sans CN-Regular,
+          Source Han Sans CN;
         line-height: 30px;
       }
     }
@@ -381,6 +389,12 @@ const ptList = ref([
         display: flex;
         align-items: center;
         justify-content: space-between;
+        li {
+          flex: 1;
+        }
+        img {
+          width: 100%;
+        }
       }
     }
   }

app/pages/digital/yx_1.vue

@@ -81,14 +81,14 @@ const skList = ref([
     iconActive: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1/xsk_1a.png',
     title: '商业数据分析实训平台',
     desc: '培养数字经济底层思维能力的<br />工业级实训平台',
-    more: '/digital/yx_1_1',
+    more: '/platform/new-business-studies/1',
   },
   {
     icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1/xsk_2.png',
     iconActive: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1/xsk_2a.png',
     title: '数字营销实训平台',
     desc: '培养企业数字化转型核心技能的<br />工业级实训平台',
-    more: '/digital/yx_1_2',
+    more: '/platform/new-business-studies/2',
   },
   {
     icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1/xsk_3.png',
@@ -110,14 +110,14 @@ const gkList = ref([
     iconActive: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1/xgk_1a.png',
     title: '大数据实训平台',
     desc: '综合培养大数据<br />基础知识及专业知识的<br />一站式实训平台',
-    more: '/digital/yx_1_3',
+    more: '/platform/new-engineering/1',
   },
   {
     icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1/xgk_2.png',
     iconActive: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1/xgk_2a.png',
     title: '人工智能实训平台',
     desc: '重在人工智能<br />基础知识及应用的<br />一站式实训平台',
-    more: '/digital/yx_1_4',
+    more: '/platform/new-engineering/2',
   },
   {
     icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1/xgk_3.png',
@@ -151,14 +151,18 @@ const gkList = ref([
     color: #ffffff;
     h2 {
       font-size: 42px;
-      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      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-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
       font-weight: 500;
       line-height: 1;
       letter-spacing: 4px;
@@ -172,7 +176,9 @@ const gkList = ref([
     h6 {
       margin-bottom: 24px;
       font-size: 20px;
-      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
       font-weight: 500;
       line-height: 1;
       letter-spacing: 2px;
@@ -180,7 +186,9 @@ const gkList = ref([
     p {
       max-width: 644px;
       font-size: 14px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
       line-height: 26px;
     }
     a {
@@ -188,7 +196,9 @@ const gkList = ref([
       width: 112px;
       height: 36px;
       font-size: 16px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
       font-weight: 400;
       color: #ffffff;
       line-height: 36px;

app/pages/international/index.vue

-<script setup></script>
-
-<template>
-  <div>
-    <h1>国际合作</h1>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>

app/pages/platform/dk/index.vue

+<script setup></script>
+
+<template>
+  <div class="dk-page">
+    <div class="banner">
+      <div class="banner-inner">
+        <h1>低空经济专业建设解决方案</h1>
+        <span class="line"></span>
+        <p>
+          锚定万亿低空赛道，依托清华基因与产教融合优势，以 “学科交叉 + 数智赋能”
+          构建专业建设新范式，通过产业学院共建、数智实训基地落地、双师型师资培育、一体化教学平台支撑，打造覆盖低空技术、物流、文旅、应急等全场景的人才培养体系，精准填补产业人才缺口，为低空经济高质量发展注入复合型创新力量。
+        </p>
+      </div>
+    </div>
+    <section class="section">
+      <h2 class="section-title">中国低空经济产业人才需求</h2>
+      <div class="section-inner">
+        <p class="section-desc">
+          低空经济相关岗位人才需求呈现爆发式增长，工信部赛迪研究院《中国低空经济发展研究报告（2024）》显示，2025年，我国低空经济的市场规模将达到1.5万亿元，到2035年有望达到3.5万亿元。预计2026年底低空经济领域人才缺口将达200万以上。随着行业的发展，无人机应用场景也在持续拓展，就业新方向也应运而生。
+        </p>
+        <div class="dk-pics">
+          <img src="https://webapp-pub.ezijing.com/www/pc/next/dk/dk_1.png" />
+          <img src="https://webapp-pub.ezijing.com/www/pc/next/dk/dk_2.png" />
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">低空数智人才培养现状</h2>
+      <div class="section-inner">
+        <img src="https://webapp-pub.ezijing.com/www/pc/next/dk/dk_3.png" style="width: 100%" />
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">低空数智化人才培养解决方案</h2>
+      <div class="section-inner">
+        <img src="https://webapp-pub.ezijing.com/www/pc/next/dk/dk_4.png" style="width: 100%" />
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">教师数字素养与技能提升</h2>
+      <div class="section-inner">
+        <p class="section-desc">
+          采用“引入国际顶尖师资、互派产业院校师资、系统化培训”<span>3重手段、16个子项目</span>实现“教师的国际化水平、产业实战水平和岗课赛证融通水平”3个水平的有效提升
+        </p>
+        <img src="https://webapp-pub.ezijing.com/www/pc/next/dk/dk_5.png" style="width: 100%" />
+      </div>
+    </section>
+    <section class="section" style="padding: 90px 0">
+      <div class="section-inner">
+        <AppContact />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.dk-page {
+  background-color: #fff;
+  .section {
+    &-title {
+      padding: 90px 0 60px;
+      font-weight: bold;
+      font-size: 30px;
+      color: #333;
+      line-height: 1;
+      text-align: center;
+    }
+    &-subtitle {
+      display: inline-block;
+      margin: 0 0 36px 0;
+      font-size: 20px;
+      line-height: 32px;
+      color: #424242;
+      border-bottom: 1px solid var(--main-color);
+    }
+    &-inner {
+      max-width: 1300px;
+      margin: 0 auto;
+    }
+  }
+  .banner {
+    height: 650px;
+    background: url('https://webapp-pub.ezijing.com/www/pc/next/dk/banner.jpg') no-repeat center center;
+    background-size: cover;
+    &-inner {
+      max-width: 1300px;
+      height: 100%;
+      margin: 0 auto;
+      padding-left: 52px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      color: #fff;
+      h1 {
+        font-size: 60px;
+        font-weight: bold;
+        line-height: 1;
+      }
+      h2 {
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 500;
+        font-size: 24px;
+        color: #ffffff;
+        line-height: 42px;
+      }
+      .line {
+        margin: 46px 0;
+        width: 60px;
+        height: 6px;
+        background: #fff;
+      }
+      p {
+        max-width: 860px;
+        font-size: 18px;
+      }
+    }
+  }
+
+  .section-desc {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 60px;
+    span {
+      color: var(--main-color);
+    }
+  }
+  .dk-pics {
+    display: flex;
+    gap: 20px;
+    img {
+      flex: 1;
+      width: 50%;
+    }
+  }
+}
+</style>

app/pages/platform/index.vue

@@ -5,20 +5,21 @@ const skList = ref([
     title: '商业数据分析实验室',
     desc: `培养数字经济底层思维能力的
 工业级实训平台`,
-    more: '/digital/yx_1_1',
+    more: '/platform/new-business-studies/1',
   },
   {
     icon: 2,
     title: '数字营销实验室',
     desc: `培养企业数字化转型核心技能的
 工业级实训平台`,
-    more: '/digital/yx_1_2',
+    more: '/platform/new-business-studies/2',
   },
   {
     icon: 3,
     title: 'AIGC智能营销实验室',
     desc: `AIGC赋能营销全链路
 打造智能创作与效果优化平台`,
+    more: '/platform/new-business-studies/3',
   },
   {
     icon: 4,
@@ -26,6 +27,7 @@ const skList = ref([
 创新实验室`,
     desc: `以AIGC驱动金融量化与产品创新
 构建智能金融工程研发阵地`,
+    more: '/platform/new-business-studies/4',
   },
   {
     icon: 5,
@@ -33,6 +35,7 @@ const skList = ref([
     desc: `AIGC融合融媒体生产
 实现内容创作与多平台分发的
 高效实践基地`,
+    more: '/platform/new-business-studies/5',
   },
   {
     icon: 6,
@@ -40,6 +43,7 @@ const skList = ref([
     desc: `聚焦AIGC直播场景应用
 提供虚拟主播与智能互动
 解决方案平台`,
+    more: '/platform/new-business-studies/6',
   },
 ])
 
@@ -50,7 +54,7 @@ const gkList = ref([
     desc: `综合培养大数据
 基础知识及专业知识的
 一站式实训平台`,
-    more: '/digital/yx_1_3',
+    more: '/platform/new-engineering/1',
   },
   {
     icon: 8,
@@ -58,19 +62,21 @@ const gkList = ref([
     desc: `重在人工智能
 基础知识及应用的
 一站式实训平台`,
-    more: '/digital/yx_1_4',
+    more: '/platform/new-engineering/2',
   },
   {
     icon: 9,
     title: '信息安全实验室',
     desc: `一站式信创信息安全
 实训平台`,
+    more: '/platform/new-engineering/3',
   },
   {
     icon: 10,
     title: '网络安全实验室',
     desc: `聚焦网络攻防技术研究与人才培养
 打造实战型网络安全实验室`,
+    more: '/platform/new-engineering/4',
   },
   {
     icon: 11,
@@ -78,6 +84,7 @@ const gkList = ref([
     desc: `全面涵盖5G及边缘计算的
 新一代物联网
 实训平台`,
+    more: '/platform/new-engineering/5',
   },
 ])
 
@@ -87,18 +94,21 @@ const dkjjList = [
     title: `低空数据分析实训平台`,
     desc: `聚焦低空数据挖掘与应用
 打造专业化、实战型数据分析实训基地`,
+    more: '/platform/dk',
   },
   {
     icon: 13,
     title: `智能无人机应用技术中心`,
     desc: `聚焦于城市末端物流配送的真实业务闭环
 是最贴近“未来城市快递”场景的实训室`,
+    more: '/platform/dk',
   },
   {
     icon: 14,
     title: `低空物流运营实训中心`,
     desc: `专注于干线/支线中长距离物流运输的运营与规划
 技术含量和专业化程度极高`,
+    more: '/platform/dk',
   },
 ]
 </script>
@@ -131,7 +141,7 @@ const dkjjList = [
             <div class="gk-item__content">
               <h2>{{ item.title }}</h2>
               <p style="margin: 8px 0">{{ item.desc }}</p>
-              <a :href="item.more" v-if="item.more">查看更多</a>
+              <NuxtLink :href="item.more" target="_blank" v-if="item.more">查看更多</NuxtLink>
             </div>
           </div>
         </div>
@@ -151,7 +161,7 @@ const dkjjList = [
             <div class="gk-item__content">
               <h2>{{ item.title }}</h2>
               <p style="margin: 8px 0">{{ item.desc }}</p>
-              <a :href="item.more" v-if="item.more">查看更多</a>
+              <NuxtLink :href="item.more" target="_blank" v-if="item.more">查看更多</NuxtLink>
             </div>
           </div>
         </div>
@@ -168,7 +178,7 @@ const dkjjList = [
             <div class="gk-item__content">
               <h2>{{ item.title }}</h2>
               <p style="margin: 8px 0">{{ item.desc }}</p>
-              <a :href="item.more" v-if="item.more">查看更多</a>
+              <NuxtLink :href="item.more" target="_blank" v-if="item.more">查看更多</NuxtLink>
             </div>
           </div>
         </div>
@@ -203,7 +213,9 @@ const dkjjList = [
     color: #ffffff;
     h2 {
       font-size: 60px;
-      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-family:
+        Source Han Sans CN-Bold,
+        Source Han Sans CN;
       font-weight: bold;
       line-height: 1;
     }
@@ -217,7 +229,9 @@ const dkjjList = [
     h6 {
       margin-bottom: 24px;
       font-size: 20px;
-      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-family:
+        Source Han Sans CN-Medium,
+        Source Han Sans CN;
       font-weight: 500;
       line-height: 1;
       letter-spacing: 2px;
@@ -225,7 +239,9 @@ const dkjjList = [
     p {
       max-width: 736px;
       font-size: 16px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
       line-height: 26px;
     }
   }

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

+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/banner.png" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>商业数据分析实践教学平台</h2>
+          <span></span>
+          <h6>真场景 · 真环境 · 真项目 · 真案例</h6>
+          <p>
+            实现“贯通”专业集群底层逻辑，融合商业数据分析服务能力，实现工作实践和教学场景的一体化无缝衔接，融合海量结构化数据集，多行业综合案例集，打造全国影响力的的数字经济核心能力实践教学平台。
+          </p>
+          <a href="https://saas-lab.ezijing.com" target="_blank">进入系统</a>
+        </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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in zyList" :key="item.title">
+                <td>{{ item.title }}</td>
+                <td>{{ item.industry }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="num">
+            <p>每个案例支撑16个学时实践教学</p>
+            <li v-for="item in numList" :key="item.desc">
+              <span>{{ item.num }}</span>
+              <em>{{ item.desc }}</em>
+            </li>
+          </ul>
+        </div>
+        <h3 class="section-subtitle">案例资源示例</h3>
+        <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>
+          <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>
+          </ul>
+        </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>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">交付案例</h2>
+        <ul class="al-list">
+          <li v-for="item in jfalList" :key="item"><img :src="item" /></li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<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:电子商城数据分析', industry: '电商' },
+  { title: '案例2:房屋价格的数据分析', industry: '房地产' },
+  { title: '案例3:汽车金融企业业务分析', industry: '汽车服务' },
+  { title: '案例4:互联网零售数据分析', industry: '互联网' },
+  { title: '案例5:微博热门博主与话题模型分析', industry: '互联网' },
+  { title: '案例6:商业银行专项财务指标分析', industry: '金融' },
+  { title: '案例7:信用卡欺诈行为分析', industry: '金融' },
+  { title: '案例8:金融量化投资分析', industry: '金融' },
+  { title: '案例9:基于RFM模型进行用户分群运营分析', industry: '零售' },
+  { title: '案例10:智慧交通综合分析', industry: '交通' },
+])
+
+const numList = ref([
+  { num: 10, desc: '个案例' },
+  { num: 10, desc: '篇案例原文' },
+  { num: 13, desc: '个数据集' },
+  { num: 31, desc: '份辅助资源' },
+  { num: 65, desc: '份案例指导书' },
+  { num: 65, desc: '套教学PPT' },
+  { num: 231, desc: '个教学视频。' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '案例原文',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_1_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_1_2.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_1_3.png',
+    ],
+  },
+  {
+    title: '案例指导书',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_2_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_2_2.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_2_3.png',
+    ],
+  },
+  {
+    title: '教学PPT',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_3_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_3_2.png',
+    ],
+  },
+  {
+    title: '操作视频',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_4_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/alzy_4_2.png',
+    ],
+  },
+])
+
+// 标准服务
+const bzfwList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_1.png',
+    title: '产品服务',
+    desc: '产品安装服务<br/>产品配置调试服务<br/>产品免费升级服务<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_2.png',
+    title: '资源服务',
+    desc: '配套课程资源<br/>课程资源免费更新服务<br/>行业案例免费升级服务<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '培训服务',
+    desc: '产品使用培训<br/>产品维护培训<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '产品技术支持',
+    desc: '产品功能与性能巡检<br/>产品使用分析与建议<br/>产品在线技术支持<br/>产品电话技术支持<br/>……',
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['顶层设计服务', '师资培训服务', '行业讲座服务', '科研服务', '教学服务'])
+
+// 交付案例
+const jfalList = ref([
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/jfal_1.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/jfal_2.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/jfal_3.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/jfal_4.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/jfal_5.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/jfal_6.png',
+])
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  img {
+    width: 100%;
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4039);
+    line-height: 1;
+    color: #ffffff;
+    h2 {
+      font-size: 42px;
+      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: 24px 0;
+      width: 42px;
+      height: 3px;
+      background: #ffffff;
+    }
+    h6 {
+      margin-bottom: 24px;
+      font-size: 20px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 2px;
+    }
+    p {
+      max-width: 644px;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      line-height: 26px;
+    }
+    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:nth-child(even) {
+  background-color: #fff;
+}
+.section:nth-child(odd) {
+  background-color: #f9f8f8;
+}
+.section-inner {
+  width: 1300px;
+  margin: 0 auto;
+  padding: 100px 0;
+}
+.section-title {
+  margin-bottom: 36px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  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);
+    p {
+      margin-top: 48px;
+      font-size: 18px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+  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(51, 51, 51, 0.6);
+  }
+  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;
+  }
+}
+.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 {
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  p {
+    font-size: 20px;
+    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 30px;
+  }
+  li {
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-size: 18px;
+      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: 22px;
+      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: 14px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin-bottom: 70px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 24px;
+    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: var(--main-color);
+}
+</style>

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

+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/banner.png" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>数字营销实践教学平台</h2>
+          <span></span>
+          <h6>真连接 · 真触达 · 真营销 · 真案例</h6>
+          <p>
+            面向企业数字化转型核心基础能力培养，在成熟工业级数字营销系统基础上进行教育适配化改造，提供多个行业综合案例集及配套理论教学资源，打造高校学生数字化营销思维通识能力的一站式实践教学平台。
+          </p>
+          <a href="https://saas-dml-web.ezijing.com" target="_blank">进入系统</a>
+        </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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in zyList" :key="item.title">
+                <td>{{ item.title }}</td>
+                <td>{{ item.industry }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="num">
+            <p>每个案例支撑16个学时实践教学</p>
+            <li v-for="item in numList" :key="item.desc">
+              <span>{{ item.num }}</span>
+              <em>{{ item.desc }}</em>
+            </li>
+          </ul>
+        </div>
+        <h3 class="section-subtitle">案例资源示例</h3>
+        <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>
+          <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>
+          </ul>
+        </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>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">交付案例</h2>
+        <ul class="al-list">
+          <li v-for="item in jfalList" :key="item"><img :src="item" /></li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<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：美联英语营销案例', industry: '教育' },
+  { title: '案例2：叫叫阅读营销案例', industry: '教育' },
+  { title: '案例3：海通证券精准营销案例', industry: '金融' },
+  { title: '案例4：广发银行信用卡营销案例', industry: '金融' },
+  { title: '案例5：全棉时代营销案例', industry: '零售' },
+  { title: '案例6：Olay玉兰油营销案例', industry: '日化' },
+  { title: '案例7：一汽丰田分渠道营销案例', industry: '汽车' },
+  { title: '案例8：RIO微醺系列营销案例', industry: '零售' },
+  { title: '案例9：某股份制银行投资理财产品营销案例', industry: '金融' },
+  { title: '案例10：百草味夜伴小卤鸭脖抖音营销', industry: '零售' },
+])
+
+const numList = ref([
+  { num: 10, desc: '个案例' },
+  { num: 10, desc: '篇案例原文' },
+  { num: 34, desc: '个数据集' },
+  { num: 54, desc: '份案例指导书' },
+  { num: 54, desc: '套教学PPT' },
+  { num: 158, desc: '个教学视频。' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '案例原文',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_1_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_1_2.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_1_3.png',
+    ],
+  },
+  {
+    title: '案例指导书',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_2_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_2_2.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_2_3.png',
+    ],
+  },
+  {
+    title: '教学PPT',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_3_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_3_2.png',
+    ],
+  },
+  {
+    title: '操作视频',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_4_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/alzy_4_2.png',
+    ],
+  },
+])
+
+// 标准服务
+const bzfwList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_1.png',
+    title: '产品服务',
+    desc: '产品安装服务<br/>产品配置调试服务<br/>产品免费升级服务<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_2.png',
+    title: '资源服务',
+    desc: '配套课程资源<br/>课程资源免费更新服务<br/>行业案例免费升级服务<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '培训服务',
+    desc: '产品使用培训<br/>产品维护培训<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '产品技术支持',
+    desc: '产品功能与性能巡检<br/>产品使用分析与建议<br/>产品在线技术支持<br/>产品电话技术支持<br/>……',
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['顶层设计服务', '师资培训服务', '行业讲座服务', '科研服务', '教学服务'])
+
+// 交付案例
+const jfalList = ref([
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/jfal_1.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/jfal_2.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/jfal_3.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_2/jfal_4.png',
+])
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  img {
+    width: 100%;
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4039);
+    line-height: 1;
+    color: #ffffff;
+    h2 {
+      font-size: 42px;
+      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: 24px 0;
+      width: 42px;
+      height: 3px;
+      background: #ffffff;
+    }
+    h6 {
+      margin-bottom: 24px;
+      font-size: 20px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 2px;
+    }
+    p {
+      max-width: 644px;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      line-height: 26px;
+    }
+    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:nth-child(even) {
+  background-color: #fff;
+}
+.section:nth-child(odd) {
+  background-color: #f9f8f8;
+}
+.section-inner {
+  width: 1300px;
+  margin: 0 auto;
+  padding: 100px 0;
+}
+.section-title {
+  margin-bottom: 36px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  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);
+    p {
+      margin-top: 48px;
+      font-size: 18px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+  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(51, 51, 51, 0.6);
+  }
+  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;
+  }
+}
+.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(2, 1fr);
+  gap: 30px;
+  li {
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  p {
+    font-size: 20px;
+    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 30px;
+  }
+  li {
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-size: 18px;
+      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: 22px;
+      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: 14px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin-bottom: 70px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 24px;
+    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: var(--main-color);
+}
+</style>

app/pages/platform/new-business-studies/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: '智能采编与内容生成',
+    desc: 'AI写稿 / 智能润色 / 自动选题',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_1.png',
+        title: 'AI 辅助新闻通稿生成与多风格改写',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_2.png',
+        title: '2.5D/3D 虚拟数字人主播定制与驱动',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_3.png',
+        title: 'Text-to-Video 文字一键生成短视频',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_2.png',
+    title: '虚拟演播与视听制作',
+    desc: '数字人 / TTV视频 / 虚拟置景',
+    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_3.png',
+    title: '全媒体分发与舆情监测',
+    desc: '传播力分析 / 热点追踪',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_1.png',
+        title: 'AI 实时直播场控与弹幕自动回复助手',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_2.png',
+        title: '海报/H5/长图文自动化排版与生成',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_3.png',
+        title: '智能媒资库（MAM）：AI 标签与人脸检索',
+      },
+    ],
+  },
+])
+
+// 标准服务
+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: `AIGC 新闻写作课程
+虚拟直播实战教材
+数据新闻可视化案例
+短视频运营实操题库`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '师资培训',
+    desc: `智媒工具使用培训
+骨干教师挂职锻炼
+融媒体中心建设指导
+教学成果奖申报咨询`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '运营支持',
+    desc: `校园媒体代运营指导
+互联网+大赛项目打磨
+省级融媒体中心对接
+7x24小时技术运维`,
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['现代产业学院规划', '校园融媒体中心改造', '校级IP孵化与运营', '网络视听许可证咨询'])
+
+// 交付案例
+const jfalList = ref([
+  'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/5/al_1.jpg',
+  'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/5/al_2.jpg',
+  'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/5/al_3.jpg',
+])
+</script>
+
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/5/banner.jpg" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>AIGC融媒体实验室</h2>
+          <span></span>
+          <h6>智媒 · 融合 · 创新 · 传播</h6>
+          <p>
+            针对新闻传播、网络与新媒体及广播电视编导专业，重构“策、采、编、审、发、评”全流程。 引入 AI
+            辅助写作、虚拟数字人演播、Text-to-Video 智能视频生产技术，
+            打造集内容生产、数据分析与舆情监测于一体的智媒人才培养基地。
+          </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>
+        <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>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">交付案例</h2>
+        <p class="section-title-desc">助力高校建设省级示范性融媒体中心</p>
+        <ul class="al-list">
+          <li v-for="item in jfalList" :key="item"><img :src="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: 15px;
+  li {
+    transition: all 0.3s;
+    img {
+      width: 100%;
+    }
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  p {
+    font-size: 20px;
+    font-family:
+      Source Han Sans CN-Medium,
+      Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 30px;
+  }
+  li {
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-size: 18px;
+      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: 22px;
+      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: 14px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin-bottom: 70px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 24px;
+    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: var(--main-color);
+}
+</style>

app/pages/platform/new-business-studies/6.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: '支持 2D 真人克隆与 3D 卡通形象定制',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_2.png',
+        title: 'TTS 语音合成：支持多语种、方言与情绪调节',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_1_3.png',
+        title: '唇形驱动准确率 >98%，动作自然流畅',
+      },
+    ],
+  },
+  {
+    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: 'AI 自动识别弹幕关键词并实时语音回复',
+      },
+      {
+        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: '支持 7×24 小时无人值守循环直播',
+      },
+    ],
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3.png',
+    title: '沉浸式虚拟直播场控',
+    desc: '绿幕抠像 / XR场景 / 弹幕互动',
+    children: [
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_1.png',
+        title: '海量 3D 虚拟直播间场景一键切换',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_2.png',
+        title: '推流至抖音/快手/B站等多平台适配',
+      },
+      {
+        icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/mk_3_3.png',
+        title: '直播间流量漏斗与转化率复盘分析',
+      },
+    ],
+  },
+])
+
+const zyList = ref([
+  { title: '场景1:美妆护肤品类—虚拟主播色彩展示技巧', industry: '电商带货', hours: 16 },
+  { title: '场景2:农产品助农—原产地实景+绿幕抠像合成', industry: '乡村振兴', hours: 20 },
+  { title: '场景3:3C数码测评—多机位切换与细节特写', industry: '产品演示', hours: 12 },
+  { title: '场景4:知识付费直播—AI助教答疑与课件推送', industry: '在线教育', hours: 16 },
+  { title: '场景5:品牌自播间—24小时无人值守AI轮播配置', industry: '企业服务', hours: 24 },
+  { title: '场景6:本地生活团购—数字人探店与优惠券发放', industry: '020营销', hours: 8 },
+  { title: '场景7:游戏电竞解说—二次元 Avatar 形象驱动', industry: '娱乐直播', hours: 16 },
+  { title: '场景8:服装穿搭展示—模特走秀与画中画设置', industry: '时尚鞋服', hours: 12 },
+  { title: '场景9:虚拟发布会—XR 扩展现实场景搭建', industry: '品牌公关', hours: 16 },
+  { title: '场景10:跨境电商直播—多语种实时翻译与AI配音', industry: '跨境贸易', hours: 12 },
+])
+
+const numList = ref([
+  { num: '100+', desc: '套虚拟直播间模板' },
+  { num: '50', desc: '个高保真数字人' },
+  { num: '1W+', desc: '条带货话术库' },
+  { num: '7×24', desc: '全天候无人直播' },
+  { num: 'OBS', desc: 'OBS 深度集成' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '选品与话术(Script)',
+    tag: '智能内容',
+    name: 'AI 爆款话术生成器',
+    items: [
+      '基于大模型分析抖音/快手 Top100 直播间，提取高转化话术逻辑；',
+      '自动生成“痛点+信任+利益点+逼单”的标准化带货脚本；',
+      '支持根据商品属性（美妆/食品/数码）自动调整语言风格。',
+    ],
+  },
+  {
+    title: '数字人配置(Avatar)',
+    tag: '核心引擎',
+    name: '超写实数字人驱动',
+    items: [
+      '无需真人出镜，上传照片或视频即可克隆专属 AI 主播；',
+      '支持“文本驱动”与“音频驱动”两种模式，口型匹配精准；',
+      '内置 50+ 种情绪动作（点赞、比心、挥手），提升直播间互动感。',
+    ],
+  },
+  {
+    title: '直播推流(OBS)',
+    tag: '推流技术',
+    name: 'OBS 虚拟直播推流教学',
+    items: [
+      '深度讲解绿幕抠像、贴片添加、画中画布局等 OBS 核心技能；',
+      '支持虚拟摄像头技术，将 AI 数字人画面无缝推流至各大平台；',
+      '模拟真实网络波动环境，训练学生处理卡顿、断流等突发状况。',
+    ],
+  },
+  {
+    title: '数据复盘(Data)',
+    tag: '运营复盘',
+    name: '直播数据复盘与诊断',
+    items: [
+      '可视化展示 ACU（平均同时在线人数）、GPM（千次观看成交）等关键指标；',
+      '通过流量漏斗模型，分析“曝光-进入-停留-互动-转化”各环节流失率；',
+      '自动生成复盘报告，提供优化建议（如：调整开播时间、优化商品顺序）。',
+    ],
+  },
+])
+
+// 标准服务
+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: `数字人驱动系统授权
+AI 脚本生成SaaS账号
+3D 虚拟场景库更新
+直播复盘工具终身版`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '课程体系',
+    desc: `《直播电商运营实战》
+《虚拟主播形象设计》
+《直播场控与推流技术》
+《短视频与直播引流》`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '校企合作',
+    desc: `MCN 机构实习对接
+校园直播大赛承办
+本地生活商家资源导入
+双师型讲师入校授课`,
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['校级直播基地挂牌', '助农直播专项策划', '直播电商技能证书', '抖音/快手小店开通'])
+
+// 交付案例
+const jfalList = ref([
+  'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/5/al_1.jpg',
+  'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/5/al_2.jpg',
+  'https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/5/al_3.jpg',
+])
+</script>
+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/next/platform/new-business-studies/6/banner.jpg" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>AIGC网络直播实验室</h2>
+          <span></span>
+          <h6>人 · 货 · 场 · 智</h6>
+          <p>
+            面向电子商务、网络营销及表演播音专业，打造“日不落”智能直播实训基地。 集成 2D/3D 虚拟数字人驱动、AI
+            智能场控、实时话术生成与 XR 虚拟布景技术， 培养精通“台前演绎+幕后运营”的全栈式直播电商人才。
+          </p>
+        </div>
+      </div>
+    </div>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">核心模块</h2>
+        <p class="section-title-desc">打通直播电商全链路，实现 7×24 小时智能带货</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">覆盖主流商业赛道，开箱即用的“人+货+场”实训模板</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>
+        <h3 class="section-subtitle">案例资源示例</h3>
+        <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>
+          <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>
+          </ul>
+        </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>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">交付案例</h2>
+        <p class="section-info">已赋能全国 50+ 所高职及本科院校，打造标杆级直播实训基地</p>
+        <ul class="al-list">
+          <li v-for="item in jfalList" :key="item"><img :src="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-bottom: 70px;
+}
+.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: var(--main-color);
+}
+</style>

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

+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/banner.png" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>大数据实践教学平台</h2>
+          <span></span>
+          <h6>开箱即用 · 内置课程 · 丰富案例 · 灵活教学</h6>
+          <p>
+            既能满足工科大数据通识能力的训练需求，又能满足商科等其他学科对于大数据基础实践教学的训练需求。提供竞赛等模块，满足高校对于大数据教学的多层次需求。打造高校学生大数据通识能力的一站式实践教学平台。
+          </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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in zyList" :key="item.title">
+                <td>{{ item.title }}</td>
+                <td>{{ item.industry }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="num">
+            <p>每个案例支撑16个学时实践教学</p>
+            <li v-for="item in numList" :key="item.desc">
+              <span>{{ item.num }}</span>
+              <em>{{ item.desc }}</em>
+            </li>
+          </ul>
+        </div>
+        <h3 class="section-subtitle">案例资源示例</h3>
+        <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>
+          <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>
+          </ul>
+        </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>
+
+<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：爬取51job的数据分析', industry: '互联网' },
+  { title: '案例2：威士忌酒的评论数据分析', industry: '零售' },
+  { title: '案例3：印度自杀率分析', industry: '政府' },
+  { title: '案例4：新加坡旅游数据的数据洞察', industry: '旅游' },
+  { title: '案例5：气候变化分析', industry: '旅游' },
+  { title: '案例6：使用社交网络广告进行销售预测', industry: '互联网' },
+  { title: '案例7：预测泰坦尼克号生存率', industry: '交通' },
+  { title: '案例8：糖尿病预测分析', industry: '医疗' },
+  { title: '案例9：房天下兰州二手房价预测', industry: '房地产' },
+  { title: '案例10：信用卡客户违约预测', industry: '金融' },
+])
+
+const numList = ref([
+  { num: 10, desc: '个案例' },
+  { num: 10, desc: '篇案例原文' },
+  { num: 34, desc: '份案例指导书' },
+  { num: 58, desc: '套教学PPT' },
+  { num: 157, desc: '个教学视频。' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '案例原文',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_1_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_1_2.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_1_3.png',
+    ],
+  },
+  {
+    title: '案例指导书',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_2_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_2_2.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_2_3.png',
+    ],
+  },
+  {
+    title: '教学PPT',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_3_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_3_2.png',
+    ],
+  },
+  {
+    title: '操作视频',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_4_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_3/alzy_4_2.png',
+    ],
+  },
+])
+
+// 标准服务
+const bzfwList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_1.png',
+    title: '产品服务',
+    desc: '产品安装服务<br/>产品配置调试服务<br/>产品免费升级服务<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_2.png',
+    title: '资源服务',
+    desc: '配套课程资源<br/>课程资源免费更新服务<br/>行业案例免费升级服务<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '培训服务',
+    desc: '产品使用培训<br/>产品维护培训<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '产品技术支持',
+    desc: '产品功能与性能巡检<br/>产品使用分析与建议<br/>产品在线技术支持<br/>产品电话技术支持<br/>……',
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['顶层设计服务', '师资培训服务', '行业讲座服务', '科研服务', '教学服务'])
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  img {
+    width: 100%;
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4039);
+    line-height: 1;
+    color: #ffffff;
+    h2 {
+      font-size: 42px;
+      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: 24px 0;
+      width: 42px;
+      height: 3px;
+      background: #ffffff;
+    }
+    h6 {
+      margin-bottom: 24px;
+      font-size: 20px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 2px;
+    }
+    p {
+      max-width: 644px;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      line-height: 26px;
+    }
+    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:nth-child(even) {
+  background-color: #fff;
+}
+.section:nth-child(odd) {
+  background-color: #f9f8f8;
+}
+.section-inner {
+  width: 1300px;
+  margin: 0 auto;
+  padding: 100px 0;
+}
+.section-title {
+  margin-bottom: 36px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  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);
+    p {
+      margin-top: 48px;
+      font-size: 18px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+  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(51, 51, 51, 0.6);
+  }
+  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;
+  }
+}
+.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 {
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  p {
+    font-size: 20px;
+    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 30px;
+  }
+  li {
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-size: 18px;
+      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: 22px;
+      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: 14px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin-bottom: 70px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 24px;
+    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: var(--main-color);
+}
+</style>

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

+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/banner.png" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>人工智能实践教学平台</h2>
+          <span></span>
+          <h6>开箱即用 · 内置课程 · 丰富案例 · 灵活教学</h6>
+          <p>
+            既能满足工科人工智能通识能力和专业能力的训练需求，又能满足商科等其他学科对于人工智能基础实践教学的训练需求，满足高校对于人工智能教学的多层次需求。打造高校学生人工智能通识能力与专业能力的一站式实践教学平台。
+          </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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in zyList" :key="item.title">
+                <td>{{ item.title }}</td>
+                <td>{{ item.industry }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="num">
+            <p>每个案例支撑16个学时实践教学</p>
+            <li v-for="item in numList" :key="item.desc">
+              <span>{{ item.num }}</span>
+              <em>{{ item.desc }}</em>
+            </li>
+          </ul>
+        </div>
+        <h3 class="section-subtitle">案例资源示例</h3>
+        <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>
+          <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>
+          </ul>
+        </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>
+
+<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 numList = ref([
+  { num: 10, desc: '个案例' },
+  { num: 10, desc: '篇案例原文' },
+  { num: 28, desc: '份案例指导书' },
+  { num: 54, desc: '套教学PPT' },
+  { num: 150, desc: '个教学视频。' },
+])
+
+const zyList = ref([
+  { title: '案例1：线性回归应用', industry: '互联网' },
+  { title: '案例2：数据分类', industry: '互联网' },
+  { title: '案例3：语义角色标注', industry: '互联网' },
+  { title: '案例4：图像分类', industry: '互联网' },
+  { title: '案例5：人群口罩佩戴检测', industry: '医疗' },
+  { title: '案例6：目标检测', industry: '金融' },
+  { title: '案例7：人脸检测', industry: '互联网' },
+  { title: '案例8：个性化推荐', industry: '金融' },
+  { title: '案例9：情感分析', industry: '互联网' },
+  { title: '案例10：机器翻译', industry: '互联网' },
+])
+
+const tabActive = ref(0)
+
+const tabList = ref([
+  {
+    title: '案例原文',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_1_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_1_2.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_1_3.png',
+    ],
+  },
+  {
+    title: '案例指导书',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_2_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_2_2.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_2_3.png',
+    ],
+  },
+  {
+    title: '教学PPT',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_3_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_3_2.png',
+    ],
+  },
+  {
+    title: '操作视频',
+    children: [
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_4_1.png',
+      'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_4/alzy_4_2.png',
+    ],
+  },
+])
+
+// 标准服务
+const bzfwList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_1.png',
+    title: '产品服务',
+    desc: '产品安装服务<br/>产品配置调试服务<br/>产品免费升级服务<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_2.png',
+    title: '资源服务',
+    desc: '配套课程资源<br/>课程资源免费更新服务<br/>行业案例免费升级服务<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_3.png',
+    title: '培训服务',
+    desc: '产品使用培训<br/>产品维护培训<br/>……',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_1_1/bzfw_4.png',
+    title: '产品技术支持',
+    desc: '产品功能与性能巡检<br/>产品使用分析与建议<br/>产品在线技术支持<br/>产品电话技术支持<br/>……',
+  },
+])
+
+// 增值服务
+const zzfwList = ref(['顶层设计服务', '师资培训服务', '行业讲座服务', '科研服务', '教学服务'])
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+  img {
+    width: 100%;
+  }
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4039);
+    line-height: 1;
+    color: #ffffff;
+    h2 {
+      font-size: 42px;
+      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: 24px 0;
+      width: 42px;
+      height: 3px;
+      background: #ffffff;
+    }
+    h6 {
+      margin-bottom: 24px;
+      font-size: 20px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 2px;
+    }
+    p {
+      max-width: 644px;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      line-height: 26px;
+    }
+    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:nth-child(even) {
+  background-color: #fff;
+}
+.section:nth-child(odd) {
+  background-color: #f9f8f8;
+}
+.section-inner {
+  width: 1300px;
+  margin: 0 auto;
+  padding: 100px 0;
+}
+.section-title {
+  margin-bottom: 36px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  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);
+    p {
+      margin-top: 48px;
+      font-size: 18px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+  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(51, 51, 51, 0.6);
+  }
+  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;
+  }
+}
+.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 {
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.zy {
+  display: flex;
+  .table {
+    flex: 1;
+  }
+  .num {
+    margin-left: 35px;
+  }
+}
+.num {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  p {
+    font-size: 20px;
+    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    line-height: 30px;
+  }
+  li {
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      font-family: SourceHanSansCN-Bold;
+      color: var(--main-color);
+    }
+    em {
+      font-size: 18px;
+      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: 22px;
+      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: 14px;
+      border: 1px solid #8b8b8b;
+    }
+    td:nth-child(1) {
+      padding-left: 40px;
+    }
+    td:nth-child(2) {
+      text-align: center;
+    }
+  }
+}
+.tab {
+  display: flex;
+  margin-bottom: 70px;
+}
+.tab-header {
+  margin-right: 38px;
+  li {
+    width: 270px;
+    height: 70px;
+    font-size: 24px;
+    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: var(--main-color);
+}
+</style>

app/pages/solution/ai.vue

+<!-- 引产入校 -->
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/next/solution/ai/banner.jpg" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>专业数字化改造提升</h2>
+          <span></span>
+          <h6>新专业申请 · 旧专业升级 · 课程提供 · 师资提升</h6>
+          <p>
+            针对数字人才的底层通用基础能力：商业数据分析能力和数字营销能力，将其引入现有的专业体系中，对现有专业基础能力的培养进行数字化改造升级
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">数字人才技能解构-能力模型</h2>
+        <div class="section-pic">
+          <img src="https://webapp-pub.ezijing.com/www/pc/digital/yx_3/1.png" />
+        </div>
+      </div>
+    </section> -->
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">专业数字化改造背景与现状</h2>
+        <div class="section-pic">
+          <img src="https://webapp-pub.ezijing.com/www/pc/next/solution/ai/1.png" />
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">专业数字化改造解决方案</h2>
+        <div class="section-pic">
+          <img src="https://webapp-pub.ezijing.com/www/pc/next/solution/ai/2.png" />
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">数字化技能核心课程</h2>
+        <p class="section-desc">
+          紫荆教育通过数字经济实验平台（商业数据分析实验平台和数字营销实验平台）负责实施商业数据分析和数字营销两门课，共计96课时。紫荆教育数字经济实验室作为紫荆教育工业级产品，在多个行业有真实应用，为数字人才培养提供立体化教学实施平台，打造数字化教学模式。师资全部来自业务骨干，行业专家和学校专业教师团队组成混编师资团队，针对课程形成理论基础+行业数字化应用两个层次多个维度的分工合作，优势互补，相互促进，形成师资立方体，实现嵌入式融合创新实践。
+        </p>
+        <ul class="course-list">
+          <li v-for="item in courseList" :key="item.title" :class="{ 'has-arrow': item.arrow }">
+            <div class="pic">
+              <img :src="item.icon" />
+            </div>
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.desc }}</p>
+          </li>
+          <li><h3>...</h3></li>
+        </ul>
+        <div class="course-box">
+          <h3>通识课程</h3>
+          <ul>
+            <li>商业数据分析</li>
+            <li>数字营销</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">教师数字素养与技能提升</h2>
+        <p class="section-desc" style="white-space: nowrap">
+          采用“引入国际顶尖师资、互派产业院校师资、系统化培训”
+          3重手段、16个子项目实现“教师的国际化水平、产业实战水平和岗课赛证融通水平” 3个水平的有效提升
+        </p>
+        <div class="section-pic" style="margin: 80px 0">
+          <img src="https://webapp-pub.ezijing.com/www/pc/next/solution/ai/3.png" />
+        </div>
+        <ul class="al-list">
+          <li v-for="item in jfalList" :key="item"><img :src="item" /></li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const courseList = ref([
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_3/course_1.png',
+    title: '数字金融',
+    desc: '（校企联合开发）',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_3/course_2.png',
+    title: '数字贸易',
+    desc: '（校企联合开发）',
+    arrow: true,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_3/course_3.png',
+    title: '数字农业',
+    desc: '（校企联合开发）',
+    arrow: true,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/digital/yx_3/course_4.png',
+    title: '数字康养',
+    desc: '（校企联合开发）',
+    arrow: true,
+  },
+])
+
+// 交付案例
+const jfalList = ref([
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_3/show_3.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_3/show_2.png',
+  'https://webapp-pub.ezijing.com/www/pc/digital/yx_3/show_1.png',
+])
+</script>
+
+<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: #333;
+    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: #333;
+    }
+    h6 {
+      margin-bottom: 24px;
+      font-size: 24px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      line-height: 1;
+      letter-spacing: 2px;
+      color: var(--main-color);
+    }
+    p {
+      max-width: 736px;
+      font-size: 18px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      line-height: 30px;
+    }
+  }
+  .cover-inner {
+    height: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+.section:nth-child(even) {
+  background-color: #fff;
+}
+.section:nth-child(odd) {
+  background-color: #f9f8f8;
+}
+.section-inner {
+  width: 1300px;
+  margin: 0 auto;
+  padding: 100px 0;
+}
+.section-title {
+  margin-bottom: 36px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  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-pic {
+  text-align: center;
+  img {
+    max-width: 100%;
+  }
+}
+.al-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  li {
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+}
+.course-list {
+  margin: 80px 0 50px;
+  display: flex;
+  column-gap: 40px;
+  li {
+    position: relative;
+    height: 260px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d5d5d5;
+    &::after {
+      position: absolute;
+      content: '';
+      left: -1px;
+      right: -1px;
+      bottom: -1px;
+      height: 10px;
+      background-color: var(--main-color);
+    }
+    .pic {
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 90px;
+      height: 90px;
+      background-color: var(--main-color);
+      border-radius: 50%;
+    }
+    h3 {
+      font-size: 20px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #333333;
+      line-height: 34px;
+    }
+    p {
+      font-size: 16px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #6c6c6c;
+      line-height: 34px;
+    }
+    &.has-arrow {
+      &::before {
+        position: absolute;
+        left: 50%;
+        bottom: -43px;
+        content: '';
+        background: url('https://webapp-pub.ezijing.com/www/pc/digital/yx_3/arrow.png');
+        width: 18px;
+        height: 33px;
+        transform: translateX(-50%);
+      }
+    }
+  }
+}
+.course-box {
+  padding: 30px 0;
+  border: 1px solid #dfdfdf;
+  h3 {
+    font-size: 24px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #333;
+    line-height: 34px;
+    text-align: center;
+  }
+  ul {
+    margin-top: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 80px;
+  }
+  li {
+    width: 460px;
+    height: 60px;
+    background-color: var(--main-color);
+    border-radius: 30px;
+    font-size: 22px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #fff;
+    line-height: 60px;
+    text-align: center;
+  }
+}
+</style>

app/pages/solution/applied-undergraduate.vue

+<script setup>
+const ysList = [
+  {
+    name: `专业升级`,
+    desc: '1-3完成3-5个传统专业的数字化改造，打造对接数智经济背景下新商科、新工科等领域的一流专业建设，实现课程内容与产业需求的动态适配。',
+    icon: 1,
+    bg: 'https://webapp-pub.ezijing.com/www/pc/next/applied-undergraduate/mb_1.png',
+  },
+  {
+    name: `师资提质`,
+    desc: '通过“AI+实践”培养体系，使合作院校“双师型”教师占比提升至60%以上，符合《职业教育“双师型”教师基本标准》与《教师生成式人工智能应用指引》要求。',
+    icon: 2,
+    bg: 'https://webapp-pub.ezijing.com/www/pc/next/applied-undergraduate/mb_2.png',
+  },
+  {
+    name: `实践落地`,
+    desc: '共建国家级标准实践中心，确保实习实践课时占比不低于总课时的50%，匹配应用型本科专业建设规范。',
+    icon: 3,
+    bg: 'https://webapp-pub.ezijing.com/www/pc/next/applied-undergraduate/mb_3.png',
+  },
+  {
+    name: `就业增效`,
+    desc: '实现合作专业毕业生就业率提升15%，优质就业（对口产业岗位）占比超80%，服务区域产业人才需求。',
+    icon: 4,
+    bg: 'https://webapp-pub.ezijing.com/www/pc/next/applied-undergraduate/mb_4.png',
+  },
+]
+const tabIndex = ref(0)
+const faList = [
+  {
+    title: '专业群共建',
+    subTitle: '对接产业需求的课程体系革新',
+    items: [
+      {
+        title: '特色专业方向布局',
+        desc: '聚焦三大领域打造专业群',
+        items: [
+          {
+            title: '新文科',
+            desc: '数字金融、商务数据分析与应用、AIGC数智营销等；',
+          },
+          {
+            title: '新工科',
+            desc: '人工智能应用、智能体技术应用等；',
+          },
+          {
+            title: '交叉融合',
+            desc: '低空物流技术与运营、低空文旅等；',
+          },
+        ],
+      },
+      {
+        title: '动态课程与教材体系',
+        desc: `清控紫荆依托600+企业调研形成的岗位能力模型，与合作院校共同开设人工智能通识课程，实现全专业覆盖；
+清控紫荆与合作院校共同打造数字教材，配套紫荆数智学堂与e-SaaS一体化教学平台，实现“理论学习-虚拟仿真-实战应用”闭环。`,
+      },
+    ],
+  },
+  {
+    title: '双师队伍建设',
+    subTitle: '“AI赋能+实践淬炼”培养计划',
+    items: [
+      {
+        title: '分层分类培训体系',
+        items: [
+          {
+            title: '基础层',
+            desc: '开展师资培训，覆盖AIGC内容生成、AI数据分析等技能，考核合格颁发师资颁发工信部、人社部等证书；',
+          },
+          {
+            title: '进阶层',
+            desc: '选派教师参与企业挂职锻炼，对接真实项目，积累实践教学案例。',
+          },
+        ],
+      },
+      {
+        title: '智能教学能力提升',
+        desc: '引入搭载DeepSeek大模型的AI教学工具，赋能教师实现“秒级案例生成、全链路数据智算”，打造“AI赋能专业”新生态。',
+      },
+    ],
+  },
+  {
+    title: '实践体系搭建',
+    subTitle: '从虚拟仿真到产业实景全场景覆盖',
+    items: [
+      {
+        title: '分级实践中心建设',
+        items: [
+          {
+            title: '人工智能基础实践平台',
+            desc: '数据分析综合实践教学平台（配备数据清洗、可视化工具）；',
+          },
+          {
+            title: '进阶实验室',
+            desc: '人工智能应用平台、AI大模型实践系统（智能体开发与应用项目开发）；',
+          },
+          {
+            title: '数智经济实践基地',
+            desc: '与区域龙头企业共建产教融合实践基地，提供“工学交替”岗位实践。',
+          },
+        ],
+      },
+      {
+        title: '实践管理与评价',
+        desc: '通过SaaS平台实现实训过程全记录，结合企业导师评价、技能证书考核形成“能力画像”，对接人社部相关职业技能等级标准。',
+      },
+    ],
+  },
+  {
+    title: '国际与产业资源联动',
+    subTitle: '拓宽发展维度',
+    items: [
+      {
+        title: '国际教育合作',
+        desc: '链接美国斯蒂文斯理工学院、雪城大学、石溪大学等海外高校资源，提供“国内本科+国际硕士”衔接通道，引入国际课程模块与研学项目。',
+      },
+    ],
+  },
+]
+
+const bzList = [
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/bz_icon_1.png',
+    name: '政策与申报支持',
+    desc: '协助院校申报“教育强国三年行动计划”产教融合项目、申报省级、国家产教融合项目等，提供政策解读与材料筹备服务。',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/bz_icon_2.png',
+    name: '资源保障体系',
+    desc: `师资团队：配备50+行业专家与清华背景教研人员组成的服务团队；
+技术支撑：7×24小时响应实训平台运维与升级需求；
+就业资源：联动1000+合作企业提供实习就业岗位。`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/bz_icon_3.png',
+    name: '政策与申报支持',
+    desc: `每季度出具《人才培养质量报告》，从专业适配度、师资能力、就业质量等维度动态优化方案，确保符合政策考核要求。`,
+  },
+]
+</script>
+
+<template>
+  <div class="page">
+    <div class="banner">
+      <div class="banner-inner">
+        <h1>应用型本科合作方案</h1>
+        <span class="line"></span>
+        <p>
+          清控紫荆教育响应国家政策，为应用型本科院校提供全链条转型方案，涵盖专业共建、双师培育、实践搭建与资源联动，助力专业升级、师资提质、就业优化，提供全周期保障，构建
+          “政产学研用” 一体化生态。
+        </p>
+      </div>
+    </div>
+    <section class="section">
+      <h2 class="section-title">政策引领下的应用型本科转型使命</h2>
+      <div class="section-inner">
+        <p class="section-desc">
+          当前，《教育强国建设规划纲要（2024—2035年）》《高等教育学科专业设置调整优化行动方案（2025—2027年）》等政策明确要求应用型本科院校对接区域产业需求、深化产教融合、强化“双师双能型”师资建设。清控紫荆教育作为源自清华大学五道口金融学院在线教育中心，深耕数字人才培养十余年，已与全国200余所高校建立合作，累计输送数字人才超数万人，具有助力应用型本科院校实现政策落地的成熟经验与资源储备。
+        </p>
+      </div>
+    </section>
+    <section class="section" style="padding-bottom: 90px">
+      <h2 class="section-title">核心目标：构建“政产学研用”一体化发展生态</h2>
+      <div class="section-inner">
+        <div class="ys-list">
+          <div class="ys-list-item" v-for="item in ysList" :key="item.name">
+            <div class="bg">
+              <img :src="item.bg" :alt="item.name" />
+            </div>
+            <div class="content">
+              <AppliedUndergraduateIcons :name="item.icon" />
+              <h3>{{ item.name }}</h3>
+              <p>{{ item.desc }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section fa">
+      <h2 class="section-title">全链条解决方案：四大维度赋能院校发展</h2>
+      <div class="section-inner">
+        <div class="tab">
+          <div class="tab-header">
+            <ul>
+              <li
+                v-for="(item, index) in faList"
+                :key="item.title"
+                :class="{ 'is-active': index === tabIndex }"
+                @mouseenter="tabIndex = index">
+                <h2>{{ item.title }}</h2>
+                <h3>{{ item.subTitle }}</h3>
+              </li>
+            </ul>
+          </div>
+          <div class="tab-body">
+            <div v-for="item in faList[tabIndex].items">
+              <h2>{{ item.title }}</h2>
+              <p v-if="item.desc">{{ item.desc }}</p>
+              <div class="tab-body-list" v-if="item.items">
+                <dl v-for="item in item.items">
+                  <dt>{{ item.title }}</dt>
+                  <dd>{{ item.desc }}</dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">实施保障：从合作到落地的全周期服务</h2>
+      <div class="section-inner">
+        <div class="bz-list">
+          <div class="bz-list-item" v-for="item in bzList" :key="item.name">
+            <div class="bz-list-item_label"><img :src="item.icon" />{{ item.name }}</div>
+            <div class="bz-list-item_content">{{ item.desc }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section" style="padding: 90px 0">
+      <div class="section-inner">
+        <AppContact />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  background-color: #fff;
+  .section {
+    &-title {
+      padding: 90px 0 60px;
+      font-weight: bold;
+      font-size: 30px;
+      color: #333;
+      line-height: 1;
+      text-align: center;
+    }
+    &-subtitle {
+      padding-bottom: 60px;
+      font-size: 20px;
+      line-height: 32px;
+      color: #424242;
+      text-align: center;
+    }
+    &-inner {
+      max-width: 1300px;
+      margin: 0 auto;
+    }
+    &-desc {
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 30px;
+      span {
+        color: var(--main-color);
+      }
+    }
+  }
+  .banner {
+    height: 650px;
+    background: url('https://webapp-pub.ezijing.com/www/pc/next/applied-undergraduate/banner.jpg') no-repeat center
+      center;
+    background-size: cover;
+    &-inner {
+      max-width: 1300px;
+      height: 100%;
+      margin: 0 auto;
+      padding-left: 52px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      color: #fff;
+      h1 {
+        font-size: 60px;
+        font-weight: bold;
+        line-height: 1;
+      }
+      h2 {
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 500;
+        font-size: 24px;
+        color: var(--main-color);
+        line-height: 42px;
+      }
+      .line {
+        margin: 46px 0;
+        width: 60px;
+        height: 6px;
+        background: #fff;
+      }
+      p {
+        max-width: 666px;
+        font-size: 18px;
+      }
+    }
+  }
+  .ys-list {
+    display: flex;
+    justify-content: space-between;
+    &-item {
+      position: relative;
+      height: 340px;
+      gap: 13px;
+      border-radius: 12px;
+      overflow: hidden;
+      transition: all 0.3s;
+      &:hover {
+        box-shadow: 0px 0px 22px 1px rgba(0, 0, 0, 0.12);
+        .content {
+          top: 0;
+          color: #333;
+          background-color: #fff;
+          p {
+            display: block;
+          }
+          ::v-deep(svg) {
+            color: var(--main-color);
+          }
+        }
+      }
+
+      .bg {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        &::after {
+          z-index: 1;
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+        }
+      }
+      &:nth-child(1) {
+        .bg::after {
+          background: linear-gradient(180deg, #e3a7b8 0%, #aa1941 100%);
+        }
+      }
+      &:nth-child(2) {
+        .bg::after {
+          background: linear-gradient(0deg, #802672 0%, rgba(240, 222, 239, 0.6) 100%);
+        }
+      }
+      &:nth-child(3) {
+        .bg::after {
+          background: linear-gradient(180deg, #643288 0%, rgba(189, 178, 219, 0.6) 100%);
+        }
+      }
+      &:nth-child(4) {
+        .bg::after {
+          background: linear-gradient(180deg, #4d3296 0%, rgba(202, 210, 237, 0.6) 100%);
+        }
+      }
+      .content {
+        position: absolute;
+        z-index: 10;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 165px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: #fff;
+        h3 {
+          padding: 23px 0 30px;
+          font-size: 18px;
+          white-space: pre-wrap;
+          text-align: center;
+        }
+        p {
+          display: none;
+          font-size: 14px;
+          line-height: 20px;
+          color: #666;
+        }
+      }
+    }
+  }
+  .fa {
+    height: 760px;
+    background: url(https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/fa_bg.png) no-repeat;
+  }
+  .tab {
+    height: 480px;
+    background: linear-gradient(90deg, #ffffff 0%, #ececfa 100%);
+    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
+    border-radius: 12px 12px 12px 12px;
+    display: flex;
+    overflow: hidden;
+    &-header {
+      flex: 0 0 300px;
+      background: #edf2fa;
+      ul {
+        padding: 50px 30px 0;
+      }
+      li {
+        padding: 14px 20px;
+        border-radius: 12px;
+        h2 {
+          font-weight: 500;
+          font-size: 18px;
+        }
+        h3 {
+          font-weight: 400;
+          font-size: 14px;
+        }
+        &.is-active {
+          color: #fff;
+          background-color: var(--main-color);
+        }
+      }
+    }
+    &-body {
+      flex: 1;
+      padding: 50px 160px 0 50px;
+      h2 {
+        font-weight: 500;
+        font-size: 22px;
+      }
+      p {
+        margin: 20px 0 50px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+      }
+      &-list {
+        display: flex;
+        gap: 40px;
+        margin: 30px 0;
+        dl {
+          flex: 1;
+        }
+        dt {
+          background-color: var(--main-color);
+          line-height: 34px;
+          color: #fff;
+          text-align: center;
+          height: 34px;
+          border-radius: 32px 32px 32px 32px;
+        }
+        dd {
+          height: calc(100% - 36px);
+          margin-top: 10px;
+          padding: 16px 20px;
+          background: #ffffff;
+          border-radius: 6px 6px 6px 6px;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  .bz-list {
+    &-item {
+      margin-bottom: 20px;
+      position: relative;
+      &_label {
+        position: absolute;
+        top: 30px;
+        width: 260px;
+        height: 80px;
+        background: var(--main-color);
+        font-weight: bold;
+        font-size: 20px;
+        color: #ffffff;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        padding: 0 30px;
+        gap: 18px;
+        img {
+          width: 32px;
+        }
+      }
+      &_content {
+        margin-left: 130px;
+        height: 140px;
+        padding: 0 90px 0 180px;
+        background: #dee2ea;
+        border-radius: 12px;
+        white-space: pre-wrap;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

app/pages/solution/international.vue

+<script setup>
+const eduList = [
+  {
+    name: '本科',
+    icon: 'https://webapp-pub.ezijing.com/www/pc/next/solution/international/icon_1.png',
+    items: ['1+3', '2+2', '3+1'],
+  },
+  {
+    name: '硕士',
+    icon: 'https://webapp-pub.ezijing.com/www/pc/next/solution/international/icon_2.png',
+    items: ['1+1'],
+  },
+  {
+    name: '博士',
+    icon: 'https://webapp-pub.ezijing.com/www/pc/next/solution/international/icon_3.png',
+    items: ['2+1'],
+  },
+]
+const majorList = [
+  {
+    name: '新文科',
+    items: ['数字金融', '技术管理', '工程管理'],
+  },
+  {
+    name: '新工科',
+    items: ['网络安全', '云计算', '商业数据分析'],
+  },
+]
+
+const ysList = [
+  {
+    name: '实力',
+    desc: `全美Top100合作院校
+本科、硕士、博士`,
+  },
+  {
+    name: '项目合规',
+    desc: `教育部留服认证
+政策支持`,
+  },
+  {
+    name: '学分互认',
+    desc: `中美学分互认
+学术权威
+教授、博导`,
+  },
+  {
+    name: '推免入学',
+    desc: `推免入学
+免试托福/GRE/
+GMAT：课程替代`,
+  },
+  {
+    name: '对标TOP',
+    desc: `对标美方TOP院校的高等教育运营体系`,
+  },
+]
+
+const bzList = [
+  {
+    name: '学生认可',
+    desc: `学生认可
+市场看涨`,
+  },
+  {
+    name: '声誉&口碑',
+    desc: `声誉&口碑
+高就业回报率`,
+  },
+  {
+    name: '零交付成本',
+    desc: `【0】交付成本
+快速稳定现金流`,
+  },
+  {
+    name: '高持续转化率',
+    desc: `高持续转化率
+未来保障`,
+  },
+]
+const lfList = [
+  {
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/solution/international/hz_1.png',
+    name: `斯蒂文斯理工学院研究生院资深副教务长Dr. Constantin Chassapis一行莅临清控紫荆教育`,
+  },
+  {
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/solution/international/hz_2.png',
+    name: `斯蒂文斯理工学院研究生院招生办主任Dina Iskaros一行莅临清控紫荆教育`,
+  },
+  {
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/solution/international/hz_3.png',
+    name: `美国德保罗大学商学院院长巴素琳教授莅临清控紫荆教育`,
+  },
+  {
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/solution/international/hz_4.png',
+    name: `美国加州浸会大学副校长Dr. Larry Linamen一行莅临清控紫荆教育`,
+  },
+  {
+    img: 'https://webapp-pub.ezijing.com/www/pc/next/solution/international/hz_5.png',
+    name: `美国石溪大学商学院副院长蒋丹凌教授莅临清控紫荆教育`,
+  },
+]
+</script>
+
+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/pc/next/solution/international/banner.jpg" />
+      <div class="cover">
+        <div class="cover-inner">
+          <h2>
+            携手全球高校<br />
+            共建本硕博一体化升学通道
+          </h2>
+          <span></span>
+          <p>
+            围绕多层次人才培养需求，打造兼具 “项目合规性、学分互认度、学术权威性”
+            的升学方案，助力学子从本校直达全球名校课堂。
+          </p>
+        </div>
+      </div>
+    </div>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">合作全景：培养国际化数字经济人才</h2>
+        <div class="edu-list">
+          <h2>学历层次</h2>
+          <div class="edu-list-item" v-for="item in eduList" :key="item.name">
+            <img :src="item.icon" />
+            <h3>{{ item.name }}</h3>
+            <ul>
+              <li v-for="subItem in item.items" :key="subItem">{{ subItem }}</li>
+            </ul>
+          </div>
+        </div>
+        <div class="major-list">
+          <h2>专业方向<IconsIconMore /></h2>
+          <div class="major-list-item" v-for="item in majorList" :key="item.name">
+            <h3>{{ item.name }}</h3>
+            <ul>
+              <li v-for="subItem in item.items" :key="subItem">{{ subItem }}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">合作优势</h2>
+        <div class="ys-list">
+          <div class="ys-list-item" v-for="(item, index) in ysList" :key="item.name">
+            <div class="ys-list-item-header">
+              <div class="num">0{{ index + 1 }}</div>
+              <h2>{{ item.name }}</h2>
+            </div>
+            <div class="ys-list-item-content">
+              {{ item.desc }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="section-inner">
+        <h2 class="section-title">合作目标：高效、稳定、持续、声誉、未来</h2>
+        <div class="bz-list">
+          <div class="bz-list-item" v-for="item in bzList" :key="item.name">
+            <h3>{{ item.name }}</h3>
+            <p>{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">合作来访</h2>
+      <div class="lf-list">
+        <div class="lf-track">
+          <template v-for="copy in 3" :key="copy">
+            <div class="lf-item" v-for="item in lfList" :key="item.name">
+              <img :src="item.img" :alt="item.name" />
+              <p>{{ item.name }}</p>
+            </div>
+          </template>
+        </div>
+      </div>
+    </section>
+    <section class="section" style="padding: 90px 0">
+      <div class="section-inner">
+        <AppContact :type="2" />
+      </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: #fff;
+    h2 {
+      font-size: 60px;
+      font-family:
+        Source Han Sans CN-Bold,
+        Source Han Sans CN;
+      font-weight: bold;
+      line-height: 72px;
+    }
+
+    span {
+      margin: 46px 0;
+      width: 60px;
+      height: 6px;
+      background: #fff;
+    }
+
+    p {
+      max-width: 664px;
+      font-size: 18px;
+      font-family:
+        Source Han Sans CN-Regular,
+        Source Han Sans CN;
+      line-height: 30px;
+    }
+  }
+  .cover-inner {
+    height: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+
+.section-inner {
+  width: 1300px;
+  margin: 0 auto;
+  // padding: 100px 0;
+}
+.section-title {
+  padding: 90px 0 60px;
+  font-size: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #333333;
+  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-pic {
+  text-align: center;
+  img {
+    max-width: 100%;
+  }
+}
+
+.edu-list {
+  display: flex;
+  gap: 30px;
+  h2 {
+    width: 190px;
+    height: 220px;
+    font-weight: bold;
+    font-size: 20px;
+    color: #ffffff;
+    line-height: 220px;
+    background: #aa1941;
+    box-shadow: 0px 0px 22px 1px rgba(0, 0, 0, 0.12);
+    border-radius: 12px;
+    text-align: center;
+  }
+  &-item {
+    flex: 1;
+    height: 220px;
+    background: #f0f2f5 url(https://webapp-pub.ezijing.com/www/pc/next/solution/international/box_bg.png) no-repeat;
+    background-size: 100% 100%;
+    border-radius: 12px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 38px 0 45px;
+    img {
+      width: 46px;
+    }
+    h3 {
+      padding: 10px 0 28px;
+      font-weight: bold;
+      font-size: 20px;
+      color: #333333;
+      line-height: 24px;
+    }
+    ul {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 15px;
+    }
+    li {
+      width: 90px;
+      line-height: 40px;
+      text-align: center;
+      background: #ffffff;
+      border-radius: 6px 6px 6px 6px;
+    }
+  }
+}
+.major-list {
+  padding: 30px 60px 30px 40px;
+  background: #ffffff;
+  box-shadow: 0px 0px 22px 1px rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  h2 {
+    font-size: 20px;
+    color: var(--main-color);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  &-item {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    h3 {
+      font-weight: bold;
+      font-size: 20px;
+    }
+    ul {
+      display: flex;
+      gap: 10px;
+    }
+    li {
+      width: 120px;
+      height: 40px;
+      font-size: 16px;
+      line-height: 40px;
+      text-align: center;
+      background: #ffffff;
+      border-radius: 6px 6px 6px 6px;
+      border: 1px solid #d5d5d5;
+    }
+  }
+}
+.ys-list {
+  display: flex;
+  gap: 13px;
+  &-item {
+    position: relative;
+    flex: 1;
+    height: 240px;
+    border: 1px solid #d5d5d5;
+    border-radius: 12px;
+    transition: all 0.3s;
+    overflow: hidden;
+    --header-bg: #dbd0d1;
+
+    &:nth-child(1) {
+      --header-bg: #dbd0d1;
+    }
+    &:nth-child(2) {
+      --header-bg: #efecea;
+    }
+    &:nth-child(3) {
+      --header-bg: #dee2ea;
+    }
+    &:nth-child(4) {
+      --header-bg: #efecea;
+    }
+    &:hover {
+      box-shadow: 0px 0px 22px 1px rgba(0, 0, 0, 0.12);
+      transform: translateY(-10px);
+    }
+    &-header {
+      height: 110px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      gap: 14px;
+      background-color: var(--header-bg);
+      .num {
+        width: 54px;
+        height: 54px;
+        background: #fff;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 54px;
+        font-size: 24px;
+        font-weight: bold;
+      }
+      h2 {
+        font-weight: bold;
+        font-size: 18px;
+        color: #333333;
+        line-height: 1;
+      }
+    }
+
+    &-content {
+      padding: 20px 25px 0;
+      white-space: pre-wrap;
+      text-align: center;
+      font-size: 18px;
+      color: #333333;
+      line-height: 32px;
+    }
+  }
+}
+.bz-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  &-item {
+    padding: 30px 40px;
+    height: 200px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    &:nth-child(1) {
+      background-image: url('https://webapp-pub.ezijing.com/www/pc/next/solution/international/mb_bg_1.png');
+      &:hover {
+        background-image: url('https://webapp-pub.ezijing.com/www/pc/next/solution/international/mb_bg_1_hover.png');
+      }
+    }
+    &:nth-child(2) {
+      background-image: url('https://webapp-pub.ezijing.com/www/pc/next/solution/international/mb_bg_2.png');
+      &:hover {
+        background-image: url('https://webapp-pub.ezijing.com/www/pc/next/solution/international/mb_bg_2_hover.png');
+      }
+    }
+    &:nth-child(3) {
+      background-image: url('https://webapp-pub.ezijing.com/www/pc/next/solution/international/mb_bg_3.png');
+      &:hover {
+        background-image: url('https://webapp-pub.ezijing.com/www/pc/next/solution/international/mb_bg_3_hover.png');
+      }
+    }
+    &:nth-child(4) {
+      background-image: url('https://webapp-pub.ezijing.com/www/pc/next/solution/international/mb_bg_4.png');
+      &:hover {
+        background-image: url('https://webapp-pub.ezijing.com/www/pc/next/solution/international/mb_bg_4_hover.png');
+      }
+    }
+    &:hover {
+      h3 {
+        color: var(--main-color);
+      }
+    }
+    h3 {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 22px;
+      margin-bottom: 22px;
+    }
+    p {
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 16px;
+      color: #333333;
+      line-height: 24px;
+      white-space: pre-wrap;
+    }
+  }
+}
+.lf-list {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .lf-track {
+    display: flex;
+    gap: 18px;
+    animation: scroll-left 30s linear infinite;
+    width: fit-content;
+
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
+
+  .lf-item {
+    flex: 0 0 370px;
+    border: 1px solid #d5d5d5;
+    border-radius: 12px;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 210px;
+      object-fit: cover;
+    }
+
+    p {
+      padding: 10px 25px;
+      font-size: 14px;
+      line-height: 18px;
+      text-align: center;
+    }
+  }
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(-1 * 100% / 3));
+  }
+}
+</style>

app/pages/solution/new-double-high.vue

+<script setup>
+const mbList = [
+  {
+    name: '专业领跑',
+    desc: '合作年限内完成4-6个骨干专业的数字化、智能化、产业化升级，建设人工智能通识课程体系，用1-3年打造国家级高水平专业群，实现基础能力+专业能力与区域主导产业、新兴产业精准对接。',
+  },
+  {
+    name: '师资精锐',
+    desc: '构建“双师双能型”师资培养体系，使合作院校“双师型”教师占比进一步提升，符合《职业教育“双师型”教师基本标准》要求，共同培育一批省级、国家级教学名师。',
+  },
+  {
+    name: '实践硬核',
+    desc: '合作共建国家级产教融合实训基地，显著提升实践教学课时占比，实现“岗课赛证”一体化培养，匹配“新双高”实践教学规范。',
+  },
+  {
+    name: '就业优质',
+    desc: '合作专业毕业生就业质量明显提升，通过就业辅导体系，成为区域产业技术技能人才供给核心基地。',
+  },
+  {
+    name: '辐射带动',
+    desc: '形成可复制、可推广的“双高”建设模式，通过资源共享、师资交流等形式，带动区域内院校协同发展，提升职业教育整体质量。',
+  },
+]
+const tabIndex = ref(0)
+const faList = [
+  {
+    title: '高水平专业群建设',
+    subTitle: '对接产业的专业体系革新',
+    items: [
+      {
+        title: '专业群精准布局',
+        desc: '聚焦数字经济、人工智能、现代服务三大核心领域，打造特色专业群',
+        items: [
+          {
+            title: '新商科专业群',
+            desc: '商务数据分析与应用、直播电商、数智营销等；',
+          },
+          {
+            title: '数字技术专业群',
+            desc: '人工智能应用、开源技术应用、智能体技术应用等；',
+          },
+          {
+            title: '现代服务专业群',
+            desc: '低空物流技术与运营、低空文旅运营、无人机应用等；',
+          },
+        ],
+      },
+      {
+        title: '动态课程与教材体系',
+        desc: '依托600+企业调研形成的岗位能力模型，与合作院校共同开发模块化课程体系，覆盖专业核心技能与行业前沿技术；联合编写“岗课赛证”一体化数字教材，配套紫荆数智学堂与e-SaaS一体化教学平台，实现“理论学习-仿真实训-实战应用-技能考证”全闭环。',
+      },
+    ],
+  },
+  {
+    title: '高水平师资队伍建设',
+    subTitle: '“AI+产业”双轮驱动培养',
+    items: [
+      {
+        title: '分层分类培养体系',
+        items: [
+          {
+            title: '基础层',
+            desc: '开展AI通识应用、数字教学技能等专项培训，覆盖AIGC内容生成、AI数据分析、智能教学工具使用等，考核合格颁发工信部、人社部等权威证书；',
+          },
+          {
+            title: '进阶层',
+            desc: '选派教师到合作企业挂职锻炼，深度参与真实项目研发与运营，积累实践教学案例；引领层培育教学创新团队，支持教师参与国家级、省级教学成果奖申报、职业技能大赛指导等。',
+          },
+        ],
+      },
+      {
+        title: '智能教学能力赋能',
+        desc: '引入搭载DeepSeek、Qwen大模型的工业级教学平台，从数字化教材、数字化教学、数字化管理和数字化资源全面赋能、助力教师实现全流程数字化教学，打造“AI+职业教育”教学新生态，提升课堂教学效率与质量。',
+      },
+    ],
+  },
+  {
+    title: '高水平实训基地建设',
+    subTitle: '全场景实践教学覆盖',
+    items: [
+      {
+        title: '分级实训平台搭建',
+        items: [
+          {
+            title: '基础实训平台',
+            desc: '包括人工智能基础数据分析综合实践平台、数字技能基础实训中心（配备专业实训软件与硬件设备）',
+          },
+          {
+            title: '进阶实训平台',
+            desc: '涵盖人工智能应用实践平台、AIGC数智营销实践平台（还原企业真实工作场景）',
+          },
+          {
+            title: '产业级实训基地',
+            desc: '与区域龙头企业共建，提供“工学交替、顶岗实习”岗位，实现“实训即工作、毕业即就业”',
+          },
+        ],
+      },
+      {
+        title: '实训管理与评价',
+        desc: '通过SaaS平台实现实训过程全记录、全追溯，结合企业导师评价、技能证书考核、岗位实操表现，为学生生成“技术技能能力画像”，对接人社部、工信部职业技能等级标准与企业岗位要求。',
+      },
+    ],
+  },
+  {
+    title: '资源联动与社会服务',
+    subTitle: '拓展“双高”建设价值',
+    items: [
+      {
+        title: '国际资源对接',
+        desc: '链接美国斯蒂文斯理工学院、雪城大学、帕克大学等海外高校及职业教育机构资源，引入国际先进职业教育课程模块、研学项目，提升学生国际竞争力。',
+      },
+      {
+        title: '社会服务能力提升',
+        desc: '依托专业群与实训基地，为区域企业提供员工技能培训、技术研发与转化服务；开展退役军人、农民工等群体的职业技能培训，助力乡村振兴与产业升级，彰显职业教育社会价值。',
+      },
+    ],
+  },
+  {
+    title: '“岗课赛证”一体化融合',
+    subTitle: '深化人才培养改革',
+    items: [
+      {
+        title: '课程与岗位对接',
+        desc: '将企业岗位核心要求融入课程标准，按“岗位任务-技能模块-课程内容”逻辑重构课程体系；',
+      },
+      {
+        title: '课程与赛事融合',
+        desc: '把职业技能大赛赛项内容、评判标准纳入教学过程，组建大赛指导团队，提升学生参赛能力与实战技能；',
+      },
+      {
+        title: '课程与证书衔接',
+        desc: '将职业技能等级证书考核内容融入课程，支持学生“以证代考、以赛促证”，毕业时实现“学历证书+1-2个职业技能证书”双证在手。',
+      },
+    ],
+  },
+]
+
+const bzList = [
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/bz_icon_1.png',
+    name: '政策与申报支持',
+    desc: '协助院校对接“双高计划”建设相关政策，解读申报要求，提供国家级、省级产教融合项目、教学成果奖等申报材料筹备、方案优化服务，助力院校成功立项与验收。',
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/bz_icon_2.png',
+    name: '资源保障体系',
+    desc: `师资团队：配备50+行业专家与清华背景教研人员组成的专属服务团队，提供全程指导；
+技术支撑：7×24小时响应实训平台运维、教学系统升级需求，保障教学与实训顺利开展；
+就业与产业资源：联动1000+合作企业，提供实习就业岗位、技术合作项目等资源支持。`,
+  },
+  {
+    icon: 'https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/bz_icon_3.png',
+    name: '政策与申报支持',
+    desc: `每季度与合作院校共同编写《“新双高”项目建设进展报告》，每年开展全面成效评估，从专业建设质量、师资能力提升、学生就业质量、社会服务成效等维度动态优化建设方案，确保符合“双高计划”考核要求与院校发展需求。`,
+  },
+]
+</script>
+
+<template>
+  <div class="page">
+    <div class="banner">
+      <div class="banner-inner">
+        <h1>新双高建设整体解决方案</h1>
+        <span class="line"></span>
+        <h2>提供深度融合数字技术与教育创新的“新双高”建设全周期解决方案</h2>
+        <p>
+          “新双高建设项目”是指第二轮“双高计划”建设项目，即中国特色高水平高等职业学校和专业建设计划（2025—2029年）。它是对2019年启动的第一期“双高计划”的深化和拓展，以“办学能力高水平、产教融合高质量”为导向，要求新“双高”更加聚焦高职教育与国家重大战略、区域经济社会发展和新质生产力培育的紧密对接，更加强调院校对地方主导产业的作用和贡献。
+        </p>
+      </div>
+    </div>
+    <section class="section">
+      <h2 class="section-title">政策导向下的“新双高”建设使命</h2>
+      <div class="section-inner">
+        <p class="section-desc">
+          2026年1月全国教育大会提出持续优化高等教育结构布局，统筹高技能人才集群与双高建设计划。《国家职业教育改革实施方案》《职业教育专业目录（2024年）》等政策要求“双高计划”建设院校需聚焦产业需求、深化产教融合、打造技术技能人才培养高地。清控紫荆教育源自清华大学五道口金融学院在线教育中心，深耕数字人才培养十余年，已与全国200余所院校建立不同层次合作，累计培养数字化人才超万人，在专业改造升级、师资培养、实践落地等方面积累了成熟经验，具备助力高职院校推进“新双高”建设的资源储备与实施能力。
+        </p>
+      </div>
+    </section>
+    <section class="section" style="padding-bottom: 90px">
+      <h2 class="section-title">核心目标</h2>
+      <h3 class="section-subtitle">打造“数智经济产教融合型”双高建设标杆</h3>
+      <div class="section-inner">
+        <div class="mb-list">
+          <div class="mb-list-item" v-for="(item, index) in mbList" :key="item.name">
+            <div class="num">0{{ index + 1 }}</div>
+            <div class="content">
+              <h2>{{ item.name }}</h2>
+              <p>{{ item.desc }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section fa">
+      <h2 class="section-title">全链条建设方案：五大维度赋能“新双高”落地</h2>
+      <div class="section-inner">
+        <div class="tab">
+          <div class="tab-header">
+            <ul>
+              <li
+                v-for="(item, index) in faList"
+                :key="item.title"
+                :class="{ 'is-active': index === tabIndex }"
+                @mouseenter="tabIndex = index">
+                <h2>{{ item.title }}</h2>
+                <h3>{{ item.subTitle }}</h3>
+              </li>
+            </ul>
+          </div>
+          <div class="tab-body">
+            <div v-for="item in faList[tabIndex].items">
+              <h2>{{ item.title }}</h2>
+              <p v-if="item.desc">{{ item.desc }}</p>
+              <div class="tab-body-list" v-if="item.items">
+                <dl v-for="item in item.items">
+                  <dt>{{ item.title }}</dt>
+                  <dd>{{ item.desc }}</dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">实施保障：全周期护航“新双高”建设</h2>
+      <div class="section-inner">
+        <div class="bz-list">
+          <div class="bz-list-item" v-for="item in bzList" :key="item.name">
+            <div class="bz-list-item_label"><img :src="item.icon" />{{ item.name }}</div>
+            <div class="bz-list-item_content">{{ item.desc }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section" style="padding: 90px 0">
+      <div class="section-inner">
+        <AppContact />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  background-color: #fff;
+  .section {
+    &-title {
+      padding: 90px 0 60px;
+      font-weight: bold;
+      font-size: 30px;
+      color: #333;
+      line-height: 1;
+      text-align: center;
+    }
+    &-subtitle {
+      padding-bottom: 60px;
+      font-size: 20px;
+      line-height: 32px;
+      color: #424242;
+      text-align: center;
+    }
+    &-inner {
+      max-width: 1300px;
+      margin: 0 auto;
+    }
+    &-desc {
+      font-family:
+        Source Han Sans CN,
+        Source Han Sans CN;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 30px;
+      span {
+        color: var(--main-color);
+      }
+    }
+  }
+  .banner {
+    height: 650px;
+    background: url('https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/banner.jpg') no-repeat center center;
+    background-size: cover;
+    &-inner {
+      max-width: 1300px;
+      height: 100%;
+      margin: 0 auto;
+      padding-left: 52px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      color: #333;
+      h1 {
+        font-size: 60px;
+        font-weight: bold;
+        line-height: 1;
+      }
+      h2 {
+        font-family:
+          Source Han Sans CN,
+          Source Han Sans CN;
+        font-weight: 500;
+        font-size: 24px;
+        color: var(--main-color);
+        line-height: 42px;
+      }
+      .line {
+        margin: 46px 0;
+        width: 60px;
+        height: 6px;
+        background: #333;
+      }
+      p {
+        margin-top: 30px;
+        max-width: 736px;
+        font-size: 18px;
+      }
+    }
+  }
+  .mb-list {
+    display: flex;
+    gap: 13px;
+    &-item {
+      position: relative;
+      flex: 1;
+      padding: 20px;
+      height: 240px;
+      background: #efecea;
+      border-radius: 12px 12px 12px 12px;
+      transition: all 0.3s;
+      &:hover {
+        .content {
+          top: 0;
+          background: url(https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/mb_bg.png) no-repeat;
+          background-size: 100% 100%;
+          overflow-y: auto;
+        }
+        .content p {
+          display: block;
+          overflow: visible;
+          text-overflow: initial;
+          line-clamp: initial;
+          -webkit-line-clamp: initial;
+          -webkit-box-orient: initial;
+        }
+      }
+      .num {
+        width: 54px;
+        height: 54px;
+        background: #fff;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 54px;
+        font-size: 24px;
+        font-weight: bold;
+      }
+      .content {
+        position: absolute;
+        transition: all 0.3s;
+        top: 98px;
+        padding: 20px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        h2 {
+          font-weight: bold;
+          font-size: 18px;
+          color: #333333;
+          line-height: 1;
+        }
+        p {
+          margin-top: 20px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          line-clamp: 2;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+  }
+  .fa {
+    height: 760px;
+    background: url(https://webapp-pub.ezijing.com/www/pc/next/new-dobule-high/fa_bg.png) no-repeat;
+  }
+  .tab {
+    height: 480px;
+    background: linear-gradient(90deg, #ffffff 0%, #ececfa 100%);
+    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
+    border-radius: 12px 12px 12px 12px;
+    display: flex;
+    overflow: hidden;
+    &-header {
+      flex: 0 0 300px;
+      background: #edf2fa;
+      ul {
+        padding: 50px 30px 0;
+      }
+      li {
+        padding: 14px 20px;
+        border-radius: 12px;
+        h2 {
+          font-weight: 500;
+          font-size: 18px;
+        }
+        h3 {
+          font-weight: 400;
+          font-size: 14px;
+        }
+        &.is-active {
+          color: #fff;
+          background-color: var(--main-color);
+        }
+      }
+    }
+    &-body {
+      flex: 1;
+      padding: 50px 160px 0 50px;
+      h2 {
+        font-weight: 500;
+        font-size: 22px;
+      }
+      p {
+        margin: 20px 0 50px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+      }
+      &-list {
+        display: flex;
+        gap: 40px;
+        margin: 30px 0;
+        dl {
+          flex: 1;
+        }
+        dt {
+          background-color: var(--main-color);
+          line-height: 34px;
+          color: #fff;
+          text-align: center;
+          height: 34px;
+          border-radius: 32px 32px 32px 32px;
+        }
+        dd {
+          height: calc(100% - 36px);
+          margin-top: 10px;
+          padding: 16px 20px;
+          background: #ffffff;
+          border-radius: 6px 6px 6px 6px;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  .bz-list {
+    &-item {
+      margin-bottom: 20px;
+      position: relative;
+      &_label {
+        position: absolute;
+        top: 30px;
+        width: 260px;
+        height: 80px;
+        background: var(--main-color);
+        font-weight: bold;
+        font-size: 20px;
+        color: #ffffff;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        padding: 0 30px;
+        gap: 18px;
+        img {
+          width: 32px;
+        }
+      }
+      &_content {
+        margin-left: 130px;
+        height: 140px;
+        padding: 0 90px 0 180px;
+        background: #dee2ea;
+        border-radius: 12px;
+        white-space: pre-wrap;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>