diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
index a2327a31..36522f4a 100644
--- 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="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,12 +96,12 @@ export default {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.5s;
+  transition: opacity .5s;
 }
 
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  opacity: 0
 }
 
 .back-to-ceiling .Icon {
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
index 67e9b830..23ca006e 100644
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@@ -7,9 +7,9 @@
           <div class="list-complete-item-handle">
             {{ element.id }}[{{ element.author }}] {{ element.title }}
           </div>
-          <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" />
+          <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" />
             </span>
           </div>
         </div>
@@ -108,21 +108,17 @@ export default {
 .dndList {
   background: #fff;
   padding-bottom: 40px;
-
-  &::after {
-    content: '';
+  &:after {
+    content: "";
     display: table;
     clear: both;
   }
-
   .dndList-list {
     float: left;
     padding-bottom: 30px;
-
     &:first-of-type {
       margin-right: 2%;
     }
-
     .dragArea {
       margin-top: 15px;
       min-height: 50px;
@@ -156,11 +152,11 @@ export default {
 }
 
 .list-complete-item.sortable-chosen {
-  background: #4ab7bd;
+  background: #4AB7BD;
 }
 
 .list-complete-item.sortable-ghost {
-  background: #30b08f;
+  background: #30B08F;
 }
 
 .list-complete-enter,
diff --git a/src/components/DragSelect/index.vue b/src/components/DragSelect/index.vue
index 0c52094f..28256a8b 100644
--- 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: 0.8;
-  color: #fff !important;
-  background: #42b983 !important;
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
 }
 
 .drag-select >>> .el-tag {
diff --git a/src/components/Dropzone/index.vue b/src/components/Dropzone/index.vue
index b4922c70..bad9eb90 100644
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@@ -207,94 +207,91 @@ export default {
 
 <style scoped>
     .dropzone {
-      border: 2px solid #e5e5e5;
-      font-family: 'Roboto', sans-serif;
-      color: #777;
-      transition: background-color 0.2s linear;
-      padding: 5px;
+        border: 2px solid #E5E5E5;
+        font-family: 'Roboto', sans-serif;
+        color: #777;
+        transition: background-color .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: 0;
+        border-radius: 0px;
     }
 
     .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: 0;
-      top: 0;
-      color: white;
-      background-color: rgba(33, 150, 243, 0.8);
-      transition: opacity 0.2s linear;
-      text-align: left;
+        bottom: 0px;
+        top: 0px;
+        color: white;
+        background-color: rgba(33, 150, 243, 0.8);
+        transition: opacity .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>
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
index 54445fb1..970faaf1 100644
--- 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,33 +25,30 @@
 
 <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>
diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index 9f8596e9..13ae9a11 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -819,31 +819,46 @@ export default {
 
 <style lang="scss">
 @charset "UTF-8";
-
-@keyframes vicp_progress {
+@-webkit-keyframes vicp_progress {
   0% {
     background-position-y: 0;
   }
-
   100% {
     background-position-y: 40px;
   }
 }
-
-@keyframes vicp {
+@keyframes vicp_progress {
+  0% {
+    background-position-y: 0;
+  }
+  100% {
+    background-position-y: 40px;
+  }
+}
+@-webkit-keyframes vicp {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0) translatey(-60px);
+    transform: scale(0) translatey(-60px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1) translatey(0);
+    transform: scale(1) translatey(0);
+  }
+}
+@keyframes vicp {
   0% {
     opacity: 0;
     -webkit-transform: scale(0) translatey(-60px);
     transform: scale(0) translatey(-60px);
   }
-
   100% {
     opacity: 1;
     -webkit-transform: scale(1) translatey(0);
     transform: scale(1) translatey(0);
   }
 }
-
 .vue-image-crop-upload {
   position: fixed;
   display: block;
@@ -859,649 +874,881 @@ export default {
   background-color: rgba(0, 0, 0, 0.65);
   -webkit-tap-highlight-color: transparent;
   -moz-tap-highlight-color: transparent;
-
-  .vicp-wrap {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    position: fixed;
-    display: block;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    z-index: 10000;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 600px;
-    height: 330px;
-    padding: 25px;
-    background-color: #fff;
-    border-radius: 2px;
-    -webkit-animation: vicp 0.12s ease-in;
-    animation: vicp 0.12s ease-in;
-
-    .vicp-close {
-      position: absolute;
-      right: -30px;
-      top: -30px;
-
-      .vicp-icon4 {
-        position: relative;
-        display: block;
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-        -webkit-transition: -webkit-transform 0.18s;
-        transition: -webkit-transform 0.18s;
-        transition: transform 0.18s;
-        transition: transform 0.18s, -webkit-transform 0.18s;
-        -webkit-transform: rotate(0);
-        -ms-transform: rotate(0);
-        transform: rotate(0);
-
-        &::after,
-        &::before {
-          -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-          content: '';
-          position: absolute;
-          top: 12px;
-          left: 4px;
-          width: 20px;
-          height: 3px;
-          -webkit-transform: rotate(45deg);
-          -ms-transform: rotate(45deg);
-          transform: rotate(45deg);
-          background-color: #fff;
-        }
-
-        &::after {
-          -webkit-transform: rotate(-45deg);
-          -ms-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-        }
-
-        &:hover {
-          -webkit-transform: rotate(90deg);
-          -ms-transform: rotate(90deg);
-          transform: rotate(90deg);
-        }
-      }
-    }
-
-    .vicp-step1 {
-      .vicp-drop-area {
-        position: relative;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        padding: 35px;
-        height: 170px;
-        background-color: rgba(0, 0, 0, 0.03);
-        text-align: center;
-        border: 1px dashed rgba(0, 0, 0, 0.08);
-        overflow: hidden;
-
-        &:hover {
-          cursor: pointer;
-          border-color: rgba(0, 0, 0, 0.1);
-          background-color: rgba(0, 0, 0, 0.05);
-        }
-
-        .vicp-icon1 {
-          display: block;
-          margin: 0 auto 6px;
-          width: 42px;
-          height: 42px;
-          overflow: hidden;
-
-          .vicp-icon1-arrow {
-            display: block;
-            margin: 0 auto;
-            width: 0;
-            height: 0;
-            border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
-            border-left: 14.7px solid transparent;
-            border-right: 14.7px solid transparent;
-          }
-
-          .vicp-icon1-body {
-            display: block;
-            width: 12.6px;
-            height: 14.7px;
-            margin: 0 auto;
-            background-color: rgba(0, 0, 0, 0.3);
-          }
-
-          .vicp-icon1-bottom {
-            -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-            display: block;
-            height: 12.6px;
-            border: 6px solid rgba(0, 0, 0, 0.3);
-            border-top: none;
-          }
-        }
-
-        .vicp-hint {
-          display: block;
-          padding: 15px;
-          font-size: 14px;
-          color: #666;
-          line-height: 30px;
-        }
-
-        .vicp-no-supported-hint {
-          display: block;
-          position: absolute;
-          top: 0;
-          left: 0;
-          padding: 30px;
-          width: 100%;
-          height: 60px;
-          line-height: 30px;
-          background-color: #eee;
-          text-align: center;
-          color: #666;
-          font-size: 14px;
-        }
-
-      }
-
-    }
-
-    .vicp-step2 .vicp-crop {
-      overflow: hidden;
-
-      .vicp-crop-left {
-        float: left;
-
-        .vicp-img-container {
-          position: relative;
-          display: block;
-          width: 240px;
-          height: 180px;
-          background-color: #e5e5e0;
-          overflow: hidden;
-
-          .vicp-img {
-            position: absolute;
-            display: block;
-            cursor: move;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-          }
-
-          .vicp-img-shade {
-            -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-            position: absolute;
-            background-color: rgba(241, 242, 243, 0.8);
-
-            .vicp-img-shade-1 {
-              top: 0;
-              left: 0;
-            }
-
-            .vicp-img-shade-2 {
-              bottom: 0;
-              right: 0;
-            }
-          }
-
-        }
-
-        .vicp-rotate {
-          position: relative;
-          width: 240px;
-          height: 18px;
-
-          i {
-            display: block;
-            width: 18px;
-            height: 18px;
-            border-radius: 100%;
-            line-height: 18px;
-            text-align: center;
-            font-size: 12px;
-            font-weight: bold;
-            background-color: rgba(0, 0, 0, 0.08);
-            color: #fff;
-            overflow: hidden;
-
-            &:hover {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              cursor: pointer;
-              background-color: rgba(0, 0, 0, 0.14);
-            }
-
-            &:first-child {
-              float: left;
-            }
-
-            &:last-child {
-              float: right;
-            }
-          }
-        }
-
-        .vicp-range {
-          position: relative;
-          margin: 30px 0 10px;
-          width: 240px;
-          height: 18px;
-
-          .vicp-icon5,
-          .vicp-icon6 {
-            position: absolute;
-            top: 0;
-            width: 18px;
-            height: 18px;
-            border-radius: 100%;
-            background-color: rgba(0, 0, 0, 0.08);
-          }
-
-          .vicp-icon5:hover,
-          .vicp-icon6:hover {
-            -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-            cursor: pointer;
-            background-color: rgba(0, 0, 0, 0.14);
-          }
-
-          .vicp-icon5 {
-            left: 0;
-          }
-
-          .vicp-icon6 {
-            right: 0;
-          }
-
-          .vicp-icon5::before,
-          .vicp-icon6::before {
-            position: absolute;
-            content: '';
-            display: block;
-            left: 3px;
-            top: 8px;
-            width: 12px;
-            height: 2px;
-            background-color: #fff;
-          }
-
-          input[type='range'] {
-            display: block;
-            padding-top: 5px;
-            margin: 0 auto;
-            width: 180px;
-            height: 8px;
-            background: transparent;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            cursor: pointer;
-            /* 滑块
- ---------------------------------------------------------------*/
-            /* 轨道
- ---------------------------------------------------------------*/
-            &:focus {
-              outline: none;
-            }
-
-            &::-webkit-slider-thumb {
-              -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              -webkit-appearance: none;
-              appearance: none;
-              margin-top: -3px;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border-radius: 100%;
-              border: none;
-              -webkit-transition: 0.2s;
-              transition: 0.2s;
-            }
-
-            &::-moz-range-thumb {
-              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              -moz-appearance: none;
-              appearance: none;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border-radius: 100%;
-              border: none;
-              -webkit-transition: 0.2s;
-              transition: 0.2s;
-            }
-
-            &::-ms-thumb {
-              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              appearance: none;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border: none;
-              border-radius: 100%;
-              -webkit-transition: 0.2s;
-              transition: 0.2s;
-            }
-
-            &:active::-moz-range-thumb {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              width: 14px;
-              height: 14px;
-            }
-
-            &:active::-ms-thumb {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              width: 14px;
-              height: 14px;
-            }
-
-            &:active::-webkit-slider-thumb {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              margin-top: -4px;
-              width: 14px;
-              height: 14px;
-            }
-
-            &::-webkit-slider-runnable-track {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              height: 6px;
-              cursor: pointer;
-              border-radius: 2px;
-              border: none;
-              background-color: rgba(68, 170, 119, 0.3);
-            }
-
-            &::-moz-range-track {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              height: 6px;
-              cursor: pointer;
-              border-radius: 2px;
-              border: none;
-              background-color: rgba(68, 170, 119, 0.3);
-            }
-
-            &::-ms-track {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              cursor: pointer;
-              background: transparent;
-              border-color: transparent;
-              color: transparent;
-              height: 6px;
-              border-radius: 2px;
-              border: none;
-            }
-
-            &::-ms-fill-lower {
-              background-color: rgba(68, 170, 119, 0.3);
-            }
-
-            &::-ms-fill-upper {
-              background-color: rgba(68, 170, 119, 0.15);
-            }
-
-            &:focus::-webkit-slider-runnable-track {
-              background-color: rgba(68, 170, 119, 0.5);
-            }
-
-            &:focus::-moz-range-track {
-              background-color: rgba(68, 170, 119, 0.5);
-            }
-
-            &:focus::-ms-fill-lower {
-              background-color: rgba(68, 170, 119, 0.45);
-            }
-
-            &:focus::-ms-fill-upper {
-              background-color: rgba(68, 170, 119, 0.25);
-            }
-          }
-        }
-      }
-
-      .vicp-crop-right {
-        float: right;
-
-        .vicp-preview {
-          height: 150px;
-          overflow: hidden;
-        }
-
-        .vicp-preview-item {
-          position: relative;
-          padding: 5px;
-          width: 100px;
-          height: 100px;
-          float: left;
-          margin-right: 16px;
-
-          span {
-            position: absolute;
-            bottom: -30px;
-            width: 100%;
-            font-size: 14px;
-            color: #bbb;
-            display: block;
-            text-align: center;
-          }
-
-          img {
-            position: absolute;
-            display: block;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-            padding: 3px;
-            background-color: #fff;
-            border: 1px solid rgba(0, 0, 0, 0.15);
-            overflow: hidden;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-          }
-
-          .vicp-preview-item-circle {
-            margin-right: 0;
-
-            img {
-              border-radius: 100%;
-            }
-          }
-        }
-      }
-    }
-
-    .vicp-step3 .vicp-upload {
-      position: relative;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      padding: 35px;
-      height: 170px;
-      background-color: rgba(0, 0, 0, 0.03);
-      text-align: center;
-      border: 1px dashed #ddd;
-
-      .vicp-loading {
-        display: block;
-        padding: 15px;
-        font-size: 16px;
-        color: #999;
-        line-height: 30px;
-      }
-
-      .vicp-progress-wrap {
-        margin-top: 12px;
-        background-color: rgba(0, 0, 0, 0.08);
-        border-radius: 3px;
-
-        .vicp-progress {
-          position: relative;
-          display: block;
-          height: 5px;
-          border-radius: 3px;
-          background-color: #4a7;
-          -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-          box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-          -webkit-transition: width 0.15s linear;
-          transition: width 0.15s linear;
-          background-image: -webkit-linear-gradient(135deg,
-          rgba(255, 255, 255, 0.2) 25%,
-          transparent 25%,
-          transparent 50%,
-          rgba(255, 255, 255, 0.2) 50%,
-          rgba(255, 255, 255, 0.2) 75%,
-          transparent 75%,
-          transparent);
-          background-image: linear-gradient(-45deg,
-          rgba(255, 255, 255, 0.2) 25%,
-          transparent 25%,
-          transparent 50%,
-          rgba(255, 255, 255, 0.2) 50%,
-          rgba(255, 255, 255, 0.2) 75%,
-          transparent 75%,
-          transparent);
-          background-size: 40px 40px;
-          -webkit-animation: vicp_progress 0.5s linear infinite;
-          animation: vicp_progress 0.5s linear infinite;
-        }
-
-        .vicp-progress::after {
-          content: '';
-          position: absolute;
-          display: block;
-          top: -3px;
-          right: -3px;
-          width: 9px;
-          height: 9px;
-          border: 1px solid rgba(245, 246, 247, 0.7);
-          -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-          box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-          border-radius: 100%;
-          background-color: #4a7;
-        }
-      }
-
-      .vicp-error,
-      .vicp-success {
-        height: 100px;
-        line-height: 100px;
-      }
-    }
-
-    .vicp-operate {
-      position: absolute;
-      right: 20px;
-      bottom: 20px;
-
-      a {
-        position: relative;
-        float: left;
-        display: block;
-        margin-left: 10px;
-        width: 100px;
-        height: 36px;
-        line-height: 36px;
-        text-align: center;
-        cursor: pointer;
-        font-size: 14px;
-        color: #4a7;
-        border-radius: 2px;
-        overflow: hidden;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-
-      a:hover {
-        background-color: rgba(0, 0, 0, 0.03);
-      }
-    }
-
-    .vicp-error,
-    .vicp-success {
-      display: block;
-      font-size: 14px;
-      line-height: 24px;
-      height: 24px;
-      color: #d10;
-      text-align: center;
-    }
-
-    .vicp-success {
-      color: #4a7;
-    }
-
-    .vicp-icon3 {
-      position: relative;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      top: 4px;
-
-      &::after {
-        position: absolute;
-        top: 3px;
-        left: 6px;
-        width: 6px;
-        height: 10px;
-        border-width: 0 2px 2px 0;
-        border-color: #4a7;
-        border-style: solid;
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
-        transform: rotate(45deg);
-        content: '';
-      }
-    }
-
-    .vicp-icon2 {
-      position: relative;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      top: 4px;
-
-      &::after,
-      &::before {
-        content: '';
-        position: absolute;
-        top: 9px;
-        left: 4px;
-        width: 13px;
-        height: 2px;
-        background-color: #d10;
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
-        transform: rotate(45deg);
-      }
-
-      &::after {
-        -webkit-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-      }
-    }
-
-  }
-
 }
-
+.vue-image-crop-upload .vicp-wrap {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  position: fixed;
+  display: block;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 10000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 600px;
+  height: 330px;
+  padding: 25px;
+  background-color: #fff;
+  border-radius: 2px;
+  -webkit-animation: vicp 0.12s ease-in;
+  animation: vicp 0.12s ease-in;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close {
+  position: absolute;
+  right: -30px;
+  top: -30px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
+  position: relative;
+  display: block;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  -webkit-transition: -webkit-transform 0.18s;
+  transition: -webkit-transform 0.18s;
+  transition: transform 0.18s;
+  transition: transform 0.18s, -webkit-transform 0.18s;
+  -webkit-transform: rotate(0);
+  -ms-transform: rotate(0);
+  transform: rotate(0);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after,
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: 4px;
+  width: 20px;
+  height: 3px;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  background-color: #fff;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 35px;
+  height: 170px;
+  background-color: rgba(0, 0, 0, 0.03);
+  text-align: center;
+  border: 1px dashed rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
+  display: block;
+  margin: 0 auto 6px;
+  width: 42px;
+  height: 42px;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-icon1
+  .vicp-icon1-arrow {
+  display: block;
+  margin: 0 auto;
+  width: 0;
+  height: 0;
+  border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
+  border-left: 14.7px solid transparent;
+  border-right: 14.7px solid transparent;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-icon1
+  .vicp-icon1-body {
+  display: block;
+  width: 12.6px;
+  height: 14.7px;
+  margin: 0 auto;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-icon1
+  .vicp-icon1-bottom {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  height: 12.6px;
+  border: 6px solid rgba(0, 0, 0, 0.3);
+  border-top: none;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
+  display: block;
+  padding: 15px;
+  font-size: 14px;
+  color: #666;
+  line-height: 30px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-no-supported-hint {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 30px;
+  width: 100%;
+  height: 60px;
+  line-height: 30px;
+  background-color: #eee;
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
+  cursor: pointer;
+  border-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
+  overflow: hidden;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
+  float: left;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container {
+  position: relative;
+  display: block;
+  width: 240px;
+  height: 180px;
+  background-color: #e5e5e0;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img {
+  position: absolute;
+  display: block;
+  cursor: move;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img-shade {
+  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  position: absolute;
+  background-color: rgba(241, 242, 243, 0.8);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img-shade.vicp-img-shade-1 {
+  top: 0;
+  left: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img-shade.vicp-img-shade-2 {
+  bottom: 0;
+  right: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate {
+  position: relative;
+  width: 240px;
+  height: 18px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  line-height: 18px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: bold;
+  background-color: rgba(0, 0, 0, 0.08);
+  color: #fff;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i:hover {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.14);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i:first-child {
+  float: left;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i:last-child {
+  float: right;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range {
+  position: relative;
+  margin: 30px 0 10px 0;
+  width: 240px;
+  height: 18px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5,
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6 {
+  position: absolute;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.08);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5:hover,
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6:hover {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.14);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5 {
+  left: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5::before {
+  position: absolute;
+  content: "";
+  display: block;
+  left: 3px;
+  top: 8px;
+  width: 12px;
+  height: 2px;
+  background-color: #fff;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6 {
+  right: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6::before {
+  position: absolute;
+  content: "";
+  display: block;
+  left: 3px;
+  top: 8px;
+  width: 12px;
+  height: 2px;
+  background-color: #fff;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6::after {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 3px;
+  left: 8px;
+  width: 2px;
+  height: 12px;
+  background-color: #fff;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"] {
+  display: block;
+  padding-top: 5px;
+  margin: 0 auto;
+  width: 180px;
+  height: 8px;
+  vertical-align: top;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  /* 滑块
+               ---------------------------------------------------------------*/
+  /* 轨道
+               ---------------------------------------------------------------*/
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus {
+  outline: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-webkit-slider-thumb {
+  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -3px;
+  width: 12px;
+  height: 12px;
+  background-color: #61c091;
+  border-radius: 100%;
+  border: none;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-moz-range-thumb {
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  -moz-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background-color: #61c091;
+  border-radius: 100%;
+  border: none;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-thumb {
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background-color: #61c091;
+  border: none;
+  border-radius: 100%;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:active::-moz-range-thumb {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  width: 14px;
+  height: 14px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:active::-ms-thumb {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  width: 14px;
+  height: 14px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:active::-webkit-slider-thumb {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  margin-top: -4px;
+  width: 14px;
+  height: 14px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-webkit-slider-runnable-track {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  width: 100%;
+  height: 6px;
+  cursor: pointer;
+  border-radius: 2px;
+  border: none;
+  background-color: rgba(68, 170, 119, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-moz-range-track {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  width: 100%;
+  height: 6px;
+  cursor: pointer;
+  border-radius: 2px;
+  border: none;
+  background-color: rgba(68, 170, 119, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-track {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  width: 100%;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+  height: 6px;
+  border-radius: 2px;
+  border: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-fill-lower {
+  background-color: rgba(68, 170, 119, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-fill-upper {
+  background-color: rgba(68, 170, 119, 0.15);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-webkit-slider-runnable-track {
+  background-color: rgba(68, 170, 119, 0.5);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-moz-range-track {
+  background-color: rgba(68, 170, 119, 0.5);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-ms-fill-lower {
+  background-color: rgba(68, 170, 119, 0.45);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-ms-fill-upper {
+  background-color: rgba(68, 170, 119, 0.25);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
+  float: right;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview {
+  height: 150px;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item {
+  position: relative;
+  padding: 5px;
+  width: 100px;
+  height: 100px;
+  float: left;
+  margin-right: 16px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item
+  span {
+  position: absolute;
+  bottom: -30px;
+  width: 100%;
+  font-size: 14px;
+  color: #bbb;
+  display: block;
+  text-align: center;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item
+  img {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  padding: 3px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item.vicp-preview-item-circle {
+  margin-right: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item.vicp-preview-item-circle
+  img {
+  border-radius: 100%;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 35px;
+  height: 170px;
+  background-color: rgba(0, 0, 0, 0.03);
+  text-align: center;
+  border: 1px dashed #ddd;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
+  display: block;
+  padding: 15px;
+  font-size: 16px;
+  color: #999;
+  line-height: 30px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
+  margin-top: 12px;
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 3px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step3
+  .vicp-upload
+  .vicp-progress-wrap
+  .vicp-progress {
+  position: relative;
+  display: block;
+  height: 5px;
+  border-radius: 3px;
+  background-color: #4a7;
+  -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
+  box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
+  -webkit-transition: width 0.15s linear;
+  transition: width 0.15s linear;
+  background-image: -webkit-linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 40px 40px;
+  -webkit-animation: vicp_progress 0.5s linear infinite;
+  animation: vicp_progress 0.5s linear infinite;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step3
+  .vicp-upload
+  .vicp-progress-wrap
+  .vicp-progress::after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: -3px;
+  right: -3px;
+  width: 9px;
+  height: 9px;
+  border: 1px solid rgba(245, 246, 247, 0.7);
+  -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
+  box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
+  border-radius: 100%;
+  background-color: #4a7;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
+  height: 100px;
+  line-height: 100px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-operate {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-operate a {
+  position: relative;
+  float: left;
+  display: block;
+  margin-left: 10px;
+  width: 100px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: #4a7;
+  border-radius: 2px;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-error,
+.vue-image-crop-upload .vicp-wrap .vicp-success {
+  display: block;
+  font-size: 14px;
+  line-height: 24px;
+  height: 24px;
+  color: #d10;
+  text-align: center;
+  vertical-align: top;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-success {
+  color: #4a7;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon3 {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  top: 4px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
+  position: absolute;
+  top: 3px;
+  left: 6px;
+  width: 6px;
+  height: 10px;
+  border-width: 0 2px 2px 0;
+  border-color: #4a7;
+  border-style: solid;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  content: "";
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon2 {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  top: 4px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon2::after,
+.vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
+  content: "";
+  position: absolute;
+  top: 9px;
+  left: 4px;
+  width: 13px;
+  height: 2px;
+  background-color: #d10;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
 .e-ripple {
   position: absolute;
   border-radius: 100%;
@@ -1516,18 +1763,16 @@ export default {
   -ms-transform: scale(0);
   transform: scale(0);
   opacity: 1;
-
-  .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;
-  }
 }
-
+.e-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;
+}
 </style>
diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
index e7dc196d..07b282e4 100644
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -55,21 +55,18 @@ 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>
diff --git a/src/components/Kanban/index.vue b/src/components/Kanban/index.vue
index 6735d89d..82f7dd7e 100644
--- 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: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
+      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
     }
   }
 }
diff --git a/src/components/MDinput/index.vue b/src/components/MDinput/index.vue
index 4f83c659..c59ea34a 100644
--- 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: 0;
+  $index: 0px;
   $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,11 +239,9 @@ export default {
   .material-input__component {
     margin-top: 36px;
     position: relative;
-
     * {
       box-sizing: border-box;
     }
-
     .iconClass {
       .material-input__icon {
         position: absolute;
@@ -257,16 +255,13 @@ 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;
@@ -275,14 +270,12 @@ 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;
@@ -292,18 +285,15 @@ 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%;
       }
@@ -323,8 +313,8 @@ export default {
     // Active state:
     &.material--active {
       .material-input-bar {
-        &::before,
-        &::after {
+        &:before,
+        &:after {
           width: 50%;
         }
       }
@@ -333,21 +323,18 @@ 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;
       }
     }
@@ -362,10 +349,9 @@ export default {
       &.material--active .material-label {
         color: $color-red;
       }
-
       .material-input-bar {
-        &::before,
-        &::after {
+        &:before,
+        &:after {
           background: transparent;
         }
       }
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 0fc96d0e..c815e132 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -95,7 +95,6 @@ export default {
   background: #fff;
   padding: 32px 16px;
 }
-
 .pagination-container.hidden {
   display: none;
 }
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index 5dc50f54..1bcf4170 100644
--- 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;
+  padding: 22px 0 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(0) rotate(0deg);
+  transform: translateX(0px) rotate(0deg);
 }
 </style>
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index fe057dcb..55e8c1e5 100644
--- 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 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  background: rgba(0, 0, 0, 0.2);
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
   z-index: -1;
 }
 
@@ -102,15 +102,15 @@ export default {
   position: fixed;
   top: 0;
   right: 0;
-  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);
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
   transform: translate(100%);
   background: #fff;
   z-index: 40000;
 }
 
 .show {
-  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
 
   .rightPanel-background {
     z-index: 20000;
@@ -137,7 +137,6 @@ export default {
   cursor: pointer;
   color: #fff;
   line-height: 48px;
-
   i {
     font-size: 24px;
     line-height: 48px;
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 61d0859e..260c90de 100644
--- 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;
diff --git a/src/components/Share/DropdownMenu.vue b/src/components/Share/DropdownMenu.vue
index 2efd5325..d194a517 100644
--- a/src/components/Share/DropdownMenu.vue
+++ b/src/components/Share/DropdownMenu.vue
@@ -39,14 +39,12 @@ export default {
 
 <style lang="scss" >
 $n: 9; //和items.length 相同
-$t: 0.1s;
-
+$t: .1s;
 .share-dropdown-menu {
   width: 250px;
   position: relative;
   z-index: 1;
-  height: auto !important;
-
+  height: auto!important;
   &-title {
     width: 100%;
     display: block;
@@ -58,13 +56,11 @@ $t: 0.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;
@@ -78,7 +74,6 @@ $t: 0.1s;
     overflow: hidden;
     opacity: 1;
     transition: transform 0.28s ease;
-
     &:hover {
       background: black;
       color: white;
@@ -91,12 +86,10 @@ $t: 0.1s;
       }
     }
   }
-
   &.active {
     .share-dropdown-menu-wrapper {
       z-index: 1;
     }
-
     .share-dropdown-menu-item {
       @for $i from 1 through $n {
         &:nth-of-type(#{$i}) {
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 47f5a48c..b07ded2a 100644
--- 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>
diff --git a/src/components/TextHoverEffect/Mallki.vue b/src/components/TextHoverEffect/Mallki.vue
index 9de62dd7..5d6d16ca 100644
--- 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;
+  margin: -3px 0 0 0;
   background: #3888fa;
   position: absolute;
   left: 0;
diff --git a/src/components/Tinymce/components/EditorImage.vue b/src/components/Tinymce/components/EditorImage.vue
index 60f0c576..d4a98e84 100644
--- a/src/components/Tinymce/components/EditorImage.vue
+++ b/src/components/Tinymce/components/EditorImage.vue
@@ -104,7 +104,6 @@ export default {
 <style lang="scss" scoped>
 .editor-slide-upload {
   margin-bottom: 20px;
-
   /deep/ .el-upload--picture-card {
     width: 100%;
   }
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index d0074d70..b3538c25 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -218,28 +218,23 @@ 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;
 }
diff --git a/src/components/Upload/SingleImage.vue b/src/components/Upload/SingleImage.vue
index 9684f3fe..d16bbf37 100644
--- a/src/components/Upload/SingleImage.vue
+++ b/src/components/Upload/SingleImage.vue
@@ -78,65 +78,57 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    @import '~@/styles/mixin.scss';
-
+    @import "~@/styles/mixin.scss";
     .upload-container {
-      @include clearfix;
-      width: 100%;
-      position: relative;
-
-      .image-uploader {
-        width: 60%;
-        float: left;
-      }
-
-      .image-preview {
-        width: 200px;
-        height: 200px;
+        width: 100%;
         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%;
-          }
+        @include clearfix;
+        .image-uploader {
+            width: 60%;
+            float: left;
         }
-
-        .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;
-          }
+        .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;
+                }
+            }
         }
-
-        &:hover {
-          .image-preview-action {
-            opacity: 1;
-          }
-        }
-      }
     }
 
 </style>
diff --git a/src/components/Upload/SingleImage2.vue b/src/components/Upload/SingleImage2.vue
index 4b81971f..07637a9e 100644
--- a/src/components/Upload/SingleImage2.vue
+++ b/src/components/Upload/SingleImage2.vue
@@ -81,30 +81,25 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-
   .image-uploader {
     height: 100%;
   }
-
   .image-preview {
     width: 100%;
     height: 100%;
     position: absolute;
-    left: 0;
-    top: 0;
+    left: 0px;
+    top: 0px;
     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%;
@@ -116,17 +111,15 @@ export default {
       color: #fff;
       opacity: 0;
       font-size: 20px;
-      background-color: rgba(0, 0, 0, 0.5);
-      transition: opacity 0.3s;
+      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;
diff --git a/src/components/Upload/SingleImage3.vue b/src/components/Upload/SingleImage3.vue
index c67a80ea..6300da4b 100644
--- a/src/components/Upload/SingleImage3.vue
+++ b/src/components/Upload/SingleImage3.vue
@@ -86,18 +86,15 @@ 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;
@@ -105,18 +102,15 @@ 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%;
@@ -128,24 +122,21 @@ export default {
       color: #fff;
       opacity: 0;
       font-size: 20px;
-      background-color: rgba(0, 0, 0, 0.5);
-      transition: opacity 0.3s;
+      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-app-preview {
     width: 320px;
     height: 180px;
@@ -153,7 +144,6 @@ export default {
     border: 1px dashed #d9d9d9;
     float: left;
     margin-left: 50px;
-
     .app-fake-conver {
       height: 44px;
       position: absolute;
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
index 6c5b1d04..9e8ba8b6 100644
--- 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,12 +119,11 @@ 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;
diff --git a/src/directive/waves/waves.css b/src/directive/waves/waves.css
index c76840ad..af7a7efd 100644
--- 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;
+}
\ No newline at end of file
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 45e2090e..37bc1e69 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -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, 0.08);
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background 0.3s;
-    -webkit-tap-highlight-color: transparent;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.025);
+      background: rgba(0, 0, 0, .025)
     }
   }
 
@@ -131,10 +131,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background 0.3s;
+        transition: background .3s;
 
         &:hover {
-          background: rgba(0, 0, 0, 0.025);
+          background: rgba(0, 0, 0, .025)
         }
       }
     }
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 48363951..32ef0189 100644
--- 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, 0.85);
+    color: rgba(0, 0, 0, .85);
     font-size: 14px;
     line-height: 22px;
   }
 
   .drawer-item {
-    color: rgba(0, 0, 0, 0.65);
+    color: rgba(0, 0, 0, .65);
     font-size: 14px;
     padding: 12px 0;
   }
 
   .drawer-switch {
-    float: right;
+    float: right
   }
 }
 </style>
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index c5560fb0..ac0c8d8f 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -75,7 +75,7 @@ export default {
 
   &.collapse {
     .sidebar-logo {
-      margin-right: 0;
+      margin-right: 0px;
     }
   }
 }
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 7bb0117d..34a7e55f 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -82,12 +82,10 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-
   /deep/ {
     .el-scrollbar__bar {
-      bottom: 0;
+      bottom: 0px;
     }
-
     .el-scrollbar__wrap {
       height: 49px;
     }
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 5dc342dd..d2a56e70 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -203,8 +203,7 @@ export default {
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -219,20 +218,16 @@ 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;
@@ -246,7 +241,6 @@ export default {
       }
     }
   }
-
   .contextmenu {
     margin: 0;
     background: #fff;
@@ -258,13 +252,11 @@ export default {
     font-size: 12px;
     font-weight: 400;
     color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
-
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
-
       &:hover {
         background: #eee;
       }
@@ -283,15 +275,13 @@ export default {
       vertical-align: 2px;
       border-radius: 50%;
       text-align: center;
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all .3s cubic-bezier(.645, .045, .355, 1);
       transform-origin: 100% 50%;
-
-      &::before {
-        transform: scale(0.6);
+      &:before {
+        transform: scale(.6);
         display: inline-block;
         vertical-align: -3px;
       }
-
       &:hover {
         background-color: #b4bccc;
         color: #fff;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 78520b73..965bcd1b 100644
--- 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 {
diff --git a/src/styles/btn.scss b/src/styles/btn.scss
index f48eb313..e6ba1a8e 100644
--- a/src/styles/btn.scss
+++ b/src/styles/btn.scss
@@ -6,33 +6,40 @@
   &: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;
@@ -48,15 +55,15 @@
   &:hover {
     background: #fff;
 
-    &::before,
-    &::after {
+    &:before,
+    &:after {
       width: 100%;
       transition: 600ms ease all;
     }
   }
 
-  &::before,
-  &::after {
+  &:before,
+  &:after {
     content: '';
     position: absolute;
     top: 0;
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 44e4fcbf..49474de3 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -6,7 +6,7 @@
 }
 
 .el-upload {
-  input[type='file'] {
+  input[type="file"] {
     display: none !important;
   }
 }
@@ -17,7 +17,7 @@
 
 .cell {
   .el-tag {
-    margin-right: 0;
+    margin-right: 0px;
   }
 }
 
@@ -41,7 +41,7 @@
     text-align: center;
 
     .el-tag {
-      margin-right: 0;
+      margin-right: 0px;
     }
   }
 }
@@ -69,7 +69,7 @@
 // dropdown
 .el-dropdown-menu {
   a {
-    display: block;
+    display: block
   }
 }
 
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index 3c494e6e..5bdc4dad 100644
--- 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
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b7ee606d..96095ef6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -27,13 +27,13 @@ html {
 }
 
 *,
-*::before,
-*::after {
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
 .no-padding {
-  padding: 0 !important;
+  padding: 0px !important;
 }
 
 .padding-content {
@@ -86,11 +86,11 @@ div:focus {
 }
 
 .clearfix {
-  &::after {
+  &:after {
     visibility: hidden;
     display: block;
     font-size: 0;
-    content: ' ';
+    content: " ";
     clear: both;
     height: 0;
   }
@@ -104,7 +104,7 @@ aside {
   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;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -134,7 +134,7 @@ aside {
 }
 
 .text-center {
-  text-align: center;
+  text-align: center
 }
 
 .sub-navbar {
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 8835c9d0..06fa0612 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -1,6 +1,6 @@
 @mixin clearfix {
-  &::after {
-    content: '';
+  &:after {
+    content: "";
     display: table;
     clear: both;
   }
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 859e36ed..3dad4c39 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,7 +1,8 @@
 #app {
+
   .main-container {
     min-height: 100%;
-    transition: margin-left 0.28s;
+    transition: margin-left .28s;
     margin-left: $sideBarWidth;
     position: relative;
   }
@@ -12,7 +13,7 @@
     background-color: $menuBg;
     height: 100%;
     position: fixed;
-    font-size: 0;
+    font-size: 0px;
     top: 0;
     bottom: 0;
     left: 0;
@@ -29,7 +30,7 @@
     }
 
     .el-scrollbar__bar.is-vertical {
-      right: 0;
+      right: 0px;
     }
 
     .el-scrollbar {
@@ -145,11 +146,11 @@
   // mobile responsive
   .mobile {
     .main-container {
-      margin-left: 0;
+      margin-left: 0px;
     }
 
     .sidebar-container {
-      transition: transform 0.28s;
+      transition: transform .28s;
       width: $sideBarWidth !important;
     }
 
@@ -163,6 +164,7 @@
   }
 
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index b02f60b1..4cb27cc8 100644
--- 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 0.5s;
+  transition: all .5s;
 }
 
 .fade-transform-enter {
@@ -30,7 +30,7 @@
 /* breadcrumb transition */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all 0.5s;
+  transition: all .5s;
 }
 
 .breadcrumb-enter,
@@ -40,7 +40,7 @@
 }
 
 .breadcrumb-move {
-  transition: all 0.5s;
+  transition: all .5s;
 }
 
 .breadcrumb-leave-active {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 555f0303..a19c27c1 100644
--- 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;
 
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index b94da4b7..917f8eeb 100644
--- a/src/views/charts/keyboard.vue
+++ b/src/views/charts/keyboard.vue
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style scoped>
-.chart-container {
+.chart-container{
   position: relative;
   width: 100%;
   height: calc(100vh - 84px);
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
index 36565bd9..fea1497e 100644
--- a/src/views/charts/line.vue
+++ b/src/views/charts/line.vue
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style scoped>
-.chart-container {
+.chart-container{
   position: relative;
   width: 100%;
   height: calc(100vh - 84px);
diff --git a/src/views/charts/mix-chart.vue b/src/views/charts/mix-chart.vue
index 4a5eb45e..c57db75a 100644
--- a/src/views/charts/mix-chart.vue
+++ b/src/views/charts/mix-chart.vue
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style scoped>
-.chart-container {
+.chart-container{
   position: relative;
   width: 100%;
   height: calc(100vh - 84px);
diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index 0548bd90..4a6bdd1e 100644
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -2,13 +2,13 @@
   <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="width:400px;max-width:100%;" />
         <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="width:400px;max-width:100%;" />
         <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
           copy
         </el-button>
diff --git a/src/views/components-demo/avatar-upload.vue b/src/views/components-demo/avatar-upload.vue
index 620d3ddd..5cb20a56 100644
--- a/src/views/components-demo/avatar-upload.vue
+++ b/src/views/components-demo/avatar-upload.vue
@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style scoped>
-  .avatar {
+  .avatar{
     width: 200px;
     height: 200px;
     border-radius: 50%;
diff --git a/src/views/components-demo/count-to.vue b/src/views/components-demo/count-to.vue
index 0980013d..70681df6 100644
--- a/src/views/components-demo/count-to.vue
+++ b/src/views/components-demo/count-to.vue
@@ -142,23 +142,22 @@ export default {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  -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-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, 0.65);
+  color: rgba(0, 0, 0, .65);
   background-color: #fff;
   border-color: #d9d9d9;
 }
 
 .example-btn:hover {
-  color: #4ab7bd;
+  color: #4AB7BD;
   background-color: #fff;
-  border-color: #4ab7bd;
+  border-color: #4AB7BD;
 }
-
 .example {
   font-size: 50px;
-  color: #f6416c;
+  color: #F6416C;
   display: block;
   margin: 10px 0;
   text-align: center;
@@ -182,38 +181,38 @@ input {
   cursor: text;
   font-size: 12px;
   line-height: 1.5;
-  color: rgba(0, 0, 0, 0.65);
+  color: rgba(0, 0, 0, .65);
   background-color: #fff;
   background-image: none;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
+  -webkit-transition: all .3s;
+  transition: all .3s;
 }
 
 .startBtn {
   margin-left: 20px;
   font-size: 20px;
-  color: #30b08f;
+  color: #30B08F;
   background-color: #fff;
 }
 
 .startBtn:hover {
-  background-color: #30b08f;
+  background-color: #30B08F;
   color: #fff;
-  border-color: #30b08f;
+  border-color: #30B08F;
 }
 
 .pause-resume-btn {
   font-size: 20px;
-  color: #e65d6e;
+  color: #E65D6E;
   background-color: #fff;
 }
 
 .pause-resume-btn:hover {
-  background-color: #e65d6e;
+  background-color: #E65D6E;
   color: #fff;
-  border-color: #e65d6e;
+  border-color: #E65D6E;
 }
 </style>
 
diff --git a/src/views/components-demo/drag-kanban.vue b/src/views/components-demo/drag-kanban.vue
index 37e8875b..943be455 100644
--- a/src/views/components-demo/drag-kanban.vue
+++ b/src/views/components-demo/drag-kanban.vue
@@ -45,20 +45,17 @@ export default {
   flex-direction: row;
   align-items: flex-start;
 }
-
 .kanban {
   &.todo {
     .board-column-header {
-      background: #4a9ff9;
+      background: #4A9FF9;
     }
   }
-
   &.working {
     .board-column-header {
       background: #f9944a;
     }
   }
-
   &.done {
     .board-column-header {
       background: #2ac06d;
diff --git a/src/views/components-demo/drag-select.vue b/src/views/components-demo/drag-select.vue
index 334b2b56..905ecb94 100644
--- 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>
diff --git a/src/views/components-demo/json-editor.vue b/src/views/components-demo/json-editor.vue
index 353fb3ef..85bf3834 100644
--- a/src/views/components-demo/json-editor.vue
+++ b/src/views/components-demo/json-editor.vue
@@ -28,7 +28,7 @@ export default {
 </script>
 
 <style scoped>
-.editor-container {
+.editor-container{
   position: relative;
   height: 100%;
 }
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index 3ce69e8a..25cf3e37 100644
--- 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,11 +92,10 @@ export default {
 </script>
 
 <style scoped>
-.editor-container {
+.editor-container{
   margin-bottom: 30px;
 }
-
-.tag-title {
+.tag-title{
   margin-bottom: 5px;
 }
 </style>
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 31373747..425cf4fb 100644
--- 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>
@@ -163,8 +163,7 @@ export default {
   padding: 30px;
   min-height: calc(100vh - 84px);
 }
-
-.component-item {
+.component-item{
   min-height: 100px;
 }
 </style>
diff --git a/src/views/components-demo/split-pane.vue b/src/views/components-demo/split-pane.vue
index e5291182..7dba353f 100644
--- a/src/views/components-demo/split-pane.vue
+++ b/src/views/components-demo/split-pane.vue
@@ -44,24 +44,24 @@ export default {
   }
 
   .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;
+    background-color: #FCE38A;
     width: 100%;
     height: 100%;
   }
 
   .bottom-container {
     width: 100%;
-    background-color: #95e1d3;
+    background-color: #95E1D3;
     height: 100%;
   }
 </style>
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index bfe03d69..f01d088a 100644
--- 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
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index e33d15a5..c70179fa 100644
--- 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>
diff --git a/src/views/dashboard/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
index 22096a95..dff8462a 100644
--- 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;">
+    <div style="position:relative;">
       <pan-thumb :image="avatar" class="panThumb" />
       <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,9 +62,9 @@ export default {
 </script>
 
 <style lang="scss" >
-.box-card-component {
+.box-card-component{
   .el-card__header {
-    padding: 0 !important;
+    padding: 0px!important;
   }
 }
 </style>
@@ -73,50 +73,44 @@ export default {
   .box-card-header {
     position: relative;
     height: 220px;
-
     img {
       width: 100%;
       height: 100%;
       transition: all 0.2s linear;
-
       &:hover {
         transform: scale(1.1, 1.1);
         filter: contrast(130%);
       }
     }
   }
-
   .mallki-text {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 0px;
+    right: 0px;
     font-size: 20px;
     font-weight: bold;
   }
-
   .panThumb {
     z-index: 100;
-    height: 70px !important;
-    width: 70px !important;
-    position: absolute !important;
+    height: 70px!important;
+    width: 70px!important;
+    position: absolute!important;
     top: -45px;
-    left: 0;
-    border: 5px solid #fff;
+    left: 0px;
+    border: 5px solid #ffffff;
     background-color: #fff;
     margin: auto;
-    box-shadow: none !important;
-
+    box-shadow: none!important;
     /deep/ .pan-info {
-      box-shadow: none !important;
+      box-shadow: none!important;
     }
   }
-
   .progress-item {
     margin-bottom: 10px;
     font-size: 14px;
   }
-  @media only screen and (max-width: 1510px) {
-    .mallki-text {
+  @media only screen and (max-width: 1510px){
+    .mallki-text{
       display: none;
     }
   }
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index 574d653e..589236ed 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -86,8 +86,8 @@ export default {
     overflow: hidden;
     color: #666;
     background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
-    border-color: rgba(0, 0, 0, 0.05);
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
 
     &:hover {
       .card-panel-icon-wrapper {
@@ -107,7 +107,7 @@ export default {
       }
 
       .icon-shopping {
-        background: #34bfa3;
+        background: #34bfa3
       }
     }
 
@@ -124,7 +124,7 @@ export default {
     }
 
     .icon-shopping {
-      color: #34bfa3;
+      color: #34bfa3
     }
 
     .card-panel-icon-wrapper {
@@ -144,7 +144,7 @@ export default {
       float: right;
       font-weight: bold;
       margin: 26px;
-      margin-left: 0;
+      margin-left: 0px;
 
       .card-panel-text {
         line-height: 18px;
diff --git a/src/views/dashboard/admin/components/TodoList/index.scss b/src/views/dashboard/admin/components/TodoList/index.scss
index d33503ff..74ce0d54 100644
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ b/src/views/dashboard/admin/components/TodoList/index.scss
@@ -4,14 +4,13 @@
   color: #4d4d4d;
   min-width: 230px;
   max-width: 550px;
-  margin: 0 auto;
+  margin: 0 auto ;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 300;
   background: #fff;
   z-index: 1;
   position: relative;
-
   button {
     margin: 0;
     padding: 0;
@@ -27,40 +26,33 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-
   :focus {
     outline: 0;
   }
-
   .hidden {
     display: none;
   }
-
   .todoapp {
     background: #fff;
-    margin: 130px 0 40px;
+    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);
   }
-
   .todoapp input::-webkit-input-placeholder {
     font-style: italic;
     font-weight: 300;
     color: #e6e6e6;
   }
-
   .todoapp input::-moz-placeholder {
     font-style: italic;
     font-weight: 300;
     color: #e6e6e6;
   }
-
   .todoapp input::input-placeholder {
     font-style: italic;
     font-weight: 300;
     color: #e6e6e6;
   }
-
   .todoapp h1 {
     position: absolute;
     top: -155px;
@@ -73,7 +65,6 @@
     -moz-text-rendering: optimizeLegibility;
     text-rendering: optimizeLegibility;
   }
-
   .new-todo,
   .edit {
     position: relative;
@@ -92,20 +83,17 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-
   .new-todo {
     padding: 10px 16px 16px 60px;
     border: none;
     background: rgba(0, 0, 0, 0.003);
     box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
   }
-
   .main {
     position: relative;
     z-index: 2;
     border-top: 1px solid #e6e6e6;
   }
-
   .toggle-all {
     text-align: center;
     border: none;
@@ -113,7 +101,6 @@
     opacity: 0;
     position: absolute;
   }
-
   .toggle-all+label {
     width: 60px;
     height: 34px;
@@ -124,50 +111,41 @@
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
-
-  .toggle-all+label::before {
+  .toggle-all+label:before {
     content: '❯';
     font-size: 22px;
     color: #e6e6e6;
-    padding: 10px 27px;
+    padding: 10px 27px 10px 27px;
   }
-
-  .toggle-all:checked+label::before {
+  .toggle-all:checked+label:before {
     color: #737373;
   }
-
   .todo-list {
     margin: 0;
     padding: 0;
     list-style: none;
   }
-
   .todo-list li {
     position: relative;
     font-size: 24px;
     border-bottom: 1px solid #ededed;
   }
-
   .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;
   }
-
   .todo-list li.editing .view {
     display: none;
   }
-
   .todo-list li .toggle {
     text-align: center;
     width: 40px;
@@ -182,11 +160,9 @@
     -webkit-appearance: none;
     appearance: none;
   }
-
   .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
@@ -197,26 +173,22 @@
     background-position: center left;
     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');
   }
-
   .todo-list li label {
     word-break: break-all;
     padding: 15px 15px 15px 50px;
     display: block;
-    line-height: 1;
-    font-size: 14px;
+    line-height: 1.0;
+        font-size: 14px;
     transition: color 0.4s;
   }
-
   .todo-list li.completed label {
     color: #d9d9d9;
     text-decoration: line-through;
   }
-
   .todo-list li .destroy {
     display: none;
     position: absolute;
@@ -231,27 +203,21 @@
     transition: color 0.2s ease-out;
     cursor: pointer;
   }
-
   .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;
@@ -260,8 +226,7 @@
     text-align: center;
     border-top: 1px solid #e6e6e6;
   }
-
-  .footer::before {
+  .footer:before {
     content: '';
     position: absolute;
     right: 0;
@@ -271,16 +236,13 @@
     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 {
     margin: 0;
     padding: 0;
@@ -288,11 +250,9 @@
     z-index: 1;
     list-style: none;
   }
-
   .filters li {
     display: inline;
   }
-
   .filters li a {
     color: inherit;
     font-size: 12px;
@@ -301,15 +261,12 @@
     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;
@@ -318,11 +275,9 @@
     text-decoration: none;
     cursor: pointer;
   }
-
   .clear-completed:hover {
     text-decoration: underline;
   }
-
   .info {
     margin: 65px auto 0;
     color: #bfbfbf;
@@ -330,17 +285,14 @@
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
     text-align: center;
   }
-
   .info p {
     line-height: 1;
   }
-
   .info a {
     color: inherit;
     text-decoration: none;
     font-weight: 400;
   }
-
   .info a:hover {
     text-decoration: underline;
   }
@@ -353,7 +305,6 @@
     .todo-list li .toggle {
       background: none;
     }
-
     .todo-list li .toggle {
       height: 40px;
     }
@@ -362,7 +313,6 @@
     .footer {
       height: 50px;
     }
-
     .filters {
       bottom: 10px;
     }
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index aaa6d749..8cb557be 100644
--- 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;padding:16px 16px 0;margin-bottom:32px;">
       <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="padding-right:8px;margin-bottom:30px;">
         <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>
@@ -104,7 +104,7 @@ export default {
 
   .github-corner {
     position: absolute;
-    top: 0;
+    top: 0px;
     border: 0;
     right: 0;
   }
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index 822f6c71..9723bcce 100644
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -1,14 +1,14 @@
 <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: 0; border: 0; right: 0;" />
+      <github-corner style="position: absolute; top: 0px; border: 0; right: 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 style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
       </div>
     </div>
     <div>
@@ -50,21 +50,18 @@ export default {
   .dashboard-editor-container {
     background-color: #e3e3e3;
     min-height: 100vh;
-    padding: 50px 60px 0;
-
+    padding: 50px 60px 0px;
     .pan-info-roles {
       font-size: 12px;
       font-weight: 700;
       color: #333;
       display: block;
     }
-
     .info-container {
       position: relative;
       margin-left: 190px;
       height: 150px;
       line-height: 200px;
-
       .display_name {
         font-size: 48px;
         line-height: 48px;
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index 3ac7ccb0..a52ed23b 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -63,41 +63,33 @@ export default {
     width: 800px;
     max-width: 100%;
     margin: 100px auto;
-
     .pan-back-btn {
       background: #008489;
       color: #fff;
-      border: none !important;
+      border: none!important;
     }
-
     .pan-gif {
       margin: 0 auto;
       display: block;
     }
-
     .pan-img {
       display: block;
       margin: 0 auto;
       width: 100%;
     }
-
     .text-jumbo {
       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;
         }
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index d5cc9d4d..1791f55a 100644
--- 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,32 +33,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wscn-http404-container {
-  transform: translate(-50%, -50%);
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
   position: absolute;
   top: 40%;
   left: 50%;
 }
-
 .wscn-http404 {
   position: relative;
   width: 1200px;
   padding: 0 50px;
   overflow: hidden;
-
   .pic-404 {
     position: relative;
     float: left;
     width: 600px;
     overflow: hidden;
-
     &__parent {
       width: 100%;
     }
-
     &__child {
       position: absolute;
-
       &.left {
         width: 80px;
         top: 17px;
@@ -70,7 +65,6 @@ export default {
         animation-fill-mode: forwards;
         animation-delay: 1s;
       }
-
       &.mid {
         width: 46px;
         top: 10px;
@@ -82,7 +76,6 @@ export default {
         animation-fill-mode: forwards;
         animation-delay: 1.2s;
       }
-
       &.right {
         width: 62px;
         top: 100px;
@@ -100,19 +93,16 @@ export default {
           left: 220px;
           opacity: 0;
         }
-
         20% {
           top: 33px;
           left: 188px;
           opacity: 1;
         }
-
         80% {
           top: 81px;
           left: 92px;
           opacity: 1;
         }
-
         100% {
           top: 97px;
           left: 60px;
@@ -125,19 +115,16 @@ export default {
           left: 420px;
           opacity: 0;
         }
-
         20% {
           top: 40px;
           left: 360px;
           opacity: 1;
         }
-
         70% {
           top: 130px;
           left: 180px;
           opacity: 1;
         }
-
         100% {
           top: 160px;
           left: 120px;
@@ -150,19 +137,16 @@ export default {
           left: 500px;
           opacity: 0;
         }
-
         20% {
           top: 120px;
           left: 460px;
           opacity: 1;
         }
-
         80% {
           top: 180px;
           left: 340px;
           opacity: 1;
         }
-
         100% {
           top: 200px;
           left: 300px;
@@ -171,14 +155,12 @@ export default {
       }
     }
   }
-
   .bullshit {
     position: relative;
     float: left;
     width: 300px;
     padding: 30px 0;
     overflow: hidden;
-
     &__oops {
       font-size: 32px;
       font-weight: bold;
@@ -190,7 +172,6 @@ export default {
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
     }
-
     &__headline {
       font-size: 20px;
       line-height: 24px;
@@ -203,7 +184,6 @@ export default {
       animation-delay: 0.1s;
       animation-fill-mode: forwards;
     }
-
     &__info {
       font-size: 13px;
       line-height: 21px;
@@ -215,7 +195,6 @@ export default {
       animation-delay: 0.2s;
       animation-fill-mode: forwards;
     }
-
     &__return-home {
       display: block;
       float: left;
@@ -224,7 +203,7 @@ export default {
       background: #1482f0;
       border-radius: 100px;
       text-align: center;
-      color: #fff;
+      color: #ffffff;
       opacity: 0;
       font-size: 14px;
       line-height: 36px;
@@ -239,7 +218,6 @@ export default {
         transform: translateY(60px);
         opacity: 0;
       }
-
       100% {
         transform: translateY(0);
         opacity: 1;
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index c063bb2e..8aa97339 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -49,7 +49,7 @@
                       :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                       :low-threshold="1"
                       :high-threshold="3"
-                      style="display: inline-block;"
+                      style="display:inline-block"
                     />
                   </el-form-item>
                 </el-col>
@@ -250,7 +250,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/mixin.scss';
+@import "~@/styles/mixin.scss";
 
 .createPost-container {
   position: relative;
@@ -259,8 +259,8 @@ export default {
     padding: 40px 45px 20px 50px;
 
     .postInfo-container {
-      @include clearfix;
       position: relative;
+      @include clearfix;
       margin-bottom: 10px;
 
       .postInfo-container-item {
@@ -273,7 +273,7 @@ export default {
     width: 40px;
     position: absolute;
     right: 10px;
-    top: 0;
+    top: 0px;
   }
 }
 
@@ -282,7 +282,7 @@ export default {
     padding-right: 40px;
     resize: none;
     border: none;
-    border-radius: 0;
+    border-radius: 0px;
     border-bottom: 1px solid #bfcbd9;
   }
 }
diff --git a/src/views/example/components/Dropdown/SourceUrl.vue b/src/views/example/components/Dropdown/SourceUrl.vue
index c01c1e2c..8f47485a 100644
--- 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: 0;" 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: 0px" prop="source_uri">
         <el-input v-model="source_uri" placeholder="Please enter the content">
           <template slot="prepend">
             URL
diff --git a/src/views/example/list.vue b/src/views/example/list.vue
index 07ae9732..7cdc4ac0 100644
--- 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,7 +104,6 @@ export default {
 .edit-input {
   padding-right: 100px;
 }
-
 .cancel-btn {
   position: absolute;
   right: 15px;
diff --git a/src/views/excel/components/AutoWidthOption.vue b/src/views/excel/components/AutoWidthOption.vue
index 6e9b9b26..9050e659 100644
--- 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>
diff --git a/src/views/excel/components/BookTypeOption.vue b/src/views/excel/components/BookTypeOption.vue
index 149a63cc..af9fed39 100644
--- 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"
diff --git a/src/views/excel/components/FilenameOption.vue b/src/views/excel/components/FilenameOption.vue
index 1333805b..75092235 100644
--- 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>
 
diff --git a/src/views/excel/export-excel.vue b/src/views/excel/export-excel.vue
index f0c8af8f..b4d7500b 100644
--- 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>
diff --git a/src/views/excel/merge-header.vue b/src/views/excel/merge-header.vue
index a5a07225..2646b9d0 100644
--- 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"
diff --git a/src/views/excel/select-excel.vue b/src/views/excel/select-excel.vue
index 14f439af..05b85fb8 100644
--- 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
diff --git a/src/views/excel/upload-excel.vue b/src/views/excel/upload-excel.vue
index 87f122c4..1772b7fd 100644
--- 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="width: 100%;margin-top:20px;">
       <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
     </el-table>
   </div>
diff --git a/src/views/login/components/SocialSignin.vue b/src/views/login/components/SocialSignin.vue
index f32a92e0..e9bf4f21 100644
--- a/src/views/login/components/SocialSignin.vue
+++ b/src/views/login/components/SocialSignin.vue
@@ -40,18 +40,15 @@ export default {
 <style lang="scss" scoped>
   .social-signup-container {
     margin: 20px 0;
-
     .sign-btn {
       display: inline-block;
       cursor: pointer;
     }
-
     .icon {
       color: #fff;
       font-size: 24px;
       margin-top: 8px;
     }
-
     .wx-svg-container,
     .qq-svg-container {
       display: inline-block;
@@ -64,13 +61,11 @@ export default {
       margin-bottom: 20px;
       margin-right: 5px;
     }
-
     .wx-svg-container {
       background-color: #24da70;
     }
-
     .qq-svg-container {
-      background-color: #6ba2d6;
+      background-color: #6BA2D6;
       margin-left: 50px;
     }
   }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 976b4b5c..25906405 100644
--- 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="width:100%;margin-bottom:30px;" @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)) {
@@ -223,16 +223,16 @@ $cursor: #fff;
 
     input {
       background: transparent;
-      border: 0;
+      border: 0px;
       -webkit-appearance: none;
-      border-radius: 0;
+      border-radius: 0px;
       padding: 12px 5px 12px 15px;
       color: $light_gray;
       height: 47px;
       caret-color: $cursor;
 
       &:-webkit-autofill {
-        box-shadow: 0 0 0 1000px $bg inset !important;
+        box-shadow: 0 0 0px 1000px $bg inset !important;
         -webkit-text-fill-color: $cursor !important;
       }
     }
@@ -248,9 +248,9 @@ $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%;
@@ -293,7 +293,7 @@ $light_gray: #eee;
     .title {
       font-size: 26px;
       color: $light_gray;
-      margin: 0 auto 40px;
+      margin: 0px auto 40px auto;
       text-align: center;
       font-weight: bold;
     }
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
index 6b353a71..30cb6701 100644
--- 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>
diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue
index c4b67abc..27e173a6 100644
--- 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>
diff --git a/src/views/nested/menu1/menu1-2/index.vue b/src/views/nested/menu1/menu1-2/index.vue
index 3e931edc..0c86276e 100644
--- 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>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
index ce59e408..f87d88f4 100644
--- 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>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
index d2e5d8fd..d88789f2 100644
--- 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>
diff --git a/src/views/nested/menu1/menu1-3/index.vue b/src/views/nested/menu1/menu1-3/index.vue
index ce33cd93..f7cd0738 100644
--- 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>
diff --git a/src/views/nested/menu2/index.vue b/src/views/nested/menu2/index.vue
index dcccea65..19dd48f0 100644
--- 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>
diff --git a/src/views/pdf/download.vue b/src/views/pdf/download.vue
index a8f70631..a348c697 100644
--- a/src/views/pdf/download.vue
+++ b/src/views/pdf/download.vue
@@ -44,13 +44,13 @@ export default {
 
 <style lang="scss">
 @mixin clearfix {
-  &::before {
+  &:before {
     display: table;
     content: '';
     clear: both;
   }
 
-  &::after {
+  &:after {
     display: table;
     content: '';
     clear: both;
@@ -87,14 +87,14 @@ export default {
 }
 
 .node-article-content {
-  @include clearfix;
   margin: 20px 0 0;
+  @include clearfix;
   font-size: 16px;
   color: #333;
   letter-spacing: 0.5px;
   line-height: 28px;
   margin-bottom: 30px;
-  font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman', Times, serif;
+  font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
 
   &> :last-child {
     margin-bottom: 0;
@@ -117,7 +117,7 @@ export default {
     font-style: normal;
     font-size: 21px;
     line-height: 1.58;
-    letter-spacing: -0.003em;
+    letter-spacing: -.003em;
 
   }
 
@@ -129,12 +129,12 @@ export default {
     --x-height-multiplier: 0.375;
     --baseline-multiplier: 0.17;
 
-    letter-spacing: 0.01rem;
+    letter-spacing: .01rem;
     font-weight: 400;
     font-style: normal;
     font-size: 21px;
     line-height: 1.58;
-    letter-spacing: -0.003em;
+    letter-spacing: -.003em;
     margin-left: 30px;
     margin-bottom: 14px;
   }
@@ -142,14 +142,14 @@ export default {
   a {
     text-decoration: none;
     background-repeat: repeat-x;
-    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.84) 100%, rgba(0, 0, 0, 0) 0);
+    background-image: linear-gradient(to right, rgba(0, 0, 0, .84) 100%, rgba(0, 0, 0, 0) 0);
     background-size: 1px 1px;
     background-position: 0 calc(1em + 1px);
     padding: 0 6px;
   }
 
   code {
-    background: rgba(0, 0, 0, 0.05);
+    background: rgba(0, 0, 0, .05);
     padding: 3px 4px;
     margin: 0 2px;
     font-size: 16px;
@@ -168,14 +168,14 @@ 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: 0.01rem;
+    font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
+    letter-spacing: .01rem;
     font-weight: 400;
     font-style: italic;
     font-size: 21px;
     line-height: 1.58;
-    letter-spacing: -0.003em;
-    border-left: 3px solid rgba(0, 0, 0, 0.84);
+    letter-spacing: -.003em;
+    border-left: 3px solid rgba(0, 0, 0, .84);
     padding-left: 20px;
     margin-left: -23px;
     padding-bottom: 2px;
@@ -190,7 +190,7 @@ export default {
   h4 {
     font-size: 34px;
     line-height: 1.15;
-    letter-spacing: -0.015em;
+    letter-spacing: -.015em;
     margin: 53px 0 0;
   }
 
diff --git a/src/views/pdf/index.vue b/src/views/pdf/index.vue
index 3b1bbb6d..86278b38 100644
--- 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">
diff --git a/src/views/permission/components/SwitchRoles.vue b/src/views/permission/components/SwitchRoles.vue
index 84b310a3..9fabbe19 100644
--- 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:
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index 6d1cf438..85478895 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -1,7 +1,7 @@
 <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
@@ -34,13 +34,13 @@
       </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">
@@ -100,11 +100,9 @@ export default {
     border-radius: 4px;
     display: inline-block;
   }
-
   /deep/ .permission-sourceCode {
     margin-left: 15px;
   }
-
   /deep/ .permission-tag {
     background-color: #ecf5ff;
   }
diff --git a/src/views/permission/role.vue b/src/views/permission/role.vue
index c9da1363..cd7ecd4c 100644
--- 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="width: 100%;margin-top:30px;" 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,7 +263,6 @@ export default {
   .roles-table {
     margin-top: 30px;
   }
-
   .permission-tree {
     margin-bottom: 30px;
   }
diff --git a/src/views/profile/components/Activity.vue b/src/views/profile/components/Activity.vue
index 426bb397..dd5db3a5 100644
--- a/src/views/profile/components/Activity.vue
+++ b/src/views/profile/components/Activity.vue
@@ -103,6 +103,7 @@ export default {
 <style lang="scss" scoped>
 .user-activity {
   .user-block {
+
     .username,
     .description {
       display: block;
@@ -110,12 +111,12 @@ export default {
       padding: 2px 0;
     }
 
-    .username {
+    .username{
       font-size: 16px;
       color: #000;
     }
 
-    ::after {
+    :after {
       clear: both;
     }
 
@@ -163,6 +164,7 @@ export default {
     }
 
     .link-black {
+
       &:hover,
       &:focus {
         color: #999;
diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
index 9862bd12..2476f04a 100644
--- 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>
diff --git a/src/views/tab/components/TabPane.vue b/src/views/tab/components/TabPane.vue
index 6c2e88c1..3fb1439e 100644
--- 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"
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index 3c7d8a9b..2a35fa58 100644
--- 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="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-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" />
diff --git a/src/views/table/complex-table.vue b/src/views/table/complex-table.vue
index 314e99de..295c5fc4 100644
--- 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="width: 400px; margin-left:50px;">
         <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>
diff --git a/src/views/table/drag-table.vue b/src/views/table/drag-table.vue
index c6738913..3b5c890a 100644
--- 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,25 +131,23 @@ export default {
 </script>
 
 <style>
-.sortable-ghost {
-  opacity: 0.8;
-  color: #fff !important;
-  background: #42b983 !important;
+.sortable-ghost{
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
 }
 </style>
 
 <style scoped>
-.icon-star {
-  margin-right: 2px;
+.icon-star{
+  margin-right:2px;
 }
-
-.drag-handler {
+.drag-handler{
   width: 20px;
   height: 20px;
   cursor: pointer;
 }
-
-.show-d {
+.show-d{
   margin-top: 15px;
 }
 </style>
diff --git a/src/views/table/dynamic-table/components/FixedThead.vue b/src/views/table/dynamic-table/components/FixedThead.vue
index 4a3602e7..c3deb925 100644
--- 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">
diff --git a/src/views/table/dynamic-table/components/UnfixedThead.vue b/src/views/table/dynamic-table/components/UnfixedThead.vue
index ca5f14b5..831b070a 100644
--- 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">
diff --git a/src/views/table/dynamic-table/index.vue b/src/views/table/dynamic-table/index.vue
index 98605aef..5a4dd363 100644
--- 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 />
diff --git a/src/views/table/inline-edit-table.vue b/src/views/table/inline-edit-table.vue
index a399dcea..31e0065f 100644
--- 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,7 +141,6 @@ export default {
 .edit-input {
   padding-right: 100px;
 }
-
 .cancel-btn {
   position: absolute;
   right: 15px;
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index 25809b3c..0af7711a 100644
--- 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,10 +101,9 @@ export default {
 </script>
 
 <style scoped>
-.field-label {
+.field-label{
   vertical-align: middle;
 }
-
 .box-card {
   width: 400px;
   max-width: 100%;
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
index 6ffee1d0..412608f8 100644
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
-    <el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width: 300px;" 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 file)" style="width:300px;" prefix-icon="el-icon-document" />
+    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="el-icon-document" @click="handleDownload">
       Export Zip
     </el-button>
     <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>