diff --git a/components.d.ts b/components.d.ts
index 01b8fac..9d785bd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,6 +9,8 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
diff --git a/src/data/caseImage.ts b/src/data/caseImage.ts
new file mode 100644
index 0000000..8cff4dc
--- /dev/null
+++ b/src/data/caseImage.ts
@@ -0,0 +1,122 @@
+export interface RealCase {
+  username: string
+  case: string // 案例描述
+  avatar: string // 用户头像
+  result: string // 案例结果
+  caseImage: string // 新增：案例相关图片（如场景图、产品使用图等）
+}
+
+export const newRealCasesWithImage: RealCase[] = [
+  {
+    username: '林婉清',
+    case: '高中班主任用「课堂专注度」功能分析学生听课数据，AI识别走神高频时段并推送互动课件。商城买的护嗓麦克风收音清晰，课后用「作业批改助手」自动统计错题率，节省2小时工作时间。',
+    avatar: 'https://picsum.photos/id/601/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/f3ccdd27d2000e3f9255a7e3e2c48800.jpeg', // 课堂场景图（学生听课+课件屏幕）
+    result: '学生课堂走神率从35%降至12%，班级月考平均分提升15分，个人嗓子嘶哑频率减少80%。'
+  },
+  {
+    username: '陈浩宇',
+    case: '糖尿病患者用「血糖波动曲线」记录餐前餐后数据，App智能提醒胰岛素注射时间。商城买的血糖仪免采血且误差＜0.5mmol/L，同步推送低糖食谱和「餐后散步20分钟」计划。',
+    avatar: 'https://picsum.photos/id/602/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/156005c5baf40ff51a327f1c34f2975b.jpeg', // 血糖仪+低糖食谱场景图
+    result: '空腹血糖从8.5mmol/L降至6.2mmol/L，低血糖发作次数从每月4次降至0次，糖化血红蛋白从7.8%降至6.5%。'
+  },
+  {
+    username: '苏雨薇',
+    case: '留学生在海外用「翻译问诊」功能与当地医生沟通，AI实时翻译症状描述。商城买的便携体温计支持多语言播报，感冒时通过「海外药房导航」找到附近中文服务药店。',
+    avatar: 'https://picsum.photos/id/603/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/799bad5a3b514f096e69bbc4a7896cd9.jpeg', // 海外诊所+翻译App界面图
+    result: '就医沟通效率提升90%，感冒康复周期缩短2天，成功适配3种语言的医疗服务场景。'
+  },
+  {
+    username: '赵健峰',
+    case: '健身教练用「体成分分析」功能为学员定制增肌计划，AI识别肌肉量薄弱部位。商城买的弹力带防滑且承重50kg，通过「班级打卡」功能监督学员训练，同步推送高蛋白食谱。',
+    avatar: 'https://picsum.photos/id/604/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/032b2cc936860b03048302d991c3498f.jpeg', // 健身房训练+弹力带使用图
+    result: '学员平均肌肉量增加3.2kg，体脂率下降5.8%，课程续费率从65%提升至92%。'
+  },
+  {
+    username: '吴欣怡',
+    case: '花店店主用「花粉过敏预警」功能调整进货品类，避开高致敏花卉。商城买的保鲜喷雾延长玫瑰花期5天，通过「会员健康标签」为过敏顾客推荐低敏花束，减少退货率。',
+    avatar: 'https://picsum.photos/id/605/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/d0096ec6c83575373e3a21d129ff8fef.jpeg', // 花店陈列+低敏花束图
+    result: '顾客过敏投诉从每月8起降至1起，花卉损耗率减少30%，会员复购率提升45%。'
+  },
+  {
+    username: '马子轩',
+    case: '程序员用「久坐提醒」功能每50分钟弹窗拉伸提示，App分析代码时长与颈椎压力关联。商城买的人体工学椅腰托可调节，配合「眼疲劳监测」每2小时强制远眺，同步记录睡眠质量。',
+    avatar: 'https://picsum.photos/id/606/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/28c03d3961c2e936cc6234f52d82e965.jpeg', // 程序员工位+工学椅+拉伸提醒图
+    result: '颈椎疼痛频率从每周5次降至1次，视力从4.7恢复至4.9，深度睡眠时间延长1.5小时。'
+  },
+  {
+    username: '郑思琪',
+    case: '哺乳期妈妈用「奶量预测」功能根据宝宝月龄调整吸奶时间，AI识别供需失衡风险。商城买的吸奶器静音且吸力可调，通过「辅食营养库」匹配宝宝过敏体质，推送低敏食谱。',
+    avatar: 'https://picsum.photos/id/607/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/af9b82a1b9683d5734db895886c002c0.jpeg', // 母婴场景+吸奶器+辅食图
+    result: '奶量供需平衡率从60%提升至95%，宝宝湿疹发作次数减少70%，夜间连续睡眠时长从3小时增至6小时。'
+  },
+  {
+    username: '王浩明',
+    case: '退休老人用「语音记事」功能记录血压、用药时间，App自动生成周健康报告。商城买的智能水杯提醒每日饮水1500ml，通过「子女共享」功能让子女实时查看健康数据，减少担忧。',
+    avatar: 'https://picsum.photos/id/608/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/59aa235ebd97e78a23210c5a618e3633.jpeg', // 老人居家+智能水杯+血压仪图
+    result: '每日饮水量达标率从40%提升至90%，漏服药次数从每月6次降至0次，子女远程关怀响应时间缩短至5分钟内。'
+  },
+  {
+    username: '李雨桐',
+    case: '舞蹈老师用「动作矫正」功能通过手机摄像头识别学员肢体角度，AI标注错误动作。商城买的舞蹈把杆稳固且可折叠，通过「课程回放」功能让学员课后复习，重点标注纠错片段。',
+    avatar: 'https://picsum.photos/id/609/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/b89c4cc90e26a826ef04a7adfea8c40d.jpeg', // 舞蹈教室+把杆+手机矫正界面图
+    result: '学员动作标准率从55%提升至88%，课程学习效率提升40%，家长满意度评分从3.2分升至4.8分。'
+  },
+  {
+    username: '张博文',
+    case: '货车司机用「疲劳驾驶监测」通过方向盘震动提醒，连续驾驶4小时强制休息。商城买的车载腰靠贴合腰椎曲线，离线地图提前预警施工路段，同步记录油耗与胎压数据。',
+    avatar: 'https://picsum.photos/id/610/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/734a4c7ff726c7e7aeadf15773e060ff.jpeg', // 货车驾驶舱+腰靠+导航界面图
+    result: '疲劳驾驶风险事件从每月3次降至0次，油耗降低12%，轮胎异常磨损率减少60%。'
+  },
+  {
+    username: '刘雅菲',
+    case: '鼻炎患者用「花粉浓度地图」避开高风险区域，App推送每日鼻腔冲洗提醒。商城买的洗鼻器喷头柔软且水流可调，通过「过敏原记录」识别尘螨过敏，推荐防螨床品。',
+    avatar: 'https://picsum.photos/id/611/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/280a6001ab93c8eea794f0fdf899c4ad.jpeg', // 洗鼻器+花粉地图+防螨床品图
+    result: '鼻炎发作频率从每周4次降至1次，打喷嚏次数从每日20次减至5次，睡眠质量评分从60分升至85分。'
+  },
+  {
+    username: '陈宇轩',
+    case: '咖啡店店主用「员工健康打卡」功能记录体温、核酸状态，到期自动提醒体检。商城买的手部消毒机感应灵敏，通过「客流健康分析」调整高峰时段员工排班，减少交叉感染风险。',
+    avatar: 'https://picsum.photos/id/612/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/c7b9fe05ece7c3068309677eb788d520.jpeg', // 咖啡店吧台+消毒机+打卡界面图
+    result: '员工健康异常率从8%降至1%，顾客投诉率减少50%，门店卫生评分从B级升至A级。'
+  },
+  {
+    username: '高思远',
+    case: '备考公务员用「专注计时」功能屏蔽娱乐软件，AI分析学习效率高峰时段。商城买的护眼台灯可调节色温，通过「错题本同步」功能整理高频考点，推送相似题型练习。',
+    avatar: 'https://picsum.photos/id/613/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/45fca35bf2e29ddb2e49305da1c813d6.jpeg', // 学习桌+护眼台灯+错题本App图
+    result: '日均有效学习时长从5小时增至7.5小时，错题重复率从40%降至15%，笔试成绩提升28分。'
+  },
+  {
+    username: '周雨薇',
+    case: '早产儿妈妈用「生长曲线监测」每周记录宝宝体重、身高，AI对比标准曲线预警异常。商城买的婴儿体重秤精度达10g，通过「母乳成分分析」调整饮食，提升乳汁营养密度。',
+    avatar: 'https://picsum.photos/id/614/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/15a7bfcf08d4a38fad6d798e02461165.jpeg', // 婴儿体重秤+生长曲线App+母乳检测图
+    result: '宝宝生长达标率从65%提升至98%，纠正月龄后体重追平同龄婴儿，医生随访满意度达100%。'
+  },
+  {
+    username: '吴浩明',
+    case: '工地安全员用「噪音监测」功能记录施工环境分贝，超过85dB自动推送防护提醒。商城买的防噪音耳塞降噪率达35dB，通过「安全培训视频」定期考核工人，同步记录防护装备佩戴情况。',
+    avatar: 'https://picsum.photos/id/615/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/e47f1edd5ca04227b115fe4b47786b85.jpeg', // 工地场景+噪音监测仪+耳塞图
+    result: '工人听力损伤风险降低70%，安全考核通过率从75%升至96%，工伤事故次数减少80%。'
+  },
+  {
+    username: '郑雅琳',
+    case: '瑜伽教练用「呼吸节奏监测」功能纠正学员呼吸与动作配合，AI识别憋气时段。商城买的瑜伽垫防滑系数达0.8，通过「会员体态报告」生成个性化矫正计划，推送居家练习视频。',
+    avatar: 'https://picsum.photos/id/616/200/200',
+    caseImage: 'https://images.health.ufutx.com/202509/18/72eec5023144990dc4b80e31d8a0a6e0.jpeg', // 瑜伽馆+瑜伽垫+呼吸监测App图
+    result: '学员呼吸配合准确率从50%提升至90%，体态不良改善率达85%，私教课程续费率提升50%。'
+  }
+]
diff --git a/src/lib/device.ts b/src/lib/device.ts
new file mode 100644
index 0000000..4aedd78
--- /dev/null
+++ b/src/lib/device.ts
@@ -0,0 +1,22 @@
+/**
+ * 判断是否为移动端设备
+ * @returns boolean
+ */
+export const isMobile = (): boolean => {
+  // 1. UA 检测：匹配常见移动设备关键词
+  const mobileUA = /Android|iPhone|iPad|iPod|BlackBerry|Windows Phone|SymbianOS/i.test(navigator.userAgent)
+  // 2. 屏幕宽度辅助判断（适配部分平板/PC 小窗口场景）
+  const mobileWidth = window.innerWidth < 768
+
+  // 满足任一条件即视为移动端
+  return mobileUA || mobileWidth
+}
+
+/**
+ * 判断当前页面是否已在移动端 H5 页面
+ * @param mobileDomain 移动端页面域名（如 'm.xxx.com'）
+ * @returns boolean
+ */
+export const isInMobilePage = (mobileDomain: string): boolean => {
+  return window.location.hostname === mobileDomain
+}
diff --git a/src/views/Home/sections/CoreValue.vue b/src/views/Home/sections/CoreValue.vue
index 12cf3b6..8ac757d 100644
--- a/src/views/Home/sections/CoreValue.vue
+++ b/src/views/Home/sections/CoreValue.vue
@@ -94,7 +94,7 @@ const modules = [
     icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
   }
 ]
