feat: 图片切换img

app/components/Header.vue

@@ -2,7 +2,7 @@
   <header class="header" :class="{ 'header-hidden': isHidden }" role="banner">
     <div class="header-left">
       <a href="/" class="brand" aria-label="Home">
-        <NuxtPicture src="/logo.png" alt="DDAC logo" class="brand-logo" width="34" height="34"></NuxtPicture>
+        <NuxtImg src="/logo.png" alt="DDAC logo" class="brand-logo" width="34" height="34" />
         <h1 class="brand-title">DDAC</h1>
       </a>
     </div>

app/components/HeaderH5.vue

@@ -2,7 +2,7 @@
   <header class="h5-header">
     <div class="h5-header-container">
       <a href="/" class="brand">
-        <NuxtPicture src="/logo.png" alt="DDAC logo" class="brand-logo" width="24" height="24"></NuxtPicture>
+        <NuxtImg src="/logo.png" alt="DDAC logo" class="brand-logo" width="24" height="24" />
         <h1 class="brand-title">DDAC</h1>
       </a>
       <button class="menu-button" @click="toggleMenu">

app/components/home/StatsSection.vue

@@ -3,7 +3,7 @@
     <div class="stats-bg-wrapper">
       <img class="stats-bg" src="/images/home/home-bg.png" alt="首页背景" />
       <section class="stats-section">
-        <NuxtPicture class="stats-figure" src="/images/home/home-d.png" alt="游戏盾"></NuxtPicture>
+        <NuxtImg class="stats-figure" src="/images/home/home-d.png" alt="游戏盾" />
         <div class="stats-row">
           <div class="stat-item">
             <div class="stat-label">今日攻击次数</div>

app/components/products/CaseCard.vue

@@ -21,7 +21,8 @@
                 <p class="value-desc">{{ cases[activeIndex].value }}</p>
               </div>
               <div class="image-content">
-                <NuxtPicture :src="cases[activeIndex].image" :alt="cases[activeIndex].title" />
+                <NuxtImg :width="cases[activeIndex].width" :src="cases[activeIndex].image"
+                  :alt="cases[activeIndex].title" />
               </div>
             </div>
           </transition>
@@ -39,25 +40,29 @@ const cases = [
     title: '网站提速',
     description: '针对网页静态资源的优化和加速分发，解决网站流量激增时用户请求量、带宽负载增高、服务器压力过大以及站点响应缓慢的问题。',
     value: '通过压缩优化，快速加载大图、样式等资源，缩短网页响应时间，提升用户体验。访问数据决定回源行为，减少回源流量，提高请求命中率，降低带宽成本。',
-    image: '/images/products/case1.png'
+    image: '/images/products/case1.png',
+    width: '302'
   },
   {
     title: '下载加速',
     description: '适用于网站或应用的静态大文件分发，如游戏安装包、应用更新文件、补丁程序文件、音视频文件、建筑数据模型、医疗图像等较大的文件。',
     value: '通过海量加速节点，用户获得极速下载体验。分段缓存技术增强大文件下载的传输稳定性，确保顺畅的文件传输。',
-    image: '/images/products/case2.png'
+    image: '/images/products/case2.png',
+    width: '396'
   },
   {
     title: '音视频加速',
     description: '针对视频网站、短视频等业务场景，优化源站出口压力，解决用户在观看音视频时的卡顿和不流畅问题。',
     value: '通过海量加速节点支持高并发，提供高速稳定的资源分发，确保流畅、稳定和丰富的观看体验。同时，丰富的访问控制功能有效防止用户盗用媒体资源。',
-    image: '/images/products/case3.png'
+    image: '/images/products/case3.png',
+    width: '288'
   },
   {
     title: '安全防护',
     description: '黑客通过扫描发现互联网应用的安全漏洞，并利用爬虫、挂马、黑客病毒、数据泄露、CC攻击等手段入侵服务器和数据库，窃取核心业务数据。',
     value: '提供恶意URL过滤、入侵防护等全面的用户防护能力，有效防御常见Web攻击。同时提供Referer黑白名单和高阶URL鉴权，全面解决盗链问题。',
-    image: '/images/products/case4.png'
+    image: '/images/products/case4.png',
+    width: '286'
   }
 ];
 </script>
@@ -184,8 +189,8 @@ const cases = [
     justify-content: center;
 
     :deep(img) {
-     width: 100%;
-     height: auto;
+      width: 100%;
+      height: auto;
     }
   }
 }

app/components/products/Defense.vue

@@ -21,7 +21,7 @@
               <li>• 日本节点：作为东亚数据枢纽，为日本、韩国及泛亚地区用户提供超低延迟访问，保障区域业务流畅稳定。</li>
               <li>• 香港节点：具备独特的网络中立性与中国大陆极速连接能力，是同时服务内地用户与全球业务的绝佳桥梁。</li>
             </ul>
-            <NuxtPicture src="/images/products/ddos.png" />
+            <NuxtImg src="/images/products/ddos.png" />
           </div>
         </div>
 
@@ -31,7 +31,7 @@
               <h4>全球分布式近源清洗，让攻击流量</h4>
               <h4>无法触及您的业务核心</h4>
             </div>
-            <NuxtPicture src="/images/products/spread.png" />
+            <NuxtImg src="/images/products/spread.png" />
           </div>
           <div class="card-content">
             <p>
@@ -53,7 +53,7 @@
               </p>
             </div>
           </div>
-          <NuxtPicture width="256" height="auto" class="defense-image" src="/images/products/sd.png" />
+          <NuxtImg width="256" height="auto" class="defense-image" src="/images/products/sd.png" />
         </div>
       </div>
     </div>

