perf: 调整间距,适配小屏

gkd-kit · Oct 9, 2023 · e92926d · e92926d
1 parent 93c3d1a
commit e92926d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/components/AttrCard.vue b/src/components/AttrCard.vue
@@ -31,8 +31,17 @@ const attrs = computed(() => {
 </script>
 
 <template>
-  <DraggableCard :initialValue="{ top: 90, right: 10 }" v-slot="{ onRef }">
-    <NTable size="small" striped :singleLine="false" class="gkd_code">
+  <DraggableCard :initialValue="{ top: 75, right: 10 }" v-slot="{ onRef }">
+    <NTable
+      size="small"
+      striped
+      :singleLine="false"
+      class="gkd_code"
+      :themeOverrides="{
+        thPaddingSmall: '2px 4px',
+        tdPaddingSmall: '2px 4px',
+      }"
+    >
       <thead cursor-move :ref="onRef">
         <NTr>
           <NTh> Name </NTh>

diff --git a/src/components/SearchCard.vue b/src/components/SearchCard.vue
@@ -91,7 +91,7 @@ const enableSearchBySelector = shallowRef(true);
 </script>
 <template>
   <DraggableCard
-    :initialValue="{ top: 90, right: 390 }"
+    :initialValue="{ top: 75, right: 390 }"
     v-slot="{ onRef }"
     class="z-1"
   >

diff --git a/src/components/WindowCard.vue b/src/components/WindowCard.vue
@@ -87,14 +87,23 @@ const renderLabel = (info: {
 
 <template>
   <div flex flex-col>
-    <NTable size="small" striped :singleLine="false" class="table-fixed">
+    <NTable
+      size="small"
+      striped
+      :singleLine="false"
+      class="table-fixed"
+      :themeOverrides="{
+        thPaddingSmall: '2px 4px',
+        tdPaddingSmall: '2px 4px',
+      }"
+    >
       <NThead>
         <NTr>
-          <NTh class="w-150px"> Device </NTh>
-          <NTh class="w-110px"> Name </NTh>
-          <NTh class="w-110px"> VersionName </NTh>
-          <NTh class="w-110px"> VersionCode </NTh>
-          <NTh class="w-240px"> AppId </NTh>
+          <NTh class="w-140px"> Device </NTh>
+          <NTh class="w-100px"> Name </NTh>
+          <NTh class="w-100px"> VersionName </NTh>
+          <NTh class="w-100px"> VersionCode </NTh>
+          <NTh class="w-200px"> AppId </NTh>
           <NTh> ActivityId </NTh>
           <NTh class="w-175px"> 操作 </NTh>
         </NTr>