-const date = new Date()
+// const date = new Date()
 
 // 控制当前悬浮的模块（0为无悬浮）
 const isHover = ref<number>(0)
diff --git a/src/views/Network/sections/CustomerCases.vue b/src/views/Network/sections/CustomerCases.vue
index 5017bcb..971a50b 100644
--- a/src/views/Network/sections/CustomerCases.vue
+++ b/src/views/Network/sections/CustomerCases.vue
@@ -1,117 +1,104 @@
 <template>
   <section class="feedback-section">
     <div class="feedback-title">真实客户案例</div>
+    <div class="feedback-desc">友福智能健康-用AI重塑人类健康未来</div>
     <div class="feedback-list">
-      <Marquee
-        :duration="360"
-        :reverse="false"
-        repeatCount="3"
-        pause-on-hover
-        container-class="h-56 bg-white rounded-lg shadow-sm p-4"
-        :initial-offset="0"
+      <el-carousel
+        ref="carouselRef"
+        trigger="click"
+        height="460px"
+        arrow="always"
+        interval="5000"
+        @change="carouselChange"
       >
-        <!-- 内容卡片：直接作为Marquee的子元素，不嵌套额外div -->
-        <div v-for="(item, index) in feedbackList[0]" :key="`${item.username}-${index}`" class="feedback-card">
-          <el-popover placement="right-end" :width="320" trigger="hover" popper-class="custom-popover">
-            <template #default>
-              <div class="_userinfo">
-                <div class="_userPic"><img :src="item.avatar" alt="avatar" class="avatar" /></div>
-                <div class="_username">{{ item.username }}</div>
+        <el-carousel-item v-for="(itemList, index) in feedbackList" :key="index" :name="index">
+          <div v-for="(item, idx) in itemList" :key="`${item.username}-${idx}`" class="feedback-card">
+            <div class="popover-container">
+              <div class="avatar-container">
+                <el-image
+                  :ref="(el: any) => (imageRefs[idx] = el)"
+                  :src="item.caseImage"
+                  alt="certificate"
+                  class="certificate-image"
+                  :zoom-rate="1"
+                  :preview-src-list="[item.caseImage]"
+                  show-progress
+                  preview-teleported
+                  fit="contain"
+                  :initial-index="idx"
+                />
               </div>
