bug fix

card/assets/styles/card-design.scss

@@ -1,830 +1,833 @@
-// card-design
-.card-design {
-  color: $--color-text-dark;
-  background: $--color-background;
-
-  // page-box
-  .page-box {
-    // box-shadow: $--shadow-light;
-    // box-shadow: 0 0 1px #333;
-    &::before {
-      content: "";
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      z-index: 7;
-      // background-color: rgba($color: #ffffff, $alpha: 0.7);
-    }
-  }
-  .page-column-main {
-    &.is-active {
-      &::before,
-      .page-column-forbid-area {
-        border-color: $--color-primary;
-      }
-    }
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 8;
-      border: 1px dashed #d0d0d0;
-    }
-  }
-  .topic-element-edit {
-    .element-item-error {
-      box-shadow: 0 0 10px $--color-danger;
-    }
-
-    .element-resize {
-      background-color: #fff;
-      > .resize-control {
-        > .control-point,
-        > .control-line {
-          display: none;
-        }
-      }
-
-      &:hover {
-        > .resize-control {
-          > .control-line {
-            display: block;
-          }
-        }
-      }
-
-      &-act {
-        > .resize-control {
-          > .control-point,
-          > .control-line {
-            display: block;
-          }
-        }
-      }
-    }
-    .element-resize-compact {
-      > .resize-control {
-        > .control-line {
-          display: block;
-        }
-      }
-
-      &:hover {
-        > .resize-control {
-          > .control-line {
-            border-color: #617bea;
-          }
-        }
-      }
-
-      &.element-resize-act {
-        > .resize-control {
-          > .control-line {
-            border-color: #617bea;
-            &-left,
-            &-right {
-              border-left-style: solid;
-            }
-            &-top,
-            &-bottom {
-              border-top-style: solid;
-            }
-          }
-        }
-      }
-    }
-
-    .element-item-topic-number {
-      position: absolute;
-      left: -22px;
-      top: 0;
-      width: 20px;
-      height: 20px;
-      z-index: 99;
-      line-height: 20px;
-      font-size: 12px;
-      text-align: center;
-      background-color: $--color-primary;
-      color: #fff;
-      border-radius: 50% 0 50% 50%;
-      cursor: pointer;
-      &:hover {
-        background-color: $--color-primary-light;
-      }
-    }
-    // 编辑时，小题扩展答题区之间用虚线
-    .element-item {
-      &-explain {
-        &::before {
-          border-bottom: 1px dashed #333;
-        }
-      }
-      &-type-last {
-        &::before {
-          border-bottom: 1px solid #333;
-        }
-      }
-    }
-    &:last-child {
-      .element-item {
-        &::before {
-          border-bottom: 1px solid #333;
-        }
-      }
-      .element-item-card-head.element-item-type-pre {
-        &::before {
-          border-bottom: none;
-        }
-      }
-    }
-
-    // elem-pane
-    .elem-pane {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .page-column-element {
-    > .element-resize {
-      width: 100% !important;
-    }
-  }
-
-  // page-main-outer
-  .page-main-outer {
-    z-index: 1;
-    background-color: rgba($color: #ffffff, $alpha: 0.7);
-
-    &-act {
-      z-index: 19;
-    }
-  }
-
-  // design-other-pages
-  .design-other-pages {
-    position: absolute;
-    width: 2000px;
-    left: -9999px;
-    top: 0;
-    z-index: 1000;
-    visibility: hidden;
-  }
-
-  // card-head-sample
-  .card-head-sample {
-    position: absolute;
-    width: 2000px;
-    left: -9999px;
-    top: 0;
-    z-index: 1001;
-    visibility: hidden;
-  }
-  // card-head
-  .card-head {
-    &-top {
-      .el-input > .el-input__inner {
-        text-align: center;
-        border-radius: 0;
-        border: 0;
-        background-color: transparent;
-        box-shadow: 0 0 1px #ccc;
-        color: #000;
-        padding: 0;
-        letter-spacing: -1px;
-      }
-    }
-    &-title {
-      .el-input__inner {
-        font-size: 24px;
-        font-weight: bold;
-        line-height: 33px;
-        height: 33px;
-      }
-    }
-    &-subtitle {
-      .el-input__inner {
-        line-height: 22px;
-        height: 22px;
-        padding: 0 10px;
-      }
-    }
-  }
-}
-
-.design-header {
-  position: fixed;
-  width: 100%;
-  height: 50px;
-  top: 0;
-  left: 0;
-  z-index: 99;
-  padding-left: 260px;
-  background-color: $--color-text-dark;
-  overflow: hidden;
-  padding: 10px 20px 10px 260px;
-
-  .design-steps {
-    position: relative;
-    text-align: center;
-    height: 30px;
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: 100%;
-      left: 0;
-      top: 14px;
-      border-bottom: 1px dashed $--color-text-gray;
-      z-index: 2;
-    }
-
-    .step-item {
-      position: absolute;
-      top: 0;
-      z-index: 8;
-      padding: 0 10px;
-      color: $--color-text-gray;
-
-      &::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        left: 0;
-        top: 14px;
-        border-bottom: 1px solid $--color-text-dark;
-        z-index: 5;
-      }
-
-      > i {
-        position: relative;
-        display: inline-block;
-        vertical-align: middle;
-        height: 30px;
-        width: 30px;
-        border-radius: 50%;
-        border: 2px solid $--color-text-gray;
-        line-height: 26px;
-        font-weight: bold;
-        z-index: 8;
-      }
-      > span {
-        position: relative;
-        display: inline-block;
-        vertical-align: middle;
-        margin-left: 10px;
-        font-weight: bold;
-        color: #999;
-        z-index: 8;
-      }
-
-      &:first-child {
-        left: 0;
-        padding-left: 0;
-      }
-      &:last-child {
-        right: 0;
-        padding-right: 0;
-      }
-      &:nth-of-type(2) {
-        left: 33.3%;
-        transform: translateX(-50%);
-      }
-      &:nth-of-type(3) {
-        left: 66.7%;
-        transform: translateX(-50%);
-      }
-    }
-  }
-}
-
-.design-action {
-  position: fixed;
-  width: 240px;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-  overflow: auto;
-  font-size: 14px;
-  padding: 20px;
-  background: $--color-white;
-  border-top-right-radius: $--border-radius-huge;
-  border-bottom-right-radius: $--border-radius-huge;
-
-  .design-logo {
-    font-size: 20px;
-    line-height: 40px;
-    margin-bottom: 30px;
-
-    i {
-      cursor: pointer;
-      font-weight: 600;
-      &:hover {
-        color: $--color-primary;
-      }
-    }
-  }
-
-  .action-part {
-    margin-bottom: 5px;
-    color: $--color-text-dark-1;
-
-    &-title {
-      padding-bottom: 10px;
-      border-bottom: 1px solid $--color-border;
-    }
-    &-body {
-      padding: 20px 0;
-    }
-  }
-
-  // design-action
-  .type-list {
-    font-size: 0;
-  }
-  .type-item {
-    font-size: 14px;
-    display: inline-block;
-    vertical-align: top;
-    width: 50%;
-    text-align: center;
-    margin-bottom: 10px;
-    border-radius: 10px;
-    cursor: pointer;
-
-    &:nth-of-type(even) {
-      padding-left: 5px;
-    }
-    &:nth-of-type(odd) {
-      padding-right: 5px;
-    }
-    .el-button {
-      width: 100%;
-      font-size: 14px;
-    }
-
-    i {
-      margin-right: 2px;
-    }
-  }
-}
-
-.design-main {
-  padding: 70px 20px 50px 260px;
-  min-height: 100%;
-}
-
-.design-control {
-  position: fixed;
-  top: 50px;
-  left: 240px;
-  right: 0;
-  height: 70px;
-  z-index: 99;
-  background-color: $--color-background;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .control-right {
-    padding: 20px 20px 20px 0;
-    width: 240px;
-    text-align: right;
-    flex-grow: 0;
-    .el-button {
-      width: 60px;
-    }
-  }
-  .control-left {
-    padding: 20px 0 20px 20px;
-    white-space: nowrap;
-    overflow-y: hidden;
-    overflow-x: auto;
-    flex-grow: 2;
-  }
-}
-
-.design-body {
-  position: relative;
-  min-height: 1242px;
-  padding-top: 50px;
-}
-
-// topic-list
-.topic-list {
-  position: absolute;
-  top: -2000px;
-  left: -5000px;
-  z-index: auto;
-  visibility: hidden;
-  .element-item-card-head {
-    width: 100% !important;
-    height: auto !important;
-  }
-  .page-main-inner {
-    overflow: hidden;
-  }
-}
-
-// tool-tips
-.tool-tips {
-  color: $--color-text-dark-1;
-}
-// page-prop-edit
-.page-prop-edit {
-  .el-form-item {
-    margin-bottom: 5px;
-  }
-  .el-form-item__label,
-  .el-checkbox {
-    color: $--color-text-dark-1;
-  }
-  .column-btn {
-    padding: 0;
-    border: none !important;
-    vertical-align: middle;
-  }
-  .topicno-list {
-    font-size: 0;
-    line-height: 32px;
-    li {
-      display: inline-block;
-      vertical-align: middle;
-      margin: 0 5px 0 0;
-      width: 20px;
-      height: 20px;
-      line-height: 20px;
-      text-align: center;
-      font-size: 12px;
-      border-radius: 5px;
-      background-color: $--color-primary;
-      color: #fff;
-    }
-  }
-}
-// element-prop-edit
-.edit-dialog {
-  .el-input-split {
-    position: relative;
-    display: inline-block;
-    margin: 3px 10px;
-    width: 10px;
-    border-bottom: 2px solid #dddddd;
-  }
-  .el-input-number.is-without-controls {
-    .el-input__inner {
-      padding-left: 5px;
-      padding-right: 5px;
-    }
-  }
-}
-// element-tier-edit
-.element-tier-edit {
-  .tier-menu {
-    font-size: 0;
-    &-item {
-      display: inline-block;
-      vertical-align: top;
-      height: 26px;
-      line-height: 26px;
-      padding: 0 10px;
-      font-size: 13px;
-      cursor: pointer;
-      border: 1px solid #eff0f5;
-      width: 25%;
-      text-align: center;
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-
-      &:hover {
-        color: $--color-primary;
-      }
-
-      &.is-active {
-        background-color: #eff0f5;
-        color: #333;
-      }
-    }
-  }
-  .tier-list {
-    height: 240px;
-    overflow: auto;
-    background-color: #eff0f5;
-    position: relative;
-    padding: 3px 0;
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-  .tier-item {
-    position: relative;
-    padding: 0 5px;
-
-    &.after-drop {
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        border-bottom: 2px solid $--color-text-dark;
-        bottom: -2px;
-        left: 0;
-        z-index: 9;
-      }
-    }
-    &.before-drop {
-      &::before {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        border-top: 2px solid $--color-text-dark;
-        top: -2px;
-        left: 0;
-        z-index: 9;
-      }
-    }
-
-    &-cont {
-      padding: 5px 10px;
-      background-color: #fff;
-      border: 1px solid #e0e0e0;
-      border-radius: 3px;
-      height: 30px;
-      line-height: 20px;
-      font-size: 13px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: pointer;
-
-      &:hover {
-        color: $--color-primary;
-      }
-      &.is-active {
-        border-color: $--color-primary;
-        color: $--color-primary;
-      }
-    }
-  }
-}
-
-// right-menu-body
-.right-menu-body {
-  border: 1px solid #cccccc;
-  border-radius: 5px;
-  overflow: hidden;
-  background-color: #fff;
-  font-size: 14px;
-  color: #666666;
-  box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.1);
-  li {
-    padding: 6px;
-    font-weight: 400;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #f6f6f6;
-      color: $--color-primary;
-    }
-    &.li-danger:hover {
-      color: $--color-danger;
-    }
-
-    &:not(:last-child) {
-      border-bottom: 1px solid #dddddd;
-    }
-  }
-}
-
-// design-preview-frame
-.design-preview-frame {
-  position: absolute;
-  width: 1000px;
-  height: 600px;
-  left: -9999px;
-  top: 0;
-  z-index: 1001;
-  visibility: hidden;
-}
-
-// card custom-select
-.custom-select {
-  width: 100%;
-  .select-preview {
-    height: 32px;
-    line-height: 30px;
-    border: 1px solid #e0e0e0;
-    border-radius: 5px;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-
-    &:hover {
-      border-color: #b0b0b0;
-    }
-
-    &-main {
-      padding: 0 30px 0 15px;
-    }
-    &-icon {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 30px;
-      height: 100%;
-      background-color: #fff;
-      text-align: center;
-    }
-  }
-}
-
-// color-select
-.color-item {
-  display: inline-block;
-  vertical-align: middle;
-  width: 100px;
-  height: 26px;
-}
-.color-menu .el-dropdown-menu__item {
-  line-height: 30px;
-  padding: 0 15px;
-}
-// line-style-select
-.style-item {
-  display: inline-block;
-  vertical-align: middle;
-  width: 100px;
-  border-bottom-width: 2px;
-  border-bottom-color: #000;
-}
-.line-style-menu .el-dropdown-menu__item {
-  line-height: 24px;
-  padding: 0 10px;
-}
-// line-width-select
-.width-item {
-  display: inline-block;
-  vertical-align: middle;
-  width: 100px;
-  > i {
-    display: inline-block;
-    vertical-align: middle;
-    width: 65px;
-    border-bottom: 1pt solid #000;
-  }
-  > span {
-    display: block;
-    float: right;
-    line-height: 28px;
-    width: 40px;
-    margin-right: -10px;
-    text-align: center;
-  }
-}
-.line-width-menu .el-dropdown-menu__item {
-  line-height: 24px;
-  padding: 0 10px;
-}
-
-.edit-dialog {
-  .el-dialog__footer {
-    text-align: right;
-  }
-}
-
-// paper-params
-.paper-params {
-  .params-dialog-title {
-    font-size: 16px;
-    > span {
-      font-size: 14px;
-      margin-left: 24px;
-      color: $--color-text-gray-1;
-    }
-  }
-  .params-main {
-    margin-top: -10px;
-    padding: 0 10px;
-  }
-  .params-head {
-    margin-bottom: 20px;
-  }
-  .params-part {
-    margin: 15px 0;
-  }
-  .params-title {
-    margin-bottom: 10px;
-  }
-  .params-subtitle {
-    margin-bottom: 10px;
-    > span {
-      display: inline-block;
-      vertical-align: middle;
-      &:first-child {
-        margin-right: 20px;
-      }
-    }
-    .el-input-number {
-      width: 60px;
-      margin: 0 5px;
-    }
-  }
-  .param-sum-score {
-    color: $--color-danger;
-  }
-}
-
-// element-guide-lines
-.element-guide-lines {
-  .guide-line {
-    position: absolute;
-    z-index: 999;
-
-    &-x {
-      border-bottom: 1px solid $--color-success;
-    }
-    &-y {
-      border-left: 1px solid $--color-success;
-    }
-  }
-}
-
-// card-free-design
-.card-free-design {
-  .page-column-main {
-    overflow: hidden;
-  }
-  .topic-design {
-    position: absolute;
-  }
-  .design-header {
-    &-cont {
-      height: 100%;
-    }
-    .btn-help {
-      font-size: 20px;
-      padding: 0;
-    }
-  }
-  .design-action {
-    .action-part {
-      &-title {
-        padding-bottom: 5px;
-      }
-      &-body {
-        padding: 10px 0;
-      }
-    }
-  }
-
-  .control-left {
-    .el-button {
-      position: relative;
-    }
-    .page-delete {
-      display: block;
-      position: absolute;
-      top: 0;
-      right: 0;
-      margin-top: -8px;
-      margin-right: -8px;
-      font-size: 14px;
-      color: $--color-danger;
-      cursor: pointer;
-
-      &:hover {
-        color: mix(#000, $--color-danger, 20%);
-      }
-    }
-  }
-}
-
-// shortcut-key-spin
-.shortcut-key-spin {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  border-radius: 5px;
-  padding: 0 5px;
-  background-color: $--color-text-gray-5;
-  color: $--color-text-dark-1;
-
-  &:not(:first-child) {
-    margin-left: 20px;
-    &::before {
-      content: "+";
-      display: block;
-      position: absolute;
-      left: -15px;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-}
+// card-design
+.card-design {
+  color: $--color-text-dark;
+  background: $--color-background;
+
+  // page-box
+  .page-box {
+    // box-shadow: $--shadow-light;
+    // box-shadow: 0 0 1px #333;
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 7;
+      // background-color: rgba($color: #ffffff, $alpha: 0.7);
+    }
+  }
+  .page-column-main {
+    &.is-active {
+      &::before,
+      .page-column-forbid-area {
+        border-color: $--color-primary;
+      }
+    }
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 8;
+      border: 1px dashed #d0d0d0;
+    }
+  }
+  .topic-element-edit {
+    .element-item-error {
+      box-shadow: 0 0 10px $--color-danger;
+    }
+
+    .element-resize {
+      background-color: #fff;
+      > .resize-control {
+        > .control-point,
+        > .control-line {
+          display: none;
+        }
+      }
+
+      &:hover {
+        > .resize-control {
+          > .control-line {
+            display: block;
+          }
+        }
+      }
+
+      &-act {
+        > .resize-control {
+          > .control-point,
+          > .control-line {
+            display: block;
+          }
+        }
+      }
+    }
+    .element-resize-compact {
+      > .resize-control {
+        > .control-line {
+          display: block;
+        }
+      }
+
+      &:hover {
+        > .resize-control {
+          > .control-line {
+            border-color: #617bea;
+          }
+        }
+      }
+
+      &.element-resize-act {
+        > .resize-control {
+          > .control-line {
+            border-color: #617bea;
+            &-left,
+            &-right {
+              border-left-style: solid;
+            }
+            &-top,
+            &-bottom {
+              border-top-style: solid;
+            }
+          }
+        }
+      }
+    }
+
+    .element-item-topic-number {
+      position: absolute;
+      left: -22px;
+      top: 0;
+      width: 20px;
+      height: 20px;
+      z-index: 99;
+      line-height: 20px;
+      font-size: 12px;
+      text-align: center;
+      background-color: $--color-primary;
+      color: #fff;
+      border-radius: 50% 0 50% 50%;
+      cursor: pointer;
+      &:hover {
+        background-color: $--color-primary-light;
+      }
+    }
+    // 编辑时，小题扩展答题区之间用虚线
+    .element-item {
+      &-explain {
+        &::before {
+          border-bottom: 1px dashed #333;
+        }
+      }
+      &-type-last {
+        &::before {
+          border-bottom: 1px solid #333;
+        }
+      }
+    }
+    &:last-child {
+      .element-item {
+        &::before {
+          border-bottom: 1px solid #333;
+        }
+      }
+      .element-item-card-head.element-item-type-pre {
+        &::before {
+          border-bottom: none;
+        }
+      }
+    }
+
+    // elem-pane
+    .elem-pane {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .page-column-element {
+    > .element-resize {
+      width: 100% !important;
+    }
+  }
+
+  // page-main-outer
+  .page-main-outer {
+    z-index: 1;
+    background-color: rgba($color: #ffffff, $alpha: 0.7);
+
+    &-act {
+      z-index: 19;
+    }
+  }
+
+  // design-other-pages
+  .design-other-pages {
+    position: absolute;
+    width: 2000px;
+    left: -9999px;
+    top: 0;
+    z-index: 1000;
+    visibility: hidden;
+  }
+
+  // card-head-sample
+  .card-head-sample {
+    position: absolute;
+    width: 2000px;
+    left: -9999px;
+    top: 0;
+    z-index: 1001;
+    visibility: hidden;
+  }
+  // card-head
+  .card-head {
+    &-top {
+      .el-input > .el-input__inner {
+        text-align: center;
+        border-radius: 0;
+        border: 0;
+        background-color: transparent;
+        box-shadow: 0 0 1px #ccc;
+        color: #000;
+        padding: 0;
+        letter-spacing: -1px;
+      }
+    }
+    &-title {
+      .el-input__inner {
+        font-size: 24px;
+        font-weight: bold;
+        line-height: 33px;
+        height: 33px;
+      }
+    }
+    &-subtitle {
+      .el-input__inner {
+        line-height: 22px;
+        height: 22px;
+        padding: 0 10px;
+      }
+    }
+  }
+}
+
+.design-header {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  padding-left: 260px;
+  background-color: $--color-text-dark;
+  overflow: hidden;
+  padding: 10px 20px 10px 260px;
+
+  .design-steps {
+    position: relative;
+    text-align: center;
+    height: 30px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: 14px;
+      border-bottom: 1px dashed $--color-text-gray;
+      z-index: 2;
+    }
+
+    .step-item {
+      position: absolute;
+      top: 0;
+      z-index: 8;
+      padding: 0 10px;
+      color: $--color-text-gray;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        left: 0;
+        top: 14px;
+        border-bottom: 1px solid $--color-text-dark;
+        z-index: 5;
+      }
+
+      > i {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+        height: 30px;
+        width: 30px;
+        border-radius: 50%;
+        border: 2px solid $--color-text-gray;
+        line-height: 26px;
+        font-weight: bold;
+        z-index: 8;
+      }
+      > span {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 10px;
+        font-weight: bold;
+        color: #999;
+        z-index: 8;
+      }
+
+      &:first-child {
+        left: 0;
+        padding-left: 0;
+      }
+      &:last-child {
+        right: 0;
+        padding-right: 0;
+      }
+      &:nth-of-type(2) {
+        left: 33.3%;
+        transform: translateX(-50%);
+      }
+      &:nth-of-type(3) {
+        left: 66.7%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+}
+
+.design-action {
+  position: fixed;
+  width: 240px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+  overflow: auto;
+  font-size: 14px;
+  padding: 20px;
+  background: $--color-white;
+  border-top-right-radius: $--border-radius-huge;
+  border-bottom-right-radius: $--border-radius-huge;
+
+  .design-logo {
+    font-size: 20px;
+    line-height: 40px;
+    margin-bottom: 30px;
+
+    i {
+      cursor: pointer;
+      font-weight: 600;
+      &:hover {
+        color: $--color-primary;
+      }
+    }
+  }
+
+  .action-part {
+    margin-bottom: 5px;
+    color: $--color-text-dark-1;
+
+    &-title {
+      padding-bottom: 10px;
+      border-bottom: 1px solid $--color-border;
+    }
+    &-body {
+      padding: 20px 0;
+    }
+  }
+
+  // design-action
+  .type-list {
+    font-size: 0;
+  }
+  .type-item {
+    font-size: 14px;
+    display: inline-block;
+    vertical-align: top;
+    width: 50%;
+    text-align: center;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    cursor: pointer;
+
+    &:nth-of-type(even) {
+      padding-left: 5px;
+    }
+    &:nth-of-type(odd) {
+      padding-right: 5px;
+    }
+    .el-button {
+      width: 100%;
+      font-size: 14px;
+    }
+
+    i {
+      margin-right: 2px;
+    }
+  }
+}
+
+.design-main {
+  padding: 70px 20px 50px 260px;
+  min-height: 100%;
+}
+
+.design-control {
+  position: fixed;
+  top: 50px;
+  left: 240px;
+  right: 0;
+  height: 70px;
+  z-index: 99;
+  background-color: $--color-background;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .control-right {
+    padding: 20px 20px 20px 0;
+    width: 240px;
+    text-align: right;
+    flex-grow: 0;
+    .el-button {
+      width: 60px;
+    }
+  }
+  .control-left {
+    padding: 20px 0 20px 20px;
+    white-space: nowrap;
+    overflow-y: hidden;
+    overflow-x: auto;
+    flex-grow: 2;
+  }
+}
+
+.design-body {
+  position: relative;
+  min-height: 1242px;
+  padding-top: 50px;
+}
+
+// topic-list
+.topic-list {
+  position: absolute;
+  top: -2000px;
+  left: -5000px;
+  z-index: auto;
+  visibility: hidden;
+  .element-item-card-head {
+    width: 100% !important;
+    height: auto !important;
+  }
+  .page-main-inner {
+    overflow: hidden;
+  }
+}
+
+// tool-tips
+.tool-tips {
+  color: $--color-text-dark-1;
+}
+// page-prop-edit
+.page-prop-edit {
+  .el-form-item {
+    margin-bottom: 5px;
+  }
+  .el-form-item__label,
+  .el-checkbox {
+    color: $--color-text-dark-1;
+  }
+  .el-form-item__label{
+    padding-right: 10px;
+  }
+  .column-btn {
+    padding: 0;
+    border: none !important;
+    vertical-align: middle;
+  }
+  .topicno-list {
+    font-size: 0;
+    line-height: 32px;
+    li {
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 5px 0 0;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      font-size: 12px;
+      border-radius: 5px;
+      background-color: $--color-primary;
+      color: #fff;
+    }
+  }
+}
+// element-prop-edit
+.edit-dialog {
+  .el-input-split {
+    position: relative;
+    display: inline-block;
+    margin: 3px 10px;
+    width: 10px;
+    border-bottom: 2px solid #dddddd;
+  }
+  .el-input-number.is-without-controls {
+    .el-input__inner {
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+  }
+}
+// element-tier-edit
+.element-tier-edit {
+  .tier-menu {
+    font-size: 0;
+    &-item {
+      display: inline-block;
+      vertical-align: top;
+      height: 26px;
+      line-height: 26px;
+      padding: 0 10px;
+      font-size: 13px;
+      cursor: pointer;
+      border: 1px solid #eff0f5;
+      width: 25%;
+      text-align: center;
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+
+      &:hover {
+        color: $--color-primary;
+      }
+
+      &.is-active {
+        background-color: #eff0f5;
+        color: #333;
+      }
+    }
+  }
+  .tier-list {
+    height: 240px;
+    overflow: auto;
+    background-color: #eff0f5;
+    position: relative;
+    padding: 3px 0;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .tier-item {
+    position: relative;
+    padding: 0 5px;
+
+    &.after-drop {
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        border-bottom: 2px solid $--color-text-dark;
+        bottom: -2px;
+        left: 0;
+        z-index: 9;
+      }
+    }
+    &.before-drop {
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        border-top: 2px solid $--color-text-dark;
+        top: -2px;
+        left: 0;
+        z-index: 9;
+      }
+    }
+
+    &-cont {
+      padding: 5px 10px;
+      background-color: #fff;
+      border: 1px solid #e0e0e0;
+      border-radius: 3px;
+      height: 30px;
+      line-height: 20px;
+      font-size: 13px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+
+      &:hover {
+        color: $--color-primary;
+      }
+      &.is-active {
+        border-color: $--color-primary;
+        color: $--color-primary;
+      }
+    }
+  }
+}
+
+// right-menu-body
+.right-menu-body {
+  border: 1px solid #cccccc;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #fff;
+  font-size: 14px;
+  color: #666666;
+  box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.1);
+  li {
+    padding: 6px;
+    font-weight: 400;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #f6f6f6;
+      color: $--color-primary;
+    }
+    &.li-danger:hover {
+      color: $--color-danger;
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #dddddd;
+    }
+  }
+}
+
+// design-preview-frame
+.design-preview-frame {
+  position: absolute;
+  width: 1000px;
+  height: 600px;
+  left: -9999px;
+  top: 0;
+  z-index: 1001;
+  visibility: hidden;
+}
+
+// card custom-select
+.custom-select {
+  width: 100%;
+  .select-preview {
+    height: 32px;
+    line-height: 30px;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+
+    &:hover {
+      border-color: #b0b0b0;
+    }
+
+    &-main {
+      padding: 0 30px 0 15px;
+    }
+    &-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 30px;
+      height: 100%;
+      background-color: #fff;
+      text-align: center;
+    }
+  }
+}
+
+// color-select
+.color-item {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100px;
+  height: 26px;
+}
+.color-menu .el-dropdown-menu__item {
+  line-height: 30px;
+  padding: 0 15px;
+}
+// line-style-select
+.style-item {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100px;
+  border-bottom-width: 2px;
+  border-bottom-color: #000;
+}
+.line-style-menu .el-dropdown-menu__item {
+  line-height: 24px;
+  padding: 0 10px;
+}
+// line-width-select
+.width-item {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100px;
+  > i {
+    display: inline-block;
+    vertical-align: middle;
+    width: 65px;
+    border-bottom: 1pt solid #000;
+  }
+  > span {
+    display: block;
+    float: right;
+    line-height: 28px;
+    width: 40px;
+    margin-right: -10px;
+    text-align: center;
+  }
+}
+.line-width-menu .el-dropdown-menu__item {
+  line-height: 24px;
+  padding: 0 10px;
+}
+
+.edit-dialog {
+  .el-dialog__footer {
+    text-align: right;
+  }
+}
+
+// paper-params
+.paper-params {
+  .params-dialog-title {
+    font-size: 16px;
+    > span {
+      font-size: 14px;
+      margin-left: 24px;
+      color: $--color-text-gray-1;
+    }
+  }
+  .params-main {
+    margin-top: -10px;
+    padding: 0 10px;
+  }
+  .params-head {
+    margin-bottom: 20px;
+  }
+  .params-part {
+    margin: 15px 0;
+  }
+  .params-title {
+    margin-bottom: 10px;
+  }
+  .params-subtitle {
+    margin-bottom: 10px;
+    > span {
+      display: inline-block;
+      vertical-align: middle;
+      &:first-child {
+        margin-right: 20px;
+      }
+    }
+    .el-input-number {
+      width: 60px;
+      margin: 0 5px;
+    }
+  }
+  .param-sum-score {
+    color: $--color-danger;
+  }
+}
+
+// element-guide-lines
+.element-guide-lines {
+  .guide-line {
+    position: absolute;
+    z-index: 999;
+
+    &-x {
+      border-bottom: 1px solid $--color-success;
+    }
+    &-y {
+      border-left: 1px solid $--color-success;
+    }
+  }
+}
+
+// card-free-design
+.card-free-design {
+  .page-column-main {
+    overflow: hidden;
+  }
+  .topic-design {
+    position: absolute;
+  }
+  .design-header {
+    &-cont {
+      height: 100%;
+    }
+    .btn-help {
+      font-size: 20px;
+      padding: 0;
+    }
+  }
+  .design-action {
+    .action-part {
+      &-title {
+        padding-bottom: 5px;
+      }
+      &-body {
+        padding: 10px 0;
+      }
+    }
+  }
+
+  .control-left {
+    .el-button {
+      position: relative;
+    }
+    .page-delete {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin-top: -8px;
+      margin-right: -8px;
+      font-size: 14px;
+      color: $--color-danger;
+      cursor: pointer;
+
+      &:hover {
+        color: mix(#000, $--color-danger, 20%);
+      }
+    }
+  }
+}
+
+// shortcut-key-spin
+.shortcut-key-spin {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 5px;
+  padding: 0 5px;
+  background-color: $--color-text-gray-5;
+  color: $--color-text-dark-1;
+
+  &:not(:first-child) {
+    margin-left: 20px;
+    &::before {
+      content: "+";
+      display: block;
+      position: absolute;
+      left: -15px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}

card/components/PagePropEdit.vue

@@ -1,192 +1,194 @@
-<template>
-  <div class="page-prop-edit">
-    <el-form ref="form" :model="form" label-width="70px">
-      <el-form-item label="纸张规格">
-        <el-select
-          v-model="form.pageSize"
-          placeholder="请选择"
-          :disabled="pageSizeOptions.length < 2"
-          @change="modifyPageSize"
-        >
-          <el-option
-            v-for="item in pageSizeOptions"
-            :key="item"
-            :label="item"
-            :value="item"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="栏位布局">
-        <el-button
-          v-for="(item, index) in columnOptions"
-          :key="index"
-          class="column-btn"
-          :title="item.title"
-          :disabled="item.disabled"
-          @click="modifyColumnNum(item)"
-        >
-          <i
-            :class="[
-              'icon',
-              form.columnNumber == item.value
-                ? `icon-column-${item.label}-act`
-                : `icon-column-${item.label}`
-            ]"
-          ></i>
-        </el-button>
-      </el-form-item>
-      <!-- <el-form-item label-width="0px">
-        <el-checkbox v-model="form.aOrB" disabled>启用A/B卷</el-checkbox>
-      </el-form-item> -->
-      <el-form-item label="禁答区域">
-        <el-checkbox
-          v-model="form.showForbidArea"
-          @change="showForbidAreaChange"
-          >启用</el-checkbox
-        >
-      </el-form-item>
-      <el-form-item label="大题数">
-        <ul class="topicno-list" v-if="topicSeries.length">
-          <li>{{ topicSeries.length }}</li>
-        </ul>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import { mapState, mapMutations, mapActions } from "vuex";
-import { objAssign } from "../plugins/utils";
-
-const COLUMN_OPTIONS = [
-  {
-    value: 1,
-    title: "一栏",
-    label: "one",
-    sizeValid: ["A4"],
-    disabled: false
-  },
-  {
-    value: 2,
-    title: "二栏",
-    label: "two",
-    sizeValid: ["A3", "A4"],
-    disabled: false
-  },
-  {
-    value: 3,
-    title: "三栏",
-    label: "three",
-    sizeValid: ["A3"],
-    disabled: false
-  },
-  {
-    value: 4,
-    title: "四栏",
-    label: "four",
-    sizeValid: ["A3"],
-    disabled: false
-  }
-];
-
-export default {
-  name: "page-prop-edit",
-  data() {
-    return {
-      columnOptions: [],
-      pageSizeOptions: ["A3"],
-      // pageSizeOptions: ["A3", "A4"],
-      form: {
-        pageSize: "A3",
-        columnNumber: 2,
-        columnGap: 4,
-        aOrB: false,
-        showForbidArea: false
-      },
-      prePageSize: "A3"
-    };
-  },
-  computed: {
-    ...mapState("card", ["curPageNo", "pages", "cardConfig", "topicSeries"]),
-    curPage() {
-      return this.pages[this.curPageNo];
-    }
-    // aOrBDisabled() {
-    //   return this.cardConfig.hasOwnProperty("aOrBSystem");
-    // }
-  },
-  watch: {
-    cardConfig: {
-      immediate: true,
-      handler(val) {
-        this.form = objAssign(this.form, val);
-        this.prePageSize = this.form.pageSize;
-        this.columnOptions = COLUMN_OPTIONS.filter(item =>
-          item.sizeValid.includes(this.form.pageSize)
-        );
-        if (this.form.pageSize === "A3") {
-          this.columnOptions[2].disabled = val.examNumberStyle === "fill";
-        }
-      }
-    }
-  },
-  methods: {
-    ...mapMutations("card", [
-      "setPages",
-      "setTopics",
-      "setCurElement",
-      "setCardConfig"
-    ]),
-    ...mapActions("card", ["rebuildPages", "resetElementProp"]),
-    modifyColumnNum(item) {
-      this.$confirm(
-        "此操作会导致当前题卡编辑的所有元素清空, 是否继续?",
-        "提示",
-        {
-          type: "warning"
-        }
-      )
-        .then(() => {
-          this.columnNumChange(item.value);
-        })
-        .catch(() => {});
-    },
-    columnNumChange(val) {
-      this.form.columnNumber = val;
-      this.setCardConfig(this.form);
-      this.setPages([]);
-      this.setTopics([]);
-      this.$emit("init-page");
-    },
-    showForbidAreaChange() {
-      this.setCardConfig(this.form);
-    },
-    configChange() {
-      this.setCardConfig(this.form);
-      this.$nextTick(() => {
-        this.rebuildPages();
-        this.setCurElement({});
-        this.$nextTick(() => {
-          this.resetElementProp(true);
-        });
-      });
-    },
-    modifyPageSize() {
-      this.$confirm("此操作将会重置当前页面所有元素信息, 是否继续?", "提示", {
-        type: "warning"
-      })
-        .then(() => {
-          this.columnOptions = COLUMN_OPTIONS.filter(item =>
-            item.sizeValid.includes(this.form.pageSize)
-          );
-          this.form.columnNumber = this.columnOptions[0].value;
-          this.configChange();
-        })
-        .catch(() => {
-          this.form.pageSize = this.prePageSize;
-        });
-    }
-  }
-};
-</script>
+<template>
+  <div class="page-prop-edit">
+    <el-form ref="form" :model="form" label-width="70px">
+      <el-form-item label="纸张规格">
+        <el-select
+          v-model="form.pageSize"
+          placeholder="请选择"
+          :disabled="pageSizeOptions.length < 2"
+          @change="modifyPageSize"
+        >
+          <el-option
+            v-for="item in pageSizeOptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="栏位布局">
+        <el-button
+          v-for="(item, index) in columnOptions"
+          :key="index"
+          class="column-btn"
+          :title="item.title"
+          :disabled="item.disabled"
+          @click="modifyColumnNum(item)"
+        >
+          <i
+            :class="[
+              'icon',
+              form.columnNumber == item.value
+                ? `icon-column-${item.label}-act`
+                : `icon-column-${item.label}`
+            ]"
+          ></i>
+        </el-button>
+      </el-form-item>
+      <!-- <el-form-item label-width="0px">
+        <el-checkbox v-model="form.aOrB" disabled>启用A/B卷</el-checkbox>
+      </el-form-item> -->
+      <el-form-item label="禁答区域">
+        <el-checkbox
+          v-model="form.showForbidArea"
+          @change="showForbidAreaChange"
+          >启用</el-checkbox
+        >
+      </el-form-item>
+      <el-form-item label="大题数">
+        <ul class="topicno-list" v-if="topicSeries.length">
+          <li>{{ topicSeries.length }}</li>
+        </ul>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, mapActions } from "vuex";
+import { objAssign } from "../plugins/utils";
+
+const COLUMN_OPTIONS = [
+  {
+    value: 1,
+    title: "一栏",
+    label: "one",
+    sizeValid: ["A4"],
+    disabled: false
+  },
+  {
+    value: 2,
+    title: "二栏",
+    label: "two",
+    sizeValid: ["A3", "A4"],
+    disabled: false
+  },
+  {
+    value: 3,
+    title: "三栏",
+    label: "three",
+    sizeValid: ["A3"],
+    disabled: false
+  },
+  {
+    value: 4,
+    title: "四栏",
+    label: "four",
+    sizeValid: ["A3"],
+    disabled: false
+  }
+];
+
+export default {
+  name: "page-prop-edit",
+  data() {
+    return {
+      columnOptions: [],
+      pageSizeOptions: ["A3"],
+      // pageSizeOptions: ["A3", "A4"],
+      form: {
+        pageSize: "A3",
+        columnNumber: 2,
+        columnGap: 4,
+        aOrB: false,
+        showForbidArea: false
+      },
+      prePageSize: "A3"
+    };
+  },
+  computed: {
+    ...mapState("card", ["curPageNo", "pages", "cardConfig", "topicSeries"]),
+    curPage() {
+      return this.pages[this.curPageNo];
+    }
+    // aOrBDisabled() {
+    //   return this.cardConfig.hasOwnProperty("aOrBSystem");
+    // }
+  },
+  watch: {
+    cardConfig: {
+      immediate: true,
+      handler(val) {
+        this.form = objAssign(this.form, val);
+        this.prePageSize = this.form.pageSize;
+        this.columnOptions = COLUMN_OPTIONS.filter(item =>
+          item.sizeValid.includes(this.form.pageSize)
+        );
+        if (this.form.pageSize === "A3") {
+          this.columnOptions[2].disabled = val.examNumberStyle === "fill";
+        }
+      }
+    }
+  },
+  methods: {
+    ...mapMutations("card", [
+      "setPages",
+      "setTopics",
+      "setCurElement",
+      "setCardConfig",
+      "setTopicSeries"
+    ]),
+    ...mapActions("card", ["rebuildPages", "resetElementProp"]),
+    modifyColumnNum(item) {
+      this.$confirm(
+        "此操作会导致当前题卡编辑的所有元素清空, 是否继续?",
+        "提示",
+        {
+          type: "warning"
+        }
+      )
+        .then(() => {
+          this.columnNumChange(item.value);
+        })
+        .catch(() => {});
+    },
+    columnNumChange(val) {
+      this.form.columnNumber = val;
+      this.setCardConfig(this.form);
+      this.setPages([]);
+      this.setTopics([]);
+      this.setTopicSeries([]);
+      this.$emit("init-page");
+    },
+    showForbidAreaChange() {
+      this.setCardConfig(this.form);
+    },
+    configChange() {
+      this.setCardConfig(this.form);
+      this.$nextTick(() => {
+        this.rebuildPages();
+        this.setCurElement({});
+        this.$nextTick(() => {
+          this.resetElementProp(true);
+        });
+      });
+    },
+    modifyPageSize() {
+      this.$confirm("此操作将会重置当前页面所有元素信息, 是否继续?", "提示", {
+        type: "warning"
+      })
+        .then(() => {
+          this.columnOptions = COLUMN_OPTIONS.filter(item =>
+            item.sizeValid.includes(this.form.pageSize)
+          );
+          this.form.columnNumber = this.columnOptions[0].value;
+          this.configChange();
+        })
+        .catch(() => {
+          this.form.pageSize = this.prePageSize;
+        });
+    }
+  }
+};
+</script>

src/modules/exam/components/createExamAndPrintTask/InfoPrintTask.vue

@@ -200,7 +200,7 @@
             <el-button
               class="btn-danger"
               type="text"
-              @click="toDelete(scope.row)"
+              @click="toDelete(scope.$index)"
               >取消</el-button
             >
             <el-button
@@ -520,10 +520,8 @@ export default {
 
       this.updatePackageInfos();
     },
-    toDelete(row) {
-      this.tableData = this.tableData.filter(
-        item => item.classId !== row.classId
-      );
+    toDelete(index) {
+      this.tableData.splice(index, 1);
       this.updatePackageInfos();
       if (!this.tableData.length) {
         this.$refs.ModifyExamStudent.clearSelectedExamObjectType();