feat: 增加自动伸展适配多个显示分辨率

package.json

@@ -15,6 +15,7 @@
     "@types/crypto-js": "^4.2.2",
     "@types/node": "^22.10.1",
     "@unocss/reset": "^66.1.1",
+    "autofit.js": "^3.2.8",
     "axios": "^1.7.9",
     "crypto-js": "^4.2.0",
     "echarts": "^5.6.0",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@unocss/reset':
         specifier: ^66.1.1
         version: 66.1.1
+      autofit.js:
+        specifier: ^3.2.8
+        version: 3.2.8
       axios:
         specifier: ^1.7.9
         version: 1.7.9
@@ -876,6 +879,9 @@ packages:
     engines: {node: '>= 4.5.0'}
     hasBin: true
 
+  autofit.js@3.2.8:
+    resolution: {integrity: sha512-albZNwDIXvcRneEDyZLW3uAIOH0cUQG/TnCGQ7jpfnL0gPn/+1ZNVRuEz3ZuzZvVkQ4HQRplGHjUeMRtPNxjLQ==}
+
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -3382,6 +3388,8 @@ snapshots:
 
   atob@2.1.2: {}
 
+  autofit.js@3.2.8: {}
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.0.0

src/views/components/ChargingRanking.vue

@@ -2,13 +2,13 @@
   <div class="h-[320px] relative bg-[#082059] custom-border">
     <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
-      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
         <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
         <div class="text-color text-[20px] ml-[9px] font-700" data-text="收费排行榜">收费排行榜</div>
       </div>
+      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
     </div>
-    <div class="w-[296px] h-[calc(100%-36px)] flex flex-col">
+    <div class="w-full h-[calc(100%-36px)] flex flex-col">
       <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0" @click="show = true">
         <div class="text-[15px] text-[#84E8FF]">更多</div>
         <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />

src/views/components/OfflineStatus.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
+  <div class="w-full h-[320px] relative bg-[#082059] custom-border">
     <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
-      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
         <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
         <div class="text-[20px] ml-[9px] font-700 text-color" data-text="线下详情">线下详情</div>
       </div>
+      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
     </div>
     <div class="w-full h-[calc(100%-36px)] flex flex-col">
       <div class="ml-[22px] relative mt-[13px] flex items-center justify-center">
@@ -52,7 +52,6 @@
     headerRightSvg.value = svg;
   };
 
-
   const arrowLeftSvg = ref("");
   const getArrowLeftSvg = async () => {
     const { default: svg } = await import("/src/assets/svg-img/arrow-left.svg?raw");
@@ -60,18 +59,18 @@
   };
   const colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C"]);
 
-  const askSectionData = inject("askSectionData", ref<{ offline: any[],scource:any[] }>({ offline: [],scource:[] }));
+  const askSectionData = inject("askSectionData", ref<{ offline: any[]; scource: any[] }>({ offline: [], scource: [] }));
 
   const chartData = ref<any[]>([]);
 
   watch(
     () => askSectionData.value,
     () => {
-      initData()
+      initData();
     },
   );
 
-  const offlineTotal = ref<any>(0)
+  const offlineTotal = ref<any>(0);
 
   const initData = () => {
     if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
@@ -80,9 +79,9 @@
         value: item.total,
         color: colorList.value[index % colorList.value.length],
       }));
-        offlineTotal.value = askSectionData.value.scource.filter(item => item.tag==="线下")[0].total
+      offlineTotal.value = askSectionData.value.scource.filter((item) => item.tag === "线下")[0].total;
-      }
     }
