Browse Source

style: 评测页面网络异常弹窗关闭按钮样式修改

TIANYONG 10 months ago
parent
commit
3d251bfdd8
2 changed files with 30 additions and 2 deletions
  1. 28 1
      src/view/abnormal-pop/index.module.less
  2. 2 1
      src/view/abnormal-pop/index.tsx

+ 28 - 1
src/view/abnormal-pop/index.module.less

@@ -9,12 +9,39 @@
     height: 100vh;
     overflow: hidden;
     .closeIcon {
-        position: absolute;
+        position: fixed;
         width: 20px;
         height: 20px;
+        max-width: 20px;
+        max-height: 20px;
         right: 30px;
         top: 30px;
     }
+    .closeDom {
+        position: fixed;
+        width: 20px;
+        height: 20px;
+        right: 30px;
+        top: 30px;
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 2px;
+            background-color: #ffffff;
+            transform-origin: center;
+            border-radius: 5px;
+        }
+        &::before {
+            transform: translate(-50%, -50%) rotate(45deg);
+        }
+        &::after {
+            transform: translate(-50%, -50%) rotate(-45deg);
+        }
+    }
     .bg {
         width: 264px;
     }

+ 2 - 1
src/view/abnormal-pop/index.tsx

@@ -15,7 +15,8 @@ export default defineComponent({
       <>
         {evaluatingData.socketErrorStatus === 0 && (
           <div class={styles.fraction}>
-            {evaluatingData.socketErrorStatus === 0 && <img class={styles.closeIcon} src={popImgs.icon_close} onClick={() => emit("close")} />}
+            {/* {evaluatingData.socketErrorStatus === 0 && <img class={styles.closeIcon} src={popImgs.icon_close} onClick={() => emit("close")} />} */}
+            <span class={styles.closeDom} onClick={() => emit("close")}></span>
             <div class={styles.content}>
               <div class={styles.title}>网络连接失败</div>
               <div class={styles.desc}>请确保网络正常后重新连接</div>