fix: 🎨 fix some css style

buqiyuan · Dec 21, 2021 · 7b7f17a · 7b7f17a
1 parent bb79046
commit 7b7f17a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/src/components/a-custom-modal/index.vue b/src/components/a-custom-modal/index.vue
@@ -16,7 +16,7 @@
           <slot name="closeIcon">
             <Space @click.stop class="ant-modal-operate">
               <fullscreen-outlined @click="fullscreenModel = true" v-if="!fullscreenModel" />
-              <fullscreen-exit-outlined @click="fullscreenModel = false" v-else />
+              <fullscreen-exit-outlined @click="restore" v-else />
               <close-outlined @click="closeModal" />
             </Space>
           </slot>
@@ -87,6 +87,21 @@
     emit('cancel');
   };
 
+  // 居中弹窗
+  const centerModal = async () => {
+    await nextTick();
+    const modalEl = modalWrapRef.value?.querySelector<HTMLDivElement>('.ant-modal');
+
+    if (modalEl && modalEl.getBoundingClientRect().left < 1) {
+      modalEl.style.left = (document.documentElement.clientWidth - modalEl.offsetWidth) / 2 + 'px';
+    }
+  };
+
+  const restore = async () => {
+    fullscreenModel.value = false;
+    centerModal();
+  };
+
   const registerDragTitle = (dragEl: HTMLDivElement, handleEl: HTMLDivElement) => {
     handleEl.style.cursor = 'move';
     handleEl.onmousedown = (e: MouseEvent) => {
@@ -126,10 +141,7 @@
     const modalWrapEl = modalWrapRefEl.querySelector<HTMLDivElement>('.ant-modal-wrap');
     const modalEl = modalWrapRefEl.querySelector<HTMLDivElement>('.ant-modal');
     if (modalWrapEl && modalEl) {
-      if (!modalEl.style.left) {
-        modalEl.style.left =
-          (document.documentElement.clientWidth - modalEl.offsetWidth) / 2 + 'px';
-      }
+      centerModal();
       const headerEl = modalEl.querySelector<HTMLDivElement>('.ant-modal-header');
       headerEl && registerDragTitle(modalEl, headerEl);
 

diff --git a/src/layout/tabs/tabs-view.vue b/src/layout/tabs/tabs-view.vue
@@ -295,18 +295,32 @@
 
       .ant-tabs-tab-remove {
         display: flex;
+        padding: 0;
+        margin: 0;
+        .anticon-close {
+          padding-left: 6px;
+        }
       }
 
       .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        .ant-tabs-tab-remove {
+          width: 0;
+        }
         .anticon-close {
           width: 0;
           visibility: hidden;
           transition: width 0.3s;
         }
 
-        &:hover .anticon-close {
-          width: 16px;
-          visibility: visible;
+        &:hover {
+          .anticon-close {
+            width: 16px;
+            visibility: visible;
+            padding-left: 6px;
+          }
+          .ant-tabs-tab-remove {
+            width: unset;
+          }
         }
       }
     }