-              <div class="_comment">{{ item.case }}</div>
-            </template>
-            <template #reference>
-              <div class="popover-container">
-                <div class="avatar-container">
-                  <img :src="item.avatar" alt="avatar" class="avatar" />
-                </div>
-                <div class="feedback-info">
-                  <!--                  <p class="username">{{ item.username }}</p>-->
-                  <p class="comment">{{ item.result }}</p>
-                </div>
-              </div>
-            </template>
-          </el-popover>
-        </div>
-      </Marquee>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
     </div>
-    <div class="feedback-list" style="margin-top: 40px">
-      <Marquee
-        :duration="360"
-        :reverse="false"
-        repeatCount="3"
-        pause-on-hover
-        container-class="h-56 bg-white rounded-lg shadow-sm p-4"
-        :initial-offset="-300"
-      >
-        <!-- 内容卡片：直接作为Marquee的子元素，不嵌套额外div -->
-        <div v-for="(item, index) in feedbackList[1]" :key="`${item.username}-${index}`" class="feedback-card">
-          <el-popover placement="right-end" :width="320" trigger="hover" popper-class="custom-popover">
-            <template #default>
-              <div class="_userinfo">
-                <div class="_userPic"><img :src="item.avatar" alt="avatar" class="avatar" /></div>
-                <div class="_username">{{ item.username }}</div>
-              </div>
-              <div class="_comment">{{ item.case }}</div>
-            </template>
-            <template #reference>
-              <div class="popover-container">
-                <div class="avatar-container">
-                  <img :src="item.avatar" alt="avatar" class="avatar" />
-                </div>
-                <div class="feedback-info">
-                  <!--                  <p class="username">{{ item.username }}</p>-->
-                  <p class="comment">{{ item.result }}</p>
-                </div>
-              </div>
-            </template>
-          </el-popover>
-        </div>
-      </Marquee>
+    <div class="el-timeline__dot">
+      <div
+        v-for="(_, index) in feedbackList"
+        :key="index"
+        class="el-item__dot"
+        :class="{ 'el-item__dot--active': index === currentIndex }"
+        @click="handleSwitch(index)"
+      ></div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-// 模拟假数据（头像统一使用你提供的链接）
-// import TextGenerateEffect from '@/components/TextGenerateEffect.vue'
-import Marquee from '@/components/Marquee.vue'
-import { realCases } from '@/data/realCases.ts'
+import { ref, reactive } from 'vue'
+import type { CarouselInstance, ImageInstance } from 'element-plus'
+import { newRealCasesWithImage } from '@/data/caseImage.ts'
 
