feat(utils): 添加设备检测和自适应样式工具函数

新增getDeviceInfo函数用于检测设备类型和屏幕信息
添加getAdaptiveFontSize和getAdaptivePadding函数实现样式自适应
在map.vue中应用自适应样式函数优化标记显示效果

@@ -77,4 +77,92 @@ const strExist = (array, str) => {
   return exist.length > 0
 }
 
-export { formatDate, wxInfo, hasEllipsis, parseQueryString, strExist };
+/**
+ * @description 获取设备类型和屏幕信息
+ * @returns {Object} 设备信息对象
+ */
+const getDeviceInfo = () => {
+  const userAgent = navigator.userAgent;
+  const screenWidth = window.innerWidth || document.documentElement.clientWidth;
+  const screenHeight = window.innerHeight || document.documentElement.clientHeight;
+  
+  // 检测iPad
+  const isiPad = /iPad/.test(userAgent) || 
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
+    (screenWidth >= 768 && screenWidth <= 1024);
+  
+  // 检测微信环境
+  const isWeChat = /MicroMessenger/i.test(userAgent);
+  
+  // 检测移动设备
+  const isMobile = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+  
+  // 检测平板设备（包括iPad）
+  const isTablet = isiPad || (screenWidth >= 768 && screenWidth <= 1024);
+  
+  // 检测大屏设备
+  const isLargeScreen = screenWidth >= 1024;
+  
+  return {
+    isiPad,
+    isWeChat,
+    isMobile,
+    isTablet,
+    isLargeScreen,
+    screenWidth,
+    screenHeight,
+    userAgent
+  };
+};
+
+/**
+ * @description 根据设备类型获取适配的字体大小
+ * @param {number} baseFontSize 基础字体大小（rem）
+ * @returns {string} 适配后的字体大小
+ */
+const getAdaptiveFontSize = (baseFontSize = 0.8) => {
+  const deviceInfo = getDeviceInfo();
+  
+  // 字体大小倍数配置
+  let fontSizeMultiplier = 1;
+  
+  if (deviceInfo.isWeChat && deviceInfo.isLargeScreen) {
+    // 微信小程序大屏环境
+    fontSizeMultiplier = 1.8;
+  } else if (deviceInfo.isiPad || deviceInfo.isTablet) {
+    // iPad或平板设备
+    fontSizeMultiplier = 1.5;
+  } else if (deviceInfo.isLargeScreen) {
+    // 大屏设备（桌面）
+    fontSizeMultiplier = 1.6;
+  } else if (deviceInfo.screenWidth >= 481 && deviceInfo.screenWidth <= 768) {
+    // 中等屏幕设备
+    fontSizeMultiplier = 1.2;
+  }
+  
+  const adaptedSize = baseFontSize * fontSizeMultiplier;
+  return `${adaptedSize}rem`;
+};
+
+/**
+ * @description 根据设备类型获取适配的内边距
+ * @param {string} basePadding 基础内边距
+ * @returns {string} 适配后的内边距
+ */
+const getAdaptivePadding = (basePadding = '.5rem .2rem .5rem .2rem') => {
+  const deviceInfo = getDeviceInfo();
+  
+  if (deviceInfo.isWeChat && deviceInfo.isLargeScreen) {
+    return '1rem .4rem 1rem .4rem';
+  } else if (deviceInfo.isiPad || deviceInfo.isTablet) {
+    return '.8rem .3rem .8rem .3rem';
+  } else if (deviceInfo.isLargeScreen) {
+    return '.9rem .35rem .9rem .35rem';
+  } else if (deviceInfo.screenWidth >= 481 && deviceInfo.screenWidth <= 768) {
+    return '.6rem .25rem .6rem .25rem';
+  }
+  
+  return basePadding;
+};
+
+export { formatDate, wxInfo, hasEllipsis, parseQueryString, strExist, getDeviceInfo, getAdaptiveFontSize, getAdaptivePadding };

