feat: 20250624 添加完整数据，动画相关

components.d.ts

@@ -9,15 +9,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCol: typeof import('element-plus/es')['ElCol']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElRow: typeof import('element-plus/es')['ElRow']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     Footer: typeof import('./src/components/Footer.vue')['default']

src/components/Footer.vue

@@ -22,13 +22,18 @@
     <!-- 底部信息 -->
     <div class="footer-bottom">
       <p>公司地址：深圳市南山区南山街道阳光科创中心B座33楼</p>
-      <p>版权所有©友福同享(深圳)智能科技有限公司 粤ICP备12008876号</p>
+      <p>
+        版权所有 <span @click="openReport('https://www.ufutx.com')">©友福同享(深圳)智能科技有限公司</span>
+        <span @click="openReport('https://beian.miit.gov.cn/')">粤ICP备12008876号</span>
+      </p>
     </div>
   </footer>
 </template>
 
 <script setup lang="ts">
 // 二维码数据
+import { openExternalLink } from '@/utils/navigation.ts'
+
 const qrItems = [
   {
     src: 'https://images.health.ufutx.com/202506/12/cc651222ac2e5f63185dec1f31d176ae.png',
@@ -46,6 +51,11 @@ const qrItems = [
     title: '友福公众号'
   }
 ]
+
+// 外部链接跳转（新标签）
+const openReport = (URL: string) => {
+  openExternalLink(URL, '_blank')
+}
 </script>
 
 <style scoped lang="less">

src/router/index.ts

@@ -1,9 +1,9 @@
 // src/router/index.ts
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import routes from './routes'
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes,
   scrollBehavior(_to, _from, savedPosition) {
     // 添加下划线标记未使用参数

src/views/About/sections/CompanyValues.vue

@@ -77,9 +77,9 @@ const valueTabs = [
 const activeTab = ref(valueTabs[0].name) // 默认选中第一个标签
 const currentTabIndex = ref(0) // 当前选中标签的下标
 // 计算属性：当前选中的标签数据
-const currentTab = computed(() => {
+// const currentTab = computed(() => {
-  return valueTabs[currentTabIndex.value] || valueTabs[0]
+//   return valueTabs[currentTabIndex.value] || valueTabs[0]
-})
+// })
 const handleTabClick = (tab: any, event: Event) => {
   console.log(tab.props.name, event)
   currentTabIndex.value = valueTabs.findIndex(item => item.name === tab.props.name)

src/views/About/sections/QualificationCarousel.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 
 const certificateImgs = [
   'https://images.health.ufutx.com/202506/20/6972bf0f5da9af6ec4f2b8fba404d59e.png',

src/views/App/App.vue

@@ -24,12 +24,6 @@ import ApplicationScenes from './sections/ApplicationScenes.vue'
 import DownloadSection from './sections/DownloadSection.vue'
 import FeatureNav from '@/views/App/sections/FeatureNav.vue'
 
-const healthBand = {
-  title: '健康手环',
-  desc: 'AI精准个性化健康方案服务<br/>智能穿戴设备数据监测，健康手环/你的专属健康管家，智能体脂秤、精准计算身体状态',
-  img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
-}
-
 const bodyScale = {
   title: '智能体脂秤',
   desc: 'AI精准个性化健康方案服务<br/>智能穿戴设备数据监测，健康手环/你的专属健康管家，智能体脂秤、精准计算身体状态',

src/views/App/sections/ApplicationScenes.vue

@@ -35,10 +35,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const tabs = ['友福健康生态', '幸福婚恋', '个人成长']
-
 // 默认选中第一个场景
-const currentTab = ref(0)
+// const currentTab = ref(0)
 // 结构化场景数据（单数据源管理）
 const scenes = ref([
   {
@@ -80,9 +78,6 @@ const scenes = ref([
 ])
 
 const activeTab = ref(scenes.value[0].name)
-const resetPage = () => {
-  // currentPage.value = 1 // 切换标签时重置页码
-}
 </script>
 
 <style scoped lang="less">

src/views/App/sections/FeatureNav.vue

@@ -16,7 +16,7 @@
     <div class="health-device">
       <div class="device-content">
         <div class="device-img">
-          <img :src="navList[activeIndex].center.deviceImg" alt="设备界面" />
+          <img :src="navList[activeIndex].center.deviceImg" :alt="navList[activeIndex].center.title" />
         </div>
         <div class="device-info">
           <h3 class="device-title">{{ navList[activeIndex].center.title }}</h3>

src/views/App/sections/HealthDevice.vue

@@ -5,9 +5,9 @@
         <img :src="device.img" alt="设备界面" />
       </div>
       <div class="device-info">
-        <h3 class="device-title">{{ device.title }}</h3>
+        <h3 class="device-title">{{ props.device.title }}</h3>
         <h3 class="device-subtitle">AI精准个性化健康方案服务</h3>
-        <p class="device-desc" v-html="device.desc"></p>
+        <p class="device-desc" v-html="props.device.desc"></p>
         <div class="download-btn" @click="openReport">立即下载</div>
       </div>
     </div>
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { ElButton } from 'element-plus'
+// 18 import { ElButton } from 'element-plus'
 import { openExternalLink } from '@/utils/navigation.ts'
 // import FeatureNav from '@/views/App/sections/FeatureNav.vue'
 

src/views/Dating/sections/AiTags.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { ElButton } from 'element-plus'
+// 18 import { ElButton } from 'element-plus'
 
 // const tags = [
 //   {

src/views/Dating/sections/SuccessStories.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-// import { ElButton } from 'element-plus'
+// // 18 import { ElButton } from 'element-plus'
 
 // const stories = [
 //   { img: '@/assets/story-1.jpg' },

src/views/Ecosystem/sections/CooperationConsult.vue

@@ -21,7 +21,7 @@ const props = defineProps({
     })
   }
 })
-// import { ElButton } from 'element-plus'
+// // 18 import { ElButton } from 'element-plus'
 </script>
 
 <style scoped lang="less">

src/views/Ecosystem/sections/HealthManagement.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="health-management">
-    <!-- 2x2卡片布局 -->
+    <!-- 2x2卡片（样式完全保留） -->
     <div class="health-grid">
       <div
         v-for="(item, index) in sections"
@@ -9,66 +9,83 @@
         @mouseenter="highlightSector(index)"
         @mouseleave="resetHighlight"
       >
-        <h3 class="item-title">{{ item.title }}</h3>
+        <div>
-        <p class="item-desc">{{ item.desc }}</p>
+          <h3 class="item-title">{{ item.title }}</h3>
+          <p class="item-desc">{{ item.desc }}</p>
+        </div>
       </div>
     </div>
 
-    <!-- 中间扇形（SVG实现） -->
+    <!-- 中间扇形图片（1:1还原，不影响方块） -->
-    <div class="sector-svg-container">
+    <div class="sector-img-container">
-      <svg class="sector-svg" viewBox="0 0 400 400">
+      <img
-        <defs>
+        v-for="(item, index) in sections"
-          <linearGradient id="sectorGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+        :key="index"
-            <stop offset="0%" stop-color="#1E6DD8" />
+        :src="getSectorImage(index)"
-            <stop offset="100%" stop-color="#4B89DC" />
+        class="sector-img"
-          </linearGradient>
+        :class="`sector-img--${index}`"
-        </defs>
+        @mouseenter="highlightSector(index)"
-        <!-- 圆心平移到(200,200) -->
+        @mouseleave="resetHighlight"
-        <g transform="translate(200, 200)">
+      />
-          <!-- 左上扇形：精准个性化AI健康管理 -->
-          <path d="M0,0 L0,-100 A100,100 0 0,0 -100,0 Z" class="sector" :class="{ active: highlightedSector === 0 }" />
-          <!-- 右上扇形：智能健康监测 -->
-          <path d="M0,0 L100,0 A100,100 0 0,0 0,-100 Z" class="sector" :class="{ active: highlightedSector === 1 }" />
-          <!-- 左下扇形：医疗资源整合 -->
-          <path d="M0,0 L-100,0 A100,100 0 0,0 0,100 Z" class="sector" :class="{ active: highlightedSector === 2 }" />
-          <!-- 右下扇形：健康教育与促进 -->
-          <path d="M0,0 L0,100 A100,100 0 0,0 100,0 Z" class="sector" :class="{ active: highlightedSector === 3 }" />
-        </g>
-      </svg>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 
+// 数据：新增「默认/高亮图」，保持原有title/desc
 const sections = [
   {
     title: '精准个性化AI健康管理',
-    desc: '根据居民的健康数据和风险评估结果，提供个性化的健康建议和干预措施。制定针对性的全方位健康改善计划，包括精准营养、饮食、运动、心理等方面的辅导。'
+    desc: '根据居民的健康数据和风险评估结果，提供个性化的健康建议和干预措施。制定针对性的全方位健康改善计划，包括精准营养、饮食、运动、心理等方面的辅导。',
+    defaultImg: 'https://images.health.ufutx.com/202506/24/67a0394f5bb3a8ac13ef46d894d578c3.png', // 左上默认
+    activeImg: 'https://images.health.ufutx.com/202506/24/e1e7d82816b2b86deeb4d17071b95aca.png' // 左上高亮
   },
   {
     title: '智能健康监测',
-    desc: '利用可穿戴设备实时收集居民的健康数据，如心率、血压、血糖等。通过大数据分析，对居民的健康状况进行动态监测和风险评估。'
+    desc: '利用可穿戴设备实时收集居民的健康数据，如心率、血压、血糖等。通过大数据分析，对居民的健康状况进行动态监测和风险评估。',
+    defaultImg: 'https://images.health.ufutx.com/202506/24/eb79c8579db7312346b80ddd7a6c5822.png', // 右上默认
+    activeImg: 'https://images.health.ufutx.com/202506/24/5301fea3c74be8a7567eddde2ee0ead8.png' // 右上高亮
   },
   {
-    title: '医疗资源整合',
+    title: '医疗资源整合', // 默认选中（索引2）
-    desc: '连接社区卫生服务中心、乡镇卫生院、诊所等基层医疗机构，为居民提供便捷的医疗服务。实现远程健康管理的执行，提高医疗服务的可达性和效率。'
+    desc: '连接社区卫生服务中心、乡镇卫生院、诊所等基层医疗机构，为居民提供便捷的医疗服务。实现远程健康管理的执行，提高医疗服务的可达性和效率。',
+    defaultImg: 'https://images.health.ufutx.com/202506/24/0e9e555476da9d7efc74da331b648f12.png', // 左下默认
+    activeImg: 'https://images.health.ufutx.com/202506/24/39b8854b191383d3d57f25e5bf0e1d75.png' // 左下高亮
   },
   {
     title: '健康教育与促进',
-    desc: '通过社区活动、线上平台等方式，普及健康知识，提高居民的健康意识。健康人才培育场景，协同培训AI+大健康领域新型人才，解决地区人才就业问题'
+    desc: '通过社区活动、线上平台等方式，普及健康知识，提高居民的健康意识。健康人才培育场景，协同培训AI＋大健康领域新型人才，解决地区人才就业问题',
+    defaultImg: 'https://images.health.ufutx.com/202506/24/94754978db12bfa48602d8165c148207.png', // 右下默认
+    activeImg: 'https://images.health.ufutx.com/202506/24/4ca742d3f217da81edd59043d384d7d1.png' // 右下高亮
   }
 ]
 
-const highlightedSector = ref(3)
+const highlightedSector = ref(-1)
+const isDefaultActive = ref(true)
 
+// 初始化默认选中第三个扇形
+onMounted(() => {
+  highlightedSector.value = 2
+})
+
+// 动态切换图片
+const getSectorImage = computed(() => (index: number) => {
+  const isActive = highlightedSector.value === index || (isDefaultActive.value && index === 2)
+
+  return isActive ? sections[index].activeImg : sections[index].defaultImg
+})
+
+// 交互逻辑
 const highlightSector = (index: number) => {
   highlightedSector.value = index
+  isDefaultActive.value = false
 }
 
 const resetHighlight = () => {
   highlightedSector.value = -1
+  isDefaultActive.value = true
 }
 </script>
 
@@ -76,9 +93,9 @@ const resetHighlight = () => {
 .health-management {
   position: relative;
   padding: 0px 192px;
-  //max-width: 1200px;
   margin: 0 auto;
 
+  /* 卡片布局：完全保留原有样式 */
   .health-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -87,7 +104,6 @@ const resetHighlight = () => {
     z-index: 1;
 
     .health-item {
-      //width: 762px;
       padding: 100px 50px;
       background: #f6f8fe;
       text-align: left;
@@ -100,17 +116,19 @@ const resetHighlight = () => {
       }
       &:nth-child(2) {
         border-top-right-radius: 8px;
+        justify-items: end;
       }
       &:nth-child(3) {
         border-bottom-left-radius: 8px;
       }
       &:nth-child(4) {
         border-bottom-right-radius: 8px;
+        justify-items: end;
       }
 
       &:hover {
         background: #e6ebf8;
-        transform: translateY(-5px);
+        transform: translateY(-5px) translateZ(0);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
       }
 
@@ -123,51 +141,64 @@ const resetHighlight = () => {
 
       .item-desc {
         font-size: 20px;
+        width: 500px;
         color: @text-color-secondary;
         line-height: 34px;
       }
     }
   }
 
-  .sector-svg-container {
+  /* 扇形图片容器：仅替换渲染方式，保留定位逻辑 */
+  .sector-img-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 468px;
+    width: 380px;
-    height: 468px;
+    height: 380px;
-    z-index: 9;
+    z-index: 9; /* 与原SVG层级一致，不遮挡卡片 */
   }
 
-  .sector-svg {
+  /* 扇形图片：四象限定位，尺寸适配 */
-    width: 100%;
+  .sector-img {
-    height: 100%;
+    position: absolute;
+    width: 185px;
+    height: 185px;
+    object-fit: contain; /* 保证设计图比例 */
+    transition: all 0.3s ease; /* 与卡片动画速度同步 */
   }
 
-  .sector {
+  /* 左上（索引0） */
-    fill: #cde2ff;
+  .sector-img--0 {
-    stroke: none;
+    top: 0;
-    //stroke-width: 10;
+    left: 0;
-    transition: all 0.3s ease;
+  }
-  }
+  /* 右上（索引1） */
-
+  .sector-img--1 {
-  .sector.active {
+    top: 0;
-    fill: url(#sectorGradient);
+    right: 0;
-    transform: scale(1.05);
+  }
-    filter: drop-shadow(0 0 10px rgba(30, 109, 216, 0.5));
+  /* 左下（索引2，默认高亮） */
+  .sector-img--2 {
+    bottom: 0;
+    left: 0;
+  }
+  /* 右下（索引3） */
+  .sector-img--3 {
+    bottom: 0;
+    right: 0;
   }
 
+  /* 响应式：完全继承原有规则 */
   @media (max-width: 768px) {
     .health-grid {
       grid-template-columns: 1fr;
       gap: 20px;
-
       .health-item {
         border-radius: 8px !important;
       }
     }
-
+    .sector-img-container {
-    .sector-svg-container {
       display: none;
     }
   }

src/views/Network/sections/AppPromotion.vue

@@ -2,7 +2,7 @@
   <section class="app-promotion">
     <div class="section-bg">
       <h2 class="section-title">提供专属健康服务和服务方案</h2>
-      <el-button type="primary" class="consult-btn" @click="openReport"> 领取您的AI健康解决方案 </el-button>
+      <el-button type="primary" class="btn-glow consult-btn" @click="openReport"> 领取您的AI健康解决方案 </el-button>
     </div>
     <div class="app-download">
       <div class="app-item">
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { ElButton } from 'element-plus'
+// 18 import { ElButton } from 'element-plus'
 import { openExternalLink } from '@/utils/navigation.ts' // 确保按需导入
 
 // 外部链接跳转（新标签）
@@ -34,6 +34,40 @@ const openReport = () => {
 </script>
 
 <style scoped lang="less">
+.btn-glow {
+  padding: 12px 24px;
+  border: none;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.4s,
+    box-shadow 0.4s;
+}
+
+.btn-glow:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 20px #9dbbf5;
+}
+
+.btn-glow::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  transition: 0.5s;
+}
+
+.btn-glow:hover::before {
+  left: 100%;
+}
+
 .app-promotion {
   text-align: center;
 }

src/views/Network/sections/UseCases.vue

@@ -1,13 +1,18 @@
 <template>
   <section class="scene-section">
-    <!--    <h2 class="scene-title">一站式解决身心健康问题</h2>-->
-    <!--    <p class="scene-subtitle">以数据驱动，从根源改善，助力实现可持续的健康提升</p>-->
     <div class="scene-list">
-      <div v-for="(item, index) in sceneList" :key="index" class="scene-item">
+      <div
+        v-for="(item, index) in sceneList"
+        :key="index"
+        class="scene-item"
+        :class="{ active: activeIndex === index }"
+        @mouseenter="handleMouseEnter(index)"
+        @mouseleave="handleMouseLeave()"
+      >
         <div class="scene-inner">
           <img :src="item.icon" alt="场景图标" class="scene-icon" />
           <p class="scene-name" v-html="item.name"></p>
-          <p class="scene-desc">{{ item.desc }}</p>
+          <p v-if="activeIndex === index" class="scene-desc">{{ item.desc }}</p>
         </div>
       </div>
     </div>
@@ -15,26 +20,28 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
 const sceneList = [
   {
     name: '健康评估<br/>多维度健康评估',
     desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
-    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png' // 替换为实际图标
+    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
   },
   {
     name: '健康方案<br/>全方位的精准健康方案',
     desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
-    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
+    icon: 'https://images.health.ufutx.com/202506/24/503809312df23d43973da63b6e9bf24b.png'
   },
   {
     name: '健康数据<br/>AI健康数据洞察',
     desc: '基于生理+心理双指标模型，结合AI多维度模型分析，为组织和个人提供科学精准的健康解决方案。',
-    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
+    icon: 'https://images.health.ufutx.com/202506/24/29193b790b1c94ac0b83ea3ac72d10f9.png'
   },
   {
     name: '健康服务团队<br/>双重认证教练团队',
     desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
-    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
+    icon: 'https://images.health.ufutx.com/202506/24/503809312df23d43973da63b6e9bf24b.png'
   },
   {
     name: '健康监测<br/>实时动态健康监测',
@@ -42,30 +49,29 @@ const sceneList = [
     icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
   }
 ]
+
+const activeIndex = ref(2) // 默认为第三个场景（索引2）
+
+const handleMouseEnter = (index: number) => {
+  activeIndex.value = index
+}
+
+const handleMouseLeave = () => {
+  activeIndex.value = 2 // 鼠标离开后回到第三个场景
+}
+
+onMounted(() => {
+  // 确保DOM加载后激活第三个场景
+  activeIndex.value = 2
+})
 </script>
 
 <style scoped lang="less">
-@import '@/styles/global.less';
-
 .scene-section {
   text-align: center;
   background-color: #f5f7fe;
-  .py(130px);
+  .pt(80+42px);
-
+  .pb(80-42px);
-  .scene-title {
-    font-size: @font-size-xxl;
-    font-weight: @font-weight-bold;
-    color: @text-color;
-    .pb(20px);
-    .pt(40px);
-  }
-
-  .scene-subtitle {
-    font-size: @font-size-md;
-    color: @text-color-secondary;
-    max-width: 600px;
-    margin: 0 auto 80px;
-  }
 
   .scene-list {
     display: grid;
@@ -80,35 +86,38 @@ const sceneList = [
     perspective: 1000px;
     cursor: pointer;
     width: 100%;
+    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); // 增加容器过渡
+
     .scene-inner {
       position: relative;
       width: 100%;
-      height: 100%;
       .pt(20px);
       .pb(30px);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      background: #ffffff;
+      background: #fff;
-      border-radius: @border-radius-lg;
+      border-radius: 10px;
-      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); // 延长动画时间
-      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+      will-change: transform, box-shadow, opacity;
 
       .scene-icon {
         width: 291px;
-        height: 219px;
+        height: 218px;
-        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); // 图标动画
+        transform-origin: center;
+        opacity: 0.9; // 默认降低不透明度
       }
 
       .scene-name {
         font-size: @font-size-lg;
         font-weight: bold;
-        color: @text-color-secondary;
+        color: @text-color;
         text-align: center;
-        //background: pink;
         .mt(10px);
-        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+        line-height: 30px;
+        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); // 文字动画
       }
 
       .scene-desc {
@@ -119,48 +128,52 @@ const sceneList = [
         max-height: 0;
         opacity: 0;
         .px(20px);
-        margin-top: 10px;
+        .mt(10px);
         overflow: hidden;
-        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); // 描述动画
       }
     }
 
-    &:hover .scene-inner {
+    &.active .scene-inner {
-      transform: translateY(-15px) scale(1.05);
+      transform: translateY(-42px);
-      box-shadow: 0 15px 35px rgba(50, 120, 255, 0.15);
+      border-radius: 10px;
-      //background: linear-gradient(180deg, #ffffff 0%, #e6f0ff 100%);
+      background: #fff;
+      box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.08);
+      //box-shadow: 0 20px 40px rgba(22, 93, 255, 0.15); // 增强阴影
+      //background: linear-gradient(180deg, #ffffff 0%, #f8fafe 100%); // 轻微渐变背景
     }
 
-    &:hover .scene-icon {
+    &.active .scene-icon {
-      //transform: scale(1.15);
+      opacity: 1; // 激活时恢复完全不透明
-      //margin-bottom: 10px;
+      //transform: scale(1.05); // 轻微放大图标
     }
 
-    &:hover .scene-name {
+    &.active .scene-name {
-      color: @primary-color;
+      //color: @primary-color; // 激活时文字变色
+      transform: translateY(-5px); // 文字轻微上移
     }
 
-    &:hover .scene-desc {
+    &.active .scene-desc {
       max-height: 120px;
       opacity: 1;
+      transform: translateY(-5px); // 描述文字上移
     }
   }
-}
 
-@media (max-width: @tablet-breakpoint) {
+  @media (max-width: @tablet-breakpoint) {
-  .scene-list {
+    .scene-list {
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: @space-lg;
+      gap: @space-lg;
+    }
+    .scene-item {
+      height: 280px;
+    }
   }
 
-  .scene-item {
+  @media (max-width: @mobile-breakpoint) {
-    height: 280px;
+    .scene-list {
-  }
+      grid-template-columns: 1fr;
-}
+    }
-
-@media (max-width: @mobile-breakpoint) {
-  .scene-list {
-    grid-template-columns: 1fr;
   }
 }
 </style>