refactor(healthily): 优化健康模块卡片展示效果

- 更新卡片样式，增加悬浮效果
- 调整卡片布局，优化标题和内容样式
- 更新背景图片路径

src/views/healthily/comp/chooseList.vue

@@ -7,14 +7,25 @@
       <!--          选中的列表-->
       <div class="selection-list flex mt30" :class="{ showOpacity: chooseIndex > -1 }">
         <template v-if="chooseIndex > -1">
-          <div class="selection-item" v-for="(li, i) in list[chooseIndex].lists" :key="i">
+          <div class="selection-item " v-for="(li, i) in list[chooseIndex].lists" :key="i" style="height: auto">
             <img :src="li.backImg" alt="" />
-            <div class="p20  ">
-              <div class="title-body flex ">
+
+            <!--            &lt;!&ndash;            用于展位&ndash;&gt;-->
+            <!--            <div class="p20 relative placeholder" style="z-index: -1">-->
+            <!--              <div class="title-body flex ">-->
+            <!--                <img :src="li.icon ? li.icon : icon" alt="" width="29px" />-->
+            <!--                <h3>{{ li.title }}</h3>-->
+            <!--              </div>-->
+            <!--              <div class="content-body mt10">-->
+            <!--                <p>{{ li.content }}</p>-->
+            <!--              </div>-->
+            <!--            </div>-->
+            <div class="p20  hoverBack ">
+              <div class="title-body flex " style="height: auto;">
                 <img :src="li.icon ? li.icon : icon" alt="" width="29px" />
                 <h3>{{ li.title }}</h3>
               </div>
-              <div class="content-body mt10">
+              <div class="content-body mt10" style="height: auto;top: 180px">
                 <p>{{ li.content }}</p>
               </div>
             </div>
@@ -103,12 +114,35 @@ export default {
       border-radius: 15px;
       width: calc(25% - 15px);
       transition: all 0.3s ease-in-out;
+      //min-height: 300px;
+      &:hover {
+        .hoverBack {
+          //top: 150px;
+          transform: translateY(-20px);
+        }
+        //gpu
+      }
+      .placeholder {
+        visibility: hidden;
+        height: auto;
+      }
       &:nth-child(4n + 1) {
         margin-left: 7.5px;
       }
       img {
         width: 288px;
       }
+
+      .hoverBack {
+        width: 100%;
+        height: auto;
+        background: #fff;
+        border-radius: 15px;
+        //position: relative;
+        will-change: transform; // 提前通知浏览器优化
+        //top: 180px;
+      }
+
       .title-body {
         gap: 10px;
         img {
@@ -130,18 +164,19 @@ export default {
           font-family: PingFangSC, PingFang SC;
           font-weight: 400;
           font-size: 14px;
-          color: #000000;
+
+          color: rgba(0, 0, 0, 0.7) !important;
           line-height: 22px;
           text-align: left;
           font-style: normal;
 
           //  文本超过四行胜率号
-          display: -webkit-box; /* 旧版弹性盒子模型 */
-          -webkit-box-orient: vertical; /* 内容垂直排列 */
-          -webkit-line-clamp: 3; /* 限制显示的行数 */
-          overflow: hidden; /* 隐藏溢出内容 */
-          text-overflow: ellipsis; /* 超出部分显示省略号 */
-          line-clamp: 3; /* 标准属性（部分浏览器支持） */
+          //display: -webkit-box; /* 旧版弹性盒子模型 */
+          //-webkit-box-orient: vertical; /* 内容垂直排列 */
+          //-webkit-line-clamp: 3; /* 限制显示的行数 */
+          //overflow: hidden; /* 隐藏溢出内容 */
+          //text-overflow: ellipsis; /* 超出部分显示省略号 */
+          //line-clamp: 3; /* 标准属性（部分浏览器支持） */
         }
       }
     }

src/views/healthily/healthily_list.js

@@ -6,25 +6,25 @@ export default [
         icon: require('@/assets/images/pages/healthily/icon.png'),
         content:
           '通过专业评测与风险评估，生成清晰直观的健康报告，为您定制个性化健康管理方案，预防潜在疾病风险。通过专业评测与风险评估，生成清晰直观的健康报告，为您定制个性化健康管理方案，预防潜在疾病风险。',
-        backImg: require('@/assets/images/pages/healthily/121201.png'),
+        backImg: require('@/assets/images/pages/healthily/1.png'),
         title: '健康评测'
       },
       {
         icon: '',
         content: '拥有三甲医院医师、门诊专家组成的健康顾问团，提供一对一健康指导，解答健康疑问，助您科学规划生活方式。',
-        backImg: require('@/assets/images/pages/healthily/121202.png'),
+        backImg: require('@/assets/images/pages/healthily/2.png'),
         title: '健康咨询'
       },
       {
         icon: '',
         content: '7×24小时在线视频问诊，无需排队挂号，足不出户解决健康疑问。',
-        backImg: require('@/assets/images/pages/healthily/121203.png'),
+        backImg: require('@/assets/images/pages/healthily/3.png'),
         title: '视频医生'
       },
       {
         icon: '',
         content: '采用先进生物技术存储免疫细胞或干细胞，为未来健康保障预留宝贵生物资源，以达到增强机体免疫力，治疗免疫缺陷性疾病或恢复受损的免疫系统的目的。\n',
-        backImg: require('@/assets/images/pages/healthily/121204.png'),
+        backImg: require('@/assets/images/pages/healthily/4.png'),
         title: '细胞存储'
       }
     ]