@@ -107,7 +107,7 @@ import audioBackground1 from '@/components/audioBackground1.vue'
 import BottomNav from '@/components/BottomNav.vue'
 import { mapState, mapActions } from 'pinia'
 import { mainStore } from '@/store'
-import { parseQueryString } from '@/utils/tools'
+import { parseQueryString, getAdaptiveFontSize, getAdaptivePadding } from '@/utils/tools'
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { mapAudioAPI } from '@/api/map.js'
 
@@ -197,6 +197,82 @@ export default {
      */
     zoom() {
       return this.data_zoom;
+    },
+    /**
+     * 动态计算适配的标记样式 - 选中状态（垂直）
+     * @returns {Object} 适配后的样式对象
+     */
+    adaptiveMarkerStyle2() {
+      return {
+        "padding": getAdaptivePadding(".5rem .2rem .5rem .2rem"),
+        "border-color": "#DD7850",
+        "border-radius": ".25rem",
+        "background-color": "#FFF",
+        "font-size": getAdaptiveFontSize(0.8),
+        "color": "#DD7850",
+        "writing-mode": "vertical-rl",
+        "text-orientation": "mixed",
+        "display": "flex",
+        "justify-content": "center",
+        "align-items": "center",
+      };
+    },
+    /**
+     * 动态计算适配的标记样式 - 未选中状态（垂直）
+     * @returns {Object} 适配后的样式对象
+     */
+    adaptiveMarkerStyle1() {
+      return {
+        "padding": getAdaptivePadding(".5rem .2rem .5rem .2rem"),
+        "border-color": "#fcfbfa",
+        "border-radius": ".25rem",
+        "background-color": "#DD7850",
+        "font-size": getAdaptiveFontSize(0.8),
+        "color": "white",
+        "writing-mode": "vertical-rl",
+        "text-orientation": "mixed",
+        "display": "flex",
+        "justify-content": "center",
+        "align-items": "center",
+      };
+    },
+    /**
+     * 动态计算适配的标记样式 - 选中状态（水平）
+     * @returns {Object} 适配后的样式对象
+     */
+    adaptiveMarkerStyle2Horizontal() {
+      return {
+        "padding": getAdaptivePadding(".2rem .5rem .2rem .5rem"),
+        "border-color": "#DD7850",
+        "border-radius": ".25rem",
+        "background-color": "#FFF",
+        "font-size": getAdaptiveFontSize(0.8),
+        "color": "#DD7850",
+        "writing-mode": "horizontal",
+        "text-orientation": "mixed",
+        "display": "flex",
+        "justify-content": "center",
+        "align-items": "center",
+      };
+    },
+    /**
+     * 动态计算适配的标记样式 - 未选中状态（水平）
+     * @returns {Object} 适配后的样式对象
+     */
+    adaptiveMarkerStyle1Horizontal() {
+      return {
+        "padding": getAdaptivePadding(".2rem .5rem .2rem .5rem"),
+        "border-color": "#fcfbfa",
+        "border-radius": ".25rem",
+        "background-color": "#DD7850",
+        "font-size": getAdaptiveFontSize(0.8),
+        "color": "white",
+        "writing-mode": "horizontal",
+        "text-orientation": "mixed",
+        "display": "flex",
+        "justify-content": "center",
+        "align-items": "center",
+      };
     }
   },
   data() {
@@ -476,10 +552,10 @@ export default {
       // 根据选中状态和文字方向选择样式
       let textStyle, containerStyle;
       if (textDirection === 'vertical') {
-        textStyle = isSelected ? this.markerStyle2 : this.markerStyle1;
+        textStyle = isSelected ? this.adaptiveMarkerStyle2 : this.adaptiveMarkerStyle1;
         containerStyle = 'flex-direction: column; align-items: center;';
       } else {
-        textStyle = isSelected ? this.markerStyle2_horizontal : this.markerStyle1_horizontal;
+        textStyle = isSelected ? this.adaptiveMarkerStyle2Horizontal : this.adaptiveMarkerStyle1Horizontal;
         containerStyle = 'flex-direction: row; align-items: center;';
       }