feat: 1440分辨率图审审批管理弹窗样式调整

src/views/worksheet/modal/ApprovalModal.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref, toRefs } from "vue";
+import { nextTick, onDeactivated, onMounted, reactive, ref, toRefs } from "vue";
 import { format } from "date-fns";
 import { NButton, NDataTable, useDialog, useMessage } from "naive-ui";
 import { aiApprovaltools, aiApprovaltoolsClearmark, setTF } from "@/api/work/work";
@@ -40,8 +40,6 @@ async function getDetail(id) {
     state.detail = res.data;
     show.value = true;
   }
-
-  console.log(res, "getDetail");
 }
 
 const handleReject = async () => {
@@ -94,8 +92,24 @@ async function getShowStatus() {
     show.value = true;
   }
 }
+
+const initRem = () => {
+  const designWidth = 1440;
+  const rempPx = 16;
+  const scale = window.innerWidth / designWidth;
+  document.documentElement.style.fontSize = scale * rempPx + "px";
+};
 onMounted(() => {
   getShowStatus();
+  nextTick(() => {
+    initRem();
+  });
+  window.addEventListener("resize", () => {
+    initRem();
+  });
+});
+onDeactivated(() => {
+  window.removeEventListener("resize", () => {});
 });
 
 defineExpose({
@@ -134,10 +148,11 @@ defineExpose({
           </div>
         </div>
         <div class="mark_text">
-          智能提示：{{detail?.similarComplete}} 张图片相似度为100%重复图片，{{detail?.passCount}}张审批状态为<span
-            style="color: #02c984"
-            >通过</span
-          >，剩余{{detail?.pendingApprovaCount}}张图片建议审批为不通过！
+          智能提示：{{ detail?.similarComplete }} 张图片相似度为100%重复图片，{{
+            detail?.passCount
+          }}张审批状态为<span style="color: #02c984">通过</span>，剩余{{
+            detail?.pendingApprovaCount
+          }}张图片建议审批为不通过！
         </div>
         <div class="footer" @click="handleReject">
           立即审批
@@ -166,8 +181,10 @@ defineExpose({
   background-image: url(../../../assets/images/approval_modal_bg.png);
   background-repeat: no-repeat;
   background-size: 100%;
-  width: 700px;
-  height: 500px;
+  // width: 700px;
+  // height: 500px;
+  width: 510px;
+  height: 361px;
   box-shadow: none !important;
 }
 .wrapper {
@@ -179,41 +196,40 @@ defineExpose({
     left: 90%;
   }
   .wrapper-hearder {
-    margin-top: 40px;
+    margin-top: 20px;
     .wrapper-title {
       text-align: center;
       font-size: 16px;
       font-family: PingFang SC, PingFang SC-Semibold;
-      font-weight: Semibold;
+      font-weight: 600;
       text-align: center;
       color: #333333;
-      line-height: 32px;
+      line-height: 22px;
     }
     .wrapper-mark {
-      text-align: center;
       font-size: 13px;
       font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
-      font-weight: Regular;
+      font-weight: 400;
       text-align: center;
       color: #666666;
       line-height: 18px;
+      margin-top: 8px;
     }
   }
   .wrapper-content {
     flex: 1;
     border-radius: 8px;
-    margin: 70px 60px 35px 120px;
+    margin: 24px 50px 16px 48px;
     .item {
       display: flex;
       flex-flow: row nowrap;
       align-items: center;
-      margin: 20px 0;
     }
 
     .imgwrapper {
-      width: 200px;
-      height: 120px;
-      margin-right: 20px;
+      width: 138px;
+      height: 80px;
+      margin-right: 23px;
       border-radius: 8px;
       background-image: url("../../../assets/images/test.png");
       background-repeat: no-repeat;
@@ -232,6 +248,7 @@ defineExpose({
         display: flex;
         flex-flow: row nowrap;
         margin: 8px 0;
+
         .tag_item {
           background: rgba(80, 122, 253, 0.1);
           border-radius: 2px;
@@ -255,6 +272,7 @@ defineExpose({
         text-align: left;
         color: #333333;
         line-height: 20px;
+        white-space: nowrap;
       }
     }
     .mark_text {
@@ -264,6 +282,7 @@ defineExpose({
       text-align: left;
       color: #666666;
       line-height: 16px;
+      margin-top: 16px;
     }
     .footer {
       cursor: pointer;
@@ -271,7 +290,7 @@ defineExpose({
       flex-flow: row nowrap;
       align-items: center;
       justify-content: center;
-      margin: 20px auto 0;
+      margin: 16px auto 0;
       width: 132px;
       height: 40px;
       background: linear-gradient(135deg, #3258e8, #786efc);
@@ -284,6 +303,7 @@ defineExpose({
       text-align: left;
       color: #ffffff;
       line-height: 26px;
+      font-style: italic;
     }
   }
 }