feat: convert px to vw in inline styles

Author: cwandev

src/components/Container.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import vw from '@/utils/inline-px-to-vw'
+
 defineProps({
   paddingT: {
     type: Number,
@@ -14,7 +16,7 @@ defineProps({
 <template>
   <main
     class="absolute left-0 h-full w-full overflow-y-auto"
-    :style="`padding-top: ${paddingT}px; padding-left: ${paddingX}px; padding-right: ${paddingX}px`"
+    :style="`padding-top: ${vw(paddingT)}; padding-left: ${vw(paddingX)}; padding-right: ${vw(paddingX)}`"
   >
     <slot />
   </main>

src/utils/inline-px-to-vw.ts

@@ -0,0 +1,15 @@
+import { round } from 'lodash-es'
+
+// 设计稿的宽度
+const width = 375
+
+/**
+ * vw 转换
+ * @param {number} n
+ */
+export default function vw(n: number) {
+  if (n === 0)
+    return n
+  const vwN = round(n * 100 / width, 3)
+  return `${vwN}vw`
+}