feat: 图片放大以及填充模式设置

package.json

@@ -1,6 +1,6 @@
 {
   "name": "msyj-admin",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "scripts": {
     "start": "npm run serve",
     "serve": "vue-cli-service serve",

src/assets/styles/common-component.less

@@ -62,6 +62,7 @@
     > img {
       display: block;
       width: 100%;
+      user-select: none;
     }
   }
   &-guide {

src/assets/styles/marker.less

@@ -1,954 +1,964 @@
-.marker-grading {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: auto;
-  color: @color-text;
-}
-// marker-header
-.marker-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 9;
-
-  .header-main {
-    height: 40px;
-    padding: 5px 0;
-    line-height: 30px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: @color-background-light;
-  }
-
-  .header-part {
-    display: inline-block;
-    vertical-align: top;
-    padding: 0 15px;
-    margin-left: 10px;
-    background: @color-background;
-    border-radius: 5px;
-    cursor: pointer;
-    &:hover {
-      background-color: shade(@color-background, 20%);
-      color: @color-text-act;
-    }
-  }
-  .header-page {
-    .page-total {
-      display: inline-block;
-      vertical-align: middle;
-      margin: 0 5px;
-    }
-
-    .page-item {
-      display: inline-block;
-      vertical-align: middle;
-      margin: 0 2px;
-      min-width: 24px;
-      height: 24px;
-      line-height: 24px;
-      text-align: center;
-      background-color: @color-background;
-      border-radius: 2px;
-      cursor: pointer;
-      &:hover {
-        background-color: shade(@color-background, 20%);
-      }
-    }
-    .page-cpage {
-      padding: 0 5px;
-      span {
-        margin: 0 1px;
-      }
-    }
-    .page-size {
-      padding: 0 10px;
-    }
-  }
-  .header-step {
-    color: @color-text-act;
-  }
-  .header-selection {
-    padding: 0;
-    background-color: transparent;
-
-    &:hover {
-      background-color: transparent;
-    }
-
-    .image-checkbox {
-      display: inline-block;
-      vertical-align: middle;
-      height: 20px;
-      width: 20px;
-      margin-right: 2px;
-      border-radius: 5px;
-      background-color: @color-background;
-      color: @color-text-act;
-      font-size: 14px;
-      text-align: center;
-      line-height: 20px;
-      cursor: pointer;
-
-      &:hover,
-      &.image-selected {
-        box-shadow: 0 0 3px inset @color-background-light;
-      }
-    }
-  }
-  .header-history {
-    margin-right: 10px;
-  }
-  .header-user {
-    display: inline-block;
-    vertical-align: top;
-    width: 281px;
-    border-left: 1px solid @color-background;
-    margin: -5px 0;
-    padding: 5px 10px;
-
-    .ivu-dropdown {
-      display: block;
-    }
-
-    .user-name {
-      background: @color-background;
-      border-radius: 15px;
-      padding: 0 15px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: pointer;
-      > i {
-        color: #bec3d1;
-        &:last-child {
-          display: block;
-          float: right;
-          margin-top: 8px;
-        }
-      }
-      &:hover {
-        background-color: shade(@color-background, 20%);
-        color: @color-text-act;
-      }
-    }
-  }
-
-  .fast-nav {
-    padding: 4px 10px 5px;
-    background-color: @color-background-light;
-    margin-right: 280px;
-    border-top: 1px solid @color-background-light2;
-    border-right: 1px solid @color-background;
-    text-align: center;
-
-    &-list {
-      font-size: 0;
-      white-space: nowrap;
-      height: 32px;
-      overflow-y: hidden;
-      overflow-x: auto;
-    }
-
-    &-item {
-      display: inline-block;
-      vertical-align: middle;
-      min-width: 30px;
-      text-align: center;
-      padding: 0 8px;
-      border-radius: 5px;
-      height: 30px;
-      line-height: 30px;
-      margin: 0 5px;
-      background: @color-background;
-      font-size: 14px;
-      cursor: pointer;
-
-      &.is-active,
-      &:hover {
-        background-color: @color-act1;
-        color: @color-text-act;
-      }
-
-      &.is-danger:hover {
-        background-color: @color-act2;
-      }
-    }
-
-    &-close {
-      border-radius: 50%;
-      padding: 0;
-      margin-left: 20px;
-    }
-  }
-}
-.header-step-dropdown {
-  .header-step-item {
-    > i {
-      color: @color-text-act;
-      &:last-child {
-        color: @color-text;
-      }
-    }
-  }
-}
-.header-filter-body {
-  .filter-part {
-    padding: 15px 0 7px;
-
-    &:not(:last-child) {
-      border-bottom: 1px dashed @color-text;
-    }
-
-    &-title {
-      line-height: 1;
-      margin-bottom: 10px;
-    }
-  }
-
-  .filter-select {
-    display: inline-block;
-    vertical-align: top;
-    width: 100px;
-    min-width: auto;
-    margin-right: 10px;
-    margin-bottom: 8px;
-  }
-  .filter-input {
-    display: inline-block;
-    vertical-align: top;
-    width: 150px;
-    margin-right: 10px;
-    margin-bottom: 8px;
-  }
-  .filter-btn {
-    display: inline-block;
-    vertical-align: top;
-    width: 60px;
-    height: 30px;
-  }
-  .filter-label {
-    display: inline-block;
-    vertical-align: top;
-    line-height: 32px;
-  }
-}
-// marker-page
-.marker-page {
-  &-set {
-    > * {
-      display: inline-block;
-      vertical-align: middle;
-    }
-    .ivu-input-number {
-      width: 80px;
-      min-width: 0;
-      border-color: @color-text;
-      background-color: @color-text-act;
-      input {
-        box-shadow: none;
-        background-color: @color-text-act;
-      }
-    }
-    > span:first-child {
-      width: 80px;
-      text-align: right;
-    }
-  }
-  &-btn {
-    height: 24px;
-    line-height: 24px;
-    padding: 0 10px;
-    background-color: @color-background-light;
-    border-radius: 5px;
-    margin-left: 5px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: @color-act1;
-      color: @color-text-act;
-    }
-  }
-}
-
-// .marker-body
-.marker-body {
-  position: absolute;
-  left: 0;
-  top: 40px;
-  right: 280px;
-  bottom: 0;
-  overflow: auto;
-  padding: 5px;
-  background: @color-background;
-  z-index: 7;
-
-  &-low {
-    top: 80px;
-  }
-}
-.marker-image-list {
-  height: 100%;
-
-  .marker-image-item {
-    display: inline-block;
-    vertical-align: top;
-    width: 25%;
-    height: 50%;
-    padding: 5px;
-    font-size: 0;
-
-    &-act {
-      .marker-image-content::before {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 20px;
-        height: 20px;
-        top: 0;
-        right: 0;
-        border-top-right-radius: 5px;
-        border-bottom-left-radius: 20px;
-        background-color: @color-act1;
-      }
-    }
-  }
-  .marker-image-content {
-    position: relative;
-    background-color: @color-background-light;
-    height: 100%;
-    padding: 10px;
-    border-radius: 5px;
-  }
-
-  &-1 {
-    .marker-image-item {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  &-2 {
-    .marker-image-item {
-      width: 50%;
-      height: 100%;
-    }
-  }
-  &-3 {
-    .marker-image-item {
-      width: 33.33%;
-      height: 100%;
-    }
-  }
-  &-4 {
-    .marker-image-item {
-      width: 50%;
-      height: 50%;
-    }
-  }
-  &-6 {
-    .marker-image-item {
-      width: 33.33%;
-      height: 50%;
-    }
-  }
-  &-8 {
-    .marker-image-item {
-      width: 25%;
-      height: 50%;
-    }
-  }
-  &-9 {
-    .marker-image-item {
-      width: 33.33%;
-      height: 33.33%;
-    }
-  }
-  &-10 {
-    .marker-image-item {
-      width: 20%;
-      height: 50%;
-    }
-  }
-  &-12 {
-    .marker-image-item {
-      width: 25%;
-      height: 33.33%;
-    }
-  }
-  &-15 {
-    .marker-image-item {
-      width: 20%;
-      height: 33.33%;
-    }
-  }
-  &-16 {
-    .marker-image-item {
-      width: 25%;
-      height: 25%;
-    }
-  }
-  &-20 {
-    .marker-image-item {
-      width: 20%;
-      height: 25%;
-    }
-  }
-  &-24 {
-    .marker-image-item {
-      width: 16.66%;
-      height: 25%;
-    }
-  }
-  &-25 {
-    .marker-image-item {
-      width: 20%;
-      height: 20%;
-    }
-  }
-}
-.marker-image-view {
-  position: relative;
-  height: 100%;
-  font-size: 14px;
-
-  .image-view-contain {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 36px;
-  }
-  .image-view-footer {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    left: 0;
-    height: 26px;
-    line-height: 26px;
-    padding: 0;
-    display: flex;
-    justify-content: space-between;
-  }
-  .image-info {
-    flex-grow: 0;
-    flex-shrink: 0;
-    > div {
-      display: inline-block;
-      vertical-align: top;
-    }
-  }
-  .image-sample {
-    height: 26px;
-    width: 26px;
-    border-radius: 5px;
-    background-color: @color-act1;
-    color: @color-text;
-    font-size: 16px;
-    text-align: center;
-    line-height: 26px;
-  }
-  .image-checkbox {
-    height: 26px;
-    width: 26px;
-
-    border-radius: 5px;
-    background-color: @color-background;
-    color: @color-text-act;
-    font-size: 20px;
-    text-align: center;
-    line-height: 26px;
-    cursor: pointer;
-
-    &:hover,
-    &.image-selected {
-      box-shadow: 0 0 3px inset @color-background-light;
-    }
-  }
-  .image-level {
-    height: 26px;
-    min-width: 26px;
-    margin-right: 5px;
-    border-radius: 5px;
-    background-color: @color-background;
-    font-size: 18px;
-    text-align: center;
-  }
-  .image-title {
-    height: 26px;
-    padding-left: 5px;
-    flex-grow: 2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
-    &:hover {
-      color: @color-text-act;
-    }
-  }
-  .image-action {
-    flex-grow: 0;
-    flex-shrink: 0;
-    .ivu-btn {
-      width: 26px;
-      height: 26px;
-      padding: 0;
-      font-size: 12px;
-      border-radius: 50%;
-      border: 0;
-      .ivu-icon {
-        color: @color-text-act;
-      }
-    }
-
-    &-li {
-      display: inline-block;
-      vertical-align: top;
-      margin-left: 5px;
-      height: 26px;
-      font-size: 26px;
-      cursor: pointer;
-
-      &:hover {
-        color: @color-text-act;
-      }
-      &.is-disabled {
-        color: tint(@color-text, 20%);
-        cursor: not-allowed;
-      }
-    }
-    .mark-act {
-      color: @warning-color;
-      &.is-disabled {
-        color: tint(@warning-color, 20%);
-        cursor: not-allowed;
-      }
-    }
-  }
-  .image-sn {
-    padding-left: 10px;
-    flex-grow: 2;
-    text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-.marker-image-none {
-  padding-top: 150px;
-  font-size: 16px;
-  text-align: center;
-  color: @color-text;
-}
-
-// marker-action
-.marker-action {
-  position: fixed;
-  width: 280px;
-  right: 0;
-  top: 0;
-  height: 100%;
-  z-index: 8;
-  padding: 60px 0 50px;
-  background-color: @color-background-light;
-  color: @color-text;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &-fullscreen {
-    z-index: 2000;
-  }
-
-  .grade-action {
-    padding: 0 10px;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .action-search {
-    border-top: 1px dashed @color-text;
-  }
-  .action-paper-state {
-    color: @color-text;
-    .paper-state-cont {
-      background: @color-background;
-    }
-  }
-
-  .action-paper-info {
-    color: @color-text;
-    span:last-child {
-      color: @color-text-act;
-    }
-  }
-  .action-grade-change {
-    background-color: @color-background;
-    color: @color-text;
-  }
-  .action-grade-info {
-    background-color: @color-act1;
-    color: @color-text;
-    &-title {
-      color: @color-text;
-    }
-    .grade-info-name {
-      color: @color-text-act;
-    }
-  }
-  .action-grade-item {
-    color: @color-text;
-
-    &-content {
-      background: @color-background;
-
-      &:hover {
-        background-color: @color-act1;
-        color: @color-text-act;
-      }
-    }
-  }
-  .action-item-content-disabled {
-    background: shade(@color-background-light, 30%) !important;
-    color: @color-background-light!important;
-  }
-  .action-grade-history {
-    .grade-history-item {
-      background-color: @color-background;
-      color: @color-text;
-
-      p:last-child {
-        background-color: @color-act1;
-        color: @color-text-act;
-      }
-    }
-  }
-  .action-grade-pass {
-    background: @color-background;
-    color: @color-text;
-
-    &:hover {
-      background-color: shade(@color-background, 20%);
-    }
-  }
-
-  // marking
-  .action-mark-item {
-    color: @color-text;
-
-    &-content {
-      background: @color-background;
-
-      &.is-active,
-      &:hover {
-        background-color: @color-act1;
-        color: @color-text-act;
-      }
-    }
-  }
-
-  // iview-ui
-  .ivu-btn-primary {
-    color: @color-text-act;
-    background-color: @color-act1;
-    border-color: @color-act1;
-
-    &:hover {
-      background-color: shade(@color-act1, 10%);
-      border-color: shade(@color-act1, 10%);
-    }
-  }
-  .ivu-input {
-    background-color: @color-background!important;
-    border-color: @color-background;
-    color: @color-text;
-    box-shadow: none !important;
-  }
-  .ivu-select-selection {
-    background-color: @color-background;
-    color: @color-text;
-    border-color: @color-background;
-  }
-  .ivu-select-dropdown {
-    background-color: @color-background;
-    color: @color-text;
-
-    .ivu-select-item {
-      color: @color-text;
-      border-top: 1px solid @color-background-light;
-      &:hover,
-      &-focus {
-        background-color: @color-act1;
-      }
-    }
-  }
-  .ivu-form .ivu-form-item-label {
-    color: @color-text;
-  }
-}
-.grade-ribbon {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 8;
-  padding: 10px;
-  background-color: #3d3f55;
-
-  .ribbon-list {
-    font-size: 0;
-    text-align: right;
-    height: 30px;
-  }
-
-  .ribbon-item {
-    display: inline-block;
-    vertical-align: middle;
-    text-align: center;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    font-size: 20px;
-    cursor: pointer;
-    transition: all linear 0.1s;
-
-    &:hover {
-      color: #bec3d1;
-      transform: scale(1.1, 1.1);
-    }
-  }
-}
-
-// marker-history
-.marker-history {
-  .image-view-footer {
-    color: @color-text;
-  }
-  .image-action-name {
-    height: 26px;
-    padding-left: 5px;
-  }
-  .ivu-modal {
-    width: 100% !important;
-    top: 0 !important;
-  }
-}
-.history-image-list {
-  height: 360px;
-
-  .marker-image-item {
-    width: 20%;
-    height: 100%;
-  }
-}
-// marker-standard
-.marker-standard {
-  .level-list {
-    text-align: center;
-    margin-bottom: 30px;
-  }
-  .level-item {
-    display: inline-block;
-    vertical-align: top;
-    width: 40px;
-    height: 26px;
-    line-height: 26px;
-    padding: 0 5px;
-    margin: 0 10px;
-    border-radius: 5px;
-    background-color: @color-background-light;
-    color: @color-text;
-    text-align: center;
-    cursor: pointer;
-    &:hover,
-    &-act {
-      color: @color-text-act;
-      background-color: @color-act1;
-    }
-  }
-  .standard-image-list {
-    height: auto;
-  }
-
-  .image-view-footer {
-    color: @color-text;
-  }
-  .marker-image-item {
-    width: 20%;
-    height: 300px;
-  }
-  .standard-image-none {
-    padding-top: 150px;
-    font-size: 16px;
-    text-align: center;
-    color: @color-text;
-  }
-}
-.change-standard {
-  .level-list {
-    margin-bottom: 50px;
-  }
-  .level-item {
-    display: inline-block;
-    vertical-align: top;
-    margin: 5px;
-    height: 30px;
-    line-height: 30px;
-    width: 40px;
-    text-align: center;
-    border-radius: 5px;
-    color: @color-text;
-    background-color: @color-background-light;
-    border-color: @color-background-light;
-    cursor: pointer;
-
-    &:hover,
-    &-act {
-      background-color: @color-act1;
-      border-color: @color-act1;
-    }
-
-    &-disabled {
-      cursor: not-allowed;
-      color: @color-text;
-      background-color: shade(@color-background-light, 20%) !important;
-    }
-  }
-}
-// marker-statistics
-.marker-statistics {
-  color: @color-text;
-  &-chart {
-    > h3 {
-      font-size: 16px;
-    }
-    .chart-box {
-      background-color: @color-background;
-    }
-  }
-}
-
-// leader-progress
-.leader-progress {
-  .ivu-modal {
-    width: 600px !important;
-  }
-  .progress-line {
-    color: @color-text;
-    background-color: tint(@color-background, 5%);
-
-    .progress-rate {
-      background-color: @color-act1;
-      color: @color-text-act;
-    }
-  }
-}
-// modify-leader-grading
-.marker-modal {
-  .leader-grading {
-    color: @color-text;
-    .leader-level {
-      h3 {
-        background-color: @color-background-light;
-        color: @color-text-act;
-      }
-    }
-    .leader-aciton {
-      color: @color-text;
-    }
-    .leader-markers {
-      background-color: @color-background-light;
-    }
-  }
-  .ivu-btn-primary {
-    .marker-btn-primary;
-  }
-  .ivu-radio-inner:after,
-  .ivu-checkbox-checked .ivu-checkbox-inner {
-    background-color: @color-act1;
-  }
-}
-
-// custom iview ui ----------------->
-// marker-modal
-.marker-modal {
-  color: @color-text;
-  .ivu-modal-mask {
-    background-color: rgba(55, 55, 55, 0.7);
-  }
-
-  .ivu-modal-content {
-    background-color: @color-background;
-    border-radius: 0;
-  }
-  .ivu-modal-header {
-    border-color: @color-background-light;
-    &-inner {
-      color: @color-text;
-      text-align: left;
-    }
-  }
-  .ivu-modal-body {
-    padding: 15px;
-  }
-}
-// marker-dropdown
-.marker-dropdown {
-  background-color: @color-background;
-  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
-
-  .ivu-dropdown-item {
-    margin-top: 0;
-    color: @color-text;
-    border-top: 1px solid @color-background-light;
-    &:hover {
-      background-color: @color-act1;
-    }
-  }
-}
-// marker-popper
-.marker-popper {
-  &.ivu-poptip-popper {
-    .ivu-poptip-arrow {
-      border-bottom-color: @color-act1;
-      &::after {
-        border-bottom-color: @color-act1;
-      }
-    }
-  }
-  .ivu-poptip-inner {
-    background-color: @color-background;
-    color: @color-text;
-
-    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
-  }
-}
-// btn
-.marker-btn-primary {
-  color: @color-text-act;
-  background-color: @color-act1;
-  border-color: @color-act1;
-
-  &:hover {
-    background-color: shade(@color-act1, 10%);
-    border-color: shade(@color-act1, 10%);
-  }
-}
-
-.ribbon-set-dialog {
-  .ribbon-set-form {
-    padding-bottom: 30px;
-  }
-  .ivu-form-item {
-    margin-bottom: 5px;
-  }
-  .ivu-form-item-label {
-    color: #9d9c9c;
-  }
-  .ivu-switch-checked {
-    border-color: @color-act1;
-    background-color: @color-act1;
-  }
-}
+.marker-grading {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: auto;
+  color: @color-text;
+}
+// marker-header
+.marker-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9;
+
+  .header-main {
+    height: 40px;
+    padding: 5px 0;
+    line-height: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: @color-background-light;
+  }
+
+  .header-part {
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 15px;
+    margin-left: 10px;
+    background: @color-background;
+    border-radius: 5px;
+    cursor: pointer;
+    &:hover {
+      background-color: shade(@color-background, 20%);
+      color: @color-text-act;
+    }
+  }
+  .header-page {
+    .page-total {
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 5px;
+    }
+
+    .page-item {
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 2px;
+      min-width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background-color: @color-background;
+      border-radius: 2px;
+      cursor: pointer;
+      &:hover {
+        background-color: shade(@color-background, 20%);
+      }
+    }
+    .page-cpage {
+      padding: 0 5px;
+      span {
+        margin: 0 1px;
+      }
+    }
+    .page-size {
+      padding: 0 10px;
+    }
+  }
+  .header-step {
+    color: @color-text-act;
+  }
+  .header-selection {
+    padding: 0;
+    background-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    .image-checkbox {
+      display: inline-block;
+      vertical-align: middle;
+      height: 20px;
+      width: 20px;
+      margin-right: 2px;
+      border-radius: 5px;
+      background-color: @color-background;
+      color: @color-text-act;
+      font-size: 14px;
+      text-align: center;
+      line-height: 20px;
+      cursor: pointer;
+
+      &:hover,
+      &.image-selected {
+        box-shadow: 0 0 3px inset @color-background-light;
+      }
+    }
+  }
+  .header-history {
+    margin-right: 10px;
+  }
+  .header-user {
+    display: inline-block;
+    vertical-align: top;
+    width: 281px;
+    border-left: 1px solid @color-background;
+    margin: -5px 0;
+    padding: 5px 10px;
+
+    .ivu-dropdown {
+      display: block;
+    }
+
+    .user-name {
+      background: @color-background;
+      border-radius: 15px;
+      padding: 0 15px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+      > i {
+        color: #bec3d1;
+        &:last-child {
+          display: block;
+          float: right;
+          margin-top: 8px;
+        }
+      }
+      &:hover {
+        background-color: shade(@color-background, 20%);
+        color: @color-text-act;
+      }
+    }
+  }
+
+  .fast-nav {
+    padding: 4px 10px 5px;
+    background-color: @color-background-light;
+    margin-right: 280px;
+    border-top: 1px solid @color-background-light2;
+    border-right: 1px solid @color-background;
+    text-align: center;
+
+    &-list {
+      font-size: 0;
+      white-space: nowrap;
+      height: 32px;
+      overflow-y: hidden;
+      overflow-x: auto;
+    }
+
+    &-item {
+      display: inline-block;
+      vertical-align: middle;
+      min-width: 30px;
+      text-align: center;
+      padding: 0 8px;
+      border-radius: 5px;
+      height: 30px;
+      line-height: 30px;
+      margin: 0 5px;
+      background: @color-background;
+      font-size: 14px;
+      cursor: pointer;
+
+      &.is-active,
+      &:hover {
+        background-color: @color-act1;
+        color: @color-text-act;
+      }
+
+      &.is-danger:hover {
+        background-color: @color-act2;
+      }
+    }
+
+    &-close {
+      border-radius: 50%;
+      padding: 0;
+      margin-left: 20px;
+    }
+  }
+}
+.header-step-dropdown {
+  .header-step-item {
+    > i {
+      color: @color-text-act;
+      &:last-child {
+        color: @color-text;
+      }
+    }
+  }
+}
+.header-filter-body {
+  .filter-part {
+    padding: 15px 0 7px;
+
+    &:not(:last-child) {
+      border-bottom: 1px dashed @color-text;
+    }
+
+    &-title {
+      line-height: 1;
+      margin-bottom: 10px;
+    }
+  }
+
+  .filter-select {
+    display: inline-block;
+    vertical-align: top;
+    width: 100px;
+    min-width: auto;
+    margin-right: 10px;
+    margin-bottom: 8px;
+  }
+  .filter-input {
+    display: inline-block;
+    vertical-align: top;
+    width: 150px;
+    margin-right: 10px;
+    margin-bottom: 8px;
+  }
+  .filter-btn {
+    display: inline-block;
+    vertical-align: top;
+    width: 60px;
+    height: 30px;
+  }
+  .filter-label {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 32px;
+  }
+}
+// marker-page
+.marker-page {
+  &-set {
+    > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    .ivu-input-number {
+      width: 80px;
+      min-width: 0;
+      border-color: @color-text;
+      background-color: @color-text-act;
+      input {
+        box-shadow: none;
+        background-color: @color-text-act;
+      }
+    }
+    > span:first-child {
+      width: 80px;
+      text-align: right;
+    }
+  }
+  &-btn {
+    height: 24px;
+    line-height: 24px;
+    padding: 0 10px;
+    background-color: @color-background-light;
+    border-radius: 5px;
+    margin-left: 5px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: @color-act1;
+      color: @color-text-act;
+    }
+  }
+}
+
+// .marker-body
+.marker-body {
+  position: absolute;
+  left: 0;
+  top: 40px;
+  right: 280px;
+  bottom: 0;
+  overflow: auto;
+  padding: 5px;
+  background: @color-background;
+  z-index: 7;
+
+  &-low {
+    top: 80px;
+  }
+}
+.marker-image-list {
+  height: 100%;
+
+  .marker-image-item {
+    display: inline-block;
+    vertical-align: top;
+    width: 25%;
+    height: 50%;
+    padding: 5px;
+    font-size: 0;
+
+    &-act {
+      .marker-image-content {
+        box-shadow: 0 0 0 3px @color-act1;
+      }
+      // .marker-image-content::before {
+      //   content: "";
+      //   display: block;
+      //   position: absolute;
+      //   width: 20px;
+      //   height: 20px;
+      //   top: 0;
+      //   right: 0;
+      //   border-top-right-radius: 5px;
+      //   border-bottom-left-radius: 20px;
+      //   background-color: @color-act1;
+      // }
+    }
+
+    &.is-multiple-selected {
+      .marker-image-content {
+        background-color: @color-act1;
+      }
+    }
+  }
+  .marker-image-content {
+    position: relative;
+    background-color: @color-background-light;
+    height: 100%;
+    padding: 10px;
+    border-radius: 5px;
+  }
+
+  &-1 {
+    .marker-image-item {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &-2 {
+    .marker-image-item {
+      width: 50%;
+      height: 100%;
+    }
+  }
+  &-3 {
+    .marker-image-item {
+      width: 33.33%;
+      height: 100%;
+    }
+  }
+  &-4 {
+    .marker-image-item {
+      width: 50%;
+      height: 50%;
+    }
+  }
+  &-6 {
+    .marker-image-item {
+      width: 33.33%;
+      height: 50%;
+    }
+  }
+  &-8 {
+    .marker-image-item {
+      width: 25%;
+      height: 50%;
+    }
+  }
+  &-9 {
+    .marker-image-item {
+      width: 33.33%;
+      height: 33.33%;
+    }
+  }
+  &-10 {
+    .marker-image-item {
+      width: 20%;
+      height: 50%;
+    }
+  }
+  &-12 {
+    .marker-image-item {
+      width: 25%;
+      height: 33.33%;
+    }
+  }
+  &-15 {
+    .marker-image-item {
+      width: 20%;
+      height: 33.33%;
+    }
+  }
+  &-16 {
+    .marker-image-item {
+      width: 25%;
+      height: 25%;
+    }
+  }
+  &-20 {
+    .marker-image-item {
+      width: 20%;
+      height: 25%;
+    }
+  }
+  &-24 {
+    .marker-image-item {
+      width: 16.66%;
+      height: 25%;
+    }
+  }
+  &-25 {
+    .marker-image-item {
+      width: 20%;
+      height: 20%;
+    }
+  }
+}
+.marker-image-view {
+  position: relative;
+  height: 100%;
+  font-size: 14px;
+
+  .image-view-contain {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 36px;
+    user-select: none;
+  }
+  .image-view-footer {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    height: 26px;
+    line-height: 26px;
+    padding: 0;
+    display: flex;
+    justify-content: space-between;
+  }
+  .image-info {
+    flex-grow: 0;
+    flex-shrink: 0;
+    > div {
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+  .image-sample {
+    height: 26px;
+    width: 26px;
+    border-radius: 5px;
+    background-color: @color-act1;
+    color: @color-text;
+    font-size: 16px;
+    text-align: center;
+    line-height: 26px;
+  }
+  .image-checkbox {
+    height: 26px;
+    width: 26px;
+
+    border-radius: 5px;
+    background-color: @color-background;
+    color: @color-text-act;
+    font-size: 20px;
+    text-align: center;
+    line-height: 26px;
+    cursor: pointer;
+
+    &:hover,
+    &.image-selected {
+      box-shadow: 0 0 3px inset @color-background-light;
+    }
+  }
+  .image-level {
+    height: 26px;
+    min-width: 26px;
+    margin-right: 5px;
+    border-radius: 5px;
+    background-color: @color-background;
+    font-size: 18px;
+    text-align: center;
+  }
+  .image-title {
+    height: 26px;
+    padding-left: 5px;
+    flex-grow: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    &:hover {
+      color: @color-text-act;
+    }
+  }
+  .image-action {
+    flex-grow: 0;
+    flex-shrink: 0;
+    .ivu-btn {
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      font-size: 12px;
+      border-radius: 50%;
+      border: 0;
+      .ivu-icon {
+        color: @color-text-act;
+      }
+    }
+
+    &-li {
+      display: inline-block;
+      vertical-align: top;
+      margin-left: 5px;
+      height: 26px;
+      font-size: 26px;
+      cursor: pointer;
+
+      &:hover {
+        color: @color-text-act;
+      }
+      &.is-disabled {
+        color: tint(@color-text, 20%);
+        cursor: not-allowed;
+      }
+    }
+    .mark-act {
+      color: @warning-color;
+      &.is-disabled {
+        color: tint(@warning-color, 20%);
+        cursor: not-allowed;
+      }
+    }
+  }
+  .image-sn {
+    padding-left: 10px;
+    flex-grow: 2;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.marker-image-none {
+  padding-top: 150px;
+  font-size: 16px;
+  text-align: center;
+  color: @color-text;
+}
+
+// marker-action
+.marker-action {
+  position: fixed;
+  width: 280px;
+  right: 0;
+  top: 0;
+  height: 100%;
+  z-index: 8;
+  padding: 60px 0 50px;
+  background-color: @color-background-light;
+  color: @color-text;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &-fullscreen {
+    z-index: 2000;
+  }
+
+  .grade-action {
+    padding: 0 10px;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .action-search {
+    border-top: 1px dashed @color-text;
+  }
+  .action-paper-state {
+    color: @color-text;
+    .paper-state-cont {
+      background: @color-background;
+    }
+  }
+
+  .action-paper-info {
+    color: @color-text;
+    span:last-child {
+      color: @color-text-act;
+    }
+  }
+  .action-grade-change {
+    background-color: @color-background;
+    color: @color-text;
+  }
+  .action-grade-info {
+    background-color: @color-act1;
+    color: @color-text;
+    &-title {
+      color: @color-text;
+    }
+    .grade-info-name {
+      color: @color-text-act;
+    }
+  }
+  .action-grade-item {
+    color: @color-text;
+
+    &-content {
+      background: @color-background;
+
+      &:hover {
+        background-color: @color-act1;
+        color: @color-text-act;
+      }
+    }
+  }
+  .action-item-content-disabled {
+    background: shade(@color-background-light, 30%) !important;
+    color: @color-background-light!important;
+  }
+  .action-grade-history {
+    .grade-history-item {
+      background-color: @color-background;
+      color: @color-text;
+
+      p:last-child {
+        background-color: @color-act1;
+        color: @color-text-act;
+      }
+    }
+  }
+  .action-grade-pass {
+    background: @color-background;
+    color: @color-text;
+
+    &:hover {
+      background-color: shade(@color-background, 20%);
+    }
+  }
+
+  // marking
+  .action-mark-item {
+    color: @color-text;
+
+    &-content {
+      background: @color-background;
+
+      &.is-active,
+      &:hover {
+        background-color: @color-act1;
+        color: @color-text-act;
+      }
+    }
+  }
+
+  // iview-ui
+  .ivu-btn-primary {
+    color: @color-text-act;
+    background-color: @color-act1;
+    border-color: @color-act1;
+
+    &:hover {
+      background-color: shade(@color-act1, 10%);
+      border-color: shade(@color-act1, 10%);
+    }
+  }
+  .ivu-input {
+    background-color: @color-background!important;
+    border-color: @color-background;
+    color: @color-text;
+    box-shadow: none !important;
+  }
+  .ivu-select-selection {
+    background-color: @color-background;
+    color: @color-text;
+    border-color: @color-background;
+  }
+  .ivu-select-dropdown {
+    background-color: @color-background;
+    color: @color-text;
+
+    .ivu-select-item {
+      color: @color-text;
+      border-top: 1px solid @color-background-light;
+      &:hover,
+      &-focus {
+        background-color: @color-act1;
+      }
+    }
+  }
+  .ivu-form .ivu-form-item-label {
+    color: @color-text;
+  }
+}
+.grade-ribbon {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 8;
+  padding: 10px;
+  background-color: #3d3f55;
+
+  .ribbon-list {
+    font-size: 0;
+    text-align: right;
+    height: 30px;
+  }
+
+  .ribbon-item {
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 20px;
+    cursor: pointer;
+    transition: all linear 0.1s;
+
+    &:hover {
+      color: #bec3d1;
+      transform: scale(1.1, 1.1);
+    }
+  }
+}
+
+// marker-history
+.marker-history {
+  .image-view-footer {
+    color: @color-text;
+  }
+  .image-action-name {
+    height: 26px;
+    padding-left: 5px;
+  }
+  .ivu-modal {
+    width: 100% !important;
+    top: 0 !important;
+  }
+}
+.history-image-list {
+  height: 360px;
+
+  .marker-image-item {
+    width: 20%;
+    height: 100%;
+  }
+}
+// marker-standard
+.marker-standard {
+  .level-list {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  .level-item {
+    display: inline-block;
+    vertical-align: top;
+    width: 40px;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 5px;
+    margin: 0 10px;
+    border-radius: 5px;
+    background-color: @color-background-light;
+    color: @color-text;
+    text-align: center;
+    cursor: pointer;
+    &:hover,
+    &-act {
+      color: @color-text-act;
+      background-color: @color-act1;
+    }
+  }
+  .standard-image-list {
+    height: auto;
+  }
+
+  .image-view-footer {
+    color: @color-text;
+  }
+  .marker-image-item {
+    width: 20%;
+    height: 300px;
+  }
+  .standard-image-none {
+    padding-top: 150px;
+    font-size: 16px;
+    text-align: center;
+    color: @color-text;
+  }
+}
+.change-standard {
+  .level-list {
+    margin-bottom: 50px;
+  }
+  .level-item {
+    display: inline-block;
+    vertical-align: top;
+    margin: 5px;
+    height: 30px;
+    line-height: 30px;
+    width: 40px;
+    text-align: center;
+    border-radius: 5px;
+    color: @color-text;
+    background-color: @color-background-light;
+    border-color: @color-background-light;
+    cursor: pointer;
+
+    &:hover,
+    &-act {
+      background-color: @color-act1;
+      border-color: @color-act1;
+    }
+
+    &-disabled {
+      cursor: not-allowed;
+      color: @color-text;
+      background-color: shade(@color-background-light, 20%) !important;
+    }
+  }
+}
+// marker-statistics
+.marker-statistics {
+  color: @color-text;
+  &-chart {
+    > h3 {
+      font-size: 16px;
+    }
+    .chart-box {
+      background-color: @color-background;
+    }
+  }
+}
+
+// leader-progress
+.leader-progress {
+  .ivu-modal {
+    width: 600px !important;
+  }
+  .progress-line {
+    color: @color-text;
+    background-color: tint(@color-background, 5%);
+
+    .progress-rate {
+      background-color: @color-act1;
+      color: @color-text-act;
+    }
+  }
+}
+// modify-leader-grading
+.marker-modal {
+  .leader-grading {
+    color: @color-text;
+    .leader-level {
+      h3 {
+        background-color: @color-background-light;
+        color: @color-text-act;
+      }
+    }
+    .leader-aciton {
+      color: @color-text;
+    }
+    .leader-markers {
+      background-color: @color-background-light;
+    }
+  }
+  .ivu-btn-primary {
+    .marker-btn-primary;
+  }
+  .ivu-radio-inner:after,
+  .ivu-checkbox-checked .ivu-checkbox-inner {
+    background-color: @color-act1;
+  }
+}
+
+// custom iview ui ----------------->
+// marker-modal
+.marker-modal {
+  color: @color-text;
+  .ivu-modal-mask {
+    background-color: rgba(55, 55, 55, 0.7);
+  }
+
+  .ivu-modal-content {
+    background-color: @color-background;
+    border-radius: 0;
+  }
+  .ivu-modal-header {
+    border-color: @color-background-light;
+    &-inner {
+      color: @color-text;
+      text-align: left;
+    }
+  }
+  .ivu-modal-body {
+    padding: 15px;
+  }
+}
+// marker-dropdown
+.marker-dropdown {
+  background-color: @color-background;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+
+  .ivu-dropdown-item {
+    margin-top: 0;
+    color: @color-text;
+    border-top: 1px solid @color-background-light;
+    &:hover {
+      background-color: @color-act1;
+    }
+  }
+}
+// marker-popper
+.marker-popper {
+  &.ivu-poptip-popper {
+    .ivu-poptip-arrow {
+      border-bottom-color: @color-act1;
+      &::after {
+        border-bottom-color: @color-act1;
+      }
+    }
+  }
+  .ivu-poptip-inner {
+    background-color: @color-background;
+    color: @color-text;
+
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+  }
+}
+// btn
+.marker-btn-primary {
+  color: @color-text-act;
+  background-color: @color-act1;
+  border-color: @color-act1;
+
+  &:hover {
+    background-color: shade(@color-act1, 10%);
+    border-color: shade(@color-act1, 10%);
+  }
+}
+
+.ribbon-set-dialog {
+  .ribbon-set-form {
+    padding-bottom: 30px;
+  }
+  .ivu-form-item {
+    margin-bottom: 5px;
+  }
+  .ivu-form-item-label {
+    color: #9d9c9c;
+  }
+  .ivu-switch-checked {
+    border-color: @color-act1;
+    background-color: @color-act1;
+  }
+}

src/assets/styles/variables.less

@@ -29,6 +29,7 @@
 @color-background-light: #3d3f55;
 @color-background-light2: #34364b;
 @color-act1: #155b92;
+@color-bold-act1: #0f446c;
 @color-act2: #cc4635;
 @color-act3: #f9dbc4;
 @color-text: #9d9c9c;

src/components/ImageViewContain.vue

@@ -5,7 +5,7 @@
         v-if="image.thumbSrc"
         :src="image.thumbSrc"
         :alt="image.title"
-        @click="toReview"
+        @click="toReview($event)"
         @load="resizeImage"
       />
     </div>
@@ -38,8 +38,8 @@ export default {
     });
   },
   methods: {
-    toReview() {
-      this.$emit("to-review");
+    toReview($event) {
+      this.$emit("to-review", $event);
     },
     registWinResize() {
       window.addEventListener("resize", () => {

src/modules/grading/components/RibbonSetDialog.vue

@@ -10,11 +10,15 @@
       ref="modalFormComp"
       class="ribbon-set-form"
       :model="ribbonSetModal"
-      :label-width="140"
+      :label-width="160"
     >
       <FormItem label="显示快捷档位导航">
         <i-switch v-model="ribbonSetModal.fastLevelNav"></i-switch>
       </FormItem>
+      <FormItem v-if="IS_MARKER" label="图片列表开启非填充模式">
+        <!-- 手动刷新模式 -->
+        <i-switch v-model="ribbonSetModal.listHandleRefresh"></i-switch>
+      </FormItem>
     </Form>
 
     <div slot="footer">
@@ -32,11 +36,15 @@ export default {
   data() {
     return {
       modalIsShow: false,
+      curUserRoleType: this.$ls.get("user", { role: "" }).role,
       ribbonSetModal: {},
     };
   },
   computed: {
     ...mapState("marker", ["ribbonSet"]),
+    IS_MARKER() {
+      return this.curUserRoleType === "MARKER";
+    },
   },
   mounted() {
     const userId = this.$ls.get("user", { id: "" }).id;

src/modules/grading/marker/MarkerGrading.vue

@@ -69,7 +69,9 @@
           :class="[
             'marker-image-item',
             {
-              'marker-image-item-act': curPaperIndex === index,
+              'marker-image-item-act':
+                !isMultipleSelection && curPaperIndex === index,
+              'is-multiple-selected': isMultipleSelection && paper.selected,
             },
           ]"
         >
@@ -78,6 +80,7 @@
               :data="paper"
               @to-review="toReview(index)"
               @to-select="selectMultiplePaper"
+              @to-switch="selectPaper(index)"
             ></marker-image-view>
           </div>
         </div>
@@ -215,6 +218,9 @@ export default {
     markerImageListClasses() {
       return ["marker-image-list", `marker-image-list-${this.page.size}`];
     },
+    isMultipleSelection() {
+      return this.multipleGradingList.length > 0;
+    },
   },
   created() {
     this.subject = this.subjectId.split("-")[1];
@@ -529,7 +535,18 @@ export default {
 
       this.selectPaper(this.curPaperIndex);
     },
-    async toActionNextPaper() {
+    async toActionNextPaper(isPass = false) {
+      if (this.ribbonSet.listHandleRefresh && !isPass) {
+        if (this.curPaperIndex === this.papers.length - 1) {
+          this.$refs.SimpleImagePreview.cancel();
+          // this.$Message.warning("已评到当前页最后一题，请换下一页！");
+          return;
+        }
+
+        this.selectPaper(this.curPaperIndex + 1);
+        return;
+      }
+      // 跳过或者填充模式的下一个，执行此流程
       if (this.page.current > 1 && this.papers.length === 1) {
         this.setPage({ current: this.page.current - 1 });
         this.curPaperIndex = this.page.size;
@@ -559,12 +576,20 @@ export default {
         this.$refs.MarkerHistory.updatePapers();
       } else {
         this.updateStepLevel(this.curStep, level.name, 1, this.curPaper.id);
+
+        if (this.ribbonSet.listHandleRefresh) {
+          // update current paper level
+          this.curPaper = this.papers[this.curPaperIndex] = Object.assign(
+            this.papers[this.curPaperIndex],
+            { level: level.name }
+          );
+        }
         this.toActionNextPaper();
       }
     },
     async passCurPaper() {
       await paperTaskPass(this.curPaper.id);
-      this.toActionNextPaper();
+      this.toActionNextPaper(true);
     },
     // paper carousel
     toViewCarouselPaper(paperIndex, papers, type) {

src/modules/grading/marker/MarkerImageView.vue

@@ -3,7 +3,7 @@
     <image-view-contain
       ref="ImageViewContain"
       :image="image"
-      @to-review="toReview"
+      @to-review="onReviewHandle"
     ></image-view-contain>
     <div class="image-view-footer">
       <slot>
@@ -45,6 +45,9 @@
           <div class="image-action-li" @click="toRotate">
             <Icon type="md-refresh-circle" />
           </div>
+          <div class="image-action-li" @click="toReview">
+            <Icon type="md-qr-scanner" />
+          </div>
         </div>
       </slot>
     </div>
@@ -83,7 +86,7 @@ export default {
     this.initData();
   },
   watch: {
-    "data.selected": {
+    data: {
       handler() {
         this.initData();
       },
@@ -148,6 +151,17 @@ export default {
       this.image.selected = !this.image.selected;
       this.$emit("to-select", this.image);
     },
+    toSwitch() {
+      this.$emit("to-switch", this.image);
+    },
+    onReviewHandle(e) {
+      const ctrlHolded = e.ctrlKey || e.metaKey;
+      if (ctrlHolded) {
+        this.toSelect();
+      } else {
+        this.toSwitch();
+      }
+    },
     changeSelect(selected) {
       if (this.image.sample) return;
       this.image.selected = selected;

src/modules/grading/marker/store.js

@@ -14,7 +14,7 @@ const state = {
   curUserRoleType: "",
   IS_MARKER: false,
   IS_MARK_LEADER: false,
-  ribbonSet: { fastLevelNav: false },
+  ribbonSet: { fastLevelNav: false, listHandleRefresh: false },
 };
 const mutations = {
   setParamSet(state, paramsSet) {

src/modules/login/LoginHome.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="['login', 'login-home', { 'login-dark': isDark }]">
+  <div
+    :class="['login', 'login-home', { 'login-dark': isDark }]"
+    @keyup.enter="submit('loginForm')"
+  >
     <div class="login login-box">
       <div class="login-title">
         <h1>美术阅卷系统</h1>

src/modules/mark/marker/MarkerMarking.vue

@@ -42,7 +42,9 @@
           :class="[
             'marker-image-item',
             {
-              'marker-image-item-act': curPaperIndex === index,
+              'marker-image-item-act':
+                !isMultipleSelection && curPaperIndex === index,
+              'is-multiple-selected': isMultipleSelection && paper.selected,
             },
           ]"
         >
@@ -51,6 +53,7 @@
               :data="paper"
               :stage="stage"
               @to-review="toReview(index)"
+              @to-switch="selectPaper(index)"
             ></marker-image-view>
           </div>
         </div>
@@ -184,6 +187,9 @@ export default {
       curPaperIndex: 0,
       paramsSetReady: false,
       cacheUpdateLevelInfos: null,
+      // multiple grading
+      multiplebtnClicked: false,
+      multipleGradingList: [],
       // carousel paper review,
       carouselType: "",
       carouselPapers: [],
@@ -209,6 +215,9 @@ export default {
     showPaperRelateCount() {
       return !!this.paramsSet["showPaperCount"];
     },
+    isMultipleSelection() {
+      return this.multipleGradingList.length > 0;
+    },
   },
   created() {
     this.subject = this.subjectId.split("-")[1];
@@ -524,7 +533,19 @@ export default {
 
       this.selectPaper(this.curPaperIndex);
     },
-    async toActionNextPaper(toNext) {
+    async toActionNextPaper(toNext = false, isPass = false) {
+      if (this.ribbonSet.listHandleRefresh && !isPass) {
+        if (this.curPaperIndex === this.papers.length - 1) {
+          this.$refs.SimpleImagePreview.cancel();
+          // this.$Message.warning("已评到当前页最后一题，请换下一页！");
+          return;
+        }
+
+        this.selectPaper(this.curPaperIndex + 1);
+        return;
+      }
+
+      // 跳过或者填充模式的下一个，执行此流程
       if (
         this.curPaperIndex === this.papers.length - 1 &&
         this.page.current === this.page.totalPage
@@ -579,6 +600,14 @@ export default {
           this.curPaper.id
         );
 
+        if (this.ribbonSet.listHandleRefresh) {
+          // update current paper level
+          this.curPaper = this.papers[this.curPaperIndex] = Object.assign(
+            this.papers[this.curPaperIndex],
+            { score: info.score }
+          );
+        }
+
         if (
           this.curStep.type === "undo" ||
           this.curStep.type === "shiftScore"
@@ -591,7 +620,7 @@ export default {
     },
     async passCurPaper(level) {
       await paperTaskPass(this.curPaper.id);
-      this.toActionNextPaper();
+      this.toActionNextPaper(false, true);
     },
     // paper carousel
     toViewCarouselPaper(paperIndex, papers, type) {