配置 stylelint

2020-05-29 14:53:03 +08:00 · 2020-05-29 14:53:03 +08:00 · cd9eec3148
parent 6f80263b42
commit cd9eec3148
101 changed files with 1766 additions and 1783 deletions
--- a/.stylelintignore
+++ b/.stylelintignore
@ -0,0 +1 @@
+src/assets
--- a/.stylelintrc
+++ b/.stylelintrc
@ -0,0 +1,27 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "property-no-vendor-prefix": null,
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-property-value-blacklist": null,
+    "selector-no-qualifying-type": null,
+    "selector-pseudo-element-no-unknown": null,
+    "selector-no-vendor-prefix": null,
+    "media-feature-name-no-vendor-prefix": null,
+    "scss/at-import-partial-extension-blacklist": null,
+    "scss/selector-no-redundant-nesting-selector": null,
+    "scss/at-mixin-pattern": null,
+    "scss/dollar-variable-pattern": null,
+    "order/properties-alphabetical-order": null,
+    "selector-max-id": null,
+    "property-no-unknown": null,
+    "color-named": null,
+    "value-no-vendor-prefix": null,
+    "selector-class-pattern": null,
+    "max-nesting-depth": 10,
+    "selector-max-compound-selectors": 10
+  }
+}
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
+    "lint:css": "stylelint --aei .vue,.html src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
@ -98,6 +99,9 @@
    "sass-loader": "^7.1.0",
    "script-ext-html-webpack-plugin": "2.1.3",
    "serve-static": "^1.13.2",
+    "stylelint": "13.5.0",
+    "stylelint-config-sass-guidelines": "7.0.0",
+    "stylelint-order": "4.0.0",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.0",
    "vue-template-compiler": "2.6.10"
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@ -1,7 +1,7 @@
 <template>
  <transition :name="transitionName">
    <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
-      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
+      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="back-to-icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px;width: 16px;"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
    </div>
  </transition>
 </template>
@ -96,15 +96,15 @@ export default {

 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity .5s;
+  transition: opacity 0.5s;
 }

 .fade-enter,
 .fade-leave-to {
-  opacity: 0
+  opacity: 0;
 }

