🔨 Refactor: setting-page ui

src/renderer/layouts/Main.vue

@@ -158,7 +158,9 @@ import InputBoxDialog from '@/components/InputBoxDialog.vue'
 import {
   MINIMIZE_WINDOW,
   CLOSE_WINDOW,
-  SHOW_MAIN_PAGE_MENU
+  SHOW_MAIN_PAGE_MENU,
+  SHOW_MAIN_PAGE_QRCODE,
+  SHOW_MAIN_PAGE_DONATION
 } from '~/universal/events/constants'
 @Component({
   name: 'main-page',
@@ -184,6 +186,12 @@ export default class extends Vue {
     ipcRenderer.send('getPicBeds')
     ipcRenderer.on('getPicBeds', this.getPicBeds)
     this.handleGetPicPeds()
+    ipcRenderer.on(SHOW_MAIN_PAGE_QRCODE, () => {
+      this.qrcodeVisible = true
+    })
+    ipcRenderer.on(SHOW_MAIN_PAGE_DONATION, () => {
+      this.visible = true
+    })
   }
 
   @Watch('choosedPicBedForQRCode')

src/renderer/pages/PicGoSetting.vue

@@ -4,11 +4,11 @@
       {{ $T('PICGO_SETTINGS') }} - <i class="el-icon-document" @click="goConfigPage"></i>
     </div>
     <el-row class="setting-list">
-      <el-col :span="16" :offset="4">
+      <el-col :span="20" :offset="2">
         <el-row>
         <el-form
-          label-width="160px"
-          label-position="right"
+          label-position="left"
+          label-width="10"
           size="small"
         >
           <el-form-item
@@ -139,6 +139,7 @@
             ></el-switch>
           </el-form-item>
           <el-form-item
+            :style="{ marginRight: '-64px' }"
             :label="$T('CHOOSE_SHOWED_PICBED')"
           >
             <el-checkbox-group
@@ -756,10 +757,25 @@ export default class extends Vue {
     overflow-x hidden
   .setting-list
     .el-form
+      &-item
+        display: flex
+        justify-content space-between
+        padding-top 8px
+        padding-bottom 8px
+        border-bottom 1px solid darken(#eee, 50%)
+        margin-bottom 0
+        &:last-child
+          border-bottom none
+        &::after
+          display none
+        &::before
+          display none
       label
         line-height 32px
         padding-bottom 0
         color #eee
+        flex-basis: 50%
+        flex-shrink: 0
       .el-button-group
         width 100%
         .el-button

src/renderer/pages/ShortKey.vue

@@ -6,8 +6,11 @@
     <el-row>
       <el-col :span="20" :offset="2">
         <el-table
+          class="shortcut-page-table-border"
           :data="list"
           size="mini"
+          header-cell-class-name="shortcut-page-table-border"
+          cell-class-name="shortcut-page-table-border"
         >
           <el-table-column
             :label="$T('SHORTCUT_NAME')"
@@ -177,6 +180,8 @@ export default class extends Vue {
 </script>
 <style lang='stylus'>
 #shortcut-page
+  .shortcut-page-table-border
+    border-color darken(#eee, 50%)
   .el-dialog__body
     padding 10px 20px
     .el-form-item
@@ -189,6 +194,8 @@ export default class extends Vue {
   .el-table
     background-color: transparent
     color #ddd
+    &::before
+      background-color darken(#eee, 50%)
     thead
       color #bbb
     th,tr