Fix margin styles for elements (#26)

change/@zhishuyun-hub-aab0955d-4ed5-4bc4-a662-824d436a2b28.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix block styles",
+  "packageName": "@zhishuyun/hub",
+  "email": "cqc@germey.cn",
+  "dependentChangeType": "patch"
+}

src/components/common/Navigator.vue

@@ -15,7 +15,7 @@
         </el-tooltip>
       </div>
     </div>
-    <div class="middle"></div>
+    <div class="middle" />
     <div class="bottom">
       <div class="link">
         <el-tooltip effect="dark" :content="$t('common.nav.console')" placement="right">

src/components/midjourney/preset/RatioSelector.vue

@@ -121,6 +121,7 @@ export default defineComponent({
     border-radius: 5px;
 
     .preview {
+      margin-top: 8px;
       width: 30px;
       height: 30px;
       display: flex;

src/pages/console/distribution/History.vue

@@ -156,16 +156,6 @@ export default defineComponent({
   color: #333;
 }
 
-.item-mini {
-  .value {
-    font-weight: 600;
-    font-size: 40px;
-  }
-  .description {
-    color: #999;
-    font-size: 14px;
-  }
-}
 .el-table {
   min-height: calc(100vh - 300px);
   margin-bottom: 50px;

src/pages/console/distribution/Index.vue

@@ -84,7 +84,7 @@
               <h4 class="title">
                 {{ $t('distribution.title.distributionLink') }}
               </h4>
-              <el-divider />
+              <el-divider class="mt-4 mb-4" />
               <div class="link-wrapper">
                 <font-awesome-icon v-if="false" icon="fa-solid fa-link" class="icon" />
                 <a :href="distributionLink" class="link">
@@ -93,7 +93,12 @@
                 <copy-to-clipboard :content="distributionLink" />
               </div>
               <div class="qr-wrapper">
-                <qr-code v-if="distributionLink" :value="distributionLink" :size="150" class="mb-2 ml-auto mr-auto" />
+                <qr-code
+                  v-if="distributionLink"
+                  :value="distributionLink"
+                  :size="150"
+                  class="block mb-2 ml-auto mr-auto"
+                />
                 <p>
                   {{ $t('distribution.message.distributionQrDescription') }}
                 </p>
@@ -120,6 +125,7 @@
               <h4 class="title">
                 {{ $t('distribution.title.levelInfo') }}
               </h4>
+              <el-divider class="mt-4 mb-4" />
               <div class="clear-both overflow-hidden">
                 <div class="float-left description">
                   <p>{{ $t('distribution.title.currentLevel') }}: L{{ distributionStatus?.level?.level }}</p>
@@ -356,10 +362,12 @@ export default defineComponent({
   .value {
     font-weight: 600;
     font-size: 30px;
+    margin: 0;
   }
   .description {
     color: #999;
     font-size: 14px;
+    margin-bottom: 5px;
   }
 }
 

src/pages/console/distribution/Invitees.vue

@@ -140,16 +140,6 @@ export default defineComponent({
   color: #333;
 }
 
-.item-mini {
-  .value {
-    font-weight: 600;
-    font-size: 40px;
-  }
-  .description {
-    color: #999;
-    font-size: 14px;
-  }
-}
 .el-table {
   min-height: calc(100vh - 300px);
   margin-bottom: 50px;