-// 添加泛型类型 T 表示数组元素的类型
-function splitArrayRandomly<T>(arr: T[], ratio = 0.5): [T[], T[]] {
-  // 复制原数组避免修改
+// 定义案例数据类型
+type CaseItem = {
+  username: string
+  case: string
+  avatar: string
+  result: string
+  caseImage: string
+}
+
+// 图片引用集合
+const imageRefs = ref<(ImageInstance | null)[]>([])
+// Carousel 实例引用（指定类型）
+const carouselRef = ref<CarouselInstance | null>(null)
+// 当前激活的轮播索引
+const currentIndex = ref(0)
+
+// 切换轮播项
+const handleSwitch = (target: number) => {
+  if (carouselRef.value) {
+    carouselRef.value.setActiveItem(target)
+  }
+}
+
+// 轮播切换时更新索引
+const carouselChange = (newIndex: number) => {
+  currentIndex.value = newIndex
+}
+
+// 数组按3个一组随机拆分
+function splitIntoGroupsOfThree<T>(arr: T[]): T[][] {
   const shuffled = [...arr]
-
-  // Fisher-Yates 洗牌算法
+  // Fisher-Yates 洗牌（随机打乱数组）
   for (let i = shuffled.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1))
     ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
   }
-
-  // 计算分割点（默认为 50%）
-  const splitIndex = Math.round(shuffled.length * ratio)
-
-  // 分割数组
-  return [shuffled.slice(0, splitIndex), shuffled.slice(splitIndex)]
+  // 按3个一组拆分
+  const groups: T[][] = []
+  for (let i = 0; i < shuffled.length; i += 3) {
+    groups.push(shuffled.slice(i, i + 3))
+  }
+  return groups
 }
 
