feat(map): 优化地图组件交互和样式

- 重构了地图组件的 HTML 结构，增加了更多视觉元素
- 改进了地图组件的 CSS 样式，提升了视觉效果
- 添加了鼠标点击事件处理，增强了用户交互体验- 优化了动画效果，使用 GPU 加速提升了性能
- 更新了地图组件的数据内容，使其更加丰富和准确

src/views/app/homeComponents/map.vue

@@ -74,7 +74,18 @@
             <template #title>
               <div class="tab-title">{{ item.title }}</div>
             </template>
-            <div class="tab-content" :class="{ hideWidth: openFlag }">{{ item.content }}</div>
+            <div class="tab-content">
+              <div class="flex justify-content-b tab-box">
+                <div class="tab-content-images">
+                  <img :src="item.img" alt="" class="tab-content-img" />
+                  <img src="../../../assets/images/home/map-7-t1-ban.png" alt="" class="tab-content-img-ban" />
+                </div>
+                <div style="flex: 1">
+                  <div class="tab-content-text">{{ item.content }}</div>
+                  <button class="pointer-button mt20" style="opacity: 1" @click="cursorClick">查看详情</button>
+                </div>
+              </div>
+            </div>
           </van-tab>
         </van-tabs>
       </div>
@@ -92,7 +103,7 @@
       </div>
       <div class="cursor-desc-content" :class="{ showOpacity: cursorContent }">{{ cursorContent }}</div>
 
-      <button class="pointer-button" :class="{ showOpacity: cursorContent }">查看详情</button>
+      <button class="pointer-button mt10 ml10" :class="{ showOpacity: cursorContent }" @click="cursorClick" v-show="cursorContent">查看详情</button>
     </div>
   </div>
 </template>
