ui md

src/assets/styles/base.less

@@ -35,7 +35,6 @@ u {
 input {
   outline: none;
   border: none;
-  box-shadow: 100px 100px 100px #fff inset;
   font-family: "Microsoft YaHei", Tahoma, Helvetica, Arial, sans-serif;
   -webkit-appearance: none;
 }
@@ -70,13 +69,13 @@ button {
 
 /* common-style */
 input:-webkit-autofill {
-  box-shadow: 0 0 0 1000px white inset;
+  box-shadow: 100px 100px 100px #212543 inset;
 }
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="number"]:focus,
 textarea:focus {
-  box-shadow: 0 0 0 1000px white inset;
+  box-shadow: 100px 100px 100px #212543 inset;
 }
 input,
 select {

src/assets/styles/home.less

@@ -4,16 +4,16 @@
   width: 100%;
   height: 100%;
   z-index: auto;
-  min-width: 800px;
+  min-width: 1024px;
+  background: @background;
 }
 .home-body {
   position: absolute;
   left: 0;
-  top: 64px;
+  top: 70px;
   right: 0;
   bottom: 0;
   overflow: auto;
-  background: @background;
   z-index: 98;
 }
 .home-main {
@@ -21,105 +21,81 @@
   margin: 0 auto;
   width: 1024px;
 }
-.home-progress {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 30px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  padding: 5px 10px;
-  z-index: 99;
-}
-.progress-item {
-  font-size: 13px;
-  line-height: 20px;
-  color: @fontMain;
-}
-.progress-name {
-  float: left;
-}
-.progress-main {
-  margin-right: 190px;
-  margin-left: 95px;
-}
-.progress-info {
-  float: right;
-  text-align: right;
-}
-.progress-info span {
-  margin: 0 2px;
-}
 
-/* head */
+/* home-header */
 .home-header {
   position: absolute;
   width: 100%;
-  padding: 16px 20px;
-  height: 64px;
-  line-height: 32px;
-  background: linear-gradient(
-    90deg,
-    rgba(71, 195, 233, 1) 0%,
-    rgba(92, 158, 238, 1) 100%
-  );
-  // box-shadow: 0px 15px 25px 0px rgba(81, 175, 235, 0.3);
+  padding: 15px 20px;
+  height: 70px;
+  line-height: 40px;
   top: 0;
   left: 0;
   z-index: 100;
-}
-.head-back {
-  float: left;
-}
-.head-user {
-  float: right;
-  color: #fff;
-}
-.head-user span {
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 10px;
-  font-weight: 600;
-  cursor: pointer;
-}
-.user-logout i {
-  vertical-align: middle;
-  margin-top: -5px;
-}
-.user-logout:hover {
-  color: @pink;
-}
-.head-info {
-  margin: 0 150px 0 100px;
-  font-size: 16px;
-  color: #fff;
-  text-align: center;
+  .head-back {
+    float: left;
+  }
+  .head-actions {
+    float: right;
+    .action-icon {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 10px;
+      font-weight: 600;
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 50%;
+      color: @fontSub;
+      background-color: @backgroundLight;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        color: @fontMain;
+      }
+    }
+  }
 
-  > span {
-    margin: 0 10px;
+  .action-logout:hover {
+    color: @pink;
+  }
+  .head-info {
+    margin: 0 150px 0 100px;
+    font-size: 20px;
+    color: #fff;
+    text-align: center;
+    > span {
+      display: inline-block;
+      vertical-align: middle;
+      &:nth-of-type(2) {
+        width: 10px;
+        border-bottom: 1px solid @fontMain;
+        margin: 0 5px;
+      }
+    }
   }
 }
 
 /* part */
-.part-head {
-  padding: 20px 0;
+.part-box {
   position: relative;
+  width: 944px;
+  min-height: 492px;
+  margin: 0 auto 40px;
+  border-radius: 40px;
+  background-color: @backgroundLight;
+  overflow: auto;
 }
-.part-head .ivu-btn {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-}
-.part-head .ivu-btn:hover .icon-left {
-  background-image: url(../images/icon-left-act.png);
-}
-.part-head > h2 {
+.part-head {
+  font-size: 18px;
+  line-height: 24px;
+  padding: 20px 30px;
   color: @fontMain;
-  font-size: 40px;
-  line-height: 56px;
-  text-align: center;
+  span {
+    color: @fontSub;
+    margin-right: 15px;
+  }
 }
 
 /* other */
@@ -134,8 +110,3 @@
   bottom: 0;
   margin: auto;
 }
-
-/* iview */
-.ivu-progress-inner {
-  background: #e0e0e0;
-}

src/assets/styles/icons.less

@@ -1,39 +1,79 @@
 /* icon */
 .icon {
-  height: 14px;
-  width: 14px;
+  height: 16px;
+  width: 16px;
   display: inline-block;
-  vertical-align: top;
+  vertical-align: middle;
   background-size: 100% 100%;
-  &-setting {
-    vertical-align: middle;
-    margin-right: 10px;
-    margin-top: -2px;
-    background-image: url(../images/icon-setting.png);
-  }
-  &-left {
-    height: 8px;
-    width: 8px;
-    vertical-align: middle;
-    margin-right: 10px;
-    background-image: url(../images/icon-left.png);
-  }
-  &-left-act {
-    background-image: url(../images/icon-left-act.png);
-  }
-  &-left-rotate {
-    height: 24px;
-    width: 24px;
-    background-image: url(../images/icon-left-rotate.png);
-  }
-  &-right-rotate {
-    height: 24px;
-    width: 24px;
-    background-image: url(../images/icon-right-rotate.png);
-  }
-  &-loading {
-    height: 80px;
-    width: 80px;
-    background-image: url(../images/icon-loading.png);
+  &.ivu-icon {
+    &-close {
+      background-image: url(../images/icon-close.png);
+    }
+    &-close-act {
+      background-image: url(../images/icon-close-act.png);
+    }
+    &-max {
+      background-image: url(../images/icon-max.png);
+    }
+    &-max-act {
+      background-image: url(../images/icon-max-act.png);
+    }
+    &-error-hollow {
+      height: 24px;
+      width: 24px;
+      background-image: url(../images/icon-error-hollow.png);
+    }
+    &-error-big {
+      height: 36px;
+      width: 36px;
+      background-image: url(../images/icon-error-big.png);
+    }
+    &-handle {
+      width: 12px;
+      height: 14px;
+      background-image: url(../images/icon-handle.png);
+    }
+    &-level {
+      width: 18px;
+      height: 18px;
+      background-image: url(../images/icon-level.png);
+    }
+    &-subject {
+      width: 14px;
+      background-image: url(../images/icon-subject.png);
+    }
+    &-more {
+      background-image: url(../images/icon-more.png);
+    }
+    &-rotate-left {
+      background-image: url(../images/icon-rotate-left.png);
+    }
+    &-rotate-left-act {
+      background-image: url(../images/icon-rotate-left-act.png);
+    }
+    &-rotate-right {
+      background-image: url(../images/icon-rotate-right.png);
+    }
+    &-rotate-right-act {
+      background-image: url(../images/icon-rotate-right-act.png);
+    }
+    &-scan {
+      height: 20px;
+      width: 20px;
+      background-image: url(../images/icon-scan.png);
+    }
+    &-user-gray {
+      width: 11px;
+      height: 12px;
+      background-image: url(../images/icon-user-gray.png);
+    }
+    &-user-act {
+      width: 11px;
+      height: 12px;
+      background-image: url(../images/icon-user-act.png);
+    }
+    &-loading {
+      background-image: url(../images/icon-loading.png);
+    }
   }
 }

src/assets/styles/iview-custom-var.less

@@ -0,0 +1,245 @@
+@import "color/colors";
+
+// Prefix
+@css-prefix             : ivu-;
+@css-prefix-iconfont    : ivu-icon;
+
+// Color
+@primary-color          : #2d8cf0;
+@info-color             : #2db7f5;
+@success-color          : #19be6b;
+@processing-color       : @primary-color;
+@warning-color          : #ff9900;
+@error-color            : #ed4014;
+@normal-color           : #e6ebf1;
+@link-color             : #2D8cF0;
+@link-hover-color       : tint(@link-color, 20%);
+@link-active-color      : shade(@link-color, 5%);
+@selected-color         : fade(@primary-color, 90%);
+@tooltip-color          : #fff;
+@subsidiary-color       : #808695;
+@rate-star-color        : #f5a623;
+@white: #fff;
+@black: #000;
+
+// Base
+@body-background        : #fff;
+@component-background   : #fff;
+@font-family            : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+@code-family            : Consolas,Menlo,Courier,monospace;
+@title-color            : #17233d;
+@text-color             : #515a6e;
+@text-color-secondary: fade(@black, 45%);
+@heading-color: fade(#000, 85%);
+@heading-color-dark: fade(@white, 100%);
+@font-size-base         : 14px;
+@font-size-small        : 12px;
+@font-size-large        : @font-size-base + 2px;
+@line-height-base       : 1.5;
+@line-height-computed   : floor((@font-size-base * @line-height-base));
+@border-radius-base     : 6px;
+@border-radius-small    : 4px;
+@cursor-disabled        : not-allowed;
+
+// vertical paddings
+@padding-lg: 24px; // containers
+@padding-md: 16px; // small containers and buttons
+@padding-sm: 12px; // Form controls and items
+@padding-xs: 8px; // small items
+
+// Border color
+@border-color-base      : #dcdee2;  // outside
+@border-color-split     : #e8eaec;  // inside
+@border-width-base      : 1px;            // width of the border for a component
+@border-style-base      : solid;          // style of a components border
+
+// Background color
+@background-color-base        : #f7f7f7;  // base
+@background-color-select-hover: @input-disabled-bg;
+@tooltip-bg                   : rgba(70, 76, 91, .9);
+@head-bg                      : #f9fafc;
+@table-thead-bg               : #f8f8f9;
+@table-td-stripe-bg           : #f8f8f9;
+@table-td-hover-bg            : #ebf7ff;
+@table-td-highlight-bg        : #ebf7ff;
+@menu-dark-title              : #515a6e;
+@menu-dark-active-bg          : #363e4f;
+@menu-dark-subsidiary-color   : rgba(255,255,255,.7);
+@menu-dark-group-title-color  : rgba(255,255,255,.36);
+@date-picker-cell-hover-bg    : #e1f0fe;
+
+// Shadow
+@shadow-color           : rgba(0, 0, 0, .2);
+@shadow-base            : @shadow-down;
+@shadow-card            : 0 1px 1px 0 rgba(0,0,0,.1);
+@shadow-up              : 0 -1px 6px @shadow-color;
+@shadow-down            : 0 1px 6px @shadow-color;
+@shadow-left            : -1px 0 6px @shadow-color;
+@shadow-right           : 1px 0 6px @shadow-color;
+
+// Button
+@btn-height-base        : 32px;
+@btn-height-large       : 40px;
+@btn-height-small       : 24px;
+
+@btn-padding-base       : 0 @padding-md - 1px;
+@btn-padding-large      : @btn-padding-base;
+@btn-padding-small      : 0 @padding-xs - 1px;
+
+@btn-font-weight        : normal;
+@btn-padding-base-icon  : 5px 15px 6px;
+@btn-padding-large-icon : 6px 15px 6px 15px;
+@btn-padding-small-icon : 1px 7px 2px;
+@btn-font-size          : @font-size-base;
+@btn-font-size-large    : @font-size-large;
+@btn-font-size-small    : @font-size-base;
+@btn-border-radius      : 4px;
+@btn-border-radius-small: 3px;
+@btn-group-border       : shade(@primary-color, 5%);
+
+@btn-disable-color      : #c5c8ce;
+@btn-disable-bg         : @background-color-base;
+@btn-disable-border     : @border-color-base;
+
+@btn-default-color      : @text-color;
+@btn-default-bg         : #fff;
+@btn-default-border     : @border-color-base;
+
+@btn-primary-color      : #fff;
+@btn-primary-bg         : @primary-color;
+
+@btn-ghost-color        : @text-color;
+@btn-ghost-bg           : #fff;
+@btn-ghost-border       : @border-color-base;
+
+@btn-circle-size        : @btn-height-base;
+@btn-circle-size-large  : @btn-height-large;
+@btn-circle-size-small  : @btn-height-small;
+
+@btn-square-size        : @btn-height-base;
+@btn-square-size-large  : @btn-height-large;
+@btn-square-size-small  : @btn-height-small;
+
+// Layout and Grid
+@grid-columns                : 24;
+@grid-gutter-width           : 0;
+@layout-body-background      : #f5f7f9;
+@layout-header-background    : #515a6e;
+@layout-header-height        : 64px;
+@layout-header-padding       : 0 50px;
+@layout-footer-padding       : 24px 50px;
+@layout-footer-background    : @layout-body-background;
+@layout-sider-background     : @layout-header-background;
+@layout-trigger-height       : 48px;
+@layout-trigger-color        : #fff;
+@layout-zero-trigger-width   : 36px;
+@layout-zero-trigger-height  : 42px;
+
+// Legend
+@legend-color           : #999;
+
+// Input
+@input-height-base           : 32px;
+@input-height-large          : 40px;
+@input-height-small          : 24px;
+
+@input-padding-horizontal    : 7px;
+@input-padding-vertical-base : 4px;
+@input-padding-vertical-small: 1px;
+@input-padding-vertical-large: 6px;
+
+@input-placeholder-color     : @btn-disable-color;
+@input-color                 : @text-color;
+@input-border-color          : @border-color-base;
+@input-bg                    : #fff;
+@input-group-bg              : #f8f8f9;
+
+@input-hover-border-color    : @primary-color;
+@input-focus-border-color    : @primary-color;
+@input-disabled-bg           : #f3f3f3;
+
+// Tag
+@tag-font-size          : 12px;
+
+// Media queries breakpoints
+// Extra small screen / phone
+@screen-xs              : 480px;
+@screen-xs-min          : @screen-xs;
+@screen-xs-max          : (@screen-xs-min - 1);
+
+// Small screen / tablet
+@screen-sm              : 576px;
+@screen-sm-min          : @screen-sm;
+@screen-sm-max          : (@screen-sm-min - 1);
+
+// Medium screen / desktop
+@screen-md              : 768px;
+@screen-md-min          : @screen-md;
+@screen-md-max          : (@screen-md-min - 1);
+
+// Large screen / wide desktop
+@screen-lg              : 992px;
+@screen-lg-min          : @screen-lg;
+@screen-lg-max          : (@screen-lg-min - 1);
+
+// Extra large screen / full hd
+@screen-xl              : 1200px;
+@screen-xl-min          : @screen-xl;
+@screen-xl-max          : (@screen-xl-min - 1);
+
+// Extra extra large screen / large descktop
+@screen-xxl             : 1600px;
+@screen-xxl-min         : @screen-xxl;
+@screen-xxl-max         : (@screen-xxl-min - 1);
+
+// Z-index
+@zindex-spin            : 8;
+@zindex-affix           : 10;
+@zindex-back-top        : 10;
+@zindex-select          : 900;
+@zindex-modal           : 1000;
+@zindex-drawer          : 1000;
+@zindex-message         : 1010;
+@zindex-notification    : 1010;
+@zindex-tooltip         : 1060;
+@zindex-transfer        : 1060;
+@zindex-loading-bar     : 2000;
+@zindex-spin-fullscreen : 2010;
+
+// Animation
+@animation-time         : .3s;
+@animation-time-quick   : .15s;
+@transition-time        : .2s;
+@ease-in-out            : ease-in-out;
+
+// Slider
+@slider-color              : tint(@primary-color, 20%);
+@slider-height             : 4px;
+@slider-margin             : 16px 0;
+@slider-button-wrap-size   : 18px;
+@slider-button-wrap-offset : -5px;
+@slider-disabled-color     : #ccc;
+
+// Avatar
+@avatar-size-base: 32px;
+@avatar-size-lg: 40px;
+@avatar-size-sm: 24px;
+@avatar-font-size-base: 18px;
+@avatar-font-size-lg: 24px;
+@avatar-font-size-sm: 14px;
+@avatar-bg: #ccc;
+@avatar-color: #fff;
+@avatar-border-radius: @border-radius-small;
+
+// Anchor
+@anchor-border-width: 2px;
+
+// List
+// ---
+@list-header-background: transparent;
+@list-footer-background: transparent;
+@list-empty-text-padding: @padding-md;
+@list-item-padding: @padding-sm 0;
+@list-item-meta-margin-bottom: @padding-md;
+@list-item-meta-avatar-margin-right: @padding-md;
+@list-item-meta-title-margin-bottom: @padding-sm;

src/assets/styles/iview-custom.less

@@ -14,18 +14,67 @@
 }
 // btn
 .ivu-btn {
-  border-radius: 20px;
+  border-radius: 10px;
   &.ivu-btn-default {
-    background: #ebeff7;
-  }
-  &.ivu-btn-large {
-    border-radius: 30px;
+    background: transparent;
+    border-color: #3b427a;
+    color: @fontSub;
+
+    &:hover {
+      border-color: @fontMain;
+      color: @fontMain;
+    }
   }
 }
-// select
+// select - ok
 .ivu-select {
+  .ivu-select-dropdown {
+    margin: 10px 0;
+    background: rgba(46, 50, 90, 1);
+    box-shadow: 0px 0px 40px 0px rgba(4, 5, 17, 0.3);
+    border-radius: 20px;
+    padding: 20px;
+  }
+  .ivu-select-item {
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 20px;
+    height: 36px;
+    line-height: 32px;
+    border-radius: 10px;
+    border: 2px solid #3b427a;
+    color: @fontSub;
+    margin: 0 5px 10px;
+    background-color: transparent;
+
+    &:hover,
+    &-selected {
+      border: 2px solid #4e7cff;
+      color: #4e7cff;
+    }
+  }
   .ivu-select-selection {
-    border-radius: 27px;
+    height: 60px;
+    padding: 13px;
+    font-size: 16px;
+    border-radius: 20px;
+    text-align: center;
+    background-color: #212543 !important;
+    border-color: #212543 !important;
+  }
+  .ivu-select-selected-value {
+    color: @fontMain;
+  }
+  .ivu-select-arrow {
+    width: 14px;
+    height: 12px;
+    right: 20px;
+    background-image: url(../images/icon-more.png);
+    background-size: 100% 100%;
+
+    &::before {
+      content: "";
+    }
   }
 }
 .ivu-select-default {
@@ -40,46 +89,69 @@
     }
   }
 }
-// input
+// input -ok
 .ivu-input {
-  border-radius: 27px;
-  &[disabled] {
-    color: @dark;
+  border-radius: 10px;
+  background-color: #212543 !important;
+  border-color: #212543 !important;
+  color: @fontSub;
+  // &[disabled] {
+  // }
+  &-with-prefix {
+    padding-left: 40px;
+  }
+  &-prefix {
+    width: 40px;
+    padding-left: 10px;
+  }
+  &-group-append {
+    background-color: #212543;
+    border-color: #212543;
   }
 }
 // input-number
 .ivu-input-number {
   font-size: 14px;
-  border-radius: 27px;
+  border-radius: 10px;
   .ivu-input-number-input {
     padding: 0 16px;
-    border-radius: 27px;
+    border-radius: 10px;
   }
   .ivu-input-number-handler-wrap {
     display: none;
   }
 }
-// form
+// form -ok
 .ivu-form {
   .ivu-form-item-error-tip {
-    font-size: 13px;
+    font-size: 14px;
+    margin-top: 5px;
+    padding-left: 20px;
+    padding-top: 0;
+    line-height: 20px;
+    white-space: nowrap;
+    background-image: url(../images/icon-error-tips.png);
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    background-position: 0 2px;
   }
 }
 
 // modal
 .ivu-modal {
+  box-shadow: 0px 0px 40px 0px rgba(4, 5, 17, 0.2);
+  border-radius: 20px;
+
+  .ivu-modal-content {
+    background: rgba(46, 50, 90, 1) !important;
+  }
+
   .ivu-modal-header {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    height: 54px;
-    padding-left: 30px;
-    padding-right: 30px;
-    background: linear-gradient(
-        90deg,
-        rgba(71, 195, 233, 1) 0%,
-        rgba(92, 158, 238, 1) 100%
-      )
-      rgba(71, 195, 233, 1);
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    border: none;
+    padding: 20px 32px;
+    background-color: transparent;
 
     .ivu-modal-header-inner {
       line-height: 24px;
@@ -88,16 +160,20 @@
     }
   }
   .ivu-modal-content {
-    border-radius: 10px;
+    border-radius: 20px;
     background: rgba(245, 247, 251, 1);
   }
   .ivu-modal-body {
-    padding: 40px;
+    padding: 0 32px;
   }
   .ivu-modal-footer {
-    text-align: left;
     border: 0;
-    padding: 40px;
+    padding: 32px;
+
+    button {
+      width: 80px;
+      margin: 0 10px;
+    }
   }
 }
 .ivu-modal-fullscreen {
@@ -134,7 +210,7 @@
   .ivu-message-notice-content {
     background: rgba(245, 247, 251, 1);
 
-    border-radius: 27px;
+    border-radius: 10px;
     font-size: 16px;
     padding: 10px 30px;
   }
@@ -150,7 +226,7 @@
     li {
       border: 1px solid @border-color-base;
       background: rgba(235, 239, 247, 1);
-      border-radius: 27px;
+      border-radius: 10px;
     }
     li.ivu-page-item-active {
       background: @primary-color;

src/assets/styles/iview.less

@@ -1,5 +1,6 @@
 @import "~view-design/src/styles/index.less";
-@primary-color: rgba(92, 158, 238, 1);
+@primary-color: #4e7cff;
+@error-color: #f65164;
 @border-color-base: rgba(221, 226, 237, 1);
 @background-color-base: rgba(235, 239, 247, 1);
 
@@ -8,8 +9,12 @@
 @table-td-stripe-bg: rgba(237, 242, 250, 1);
 
 // Button
+@btn-height-base: 36px;
+@btn-height-large: 50px;
+@btn-height-small: 27px;
+@btn-border-radius: 12px;
 // @btn-padding-large: 10px 15px;
-@btn-font-size-large: 20px;
+@btn-font-size-large: 16px;
 
 // @btn-padding-base: 6px 20px;
 @btn-font-size: 14px;

src/assets/styles/login.less

@@ -1,72 +1,72 @@
 /* login */
-.login-home {
+.login {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: 8;
-  padding: 20px 0;
-  background: linear-gradient(
-    90deg,
-    rgba(71, 195, 233, 1) 0%,
-    rgba(92, 158, 238, 1) 100%
-  );
+  background-color: @background;
+  min-height: 483px;
   overflow: auto;
-}
-.login-home::before {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 8;
-  opacity: 0.8;
-  background-image: url(../images/home-back.png);
-  background-position: center center;
-}
-.login-title {
-  height: 50px;
-  font-size: 34px;
-  line-height: 50px;
-  font-weight: 600;
-  color: #fff;
-  margin: 115px auto 55px;
-  text-align: center;
-}
-.login-box {
-  position: relative;
-  z-index: 9;
-  width: 480px;
-  height: 396px;
-  overflow: hidden;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-  margin: 0 auto;
-}
+  &-header {
+    width: auto;
+    right: 0;
+    left: auto;
+  }
+  &-body {
+    width: 600px;
+    height: 483px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 0 100px;
+    background-image: url(../images/login-back-mid.png);
+    background-repeat: no-repeat;
+    background-position: 100px;
+    background-size: 400px 483px;
 
-.login-box > h2 {
-  padding-top: 40px;
-  text-align: center;
-  font-size: 24px;
-}
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100px;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background-image: url(../images/login-back-left.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100px;
+      right: 0;
+      top: 60px;
+      bottom: 60px;
+      background-image: url(../images/login-back-right.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  &-title {
+    padding-top: 90px;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 33px;
+    color: @fontMain;
+    text-align: center;
+  }
+  &-form {
+    margin: 40px 60px 0;
+    position: relative;
+  }
 
-.login-form {
-  padding: 30px 60px 0;
-}
-.login-form .ivu-form-item-error-tip {
-  font-size: 14px;
-  padding-left: 20px;
-  padding-top: 4px;
-}
-.login-submit {
-  margin-top: 60px;
-}
+  &-submit {
+    margin-top: 60px;
+  }
 
-/* iview */
-.login-box .ivu-form-item {
-  margin-bottom: 26px;
+  .ivu-form-item {
+    margin-bottom: 30px;
+  }
 }

src/assets/styles/pages.less

@@ -1,200 +1,329 @@
 /* subject */
 .subject-list {
-  position: relative;
+  position: absolute;
   z-index: 9;
-  overflow: hidden;
-  margin: 0 auto;
-  width: 760px;
-  padding: 30px;
-  border-radius: 3px;
-}
-.subject-list ul {
-  font-size: 0;
-  text-align: center;
-}
-.subject-list li {
-  width: 200px;
-  height: 200px;
-  font-size: 32px;
-  line-height: 200px;
-  margin: 0 15px;
-  display: inline-block;
-  vertical-align: top;
-  cursor: pointer;
-  color: hsl(0, 0%, 22%);
-  background-color: rgba(255, 255, 255, 0.7);
-}
-.subject-list li:hover {
-  background-color: rgba(255, 255, 255, 1);
+  width: 100%;
+  height: 260px;
+  top: 50%;
+  margin-top: -130px;
+  color: @fontMain;
+  ul {
+    font-size: 0;
+    text-align: center;
+  }
+  li {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    top: 0;
+    width: 200px;
+    height: 260px;
+    font-size: 24px;
+    border-radius: 30px;
+    background-color: #4e7cff;
+    background-image: url(../images/subject-back-one.png);
+    background-size: 159px 189px;
+    background-position: 13px 32px;
+    background-repeat: no-repeat;
+    margin: 0 20px;
+    transition: top 0.2s linear;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0px 4px 0px 0px rgba(255, 255, 255, 0.1);
+      top: 10px;
+      .subject-icon {
+        display: block;
+      }
+    }
+
+    &:nth-of-type(2) {
+      background-color: @purple;
+      background-image: url(../images/subject-back-two.png);
+    }
+    &:nth-of-type(3) {
+      background-color: @pink;
+      background-image: url(../images/subject-back-three.png);
+    }
+  }
+  .subject-name {
+    position: absolute;
+    bottom: 32px;
+    left: 32px;
+    z-index: 9;
+  }
+  .subject-icon {
+    position: absolute;
+    width: 12px;
+    height: 10px;
+    background-image: url(../images/icon-arrow-right.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    right: 32px;
+    bottom: 32px;
+    display: none;
+  }
 }
 
 /* camera */
-.camera {
-  padding: 0 137px;
-  text-align: center;
-}
 .camera-form {
-  padding: 80px 135px 103px;
-  border-radius: 10px;
-  background: @backgroundGray;
-}
-.camera-form .ivu-input {
-  text-align: center;
-  padding: 20px;
-  height: 60px;
-  border-radius: 30px;
+  width: 400px;
+  padding-top: 80px;
+  margin: 0 auto;
+  .ivu-input {
+    text-align: center;
+    padding: 20px;
+    height: 60px;
+    border-radius: 10px;
+    text-align: center;
+    font-size: 16px;
+  }
+  .icon.ivu-icon-scan {
+    margin-top: 20px;
+    margin-left: -10px;
+  }
 }
 .camera-write {
-  width: 100px;
-  margin: 0 auto;
-  color: #5a99e6;
-  cursor: pointer;
+  text-align: center;
+  margin-top: 50px;
 }
 .camera-write:hover {
   color: @subColor;
 }
 .camera-btn {
+  position: absolute;
+  left: 50%;
+  bottom: 30px;
   width: 220px;
-  margin: 80px auto 0;
+  margin-left: -110px;
 }
 
 /* setting-steps */
 .scan-area-steps {
+  .step-body {
+    position: relative;
+    padding: 0 30px;
+    margin-bottom: 40px;
+    min-height: 400px;
+  }
   .step-ctrl {
     text-align: center;
+    padding-bottom: 30px;
 
     > button {
-      width: 100px;
+      width: 160px;
+      height: 44px;
     }
   }
 }
 /* code-area */
 .code-area {
-  padding: 0 40px;
-}
-.code-area-main {
-  background: @backgroundGray;
-  position: relative;
-  margin-bottom: 60px;
-  min-height: 400px;
-}
-.code-area-cont {
-  position: relative;
-  width: 600px;
-}
-.code-area-cont-disabled::before {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 99;
-}
-.code-area-cont-disabled .cropper-container > .cropper-modal,
-.code-area-cont-disabled .cropper-container > .cropper-crop-box {
-  display: none;
-}
-.code-area-cont img {
-  display: block;
-  width: 100%;
-}
-.code-area-preview {
-  position: absolute;
-  width: 300px;
-  top: 50%;
-  right: 20px;
-  transform: translateY(-50%);
-}
-.code-area-spin {
-  height: 300px;
-  position: relative;
-}
-.code-area-spin-img {
-  position: absolute;
-  width: 300px;
-  height: 200px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  overflow: hidden;
+  &-cont {
+    position: relative;
+    width: 610px;
+    &-disabled::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 99;
+    }
+    &-disabled .cropper-container > .cropper-modal,
+    &-disabled .cropper-container > .cropper-crop-box {
+      display: none;
+    }
+  }
+  &-cont img {
+    display: block;
+    width: 100%;
+  }
+  &-preview {
+    position: absolute;
+    width: 240px;
+    top: 50%;
+    right: 30px;
+    transform: translateY(-50%);
+  }
+  &-spin {
+    height: 240px;
+    position: relative;
+  }
+  &-spin-img {
+    position: absolute;
+    width: 240px;
+    height: 160px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    overflow: hidden;
+  }
+  &-icon {
+    margin: 20px auto 0;
+    text-align: center;
+    line-height: 36px;
+    &:hover {
+      background-color: @blue;
+    }
+  }
 }
-.code-area-icon {
-  width: 60px;
-  height: 60px;
-  border: 1px solid @borderGray;
-  padding: 18px;
-  border-radius: 50%;
+/* rotate-icon */
+.rotate-icon {
+  width: 40px;
+  height: 40px;
+  border: 2px solid @blue;
+  border-radius: 16px;
+  padding: 10px;
   cursor: pointer;
-  margin: 20px auto 0;
+  &::before {
+    content: "";
+    display: block;
+    width: 16px;
+    height: 16px;
+    background-size: 100% 100%;
+  }
+  &-left {
+    &::before {
+      background-image: url(../images/icon-rotate-left.png);
+    }
+    &:hover::before {
+      background-image: url(../images/icon-rotate-left-act.png);
+    }
+  }
+  &-right {
+    &::before {
+      background-image: url(../images/icon-rotate-right.png);
+    }
+    &:hover::before {
+      background-image: url(../images/icon-rotate-right-act.png);
+    }
+  }
+
+  &:hover {
+    background-color: @blue;
+  }
 }
-.code-area-icon:hover {
-  border-color: @boldBorderGray;
-  background: #fff;
+/* .cropper-line */
+.cropper {
+  &-modal {
+    opacity: 0.7;
+  }
+  &-line {
+    background-color: @blue;
+    opacity: 1;
+    &.line-e {
+      right: -2px;
+      top: 3px;
+      bottom: 3px;
+      width: 2px;
+    }
+    &.line-n {
+      height: 2px;
+      top: -2px;
+      left: 3px;
+      right: 3px;
+    }
+    &.line-w {
+      left: -2px;
+      top: 3px;
+      bottom: 3px;
+      width: 2px;
+    }
+    &.line-s {
+      height: 2px;
+      bottom: -2px;
+      left: 3px;
+      right: 3px;
+    }
+  }
+  &-point {
+    background-color: rgba(51, 51, 51, 0.7);
+    border: 2px solid @blue;
+    border-radius: 50%;
+    opacity: 1;
+    width: 10px;
+    height: 10px;
+
+    &.point-e {
+      margin-top: -5px;
+      right: -6px;
+    }
+    &.point-w {
+      margin-top: -5px;
+      left: -6px;
+    }
+    &.point-n {
+      margin-left: -5px;
+      top: -6px;
+    }
+    &.point-s {
+      margin-left: -5px;
+      bottom: -6px;
+    }
+    &.point-ne {
+      top: -6px;
+      right: -6px;
+    }
+    &.point-nw {
+      top: -6px;
+      left: -6px;
+    }
+    &.point-sw {
+      bottom: -6px;
+      left: -6px;
+    }
+    &.point-se {
+      bottom: -6px;
+      right: -6px;
+    }
+  }
 }
-.code-area-btn {
-  width: 300px;
-  margin: 0 auto;
+
+/* cover-area */
+.cover-area {
+  .code-area-preview {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    transform: none;
+  }
+  .code-area-spin {
+    height: 100%;
+  }
+  .code-area-spin-img {
+    height: 100%;
+  }
 }
+
 /* tailor-area */
 .tailor-area .code-area-cont {
   width: 100%;
   height: 400px;
-  overflow: hidden;
 }
 /* image-orientation */
 .image-orientation {
   padding: 0 40px;
-}
-.image-orient-main {
-  background: @backgroundGray;
-  position: relative;
-  margin-bottom: 60px;
-  height: 600px;
-  border-radius: 10px;
-}
-.image-orient-cont {
-  width: 670px;
-  height: 100%;
-  margin: 0 auto;
-  position: relative;
-}
-.image-orient-cont img {
-  display: block;
-  max-width: 600px;
-  max-height: 600px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  .image-orient-cont {
+    width: 450px;
+    height: 450px;
+    margin: 0 auto;
+    position: relative;
+  }
+  .image-orient-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    &:first-child {
+      left: 32px;
+    }
+    &:last-child {
+      right: 32px;
+    }
+  }
 }
 
-.image-orient-icon {
-  position: absolute;
-  width: 60px;
-  height: 60px;
-  top: 50%;
-  margin-top: -30px;
-  padding: 18px;
-  border: 1px solid @borderGray;
-  cursor: pointer;
-  border-radius: 50%;
-}
-.image-orient-icon:first-child {
-  left: 72px;
-}
-.image-orient-icon:last-child {
-  right: 72px;
-}
-.image-orient-icon:hover {
-  border-color: @boldBorderGray;
-  background: #fff;
-}
-.image-orient-btn {
-  width: 300px;
-  margin: 0 auto;
-}
 /* waiting */
 .waiting {
   padding: 50px 20px;
@@ -209,105 +338,100 @@
 /* check-info */
 .check-info {
   .check-form {
-    padding: 50px 0;
-    width: 300px;
+    padding-top: 80px;
+    width: 400px;
     margin: 0 auto;
   }
   .check-action {
-    margin-top: 30px;
+    margin-top: 212px;
     text-align: center;
+    > button {
+      height: 44px;
+      width: 160px;
+    }
   }
 }
-
-/* task */
-.task {
-  padding: 0 137px;
-}
-.task-main {
-  height: 474px;
-  padding: 10px;
-  border-radius: 10px;
-  background: @backgroundGray;
-}
-.task-main li {
-  position: relative;
-  margin: 30px 0;
-  font-size: 24px;
-  height: 32px;
-}
-.task-main li span {
-  position: absolute;
-  line-height: 32px;
-  left: 50%;
-}
-.task-main li span:first-child {
-  margin-left: -60px;
-  color: @midDark;
-}
-.task-main li span:last-child {
-  margin-left: 10px;
-  color: @dark;
-}
-.task-btn {
-  width: 300px;
-  margin: 60px auto 0;
-}
-/* task-infos */
-.task-infos {
-  color: @fontMain;
-  font-size: 0;
-  li {
+.check-result {
+  text-align: center;
+  &-item {
     display: inline-block;
     vertical-align: top;
-    width: 50%;
-    margin-bottom: 10px;
-    font-size: 16px;
+    width: 200px;
+    height: 144px;
+    border-radius: 20px;
+    border: 2px solid rgba(59, 66, 122, 1);
+    color: @fontSub;
+    position: relative;
+    padding: 32px 15px;
     &:first-child {
-      width: 100%;
-      padding: 0 !important;
+      margin-right: 10px;
     }
-    &:nth-of-type(odd) {
-      padding-left: 10px;
+    > i {
+      position: absolute;
+      top: 20px;
+      left: 20px;
     }
-    &:nth-of-type(even) {
-      padding-right: 10px;
+
+    > h4 {
+      font-size: 18px;
+      margin-bottom: 10px;
     }
     > p {
-      background: @backgroundGray;
-      height: 48px;
-      padding: 10px 25px;
-      line-height: 28px;
-      border-radius: 25px;
-    }
-    span {
-      margin-right: 20px;
-    }
-    span:first-child {
-      color: @midDark;
+      font-size: 32px;
+      font-weight: 500;
+      color: @fontMain;
+      line-height: 45px;
     }
   }
 }
 
 /* scan */
 .scan {
+  &-back {
+    position: fixed;
+    width: 220px;
+    height: 70px;
+    top: 0;
+    left: 0;
+    z-index: 200;
+  }
   &-task {
     position: fixed;
-    top: 64px;
-    width: 240px;
-    bottom: 0;
+    width: 220px;
     left: 0;
-    z-index: 99;
-    padding: 15px;
-    font-size: 16px;
+    top: 0;
+    bottom: 0;
+    z-index: 200;
+    padding: 70px 20px 20px;
     overflow-y: auto;
     overflow-x: hidden;
 
     .task-item {
-      line-height: 30px;
-      color: @gray;
+      padding: 12px 10px 12px 58px;
+      color: @fontSub;
+      border-radius: 10px;
+      background-color: @backgroundLight;
+      position: relative;
+
+      &-icon {
+        position: absolute;
+        top: 12px;
+        left: 10px;
+        width: 38px;
+        height: 38px;
+        background: rgba(53, 60, 112, 1);
+        border-radius: 12px;
+      }
+      > p {
+        &:last-child {
+          line-height: 16px;
+        }
+      }
 
       &.task-over {
-        color: @success-color;
+        p:first-child {
+          color: @fontMain;
+        }
       }
 
       > span:first-child {
@@ -315,33 +439,40 @@
       }
     }
     &-action {
-      margin-top: 15px;
-
-      > button {
-        margin: 0 5px;
-      }
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      background-color: #2d325a;
+      padding: 20px 15px;
+      text-align: center;
     }
   }
 
   &-history {
     position: fixed;
-    top: 64px;
-    width: 240px;
+    top: 70px;
+    width: 220px;
     bottom: 0;
     right: 0;
     z-index: 99;
-    padding: 15px 15px 40px;
+    padding: 20px;
+    border-top-left-radius: 20px;
+    background-color: @backgroundLight;
     overflow-y: auto;
     overflow-x: hidden;
     .history-item {
-      margin-bottom: 10px;
+      margin-bottom: 20px;
 
       &-title {
-        margin-bottom: 10px;
-        text-align: center;
-        > span {
-          margin: 0 5px;
-          font-size: 16px;
+        margin-top: 6px;
+        color: @fontSub;
+        overflow: hidden;
+        span {
+          float: right;
+          &:first-child {
+            color: @fontMain;
+            float: left;
+          }
         }
       }
       &-body img {
@@ -351,14 +482,6 @@
       }
     }
   }
-  &-reset-area {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: 40px;
-    text-align: center;
-    padding: 5px 0;
-  }
 
   &-image {
     margin: 0 240px;
@@ -367,7 +490,7 @@
 
   &-main {
     height: 500px;
-    background: @backgroundGray;
+    background: @backgroundLight;
     margin-bottom: 30px;
     position: relative;
   }
@@ -379,7 +502,7 @@
     &-icon {
       width: 240px;
       height: 187px;
-      background-image: url(../images/bg-camera.png);
+      // background-image: url(../images/bg-camera.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
       box-shadow: 0px 15px 25px 0px rgba(81, 175, 235, 0.3);
@@ -416,13 +539,48 @@
   // scan-info
   &-info {
     margin-top: 20px;
-    text-align: center;
+    overflow: hidden;
+    line-height: 36px;
+    p {
+      float: left;
+    }
+    &-cont {
+      margin-right: 20px;
 
-    > p {
-      display: inline-block;
-      vertical-align: middle;
-      margin: 0 10px;
+      > span {
+        color: @fontMain;
+        &:first-child {
+          color: @fontSub;
+        }
+      }
     }
+    &-scan {
+      &::before {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        border: 2px solid rgba(65, 205, 125, 1);
+        margin-right: 10px;
+      }
+    }
+    &-upload {
+      &::before {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        border: 2px solid #f65164;
+        margin-right: 10px;
+      }
+    }
+  }
+  &-reset-area {
+    float: right;
   }
 }
 
@@ -450,7 +608,7 @@
   right: 0;
 }
 .scan-input-main {
-  background: @backgroundGray;
+  background: @backgroundLight;
   position: relative;
   margin-bottom: 20px;
   min-height: 280px;
@@ -505,7 +663,7 @@
   margin: 0 auto;
 }
 .hand-input-main {
-  background: @backgroundGray;
+  background: @backgroundLight;
   position: relative;
   margin-bottom: 20px;
   min-height: 280px;
@@ -531,7 +689,7 @@
 .hand-input-form {
   padding: 20px 20px 0;
   text-align: center;
-  background: @backgroundGray;
+  background: @backgroundLight;
 }
 
 /* progress-bar */

src/assets/styles/variables.less

@@ -1,13 +1,18 @@
-@fontMain: #2c3e50;
-@background: #f5f7fb;
-@backgroundGray: #ebeff7;
+@fontMain: #fff;
+@fontSub: #737aae;
+@background: #25294a;
+@backgroundLight: #2d325a;
 
-@mainColor: @primary-color;
+@mainColor: #4e7cff;
 @subColor: #47c3e9;
 @tinyColor: #e3fdfc;
 
-@pink: #ed4014;
-@hoverPink: #ec9182;
+@pink: #f65164;
+@hoverPink: #fe697a;
+
+@purple: #7033ff;
+
+@blue: #22c0ff;
 
 @dark: #4f535c;
 @midDark: #777d8a;

src/background.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { app, protocol, BrowserWindow, dialog, Menu } from "electron";
+import { app, protocol, BrowserWindow, dialog, Menu, ipcMain } from "electron";
 import {
   createProtocol
   /* installVueDevtools */
@@ -10,7 +10,6 @@ const isDevelopment = process.env.NODE_ENV !== "production";
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win;
-let mainWindowCanClose = false;
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
@@ -24,6 +23,7 @@ function createWindow() {
     height: 600,
     minWidth: 800,
     minHeight: 600,
+    frame: process.env.NODE_ENV === "development",
     webPreferences: {
       nodeIntegration: true,
       webSecurity: false
@@ -43,26 +43,16 @@ function createWindow() {
   win.on("closed", () => {
     win = null;
   });
-  win.on("close", e => {
-    if (mainWindowCanClose) return;
-    e.preventDefault();
-    const options = {
-      type: "info",
-      title: "操作提示",
-      buttons: ["ok", "cancel"],
-      cancelId: 1,
-      message: "请确保当前窗口没有任务正在进行，确认要关闭当前窗口吗？"
-    };
-    dialog.showMessageBox(win, options, function(data) {
-      if (!data) {
-        mainWindowCanClose = true;
-        app.quit();
-      }
-    });
-    e.returnValue = false;
-  });
 }
 
+ipcMain.on("close-window", () => {
+  app.quit();
+});
+
+ipcMain.on("minimize-window", () => {
+  win.minimize();
+});
+
 // Quit when all windows are closed.
 app.on("window-all-closed", () => {
   // On macOS it is common for applications and their menu bar

src/main.js

@@ -12,8 +12,8 @@ import CONFIG from "./config";
 import VueLocalStorage from "vue-ls";
 import ViewUI from "view-design";
 // import "view-design/dist/styles/iview.css";
-import "./assets/styles/index.less";
 import "cropperjs/dist/cropper.min.css";
+import "./assets/styles/index.less";
 
 import { initConfigData } from "@/plugins/env";
 

src/modules/client/components/ScanAreaSteps.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="scan-area-steps">
+    <div class="part-head">
+      <h2>{{ currentComponentTitle }}</h2>
+    </div>
     <div class="step-body">
       <component
         :is="currentComponent"
@@ -14,13 +17,19 @@
     <div class="step-ctrl">
       <Button
         type="primary"
+        size="large"
         @click="prevStep"
         v-if="!isFirstStep"
         style="margin-right: 20px;"
       >
         上一步
       </Button>
-      <Button type="primary" @click="nextStep" :disabled="nextHolder">
+      <Button
+        type="primary"
+        size="large"
+        @click="nextStep"
+        :disabled="nextHolder"
+      >
         {{ isLastStep ? "完成" : "下一步" }}
       </Button>
     </div>
@@ -41,15 +50,15 @@ const STEPS_LIST = [
   },
   {
     name: "cover-area",
-    title: "覆盖区域"
+    title: "信息覆盖区域设置"
   },
   {
     name: "tailor-area",
-    title: "裁剪区域"
+    title: "切图设置"
   },
   {
     name: "image-orientation",
-    title: "试卷方向"
+    title: "图片方向设置"
   }
 ];
 
@@ -84,6 +93,9 @@ export default {
     currentComponent() {
       return this.STEPS_LIST[this.current].name;
     },
+    currentComponentTitle() {
+      return this.STEPS_LIST[this.current].title;
+    },
     isFirstStep() {
       return this.current === 0;
     },

src/modules/client/components/steps/CodeArea.vue

@@ -1,28 +1,21 @@
 <template>
   <div class="code-area">
-    <div class="part-head">
-      <h2>条码识别区域设置</h2>
+    <div class="code-area-cont">
+      <img :src="imageUrl" ref="editImage" />
     </div>
-    <div class="code-area-main">
-      <div class="code-area-cont">
-        <img :src="imageUrl" ref="editImage" />
-      </div>
-      <div class="code-area-preview">
-        <div class="code-area-spin">
-          <div
-            class="code-area-spin-img"
-            :style="spinStyle"
-            ref="CodeAreaSpinImg"
-          ></div>
-        </div>
+    <div class="code-area-preview">
+      <div class="code-area-spin">
         <div
-          class="code-area-icon"
-          title="顺时针旋转90度"
-          @click="toRotateSpin"
-        >
-          <i class="icon icon-right-rotate"></i>
-        </div>
+          class="code-area-spin-img"
+          :style="spinStyle"
+          ref="CodeAreaSpinImg"
+        ></div>
       </div>
+      <div
+        class="code-area-icon rotate-icon rotate-icon-right"
+        title="顺时针旋转90度"
+        @click="toRotateSpin"
+      ></div>
     </div>
   </div>
 </template>

src/modules/client/components/steps/CoverArea.vue

@@ -1,16 +1,11 @@
 <template>
   <div class="cover-area">
-    <div class="part-head">
-      <h2>覆盖区域设置</h2>
+    <div class="code-area-cont">
+      <img :src="imageUrl" ref="editImage" />
     </div>
-    <div class="code-area-main">
-      <div class="code-area-cont">
-        <img :src="imageUrl" ref="editImage" />
-      </div>
-      <div class="code-area-preview">
-        <div class="code-area-spin">
-          <div class="code-area-spin-img" ref="CoverAreaSpinImg"></div>
-        </div>
+    <div class="code-area-preview">
+      <div class="code-area-spin">
+        <div class="code-area-spin-img" ref="CoverAreaSpinImg"></div>
       </div>
     </div>
   </div>

src/modules/client/components/steps/ImageOrientation.vue

@@ -1,41 +1,24 @@
 <template>
   <div class="image-orientation">
-    <div class="part-head">
-      <h2>图片方向设置</h2>
+    <div class="image-orient-cont">
+      <img
+        class="img-contain"
+        :src="imageUrl"
+        :style="contStyle"
+        ref="editImage"
+      />
     </div>
-    <div class="image-orient-main">
-      <div class="image-orient-cont">
-        <img
-          :src="imageUrl"
-          :style="contStyle"
-          ref="editImage"
-          @load="imageLoad"
-        />
-      </div>
-      <div class="image-cover-box" :style="coverBoxStyle">
-        <div
-          class="image-cover-item"
-          v-for="(item, index) in coverItems"
-          :key="index"
-          :style="item"
-        ></div>
-      </div>
-      <div class="image-orient-btns">
-        <div
-          class="image-orient-icon"
-          title="逆时针旋转90度"
-          @click="toRotate(0)"
-        >
-          <i class="icon icon-left-rotate"></i>
-        </div>
-        <div
-          class="image-orient-icon"
-          title="顺时针旋转90度"
-          @click="toRotate(1)"
-        >
-          <i class="icon icon-right-rotate"></i>
-        </div>
-      </div>
+    <div class="image-orient-btns">
+      <div
+        class="image-orient-icon rotate-icon rotate-icon-left"
+        title="逆时针旋转90度"
+        @click="toRotate(0)"
+      ></div>
+      <div
+        class="image-orient-icon rotate-icon rotate-icon-right"
+        title="顺时针旋转90度"
+        @click="toRotate(1)"
+      ></div>
     </div>
   </div>
 </template>
@@ -58,9 +41,7 @@ export default {
   data() {
     return {
       contStyle: {},
-      picRotate: 0,
-      coverItems: [],
-      coverBoxStyle: {}
+      picRotate: 0
     };
   },
   mounted() {
@@ -68,7 +49,7 @@ export default {
       (this.curSetting && this.curSetting.imageRotate) || 0;
     this.picRotate = defImageRotate;
     this.contStyle = {
-      transform: `translate(-50%, -50%) rotate(${this.picRotate}deg)`
+      transform: `rotate(${this.picRotate}deg)`
     };
     this.$emit("on-ready");
   },
@@ -83,74 +64,10 @@ export default {
       }
 
       this.contStyle = {
-        transform: `translate(-50%, -50%) rotate(${this.picRotate}deg)`
+        transform: `rotate(${this.picRotate}deg)`
       };
       this.coverBoxStyle.transform = this.contStyle.transform;
     },
-    imageLoad() {
-      const imgDom = this.$refs.editImage;
-      const rate = imgDom.clientWidth / imgDom.naturalWidth;
-
-      this.coverBoxStyle = {
-        width: imgDom.clientWidth + "px",
-        height: imgDom.clientHeight + "px",
-        transform: this.contStyle.transform
-      };
-      const codeAreaSize = this.transformSize(this.curSetting.codeArea, rate);
-      this.coverItems.push({
-        width: codeAreaSize.width,
-        height: codeAreaSize.height,
-        top: codeAreaSize.y,
-        left: codeAreaSize.x
-      });
-      const coverAreaSize = this.transformSize(this.curSetting.coverArea, rate);
-      this.coverItems.push({
-        width: coverAreaSize.width,
-        height: coverAreaSize.height,
-        top: coverAreaSize.y,
-        left: coverAreaSize.x
-      });
-      this.getTailorCoverArea(imgDom).map(item => {
-        this.coverItems.push(this.transformSize(item, rate));
-      });
-    },
-    getTailorCoverArea(imgDom) {
-      const tailorArea = this.curSetting.tailorArea;
-      const { naturalWidth, naturalHeight } = imgDom;
-      return [
-        {
-          width: tailorArea.x,
-          height: naturalHeight,
-          top: 0,
-          left: 0
-        },
-        {
-          width: naturalWidth - tailorArea.x - tailorArea.width,
-          height: naturalHeight,
-          top: 0,
-          right: 0
-        },
-        {
-          width: naturalWidth,
-          height: tailorArea.y,
-          top: 0,
-          left: 0
-        },
-        {
-          width: naturalWidth,
-          height: naturalHeight - tailorArea.y - tailorArea.height,
-          bottom: 0,
-          left: 0
-        }
-      ];
-    },
-    transformSize(sizes, rate) {
-      let newSizes = {};
-      Object.keys(sizes).map(key => {
-        newSizes[key] = sizes[key] * rate + "px";
-      });
-      return newSizes;
-    },
     checkValid() {
       this.$emit("on-next", { imageRotate: this.picRotate });
     },

src/modules/client/components/steps/TailorArea.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="tailor-area">
-    <div class="part-head">
-      <h2>裁剪区域设置</h2>
-    </div>
-    <div class="code-area-main">
-      <div class="code-area-cont">
-        <img :src="imageUrl" ref="editImage" />
-      </div>
+    <div class="code-area-cont">
+      <img :src="imageUrl" ref="editImage" />
     </div>
   </div>
 </template>

src/modules/client/router.js

@@ -1,3 +1,4 @@
+import Subject from "./views/Subject.vue";
 import Camera from "./views/Camera.vue";
 import ScanArea from "./views/ScanArea.vue";
 import CheckInfo from "./views/CheckInfo.vue";
@@ -5,6 +6,11 @@ import GroupScan from "./views/GroupScan.vue";
 import LineScan from "./views/LineScan.vue";
 
 export default [
+  {
+    path: "/subject",
+    name: "Subject",
+    component: Subject
+  },
   {
     path: "/camera",
     name: "Camera",

src/modules/client/views/Camera.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="camera home-main">
+  <div class="camera part-box">
     <div class="part-head">
       <h2>获取相机编号</h2>
     </div>
@@ -25,20 +25,24 @@
             v-model.trim="modalForm.camera"
             placeholder="扫描相机编码"
             :key="2"
+            suffix="scan icon"
             autofocus
             v-code-input.prevent="{ inputOver }"
             v-else
           >
           </Input>
         </FormItem>
-        <div class="camera-write" @click="toHandInput">
-          <span>手工输入</span>
+        <div class="camera-write">
+          <Button
+            :type="canEdit ? 'primary' : 'default'"
+            icon="handle icon"
+            @click="toHandInput"
+            >手工输入</Button
+          >
         </div>
       </Form>
       <div class="camera-btn">
-        <i-button size="large" type="primary" long @click="submit"
-          >确认</i-button
-        >
+        <Button size="large" type="primary" long @click="submit">下一步</Button>
       </div>
     </div>
   </div>
@@ -76,7 +80,7 @@ export default {
     },
     toHandInput() {
       this.modalForm.camera = "";
-      this.canEdit = true;
+      this.canEdit = !this.canEdit;
     },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate();

src/modules/client/views/CheckInfo.vue

@@ -1,46 +1,59 @@
 <template>
-  <div class="check-info home-main">
+  <div class="check-info part-box">
     <div class="part-head">
-      <h2>请核对试卷信息</h2>
+      <h2>核对试卷信息</h2>
     </div>
     <div class="check-form">
       <Form
         ref="modalFormComp"
         :model="modalForm"
         :rules="rules"
-        :label-width="100"
+        :label-width="0"
       >
-        <FormItem prop="level" label="档位">
-          <Select v-model="modalForm.level">
+        <FormItem prop="level">
+          <Select
+            v-model="modalForm.level"
+            prefix="menu icon"
+            placeholder="请选择档位"
+          >
             <Option
               v-for="(level, lindex) in levels"
               :key="lindex"
               :value="level.name"
-              >{{ level.name }}</Option
+              >{{ level.name }}档</Option
             >
           </Select>
         </FormItem>
       </Form>
     </div>
     <div class="check-action">
-      <Button type="primary" @click="save">下一步</Button>
+      <Button size="large" type="primary" @click="save">下一步</Button>
     </div>
-
+    <!-- confirm modal -->
     <Modal
       class="modify-data"
       v-model="modalIsShow"
       title="确认试卷信息"
+      :width="490"
       :mask-closable="false"
+      :closable="false"
+      :mask="false"
     >
-      <Form :label-width="100">
-        <FormItem label="科目："> {{ curSubject.name }}</FormItem>
-        <FormItem label="档位：">
-          {{ modalForm.level }}
-        </FormItem>
-      </Form>
+      <div class="check-result">
+        <div class="check-result-item">
+          <i class="check-result-icon icon ivu-icon-subject"></i>
+          <h4>科目</h4>
+          <p>{{ curSubject.name }}</p>
+        </div>
+        <div class="check-result-item">
+          <i class="check-result-icon icon ivu-icon-level"></i>
+          <h4>档位</h4>
+          <p>{{ modalForm.level }}</p>
+        </div>
+      </div>
       <div slot="footer">
         <Button type="primary" @click="confirm">确认</Button>
-        <Button type="text" @click="modalIsShow = false">取消</Button>
+        <Button @click="modalIsShow = false">取消</Button>
       </div>
     </Modal>
   </div>
@@ -56,7 +69,7 @@ export default {
     return {
       modalIsShow: false,
       modalForm: {
-        level: ""
+        level: "1"
       },
       rules: {
         level: [
@@ -71,6 +84,14 @@ export default {
         {
           id: 1,
           name: "A"
+        },
+        {
+          id: 2,
+          name: "B"
+        },
+        {
+          id: 3,
+          name: "C"
         }
       ]
     };
@@ -83,7 +104,7 @@ export default {
   },
   mounted() {
     this.modalForm.level = this.curLevel;
-    // this.getLevels()
+    this.getLevels();
   },
   methods: {
     ...mapMutations("client", ["setCurLevel"]),

src/modules/client/views/GroupScan.vue

@@ -5,6 +5,9 @@
       id="task-list"
       v-if="studentSerialList.length"
     >
+      <div class="scan-back">
+        <Button @click="goback">返回</Button>
+      </div>
       <div
         v-for="(student, index) in studentSerialList"
         :key="index"
@@ -16,8 +19,16 @@
           }
         ]"
       >
-        <span>{{ student.name }}</span>
-        <span>{{ student.examNumber }}</span>
+        <div class="task-item-icon">
+          <i
+            :class="[
+              'icon',
+              student.isClient ? 'ivu-icon-user-act' : 'ivu-icon-user-gray'
+            ]"
+          ></i>
+        </div>
+        <p>{{ student.name }}</p>
+        <p>{{ student.examNumber }}</p>
       </div>
       <div class="scan-task-action">
         <Button type="primary" @click="scanOver" :disabled="holding"
@@ -35,34 +46,35 @@
         <img class="img-contain" :src="curImage.url" :alt="curImage.name" />
       </div>
       <div class="scan-info">
-        <p>
+        <p class="scan-info-cont scan-info-scan">
           <span>已采集：</span>
           <span>{{ scanNo }}</span>
-          <span>，</span>
+        </p>
+        <p class="scan-info-cont scan-info-upload">
           <span>未上传：</span>
           <span>{{ unuploadNo }}</span>
         </p>
         <p>
-          <Button type="error" @click="resetStartCountTime">清零</Button>
+          <Button @click="resetStartCountTime">清零</Button>
         </p>
+        <div class="scan-reset-area">
+          <Button type="primary" @click="toResetArea">重新设置采集信息</Button>
+        </div>
       </div>
     </div>
     <div class="scan-history">
-      <div class="scan-reset-area">
-        <Button type="primary" @click="toResetArea">重新设置采集信息</Button>
-      </div>
       <div
         class="history-item"
         v-for="(task, tindex) in historyList"
         :key="tindex"
       >
+        <div class="history-item-body">
+          <img :src="task.formalImgPath" :alt="task.name" />
+        </div>
         <p class="history-item-title">
           <span>{{ task.name }}</span
           ><span>{{ task.examNumber }}</span>
         </p>
-        <div class="history-item-body">
-          <img :src="task.formalImgPath" :alt="task.name" />
-        </div>
       </div>
     </div>
 

src/modules/client/views/ScanArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scan-area home-main">
+  <div class="scan-area part-box">
     <scan-area-steps
       :image-url="curImage.url"
       :cur-setting="curSetting"
@@ -30,9 +30,6 @@ export default {
         name: ""
       },
       curSetting: {},
-      config: {
-        packageScan: true
-      },
       setT: ""
     };
   },

src/modules/client/views/Subject.vue

@@ -1,25 +1,19 @@
 <template>
-  <div class="subject">
-    <div class="login-home">
-      <h1 class="login-title">科目选择</h1>
-      <div class="subject-list">
-        <ul>
-          <li
-            v-for="(item, index) in subjects"
-            :key="index"
-            @click="selectSubject(item)"
-          >
-            <span>{{ item.name }}</span>
-          </li>
-        </ul>
-      </div>
+  <div class="subject part-box">
+    <div class="part-head">
+      <h2>选择科目</h2>
     </div>
-
-    <div
-      style="position:fixed;width:30px;height:30px;bottom: 20px;right: 20px;z-index:999;"
-      @click="$router.push({ name: 'Login' })"
-    >
-      login
+    <div class="subject-list">
+      <ul>
+        <li
+          v-for="(item, index) in subjects"
+          :key="index"
+          @click="selectSubject(item)"
+        >
+          <span class="subject-name">{{ item.name }}</span>
+          <span class="subject-icon"></span>
+        </li>
+      </ul>
     </div>
   </div>
 </template>

src/router.js

@@ -3,7 +3,6 @@ import Router from "vue-router";
 
 import Home from "./views/Home";
 import Login from "./views/Login";
-import Subject from "./modules/client/views/Subject.vue";
 // modules
 import client from "./modules/client/router";
 
@@ -27,11 +26,6 @@ export default new Router({
       name: "Login",
       component: Login
     },
-    {
-      path: "/subject",
-      name: "Subject",
-      component: Subject
-    },
     {
       path: "/home",
       name: "Home",

src/views/Home.vue

@@ -2,20 +2,27 @@
   <div class="home">
     <div class="home-header">
       <div class="head-back">
-        <i-button type="default" @click="toBack"
-          ><i class="icon icon-left"></i>返回</i-button
-        >
+        <Button type="default" @click="toBack">返回</Button>
       </div>
-      <div class="head-user">
-        <span class="user-name"
-          ><Icon type="md-person" size="16" /> {{ username }}</span
+      <div class="head-actions">
+        <span class="action-icon" title="最小化" @click="minWin"
+          ><Icon type="md-remove" size="16"
+        /></span>
+        <span class="action-icon" title="关闭" @click="close"
+          ><Icon type="md-close" size="16"
+        /></span>
+        <span
+          class="action-icon action-logout"
+          @click="logout"
+          title="退出"
+          v-if="isDev"
         >
-        <span class="user-logout" @click="logout">
-          <Icon type="md-power" size="20" />
+          <Icon type="md-power" size="16" />
         </span>
       </div>
       <div class="head-info">
         <span>{{ examName }}</span>
+        <span v-if="curSubject && curSubject.name"></span>
         <span>{{ curSubject.name }}</span>
       </div>
     </div>
@@ -27,7 +34,8 @@
 
 <script>
 import uploadTaskMixin from "../mixins/uploadTaskMixin";
-import { mapState } from "vuex";
+import { mapState, mapMutations } from "vuex";
+const { ipcRenderer } = require("electron");
 
 export default {
   name: "home",
@@ -36,8 +44,10 @@ export default {
     return {
       showProgress: false,
       examName: "",
+      isDev: process.env.NODE_ENV === "development",
       // 路由历史只前进，不后退
       backRouters: {
+        Subject: "Login",
         Camera: "Subject",
         ScanArea: "Camera",
         CheckInfo: "ScanArea",
@@ -47,10 +57,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("client", ["curSubject", "clientConfig"]),
-    username() {
-      return this.$store.state.user.name;
-    }
+    ...mapState("client", ["curSubject", "clientConfig"])
   },
   created() {
     this.examName = this.$ls.get("user", { examName: "" }).examName;
@@ -60,8 +67,10 @@ export default {
     this.backRouters.GroupScan = scanBackRouter;
     this.backRouters.LineScan = scanBackRouter;
     this.initUploadTask();
+    this.setCurSubject({});
   },
   methods: {
+    ...mapMutations("client", ["setCurSubject"]),
     logout() {
       this.$ls.clear();
       this.$router.push({ name: "Login" });
@@ -80,6 +89,18 @@ export default {
       } else {
         this.$router.push({ name: backRouter });
       }
+    },
+    minWin() {
+      ipcRenderer.send("minimize-window");
+    },
+    close() {
+      this.$Modal.confirm({
+        title: "操作警告",
+        content: "请确保当前窗口没有任务正在进行，确认要关闭当前窗口吗？",
+        onOk: () => {
+          ipcRenderer.send("close-window");
+        }
+      });
     }
   },
   beforeDestroy() {

src/views/Login.vue

@@ -1,37 +1,51 @@
 <template>
   <div class="login">
-    <div class="login-home">
+    <div class="login-header home-header">
+      <div class="head-actions">
+        <span class="action-icon" title="最小化" @click="minWin"
+          ><Icon type="md-remove" size="16"
+        /></span>
+        <span class="action-icon" title="关闭" @click="close"
+          ><Icon type="md-close" size="16"
+        /></span>
+      </div>
+    </div>
+    <div class="login-body">
       <div class="login-title">
         <h1>美术阅卷系统登录</h1>
       </div>
-      <div class="login-box">
-        <h2>欢迎登录</h2>
-        <div class="login-form">
-          <Form ref="loginForm" :model="loginModel" :rules="loginRules">
-            <FormItem prop="loginname">
-              <Input
-                v-model.trim="loginModel.loginname"
-                prefix="md-person"
-                placeholder="请输入用户名"
-                clearable
-              ></Input>
-            </FormItem>
-            <FormItem prop="password">
-              <Input
-                type="password"
-                v-model.trim="loginModel.password"
-                prefix="md-lock"
-                placeholder="请输入密码"
-                clearable
-              ></Input>
-            </FormItem>
-            <FormItem>
-              <Button long type="primary" :disabled="isSubmit" @click="submit"
-                >登录</Button
-              >
-            </FormItem>
-          </Form>
-        </div>
+      <div class="login-form">
+        <Form ref="loginForm" :model="loginModel" :rules="loginRules">
+          <FormItem prop="loginname">
+            <Input
+              size="large"
+              v-model.trim="loginModel.loginname"
+              prefix="md-person"
+              placeholder="请输入用户名"
+              clearable
+            ></Input>
+          </FormItem>
+          <FormItem prop="password">
+            <Input
+              size="large"
+              type="password"
+              v-model.trim="loginModel.password"
+              prefix="md-lock"
+              placeholder="请输入密码"
+              clearable
+            ></Input>
+          </FormItem>
+          <FormItem style="margin-top:54px;">
+            <Button
+              size="large"
+              type="primary"
+              :disabled="isSubmit"
+              @click="submit"
+              style="width: 120px"
+              >登录</Button
+            >
+          </FormItem>
+        </Form>
       </div>
     </div>
   </div>
@@ -42,6 +56,7 @@ import { username, password } from "@/plugins/formRules";
 import initStoreMixin from "../mixins/initStoreMixin";
 import { formatDate } from "../plugins/utils";
 import { $get } from "@/plugins/axios";
+const { ipcRenderer } = require("electron");
 
 export default {
   name: "login",
@@ -63,10 +78,11 @@ export default {
     this.$ls.clear();
   },
   methods: {
-    submit1() {
-      this.$router.push({
-        name: "Subject"
-      });
+    minWin() {
+      ipcRenderer.send("minimize-window");
+    },
+    close() {
+      ipcRenderer.send("close-window");
     },
     async submit(name) {
       const valid = await this.$refs.loginForm.validate();
@@ -98,7 +114,7 @@ export default {
         // imageEncrypt: data.paramSetting.imageEncrypt,
         packageScan: !data.paramSetting.packageScan,
         // packageScan: data.paramSetting.packageScan,
-        paperStage: data.paramSetting.paperStage
+        paperStage: !data.paramSetting.paperStage
       });
       this.$router.push({
         name: "Subject"