refactor: title

src/components/Base/Dialog/index.vue

@@ -72,16 +72,18 @@ export default class Dialog extends Vue {
   $radius: $--border-radius-base;
   $font-color: $--color-white;
   $bg-color: $--color-primary;
+
   border-radius: $radius;
   display: flex;
   justify-content: center;
   align-items: center;
-  /deep/ .el-dialog {
+  >>> .el-dialog {
     background-color: transparent;
     max-width: 85vw;
     margin-top: 0 !important;
     .title {
-      font-size: 14px;
+      font-size: $--font-size-medium;
+      color: $font-color;
       font-weight: 500;
     }
 
@@ -89,9 +91,9 @@ export default class Dialog extends Vue {
       background-color: $bg-color;
       color: $font-color;
       border-bottom-color: $bg-color;
-      height: 40px;
+      height: 54px;
       text-indent: 0;
-      padding: 0 1em;
+      padding: 0 $gutter-medium;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -115,6 +117,9 @@ export default class Dialog extends Vue {
       border-bottom-left-radius: $radius;
       border-bottom-right-radius: $radius;
     }
+    .el-dialog__body {
+      padding: $gutter-medium;
+    }
   }
 }
 </style>

src/components/Base/Title/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :class="{ 'tf-title': true, 'tf-title--top': alignTop }">
+    <div :class="{ content: true, 'content--bold': isBold }"><slot /></div>
+    <div class="append"><slot name="append" /></div>
+  </div>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component({ name: 'Title' })
+export default class Title extends Vue {
+  @Prop({ type: Boolean, default: true }) isBold!: boolean
+  @Prop({ type: Boolean, default: false }) alignTop!: boolean
+}
+</script>
+
+<style lang="scss" scoped>
+.tf-title {
+  padding: 4px 0 4px 10px;
+  margin-bottom: 15px;
+  font-size: 16px;
+  position: relative;
+  word-spacing: 10px;
+  text-transform: capitalize;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  &--top {
+    align-items: center;
+  }
+  &::before {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 16px;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: $--color-primary;
+  }
+  .content {
+    flex: 1 1 auto;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    margin-right: 3em;
+  }
+  .append {
+    flex: 0 0 auto;
+  }
+}
+</style>

src/components/Base/index.ts

@@ -2,8 +2,11 @@ import Vue from 'vue'
 import Page from './Page/index.vue'
 import Table from './Table/index.vue'
 import Dialog from './Dialog/index.vue'
+import Title from './Title/index.vue'
+
 const namePrefix = 'Tf'
 
 Vue.component(`${namePrefix}${Page.name}`, Page)
 Vue.component(`${namePrefix}${Table.name}`, Table)
 Vue.component(`${namePrefix}${Dialog.name}`, Dialog)
+Vue.component(`${namePrefix}${Title.name}`, Title)

src/styles/variables.scss

@@ -3,4 +3,5 @@
 @import './size.scss';
 
 $gutter: 15px;
+$gutter-medium: 24px;
 $sideBarWidth: 173px;