dialog 样式优化

src/components/QmDialog.vue

@@ -7,17 +7,22 @@
     >
       <header ref="mouseHandler" class="tw-flex tw-place-content-between">
         <div
-          class="tw-text-2xl tw-cursor-move tw-flex-grow"
+          class="tw-text-base tw-ml-5 tw-my-2 tw-cursor-move tw-flex-grow"
           @mousedown="handleDragMouseDown"
         >
           {{ title }}
         </div>
-        <a-button shape="circle" @click="$emit('close')">
+        <a-button
+          class="tw-mt-2 tw-mr-2"
+          shape="circle"
+          size="small"
+          @click="$emit('close')"
+        >
           <template #icon><CloseOutlined /></template>
         </a-button>
       </header>
 
-      <div class="tw-m-1 tw-overflow-scroll" style="height: calc(100% - 40px)">
+      <div class="tw-m-1 tw-overflow-scroll" style="height: calc(100% - 50px)">
         <slot></slot>
       </div>
 
@@ -173,12 +178,13 @@ export default defineComponent({
   position: absolute;
   min-width: 100px;
   background-color: white;
-  border: 1px solid grey;
+  border: 1px solid #edf2fa;
   border-radius: 5px;
-  box-shadow: 4px 6px 2px grey;
+  box-shadow: 0px 4px 8px 0px rgba(25, 27, 55, 0.1);
 }
 header {
-  background-color: #eff3f6;
+  color: #283e76;
+  border-bottom: 1px solid #edf2fa;
 }
 .resize-handler {
   position: absolute;

src/features/mark/MarkProblemDialog.vue

@@ -3,8 +3,9 @@
     title="选择试卷的问题类型"
     v-model:visible="visible"
     @cancel="handleCancel"
-    width="240px"
+    width="300px"
     :zIndex="6000"
+    wrapClassName="profile-wrapper"
   >
     <template #footer>
       <a-button key="back" @click="handleCancel">取消</a-button>
@@ -12,7 +13,7 @@
     <table class="group-table">
       <tr>
         <th>问题类型</th>
-        <th class="tw-text-right">操作</th>
+        <th class="tw-text-right" style="padding-right: 20px">操作</th>
       </tr>
       <tr v-for="(problem, index) in store.setting.problemTypes" :key="index">
         <td>{{ problem.name }}</td>
@@ -107,12 +108,24 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.profile-wrapper .ant-modal-title {
+  color: #283e76;
+}
+.profile-wrapper .anticon-close {
+  vertical-align: text-top;
+}
 .group-table {
   width: 100%;
 
   border-collapse: separate;
   border-spacing: 0 0.5em;
 }
+.group-table th {
+  color: #7584ac;
+}
+.group-table tr td {
+  color: #435488;
+}
 
 .current-group {
   background-color: lightblue;

src/features/mark/MarkSwitchGroupDialog.vue

@@ -113,7 +113,7 @@ export default defineComponent({
   color: #283e76;
 }
 .profile-wrapper .anticon-close {
-  vertical-align: middle;
+  vertical-align: text-top;
 }
 .profile-wrapper .ant-modal-body label {
   color: #435488 !important;

src/features/mark/MinimapModal.vue

@@ -64,7 +64,12 @@ const close = () => {
 
 <style>
 .mini-map-container {
-  border: 1px dotted grey;
+  background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
 
 .mini-map-container div div:not(.single-image-container) {

src/features/mark/SpecialTagModal.vue

@@ -11,6 +11,7 @@
       class="
         tw-flex tw-place-content-between tw-m-4 tw-text-xl tw-cursor-pointer
       "
+      style="color: #283e76"
     >
       <div
         @click="toggleTag('√')"
@@ -33,17 +34,18 @@
       <div
         @click="toggleTag('——')"
         :class="[store.currentSpecialTag === '——' && 'tag-selected', 'tag']"
-        style="width: 60px"
+        style="width: 70px; border-radius: 5px"
       >
         <u>下划线</u>
       </div>
     </div>
 
-    <div class="tw-flex tw-place-content-between tw-mt-8">
+    <div class="tw-flex tw-place-content-between tw-mt-8 tw-mx-2">
       <qm-button
         type="primary"
         shape="round"
         size="large"
+        style="background-color: #4ed885; border-color: #4ed885"
         :clickTimeout="300"
         @click="clearLatestTagOfCurrentTask"
       >
@@ -95,10 +97,13 @@ const close = () => {
 .tag {
   width: 30px;
   height: 30px;
-  text-align: center;
-  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px;
+  border-radius: 30px;
 }
 .tag-selected {
-  background-color: lightgrey;
+  background-color: #edf2fa;
 }
 </style>