+  };
 
   onBeforeMount(() => {
     getHeaderLeftSvg();

src/views/components/OnlineStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
+  <div class="w-full h-[320px] relative bg-[#082059] custom-border">
     <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">

src/views/components/SixStatistics.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
+  <div class="w-full h-[320px] relative bg-[#082059] custom-border">
     <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
-      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
         <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
         <div class="text-[20px] ml-[9px] font-700 text-color" data-text="六纬志愿">六纬志愿</div>
       </div>
+      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
     </div>
     <div class="w-full h-[calc(100%-36px)] flex flex-col">
       <!-- <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">

src/views/components/StudentSource.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="w-[296px] h-[320px] relative bg-[#082059]">
+  <div class="w-full h-[320px] relative bg-[#082059]">
     <div class="flex h-full custom-border absolute top-0 left-0">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
-      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
+      <SvgComponent :content="headerRightSvg" class="flex-auto h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
         <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
         <div class="text-color text-[20px] ml-[9px] font-700" data-text="学生来源">学生来源</div>

src/views/components/TodayPayment.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="w-max h-max relative">
       <SvgComponent :content="groupSvg" class="w-[312px] h-[210px]" />
-      <div class="w-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] pl-[14px] pr-[19px] flex items-center">
+      <div class="w-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] flex pl-[14px] pr-[19px] flex items-center">
         <div class="relative w-[144px] h-[113px] flex items-center flex-col">
           <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
           <div class="text-[#44C1EF] italic text-[20px] font-700">今日缴费</div>
@@ -10,7 +10,7 @@
             <span class="text-[18px] text-color" data-text="人">人</span>
           </div>
         </div>
-        <div class="relative ml-[12px]">
+        <div class="relative flex-auto ml-[12px]">
           <SvgComponent :content="paymentBorderSvg" class="w-[127px] h-[104px] z-1" />
           <div class="w-[127px] h-[104px] top-0 left-0 z-1 absolute pl-[14px] flex flex-col justify-center">
             <p class="text-[#C0EEFF] text-[12px]">昨日缴费人数</p>

src/views/components/WinCustomer.vue

@@ -2,13 +2,13 @@
   <div class="h-[320px] relative bg-[#082059] custom-border">
     <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
-      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
         <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
         <div class="text-color text-[20px] ml-[9px] font-700" data-text="获客排行榜">获客排行榜</div>
       </div>
+      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
     </div>
-    <div class="w-[296px] h-[calc(100%-36px)] flex flex-col">
+    <div class="w-full h-[calc(100%-36px)] flex flex-col">
       <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0" @click="show = true">
         <div class="text-[15px] text-[#84E8FF]">更多</div>
         <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />

src/views/home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-bg flex flex-col scrollbar-hide h-screen overflow-y-auto">
+  <div id="home-screen" class="main-bg flex flex-col scrollbar-hide h-screen overflow-y-auto">
     <header class="relative flex items-center">
       <SvgComponent :content="headerSvg" class="w-full h-[98px]" />
       <SvgComponent :content="titleSvg" class="w-[50%] h-[69px] absolute top-0 left-50% translate-x-[-50%]" />
@@ -17,7 +17,7 @@
       <div class="text-[#C0EEFF] text-[12px] ml-[5px]">数据更新时间:{{ formatDatetime(updateTime) }}</div>
     </div>
 
-    <div class="grid grid-rows-[210px_358px_320px] gap-y-5 w-full min-h-[928px] gap-[20px] flex-1 overflow-auto mb-[27px]">
+    <div class="grid grid-rows-[210px_358px_320px] gap-y-5 w-full min-h-[928px] gap-[20px] flex-1 overflow-auto md:overflow-hidden mb-[27px]">
       <div class="flex items-center px-[24px] justify-start">
         <PaymentTotal class="flex-1" />
         <TodayPayment class="ml-[20px] flex-1" />
@@ -48,6 +48,7 @@
   import DigitalWatch from "@/components/watch/DigitalWatch.vue";
 
   import { defineAsyncComponent } from "vue";
+  import autofit from "autofit.js";
   import { useFetchAllData } from "./composables/useFetchData";
   import { runImmediatelyAll, updateTime } from "@/composables/usePolling";
   import { formatDatetime } from "@/utils/date";
@@ -111,6 +112,8 @@
   });
 
   const router = useRouter();
+  const { isMobile } = usePlatformType();
+  let hasAutofitInit = false;
 
   const headerSvg = ref("");
   const headerBackgroundSvg = async () => {
@@ -158,12 +161,31 @@
     headerBackgroundSvg();
     headerTitleSvg();
     getUserInfo();
-    const { isMobile } = usePlatformType();
     // 跳转到首页
     if (isMobile) {
       router.push("/app");
     }
   });
+
+  onMounted(() => {
+    if (isMobile) {
+      return;
+    }
+    autofit.init({
+      el: "#home-screen",
+      dw: 1920,
+      dh: 1080,
+      resize: true,
+      allowScroll: false,
+    });
+    hasAutofitInit = true;
+  });
+
+  onBeforeUnmount(() => {
+    if (hasAutofitInit && autofit.isAutofitRunning) {
+      autofit.off("#home-screen");
+    }
+  });
 </script>
 
 <style scoped lang="scss">