@@ -35,25 +35,25 @@ export default [
       {
         icon: require('@/assets/images/pages/healthily/icon.png'),
         content: '专业体检机构为客户定制化体检套餐，生成清晰直观的健康报告，全方位评估健康状况，精准发现潜在风险。',
-        backImg: require('@/assets/images/pages/healthily/121201.png'),
+        backImg: require('@/assets/images/pages/healthily/1.png'),
         title: '体检服务'
       },
       {
         icon: '',
         content: '通过DNA检测技术，分析个体的遗传信息，评估疾病易感风险或携带致病基因的情况，为疾病预防和健康管理提供科学依据。',
-        backImg: require('@/assets/images/pages/healthily/121202.png'),
+        backImg: require('@/assets/images/pages/healthily/2.png'),
         title: '基因筛查'
       },
       {
         icon: '',
         content: '通过高灵敏肿瘤早筛检查，对早期癌症进行预警，量化评估预后情况，帮助客户构建早期癌症预防和预后监测体系。\n',
-        backImg: require('@/assets/images/pages/healthily/121203.png'),
+        backImg: require('@/assets/images/pages/healthily/3.png'),
         title: '高端监测'
       },
       {
         icon: '',
         content: '针对心脑血管等高风险疾病，开展动态追踪监测，实现异常指标及时预警。\n',
-        backImg: require('@/assets/images/pages/healthily/121204.png'),
+        backImg: require('@/assets/images/pages/healthily/4.png'),
         title: '专项监测'
       }
     ]
@@ -64,32 +64,32 @@ export default [
       {
         icon: require('@/assets/images/pages/healthily/icon.png'),
         content: '通过线上预约或电话预约，客户可自主选择全国千余家医院和科室，轻松完成预约挂号，告别排队困扰，实现轻松就医。',
-        backImg: require('@/assets/images/pages/healthily/121201.png'),
+        backImg: require('@/assets/images/pages/healthily/9.png'),
         title: '预约挂号'
       },
       {
         icon: '',
         content: '覆盖全国30个省级行政区，140余座大中型城市，近2000家三甲医院，为客户提供门诊预约、陪诊、住院加急等服务。\n',
-        backImg: require('@/assets/images/pages/healthily/121202.png'),
+        backImg: require('@/assets/images/pages/healthily/10.png'),
         title: '就诊绿通'
       },
       {
         icon: '',
         content: '整合多学科资深权威专家团队，针对肿瘤、肾衰、心衰等复杂病例进行联合诊疗，制定个性化精准治疗方案，提升治疗效果。\n',
-        backImg: require('@/assets/images/pages/healthily/121203.png'),
+        backImg: require('@/assets/images/pages/healthily/11.png'),
         title: 'MDT多学科会诊'
       },
       {
         icon: '',
         content: '24小时响应全国医疗转运需求，提供救护车、航空救援等全方位支持，保障危急患者快速抵达医院。\n',
-        backImg: require('@/assets/images/pages/healthily/121204.png'),
+        backImg: require('@/assets/images/pages/healthily/12.png'),
         title: '国内救援'
       },
       {
         icon: '',
         content:
-          '为客户打造全球高端救援服务计划，全球范围内共有40+救援中心，75万+认证服务合作商，确保客户在履行或需要帮助时得到医疗及救援服务方面的综合服务。\n',
-        backImg: require('@/assets/images/pages/healthily/121204.png'),
+          '为客户打造全球高端救援服务计划，全球范围内共有40+救援中心，75万+认证服务合作商，确保客户在履行或需要帮助时得到医疗及救援服务方面的综合服务。\n',
+        backImg: require('@/assets/images/pages/healthily/13.png'),
         title: '全球救援'
       }
     ]
