Преглед изворни кода

遮罩层&弹框的min-width,结合应用的默认大小设置

Michael Wang пре 3 година
родитељ
комит
d50fea796d
4 измењених фајлова са 5 додато и 2 уклоњено
  1. 1 1
      src/App.vue
  2. 1 0
      src/features/mark/AllPaperModal.vue
  3. 1 0
      src/features/mark/SheetViewModal.vue
  4. 2 1
      src/styles/global.css

+ 1 - 1
src/App.vue

@@ -72,7 +72,7 @@ export default defineComponent({
   left: 0;
   height: 100vh;
   /* 不知道为啥在窗口宽度小于#app min-width 的时候,遮罩层覆盖不全。要控制body的overflow。 */
-  width: 300vw;
+  min-width: var(--app-min-width);
   overflow: hidden;
   display: flex;
   place-content: center;

+ 1 - 0
src/features/mark/AllPaperModal.vue

@@ -55,6 +55,7 @@ const checkedIndex = ref(0);
   width: 100vw;
   height: 100vh;
   overflow: auto;
+  min-width: var(--app-min-width);
 }
 header {
   background-color: #eff3f6;

+ 1 - 0
src/features/mark/SheetViewModal.vue

@@ -119,6 +119,7 @@ function getDataUrlForSheetConfig(
   width: 100vw;
   height: 100vh;
   overflow: auto;
+  min-width: var(--app-min-width);
 }
 header {
   background-color: #eff3f6;

+ 2 - 1
src/styles/global.css

@@ -5,12 +5,13 @@
   --header-bg-color: #191b37;
   --app-main-bg-color: #edf2fa;
   --app-main-text-color: #283e76;
+  --app-min-width: 1280px;
 }
 
 body {
   margin: 0;
   font-size: 14px;
-  min-width: 1280px;
+  min-width: var(--app-min-width);
   min-height: 600px;
   user-select: none;
 }