Browse Source

样式优化

刘洋 6 months ago
parent
commit
bb7f61da9e
1 changed files with 13 additions and 12 deletions
  1. 13 12
      src/components/Abnormal.vue

+ 13 - 12
src/components/Abnormal.vue

@@ -5,22 +5,25 @@
     class="abnormal"
     class="abnormal"
   >
   >
     <div class="collapse-btn" :class="{ rotate: !show }" @click="show = !show">
     <div class="collapse-btn" :class="{ rotate: !show }" @click="show = !show">
-      <UpOutlined style="font-size: 16px" />
+      <LeftOutlined style="font-size: 26px" />
     </div>
     </div>
     <Transition
     <Transition
-      enterActiveClass="animate__animated animate__slideInDown"
-      leaveActiveClass="animate__animated animate__slideOutUp"
+      enterActiveClass="animate__animated animate__fadeInLeft"
+      leaveActiveClass="animate__animated animate__fadeOutLeft"
     >
     >
       <!-- <a-alert v-if="show" :message="result" banner /> -->
       <!-- <a-alert v-if="show" :message="result" banner /> -->
-      <div v-if="show" class="text-box">{{ result }}</div>
+      <div v-if="show" class="text-box">
+        <div>试卷整理异常信息:</div>
+        <div style="margin-left: -50px; margin-top: 10px">{{ result }}</div>
+      </div>
     </Transition>
     </Transition>
   </div>
   </div>
 </template>
 </template>
 <script name="Abnormal" lang="ts" setup>
 <script name="Abnormal" lang="ts" setup>
-import { computed, ref, watch, onMounted } from "vue";
+import { computed, ref, watch } from "vue";
 import { store } from "@/store/store";
 import { store } from "@/store/store";
 
 
-import { UpOutlined } from "@ant-design/icons-vue";
+import { LeftOutlined } from "@ant-design/icons-vue";
 
 
 const abnormalRef = ref();
 const abnormalRef = ref();
 
 
@@ -31,9 +34,7 @@ const result = computed(() => {
     collationLabelList.find(
     collationLabelList.find(
       (item: any) => item.code == store.currentTask?.collationLabelCode
       (item: any) => item.code == store.currentTask?.collationLabelCode
     )?.name || "";
     )?.name || "";
-  return `试卷整理异常信息:${
-    store.currentTask?.collationLabelCode || ""
-  } - ${name}`;
+  return `${store.currentTask?.collationLabelCode || ""} - ${name}`;
 });
 });
 watch(
 watch(
   () => store.currentTask,
   () => store.currentTask,
@@ -54,21 +55,21 @@ watch(
   //   padding-left: 30px;
   //   padding-left: 30px;
   // }
   // }
   .text-box {
   .text-box {
-    padding-left: 38px;
     background: rgba(0, 0, 0, 0.7);
     background: rgba(0, 0, 0, 0.7);
     color: #fff;
     color: #fff;
     line-height: 1.4;
     line-height: 1.4;
     height: 30vh;
     height: 30vh;
     font-size: 28px;
     font-size: 28px;
     overflow: auto;
     overflow: auto;
+    padding: 10px 0 10px 60px;
   }
   }
   .collapse-btn {
   .collapse-btn {
     position: absolute;
     position: absolute;
     left: 5px;
     left: 5px;
     top: 6px;
     top: 6px;
     z-index: 1;
     z-index: 1;
-    width: 30px;
-    height: 30px;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
     border-radius: 50%;
     background: var(--app-primary-button-bg-color);
     background: var(--app-primary-button-bg-color);
     color: #fff;
     color: #fff;