-.back-to-ceiling .Icon {
+.back-to-ceiling .back-to-icon {
  fill: #9aaabf;
  background: none;
 }
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@ -1,23 +1,23 @@
 <template>
-  <div class="dndList">
-    <div :style="{width:width1}" class="dndList-list">
+  <div class="dnd-list">
+    <div :style="{width:width1}" class="dnd-list-container">
      <h3>{{ list1Title }}</h3>
-      <draggable :set-data="setData" :list="list1" group="article" class="dragArea">
+      <draggable :set-data="setData" :list="list1" group="article" class="drag-area">
        <div v-for="element in list1" :key="element.id" class="list-complete-item">
          <div class="list-complete-item-handle">
            {{ element.id }}[{{ element.author }}] {{ element.title }}
          </div>
-          <div style="position:absolute;right:0px;">
-            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
-              <i style="color:#ff4949" class="el-icon-delete" />
+          <div style="position: absolute;right: 0;">
+            <span style="float: right;margin-top: -20px;margin-right: 5px;" @click="deleteEle(element)">
+              <i style="color: #ff4949;" class="el-icon-delete" />
            </span>
          </div>
        </div>
      </draggable>
    </div>
-    <div :style="{width:width2}" class="dndList-list">
+    <div :style="{width:width2}" class="dnd-list-container">
      <h3>{{ list2Title }}</h3>
-      <draggable :list="list2" group="article" class="dragArea">
+      <draggable :list="list2" group="article" class="drag-area">
        <div v-for="element in list2" :key="element.id" class="list-complete-item">
          <div class="list-complete-item-handle2" @click="pushEle(element)">
            {{ element.id }} [{{ element.author }}] {{ element.title }}
@ -105,21 +105,25 @@ export default {
 </script>

 <style lang="scss" scoped>
-.dndList {
+.dnd-list {
  background: #fff;
  padding-bottom: 40px;
-  &:after {
-    content: "";
+
+  &::after {
+    content: '';
    display: table;
    clear: both;
  }
-  .dndList-list {
+
+  .dnd-list-container {
    float: left;
    padding-bottom: 30px;
+
    &:first-of-type {
      margin-right: 2%;
    }
-    .dragArea {
+
+    .drag-area {
      margin-top: 15px;
      min-height: 50px;
      padding-bottom: 30px;
@ -152,11 +156,11 @@ export default {
 }

 .list-complete-item.sortable-chosen {
-  background: #4AB7BD;
+  background: #4ab7bd;
 }

 .list-complete-item.sortable-ghost {
-  background: #30B08F;
+  background: #30b08f;
 }

 .list-complete-enter,
--- a/src/components/DragSelect/index.vue
+++ b/src/components/DragSelect/index.vue
@ -50,9 +50,9 @@ export default {

 <style scoped>
 .drag-select >>> .sortable-ghost {
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
+  opacity: 0.8;
+  color: #fff !important;
+  background: #42b983 !important;
 }

 .drag-select >>> .el-tag {
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@ -207,91 +207,94 @@ export default {

 <style scoped>
    .dropzone {
-        border: 2px solid #E5E5E5;
-        font-family: 'Roboto', sans-serif;
-        color: #777;
-        transition: background-color .2s linear;
-        padding: 5px;
+      border: 2px solid #e5e5e5;
+      font-family: 'Roboto', sans-serif;
+      color: #777;
+      transition: background-color 0.2s linear;
+      padding: 5px;
    }

    .dropzone:hover {
-        background-color: #F6F6F6;
+      background-color: #f6f6f6;
    }

    i {
-        color: #CCC;
+      color: #ccc;
    }

    .dropzone .dz-image img {
-        width: 100%;
-        height: 100%;
+      width: 100%;
+      height: 100%;
    }

    .dropzone input[name='file'] {
-        display: none;
+      display: none;
    }

    .dropzone .dz-preview .dz-image {
-        border-radius: 0px;
+      border-radius: 0;
    }

    .dropzone .dz-preview:hover .dz-image img {
-        transform: none;
-        filter: none;
-        width: 100%;
-        height: 100%;
+      transform: none;
+      filter: none;
+      width: 100%;
+      height: 100%;
    }

    .dropzone .dz-preview .dz-details {
-        bottom: 0px;
-        top: 0px;
-        color: white;
-        background-color: rgba(33, 150, 243, 0.8);
-        transition: opacity .2s linear;
-        text-align: left;
+      bottom: 0;
+      top: 0;
+      color: white;
+      background-color: rgba(33, 150, 243, 0.8);
+      transition: opacity 0.2s linear;
+      text-align: left;
    }

-    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
-        background-color: transparent;
+    .dropzone .dz-preview .dz-details .dz-filename span,
+    .dropzone .dz-preview .dz-details .dz-size span {
+      background-color: transparent;
    }

    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
-        border: none;
+      border: none;
    }

    .dropzone .dz-preview .dz-details .dz-filename:hover span {
-        background-color: transparent;
-        border: none;
+      background-color: transparent;
+      border: none;
    }

    .dropzone .dz-preview .dz-remove {
-        position: absolute;
-        z-index: 30;
-        color: white;
-        margin-left: 15px;
-        padding: 10px;
-        top: inherit;
-        bottom: 15px;
-        border: 2px white solid;
-        text-decoration: none;
-        text-transform: uppercase;
-        font-size: 0.8rem;
-        font-weight: 800;
-        letter-spacing: 1.1px;
-        opacity: 0;
+      position: absolute;
+      z-index: 30;
+      color: white;
+      margin-left: 15px;
+      padding: 10px;
+      top: inherit;
+      bottom: 15px;
+      border: 2px white solid;
+      text-decoration: none;
+      text-transform: uppercase;
+      font-size: 0.8rem;
+      font-weight: 800;
+      letter-spacing: 1.1px;
+      opacity: 0;
    }

    .dropzone .dz-preview:hover .dz-remove {
-        opacity: 1;
+      opacity: 1;
    }

-    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
-        margin-left: -40px;
-        margin-top: -50px;
+    .dropzone .dz-preview .dz-success-mark,
+    .dropzone .dz-preview .dz-error-mark {
+      margin-left: -40px;
+      margin-top: -50px;
    }

-    .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
-        color: white;
-        font-size: 5rem;
+    .dropzone .dz-preview .dz-success-mark i,
+    .dropzone .dz-preview .dz-error-mark i {
+      color: white;
+      font-size: 5rem;
    }
 </style>
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@ -4,7 +4,7 @@
      width="80"
      height="80"
      viewBox="0 0 250 250"
-      style="fill:#40c9c6; color:#fff;"
+      style="fill: #40c9c6; color: #fff;"
      aria-hidden="true"
    >
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
@ -25,30 +25,33 @@

 <style scoped>
 .github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out
+  animation: octocat-wave 560ms ease-in-out;
 }

@keyframes octocat-wave {
  0%,
  100% {
-    transform: rotate(0)
+    transform: rotate(0);
  }
+
  20%,
  60% {
-    transform: rotate(-25deg)
+    transform: rotate(-25deg);
  }
+
  40%,
  80% {
-    transform: rotate(10deg)
+    transform: rotate(10deg);
  }
 }

@media (max-width:500px) {
  .github-corner:hover .octo-arm {
-    animation: none
+    animation: none;
  }
+
  .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
+    animation: octocat-wave 560ms ease-in-out;
  }
 }
 </style>
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@ -55,18 +55,21 @@ export default {
 </script>

 <style scoped>
-.json-editor{
+.json-editor {
  height: 100%;
  position: relative;
 }
+
 .json-editor >>> .CodeMirror {
  height: auto;
  min-height: 300px;
 }
-.json-editor >>> .CodeMirror-scroll{
+
+.json-editor >>> .CodeMirror-scroll {
  min-height: 300px;
 }
+
 .json-editor >>> .cm-s-rubyblue span.cm-string {
-  color: #F08047;
+  color: #f08047;
 }
 </style>
--- a/src/components/Kanban/index.vue
+++ b/src/components/Kanban/index.vue
@ -91,7 +91,7 @@ export default {
      line-height: 54px;
      padding: 5px 10px;
      box-sizing: border-box;
-      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    }
  }
 }
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@ -208,14 +208,14 @@ export default {
  // Utils
  $spacer: 12px;
  $transition: 0.2s ease all;
-  $index: 0px;
+  $index: 0;
  $index-has-icon: 30px;
  // Theme:
  $color-white: white;
-  $color-grey: #9E9E9E;
-  $color-grey-light: #E0E0E0;
-  $color-blue: #2196F3;
-  $color-red: #F44336;
+  $color-grey: #9e9e9e;
+  $color-grey-light: #e0e0e0;
+  $color-blue: #2196f3;
+  $color-red: #f44336;
  $color-black: black;
  // Base clases:
  %base-bar-pseudo {
@ -239,9 +239,11 @@ export default {
  .material-input__component {
    margin-top: 36px;
    position: relative;
+
    * {
      box-sizing: border-box;
    }
+
    .iconClass {
      .material-input__icon {
        position: absolute;
@ -255,13 +257,16 @@ export default {
        font-weight: $font-weight-normal;
        pointer-events: none;
      }
+
      .material-label {
        left: $index-has-icon;
      }
+
      .material-input {
        text-indent: $index-has-icon;
      }
    }
+
    .material-input {
      font-size: $font-size-base;
      padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
@ -270,12 +275,14 @@ export default {
      border: none;
      line-height: 1;
      border-radius: 0;
+
      &:focus {
        outline: none;
        border: none;
        border-bottom: 1px solid transparent; // fixes the height issue
      }
    }
+
    .material-label {
      font-weight: $font-weight-normal;
      position: absolute;
@ -285,15 +292,18 @@ export default {
      transition: $transition;
      font-size: $font-size-small;
    }
+
    .material-input-bar {
      position: relative;
      display: block;
      width: 100%;
-      &:before {
+
+      &::before {
        @extend %base-bar-pseudo;
        left: 50%;
      }
-      &:after {
+
+      &::after {
        @extend %base-bar-pseudo;
        right: 50%;
      }
@ -313,8 +323,8 @@ export default {
    // Active state:
    &.material--active {
      .material-input-bar {
-        &:before,
-        &:after {
+        &::before,
+        &::after {
          width: 50%;
        }
      }
@ -323,18 +333,21 @@ export default {

  .material-input__component {
    background: $color-white;
+
    .material-input {
      background: none;
      color: $color-black;
      text-indent: $index;
      border-bottom: 1px solid $color-grey-light;
    }
+
    .material-label {
      color: $color-grey;
    }
+
    .material-input-bar {
-      &:before,
-      &:after {
+      &::before,
+      &::after {
        background: $color-blue;
      }
    }
@ -349,9 +362,10 @@ export default {
      &.material--active .material-label {
        color: $color-red;
      }
+
      .material-input-bar {
-        &:before,
-        &:after {
+        &::before,
+        &::after {
          background: transparent;
        }
      }
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@ -95,6 +95,7 @@ export default {
  background: #fff;
  padding: 32px 16px;
 }
+
 .pagination-container.hidden {
  display: none;
 }
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@ -91,7 +91,7 @@ export default {
  letter-spacing: 2px;
  font-size: 18px;
  margin: 0 60px;
-  padding: 22px 0 0 0;
+  padding: 22px 0 0;
  height: 85px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
@ -137,6 +137,6 @@ export default {

 .pan-item:hover .pan-info p a {
  opacity: 1;
-  transform: translateX(0px) rotate(0deg);
+  transform: translateX(0) rotate(0deg);
 }
 </style>
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@ -90,8 +90,8 @@ export default {
  top: 0;
  left: 0;
  opacity: 0;
-  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
-  background: rgba(0, 0, 0, .2);
+  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
 }

@ -102,15 +102,15 @@ export default {
  position: fixed;
  top: 0;
  right: 0;
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
-  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
+  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
  transform: translate(100%);
  background: #fff;
  z-index: 40000;
 }

 .show {
-  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);

  .rightPanel-background {
    z-index: 20000;
@ -137,6 +137,7 @@ export default {
  cursor: pointer;
  color: #fff;
  line-height: 48px;
+
  i {
    font-size: 24px;
    line-height: 48px;
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@ -52,7 +52,7 @@ export default {
 .screenfull-svg {
  display: inline-block;
  cursor: pointer;
-  fill: #5a5e66;;
+  fill: #5a5e66;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
--- a/src/components/Share/DropdownMenu.vue
+++ b/src/components/Share/DropdownMenu.vue
@ -39,12 +39,14 @@ export default {

 <style lang="scss" >
 $n: 9; //和items.length 相同
-$t: .1s;
+$t: 0.1s;
+
 .share-dropdown-menu {
  width: 250px;
  position: relative;
  z-index: 1;
-  height: auto!important;
+  height: auto !important;
+
  &-title {
    width: 100%;
    display: block;
@ -56,11 +58,13 @@ $t: .1s;
    font-size: 20px;
    text-align: center;
    z-index: 2;
-    transform: translate3d(0,0,0);
+    transform: translate3d(0, 0, 0);
  }
+
  &-wrapper {
    position: relative;
  }
+
  &-item {
    text-align: center;
    position: absolute;
@ -74,6 +78,7 @@ $t: .1s;
    overflow: hidden;
    opacity: 1;
    transition: transform 0.28s ease;
+
    &:hover {
      background: black;
      color: white;
@ -86,10 +91,12 @@ $t: .1s;
      }
    }
  }
+
  &.active {
    .share-dropdown-menu-wrapper {
      z-index: 1;
    }
+
    .share-dropdown-menu-item {
      @for $i from 1 through $n {
        &:nth-of-type(#{$i}) {
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@ -56,7 +56,7 @@ export default {

 .svg-external-icon {
  background-color: currentColor;
-  mask-size: cover!important;
+  mask-size: cover !important;
  display: inline-block;
 }
 </style>
--- a/src/components/TextHoverEffect/Mallki.vue
+++ b/src/components/TextHoverEffect/Mallki.vue
@ -48,7 +48,7 @@ export default {
  content: '';
  width: 100%;
  height: 6px;
-  margin: -3px 0 0 0;
+  margin: -3px 0 0;
  background: #3888fa;
  position: absolute;
  left: 0;
--- a/src/components/Tinymce/components/EditorImage.vue
+++ b/src/components/Tinymce/components/EditorImage.vue
@ -104,6 +104,7 @@ export default {
 <style lang="scss" scoped>
 .editor-slide-upload {
  margin-bottom: 20px;
+
  /deep/ .el-upload--picture-card {
    width: 100%;
  }
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@ -218,23 +218,28 @@ export default {
  position: relative;
  line-height: normal;
 }
+
 .tinymce-container>>>.mce-fullscreen {
  z-index: 10000;
 }
+
 .tinymce-textarea {
  visibility: hidden;
  z-index: -1;
 }
+
 .editor-custom-btn-container {
  position: absolute;
  right: 4px;
  top: 4px;
  /*z-index: 2005;*/
 }
+
 .fullscreen .editor-custom-btn-container {
  z-index: 10000;
  position: fixed;
 }
+
 .editor-upload-btn {
  display: inline-block;
 }
--- a/src/components/Upload/SingleImage.vue
+++ b/src/components/Upload/SingleImage.vue
@ -78,57 +78,65 @@ export default {
 </script>

 <style lang="scss" scoped>
-    @import "~@/styles/mixin.scss";
+    @import '~@/styles/mixin.scss';
+
    .upload-container {
-        width: 100%;
+      @include clearfix;
+      width: 100%;
+      position: relative;
+
+      .image-uploader {
+        width: 60%;
+        float: left;
+      }
+
+      .image-preview {
+        width: 200px;
+        height: 200px;
        position: relative;
-        @include clearfix;
-        .image-uploader {
-            width: 60%;
-            float: left;
+        border: 1px dashed #d9d9d9;
+        float: left;
+        margin-left: 50px;
+
+        .image-preview-wrapper {
+          position: relative;
+          width: 100%;
+          height: 100%;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
        }
-        .image-preview {
-            width: 200px;
-            height: 200px;
-            position: relative;
-            border: 1px dashed #d9d9d9;
-            float: left;
-            margin-left: 50px;
-            .image-preview-wrapper {
-                position: relative;
-                width: 100%;
-                height: 100%;
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-            .image-preview-action {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                cursor: default;
-                text-align: center;
-                color: #fff;
-                opacity: 0;
-                font-size: 20px;
-                background-color: rgba(0, 0, 0, .5);
-                transition: opacity .3s;
-                cursor: pointer;
-                text-align: center;
-                line-height: 200px;
-                .el-icon-delete {
-                    font-size: 36px;
-                }
-            }
-            &:hover {
-                .image-preview-action {
-                    opacity: 1;
-                }
-            }
+
+        .image-preview-action {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+          cursor: default;
+          text-align: center;
+          color: #fff;
+          opacity: 0;
+          font-size: 20px;
+          background-color: rgba(0, 0, 0, 0.5);
+          transition: opacity 0.3s;
+          cursor: pointer;
+          text-align: center;
+          line-height: 200px;
+
+          .el-icon-delete {
+            font-size: 36px;
+          }
        }
+
+        &:hover {
+          .image-preview-action {
+            opacity: 1;
+          }
+        }
+      }
    }

 </style>
--- a/src/components/Upload/SingleImage2.vue
+++ b/src/components/Upload/SingleImage2.vue
@ -81,25 +81,30 @@ export default {
  width: 100%;
  height: 100%;
  position: relative;
+
  .image-uploader {
    height: 100%;
  }
+
  .image-preview {
    width: 100%;
    height: 100%;
    position: absolute;
-    left: 0px;
-    top: 0px;
+    left: 0;
+    top: 0;
    border: 1px dashed #d9d9d9;
+
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
+
      img {
        width: 100%;
        height: 100%;
      }
    }
+
    .image-preview-action {
      position: absolute;
      width: 100%;
@ -111,15 +116,17 @@ export default {
      color: #fff;
      opacity: 0;
      font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;
+
      .el-icon-delete {
        font-size: 36px;
      }
    }
+
    &:hover {
      .image-preview-action {
        opacity: 1;
--- a/src/components/Upload/SingleImage3.vue
+++ b/src/components/Upload/SingleImage3.vue
@ -86,15 +86,18 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import "~@/styles/mixin.scss";
+@import '~@/styles/mixin.scss';
+
 .upload-container {
+  @include clearfix;
  width: 100%;
  position: relative;
-  @include clearfix;
+
  .image-uploader {
    width: 35%;
    float: left;
  }
+
  .image-preview {
    width: 200px;
    height: 200px;
@ -102,15 +105,18 @@ export default {
    border: 1px dashed #d9d9d9;
    float: left;
    margin-left: 50px;
+
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
+
      img {
        width: 100%;
        height: 100%;
      }
    }
+
    .image-preview-action {
      position: absolute;
      width: 100%;
@ -122,21 +128,24 @@ export default {
      color: #fff;
      opacity: 0;
      font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;
+
      .el-icon-delete {
        font-size: 36px;
      }
    }
+
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
+
  .image-app-preview {
    width: 320px;
    height: 180px;
@ -144,6 +153,7 @@ export default {
    border: 1px dashed #d9d9d9;
    float: left;
    margin-left: 50px;
+
    .app-fake-conver {
      height: 44px;
      position: absolute;
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@ -3,7 +3,7 @@
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      Drop excel file here or
-      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
+      <el-button :loading="loading" style="margin-left: 16px;" size="mini" type="primary" @click="handleUpload">
        Browse
      </el-button>
    </div>
@ -119,11 +119,12 @@ export default {
 </script>

 <style scoped>
-.excel-upload-input{
+.excel-upload-input {
  display: none;
  z-index: -9999;
 }
-.drop{
+
+.drop {
  border: 2px dashed #bbb;
  width: 600px;
  height: 160px;
--- a/src/directive/waves/waves.css
+++ b/src/directive/waves/waves.css
@ -1,26 +1,26 @@
 .waves-ripple {
-    position: absolute;
-    border-radius: 100%;
-    background-color: rgba(0, 0, 0, 0.15);
-    background-clip: padding-box;
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-transform: scale(0);
-    -ms-transform: scale(0);
-    transform: scale(0);
-    opacity: 1;
+  position: absolute;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.15);
+  background-clip: padding-box;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  opacity: 1;
 }

 .waves-ripple.z-active {
-    opacity: 0;
-    -webkit-transform: scale(2);
-    -ms-transform: scale(2);
-    transform: scale(2);
-    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-}
+  opacity: 0;
+  -webkit-transform: scale(2);
+  -ms-transform: scale(2);
+  transform: scale(2);
+  -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
+}
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -8,7 +8,7 @@
      <template v-if="device!=='mobile'">
        <search id="header-search" class="right-menu-item" />

-        <error-log class="errLog-container right-menu-item hover-effect" />
+        <error-log class="err-log-container right-menu-item hover-effect" />

        <screenfull id="screenfull" class="right-menu-item hover-effect" />

@ -37,7 +37,7 @@
            <el-dropdown-item>Docs</el-dropdown-item>
          </a>
          <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display: block;">Log Out</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
@ -88,18 +88,18 @@ export default {
  overflow: hidden;
  position: relative;
  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;

    &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
    }
  }

@ -107,7 +107,7 @@ export default {
    float: left;
  }

-  .errLog-container {
+  .err-log-container {
    display: inline-block;
    vertical-align: top;
  }
@ -131,10 +131,10 @@ export default {

      &.hover-effect {
        cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;

        &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
        }
      }
    }
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@ -90,19 +90,19 @@ export default {

  .drawer-title {
    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
+    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 22px;
  }

  .drawer-item {
-    color: rgba(0, 0, 0, .65);
+    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    padding: 12px 0;
  }

  .drawer-switch {
-    float: right
+    float: right;
  }
 }
 </style>
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@ -32,6 +32,7 @@ export default {
 </script>

 <style lang="scss" scoped>
+
 .sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
 }
@ -75,7 +76,7 @@ export default {

  &.collapse {
    .sidebar-logo {
-      margin-right: 0px;
+      margin-right: 0;
    }
  }
 }
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@ -82,10 +82,12 @@ export default {
  position: relative;
  overflow: hidden;
  width: 100%;
+
  /deep/ {
    .el-scrollbar__bar {
-      bottom: 0px;
+      bottom: 0;
    }
+
    .el-scrollbar__wrap {
      height: 49px;
    }
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@ -203,7 +203,8 @@ export default {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+
  .tags-view-wrapper {
    .tags-view-item {
      display: inline-block;
@ -218,16 +219,20 @@ export default {
      font-size: 12px;
      margin-left: 5px;
      margin-top: 4px;
+
      &:first-of-type {
        margin-left: 15px;
      }
+
      &:last-of-type {
        margin-right: 15px;
      }
+
      &.active {
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
+
        &::before {
          content: '';
          background: #fff;
@ -241,6 +246,7 @@ export default {
      }
    }
  }
+
  .contextmenu {
    margin: 0;
    background: #fff;
@ -252,11 +258,13 @@ export default {
    font-size: 12px;
    font-weight: 400;
    color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
+
      &:hover {
        background: #eee;
      }
@ -275,13 +283,15 @@ export default {
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;
-      &:before {
-        transform: scale(.6);
+
+      &::before {
+        transform: scale(0.6);
        display: inline-block;
        vertical-align: -3px;
      }
+
      &:hover {
        background-color: #b4bccc;
        color: #fff;
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -58,8 +58,8 @@ export default {
 </script>

 <style lang="scss" scoped>
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/variables.scss";
+  @import '~@/styles/mixin.scss';
+  @import '~@/styles/variables.scss';

  .app-wrapper {
    @include clearfix;
@ -93,7 +93,7 @@ export default {
  }

  .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
+    width: calc(100% - 54px);
  }

  .mobile .fixed-header {
--- a/src/styles/btn.scss
+++ b/src/styles/btn.scss
@ -6,94 +6,87 @@
  &:hover {
    color: $color;

-    &:before,
-    &:after {
+    &::before,
+    &::after {
      background: $color;
    }
  }
 }

 .blue-btn {
-  @include colorBtn($blue)
-}
+  @include colorBtn($blue); }

 .light-blue-btn {
-  @include colorBtn($light-blue)
-}
+  @include colorBtn($light-blue); }

 .red-btn {
-  @include colorBtn($red)
-}
+  @include colorBtn($red); }

 .pink-btn {
-  @include colorBtn($pink)
-}
+  @include colorBtn($pink); }

 .green-btn {
-  @include colorBtn($green)
-}
+  @include colorBtn($green); }

 .tiffany-btn {
-  @include colorBtn($tiffany)
-}
+  @include colorBtn($tiffany); }

 .yellow-btn {
-  @include colorBtn($yellow)
-}
+  @include colorBtn($yellow); }

 .pan-btn {
-  font-size: 14px;
-  color: #fff;
-  padding: 14px 36px;
-  border-radius: 8px;
  border: none;
-  outline: none;
-  transition: 600ms ease all;
-  position: relative;
+  border-radius: 8px;
+  color: #fff;
  display: inline-block;
+  font-size: 14px;
+  outline: none;
+  padding: 14px 36px;
+  position: relative;
+  transition: 600ms ease all;

  &:hover {
    background: #fff;

-    &:before,
-    &:after {
-      width: 100%;
+    &::before,
+    &::after {
      transition: 600ms ease all;
+      width: 100%;
    }
  }

-  &:before,
-  &:after {
+  &::before,
+  &::after {
    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
    height: 2px;
-    width: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
    transition: 400ms ease all;
+    width: 0;
  }

  &::after {
+    bottom: 0;
+    left: 0;
    right: inherit;
    top: inherit;
-    left: 0;
-    bottom: 0;
  }
 }

 .custom-button {
-  display: inline-block;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  background: #fff;
-  color: #fff;
  -webkit-appearance: none;
-  text-align: center;
-  box-sizing: border-box;
-  outline: 0;
-  margin: 0;
-  padding: 10px 15px;
-  font-size: 14px;
+  background: #fff;
  border-radius: 4px;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1;
+  margin: 0;
+  outline: 0;
+  padding: 10px 15px;
+  text-align: center;
+  white-space: nowrap;
 }
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@ -1,12 +1,11 @@
 // cover some element-ui styles
-
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
  font-weight: 400 !important;
 }

 .el-upload {
-  input[type="file"] {
+  input[type='file'] {
    display: none !important;
  }
 }
@ -17,7 +16,7 @@

 .cell {
  .el-tag {
-    margin-right: 0px;
+    margin-right: 0;
  }
 }

@ -30,8 +29,8 @@

 .fixed-width {
  .el-button--mini {
-    padding: 7px 10px;
    min-width: 60px;
+    padding: 7px 10px;
  }
 }

@ -41,17 +40,17 @@
    text-align: center;

    .el-tag {
-      margin-right: 0px;
+      margin-right: 0;
    }
  }
 }

 // to fixed https://github.com/ElemeFE/element/issues/2461
 .el-dialog {
-  transform: none;
  left: 0;
-  position: relative;
  margin: 0 auto;
+  position: relative;
+  transform: none;
 }

 // refine element ui upload
@ -60,8 +59,8 @@
    width: 100%;

    .el-upload-dragger {
-      width: 100%;
      height: 200px;
+      width: 100%;
    }
  }
 }
@ -69,7 +68,7 @@
 // dropdown
 .el-dropdown-menu {
  a {
-    display: block
+    display: block;
  }
 }

--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@ -20,9 +20,9 @@ $--border-color-lighter: #e6ebf5;
 $--table-border: 1px solid #dfe6ec;

 /* icon font path, required */
-$--font-path: "~element-ui/lib/theme-chalk/fonts";
+$--font-path: '~element-ui/lib/theme-chalk/fonts';

-@import "~element-ui/packages/theme-chalk/src/index";
+@import '~element-ui/packages/theme-chalk/src/index';

 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -6,11 +6,11 @@
@import './btn.scss';

 body {
-  height: 100%;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
+  height: 100%;
  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }

 label {
@ -18,8 +18,8 @@ label {
 }

 html {
-  height: 100%;
  box-sizing: border-box;
+  height: 100%;
 }

 #app {
@ -27,13 +27,13 @@ html {
 }

 *,
-*:before,
-*:after {
+*::before,
+*::after {
  box-sizing: inherit;
 }

 .no-padding {
-  padding: 0px !important;
+  padding: 0 !important;
 }

 .padding-content {
@ -48,8 +48,8 @@ a:active {
 a,
 a:focus,
 a:hover {
-  cursor: pointer;
  color: inherit;
+  cursor: pointer;
  text-decoration: none;
 }

@ -81,33 +81,33 @@ div:focus {
  cursor: pointer;
 }

-.inlineBlock {
+.inline-block {
  display: block;
 }

 .clearfix {
-  &:after {
-    visibility: hidden;
+  &::after {
+    clear: both;
+    content: ' ';
    display: block;
    font-size: 0;
-    content: " ";
-    clear: both;
    height: 0;
+    visibility: hidden;
  }
 }

 aside {
  background: #eef1f6;
-  padding: 8px 24px;
-  margin-bottom: 20px;
  border-radius: 2px;
-  display: block;
-  line-height: 32px;
-  font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  line-height: 32px;
+  margin-bottom: 20px;
+  padding: 8px 24px;

  a {
    color: #337ab7;
@ -134,22 +134,22 @@ aside {
 }

 .text-center {
-  text-align: center
+  text-align: center;
 }

 .sub-navbar {
+  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
  height: 50px;
  line-height: 50px;
-  position: relative;
-  width: 100%;
-  text-align: right;
  padding-right: 20px;
+  position: relative;
+  text-align: right;
  transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  width: 100%;

  .subtitle {
-    font-size: 20px;
    color: #fff;
+    font-size: 20px;
  }

  &.draft {
@ -176,8 +176,8 @@ aside {

  .filter-item {
    display: inline-block;
-    vertical-align: middle;
    margin-bottom: 10px;
+    vertical-align: middle;
  }
 }

--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@ -1,8 +1,8 @@
@mixin clearfix {
-  &:after {
-    content: "";
-    display: table;
+  &::after {
    clear: both;
+    content: '';
+    display: table;
  }
 }

@ -22,15 +22,15 @@
 }

@mixin relative {
+  height: 100%;
  position: relative;
  width: 100%;
-  height: 100%;
 }

@mixin pct($pct) {
-  width: #{$pct};
-  position: relative;
  margin: 0 auto;
+  position: relative;
+  width: #{$pct};
 }

@mixin triangle($width, $height, $color, $direction) {
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@ -1,8 +1,7 @@
 #app {
-
  .main-container {
    min-height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left 0.28s;
    margin-left: $sideBarWidth;
    position: relative;
  }
@ -13,7 +12,7 @@
    background-color: $menuBg;
    height: 100%;
    position: fixed;
-    font-size: 0px;
+    font-size: 0;
    top: 0;
    bottom: 0;
    left: 0;
@ -30,7 +29,7 @@
    }

    .el-scrollbar__bar.is-vertical {
-      right: 0px;
+      right: 0;
    }

    .el-scrollbar {
@ -146,11 +145,11 @@
  // mobile responsive
  .mobile {
    .main-container {
-      margin-left: 0px;
+      margin-left: 0;
    }

    .sidebar-container {
-      transition: transform .28s;
+      transition: transform 0.28s;
      width: $sideBarWidth !important;
    }

@ -164,7 +163,6 @@
  }

  .withoutAnimation {
-
    .main-container,
    .sidebar-container {
      transition: none;
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@ -14,7 +14,7 @@
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {
-  transition: all .5s;
+  transition: all 0.5s;
 }

 .fade-transform-enter {
@ -30,7 +30,7 @@
 /* breadcrumb transition */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all .5s;
+  transition: all 0.5s;
 }

 .breadcrumb-enter,
@ -40,7 +40,7 @@
 }

 .breadcrumb-move {
-  transition: all .5s;
+  transition: all 0.5s;
 }

 .breadcrumb-leave-active {
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@ -1,23 +1,23 @@
 // base color
-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
+$blue: #324157;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;

 // sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+$menuText: #bfcbd9;
+$menuActiveText: #409eff;
+$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951

-$menuBg:#304156;
-$menuHover:#263445;
+$menuBg: #304156;
+$menuHover: #263445;

-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+$subMenuBg: #1f2d3d;
+$subMenuHover: #001528;

 $sideBarWidth: 210px;

--- a/src/views/charts/keyboard.vue
+++ b/src/views/charts/keyboard.vue
@ -14,10 +14,10 @@ export default {
 </script>

 <style scoped>
-.chart-container{
+.chart-container {
+  height: calc(100vh - 84px);
  position: relative;
  width: 100%;
-  height: calc(100vh - 84px);
 }
 </style>

--- a/src/views/charts/line.vue
+++ b/src/views/charts/line.vue
@ -14,10 +14,10 @@ export default {
 </script>

 <style scoped>
-.chart-container{
+.chart-container {
+  height: calc(100vh - 84px);
  position: relative;
  width: 100%;
-  height: calc(100vh - 84px);
 }
 </style>

--- a/src/views/charts/mix-chart.vue
+++ b/src/views/charts/mix-chart.vue
@ -14,10 +14,10 @@ export default {
 </script>

 <style scoped>
-.chart-container{
+.chart-container {
+  height: calc(100vh - 84px);
  position: relative;
  width: 100%;
-  height: calc(100vh - 84px);
 }
 </style>

--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@ -2,13 +2,21 @@
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="use clipboard  directly" name="directly">
-        <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
+        <el-input
+          v-model="inputData"
+          placeholder="Please input"
+          :style="inputStyle"
+        />
        <el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">
          copy
        </el-button>
      </el-tab-pane>
      <el-tab-pane label="use clipboard by v-directive" name="v-directive">
-        <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
+        <el-input
+          v-model="inputData"
+          placeholder="Please input"
+          :style="inputStyle"
+        />
        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
          copy
        </el-button>
@ -29,6 +37,10 @@ export default {
  data() {
    return {
      activeName: 'directly',
+      inputStyle: {
+        maxWidth: '100%',
+        width: '400px'
+      },
      inputData: 'https://github.com/PanJiaChen/vue-element-admin'
    }
  },
--- a/src/views/components-demo/avatar-upload.vue
+++ b/src/views/components-demo/avatar-upload.vue
@ -7,7 +7,14 @@

    <pan-thumb :image="image" />

-    <el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
+    <el-button
+      type="primary"
+      icon="el-icon-upload"
+      style="bottom: 15px;
+  margin-left: 40px;
+  position: absolute;"
+      @click="imagecropperShow=true"
+    >
      Change Avatar
    </el-button>

@ -52,10 +59,10 @@ export default {
 </script>

 <style scoped>
-  .avatar{
-    width: 200px;
-    height: 200px;
+  .avatar {
    border-radius: 50%;
+    height: 200px;
+    width: 200px;
  }
 </style>

--- a/src/views/components-demo/count-to.vue
+++ b/src/views/components-demo/count-to.vue
@ -15,7 +15,7 @@
      :autoplay="false"
      class="example"
    />
-    <div style="margin-left: 25%;margin-top: 40px;">
+    <div style="margin-left: 25%; margin-top: 40px;">
      <label class="label" for="startValInput">startVal:
        <input v-model.number="setStartVal" type="number" name="startValInput">
      </label>
@ -25,7 +25,7 @@
      <label class="label" for="durationInput">duration:
        <input v-model.number="setDuration" type="number" name="durationInput">
      </label>
-      <div class="startBtn example-btn" @click="start">
+      <div class="start-btn example-btn" @click="start">
        Start
      </div>
      <div class="pause-resume-btn example-btn" @click="pauseResume">
@ -124,95 +124,96 @@ export default {

 <style scoped>
 .example-btn {
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid transparent;
+  border-color: #d9d9d9;
+  border-radius: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  cursor: pointer;
  display: inline-block;
-  margin-bottom: 0;
+  font-size: 12px;
  font-weight: 500;
+  line-height: 1.5;
+  margin-bottom: 0;
+  padding: 4px 15px;
+  position: relative;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  line-height: 1.5;
-  padding: 4px 15px;
-  font-size: 12px;
-  border-radius: 4px;
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
-  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
-  transition: all .3s cubic-bezier(.645, .045, .355, 1);
-  position: relative;
-  color: rgba(0, 0, 0, .65);
-  background-color: #fff;
-  border-color: #d9d9d9;
+  white-space: nowrap;
 }

 .example-btn:hover {
-  color: #4AB7BD;
  background-color: #fff;
-  border-color: #4AB7BD;
+  border-color: #4ab7bd;
+  color: #4ab7bd;
 }
+
 .example {
-  font-size: 50px;
-  color: #F6416C;
+  color: #f6416c;
  display: block;
-  margin: 10px 0;
-  text-align: center;
+  font-size: 50px;
  font-size: 80px;
  font-weight: 500;
+  margin: 10px 0;
+  text-align: center;
 }

 .label {
  color: #2f4f4f;
-  font-size: 16px;
  display: inline-block;
+  font-size: 16px;
  margin: 15px 30px 15px 0;
 }

 input {
-  position: relative;
-  display: inline-block;
-  padding: 4px 7px;
-  width: 70px;
-  height: 28px;
-  cursor: text;
-  font-size: 12px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, .65);
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
-  -webkit-transition: all .3s;
-  transition: all .3s;
+  color: rgba(0, 0, 0, 0.65);
+  cursor: text;
+  display: inline-block;
+  font-size: 12px;
+  height: 28px;
+  line-height: 1.5;
+  padding: 4px 7px;
+  position: relative;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  width: 70px;
 }

-.startBtn {
-  margin-left: 20px;
-  font-size: 20px;
-  color: #30B08F;
+.start-btn {
  background-color: #fff;
+  color: #30b08f;
+  font-size: 20px;
+  margin-left: 20px;
 }

-.startBtn:hover {
-  background-color: #30B08F;
+.start-btn:hover {
+  background-color: #30b08f;
+  border-color: #30b08f;
  color: #fff;
-  border-color: #30B08F;
 }

 .pause-resume-btn {
-  font-size: 20px;
-  color: #E65D6E;
  background-color: #fff;
+  color: #e65d6e;
+  font-size: 20px;
 }

 .pause-resume-btn:hover {
-  background-color: #E65D6E;
+  background-color: #e65d6e;
+  border-color: #e65d6e;
  color: #fff;
-  border-color: #E65D6E;
 }
 </style>

--- a/src/views/components-demo/drag-kanban.vue
+++ b/src/views/components-demo/drag-kanban.vue
@ -38,24 +38,27 @@ export default {
 </script>
 <style lang="scss">
 .board {
-  width: 1000px;
-  margin-left: 20px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: row;
  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-left: 20px;
+  width: 1000px;
 }
+
 .kanban {
  &.todo {
    .board-column-header {
-      background: #4A9FF9;
+      background: #4a9ff9;
    }
  }
+
  &.working {
    .board-column-header {
      background: #f9944a;
    }
  }
+
  &.done {
    .board-column-header {
      background: #2ac06d;
--- a/src/views/components-demo/drag-select.vue
+++ b/src/views/components-demo/drag-select.vue
@ -1,11 +1,11 @@
 <template>
  <div class="components-container">
-    <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
+    <el-drag-select v-model="value" style="width: 500px;" multiple placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-drag-select>

-    <div style="margin-top:30px;">
-      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">
+    <div style="margin-top: 30px;">
+      <el-tag v-for="item of value" :key="item" style="margin-right: 15px;">
        {{ item }}
      </el-tag>
    </div>
--- a/src/views/components-demo/json-editor.vue
+++ b/src/views/components-demo/json-editor.vue
@ -28,9 +28,9 @@ export default {
 </script>

 <style scoped>
-.editor-container{
-  position: relative;
+.editor-container {
  height: 100%;
+  position: relative;
 }
 </style>

--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@ -42,7 +42,7 @@
      <markdown-editor ref="markdownEditor" v-model="content4" :language="language" height="300px" />
    </div>

-    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
+    <el-button style="margin-top: 80px;" type="primary" icon="el-icon-document" @click="getHtml">
      Get HTML
    </el-button>
    <div v-html="html" />
@ -92,10 +92,11 @@ export default {
 </script>

 <style scoped>
-.editor-container{
+.editor-container {
  margin-bottom: 30px;
 }
-.tag-title{
+
+.tag-title {
  margin-bottom: 5px;
 }
 </style>
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@ -5,7 +5,7 @@
        <div slot="header" class="clearfix">
          <span>Buttons</span>
        </div>
-        <div style="margin-bottom:50px;">
+        <div style="margin-bottom: 50px;">
          <el-col :span="4" class="text-center">
            <router-link class="pan-btn blue-btn" to="/documentation/index">
              Documentation
@ -40,13 +40,13 @@
      </el-card>
    </el-row>

-    <el-row :gutter="20" style="margin-top:50px;">
+    <el-row :gutter="20" style="margin-top: 50px;">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Material Design 的input</span>
          </div>
-          <div style="height:100px;">
+          <div style="height: 100px;">
            <el-form :model="demo" :rules="demoRules">
              <el-form-item prop="title">
                <md-input v-model="demo.title" icon="el-icon-search" name="title" placeholder="输入标题">
@ -96,14 +96,14 @@
      </el-col>
    </el-row>

-    <el-row :gutter="20" style="margin-top:50px;">
+    <el-row :gutter="20" style="margin-top: 50px;">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Share</span>
          </div>
-          <div class="component-item" style="height:420px;">
-            <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章" />
+          <div class="component-item" style="height: 420px;">
+            <dropdown-menu :items="articleList" style="margin: 0 auto;" title="系列文章" />
          </div>
        </el-card>
      </el-col>
@ -160,10 +160,11 @@ export default {
 <style scoped>
 .mixin-components-container {
  background-color: #f0f2f5;
-  padding: 30px;
  min-height: calc(100vh - 84px);
+  padding: 30px;
 }
-.component-item{
+
+.component-item {
  min-height: 100px;
 }
 </style>
--- a/src/views/components-demo/split-pane.vue
+++ b/src/views/components-demo/split-pane.vue
@ -39,29 +39,29 @@ export default {

 <style  scoped>
  .components-container {
-    position: relative;
    height: 100vh;
+    position: relative;
  }

  .left-container {
-    background-color: #F38181;
+    background-color: #f38181;
    height: 100%;
  }

  .right-container {
-    background-color: #FCE38A;
+    background-color: #fce38a;
    height: 200px;
  }

  .top-container {
-    background-color: #FCE38A;
-    width: 100%;
+    background-color: #fce38a;
    height: 100%;
+    width: 100%;
  }

  .bottom-container {
-    width: 100%;
-    background-color: #95E1D3;
+    background-color: #95e1d3;
    height: 100%;
+    width: 100%;
  }
 </style>
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@ -18,7 +18,7 @@
        <el-button plain>
          Link<i class="el-icon-caret-bottom el-icon--right" />
        </el-button>
-        <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
+        <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width: 300px;">
          <el-input v-model="url" placeholder="Please enter the content">
            <template slot="prepend">
              Url
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@ -29,7 +29,7 @@ export default {
 </script>

 <style scoped>
-.editor-content{
+.editor-content {
  margin-top: 20px;
 }
 </style>
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@ -1,12 +1,12 @@
 <template>
-  <el-card class="box-card-component" style="margin-left:8px;">
+  <el-card class="box-card-component" style="margin-left: 8px;">
    <div slot="header" class="box-card-header">
      <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
    </div>
-    <div style="position:relative;">
-      <pan-thumb :image="avatar" class="panThumb" />
+    <div style="position: relative;">
+      <pan-thumb :image="avatar" class="pan-thumb" />
      <mallki class-name="mallki-text" text="vue-element-admin" />
-      <div style="padding-top:35px;" class="progress-item">
+      <div style="padding-top: 35px;" class="progress-item">
        <span>Vue</span>
        <el-progress :percentage="70" />
      </div>
@ -62,55 +62,61 @@ export default {
 </script>

 <style lang="scss" >
-.box-card-component{
+.box-card-component {
  .el-card__header {
-    padding: 0px!important;
+    padding: 0 !important;
  }
 }
 </style>
 <style lang="scss" scoped>
 .box-card-component {
  .box-card-header {
-    position: relative;
    height: 220px;
+    position: relative;
+
    img {
-      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
+      width: 100%;
+
      &:hover {
-        transform: scale(1.1, 1.1);
        filter: contrast(130%);
+        transform: scale(1.1, 1.1);
      }
    }
  }
+
  .mallki-text {
-    position: absolute;
-    top: 0px;
-    right: 0px;
    font-size: 20px;
    font-weight: bold;
+    position: absolute;
+    right: 0;
+    top: 0;
  }
-  .panThumb {
-    z-index: 100;
-    height: 70px!important;
-    width: 70px!important;
-    position: absolute!important;
-    top: -45px;
-    left: 0px;
-    border: 5px solid #ffffff;
+
+  .pan-thumb {
    background-color: #fff;
+    border: 5px solid #fff;
+    box-shadow: none !important;
+    height: 70px !important;
+    left: 0;
    margin: auto;
-    box-shadow: none!important;
+    position: absolute !important;
+    top: -45px;
+    width: 70px !important;
+    z-index: 100;
+
    /deep/ .pan-info {
-      box-shadow: none!important;
+      box-shadow: none !important;
    }
  }
+
  .progress-item {
-    margin-bottom: 10px;
    font-size: 14px;
+    margin-bottom: 10px;
  }
-  @media only screen and (max-width: 1510px){
-    .mallki-text{
+  @media only screen and (max-width: 1510px) {
+    .mallki-text {
      display: none;
    }
  }
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@ -79,15 +79,15 @@ export default {
  }

  .card-panel {
-    height: 108px;
+    background: #fff;
+    border-color: rgba(0, 0, 0, 0.05);
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    color: #666;
    cursor: pointer;
    font-size: 12px;
-    position: relative;
+    height: 108px;
    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
+    position: relative;

    &:hover {
      .card-panel-icon-wrapper {
@ -107,7 +107,7 @@ export default {
      }

      .icon-shopping {
-        background: #34bfa3
+        background: #34bfa3;
      }
    }

@ -124,15 +124,15 @@ export default {
    }

    .icon-shopping {
-      color: #34bfa3
+      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
+      border-radius: 6px;
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
-      border-radius: 6px;
    }

    .card-panel-icon {
@ -144,12 +144,12 @@ export default {
      float: right;
      font-weight: bold;
      margin: 26px;
-      margin-left: 0px;
+      margin-left: 0;

      .card-panel-text {
-        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
+        line-height: 18px;
        margin-bottom: 12px;
      }

@ -167,14 +167,14 @@ export default {

  .card-panel-icon-wrapper {
    float: none !important;
-    width: 100%;
    height: 100%;
    margin: 0 !important;
+    width: 100%;

    .svg-icon {
      display: block;
-      margin: 14px auto !important;
      float: none !important;
+      margin: 14px auto !important;
    }
  }
 }
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ b/src/views/dashboard/admin/components/TodoList/index.scss
@ -1,298 +1,346 @@
 .todoapp {
-  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  line-height: 1.4em;
+  background: #fff;
  color: #4d4d4d;
-  min-width: 230px;
-  max-width: 550px;
-  margin: 0 auto ;
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
-  background: #fff;
-  z-index: 1;
+  line-height: 1.4em;
+  margin: 0 auto;
+  max-width: 550px;
+  min-width: 230px;
  position: relative;
+  z-index: 1;
+
  button {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: none;
-    font-size: 100%;
-    vertical-align: baseline;
-    font-family: inherit;
-    font-weight: inherit;
-    color: inherit;
    -webkit-appearance: none;
    appearance: none;
+    background: none;
+    border: 0;
+    color: inherit;
+    font-family: inherit;
+    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+    vertical-align: baseline;
  }
+
  :focus {
    outline: 0;
  }
+
  .hidden {
    display: none;
  }
+
  .todoapp {
    background: #fff;
-    margin: 130px 0 40px 0;
-    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+    margin: 130px 0 40px;
+    position: relative;
  }
+
  .todoapp input::-webkit-input-placeholder {
+    color: #e6e6e6;
    font-style: italic;
    font-weight: 300;
-    color: #e6e6e6;
  }
+
  .todoapp input::-moz-placeholder {
+    color: #e6e6e6;
    font-style: italic;
    font-weight: 300;
-    color: #e6e6e6;
  }
+
  .todoapp input::input-placeholder {
+    color: #e6e6e6;
    font-style: italic;
    font-weight: 300;
-    color: #e6e6e6;
  }
+
  .todoapp h1 {
-    position: absolute;
-    top: -155px;
-    width: 100%;
+    color: rgba(175, 47, 47, 0.15);
    font-size: 100px;
    font-weight: 100;
+    position: absolute;
    text-align: center;
-    color: rgba(175, 47, 47, 0.15);
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
+    top: -155px;
+    width: 100%;
  }
+
  .new-todo,
  .edit {
-    position: relative;
-    margin: 0;
-    width: 100%;
-    font-size: 18px;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: 1.4em;
    border: 0;
-    color: inherit;
-    padding: 6px;
    border: 1px solid #999;
    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
+    color: inherit;
+    font-family: inherit;
+    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
+    font-weight: inherit;
+    line-height: 1.4em;
+    margin: 0;
+    padding: 6px;
+    position: relative;
+    width: 100%;
  }
+
  .new-todo {
-    padding: 10px 16px 16px 60px;
-    border: none;
    background: rgba(0, 0, 0, 0.003);
+    border: none;
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+    padding: 10px 16px 16px 60px;
  }
+
  .main {
+    border-top: 1px solid #e6e6e6;
    position: relative;
    z-index: 2;
-    border-top: 1px solid #e6e6e6;
  }
+
  .toggle-all {
-    text-align: center;
    border: none;
    /* Mobile Safari */
    opacity: 0;
    position: absolute;
+    text-align: center;
  }
+
  .toggle-all+label {
-    width: 60px;
-    height: 34px;
    font-size: 0;
+    height: 34px;
+    left: -13px;
    position: absolute;
    top: -52px;
-    left: -13px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
+    width: 60px;
  }
-  .toggle-all+label:before {
+
+  .toggle-all+label::before {
+    color: #e6e6e6;
    content: '❯';
    font-size: 22px;
-    color: #e6e6e6;
-    padding: 10px 27px 10px 27px;
+    padding: 10px 27px;
  }
-  .toggle-all:checked+label:before {
+
+  .toggle-all:checked+label::before {
    color: #737373;
  }
+
  .todo-list {
+    list-style: none;
    margin: 0;
    padding: 0;
-    list-style: none;
  }
+
  .todo-list li {
-    position: relative;
-    font-size: 24px;
    border-bottom: 1px solid #ededed;
+    font-size: 24px;
+    position: relative;
  }
+
  .todo-list li:last-child {
    border-bottom: none;
  }
+
  .todo-list li.editing {
    border-bottom: none;
    padding: 0;
  }
+
  .todo-list li.editing .edit {
    display: block;
-    width: 506px;
-    padding: 12px 16px;
    margin: 0 0 0 43px;
+    padding: 12px 16px;
+    width: 506px;
  }
+
  .todo-list li.editing .view {
    display: none;
  }
+
  .todo-list li .toggle {
-    text-align: center;
-    width: 40px;
-    /* auto, since non-WebKit browsers doesn't support input styling */
-    height: auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    border: none;
    /* Mobile Safari */
    -webkit-appearance: none;
    appearance: none;
+    border: none;
+    bottom: 0;
+    /* auto, since non-WebKit browsers doesn't support input styling */
+    height: auto;
+    margin: auto 0;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 40px;
  }
+
  .todo-list li .toggle {
    opacity: 0;
  }
+
  .todo-list li .toggle+label {
    /*
    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
  */
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
-    background-repeat: no-repeat;
    background-position: center left;
+    background-repeat: no-repeat;
    background-size: 36px;
  }
+
  .todo-list li .toggle:checked+label {
-    background-size: 36px;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+    background-size: 36px;
  }
+
  .todo-list li label {
-    word-break: break-all;
-    padding: 15px 15px 15px 50px;
    display: block;
-    line-height: 1.0;
-        font-size: 14px;
+    font-size: 14px;
+    line-height: 1;
+    padding: 15px 15px 15px 50px;
    transition: color 0.4s;
+    word-break: break-all;
  }
+
  .todo-list li.completed label {
    color: #d9d9d9;
    text-decoration: line-through;
  }
+
  .todo-list li .destroy {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 10px;
    bottom: 0;
-    width: 40px;
+    color: #cc9a9a;
+    cursor: pointer;
+    display: none;
+    font-size: 30px;
    height: 40px;
    margin: auto 0;
-    font-size: 30px;
-    color: #cc9a9a;
+    position: absolute;
+    right: 10px;
+    top: 0;
    transition: color 0.2s ease-out;
-    cursor: pointer;
+    width: 40px;
  }
+
  .todo-list li .destroy:hover {
    color: #af5b5e;
  }
-  .todo-list li .destroy:after {
+
+  .todo-list li .destroy::after {
    content: '×';
  }
+
  .todo-list li:hover .destroy {
    display: block;
  }
+
  .todo-list li .edit {
    display: none;
  }
+
  .todo-list li.editing:last-child {
    margin-bottom: -1px;
  }
+
  .footer {
-    color: #777;
-    position: relative;
-    padding: 10px 15px;
-    height: 40px;
-    text-align: center;
    border-top: 1px solid #e6e6e6;
+    color: #777;
+    height: 40px;
+    padding: 10px 15px;
+    position: relative;
+    text-align: center;
  }
-  .footer:before {
+
+  .footer::before {
+    bottom: 0;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
    content: '';
+    height: 40px;
+    left: 0;
+    overflow: hidden;
    position: absolute;
    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 40px;
-    overflow: hidden;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
  }
+
  .todo-count {
    float: left;
    text-align: left;
  }
+
  .todo-count strong {
    font-weight: 300;
  }
+
  .filters {
+    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
-    list-style: none;
  }
+
  .filters li {
    display: inline;
  }
+
  .filters li a {
+    border: 1px solid transparent;
+    border-radius: 3px;
    color: inherit;
    font-size: 12px;
    padding: 3px 7px;
    text-decoration: none;
-    border: 1px solid transparent;
-    border-radius: 3px;
  }
+
  .filters li a:hover {
    border-color: rgba(175, 47, 47, 0.1);
  }
+
  .filters li a.selected {
    border-color: rgba(175, 47, 47, 0.2);
  }
+
  .clear-completed,
  html .clear-completed:active {
-    float: right;
-    position: relative;
-    line-height: 20px;
-    text-decoration: none;
    cursor: pointer;
+    float: right;
+    line-height: 20px;
+    position: relative;
+    text-decoration: none;
  }
+
  .clear-completed:hover {
    text-decoration: underline;
  }
+
  .info {
-    margin: 65px auto 0;
    color: #bfbfbf;
    font-size: 10px;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    margin: 65px auto 0;
    text-align: center;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }
+
  .info p {
    line-height: 1;
  }
+
  .info a {
    color: inherit;
-    text-decoration: none;
    font-weight: 400;
+    text-decoration: none;
  }
+
  .info a:hover {
    text-decoration: underline;
  }
@ -300,11 +348,12 @@
  Hack to remove background from Mobile Safari.
  Can't use it globally since it destroys checkboxes in Firefox
 */
-  @media screen and (-webkit-min-device-pixel-ratio:0) {
+  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .toggle-all,
    .todo-list li .toggle {
      background: none;
    }
+
    .todo-list li .toggle {
      height: 40px;
    }
@ -313,6 +362,7 @@
    .footer {
      height: 50px;
    }
+
    .filters {
      bottom: 10px;
    }
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@ -1,5 +1,5 @@
 <template>
-  <el-table :data="list" style="width: 100%;padding-top: 15px;">
+  <el-table :data="list" style="padding-top: 15px;width: 100%;">
    <el-table-column label="Order_No" min-width="200">
      <template slot-scope="scope">
        {{ scope.row.order_no | orderNoFilter }}
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@ -4,7 +4,7 @@

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+    <el-row style="background: #fff;margin-bottom: 32px;padding: 16px 16px 0;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

@ -27,13 +27,13 @@
    </el-row>

    <el-row :gutter="8">
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
+      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="margin-bottom: 30px;padding-right: 8px;">
        <transaction-table />
      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
+      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom: 30px;">
        <todo-list />
      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
+      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom: 30px;">
        <box-card />
      </el-col>
    </el-row>
@ -98,21 +98,21 @@ export default {

 <style lang="scss" scoped>
 .dashboard-editor-container {
-  padding: 32px;
  background-color: rgb(240, 242, 245);
+  padding: 32px;
  position: relative;

  .github-corner {
-    position: absolute;
-    top: 0px;
    border: 0;
+    position: absolute;
    right: 0;
+    top: 0;
  }

  .chart-wrapper {
    background: #fff;
-    padding: 16px 16px 0;
    margin-bottom: 32px;
+    padding: 16px 16px 0;
  }
 }

--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@ -1,18 +1,18 @@
 <template>
  <div class="dashboard-editor-container">
    <div class=" clearfix">
-      <pan-thumb :image="avatar" style="float: left">
+      <pan-thumb :image="avatar" style="float: left;">
        Your roles:
        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
      </pan-thumb>
-      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
+      <github-corner style=" border: 0;position: absolute; right: 0; top: 0;" />
      <div class="info-container">
-        <span class="display_name">{{ name }}</span>
-        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
+        <span class="display-name">{{ name }}</span>
+        <span style="display: inline-block;font-size: 20px;padding-top: 20px;">Editor's Dashboard</span>
      </div>
    </div>
    <div>
-      <img :src="emptyGif" class="emptyGif">
+      <img :src="emptyGif" class="empty-gif">
    </div>
  </div>
 </template>
@ -41,31 +41,34 @@ export default {
 </script>

 <style lang="scss" scoped>
-  .emptyGif {
+  .empty-gif {
    display: block;
-    width: 45%;
    margin: 0 auto;
+    width: 45%;
  }

  .dashboard-editor-container {
    background-color: #e3e3e3;
    min-height: 100vh;
-    padding: 50px 60px 0px;
+    padding: 50px 60px 0;
+
    .pan-info-roles {
-      font-size: 12px;
-      font-weight: 700;
      color: #333;
      display: block;
+      font-size: 12px;
+      font-weight: 700;
    }
+
    .info-container {
-      position: relative;
-      margin-left: 190px;
      height: 150px;
      line-height: 200px;
-      .display_name {
+      margin-left: 190px;
+      position: relative;
+
+      .display-name {
+        color: #212121;
        font-size: 48px;
        line-height: 48px;
-        color: #212121;
        position: absolute;
        top: 25px;
      }
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@ -34,23 +34,23 @@ export default {

 <style lang="scss" scoped>
 .documentation-container {
-  margin: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
+  margin: 50px;

  .document-btn {
-    flex-shrink: 0;
-    display: block;
-    cursor: pointer;
    background: black;
    color: white;
-    height: 60px;
-    width: 200px;
-    margin-bottom: 16px;
-    line-height: 60px;
+    cursor: pointer;
+    display: block;
+    flex-shrink: 0;
    font-size: 20px;
+    height: 60px;
+    line-height: 60px;
+    margin-bottom: 16px;
    text-align: center;
+    width: 200px;
  }
 }
 </style>
--- a/src/views/error-log/index.vue
+++ b/src/views/error-log/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="errPage-container">
+  <div class="err-page-container">
    <ErrorA />
    <ErrorB />
    <h3>Please click the bug icon in the upper right corner</h3>
@ -26,7 +26,7 @@ export default {
 </script>

 <style scoped>
-  .errPage-container {
+  .err-page-container {
    padding: 30px;
  }
 </style>
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="errPage-container">
+  <div class="err-page-container">
    <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
      返回
    </el-button>
@ -59,37 +59,45 @@ export default {
 </script>

 <style lang="scss" scoped>
-  .errPage-container {
-    width: 800px;
-    max-width: 100%;
+  .err-page-container {
    margin: 100px auto;
+    max-width: 100%;
+    width: 800px;
+
    .pan-back-btn {
      background: #008489;
+      border: none !important;
      color: #fff;
-      border: none!important;
    }
+
    .pan-gif {
-      margin: 0 auto;
      display: block;
+      margin: 0 auto;
    }
+
    .pan-img {
      display: block;
      margin: 0 auto;
      width: 100%;
    }
+
    .text-jumbo {
+      color: #484848;
      font-size: 60px;
      font-weight: 700;
-      color: #484848;
    }
+
    .list-unstyled {
      font-size: 14px;
+
      li {
        padding-bottom: 5px;
      }
+
      a {
        color: #008489;
        text-decoration: none;
+
        &:hover {
          text-decoration: underline;
        }
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@ -10,7 +10,7 @@
      <div class="bullshit">
        <div class="bullshit__oops">OOPS!</div>
        <div class="bullshit__info">All rights reserved
-          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+          <a style="color: #20a0ff;" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
        </div>
        <div class="bullshit__headline">{{ message }}</div>
        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
@ -33,194 +33,216 @@ export default {
 </script>

 <style lang="scss" scoped>
-.wscn-http404-container{
-  transform: translate(-50%,-50%);
+.wscn-http404-container {
+  left: 50%;
  position: absolute;
  top: 40%;
-  left: 50%;
+  transform: translate(-50%, -50%);
 }
+
 .wscn-http404 {
+  overflow: hidden;
+  padding: 0 50px;
  position: relative;
  width: 1200px;
-  padding: 0 50px;
-  overflow: hidden;
+
  .pic-404 {
-    position: relative;
    float: left;
-    width: 600px;
    overflow: hidden;
+    position: relative;
+    width: 600px;
+
    &__parent {
      width: 100%;
    }
+
    &__child {
      position: absolute;
+
      &.left {
-        width: 80px;
-        top: 17px;
+        animation-delay: 1s;
+        animation-duration: 2s;
+        animation-fill-mode: forwards;
+        animation-name: cloudLeft;
+        animation-timing-function: linear;
        left: 220px;
        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
+        top: 17px;
+        width: 80px;
      }
+
      &.mid {
-        width: 46px;
-        top: 10px;
+        animation-delay: 1.2s;
+        animation-duration: 2s;
+        animation-fill-mode: forwards;
+        animation-name: cloudMid;
+        animation-timing-function: linear;
        left: 420px;
        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1.2s;
+        top: 10px;
+        width: 46px;
      }
+
      &.right {
-        width: 62px;
-        top: 100px;
+        animation-delay: 1s;
+        animation-duration: 2s;
+        animation-fill-mode: forwards;
+        animation-name: cloudRight;
+        animation-timing-function: linear;
        left: 500px;
        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
+        top: 100px;
+        width: 62px;
      }
      @keyframes cloudLeft {
        0% {
-          top: 17px;
          left: 220px;
          opacity: 0;
+          top: 17px;
        }
+
        20% {
-          top: 33px;
          left: 188px;
          opacity: 1;
+          top: 33px;
        }
+
        80% {
-          top: 81px;
          left: 92px;
          opacity: 1;
+          top: 81px;
        }
+
        100% {
-          top: 97px;
          left: 60px;
          opacity: 0;
+          top: 97px;
        }
      }
      @keyframes cloudMid {
        0% {
-          top: 10px;
          left: 420px;
          opacity: 0;
+          top: 10px;
        }
+
        20% {
-          top: 40px;
          left: 360px;
          opacity: 1;
+          top: 40px;
        }
+
        70% {
-          top: 130px;
          left: 180px;
          opacity: 1;
+          top: 130px;
        }
+
        100% {
-          top: 160px;
          left: 120px;
          opacity: 0;
+          top: 160px;
        }
      }
      @keyframes cloudRight {
        0% {
-          top: 100px;
          left: 500px;
          opacity: 0;
+          top: 100px;
        }
+
        20% {
-          top: 120px;
          left: 460px;
          opacity: 1;
+          top: 120px;
        }
+
        80% {
-          top: 180px;
          left: 340px;
          opacity: 1;
+          top: 180px;
        }
+
        100% {
-          top: 200px;
          left: 300px;
          opacity: 0;
+          top: 200px;
        }
      }
    }
  }
+
  .bullshit {
-    position: relative;
    float: left;
-    width: 300px;
-    padding: 30px 0;
    overflow: hidden;
+    padding: 30px 0;
+    position: relative;
+    width: 300px;
+
    &__oops {
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+      animation-name: slideUp;
+      color: #1482f0;
      font-size: 32px;
      font-weight: bold;
      line-height: 40px;
-      color: #1482f0;
-      opacity: 0;
      margin-bottom: 20px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;
-    }
-    &__headline {
-      font-size: 20px;
-      line-height: 24px;
-      color: #222;
-      font-weight: bold;
      opacity: 0;
-      margin-bottom: 10px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
    }
+
+    &__headline {
+      animation-delay: 0.1s;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+      animation-name: slideUp;
+      color: #222;
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 24px;
+      margin-bottom: 10px;
+      opacity: 0;
+    }
+
    &__info {
+      animation-delay: 0.2s;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+      animation-name: slideUp;
+      color: grey;
      font-size: 13px;
      line-height: 21px;
-      color: grey;
-      opacity: 0;
      margin-bottom: 30px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.2s;
-      animation-fill-mode: forwards;
+      opacity: 0;
    }
+
    &__return-home {
-      display: block;
-      float: left;
-      width: 110px;
-      height: 36px;
+      animation-delay: 0.3s;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+      animation-name: slideUp;
      background: #1482f0;
      border-radius: 100px;
-      text-align: center;
-      color: #ffffff;
-      opacity: 0;
-      font-size: 14px;
-      line-height: 36px;
+      color: #fff;
      cursor: pointer;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.3s;
-      animation-fill-mode: forwards;
+      display: block;
+      float: left;
+      font-size: 14px;
+      height: 36px;
+      line-height: 36px;
+      opacity: 0;
+      text-align: center;
+      width: 110px;
    }
    @keyframes slideUp {
      0% {
-        transform: translateY(60px);
        opacity: 0;
+        transform: translateY(60px);
      }
+
      100% {
-        transform: translateY(0);
        opacity: 1;
+        transform: translateY(0);
      }
    }
  }
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="createPost-container">
+  <div class="create-post-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">

      <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
@ -14,7 +14,7 @@
        </el-button>
      </sticky>

-      <div class="createPost-main-container">
+      <div class="create-post-main-container">
        <el-row>
          <Warning />

@ -25,10 +25,10 @@
              </MDinput>
            </el-form-item>

-            <div class="postInfo-container">
+            <div class="post-info-container">
              <el-row>
                <el-col :span="8">
-                  <el-form-item label-width="60px" label="Author:" class="postInfo-container-item">
+                  <el-form-item label-width="60px" label="Author:" class="post-info-container-item">
                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
                      <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item" />
                    </el-select>
@ -36,20 +36,20 @@
                </el-col>

                <el-col :span="10">
-                  <el-form-item label-width="120px" label="Publish Time:" class="postInfo-container-item">
+                  <el-form-item label-width="120px" label="Publish Time:" class="post-info-container-item">
                    <el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
-                  <el-form-item label-width="90px" label="Importance:" class="postInfo-container-item">
+                  <el-form-item label-width="90px" label="Importance:" class="post-info-container-item">
                    <el-rate
                      v-model="postForm.importance"
                      :max="3"
                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                      :low-threshold="1"
                      :high-threshold="3"
-                      style="display:inline-block"
+                      style="display: inline-block;"
                    />
                  </el-form-item>
                </el-col>
@ -250,40 +250,40 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import "~@/styles/mixin.scss";
+@import '~@/styles/mixin.scss';

-.createPost-container {
+.create-post-container {
  position: relative;

-  .createPost-main-container {
+  .create-post-main-container {
    padding: 40px 45px 20px 50px;

-    .postInfo-container {
-      position: relative;
+    .post-info-container {
      @include clearfix;
      margin-bottom: 10px;
+      position: relative;

-      .postInfo-container-item {
+      .post-info-container-item {
        float: left;
      }
    }
  }

  .word-counter {
-    width: 40px;
    position: absolute;
    right: 10px;
-    top: 0px;
+    top: 0;
+    width: 40px;
  }
 }

 .article-textarea /deep/ {
  textarea {
+    border: none;
+    border-bottom: 1px solid #bfcbd9;
+    border-radius: 0;
    padding-right: 40px;
    resize: none;
-    border: none;
-    border-radius: 0px;
-    border-bottom: 1px solid #bfcbd9;
  }
 }
 </style>
--- a/src/views/example/components/Dropdown/SourceUrl.vue
+++ b/src/views/example/components/Dropdown/SourceUrl.vue
@ -4,8 +4,8 @@
      Link
      <i class="el-icon-caret-bottom el-icon--right" />
    </el-button>
-    <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
-      <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
+    <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width: 400px;">
+      <el-form-item label-width="0px" style="margin-bottom: 0;" prop="source_uri">
        <el-input v-model="source_uri" placeholder="Please enter the content">
          <template slot="prepend">
            URL
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@ -1,6 +1,6 @@
 <template>
  <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
@ -104,6 +104,7 @@ export default {
 .edit-input {
  padding-right: 100px;
 }
+
 .cancel-btn {
  position: absolute;
  right: 15px;
--- a/src/views/excel/components/AutoWidthOption.vue
+++ b/src/views/excel/components/AutoWidthOption.vue
@ -1,5 +1,5 @@
 <template>
-  <div style="display:inline-block;">
+  <div style="display: inline-block;">
    <label class="radio-label">Cell Auto-Width: </label>
    <el-radio-group v-model="autoWidth">
      <el-radio :label="true" border>
--- a/src/views/excel/components/BookTypeOption.vue
+++ b/src/views/excel/components/BookTypeOption.vue
@ -1,7 +1,7 @@
 <template>
-  <div style="display:inline-block;">
+  <div style="display: inline-block;">
    <label class="radio-label">Book Type: </label>
-    <el-select v-model="bookType" style="width:120px;">
+    <el-select v-model="bookType" style="width: 120px;">
      <el-option
        v-for="item in options"
        :key="item"
--- a/src/views/excel/components/FilenameOption.vue
+++ b/src/views/excel/components/FilenameOption.vue
@ -1,7 +1,7 @@
 <template>
-  <div style="display:inline-block;">
-    <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;" prefix-icon="el-icon-document" />
+  <div style="display: inline-block;">
+    <label class="radio-label" style="padding-left: 0;">Filename: </label>
+    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width: 345px;" prefix-icon="el-icon-document" />
  </div>
 </template>

--- a/src/views/excel/export-excel.vue
+++ b/src/views/excel/export-excel.vue
@ -5,10 +5,10 @@
      <FilenameOption v-model="filename" />
      <AutoWidthOption v-model="autoWidth" />
      <BookTypeOption v-model="bookType" />
-      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
+      <el-button :loading="downloadLoading" style="margin: 0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
        Export Excel
      </el-button>
-      <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
+      <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left: 15px;">
        <el-tag type="info">Documentation</el-tag>
      </a>
    </div>
@ -108,8 +108,8 @@ export default {

 <style>
 .radio-label {
-  font-size: 14px;
  color: #606266;
+  font-size: 14px;
  line-height: 40px;
  padding: 0 12px 0 30px;
 }
--- a/src/views/excel/merge-header.vue
+++ b/src/views/excel/merge-header.vue
@ -1,7 +1,7 @@
 <template>
  <div class="app-container">

-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">Export</el-button>
+    <el-button :loading="downloadLoading" style="margin-bottom: 20px;" type="primary" icon="el-icon-document" @click="handleDownload">Export</el-button>

    <el-table
      ref="multipleTable"
--- a/src/views/excel/select-excel.vue
+++ b/src/views/excel/select-excel.vue
@ -1,10 +1,10 @@
 <template>
  <div class="app-container">
-    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">
+    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width: 350px;" prefix-icon="el-icon-document" />
+    <el-button :loading="downloadLoading" style="margin-bottom: 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
      Export Selected Items
    </el-button>
-    <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
+    <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left: 15px;">
      <el-tag type="info">Documentation</el-tag>
    </a>
    <el-table
--- a/src/views/excel/upload-excel.vue
+++ b/src/views/excel/upload-excel.vue
@ -1,7 +1,7 @@
 <template>
  <div class="app-container">
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
-    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
+    <el-table :data="tableData" border highlight-current-row style="margin-top: 20px;width: 100%;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
  </div>
--- a/src/views/icons/index.vue
+++ b/src/views/icons/index.vue
@ -72,20 +72,20 @@ export default {
  overflow: hidden;

  .grid {
-    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    position: relative;
  }

  .icon-item {
-    margin: 20px;
-    height: 85px;
-    text-align: center;
-    width: 100px;
-    float: left;
-    font-size: 30px;
    color: #24292e;
    cursor: pointer;
+    float: left;
+    font-size: 30px;
+    height: 85px;
+    margin: 20px;
+    text-align: center;
+    width: 100px;
  }

  span {
--- a/src/views/login/components/SocialSignin.vue
+++ b/src/views/login/components/SocialSignin.vue
@ -40,32 +40,37 @@ export default {
 <style lang="scss" scoped>
  .social-signup-container {
    margin: 20px 0;
+
    .sign-btn {
-      display: inline-block;
      cursor: pointer;
+      display: inline-block;
    }
+
    .icon {
      color: #fff;
      font-size: 24px;
      margin-top: 8px;
    }
+
    .wx-svg-container,
    .qq-svg-container {
+      border-radius: 4px;
      display: inline-block;
-      width: 40px;
      height: 40px;
      line-height: 40px;
-      text-align: center;
-      padding-top: 1px;
-      border-radius: 4px;
      margin-bottom: 20px;
      margin-right: 5px;
+      padding-top: 1px;
+      text-align: center;
+      width: 40px;
    }
+
    .wx-svg-container {
      background-color: #24da70;
    }
+
    .qq-svg-container {
-      background-color: #6BA2D6;
+      background-color: #6ba2d6;
      margin-left: 50px;
    }
  }
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -45,15 +45,15 @@
        </el-form-item>
      </el-tooltip>

-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <el-button :loading="loading" type="primary" style="margin-bottom: 30px;width: 100%;" @click.native.prevent="handleLogin">Login</el-button>

-      <div style="position:relative">
+      <div style="position: relative;">
        <div class="tips">
          <span>Username : admin</span>
          <span>Password : any</span>
        </div>
        <div class="tips">
-          <span style="margin-right:18px;">Username : editor</span>
+          <span style="margin-right: 18px;">Username : editor</span>
          <span>Password : any</span>
        </div>

@ -204,8 +204,8 @@ export default {
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

-$bg:#283443;
-$light_gray:#fff;
+$bg: #283443;
+$light-gray: #fff;
 $cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@ -222,25 +222,25 @@ $cursor: #fff;
    width: 85%;

    input {
-      background: transparent;
-      border: 0px;
      -webkit-appearance: none;
-      border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: $light_gray;
-      height: 47px;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
      caret-color: $cursor;
+      color: $light-gray;
+      height: 47px;
+      padding: 12px 5px 12px 15px;

      &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
+        box-shadow: 0 0 0 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #454545;
  }
@ -248,28 +248,28 @@ $cursor: #fff;
 </style>

 <style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
+$bg: #2d3a4b;
+$dark-gray: #889aa4;
+$light-gray: #eee;

 .login-container {
-  min-height: 100%;
-  width: 100%;
  background-color: $bg;
+  min-height: 100%;
  overflow: hidden;
+  width: 100%;

  .login-form {
+    margin: 0 auto;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 160px 35px 0;
    position: relative;
    width: 520px;
-    max-width: 100%;
-    padding: 160px 35px 0;
-    margin: 0 auto;
-    overflow: hidden;
  }

  .tips {
-    font-size: 14px;
    color: #fff;
+    font-size: 14px;
    margin-bottom: 10px;

    span {
@ -280,39 +280,39 @@ $light_gray:#eee;
  }

  .svg-container {
+    color: $dark-gray;
+    display: inline-block;
    padding: 6px 5px 6px 15px;
-    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
-    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
+      color: $light-gray;
      font-size: 26px;
-      color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
      font-weight: bold;
+      margin: 0 auto 40px;
+      text-align: center;
    }
  }

  .show-pwd {
+    color: $dark-gray;
+    cursor: pointer;
+    font-size: 16px;
    position: absolute;
    right: 10px;
    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
+    bottom: 6px;
    position: absolute;
    right: 0;
-    bottom: 6px;
  }

  @media only screen and (max-width: 470px) {
--- a/src/views/nested/menu1/index.vue
+++ b/src/views/nested/menu1/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div style="padding:30px;">
+  <div style="padding: 30px;">
    <el-alert :closable="false" title="menu 1">
      <router-view />
    </el-alert>
--- a/src/views/nested/menu1/menu1-1/index.vue
+++ b/src/views/nested/menu1/menu1-1/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div style="padding:30px;">
+  <div style="padding: 30px;">
    <el-alert :closable="false" title="menu 1-1" type="success">
      <router-view />
    </el-alert>
--- a/src/views/nested/menu1/menu1-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div style="padding:30px;">
+  <div style="padding: 30px;">
    <el-alert :closable="false" title="menu 1-2" type="success">
      <router-view />
    </el-alert>
--- a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
@ -1,5 +1,5 @@
 <template functional>
-  <div style="padding:30px;">
+  <div style="padding: 30px;">
    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
  </div>
 </template>
--- a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
@ -1,5 +1,5 @@
 <template functional>
-  <div style="padding:30px;">
+  <div style="padding: 30px;">
    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
  </div>
 </template>
--- a/src/views/nested/menu1/menu1-3/index.vue
+++ b/src/views/nested/menu1/menu1-3/index.vue
@ -1,5 +1,5 @@
 <template functional>
-  <div style="padding:30px;">
+  <div style="padding: 30px;">
    <el-alert :closable="false" title="menu 1-3" type="success" />
  </div>
 </template>
--- a/src/views/nested/menu2/index.vue
+++ b/src/views/nested/menu2/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div style="padding:30px;">
+  <div style="padding: 30px;">
    <el-alert :closable="false" title="menu 2" />
  </div>
 </template>
--- a/src/views/pdf/download.vue
+++ b/src/views/pdf/download.vue
@ -1,7 +1,7 @@
 <template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
-    <div class="article__heading">
-      <div class="article__heading__title">
+    <div class="article-heading">
+      <div class="article-heading-title">
        {{ article.title }}
      </div>
    </div>
@ -44,57 +44,57 @@ export default {

 <style lang="scss">
@mixin clearfix {
-  &:before {
-    display: table;
-    content: '';
+  &::before {
    clear: both;
+    content: '';
+    display: table;
  }

-  &:after {
-    display: table;
-    content: '';
+  &::after {
    clear: both;
+    content: '';
+    display: table;
  }
 }

 .main-article {
-  padding: 20px;
-  margin: 0 auto;
-  display: block;
-  width: 740px;
  background: #fff;
+  display: block;
+  margin: 0 auto;
+  padding: 20px;
+  width: 740px;
 }

-.article__heading {
-  position: relative;
-  padding: 0 0 20px;
+.article-heading {
  overflow: hidden;
+  padding: 0 0 20px;
+  position: relative;
 }

-.article__heading__title {
+.article-heading-title {
+  -webkit-box-orient: vertical;
+  color: #333;
  display: block;
  display: -webkit-box;
-  -webkit-box-orient: vertical;
+  font-size: 32px;
+  font-weight: 600;
  -webkit-line-clamp: 2;
  line-clamp: 2;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  font-size: 32px;
  line-height: 48px;
-  font-weight: 600;
-  color: #333;
  overflow: hidden;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
 }

 .node-article-content {
-  margin: 20px 0 0;
  @include clearfix;
-  font-size: 16px;
  color: #333;
+  font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman', Times, serif;
+  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 28px;
+  margin: 20px 0 0;
  margin-bottom: 30px;
-  font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;

  &> :last-child {
    margin-bottom: 0;
@ -107,17 +107,17 @@ export default {
  }

  img {
-    max-width: 100%;
    display: block;
    margin: 0 auto;
+    max-width: 100%;
  }

  p {
-    font-weight: 400;
-    font-style: normal;
    font-size: 21px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: -0.003em;
    line-height: 1.58;
-    letter-spacing: -.003em;

  }

@ -128,32 +128,32 @@ export default {
  li {
    --x-height-multiplier: 0.375;
    --baseline-multiplier: 0.17;
-
-    letter-spacing: .01rem;
-    font-weight: 400;
-    font-style: normal;
    font-size: 21px;
+    font-style: normal;
+    font-weight: 400;
+
+    letter-spacing: 0.01rem;
+    letter-spacing: -0.003em;
    line-height: 1.58;
-    letter-spacing: -.003em;
-    margin-left: 30px;
    margin-bottom: 14px;
+    margin-left: 30px;
  }

  a {
-    text-decoration: none;
-    background-repeat: repeat-x;
-    background-image: linear-gradient(to right, rgba(0, 0, 0, .84) 100%, rgba(0, 0, 0, 0) 0);
-    background-size: 1px 1px;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.84) 100%, rgba(0, 0, 0, 0) 0);
    background-position: 0 calc(1em + 1px);
+    background-repeat: repeat-x;
+    background-size: 1px 1px;
    padding: 0 6px;
+    text-decoration: none;
  }

  code {
-    background: rgba(0, 0, 0, .05);
-    padding: 3px 4px;
-    margin: 0 2px;
-    font-size: 16px;
+    background: rgba(0, 0, 0, 0.05);
    display: inline-block;
+    font-size: 16px;
+    margin: 0 2px;
+    padding: 3px 4px;
  }

  img {
@ -168,17 +168,17 @@ export default {
  blockquote {
    --x-height-multiplier: 0.375;
    --baseline-multiplier: 0.17;
-    font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
-    letter-spacing: .01rem;
-    font-weight: 400;
-    font-style: italic;
+    border-left: 3px solid rgba(0, 0, 0, 0.84);
+    font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman', Times, serif;
    font-size: 21px;
+    font-style: italic;
+    font-weight: 400;
+    letter-spacing: 0.01rem;
+    letter-spacing: -0.003em;
    line-height: 1.58;
-    letter-spacing: -.003em;
-    border-left: 3px solid rgba(0, 0, 0, .84);
-    padding-left: 20px;
    margin-left: -23px;
    padding-bottom: 2px;
+    padding-left: 20px;
  }

  a {
@ -189,8 +189,8 @@ export default {
  h3,
  h4 {
    font-size: 34px;
+    letter-spacing: -0.015em;
    line-height: 1.15;
-    letter-spacing: -.015em;
    margin: 53px 0 0;
  }

--- a/src/views/pdf/index.vue
+++ b/src/views/pdf/index.vue
@ -1,6 +1,6 @@
 <template>
  <div class="app-container">
-    <aside style="margin-top:15px;">
+    <aside style="margin-top: 15px;">
      Here we use window.print() to implement the feature of downloading PDF.
    </aside>
    <router-link target="_blank" to="/pdf/download">
--- a/src/views/permission/components/SwitchRoles.vue
+++ b/src/views/permission/components/SwitchRoles.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <div style="margin-bottom:15px;">
+    <div style="margin-bottom: 15px;">
      Your roles: {{ roles }}
    </div>
    Switch roles:
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@ -1,13 +1,13 @@
 <template>
  <div class="app-container">
    <switch-roles @change="handleRolesChange" />
-    <div :key="key" style="margin-top:30px;">
+    <div :key="key" style="margin-top: 30px;">
      <div>
        <span v-permission="['admin']" class="permission-alert">
          Only
          <el-tag class="permission-tag" size="small">admin</el-tag> can see this
        </span>
-        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
+        <el-tag v-permission="['admin']" class="permission-source-code" type="info">
          v-permission="['admin']"
        </el-tag>
      </div>
@ -17,7 +17,7 @@
          Only
          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
        </span>
-        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
+        <el-tag v-permission="['editor']" class="permission-source-code" type="info">
          v-permission="['editor']"
        </el-tag>
      </div>
@ -28,36 +28,36 @@
          <el-tag class="permission-tag" size="small">admin</el-tag> and
          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
        </span>
-        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
+        <el-tag v-permission="['admin','editor']" class="permission-source-code" type="info">
          v-permission="['admin','editor']"
        </el-tag>
      </div>
    </div>

-    <div :key="'checkPermission'+key" style="margin-top:60px;">
+    <div :key="'checkPermission'+key" style="margin-top: 60px;">
      <aside>
        In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
        <br> e.g.
      </aside>

-      <el-tabs type="border-card" style="width:550px;">
+      <el-tabs type="border-card" style="width: 550px;">
        <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
          Admin can see this
-          <el-tag class="permission-sourceCode" type="info">
+          <el-tag class="permission-source-code" type="info">
            v-if="checkPermission(['admin'])"
          </el-tag>
        </el-tab-pane>

        <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
          Editor can see this
-          <el-tag class="permission-sourceCode" type="info">
+          <el-tag class="permission-source-code" type="info">
            v-if="checkPermission(['editor'])"
          </el-tag>
        </el-tab-pane>

        <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
          Both admin or editor can see this
-          <el-tag class="permission-sourceCode" type="info">
+          <el-tag class="permission-source-code" type="info">
            v-if="checkPermission(['admin','editor'])"
          </el-tag>
        </el-tab-pane>
@ -92,17 +92,19 @@ export default {
 <style lang="scss" scoped>
 .app-container {
  /deep/ .permission-alert {
-    width: 320px;
-    margin-top: 15px;
    background-color: #f0f9eb;
-    color: #67c23a;
-    padding: 8px 16px;
    border-radius: 4px;
+    color: #67c23a;
    display: inline-block;
+    margin-top: 15px;
+    padding: 8px 16px;
+    width: 320px;
  }
-  /deep/ .permission-sourceCode {
+
+  /deep/ .permission-source-code {
    margin-left: 15px;
  }
+
  /deep/ .permission-tag {
    background-color: #ecf5ff;
  }
--- a/src/views/permission/role.vue
+++ b/src/views/permission/role.vue
@ -2,7 +2,7 @@
  <div class="app-container">
    <el-button type="primary" @click="handleAddRole">New Role</el-button>

-    <el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
+    <el-table :data="rolesList" style="margin-top: 30px;width: 100%;" border>
      <el-table-column align="center" label="Role Key" width="220">
        <template slot-scope="scope">
          {{ scope.row.key }}
@ -51,7 +51,7 @@
          />
        </el-form-item>
      </el-form>
-      <div style="text-align:right;">
+      <div style="text-align: right;">
        <el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
        <el-button type="primary" @click="confirmRole">Confirm</el-button>
      </div>
@ -263,6 +263,7 @@ export default {
  .roles-table {
    margin-top: 30px;
  }
+
  .permission-tree {
    margin-bottom: 30px;
  }
--- a/src/views/profile/components/Activity.vue
+++ b/src/views/profile/components/Activity.vue
@ -103,7 +103,6 @@ export default {
 <style lang="scss" scoped>
 .user-activity {
  .user-block {
-
    .username,
    .description {
      display: block;
@ -111,38 +110,38 @@ export default {
      padding: 2px 0;
    }

-    .username{
-      font-size: 16px;
+    .username {
      color: #000;
+      font-size: 16px;
    }

-    :after {
+    ::after {
      clear: both;
    }

    .img-circle {
      border-radius: 50%;
-      width: 40px;
-      height: 40px;
      float: left;
+      height: 40px;
+      width: 40px;
    }

    span {
-      font-weight: 500;
      font-size: 12px;
+      font-weight: 500;
    }
  }

  .post {
-    font-size: 14px;
    border-bottom: 1px solid #d2d6de;
+    color: #666;
+    font-size: 14px;
    margin-bottom: 15px;
    padding-bottom: 15px;
-    color: #666;

    .image {
-      width: 100%;
      height: 100%;
+      width: 100%;

    }

@ -152,19 +151,18 @@ export default {
  }

  .list-inline {
-    padding-left: 0;
-    margin-left: -5px;
    list-style: none;
+    margin-left: -5px;
+    padding-left: 0;

    li {
      display: inline-block;
-      padding-right: 5px;
-      padding-left: 5px;
      font-size: 13px;
+      padding-left: 5px;
+      padding-right: 5px;
    }

    .link-black {
-
      &:hover,
      &:focus {
        color: #999;
@ -175,8 +173,8 @@ export default {
 }

 .box-center {
-  margin: 0 auto;
  display: table;
+  margin: 0 auto;
 }

 .text-muted {
--- a/src/views/profile/components/UserCard.vue
+++ b/src/views/profile/components/UserCard.vue
@ -1,5 +1,5 @@
 <template>
-  <el-card style="margin-bottom:20px;">
+  <el-card style="margin-bottom: 20px;">
    <div slot="header" class="clearfix">
      <span>About me</span>
    </div>
@ -75,8 +75,8 @@ export default {

 <style lang="scss" scoped>
 .box-center {
-  margin: 0 auto;
  display: table;
+  margin: 0 auto;
 }

 .text-muted {
@ -93,9 +93,9 @@ export default {
  }

  .user-role {
-    padding-top: 10px;
-    font-weight: 400;
    font-size: 14px;
+    font-weight: 400;
+    padding-top: 10px;
  }

  .box-social {
@ -112,8 +112,8 @@ export default {
 }

 .user-bio {
-  margin-top: 20px;
  color: #606266;
+  margin-top: 20px;

  span {
    padding-left: 4px;
@ -125,9 +125,9 @@ export default {

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
-      padding-bottom: 10px;
-      margin-bottom: 10px;
      font-weight: bold;
+      margin-bottom: 10px;
+      padding-bottom: 10px;
    }
  }
 }
--- a/src/views/tab/components/TabPane.vue
+++ b/src/views/tab/components/TabPane.vue
@ -1,5 +1,5 @@
 <template>
-  <el-table :data="list" border fit highlight-current-row style="width: 100%">
+  <el-table :data="list" border fit highlight-current-row style="width: 100%;">
    <el-table-column
      v-loading="loading"
      align="center"
--- a/src/views/tab/index.vue
+++ b/src/views/tab/index.vue
@ -1,8 +1,8 @@
 <template>
  <div class="tab-container">
    <el-tag>mounted times ：{{ createdTimes }}</el-tag>
-    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
-    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
+    <el-alert :closable="false" style="display: inline-block;margin-left: 30px;vertical-align: middle;width: 200px;" title="Tab with keep-alive" type="success" />
+    <el-tabs v-model="activeName" style="margin-top: 15px;" type="border-card">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
        <keep-alive>
          <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
--- a/src/views/table/complex-table.vue
+++ b/src/views/table/complex-table.vue
@ -2,13 +2,13 @@
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
+      <el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px;" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
      </el-select>
-      <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
+      <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px;">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select>
-      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
+      <el-select v-model="listQuery.sort" style="width: 140px;" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
@ -20,7 +20,7 @@
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        Export
      </el-button>
-      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left: 15px;" @change="tableKey=tableKey+1">
        reviewer
      </el-checkbox>
    </div>
@ -58,7 +58,7 @@
      </el-table-column>
      <el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
        <template slot-scope="{row}">
-          <span style="color:red;">{{ row.reviewer }}</span>
+          <span style="color: red;">{{ row.reviewer }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Imp" width="80px">
@ -100,7 +100,7 @@
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style=" margin-left: 50px;width: 400px;">
        <el-form-item label="Type" prop="type">
          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
@ -118,7 +118,7 @@
          </el-select>
        </el-form-item>
        <el-form-item label="Imp">
-          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
+          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top: 8px;" />
        </el-form-item>
        <el-form-item label="Remark">
          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
@ -135,7 +135,7 @@
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
-      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
+      <el-table :data="pvData" border fit highlight-current-row style="width: 100%;">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
--- a/src/views/table/drag-table.vue
+++ b/src/views/table/drag-table.vue
@ -1,7 +1,7 @@
 <template>
  <div class="app-container">
    <!-- Note that row-key is necessary to get a correct row order. -->
-    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
+    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%;">
      <el-table-column align="center" label="ID" width="65">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
@ -131,23 +131,25 @@ export default {
 </script>

 <style>
-.sortable-ghost{
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
+.sortable-ghost {
+  background: #42b983 !important;
+  color: #fff !important;
+  opacity: 0.8;
 }
 </style>

 <style scoped>
-.icon-star{
-  margin-right:2px;
+.icon-star {
+  margin-right: 2px;
 }
-.drag-handler{
-  width: 20px;
-  height: 20px;
+
+.drag-handler {
  cursor: pointer;
+  height: 20px;
+  width: 20px;
 }
-.show-d{
+
+.show-d {
  margin-top: 15px;
 }
 </style>
--- a/src/views/table/dynamic-table/components/FixedThead.vue
+++ b/src/views/table/dynamic-table/components/FixedThead.vue
@ -14,7 +14,7 @@
      </el-checkbox-group>
    </div>

-    <el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
+    <el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%;">
      <el-table-column prop="name" label="fruitName" width="180" />
      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
        <template slot-scope="scope">
--- a/src/views/table/dynamic-table/components/UnfixedThead.vue
+++ b/src/views/table/dynamic-table/components/UnfixedThead.vue
@ -14,7 +14,7 @@
      </el-checkbox-group>
    </div>

-    <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
+    <el-table :data="tableData" border fit highlight-current-row style="width: 100%;">
      <el-table-column prop="name" label="fruitName" width="180" />
      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
        <template slot-scope="scope">
--- a/src/views/table/dynamic-table/index.vue
+++ b/src/views/table/dynamic-table/index.vue
@ -1,11 +1,11 @@
 <template>
  <div class="app-container">
-    <div style="margin:0 0 5px 20px">
+    <div style="margin: 0 0 5px 20px;">
      Fixed header, sorted by header order,
    </div>
    <fixed-thead />

-    <div style="margin:30px 0 5px 20px">
+    <div style="margin: 30px 0 5px 20px;">
      Not fixed header, sorted by click order
    </div>
    <unfixed-thead />
--- a/src/views/table/inline-edit-table.vue
+++ b/src/views/table/inline-edit-table.vue
@ -1,6 +1,6 @@
 <template>
  <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
@ -141,6 +141,7 @@ export default {
 .edit-input {
  padding-right: 100px;
 }
+
 .cancel-btn {
  position: absolute;
  right: 15px;
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@ -9,7 +9,7 @@
      <div class="box-item">
        <span class="field-label">Change Theme : </span>
        <el-switch v-model="theme" />
-        <aside style="margin-top:15px;">
+        <aside style="margin-top: 15px;">
          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
        </aside>
      </div>
@ -101,13 +101,14 @@ export default {
 </script>

 <style scoped>
-.field-label{
+.field-label {
  vertical-align: middle;
 }
+
 .box-card {
-  width: 400px;
-  max-width: 100%;
  margin: 20px auto;
+  max-width: 100%;
+  width: 400px;
 }

 .block {
--- a/Show More
+++ b/Show More