@@ -100,32 +100,32 @@ export default [
       {
         icon: require('@/assets/images/pages/healthily/icon.png'),
         content: '快速协调全国三甲医院优质床位资源，优先安排住院治疗，确保患者及时获得专业医疗服务，缓解就医难题。\n',
-        backImg: require('@/assets/images/pages/healthily/121201.png'),
+        backImg: require('@/assets/images/pages/healthily/14.png'),
         title: '指定医院住院安排'
       },
       {
         icon: '',
         content: '对接国内先进肿瘤治疗机构，高效预约质子重离子放疗，精准靶向癌细胞，提升癌症治疗效果，减少副作用。\n',
-        backImg: require('@/assets/images/pages/healthily/121202.png'),
+        backImg: require('@/assets/images/pages/healthily/15.png'),
         title: '质子重离子预约治疗'
       },
       {
         icon: '',
         content:
           '联合权威专科医院及顶尖专家团队，提供缺血性脑卒中、阿尔茨海默症干预、Ⅱ型糖尿病、肺癌、乳腺癌等疑难病等特色诊疗服务，制定个性化精准治疗方案。\n',
-        backImg: require('@/assets/images/pages/healthily/121203.png'),
+        backImg: require('@/assets/images/pages/healthily/16.png'),
         title: '特色专科诊疗'
       },
       {
         icon: '',
         content: '提供海外远程会诊服务，并可在在获得第一诊疗意见的基础上，与客户协同制定海外权威医疗机构就医方案。\n',
-        backImg: require('@/assets/images/pages/healthily/121204.png'),
+        backImg: require('@/assets/images/pages/healthily/17.png'),
         title: '海外医疗服务'
       },
       {
         icon: '',
         content: '突破DRG控费限制，为客户提供原研药、特药械和医学新技术的选择。\n',
-        backImg: require('@/assets/images/pages/healthily/121204.png'),
+        backImg: require('@/assets/images/pages/healthily/18.png'),
         title: '特药器械'
       }
     ]
@@ -136,20 +136,20 @@ export default [
       {
         icon: require('@/assets/images/pages/healthily/icon.png'),
         content: '通过建立动态健康档案、分析采集患者关键指标、评估健康风险、管理营养饮食、医患远程互动、会诊转诊等，实现慢病患者全流程数据跟踪和管理。\n',
-        backImg: require('@/assets/images/pages/healthily/121201.png'),
+        backImg: require('@/assets/images/pages/healthily/19.png'),
         title: '慢病管理'
       },
       {
         icon: '',
         content:
           '联合专业康复机构，由专业评估师评估，进行重疾术后康复管理，术后护理、心理疏导、指导用药、生活指导、陪护人宣教等服务；使客户从社会、营养、心理、环境、运动等多个角度得到全面的健康维护和保障服务。\n',
-        backImg: require('@/assets/images/pages/healthily/121202.png'),
+        backImg: require('@/assets/images/pages/healthily/20.png'),
         title: '康养护理'
       },
       {
         icon: '',
         content: '由资深康复医师团队定制运动训练、疼痛管理方案，通过远程指导+线下随访提升康复质量。\n',
-        backImg: require('@/assets/images/pages/healthily/121203.png'),
+        backImg: require('@/assets/images/pages/healthily/21.png'),
         title: '康复咨询'
       }
     ]

src/views/life-enrichment/life-enrichment-list.js

@@ -21,17 +21,17 @@ export default [
     lists: [
       {
         content: '为客户定制专属旅行方案，倾力打造全国精品旅游，自由行/跟团游随心选，让每次出发都充满惊喜。\n',
-        backImg: require('@/assets/images/pages/healthily/121201.png'),
+        backImg: require('@/assets/images/pages/healthily/1.png'),
         title: '随心游\n\n'
       },
       {
         content: '专业摄影团队打造，涵盖个人写真、亲子跟拍等场景，捕捉自然动人瞬间，定格您的专属高光时刻。\n',
-        backImg: require('@/assets/images/pages/healthily/121201.png'),
+        backImg: require('@/assets/images/pages/healthily/1.png'),
         title: '美丽拍\n'
       },
       {
         content: '精选私厨美食、主题娱乐与定制团建方案，一站式解决聚会需求，无论是商务宴请还是朋友欢聚，轻松打造难忘时光。\n',
-        backImg: require('@/assets/images/pages/healthily/121201.png'),
+        backImg: require('@/assets/images/pages/healthily/1.png'),
         title: '欢乐聚'
       }
     ]
@@ -42,25 +42,25 @@ export default [
       {
         icon: require('@/assets/images/pages/healthily/icon.png'),
         content: '专属通道、舒适候机、精致茶歇，让您的旅途从出发开始就享受VIP级的尊贵礼遇与贴心服务。\n',
-        backImg: require('@/assets/images/pages/healthily/121201.png'),
+        backImg: require('@/assets/images/pages/healthily/1.png'),
         title: '机场/高铁贵宾厅 \n'
       },
       {
         icon: '',
         content: '深度结合节气文化，打造端午手作、中秋赏月等沉浸式体验，让传统节日焕发新意与仪式感。\n',
-        backImg: require('@/assets/images/pages/healthily/121202.png'),
+        backImg: require('@/assets/images/pages/healthily/2.png'),
         title: '传统节日专场活动\n'
       },
       {
         icon: '',
         content: '专业宠物保姆提供上门喂养、遛狗等服务，配备实时视频反馈，让爱宠得到温暖照护，您出行更安心。\n',
-        backImg: require('@/assets/images/pages/healthily/121203.png'),
+        backImg: require('@/assets/images/pages/healthily/3.png'),
         title: '宠物托管\n'
       },
       {
         icon: '',
         content: '结合客户所在地区，提供属地化的生活服务，让服务更落地、更贴心。\n',
-        backImg: require('@/assets/images/pages/healthily/121204.png'),
+        backImg: require('@/assets/images/pages/healthily/4.png'),
         title: '地方特色服务\n'
       }
     ]