[optimize] common-components dialog style

Hiram-Wong · Jan 13, 2025 · e5a5f10 · e5a5f10
1 parent 16093d5
commit e5a5f10
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 30 deletions.
diff --git a/src/renderer/src/components/common-setting/note/index.vue b/src/renderer/src/components/common-setting/note/index.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="common-dialog">
-    <t-dialog
-      v-model:visible="formVisible"
-      v-bind="attrsCustom"
-    >
+    <t-dialog v-model:visible="formVisible" v-bind="attrsCustom">
       <template #body>
         <div class="container">
           <div class="header">
@@ -23,7 +20,6 @@ import { computed, ref, watch, useAttrs } from 'vue';
 
 import { t } from '@/locales';
 
-
 const attrs = useAttrs();
 
 defineOptions({
@@ -66,38 +62,67 @@ watch(
 <style lang="less" scoped>
 .common-dialog {
   :deep(.t-dialog) {
+    border: none;
+    overflow: hidden;
+
+    .t-dialog__body {
+      padding: 0;
+    }
+
     .t-dialog__footer {
-      display: flex;
-      justify-content: space-around;
-      padding: 0 !important;
+      padding: var(--td-comp-paddingTB-m) 0 0;
 
-      .t-button {
-        width: 180px;
-        height: 45px;
-        border-radius: 25px;
-        font-weight: 700;
-        font-size: 15px;
-        line-height: 45px;
+      div {
+        display: flex;
+        justify-content: space-around;
+        padding: 0;
+
+        .t-button {
+          font-weight: 700;
+          font-size: 15px;
+          line-height: 45px;
+          height: 45px;
+          border-radius: var(--td-radius-round);
+          width: 50%;
+        }
+
+        &:only-child {
+          .t-button {
+            width: 100%;
+          }
+        }
       }
     }
   }
 
   .container {
     opacity: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--td-size-5);
 
-    .header {
-      margin-top: 45px;
-      font-weight: 700;
-      font-size: 28px;
-      text-align: center;
-      color: var(--td-text-color-primary);
+    :deep(.header) {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p,
+      span {
+        font-weight: 700;
+        font-size: 28px;
+        line-height: 28px;
+        text-align: center;
+        color: var(--td-text-color-primary);
+      }
     }
 
     .content {
-      height: 220px;
-      margin: var(--td-comp-margin-xxl) auto var(--td-comp-margin-l);
+      max-height: 340px;
+      padding: 0 var(--td-comp-paddingLR-xs);
       overflow-x: hidden;
-      overflow-y: scroll;
+      overflow-y: auto;
     }
   }
 }

diff --git a/src/renderer/src/components/common-setting/table/index.vue b/src/renderer/src/components/common-setting/table/index.vue
@@ -45,7 +45,6 @@
 import { ref, useSlots } from 'vue';
 import { SearchIcon } from 'tdesign-icons-vue-next';
 
-
 defineProps({
   op: {
     type: Array,

diff --git a/src/renderer/src/pages/Disclaimer.vue b/src/renderer/src/pages/Disclaimer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="disclaimer view-container" style="display: flex;">
+  <div class="disclaimer view-container">
     <common-dialog
       v-model:visible="formVisible"
       :close-on-esc-keydown="false"
@@ -11,7 +11,7 @@
       :on-close="cancelDisclaimer"
     >
       <template #title>
-        {{ $t('pages.md.privacyPolicy.title') }}
+        <h1>{{ $t('pages.md.privacyPolicy.title') }}</h1>
       </template>
       <template #content>
         <md-render :text="$t('pages.md.privacyPolicy.content')" />

diff --git a/src/renderer/src/pages/setting/components/base/components/DialogCustomPlayer.vue b/src/renderer/src/pages/setting/components/base/components/DialogCustomPlayer.vue
@@ -6,7 +6,7 @@
       :cancel-btn="$t('pages.md.customPlayer.confirm')"
     >
       <template #title>
-        {{ $t('pages.md.customPlayer.title') }}
+        <h1>{{ $t('pages.md.customPlayer.title') }}</h1>
       </template>
       <template #content>
         <md-render :text="$t('pages.md.customPlayer.content')" />
@@ -21,7 +21,6 @@ import { ref, watch } from 'vue';
 import CommonDialog from '@/components/common-setting/note/index.vue';
 import MdRender from '@/components/markdown-render/index.vue';
 
-
 const props = defineProps({
   visible: {
     type: Boolean,

diff --git a/src/renderer/src/pages/setting/components/base/components/DialogThumbnail.vue b/src/renderer/src/pages/setting/components/base/components/DialogThumbnail.vue
@@ -7,7 +7,7 @@
       :on-confirm="dialogCheckFfmpeg"
     >
       <template #title>
-        {{ $t('pages.md.thumbanilFfmpeg.title') }}
+        <h1>{{ $t('pages.md.thumbanilFfmpeg.title') }}</h1>
       </template>
       <template #content>
         <md-render :text="$t('pages.md.thumbanilFfmpeg.content')" />