-const feedbackList = reactive(splitArrayRandomly(realCases))
-
-console.log('数组1:', feedbackList[0]) // 例如: [3, 7, 2, 5]
+// 处理案例数据为分组形式
+const feedbackList = reactive<CaseItem[][]>(splitIntoGroupsOfThree(newRealCasesWithImage))
 </script>
 
 <style scoped lang="less">
-// 基础变量（可继承项目全局样式）
-@bg-color: #f9fbff;
-@card-bg: #ffffff;
-@radius: 12px;
-@padding: 16px;
-@gap: 50px;
-@avatar-size: 60px;
-@subtext-color: #999;
-@transition: all 0.3s ease;
-
 // 基础变量
 @bg-color: #f9fbff;
 @card-bg: #ffffff;
@@ -123,11 +110,11 @@ console.log('数组1:', feedbackList[0]) // 例如: [3, 7, 2, 5]
 
 .feedback-section {
   background-color: @bg-color;
-  padding: 0 0 100px 0; /* 改用标准padding写法，避免自定义.px()可能的问题 */
+  padding: 0 0 100px 0;
   text-align: center;
-  //background: bisque;
   position: relative;
-  &&::before {
+
+  &::before {
     content: '';
     position: absolute;
     top: 0;
@@ -135,76 +122,87 @@ console.log('数组1:', feedbackList[0]) // 例如: [3, 7, 2, 5]
     width: 60px;
     z-index: 1;
     pointer-events: none;
-  }
-  &&::before {
     left: 100px;
-    background: linear-gradient(to right, #f9fbff, transparent);
-  }
-  .feedback-title {
-    font-size: 28px;
-    font-weight: 600;
-    padding: 100px 0 60px;
   }
 
-  // 跑马灯容器：关键修改——禁止换行，确保内容单行滚动
+  .feedback-title {
+    padding: 50px 0 0;
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: @text-color;
+  }
+
+  .feedback-desc {
+    font-size: 20px;
+    color: @text-color-secondary;
+  }
+
+  .el-timeline__dot {
+    width: auto;
+    display: inline-flex;
+    height: 36px;
+    padding: 8px 20px;
+    align-items: center;
+    gap: 20px;
+    border-radius: 100px;
+    background: #f5f7fe;
+    margin-top: 20px;
+
+    .el-item__dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 100px;
+      opacity: 0.2;
+      background: var(--313-fa-8, #313fa8);
+    }
+
+    .el-item__dot--active {
+      width: 20px;
+      border-radius: 100px;
+      opacity: 1;
+      background: var(--313-fa-8, #313fa8);
+    }
+  }
+
   .feedback-list {
-    //width: 100vw;
     max-width: 1820px;
     margin: 0 auto;
     margin-left: 100px;
     box-sizing: border-box;
-    // 关键：强制水平布局，禁止换行
     padding: 10px;
     display: flex;
-    flex-direction: row; /* 明确水平方向 */
-    flex-wrap: nowrap; /* 禁止换行 */
-    overflow: hidden; /* 隐藏超出容器的部分 */
+    flex-direction: row;
   }
-  // 反馈卡片：固定宽度，确保排列整齐
+
   .feedback-card {
-    width: 362px; /* 固定宽度，确保能在一行放下多个 */
-    //max-width: 320px;
-    flex-shrink: 0; /* 禁止收缩，保证宽度不变 */
-    border-radius: 100px;
-    background: #f3f5f7;
-    //transition: @transition;
-    //box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 增加轻微阴影，提升视觉层次 */
-    margin-right: 60px;
-    cursor: pointer; /* 提示可交互 */
-    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 卡片整体过渡 */
+    margin-top: 50px;
+    display: inline-block;
 
-    &:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-    }
     .popover-container {
-      padding: @padding;
-      display: flex; /* 卡片内部水平排列头像和文字 */
-      flex-direction: row; /* 明确水平方向 */
-      align-items: center;
+      width: 492px;
+      height: 352px;
+      display: inline-block;
+      margin-right: 30px;
     }
-    .avatar-container {
-      flex-shrink: 0;
-      margin-right: 20px;
 
-      .avatar {
-        width: @avatar-size;
-        height: @avatar-size;
-        border-radius: 50%;
+    .avatar-container {
+      .certificate-image {
+        width: 100%;
+        height: 100%;
         object-fit: cover;
-        border: 2px solid #f0f0f0;
       }
     }
 
     .feedback-info {
       text-align: left;
-      max-width: calc(100% - @avatar-size - 12px); /* 限制文本区域宽度 */
+      max-width: calc(100% - @avatar-size - 12px);
 
       .username {
         font-size: 16px;
         font-weight: 500;
         margin-bottom: 6px;
-        white-space: nowrap; /* 用户名不换行 */
+        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
@@ -214,18 +212,20 @@ console.log('数组1:', feedbackList[0]) // 例如: [3, 7, 2, 5]
         color: @text-color;
         line-height: 1.5;
         display: -webkit-box;
-        -webkit-line-clamp: 2; /* 固定2行文本 */
+        -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
-        /* 过渡动画：重点控制max-height */
-        max-height: 42px; /* 14px*1.5*2=42px（刚好2行高度） */
+        max-height: 42px;
         transition: max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
       }
     }
   }
 }
 
-// 响应式适配
+:deep(.el-image-viewer__canvas) {
+  height: 80vh;
+}
+
 @media (max-width: 768px) {
   .feedback-card {
     width: 100%;
@@ -236,22 +236,17 @@ console.log('数组1:', feedbackList[0]) // 例如: [3, 7, 2, 5]
 
 <style lang="less">
 .custom-popover {
-  /* 修改圆角（核心） */
-  border-radius: 18px !important; /* 根据需求调整数值，如8px、16px */
-
-  /* 可选：修改边框 */
+  border-radius: 18px !important;
   border: 1px solid #e5e7eb !important;
-
-  /* 可选：修改阴影 */
   box-shadow: 0 4px 16px rgba(79, 79, 79, 0.08) !important;
-
-  /* 可选：修改内部边距 */
   padding: 22px !important;
+
   ._userinfo {
-    .flex();
+    display: flex;
     align-items: center;
-    .mb(12px);
+    margin-bottom: 12px;
   }
+
   ._userPic {
     width: 62px;
     height: 62px;
@@ -259,16 +254,33 @@ console.log('数组1:', feedbackList[0]) // 例如: [3, 7, 2, 5]
     overflow: hidden;
     border: 4px solid #f3f5f7;
     box-shadow: 0 0 16px rgba(79, 79, 79, 0.08);
-    .mr(10px);
+    margin-right: 10px;
   }
+
   ._username {
     font-size: 20px;
     font-weight: 600;
     color: @text-color;
   }
+
   ._comment {
     font-size: 16px;
     color: @text-color-secondary;
   }
 }
+
+.el-carousel {
+  width: 100%;
+}
+
+.demonstration {
+  color: var(--el-text-color-secondary);
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  margin: 0;
+  text-align: center;
+}
 </style>