fix: pxtorem

app/web/page/mixins/transformStyle.mixin.ts

 import { Component, Vue } from 'vue-property-decorator';
-import { transformStyle, getStyle } from '@/service/utils.service';
+import { transformStyle, getStyle, isPx, pxToRem } from '@/service/utils.service';
 import { Mutation } from 'vuex-class';
 
 @Component({ name: 'TransformStyleMixin' })
@@ -17,7 +17,7 @@ export default class TransformStyleMixin extends Vue {
       if ( typeof styleObj[key] === 'number') {
         style[key] = `${(styleObj[key] / 37.5).toFixed(2)}rem`;
       } else {
-        style[key] = styleObj[key]?.includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(2)}rem` : styleObj[key];
+        style[key] = isPx(styleObj[key]) ? pxToRem(styleObj[key]) : styleObj[key];
       }
       if (key === 'backgroundImage' && style.backgroundImage) {
         style.backgroundImage = `url(${style.backgroundImage})`;

app/web/service/utils.service.ts

@@ -108,6 +108,15 @@ export const validateType = function(obj) {
   return typeof obj === 'object' ? class2type[Object.prototype.toString.call(obj)] || 'object' : typeof obj;
 };
 
+export const isPx = str => /(\d+(\.\d*)?)+(px)/gi.test(str);
+export const pxToRem = (str, width = 37.5) => {
+  const reg = /(\d+(\.\d*)?)+(px)/gi; //可以匹配浮点数
+  let newStr = str.replace(reg, function (_x) {
+    _x = _x.replace(/px"/gi, '');
+    return parseFloat(parseFloat(_x) / width).toFixed(2) + 'rem';
+  });
+  return newStr;
+}
 export const transformStyle = function(styleObj = {}) {
   // console.log('transformStyle', styleObj);
   const style = {};
@@ -115,7 +124,7 @@ export const transformStyle = function(styleObj = {}) {
     if ( typeof styleObj[key] === 'number') {
       style[key] = `${(styleObj[key] / 37.5).toFixed(3)}rem`;
     } else {
-      style[key] = styleObj[key].includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(3)}rem` : styleObj[key];
+      style[key] = isPx(styleObj[key]) ? pxToRem(styleObj[key]) : styleObj[key];
     }
     if (key === 'backgroundImage' && style.backgroundImage) {
       style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;