题卡UI修改

card/assets/styles/base.scss

@@ -18,7 +18,8 @@ td,
 span,
 a,
 header,
-footer {
+footer,
+i {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -35,10 +36,19 @@ u {
 input {
   outline: none;
   border: none;
-  box-shadow: 100px 100px 100px #fff inset;
+  background: rgba(245, 245, 245, 1);
   font-family: $--font-family;
 }
-button {
+input::-webkit-input-placeholder,
+input::-moz-placeholder,
+input:-ms-input-placeholder,
+input:-moz-placeholder {
+  font-size: 12px;
+  font-weight: bold;
+  color: $--color-text-gray-4;
+}
+button,
+textarea {
   font-family: $--font-family;
 }
 h1,
@@ -48,7 +58,6 @@ h4,
 h5,
 h6 {
   font-size: 100%;
-  font-weight: bold;
 }
 fieldset,
 img {
@@ -61,7 +70,7 @@ abbr {
 a {
   text-decoration: none;
   color: inherit;
-  *color: $--color-text-secondary;
+  *color: $--color-text-gray-3;
 }
 img {
   vertical-align: middle;
@@ -92,7 +101,7 @@ textarea:focus {
 }
 ::-webkit-scrollbar-thumb {
   border-radius: 8px;
-  background: $--color-text-primary;
+  background: #666;
 }
 ::-webkit-scrollbar-corner {
   background: transparent;
@@ -106,10 +115,189 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: $--font-size-base;
-  color: $--color-text-primary;
-  background: $--color-background;
-  min-width: 1366px;
+  color: $--color-text-dark-1;
+}
+
+/* part */
+.part-box {
+  margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: $--border-radius;
+
+  &-border {
+    border: 1px solid $--color-border;
+  }
+  &-pad {
+    padding: 20px;
+  }
+
+  &-filter {
+    padding: 20px 20px 5px 20px;
+
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+    .el-form-item__label {
+      display: none;
+    }
+  }
+
+  &-flex {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+  }
+
+  &-action {
+    padding-bottom: 15px;
+    white-space: nowrap;
+    display: flex;
+    align-items: flex-end;
+  }
+  &-tips {
+    font-size: 16px;
+    line-height: 25px;
+    color: $--color-text-gray-2;
+    margin-bottom: 15px;
+  }
+
+  &-head {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    min-height: 30px;
+    margin: -10px 0 10px -10px;
+    color: $--color-text-dark;
+
+    > h3 {
+      font-size: 17px;
+    }
+    .el-icon-question {
+      margin-left: 10px;
+      font-size: 16px;
+      color: $--color-text-gray-5;
+      cursor: pointer;
+
+      &:hover {
+        color: #fe8652;
+      }
+    }
+  }
+}
+.part-title {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 15px 20px;
+  line-height: 30px;
+  overflow: hidden;
+
+  h2 {
+    float: left;
+  }
+  &-infos {
+    float: right;
+  }
+}
+.part-body {
+  padding: 25px;
+}
+.part-page {
+  margin-top: 15px;
+  text-align: right;
+}
+.part-none {
+  padding: 100px;
+  font-size: 20px;
+  color: $--color-text-gray-3;
+  text-align: center;
+}
+// box-justify
+.box-justify {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+// page-head
+.page-head {
+  margin-bottom: 20px;
+  color: $--color-text-dark;
+  &-flex {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+  }
+
+  > h2 {
+    font-size: 20px;
+  }
+  .el-icon-question {
+    margin-left: 10px;
+    font-size: 16px;
+    color: $--color-text-gray-5;
+    cursor: pointer;
+
+    &:hover {
+      color: #fe8652;
+    }
+  }
+}
+
+/* table */
+.table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  text-align: left;
+
+  th {
+    padding: 14px;
+    line-height: 1.2;
+    letter-spacing: 1px;
+    color: $--color-text-gray-2;
+    border: 1px solid $--color-border;
+  }
+  td {
+    padding: 14px;
+    line-height: 1.2;
+    color: $--color-text-dark;
+    border: 1px solid $--color-border;
+
+    &.td-link {
+      span {
+        cursor: pointer;
+        &:hover {
+          color: $--color-text-gray;
+        }
+      }
+    }
+  }
+  .td-th {
+    font-weight: 600;
+    color: $--color-text-gray;
+  }
+}
+
+/* list */
+.list-lr-right {
+  float: right;
+  width: 300px;
+}
+.list-lr-left {
+  margin-right: 320px;
+}
+
+.vlcode {
+  height: 36px;
 }
+.vlcode-left {
+  margin-right: 135px;
+}
+.vlcode-right {
+  float: right;
+  width: 120px;
+}
+
 // color
 .color-primary {
   color: $--color-primary !important;
@@ -124,19 +312,50 @@ body {
   color: $--color-danger;
 }
 .color-info {
-  color: $--color-info;
+  color: $--color-text-gray-1;
+}
+.color-dark {
+  color: $--color-dark;
+}
+.color-gray {
+  color: $--color-text-gray;
 }
+.color-white {
+  color: #fff;
+}
+
 // text
 .text-center {
   text-align: center;
 }
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
 
 // other
-.btn--danger {
+.btn-danger {
   &.el-button--text {
     color: $--color-danger !important;
+
+    &:hover {
+      font-weight: 600;
+      color: mix(#000, $--color-danger, 20%) !important;
+    }
   }
 }
+.btn-primary {
+  &.el-button--text {
+    color: $--color-text-dark-1 !important;
+    &:hover {
+      font-weight: 600;
+      color: $--color-primary !important;
+    }
+  }
+}
+
 .btn-white {
   background-color: #fff !important;
   color: #999 !important;
@@ -147,7 +366,7 @@ body {
 .table-head-bg {
   th {
     background-color: #f6f6f6;
-    color: $--color-text-primary;
+    color: $--color-text-gray;
   }
 }
 .btn-act {
@@ -155,9 +374,70 @@ body {
   box-shadow: 5px 5px 4px 0px rgba(28, 208, 161, 0.3);
   border-radius: 10px;
 }
+.cont-link {
+  color: $--color-primary;
+  cursor: pointer;
+  &:hover {
+    color: $--color-success;
+  }
+}
+.ml-1 {
+  margin-left: 5px;
+}
+.ml-2 {
+  margin-left: 10px;
+}
 .mr-1 {
   margin-right: 5px;
 }
 .mr-2 {
   margin-right: 10px;
 }
+.mr-4 {
+  margin-right: 20px;
+}
+.mb-0 {
+  margin-bottom: 0;
+}
+.mb-2 {
+  margin-bottom: 10px;
+}
+.mb-4 {
+  margin-bottom: 20px;
+}
+
+// other
+.tips-info {
+  font-size: 12px;
+  line-height: 25px;
+  color: $--color-text-gray-3;
+}
+.tips-dark {
+  color: $--color-text-gray;
+}
+.tips-error {
+  color: $--color-danger;
+}
+.tips-icon {
+  display: inline-block;
+  vertical-align: middle;
+  color: $--color-text-gray-3;
+  font-size: 18px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+.form-item-content {
+  color: $--color-text-gray-2;
+}
+.inline-block {
+  display: inline-block;
+  vertical-align: top;
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  padding-right: 8px;
+}

card/assets/styles/card-design.scss

@@ -1,63 +1,12 @@
 // card-design
 .card-design {
-  color: #000;
-  .design-top {
-    position: fixed;
-    width: 100%;
-    padding: 10px 0;
-    height: 60px;
-    top: 0;
-    left: 0;
-    z-index: 99;
-    color: #fff;
-    line-height: 40px;
-    background: $--color-blue;
-    &-logo {
-      width: 240px;
-      float: left;
-      color: #fff;
-      height: 60px;
-      margin-top: -10px;
-      padding: 10px 20px;
-      font-size: 20px;
-      text-align: left;
-      transition: width 0.2s ease;
-
-      .icon {
-        margin-right: 12px;
-        margin-top: -2px;
-        cursor: pointer;
-      }
-    }
-    &-info {
-      padding-right: 20px;
-      float: right;
-      height: 40px;
-      line-height: 40px;
-      position: relative;
-      color: $--color-text-regular;
-      cursor: pointer;
-
-      .info-help {
-        display: inline-block;
-        vertical-align: top;
-        color: #fff;
-        font-size: 20px;
-        .icon {
-          margin-right: 12px;
-          margin-top: -2px;
-        }
-      }
-    }
-  }
+  color: $--color-text-dark;
+  background: $--color-background;
 
-  .design-main {
-    padding-top: 60px;
-  }
   // page-box
   .page-box {
     // box-shadow: $--shadow-light;
-    box-shadow: 0 0 1px #333;
+    // box-shadow: 0 0 1px #333;
     &::before {
       content: "";
       position: absolute;
@@ -126,7 +75,7 @@
       &:hover {
         > .resize-control {
           > .control-line {
-            border-color: #4794b3;
+            border-color: #617bea;
           }
         }
       }
@@ -134,7 +83,7 @@
       &.element-resize-act {
         > .resize-control {
           > .control-line {
-            border-color: #4794b3;
+            border-color: #617bea;
             &-left,
             &-right {
               border-left-style: solid;
@@ -203,26 +152,26 @@
         color: #fff;
         padding: 6px 10px;
         line-height: 1;
-        font-size: 20px;
+        font-size: 18px;
         border-bottom-left-radius: 10px;
       }
     }
     .elem-fill-question-simple {
       &::before {
         content: "单选";
-        background-color: $--color-success;
+        background-color: mix(#fff, $--color-success, 20%);
       }
     }
     .elem-fill-question-multiply {
       &::before {
         content: "多选";
-        background-color: $--color-blue-white;
+        background-color: $--color-primary-light;
       }
     }
     .elem-fill-question-boolean {
       &::before {
         content: "判断";
-        background-color: $--color-warning;
+        background-color: mix(#fff, $--color-warning, 20%);
       }
     }
   }
@@ -288,95 +237,23 @@
     }
   }
 }
-.design-head {
+
+.design-header {
   position: fixed;
-  top: 60px;
-  left: 270px;
-  right: 0;
-  height: 150px;
+  width: 100%;
+  height: 50px;
+  top: 0;
+  left: 0;
   z-index: 99;
-  padding: 20px 40px;
-  background: $--color-background;
+  padding-left: 260px;
+  background-color: $--color-text-dark;
+  overflow: hidden;
+  padding: 10px 20px 10px 260px;
 
-  &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 36px;
-    left: 0;
-    bottom: 0;
-    z-index: 2;
-    background: linear-gradient(
-      180deg,
-      rgba(245, 245, 245, 0) 0%,
-      rgba(238, 238, 238, 1) 100%
-    );
-  }
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 1px;
-    left: 0;
-    bottom: 0;
-    z-index: 3;
-    background: rgba(229, 229, 229, 1);
-  }
-  .design-control {
-    overflow: hidden;
+  .design-steps {
     position: relative;
-    z-index: 9;
-  }
-
-  .control-right {
-    float: right;
-    width: 400px;
-    line-height: 40px;
-    text-align: right;
-
-    .el-button {
-      width: 100px;
-      border-radius: 10px;
-    }
-  }
-  .control-left {
-    margin-right: 410px;
-    white-space: nowrap;
-    overflow-y: hidden;
-    overflow-x: auto;
-
-    .el-button {
-      width: 80px;
-      color: #bbb;
-      font-weight: bold;
-      background: rgba(245, 245, 245, 1);
-      border-radius: 10px;
-    }
-  }
-}
-.design-steps {
-  margin: 10px 0 30px;
-  text-align: center;
-  position: relative;
-  height: 28px;
-
-  &::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: 14px;
-    border-bottom: 1px dashed #999;
-    z-index: 2;
-  }
-
-  .step-item {
-    position: absolute;
-    top: 0;
-    z-index: 8;
-    padding: 0 10px;
+    text-align: center;
+    height: 30px;
 
     &::after {
       content: "";
@@ -384,87 +261,104 @@
       width: 100%;
       left: 0;
       top: 14px;
-      border-bottom: 1px solid #f5f5f5;
-      z-index: 5;
+      border-bottom: 1px solid $--color-text-gray-2;
+      z-index: 2;
     }
 
-    > i {
-      position: relative;
-      display: inline-block;
-      vertical-align: middle;
-      height: 28px;
-      width: 28px;
-      border-radius: 50%;
-      border: 2px solid $--color-primary;
-      color: $--color-primary;
-      line-height: 28px;
-      font-weight: bold;
-      z-index: 8;
-    }
-    > span {
-      position: relative;
-      display: inline-block;
-      vertical-align: middle;
-      margin-left: 14px;
-      font-weight: bold;
-      color: #999;
+    .step-item {
+      position: absolute;
+      top: 0;
       z-index: 8;
-    }
+      padding: 0 10px;
+      color: $--color-text-gray-2;
 
-    &:first-child {
-      left: 0;
-      padding-left: 0;
-    }
-    &:last-child {
-      right: 0;
-      padding-right: 0;
-    }
-    &:nth-of-type(2) {
-      left: 33.3%;
-      transform: translateX(-50%);
-    }
-    &:nth-of-type(3) {
-      left: 66.7%;
-      transform: translateX(-50%);
+      &::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        left: 0;
+        top: 14px;
+        border-bottom: 1px solid $--color-text-dark;
+        z-index: 5;
+      }
+
+      > i {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+        height: 30px;
+        width: 30px;
+        border-radius: 50%;
+        border: 2px solid $--color-text-gray-2;
+        line-height: 26px;
+        font-weight: bold;
+        z-index: 8;
+      }
+      > span {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 10px;
+        font-weight: bold;
+        color: #999;
+        z-index: 8;
+      }
+
+      &:first-child {
+        left: 0;
+        padding-left: 0;
+      }
+      &:last-child {
+        right: 0;
+        padding-right: 0;
+      }
+      &:nth-of-type(2) {
+        left: 33.3%;
+        transform: translateX(-50%);
+      }
+      &:nth-of-type(3) {
+        left: 66.7%;
+        transform: translateX(-50%);
+      }
     }
   }
 }
 
 .design-action {
   position: fixed;
-  padding: 28px;
-  top: 60px;
+  width: 240px;
+  top: 0;
   left: 0;
   bottom: 0;
-  width: 270px;
-  z-index: 99;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background: linear-gradient(
-    90deg,
-    rgba(247, 244, 248, 1) 0%,
-    rgba(238, 238, 238, 1) 100%
-  );
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    height: 100%;
-    width: 1px;
-    right: 0;
-    bottom: 0;
-    z-index: 9;
-    background: rgba(229, 229, 229, 1);
+  z-index: 100;
+  overflow: auto;
+  font-size: 14px;
+  padding: 20px;
+  background: $--color-white;
+  border-top-right-radius: $--border-radius-huge;
+  border-bottom-right-radius: $--border-radius-huge;
+
+  .design-logo {
+    font-size: 20px;
+    line-height: 40px;
+    margin-bottom: 30px;
+
+    i {
+      cursor: pointer;
+      font-weight: 600;
+      &:hover {
+        color: $--color-primary;
+      }
+    }
   }
 
   .action-part {
     margin-bottom: 5px;
-    color: #999;
+    color: $--color-text-dark-1;
 
     &-title {
       padding-bottom: 10px;
-      border-bottom: 1px solid #e5e5e5;
+      border-bottom: 1px solid $--color-border;
     }
     &-body {
       padding: 20px 0;
@@ -492,31 +386,63 @@
       padding-right: 5px;
     }
     .el-button {
-      height: 40px;
-      width: 100px;
-      font-weight: bold;
-      border-radius: 10px;
-      background: rgba(245, 245, 245, 1);
-      color: #999;
-
-      &:hover {
-        color: #fff;
-        background: rgba(28, 208, 161, 1);
-        box-shadow: 5px 5px 4px 0px rgba(28, 208, 161, 0.3);
-      }
+      width: 100%;
+      font-size: 14px;
     }
 
     i {
       margin-right: 2px;
-      font-size: 12px;
     }
   }
 }
+
+.design-main {
+  padding: 70px 20px 50px 260px;
+  min-height: 100%;
+}
+
+.design-control {
+  position: fixed;
+  top: 50px;
+  left: 240px;
+  right: 0;
+  height: 70px;
+  z-index: 99;
+  padding: 20px;
+  background-color: $--color-background;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .control-right {
+    width: 400px;
+    text-align: right;
+    flex-grow: 0;
+    .el-button {
+      width: 100px;
+      border-radius: 10px;
+    }
+  }
+  .control-left {
+    white-space: nowrap;
+    overflow-y: hidden;
+    overflow-x: auto;
+    flex-grow: 2;
+
+    .el-button {
+      width: 80px;
+      color: #bbb;
+      font-weight: bold;
+      background: rgba(245, 245, 245, 1);
+      border-radius: 10px;
+    }
+  }
+}
+
 .design-body {
   position: relative;
-  min-height: 1332px;
-  background: #fff;
-  padding: 180px 30px 30px 300px;
+  min-height: 1242px;
+  padding-top: 50px;
 }
 
 // topic-list
@@ -537,7 +463,7 @@
 
 // tool-tips
 .tool-tips {
-  color: #999;
+  color: $--color-text-dark-1;
 }
 // page-prop-edit
 .page-prop-edit {
@@ -546,13 +472,11 @@
   }
   .el-form-item__label,
   .el-checkbox {
-    color: #999;
+    color: $--color-text-dark-1;
   }
   .column-btn {
     width: 32px;
-    height: 32px;
-    padding: 2px 0;
-    border-radius: 10px;
+    padding: 8px 0;
     .icon {
       margin-top: -2px;
     }
@@ -561,24 +485,30 @@
       border-color: $--color-primary;
     }
 
+    &-act {
+      border-color: $--color-primary;
+      background-color: $--color-primary;
+      color: #fff;
+    }
+
     &:not(:first-child) {
       margin-left: 10px;
     }
   }
   .topicno-list {
     font-size: 0;
-    line-height: 40px;
+    line-height: 32px;
     li {
       display: inline-block;
       vertical-align: middle;
       margin: 0 5px 0 0;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
       text-align: center;
-      font-size: 14px;
+      font-size: 12px;
       border-radius: 5px;
-      background-color: $--color-primary;
+      background-color: $--color-primary-light;
       color: #fff;
     }
   }
@@ -731,7 +661,7 @@
     > span {
       font-size: 14px;
       margin-left: 24px;
-      color: $--color-text-regular;
+      color: $--color-text-gray-1;
     }
   }
   .params-main {
@@ -780,67 +710,3 @@
     }
   }
 }
-
-@media screen and (max-width: 1600px) {
-  .card-design {
-    .design-top {
-      height: 50px;
-      &-logo {
-        width: 200px;
-        height: 50px;
-        margin-top: -10px;
-        padding: 10px 15px;
-        font-size: 15px;
-        line-height: 30px;
-
-        .icon {
-          width: 24px;
-          height: 24px;
-          margin-right: 8px;
-        }
-      }
-      &-info {
-        padding-right: 15px;
-        height: 30px;
-        line-height: 30px;
-
-        .info-help {
-          font-size: 15px;
-          .icon {
-            width: 24px;
-            height: 24px;
-            margin-right: 8px;
-          }
-        }
-      }
-    }
-    .design-main {
-      padding-top: 50px;
-    }
-    .design-action {
-      padding: 20px 15px;
-      top: 50px;
-      width: 230px;
-      .type-item .el-button {
-        padding: 10px 0;
-        width: 90px;
-      }
-    }
-    .design-head {
-      top: 50px;
-      left: 230px;
-      padding: 10px 20px;
-      height: 110px;
-      .control-right .el-button {
-        width: 90px;
-      }
-    }
-    .design-steps {
-      margin: 10px 0;
-    }
-    .design-body {
-      padding: 140px 30px 30px 250px;
-      min-height: 1132px;
-    }
-  }
-}

card/assets/styles/element-ui-costom.scss

@@ -1,91 +1,89 @@
 // dialog
 .el-dialog {
-  border-radius: 10px;
+  border-radius: 8px;
   overflow: hidden;
   border: 1px solid #c8c8ca;
-  background-color: #f6f6f6;
-
   box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.1);
+
+  &.is-fullscreen {
+    border-radius: 0;
+  }
 }
 .el-dialog__header {
   padding: 15px 20px;
-  background-color: #f6f6f6;
   .el-dialog__title {
-    color: #666666;
-    font-weight: bold;
+    color: $--color-text-dark-1;
     font-size: 16px;
     line-height: 19px;
   }
+  .el-dialog__headerbtn {
+    top: 15px;
+    width: 16px;
+    height: 16px;
+    background-image: url(../images/icon-close.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    &:hover {
+      background-image: url(../images/icon-close-act.png);
+    }
+
+    .el-dialog__close {
+      display: none;
+    }
+  }
 }
 .el-dialog__body {
-  padding: 30px 20px 20px;
-  background-color: #f6f6f6;
+  padding: 30px 40px;
   position: relative;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid $--color-border;
 
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: auto;
-    width: 100%;
-    height: 10px;
-    background: linear-gradient(
-      0deg,
-      rgba(245, 245, 245, 0) 0%,
-      rgba(238, 238, 238, 1) 100%
-    );
-  }
   .el-form-item__label {
-    font-weight: bold;
-    color: rgba(153, 153, 153, 1);
+    color: #545454;
     padding-right: 2px;
   }
   .el-input-tips {
-    font-weight: bold;
     color: rgba(187, 187, 187, 1);
     margin-left: 13px;
   }
 }
 .el-dialog__footer {
-  background-color: #f6f6f6;
-  text-align: center;
+  text-align: right;
   .el-button {
     width: 100px;
-    border-radius: 10px;
-  }
-  .el-button--default {
-    background: rgba(245, 245, 245, 1);
-    color: #999;
+    border-radius: 8px;
   }
+  // .el-button--default {
+  //   background: rgba(245, 245, 245, 1);
+  //   color: #999;
+  // }
 }
-.el-popup-close {
-  height: 20px;
-  width: 20px;
-  background-image: url(../images/icon-close.png);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  &::before {
-    content: "";
+
+// .opacity-dialog
+.opacity-dialog {
+  .el-dialog {
+    background-color: transparent;
   }
-  &:hover {
-    background-image: url(../images/icon-close-act.png);
+  .el-dialog__header,
+  .el-dialog__footer {
+    display: none;
   }
-}
-.el-dialog__headerbtn {
-  top: 14px;
-  right: 14px;
-  .el-dialog__close {
-    @extend .el-popup-close;
+  .el-dialog__body {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    padding: 0;
+    background-color: transparent;
   }
 }
+
 // form
 .el-form {
   &-item {
     &__error {
       font-size: 12px;
-      font-weight: bold;
       color: rgba(254, 108, 105, 1);
     }
     &__content {
@@ -94,9 +92,21 @@
       }
     }
   }
-  &--inline {
+  // form-info
+  &.form-info {
     .el-form-item {
-      margin-right: 20px;
+      margin-bottom: 0;
+
+      .el-form-item__label {
+        color: $--color-text-gray-2;
+      }
+    }
+  }
+  &--label-top {
+    .el-form-item__label {
+      line-height: 20px;
+      padding-bottom: 5px;
+      font-size: 12px;
     }
   }
 }
@@ -107,10 +117,27 @@
       border-color: $--color-primary !important;
     }
   }
+  &.is-disabled {
+    .el-input__inner {
+      color: $--color-text-gray-2;
+    }
+  }
   .el-input__inner {
-    border-radius: 7px;
+    border-radius: 8px;
     border-color: #ddd;
-    background-color: #f5f5f5;
+    background-color: #fff;
+  }
+  // .el-input__suffix {
+  //   right: 0;
+  //   border-left: 1px solid #ddd;
+  // }
+}
+// textarea
+.el-textarea {
+  &.is-disabled {
+    .el-textarea__inner {
+      color: $--color-text-gray-2;
+    }
   }
 }
 // upload
@@ -130,11 +157,6 @@
   color: $--color-white;
   border-color: $--color-primary;
   background: $--color-primary;
-  background-image: linear-gradient(
-    -90deg,
-    $--color-success 0%,
-    $--color-primary 100%
-  );
 }
 // button
 .el-button {
@@ -145,80 +167,13 @@
   }
   > span {
     display: inline-block;
-    vertical-align: middle;
   }
   &.is-disabled {
-    color: $--color-text-secondary !important;
+    color: $--color-text-gray-3 !important;
     background: $--color-background !important;
     border: 1px solid $--color-border !important;
   }
 }
-.el-button--default {
-  color: $--color-text-regular;
-  background: $--color-background;
-  border: 1px solid $--color-border;
-  &:hover,
-  &:focus {
-    color: $--color-text-regular;
-    background: $--color-white;
-    border: 1px solid $--color-border;
-  }
-  &.el-button--default-act {
-    color: $--color-text-regular !important;
-    background: $--color-background !important;
-    border: 1px solid $--color-border !important;
-    &:hover,
-    &:focus {
-      color: $--color-text-regular !important;
-      background: $--color-white !important;
-      border: 1px solid $--color-border !important;
-    }
-  }
-}
-.el-button--primary {
-  color: $--color-white;
-  border-color: $--color-primary;
-  background: $--color-primary;
-  background-image: linear-gradient(
-    -90deg,
-    $--color-success 0%,
-    $--color-primary 100%
-  );
-
-  &:hover,
-  &:focus {
-    color: $--color-white;
-    border-color: $--color-primary;
-    background: $--color-primary;
-    background-image: linear-gradient(
-      -90deg,
-      mix($--color-white, $--color-success, 20%) 0%,
-      mix($--color-white, $--color-primary, 20%) 100%
-    );
-  }
-}
-.el-button--warning {
-  color: $--color-white;
-  border-color: $--color-warning-lighter;
-  background: $--color-warning-lighter;
-  background-image: linear-gradient(
-    -90deg,
-    $--color-warning-lighter 0%,
-    $--color-warning 100%
-  );
-
-  &:hover,
-  &:focus {
-    color: $--color-white;
-    border-color: $--color-warning-lighter;
-    background: $--color-warning-lighter;
-    background-image: linear-gradient(
-      -90deg,
-      mix($--color-white, $--color-warning-lighter, 20%) 0%,
-      mix($--color-white, $--color-warning, 20%) 100%
-    );
-  }
-}
 
 .el-button + .popover-button,
 .popover-button + .el-button {
@@ -230,58 +185,69 @@
 .el-button--text + .el-button--text {
   margin-left: 5px;
 }
+.el-button--small {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 12px;
+}
 .el-button--text {
-  color: $--color-text-regular;
+  color: $--color-text-gray-2;
 
-  &.btn-table-icon {
-    padding: 0;
-    min-width: 10px;
-    > i {
-      width: 20px;
-      height: 20px;
-    }
+  & + .el-button--text {
+    margin-left: 10px;
+  }
+}
+.el-button--info {
+  background-color: $--color-cyan;
+  border-color: $--color-cyan;
 
-    &:hover {
-      transform: scale(1.2);
-    }
+  &:hover,
+  &:focus {
+    background-color: $--color-cyan-light;
+    border-color: $--color-cyan-light;
   }
-  &.btn-table-primary {
-    > i {
-      color: $--color-primary;
-    }
+}
+.el-button--primary {
+  background-color: $--color-primary;
+  border-color: $--color-primary;
+
+  &:hover,
+  &:focus {
+    background-color: $--color-primary-light;
+    border-color: $--color-primary-light;
   }
-  &.btn-table-danger {
-    > i {
-      color: $--color-danger;
-    }
+}
+.el-button--success {
+  background-color: $--color-success;
+  border-color: $--color-success;
+
+  &:hover,
+  &:focus {
+    background-color: $--color-success-light;
+    border-color: $--color-success-light;
   }
 }
+
 // table
 .el-table {
-  color: $--color-text-regular;
-  font-weight: bold;
+  color: $--color-text-dark-1;
 
-  &--border {
-    border-radius: $--border-radius;
-    border: 1px solid $--color-border;
+  thead th {
+    color: $--color-text-gray-2;
   }
 
-  &__header thead {
-    font-size: 16px;
-    color: $--color-text-primary;
-    font-weight: bold;
+  thead.is-group th {
+    background-color: $--color-white;
   }
+
   tr.el-table__row {
-    background-color: $--color-background;
-    &.el-table__row--striped {
-      td {
-        background-color: $--color-white;
-      }
-    }
+    color: $--color-text-dark;
   }
   td,
   th {
-    border-color: $--color-border-light !important;
+    border-color: $--color-border !important;
+    padding: 14px 0;
+    font-weight: 500;
   }
   .el-table__row.row-danger {
     color: $--color-danger;
@@ -291,107 +257,87 @@
       background-color: $--color-white;
     }
   }
-}
-// el-checkbox
-.el-checkbox {
-  .el-checkbox__input {
-    .el-checkbox__inner {
-      width: 18px;
-      height: 18px;
-      border-color: $--color-border;
-      &::after {
-        display: none;
+
+  .cell-head {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 1.3;
+  }
+  // caret-wrapper
+  .caret-wrapper {
+    width: 20px;
+    height: 20px;
+    top: -1px;
+    .sort-caret {
+      &.ascending {
+        top: -1px;
       }
-    }
-    &.is-checked {
-      .el-checkbox__inner {
-        border: none;
-        background-color: transparent;
-        background-image: url(../images/icon-checked.png);
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
+      &.descending {
+        bottom: -1px;
       }
     }
-    &.is-focus {
-      .el-checkbox__inner {
-        border-color: $--color-border;
+  }
+  // action-column
+  .action-column {
+    .el-button--text {
+      padding: 0;
+      &:hover {
+        transform: scale(1.1);
       }
     }
   }
+}
+// el-checkbox
+.el-checkbox {
   .el-checkbox__label {
-    color: $--color-text-regular !important;
-    font-weight: bold;
+    color: $--color-text-gray-2 !important;
   }
 }
 .el-radio {
-  .el-radio__input {
-    .el-radio__inner {
-      width: 18px;
-      height: 18px;
-      border-color: $--color-border;
-
-      &::after {
-        display: none;
-      }
-    }
-    &.is-checked {
-      .el-radio__inner {
-        border: none;
-        background-color: transparent;
-        background-image: url(../images/icon-radio-checked.png);
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-    &.is-focus {
-      .el-radio__inner {
-        border-color: $--color-border;
-      }
-    }
-  }
   .el-radio__label {
-    color: $--color-text-regular !important;
-    font-weight: bold;
-  }
-  &.is-disabled {
-    .el-radio__label {
-      color: $--color-text-secondary !important;
-    }
+    color: $--color-text-gray-2 !important;
   }
 }
 
 // el-pagination
 .el-pagination-li {
-  width: 32px;
+  min-width: 32px;
   height: 32px;
-  border-radius: 50%;
+  border-radius: 8px;
   overflow: hidden;
   background-color: $--color-white;
-  border: 1px solid $--color-border;
+  border: 1px solid #e1e3eb;
 }
 .el-pagination {
+  padding: 0;
+  .el-pagination__total {
+    float: left;
+  }
+  span:not([class*="suffix"]) {
+    line-height: 32px;
+    height: 32px;
+  }
   &.is-background {
     .btn-prev,
     .btn-next {
-      color: $--color-text-regular;
-      margin: 0 13px;
+      color: $--color-text-gray-2;
+      margin: 0 5px;
       @extend .el-pagination-li;
     }
     .btn-prev:disabled,
     .btn-next:disabled {
-      background-color: $--color-background;
+      opacity: 0.7;
     }
 
     .el-pager li {
-      color: $--color-text-regular;
-      font-weight: bold;
+      color: $--color-text-gray-2;
       margin: 0 5px;
+      padding: 0 8px;
       line-height: 32px;
 
       @extend .el-pagination-li;
       &:not(.disabled).active {
         color: #fff;
-        @extend .el-button--primary;
       }
     }
   }
@@ -408,9 +354,6 @@
     top: 10px;
     right: 10px;
   }
-  &__close.el-icon-close {
-    @extend .el-popup-close;
-  }
   &__content {
     text-align: center;
 
@@ -444,13 +387,13 @@
   &__btns {
     position: relative;
     height: 75px;
-    padding: 20px;
+    padding: 30px 20px 10px;
 
     > .el-button {
       width: 85px;
       position: absolute;
       left: 50%;
-      top: 20px;
+      top: 30px;
 
       &:first-child {
         margin-left: 5px;
@@ -461,6 +404,7 @@
     }
   }
 }
+
 .alert-message {
   .el-message-box__btns {
     text-align: center;
@@ -472,17 +416,76 @@
     }
   }
 }
-
+// .el-message
+.el-message-loading {
+  border-color: mix($--color-white, $--color-success, 80%);
+  background-color: mix($--color-white, $--color-success, 90%);
+}
 // el-date-editor
 .el-date-editor {
   .el-range-separator {
     width: auto;
-    line-height: 28px;
+    line-height: 24px;
   }
   .el-range-input {
     background-color: transparent;
   }
   .el-input__icon {
-    line-height: 28px;
+    line-height: 24px;
+  }
+}
+
+// el-step
+.el-step {
+  &__title.is-success,
+  &__description.is-success {
+    color: $--color-primary;
+  }
+  &__head.is-success {
+    color: $--color-primary;
+    border-color: $--color-primary;
+    .el-step__line {
+      background-color: $--color-primary;
+    }
+  }
+}
+// el-popover
+.el-popper-dark {
+  background-color: $--color-text-dark-1;
+  color: #fff;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 16px;
+  border: none;
+}
+.el-popper-dark {
+  box-shadow: 0px 10px 10px 0px rgba(54, 61, 89, 0.2);
+}
+.el-popper-dark[x-placement^="right"] .popper__arrow {
+  border-right-color: $--color-text-dark-1;
+
+  &::after {
+    border-right-color: $--color-text-dark-1;
+  }
+}
+.el-popper-dark[x-placement^="top"] .popper__arrow {
+  border-top-color: $--color-text-dark-1;
+
+  &::after {
+    border-top-color: $--color-text-dark-1;
+  }
+}
+.el-popper-dark[x-placement^="bottom"] .popper__arrow {
+  border-bottom-color: $--color-text-dark-1;
+
+  &::after {
+    border-bottom-color: $--color-text-dark-1;
+  }
+}
+.el-popper-dark[x-placement^="left"] .popper__arrow {
+  border-left-color: $--color-text-dark-1;
+
+  &::after {
+    border-left-color: $--color-text-dark-1;
   }
 }

card/assets/styles/home.scss

@@ -1,223 +1,311 @@
 /* home */
+.home {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: auto;
+}
 .home-body {
-  padding-top: 60px;
+  position: absolute;
+  left: 0;
+  top: 50px;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  background: $--color-background;
+  z-index: 98;
+}
+.home-main {
+  position: relative;
+  padding: 20px 30px 50px 250px;
+  min-height: 100%;
 }
 
-/* home-header */
-.home-header {
-  position: fixed;
-  width: 100%;
-  padding: 10px 0;
-  height: 60px;
+/* navs */
+.home-navs {
+  position: absolute;
+  width: 220px;
   top: 0;
   left: 0;
-  z-index: 99;
-  color: #fff;
-  line-height: 40px;
-  background: #4f63db;
-}
-.head-logo {
-  width: 240px;
-  float: left;
-  color: #fff;
-  height: 60px;
-  margin-top: -10px;
-  padding: 10px 20px;
-  font-size: 20px;
-  text-align: left;
-  transition: width 0.2s ease;
-
-  .icon {
-    margin-right: 12px;
-    margin-top: -2px;
-    cursor: pointer;
-  }
-  img {
+  bottom: 0;
+  z-index: 100;
+  overflow: auto;
+  font-size: 14px;
+  padding: 30px 40px;
+  background: $--color-white;
+  border-top-right-radius: $--border-radius-huge;
+  border-bottom-right-radius: $--border-radius-huge;
+
+  &::before {
+    content: "";
     display: block;
-    margin: 0 auto;
-    width: 160px;
-    height: 40px;
+    position: absolute;
+    height: 100%;
+    width: 1px;
+    right: 0;
+    bottom: 0;
+    z-index: 9;
+    background: rgba(229, 229, 229, 1);
   }
-  &-tiny {
-    width: 60px;
-    padding: 10px;
-    font-size: 18px;
-    overflow: hidden;
+
+  .head-logo {
+    font-size: 20px;
+    line-height: 40px;
+    border-radius: $--border-radius;
+    // background-color: $--color-background;
+    text-align: center;
+    margin-bottom: 30px;
+
     img {
-      width: 40px;
+      display: block;
+      max-width: 160px;
       height: 40px;
     }
   }
-}
-.head-switch {
-  float: left;
-  padding: 5px 25px 5px 15px;
-  height: 40px;
-  line-height: 30px;
-  cursor: pointer;
-  &:hover {
-    color: $--color-primary;
-  }
-  i {
-    vertical-align: middle;
-    font-size: 20px;
-  }
-}
-.rotate-icon {
-  transform: rotate(-90deg);
-}
-.head-info {
-  float: left;
-  padding: 13px 0;
-  height: 40px;
-}
-.head-user {
-  padding-right: 20px;
-  float: right;
-  height: 40px;
-  line-height: 40px;
-  position: relative;
-  color: $--color-text-regular;
-  cursor: pointer;
-}
-.user-avatar {
-  display: inline-block;
-  vertical-align: top;
-}
-.user-help {
-  display: inline-block;
-  vertical-align: top;
-  color: #fff;
-  font-size: 20px;
-  .icon {
-    margin-right: 12px;
-    margin-top: -2px;
+
+  .nav-part {
+    padding: 20px 0;
+    border-top: 1px solid $--color-border;
   }
-}
-.user-name {
-  display: inline-block;
-  vertical-align: top;
-  margin-left: 10px;
-  min-width: 60px;
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 600;
-}
-.user-logout {
-  display: inline-block;
-  vertical-align: top;
-  margin-left: 10px;
-  font-size: 20px;
-  cursor: pointer;
-  i {
-    vertical-align: middle;
-    margin-top: -3px;
+
+  .nav-head {
+    padding: 10px 0;
+    color: $--color-text-gray-2;
+    font-size: $--font-size-base;
+    line-height: 20px;
+    position: relative;
+    font-weight: 500;
+    > span {
+      display: inline-block;
+      vertical-align: top;
+      font-weight: 600;
+    }
+    &-right-icon {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #d3d5e0;
+      font-size: 12px;
+    }
   }
-  &:hover {
-    color: $--color-danger;
+
+  // .nav-list {
+  //   padding: 0 0 0 23px;
+  // }
+  .nav-item {
+    overflow: hidden;
+    color: $--color-text-dark-1;
+    &-main {
+      padding: 10px 0;
+      line-height: 20px;
+      position: relative;
+      font-weight: 500;
+      cursor: pointer;
+      &-act,
+      &:hover {
+        font-weight: 600;
+        color: $--color-primary;
+      }
+    }
+    &-icon {
+      display: block;
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      top: 50%;
+      margin-top: -10px;
+      text-align: center;
+      line-height: 20px;
+    }
+    &-icon-right {
+      right: 5px;
+    }
+    &-info {
+      display: block;
+      position: absolute;
+      padding: 0 3px;
+      min-width: 16px;
+      height: 16px;
+      font-size: 12px;
+      line-height: 16px;
+      top: 12px;
+      right: 0;
+      background-color: $--color-warning;
+      color: #fff;
+      text-align: center;
+      border-radius: 3px;
+    }
   }
 }
 
-/* home-footer */
-.home-footer {
-  position: relative;
+/* head */
+.home-header {
+  position: absolute;
   width: 100%;
-  height: 60px;
-  bottom: 0;
+  height: 50px;
+  top: 0;
   left: 0;
-  z-index: auto;
-  padding: 20px 0;
-  line-height: 20px;
-  color: $--color-text-secondary;
-  text-align: center;
-  font-size: 13px;
-  a {
-    color: $--color-text-secondary;
-    &:hover {
-      color: $--color-text-primary;
-    }
-  }
-}
+  z-index: 99;
+  color: #fff;
+  padding-left: 220px;
+  background-color: $--color-text-dark;
+  overflow: hidden;
 
-/* part */
-.part-box {
-  box-shadow: 0 0 2px 1px #e9e9e9;
-  padding: 20px 30px;
-  margin-bottom: 15px;
-  background-color: #fff;
+  .menu-list {
+    li {
+      display: inline-block;
+      vertical-align: top;
+      padding: 10px 25px;
+      height: 50px;
+      line-height: 30px;
+      opacity: 0.4;
+      font-size: 16px;
+      position: relative;
+      text-align: center;
+      cursor: pointer;
 
-  .ivu-form-item-label {
-    text-align: right;
-  }
-  .part-title {
-    font-size: 16px;
-    margin-bottom: 15px;
-    height: 32px;
-    line-height: 32px;
+      &:hover {
+        opacity: 1;
+      }
+
+      &.menu-item-act {
+        opacity: 1;
+      }
+
+      span {
+        display: inline-block;
+        vertical-align: top;
+        margin-left: 8px;
+      }
+      .icon {
+        margin-top: -3px;
+      }
+    }
   }
-  .part-title h2 {
+  .head-menu {
     float: left;
-    font-weight: 600;
   }
-  .part-title-infos {
+  .head-user {
     float: right;
-    > .ivu-btn:not(:first-child) {
-      margin-left: 5px;
+    padding-right: 10px;
+    li {
+      padding: 10px;
+    }
+    .menu-item-account {
+      white-space: nowrap;
+      padding: 10px;
+      span {
+        max-width: 156px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
-  .part-page {
-    margin-top: 15px;
-    text-align: right;
-  }
-  .part-filter {
-    border-bottom: 1px dashed #e0e0e0;
-    margin-bottom: 20px;
-  }
-  .part-none {
-    padding: 100px;
-    font-size: 20px;
-    color: $--color-text-secondary;
+  // .head-menu-btn
+  .head-menu-btn {
+    display: none;
+    float: right;
+    line-height: 36px;
+    padding: 12px 15px;
     text-align: center;
+    > span {
+      display: block;
+      height: 36px;
+      width: 36px;
+      border-radius: 5px;
+      background-color: rgba($color: #fff, $alpha: 0.3);
+    }
+    i {
+      font-size: 22px;
+      vertical-align: middle;
+    }
   }
 }
+// menu-dialog
+.menu-dialog {
+  .el-dialog.is-fullscreen {
+    border-radius: 0;
+    box-shadow: none;
 
-/* table */
-.table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-  text-align: center;
-  margin-bottom: 30px;
-  th {
-    padding: 10px;
-    line-height: 20px;
-    letter-spacing: 1px;
-    border: 1px solid $--border-color-light;
+    .el-dialog__body {
+      padding: 10px;
+      &::after {
+        display: none;
+      }
+    }
   }
-  td {
+
+  .menu-logout {
     padding: 10px;
-    line-height: 20px;
-    border: 1px solid $--border-color-light;
+    width: 52px;
+    height: 52px;
+    margin: 0 auto;
+    border: 1px solid $--color-text-gray-3;
+    border-radius: 50%;
+    font-size: 30px;
+    text-align: center;
+    color: $--color-text-gray-3;
+    cursor: pointer;
+
+    &:hover {
+      border-color: $--color-danger;
+      color: $--color-danger;
+    }
   }
-  .td-th {
-    font-weight: 600;
-    color: $--color-text-primary;
+}
+
+// home-breadcrumb
+.home-breadcrumb {
+  margin-bottom: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  color: $--color-text-gray-2;
+
+  .breadcrumb-tips {
+    display: inline-block;
+    vertical-align: middle;
+    > i {
+      margin-top: -2px;
+      margin-right: 8px;
+    }
   }
+  .el-breadcrumb {
+    line-height: 16px;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 12px;
 
-  &.table-white {
-    background-color: #fff;
+    .el-breadcrumb__item {
+      .el-breadcrumb__inner {
+        color: $--color-text-gray-2;
+      }
+    }
+    .el-breadcrumb__separator {
+      margin: 0 5px;
+    }
   }
 }
 
-// other
-.tips-info {
-  font-size: 14px;
-  height: 25px;
-  line-height: 25px;
-  color: $--color-text-secondary;
-}
-.tips-error {
-  color: $--color-danger;
+// home-view
+
+/* view-footer */
+.home-footer {
+  position: absolute;
+  width: 100%;
+  height: 60px;
+  bottom: 0;
+  left: 0;
+  z-index: auto;
+  padding: 20px 0;
+  line-height: 20px;
+  color: $--color-text-gray-3;
+  text-align: center;
+  font-size: 13px;
+  a {
+    color: $--color-text-gray-3;
+  }
+  a:hover {
+    color: $--color-text-gray;
+  }
 }

card/assets/styles/variables.scss

@@ -1,37 +1,41 @@
 // color ------------------->
-$--color-text-primary: #545454 !default;
-$--color-text-regular: #878787 !default;
-$--color-text-secondary: #bbbbbb !default;
-$--color-text-placeholder: #cccccc !default;
-$--border-color-base: #dcdfe6 !default;
-$--border-color-light: #e4e7ed !default;
-$--border-color-lighter: #ebeef5 !default;
-$--border-color-extra-light: #f2f6fc !default;
+$--color-text-dark: #1f2230 !default;
+$--color-text-dark-1: #434656 !default;
+$--color-text-gray: #6f7482 !default;
+$--color-text-gray-1: #7a7c87 !default;
+$--color-text-gray-2: #8b8fa1 !default;
+$--color-text-gray-3: #aaa !default;
+$--color-text-gray-4: #ccc !default;
+$--color-text-gray-5: #d3d5e0 !default;
+$--color-text-gray-6: #e0e1eb !default;
+$--color-border: #eff0f5;
+$--color-background: #eff0f5;
 // status
-$--color-primary: rgba(35, 196, 185, 1) !default;
-$--color-success: rgba(28, 208, 161, 1) !default;
-$--color-warning: rgba(255, 159, 69, 1) !default;
-$--color-warning-lighter: rgba(253, 203, 90, 1) !default;
-$--color-danger: rgba(254, 108, 105, 1) !default;
-$--color-info: #909399 !default;
+$--color-primary: #3a5ae5 !default;
+$--color-primary-light: mix(#fff, $--color-primary, 20%) !default;
+$--color-success: #3fcb98 !default;
+$--color-success-light: #32cf8a !default;
+$--color-warning: #ff9427 !default;
+$--color-danger: #fe5d4e !default;
+$--color-cyan: #2abcff !default;
+$--color-cyan-light: #5fc9fa !default;
 $--color-blue: #556dff !default;
-$--color-blue-white: #667cff !default;
+$--color-blue-white: #4f79ff !default;
+$--color-blue-dark: #172666 !default;
+$--color-purple: #9877ff !default;
 $--color-white: #ffffff;
-// skin
-$--color-background: #f5f5f5;
-$--color-background-dark: #21252b;
-$--color-background-act-dark: #2c313a;
-// border
-$--color-border: #e2e2e2;
-$--color-border-light: #e8e8e8;
+$--color-dark: #1f2230;
+
 // shadow
 $--shadow-light: 0 0 1px rgba(0, 0, 0, 0.15) !default;
 
 // size ------------------->
 $--font-size-base: 14px !default;
-$--font-size-large: 18px !default;
 $--font-size-medium: 16px !default;
-$--border-radius: 10px;
-
+$--font-size-large: 18px !default;
+$--border-radius: 8px;
+$--border-radius-large: 12px;
+$--border-radius-huge: 20px;
+// font-family
 $--font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
   "Microsoft YaHei", Arial, sans-serif;

card/components/ElementPropEdit.vue

@@ -20,7 +20,7 @@
 
     <div slot="footer">
       <el-button type="primary" @click="submit">确认</el-button>
-      <el-button type="danger" @click="cancel" plain>取消</el-button>
+      <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>

card/components/PagePropEdit.vue

@@ -23,7 +23,7 @@
           :key="index"
           :class="[
             'column-btn',
-            { 'btn-act': form.columnNumber == item.value }
+            { 'column-btn-act': form.columnNumber == item.value }
           ]"
           :title="item.title"
           :disabled="item.disabled"
@@ -134,8 +134,6 @@ export default {
         "此操作会导致当前题卡编辑的所有元素清空, 是否继续?",
         "提示",
         {
-          cancelButtonClass: "el-button--danger is-plain",
-          confirmButtonClass: "el-button--primary",
           type: "warning"
         }
       )
@@ -167,8 +165,6 @@ export default {
     },
     modifyPageSize() {
       this.$confirm("此操作将会重置当前页面所有元素信息, 是否继续?", "提示", {
-        cancelButtonClass: "el-button--danger is-plain",
-        confirmButtonClass: "el-button--primary",
         type: "warning"
       })
         .then(() => {

card/components/RightClickMenu.vue

@@ -229,8 +229,6 @@ export default {
     toDelete() {
       this.close();
       this.$confirm("确定要删除当前元素吗?", "提示", {
-        cancelButtonClass: "el-button--danger is-plain",
-        confirmButtonClass: "el-button--primary",
         type: "warning"
       })
         .then(() => {

card/components/TopicSelectDialog.vue

@@ -21,8 +21,8 @@
     </div>
 
     <div slot="footer">
-      <el-button type="danger" @click="cancel" plain>取消</el-button>
       <el-button type="primary" @click="submit">确认</el-button>
+      <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>

card/components/common/ElementResize.vue

@@ -394,7 +394,7 @@ export default {
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background: #00a2fe;
+    background: #617bea;
     z-index: 99;
     &-l {
       left: 0;
@@ -530,25 +530,25 @@ export default {
       height: 100%;
       left: -1px;
       top: 0;
-      border-left: 1px solid #4794b3;
+      border-left: 1px solid #617bea;
     }
     &-right {
       height: 100%;
       right: -1px;
       top: 0;
-      border-left: 1px solid #4794b3;
+      border-left: 1px solid #617bea;
     }
     &-top {
       width: 100%;
       left: 0;
       top: -1px;
-      border-top: 1px solid #4794b3;
+      border-top: 1px solid #617bea;
     }
     &-bottom {
       width: 100%;
       left: 0;
       bottom: -1px;
-      border-top: 1px solid #4794b3;
+      border-top: 1px solid #617bea;
     }
   }
 

card/views/CardDesign.vue

@@ -1,102 +1,68 @@
 <template>
   <div class="card-design">
-    <div class="design-top">
-      <div class="design-top-logo">
-        <h1><i class="icon icon-back" @click="toExit"></i>答题卡制作</h1>
+    <div class="design-header">
+      <div class="design-steps">
+        <div class="step-item" v-for="(step, index) in steps" :key="index">
+          <i>{{ index + 1 }}</i>
+          <span>{{ step }}</span>
+        </div>
       </div>
-      <!-- <div class="design-top-info">
-        <div class="info-help"><i class="icon icon-help"></i>帮助</div>
-      </div> -->
     </div>
 
-    <div class="design-main">
-      <!-- menus -->
-      <div class="design-head">
-        <div class="design-steps">
-          <div class="step-item" v-for="(step, index) in steps" :key="index">
-            <i>{{ index + 1 }}</i>
-            <span>{{ step }}</span>
-          </div>
-        </div>
-        <div class="design-control">
-          <div class="control-right">
-            <el-button
-              class="btn-white"
-              :loading="isSubmit"
-              :disabled="!pages.length"
-              @click="toPreview"
-              >预览</el-button
-            >
-            <el-button
-              type="primary"
-              :loading="isSubmit"
-              :disabled="canSave || !pages.length"
-              @click="toSave"
-              >暂存</el-button
-            >
-            <el-button type="primary" :loading="isSubmit" @click="toSubmit"
-              >提交</el-button
-            >
-          </div>
-          <div class="control-left">
-            <el-button
-              v-for="(page, pageNo) in pages"
-              :key="pageNo"
-              :class="{ 'btn-white': curPageNo === pageNo }"
-              @click="swithPage(pageNo)"
-              >第{{ pageNo + 1 }}页</el-button
-            >
-          </div>
-        </div>
+    <!-- actions -->
+    <div class="design-action">
+      <div class="design-logo">
+        <h1>
+          <i class="el-icon-d-arrow-left" @click="toExit" title="退出"></i>
+          答题卡制作
+        </h1>
       </div>
 
-      <!-- actions -->
-      <div class="design-action">
-        <div class="action-part">
-          <div class="action-part-title"><h2>基本设置</h2></div>
-          <div class="action-part-body">
-            <page-prop-edit @init-page="initPageData"></page-prop-edit>
-          </div>
+      <div class="action-part">
+        <div class="action-part-title"><h2>基本设置</h2></div>
+        <div class="action-part-body">
+          <page-prop-edit @init-page="initPageData"></page-prop-edit>
         </div>
-        <div class="action-part">
-          <div class="action-part-title"><h2>试题配置</h2></div>
-          <div class="action-part-body">
-            <div class="type-list">
-              <div
-                class="type-item"
-                v-for="(item, index) in TOPIC_LIST"
-                :key="index"
+      </div>
+      <div class="action-part">
+        <div class="action-part-title"><h2>试题配置</h2></div>
+        <div class="action-part-body">
+          <div class="type-list">
+            <div
+              class="type-item"
+              v-for="(item, index) in TOPIC_LIST"
+              :key="index"
+            >
+              <el-button @click="addNewTopic(item)"
+                ><i class="el-icon-plus"></i>{{ item.name }}</el-button
               >
-                <el-button @click="addNewTopic(item)"
-                  ><i class="el-icon-plus"></i>{{ item.name }}</el-button
-                >
-              </div>
             </div>
           </div>
+          <p class="tips-info">提示：点击创建试题</p>
         </div>
-        <div class="action-part">
-          <div class="action-part-title"><h2>插入元素</h2></div>
-          <div class="action-part-body">
-            <div class="type-list">
-              <div
-                class="type-item"
-                v-for="(item, index) in ELEMENT_LIST"
-                :key="index"
-                draggable="true"
-                @dragstart="dragstart(item)"
-              >
-                <el-button
-                  ><i class="el-icon-plus"></i>{{ item.name }}</el-button
-                >
-              </div>
+      </div>
+      <div class="action-part">
+        <div class="action-part-title"><h2>插入元素</h2></div>
+        <div class="action-part-body">
+          <div class="type-list">
+            <div
+              class="type-item"
+              v-for="(item, index) in ELEMENT_LIST"
+              :key="index"
+              draggable="true"
+              @dragstart="dragstart(item)"
+            >
+              <el-button><i class="el-icon-plus"></i>{{ item.name }}</el-button>
             </div>
-            <!-- Develop btns -->
-            <!-- <card-config-prop-edit></card-config-prop-edit> -->
+            <p class="tips-info">提示：拖动插入元素</p>
           </div>
-          <!-- <br /><br /> -->
-          <!-- <el-button @click="initCard">新建页面</el-button> -->
+          <!-- Develop btns -->
+          <!-- <card-config-prop-edit></card-config-prop-edit> -->
         </div>
-        <!-- <div class="action-part">
+        <!-- <br /><br /> -->
+        <!-- <el-button @click="initCard">新建页面</el-button> -->
+      </div>
+      <!-- <div class="action-part">
           <div class="action-part-title"><h2>阅卷参数</h2></div>
           <div class="action-part-body">
             <el-button type="primary" @click="modifyParams"
@@ -106,6 +72,38 @@
             >
           </div>
         </div> -->
+    </div>
+
+    <div class="design-main">
+      <!-- menus -->
+      <div class="design-control">
+        <div class="control-left">
+          <el-button
+            v-for="(page, pageNo) in pages"
+            :key="pageNo"
+            :class="{ 'btn-white': curPageNo === pageNo }"
+            @click="swithPage(pageNo)"
+            >第{{ pageNo + 1 }}页</el-button
+          >
+        </div>
+        <div class="control-right">
+          <el-button
+            type="success"
+            :loading="isSubmit"
+            :disabled="!pages.length"
+            @click="toPreview"
+            >预览</el-button
+          >
+          <el-button
+            :loading="isSubmit"
+            :disabled="canSave || !pages.length"
+            @click="toSave"
+            >暂存</el-button
+          >
+          <el-button type="primary" :loading="isSubmit" @click="toSubmit"
+            >提交</el-button
+          >
+        </div>
       </div>
 
       <!-- edit body -->
@@ -588,8 +586,6 @@ export default {
       if (!this.checkCardValid()) return;
 
       this.$confirm("确定要提交当前题卡吗?", "提示", {
-        cancelButtonClass: "el-button--danger is-plain",
-        confirmButtonClass: "el-button--primary",
         type: "warning"
       })
         .then(() => {
@@ -637,8 +633,6 @@ export default {
         "请确保当前题卡已经正常保存，确定要退出当前题卡编辑吗?",
         "提示",
         {
-          cancelButtonClass: "el-button--danger is-plain",
-          confirmButtonClass: "el-button--primary",
           type: "warning"
         }
       )

src/assets/styles/base.scss

@@ -369,11 +369,7 @@ body {
     color: $--color-text-gray;
   }
 }
-.btn-act {
-  background: rgba(28, 208, 161, 1) !important;
-  box-shadow: 5px 5px 4px 0px rgba(28, 208, 161, 0.3);
-  border-radius: 10px;
-}
+
 .cont-link {
   color: $--color-primary;
   cursor: pointer;

src/assets/styles/element-ui-costom.scss

@@ -157,11 +157,6 @@
   color: $--color-white;
   border-color: $--color-primary;
   background: $--color-primary;
-  background-image: linear-gradient(
-    -90deg,
-    $--color-success 0%,
-    $--color-primary 100%
-  );
 }
 // button
 .el-button {

src/modules/exam/components/ApplyContent.vue

@@ -411,7 +411,7 @@ export default {
     IS_PREVIEW() {
       return this.editType
         ? this.editType === "PREVIEW"
-        : this.curTaskApply.setup === 0;
+        : this.curTaskApply.setup <= 0;
     },
     IS_AUDIT() {
       return this.editType
@@ -468,7 +468,11 @@ export default {
       this.buildSteps();
     },
     async buildSteps() {
-      if (!this.curTaskApply.flowId) return;
+      if (
+        !this.curTaskApply.flowId ||
+        (this.curTaskApply.setup && this.curTaskApply.setup <= 0)
+      )
+        return;
 
       const flowStatus = {
         wait: "待进行",

src/modules/exam/components/ModifyTaskApply.vue

@@ -178,7 +178,7 @@ export default {
 
       if (this.modalForm.setup === 1 || this.modalForm.setup === null) {
         return "提交入库申请";
-      } else if (this.modalForm.setup === 0) {
+      } else if (this.modalForm.setup <= 0) {
         return "入库申请详情";
       } else {
         return "审核入库申请";

src/modules/print/views/PrintTaskManage.vue

@@ -219,7 +219,7 @@
         <el-table-column
           class-name="action-column"
           label="操作"
-          width="120"
+          width="100"
           fixed="right"
           align="center"
         >