app/components/products/SecurityServicesSuite.vue

@@ -17,7 +17,7 @@
           </template>
           <template v-else>
             <div class="customized-icon">
-              <NuxtPicture width="112" height="112" src="/images/products/customized.png" alt="定制" />
+              <NuxtImg width="112" height="112" src="/images/products/customized.png" alt="定制" />
             </div>
           </template>
           <button class="action-btn">{{ item.btnText }}</button>

app/layouts/pc.vue

@@ -25,5 +25,6 @@
   flex: 1;
   width: 100%;
   box-sizing: border-box;
+  overflow: hidden;
 }
 </style>

app/pages/pc/index.vue

@@ -48,7 +48,7 @@
       </div>
     </section>
     <section class="security-flowchart">
-      <NuxtPicture loading="eager" src="/images/home/flowchart.png" alt="流程" />
+      <NuxtImg width="1918" loading="eager" src="/images/home/flowchart.png" alt="流程" />
     </section>
 
     <!-- 助力各行业客户成功 -->
@@ -88,49 +88,49 @@
       </div>
       <div class="industry-other">
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon6.png" alt="卓越教育" />
+          <NuxtImg src="/images/home/icon6.png" alt="卓越教育" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon7.png" alt="华福证券" />
+          <NuxtImg src="/images/home/icon7.png" alt="华福证券" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon8.png" alt="汉王" />
+          <NuxtImg src="/images/home/icon8.png" alt="汉王" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon9.png" alt="隧道股份" />
+          <NuxtImg src="/images/home/icon9.png" alt="隧道股份" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon10.png" alt="岳阳医院" />
+          <NuxtImg src="/images/home/icon10.png" alt="岳阳医院" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon11.png" alt="杉德" />
+          <NuxtImg src="/images/home/icon11.png" alt="杉德" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon12.png" alt="易班" />
+          <NuxtImg src="/images/home/icon12.png" alt="易班" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon13.png" alt="银联商务" />
+          <NuxtImg src="/images/home/icon13.png" alt="银联商务" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon14.png" alt="长海医院" />
+          <NuxtImg src="/images/home/icon14.png" alt="长海医院" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon15.png" alt="斗象科技" />
+          <NuxtImg src="/images/home/icon15.png" alt="斗象科技" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon16.png" alt="瑞金" />
+          <NuxtImg src="/images/home/icon16.png" alt="瑞金" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon17.png" alt="3L" />
+          <NuxtImg src="/images/home/icon17.png" alt="3L" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon18.png" alt="宝付" />
+          <NuxtImg src="/images/home/icon18.png" alt="宝付" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon19.png" alt="新华医院" />
+          <NuxtImg src="/images/home/icon19.png" alt="新华医院" />
         </div>
         <div class="other-item">
-          <NuxtPicture src="/images/home/icon20.png" alt="中船重工物贸集团" />
+          <NuxtImg src="/images/home/icon20.png" alt="中船重工物贸集团" />
         </div>
       </div>
       <div class="industry-box">

app/pages/pc/products/boost.vue

@@ -42,7 +42,7 @@
                 <p> <span>这意味您的业务可以同时达成两个看似矛盾的目标：在顶级安全防护下，实现全球用户的极速访问。</span></p>
               </div>
             </div>
-            <NuxtPicture width="446" height="366" src="/images/products/tab-img.png" alt="tab图片" />
+            <NuxtImg width="446" height="366" src="/images/products/tab-img.png" alt="tab图片" />
           </div>
           <div v-else key="defense" class="content-panel">
             <div class="content-text">
@@ -55,7 +55,7 @@
 
               </div>
             </div>
-            <NuxtPicture width="446" height="366" src="/images/products/tab-img.png" alt="tab图片" />
+            <NuxtImg width="446" height="366" src="/images/products/tab-img.png" alt="tab图片" />
           </div>
         </transition>
       </div>

app/pages/pc/products/sdk.vue

@@ -26,7 +26,7 @@
     </section>
     <section class="products-sdk">
       <h2>安全加速SDK防护架构</h2>
-      <NuxtPicture loading="eager" src="/images/products/flowchart.png" alt="安全加速SDK防护架构" />
+      <NuxtImg width="1920" loading="eager" src="/images/products/flowchart.png" alt="安全加速SDK防护架构" />
     </section>
   </section>
 </template>

app/pages/pc/products/web.vue

@@ -29,10 +29,10 @@
               加速您的网站，最速达优化性能。CDN内容分发网络遍布五大洲，我们的CDN将使您的网站前所未有的更流畅，提升您的用户体验，而我们的数据中心则提供商业的资讯管理和保护，确保您的数据平安无误。
             </p>
           </div>
-          <NuxtPicture width="400" height="462" class="item-img" src="/images/products/cdn.png" alt="cdn分发" />
+          <NuxtImg width="400" height="462" class="item-img" src="/images/products/cdn.png" alt="cdn分发" />
         </div>
         <div class="cdn-item">
-          <NuxtPicture width="316" height="436" class="item-img" src="/images/products/678yun.png" alt="678云盾" />
+          <NuxtImg width="316" height="436" class="item-img" src="/images/products/678yun.png" alt="678云盾" />
           <div class="item-text">
             <h3>网站保护</h3>
             <p>
@@ -43,7 +43,7 @@
       </div>
     </section>
     <section class="cdn-bg">
-      <NuxtPicture src="/images/products/web-bg.png" width="100%" height="auto" alt="背景图" />
+      <NuxtImg src="/images/products/web-bg.png" width="100%" height="auto" alt="背景图" />
     </section>
     <section class="cdn-cards">
       <div class="card-item" v-for="(card, index) in cards" :key="index">