@@ -130,23 +141,23 @@ export default {
       cursorList: [
         {
           key: '睿智财富',
-          title: '世代财富传承',
-          content: '从教育储备到素质培养，为孩子的每个成长关键点铺设阶梯口覆盖教育金规划、国际学校择校、兴趣特长发展等全周期需求',
+          title: '世代财富传承舱',
+          content: '通过保险金信托+税务筹划,实现资产稳健增值与跨代际传递0涵盖资产隔离、遗嘱保险箱、慈善信托等高端服务',
         },
         {
           key: '乐活人生',
           title: '乐活人生俱乐部',
-          content: '从教育储备到素质培养，为孩子的每个成长关键点铺设阶梯口覆盖教育金规划、国际学校择校、兴趣特长发展等全周期需求',
+          content: '全球机场礼遇、高端酒店折扣、私人旅行定制专属生活特权平台,让每一天都值得期待',
         },
         {
           key: '养老生活',
           title: '颐养天年无忧方案  ',
-          content: '从教育储备到素质培养，为孩子的每个成长关键点铺设阶梯口覆盖教育金规划、国际学校择校、兴趣特长发展等全周期需求',
+          content: '量身定制退休社区入住、居家适老化改造、长寿时代财富规划0实现从财务准备到生活服务的一站式养老生态',
         },
         {
           key: '臻享健康',
           title: '至臻健康守护圈',
-          content: '从教育储备到素质培养，为孩子的每个成长关键点铺设阶梯口覆盖教育金规划、国际学校择校、兴趣特长发展等全周期需求',
+          content: '整合三甲医院绿通+海外二次诊疗,让优质医疗资源触手可及0包含高端体检、家庭医生中医调理等预防式健康管理',
         },
         {
           key: '成长护航',
@@ -157,29 +168,37 @@ export default {
       list: [
         {
           title: '生态服务',
-          content: '生态服务',
+          content: '世事恒新，惟有以变御变；科技领先，方得御变之本。我们以做到最好为目标，不懈奋斗。',
+          img: require('../../../assets/images/home/r3.png'),
         },
 
         {
           title: '关于幸福',
           content: '关于幸福',
+          img: require('../../../assets/images/home/r1.png'),
         },
         {
           title: '荣誉资质',
           content: '荣誉资质',
+          img: require('../../../assets/images/home/r4.png'),
         },
         {
           title: '发展历程',
           content: '发展历程',
+          img: require('../../../assets/images/home/r2.png'),
         },
         {
           title: '联系我们',
           content: '联系我们',
+          img: require('../../../assets/images/home/r5.png'),
         },
       ],
     }
   },
   methods: {
+    cursorClick() {
+      alert('点击了')
+    },
     findCursor(value) {
       let item = this.cursorList.find((item) => item.key === value)
       console.log(item)
@@ -198,6 +217,7 @@ export default {
       this.cursorTitle = ''
       this.cursorContent = ''
       cursor.addEventListener('click', (e) => {
+        if (!this.openFlag) return false
         // 移除所有 .map 的 active 类
         document.querySelectorAll('.cursor').forEach((map) => {
           map.classList.remove('active')
@@ -227,30 +247,42 @@ export default {
 
 <style scoped lang="scss">
 .pointer-button {
-  transition: all 0.3s ease-in-out;
+  /* 启用 GPU 加速 */
+  transform: translateZ(0);
+  will-change: opacity, transform;
+
+  /* 原有样式保留 */
   outline: none;
   padding: 5px 10px;
   background: transparent;
   border-radius: 5px;
   border: 1px solid #000;
-  margin-top: 10px;
-  margin-left: 10px;
+
+  /* 动画只作用于 GPU 属性 */
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+
+  /* 初始状态：不可见 + 稍微缩放小一点 */
   opacity: 0;
+  transform: scale(0.95);
 }
+
 .relative {
   position: relative;
 }
+
 .showOpacity {
   opacity: 1 !important;
-  //display: block;
+  transform: scale(1) translateZ(0);
 }
+
 .hideOpacity {
   opacity: 0 !important;
+  transform: scale(0.95) translateZ(0);
 }
 
 .hideWidth {
   opacity: 0 !important;
-  //display: none !important;
+  transform: scale(0.9) translateZ(0);
   height: 0 !important;
   width: 0 !important;
 }
@@ -264,35 +296,51 @@ export default {
   left: 30px;
   top: -20px;
   z-index: 3;
-  //width: 150px;
-  & .cursor-pointer {
-    background: url('../../../assets/images/home/pointer.png') no-repeat 100% 100% / contain;
-    width: 46px;
-    height: 56px;
-    margin-top: -10px;
-  }
-  & .cursor-title {
-    color: red;
-    font-size: 16px;
-    font-weight: 800;
-    padding: 3px 15px;
-    background: #fff;
-    border: 2px solid red;
-    border-radius: 8px;
-  }
+  transform: scale(1) translateZ(0);
+  /* 启用 GPU 加速 */
+  will-change: opacity, transform;
 
-  &.active {
-    & .cursor-title {
-      color: white;
-      font-weight: 800;
-      background: red;
-      //外发光
-      box-shadow: 0 0 4px 3px #fff;
-    }
-    & .cursor-pointer {
-      //background: url('../../../assets/images/home/pointer2.png') no-repeat 100% 100% / contain;
-    }
-  }
+  /* 使用 transform 替代 top/left 做位移动画 */
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.cursor .cursor-pointer {
+  background: url('../../../assets/images/home/pointer.png') no-repeat 100% 100% / contain;
+  width: 46px;
+  height: 56px;
+  margin-top: -10px;
+}
+
+.cursor .cursor-title {
+  color: red;
+  font-size: 16px;
+  font-weight: 800;
+  padding: 3px 15px;
+  background: #fff;
+  border: 2px solid red;
+  border-radius: 8px;
+}
+
+/* active 状态下使用 GPU 友好的方式变化 */
+.cursor.active {
+  opacity: 1;
+  transform: translate(0, 0) translateZ(0);
+}
+
+/* 如果你想动态改变位置，建议用 JS 设置 transform 而不是 left/top */
+/* 示例：transform: translate(30px, -20px) translateZ(0); */
+
+.cursor.active .cursor-pointer {
+  /* 可选动画增强 */
+  transform: scale(1.05);
+  transition: transform 0.3s ease-in-out;
+}
+
+.cursor.active .cursor-title {
+  color: white;
+  font-weight: 800;
+  background: red;
+  box-shadow: 0 0 4px 3px #fff;
 }
 
 #map-container * {
@@ -303,8 +351,11 @@ export default {
   height: calc(796px - 48px - 67px);
   width: 100vw;
   overflow-x: hidden;
+  transform: translateZ(0);
+  will-change: transform, opacity;
   & .map-comp {
     position: absolute;
+    transform: translateZ(1px); // 触发GPU加速
     & .map-ban,
     & .map-road {
       opacity: 0;
@@ -489,10 +540,13 @@ export default {
       width: 414px;
       height: 308px;
       top: 27px;
+      z-index: -1;
       & .relative {
         & .map-6-t1-ban {
           width: 414px;
           height: 308px;
+          position: absolute;
+          z-index: 0;
         }
       }
     }
@@ -537,7 +591,7 @@ export default {
       border-radius: 12px;
       font-size: 10px;
       box-shadow: 0 0 11px 0 #9fbfe0;
-      height: 265px;
+      height: 245px;
 
       //background: #fff;
       //上下蓝白渐变
@@ -568,8 +622,47 @@ export default {
           .tab-content {
             font-size: 13px;
             line-height: 16px;
-            height: 200px;
+            height: 180px;
             padding: 10px;
+            width: auto;
+
+            & .tab-box {
+              margin-top: 30px;
+              //margin-left: 10px;
+              //margin-right: 10px;
+              & .tab-content-images {
+                position: relative;
+                width: 156px;
+                //height: 140px;
+                //margin-left: 20px;
+
+                & .tab-content-img {
+                  width: 106px;
+                  height: 107px;
+                  position: absolute;
+                  z-index: 1;
+                  left: 20px;
+                }
+                & .tab-content-img-ban {
+                  position: absolute;
+                  width: 156px;
+                  height: 127px;
+                  left: 0;
+                  top: 15px;
+                }
+              }
+              & .tab-content-text {
+                line-height: 20px;
+                //margin: 0 15px;
+                //  文本超过四行胜率号
+                display: -webkit-box; /* 旧版弹性盒子模型 */
+                -webkit-box-orient: vertical; /* 内容垂直排列 */
+                -webkit-line-clamp: 3; /* 限制显示的行数 */
+                overflow: hidden; /* 隐藏溢出内容 */
+                text-overflow: ellipsis; /* 超出部分显示省略号 */
+                line-clamp: 3; /* 标准属性（部分浏览器支持） */
+              }
+            }
           }
         }
         .van-tabs__line {
@@ -686,6 +779,8 @@ export default {
       opacity: 0;
       padding: 0 10px;
       line-height: 20px;
+      font-size: 13px;
+      //height: 100%;
       //  文本超过四行胜率号
       display: -webkit-box; /* 旧版弹性盒子模型 */
       -webkit-box-orient: vertical; /* 内容垂直排列 */

vue.config.js

@@ -67,15 +67,15 @@ module.exports = {
           return assetFilename.endsWith('.js')
         },
       })
-    // config.plugins.push(
-    //   new CompressionPlugin({
-    //     filename: '[path][base].gz',
-    //     algorithm: 'gzip',
-    //     test: /\.(js|css|html|svg)$/,
-    //     threshold: 10240,
-    //     minRatio: 0.8,
-    //     deleteOriginalAssets: false,
-    //   })
-    // )
+    config.plugins.push(
+      new CompressionPlugin({
+        filename: '[path][base].gz',
+        algorithm: 'gzip',
+        test: /\.(js|css|html|svg)$/,
+        threshold: 10240,
+        minRatio: 0.8,
+        deleteOriginalAssets: false,
+      })
+    )
   },
 }