题卡编辑调整

package.json

@@ -19,6 +19,7 @@
     "bootstrap": "^4.6.0",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.0",
+    "html2canvas": "^1.4.1",
     "js-md5": "^0.7.3",
     "lodash": "^4.17.15",
     "moment": "^2.29.1",

src/modules/card/assets/styles/base.scss

@@ -1,482 +0,0 @@
-/* reset */
-body,
-div,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-input,
-p,
-tr,
-th,
-td,
-span,
-a,
-header,
-footer,
-i {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}
-li {
-  list-style: none;
-}
-em,
-i,
-u {
-  font-style: normal;
-}
-input {
-  outline: none;
-  border: none;
-  background: rgba(245, 245, 245, 1);
-  font-family: $--font-family;
-}
-input::-webkit-input-placeholder,
-input::-moz-placeholder,
-input:-ms-input-placeholder,
-input:-moz-placeholder {
-  font-size: 12px;
-  font-weight: bold;
-  color: $--color-text-gray-4;
-}
-button,
-textarea {
-  font-family: $--font-family;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 100%;
-}
-fieldset,
-img {
-  border: 0;
-}
-abbr {
-  border: 0;
-  font-variant: normal;
-}
-a {
-  text-decoration: none;
-  color: inherit;
-  *color: $--color-text-gray-3;
-}
-img {
-  vertical-align: middle;
-}
-
-/* common-style */
-input:-webkit-autofill {
-  box-shadow: 0 0 0 1000px white inset;
-}
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="number"]:focus,
-textarea:focus {
-  box-shadow: 0 0 0 1000px white inset;
-}
-
-/* browse style */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-  background: transparent;
-}
-::-webkit-scrollbar-button {
-  display: none;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background: #666;
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-::-webkit-scrollbar-resizer {
-  background: transparent;
-}
-
-body {
-  font-family: $--font-family;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: $--font-size-base;
-  color: $--color-text-dark-1;
-}
-
-/* part */
-.part-box {
-  margin-bottom: 20px;
-  background-color: #fff;
-  border-radius: $--border-radius;
-
-  &-border {
-    border: 1px solid $--color-border;
-  }
-  &-pad {
-    padding: 20px;
-  }
-
-  &-filter {
-    padding: 20px 20px 5px 20px;
-
-    .el-form-item {
-      margin-bottom: 15px;
-    }
-    .el-form-item__label {
-      display: none;
-    }
-  }
-  &-gray {
-    background-color: $--color-text-gray-7;
-  }
-
-  &-flex {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-  }
-
-  &-action {
-    padding-bottom: 15px;
-    white-space: nowrap;
-    display: flex;
-    align-items: flex-end;
-  }
-  &-tips {
-    font-size: 16px;
-    line-height: 25px;
-    color: $--color-text-dark-1;
-    margin-bottom: 15px;
-  }
-
-  &-head {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    min-height: 30px;
-    margin: -10px 0 10px -10px;
-    color: $--color-text-dark;
-
-    > h3 {
-      font-size: 17px;
-    }
-    .el-icon-question {
-      margin-left: 10px;
-      font-size: 16px;
-      color: $--color-text-gray-5;
-      cursor: pointer;
-
-      &:hover {
-        color: #fe8652;
-      }
-    }
-  }
-}
-.part-title {
-  font-size: 16px;
-  font-weight: bold;
-  padding: 15px 20px;
-  line-height: 30px;
-  overflow: hidden;
-
-  h2 {
-    float: left;
-  }
-  &-infos {
-    float: right;
-  }
-}
-.part-body {
-  padding: 25px;
-}
-.part-page {
-  margin-top: 15px;
-  text-align: right;
-}
-.part-none {
-  padding: 100px;
-  font-size: 20px;
-  color: $--color-text-gray-3;
-  text-align: center;
-}
-// box-justify
-.box-justify {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-// page-head
-.page-head {
-  margin-bottom: 20px;
-  color: $--color-text-dark;
-  &-flex {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-  }
-
-  > h2 {
-    font-size: 20px;
-  }
-  .el-icon-question {
-    margin-left: 10px;
-    font-size: 16px;
-    color: $--color-text-gray-5;
-    cursor: pointer;
-
-    &:hover {
-      color: #fe8652;
-    }
-  }
-}
-
-/* table */
-.table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-  text-align: left;
-
-  &.table-white {
-    background-color: #fff;
-  }
-
-  th {
-    padding: 12px;
-    line-height: 1.2;
-    letter-spacing: 1px;
-    color: $--color-text-gray-2;
-    border: 1px solid $--color-border;
-  }
-  td {
-    padding: 14px;
-    line-height: 1.2;
-    color: $--color-text-dark;
-    border: 1px solid $--color-border;
-
-    &.td-link {
-      span {
-        cursor: pointer;
-        &:hover {
-          color: $--color-text-gray;
-        }
-      }
-    }
-  }
-  .td-th {
-    font-weight: 600;
-    color: $--color-text-gray;
-  }
-
-  &--border {
-    border: 1px solid $--color-border;
-    border-radius: 10px;
-    th {
-      background-color: #fcfcfd;
-      border: none;
-      border-bottom: 1px solid $--color-border;
-    }
-    td {
-      border: none;
-      border-bottom: 1px solid $--color-border;
-    }
-  }
-}
-
-/* list */
-.list-lr-right {
-  float: right;
-  width: 300px;
-}
-.list-lr-left {
-  margin-right: 320px;
-}
-
-.vlcode {
-  height: 36px;
-}
-.vlcode-left {
-  margin-right: 135px;
-}
-.vlcode-right {
-  float: right;
-  width: 120px;
-}
-
-// color
-.color-primary {
-  color: $--color-primary !important;
-}
-.color-success {
-  color: $--color-success;
-}
-.color-warning {
-  color: $--color-warning;
-}
-.color-danger {
-  color: $--color-danger;
-}
-.color-info {
-  color: $--color-text-gray-1;
-}
-.color-dark {
-  color: $--color-dark;
-}
-.color-gray {
-  color: $--color-text-gray;
-}
-.color-gray-2 {
-  color: $--color-text-gray-2;
-}
-.color-white {
-  color: #fff;
-}
-
-// text
-.text-center {
-  text-align: center;
-}
-.text-left {
-  text-align: left;
-}
-.text-right {
-  text-align: right;
-}
-
-// other
-.btn-danger {
-  &.el-button--text {
-    color: $--color-danger !important;
-
-    &:hover {
-      font-weight: 600;
-      color: mix(#000, $--color-danger, 20%) !important;
-    }
-  }
-}
-.btn-primary {
-  &.el-button--text:not(.is-disabled) {
-    color: $--color-text-dark-1 !important;
-    &:hover {
-      font-weight: 600;
-      color: $--color-primary !important;
-    }
-  }
-}
-
-.btn-white {
-  background-color: #fff !important;
-  color: #999 !important;
-}
-.font-bold {
-  font-weight: bold;
-}
-.table-head-bg {
-  th {
-    background-color: #f6f6f6;
-    color: $--color-text-gray;
-  }
-}
-
-.tab-btns {
-  .el-button {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-
-    &:first-child {
-      border-bottom-left-radius: 8px;
-    }
-
-    &:last-child {
-      border-bottom-right-radius: 8px;
-    }
-  }
-
-  .el-button + .el-button {
-    margin-left: 10px;
-  }
-}
-
-.cont-link {
-  color: $--color-primary;
-  cursor: pointer;
-  &:hover {
-    color: $--color-success;
-  }
-}
-.ml-1 {
-  margin-left: 5px;
-}
-.ml-2 {
-  margin-left: 10px;
-}
-.mr-1 {
-  margin-right: 5px;
-}
-.mr-2 {
-  margin-right: 10px;
-}
-.mr-4 {
-  margin-right: 20px;
-}
-.mb-0 {
-  margin-bottom: 0;
-}
-.mb-2 {
-  margin-bottom: 10px;
-}
-.mb-4 {
-  margin-bottom: 20px;
-}
-
-// other
-.tips-info {
-  font-size: 12px;
-  line-height: 20px;
-  color: $--color-text-gray-2;
-}
-.tips-dark {
-  color: $--color-text-gray;
-}
-.tips-error {
-  color: $--color-danger;
-}
-.tips-icon {
-  display: inline-block;
-  vertical-align: middle;
-  color: $--color-text-gray-3;
-  font-size: 18px;
-  margin: 0 10px;
-  cursor: pointer;
-}
-.form-item-content {
-  color: $--color-text-gray-2;
-}
-.inline-block {
-  display: inline-block;
-  vertical-align: top;
-}
-.custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 12px;
-  padding-right: 8px;
-}

src/modules/card/assets/styles/card-preview.scss

@@ -504,14 +504,6 @@
           float: left;
           background-color: #fff;
           text-align: justify;
-
-          &::after {
-            content: "";
-            display: inline-block;
-            width: 100%;
-            height: 0;
-            line-height: 0;
-          }
         }
         &:nth-of-type(2) {
           float: left;
@@ -1157,13 +1149,13 @@
         background-color: #fff;
         text-align: justify;
 
-        &::after {
-          content: "";
-          display: inline-block;
-          width: 100%;
-          height: 0;
-          line-height: 0;
-        }
+        // &::after {
+        //   content: "";
+        //   display: inline-block;
+        //   width: 100%;
+        //   height: 0;
+        //   line-height: 0;
+        // }
       }
       &:nth-of-type(2) {
         width: 10px;

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

@@ -1,619 +0,0 @@
-/*
-* element-ui不管是自行构建的主题还是动态设置的主题，
-* 产生的css文件中存在近乎1/3的冗余样式，过于累赘，不如直接覆盖样式简洁。
-*/
-// dialog
-.el-dialog {
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid #c8c8ca;
-  box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.1);
-
-  &.is-fullscreen {
-    border-radius: 0;
-
-    .el-dialog__header {
-      width: 100%;
-      position: fixed;
-      z-index: 9;
-      background-color: #fff;
-      border-bottom: 1px solid $--color-border;
-    }
-    .el-dialog__body {
-      padding-top: 90px;
-    }
-  }
-}
-.el-dialog__header {
-  padding: 15px 20px;
-  .el-dialog__title {
-    color: $--color-text-dark;
-    font-size: 16px;
-    line-height: 19px;
-  }
-  .el-dialog__headerbtn {
-    top: 15px;
-    width: 16px;
-    height: 16px;
-    background-image: url(../images/icon-close.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-
-    &:hover {
-      background-image: url(../images/icon-close-act.png);
-    }
-
-    .el-dialog__close {
-      display: none;
-    }
-  }
-}
-.el-dialog__body {
-  padding: 30px 40px;
-  position: relative;
-  border-top: 1px solid $--color-border;
-  color: $--color-text-dark-1;
-
-  .el-form-item__label {
-    padding-right: 2px;
-  }
-  .el-input-tips {
-    color: rgba(187, 187, 187, 1);
-    margin-left: 13px;
-  }
-}
-.el-dialog__footer {
-  overflow: hidden;
-  .el-button {
-    width: 100px;
-    border-radius: 8px;
-    float: right;
-    margin-left: 10px;
-  }
-}
-
-// .opacity-dialog
-.opacity-dialog {
-  .el-dialog {
-    background-color: transparent;
-  }
-  .el-dialog__header,
-  .el-dialog__footer {
-    display: none;
-  }
-  .el-dialog__body {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    padding: 0;
-    background-color: transparent;
-  }
-}
-
-// form
-.el-form {
-  &-item {
-    &__error {
-      font-size: 12px;
-      color: rgba(254, 108, 105, 1);
-    }
-    &__content {
-      .el-table {
-        line-height: 1;
-      }
-    }
-  }
-  // form-info
-  &.form-info {
-    .el-form-item {
-      margin-bottom: 0;
-
-      .el-form-item__label {
-        color: $--color-text-gray-2;
-      }
-    }
-  }
-  &--label-top {
-    .el-form-item__label {
-      line-height: 20px;
-      padding-bottom: 5px;
-      font-size: 12px;
-    }
-  }
-}
-// input
-.el-input {
-  &.is-focus {
-    .el-input__inner {
-      border-color: $--color-primary !important;
-    }
-  }
-  &.is-disabled {
-    .el-input__inner {
-      color: $--color-text-gray-2;
-    }
-  }
-  .el-input__inner {
-    border-radius: 8px;
-    border-color: #ddd;
-    background-color: #fff;
-  }
-  // .el-input__suffix {
-  //   right: 0;
-  //   border-left: 1px solid #ddd;
-  // }
-}
-// textarea
-.el-textarea {
-  &.is-disabled {
-    .el-textarea__inner {
-      color: $--color-text-gray-2;
-    }
-  }
-}
-.el-select {
-  .el-input__suffix {
-    right: 0;
-    border-left: 1px solid #ddd;
-  }
-  .el-input {
-    .el-select__caret {
-      width: 30px;
-    }
-    .el-icon-arrow-up:before {
-      font-size: 12px;
-      content: "\e78f";
-    }
-  }
-}
-.el-select-dropdown {
-  &.popper-filter {
-    .el-scrollbar {
-      display: block !important;
-      padding-top: 52px;
-    }
-    .el-select-filter {
-      padding: 0 10px;
-      position: absolute;
-      width: 100%;
-      top: 10px;
-      left: 0;
-      z-index: 9;
-    }
-  }
-}
-// upload
-.el-upload,
-.el-upload-dragger {
-  width: 100%;
-}
-// radio
-.el-radio-button {
-  &:hover {
-    .el-radio-button__inner {
-      color: $--color-primary;
-    }
-  }
-}
-.el-radio-button__orig-radio:checked + .el-radio-button__inner {
-  color: $--color-white;
-  border-color: $--color-primary;
-  background: $--color-primary;
-}
-// button
-.el-button {
-  border-radius: $--border-radius;
-
-  > .icon {
-    margin-right: 5px;
-  }
-  > span {
-    display: inline-block;
-  }
-  &.is-disabled {
-    color: $--color-text-gray-3 !important;
-    background: $--color-background !important;
-    border: 1px solid $--color-border !important;
-  }
-}
-
-.el-button + .popover-button,
-.popover-button + .el-button {
-  margin-left: 10px;
-}
-.el-button + .el-button {
-  margin-left: 10px;
-}
-.el-button--text + .el-button--text {
-  margin-left: 5px;
-}
-.el-button--small {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  font-size: 12px;
-}
-.el-button--text {
-  color: $--color-text-gray-2;
-
-  & + .el-button--text {
-    margin-left: 10px;
-  }
-}
-.el-button--info {
-  background-color: $--color-cyan;
-  border-color: $--color-cyan;
-
-  &:hover,
-  &:focus {
-    background-color: $--color-cyan-light;
-    border-color: $--color-cyan-light;
-  }
-}
-.el-button--primary {
-  background-color: $--color-primary;
-  border-color: $--color-primary;
-
-  &:hover,
-  &:focus {
-    background-color: $--color-primary-light;
-    border-color: $--color-primary-light;
-  }
-}
-.el-button--success {
-  background-color: $--color-success;
-  border-color: $--color-success;
-
-  &:hover,
-  &:focus {
-    background-color: $--color-success-light;
-    border-color: $--color-success-light;
-  }
-}
-
-// table
-.el-table {
-  color: $--color-text-dark-1;
-
-  thead th {
-    color: $--color-text-gray-2;
-  }
-
-  thead.is-group th {
-    background-color: $--color-white;
-  }
-
-  tr.el-table__row {
-    color: $--color-text-dark;
-  }
-  td,
-  th {
-    border-color: $--color-border !important;
-    padding: 14px 0;
-    font-weight: 500;
-  }
-  .el-table__row.row-danger {
-    color: $--color-danger;
-  }
-  &.el-table--noback {
-    tr.el-table__row {
-      background-color: $--color-white;
-    }
-  }
-
-  .cell-head {
-    display: inline-block;
-    vertical-align: middle;
-    line-height: 1.3;
-  }
-  // caret-wrapper
-  .caret-wrapper {
-    width: 20px;
-    height: 20px;
-    top: -1px;
-    .sort-caret {
-      &.ascending {
-        top: -1px;
-      }
-      &.descending {
-        bottom: -1px;
-      }
-    }
-  }
-  // action-column
-  td.action-column {
-    padding-left: 10px;
-    padding-right: 10px;
-    .cell {
-      padding: 0;
-      margin: 0 -5px;
-    }
-    .el-button--text {
-      padding: 0;
-      margin: 0 5px;
-      border: none !important;
-      outline: none !important;
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-  }
-}
-.el-table--border {
-  border-radius: 10px;
-  th {
-    padding: 12px 0;
-    background-color: #fcfcfd;
-    border-right: none;
-  }
-  td {
-    border-right: none;
-  }
-}
-// el-checkbox
-.el-checkbox {
-  .el-checkbox__label {
-    color: $--color-text-gray-2 !important;
-  }
-  .el-checkbox__inner::after {
-    border-width: 2px;
-  }
-}
-.el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: $--color-white;
-  border-color: $--color-primary;
-
-  &::after {
-    border-color: $--color-primary;
-  }
-}
-.el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  background-color: $--color-white;
-  border-color: $--color-primary;
-  &::before {
-    background-color: $--color-primary;
-  }
-}
-
-.el-radio {
-  .el-radio__label {
-    color: $--color-text-gray-2 !important;
-  }
-}
-.el-radio__input.is-checked .el-radio__inner {
-  background-color: $--color-white;
-  border-color: $--color-primary;
-  &::after {
-    width: 6px;
-    height: 6px;
-    background-color: $--color-primary;
-  }
-}
-
-// el-switch
-.el-switch {
-  &.is-checked {
-    .el-switch__core {
-      background-color: $--color-primary;
-      border-color: $--color-primary;
-    }
-  }
-}
-
-// el-pagination
-.el-pagination-li {
-  min-width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: $--color-white;
-  border: 1px solid #e1e3eb;
-}
-.el-pagination {
-  padding: 0;
-  .el-pagination__total {
-    float: left;
-  }
-  span:not([class*="suffix"]) {
-    line-height: 32px;
-    height: 32px;
-  }
-  &.is-background {
-    .btn-prev,
-    .btn-next {
-      color: $--color-text-gray-2;
-      margin: 0 5px;
-      @extend .el-pagination-li;
-    }
-    .btn-prev:disabled,
-    .btn-next:disabled {
-      opacity: 0.7;
-    }
-
-    .el-pager li {
-      color: $--color-text-gray-2;
-      margin: 0 5px;
-      padding: 0 8px;
-      line-height: 32px;
-
-      @extend .el-pagination-li;
-      &:not(.disabled).active {
-        color: #fff;
-        background-color: $--color-primary;
-      }
-    }
-  }
-}
-// el-message-box
-.el-message-box {
-  width: 320px;
-  background-color: #f6f6f6;
-  border-radius: 10px;
-  &__title {
-    display: none;
-  }
-  &__headerbtn {
-    display: none;
-  }
-  &__content {
-    text-align: center;
-
-    .el-message-box__status {
-      position: relative;
-      top: 0;
-      height: 48px;
-      width: 48px;
-      transform: none;
-      margin-bottom: 10px;
-
-      &.el-icon-warning {
-        border-radius: 50%;
-        &::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background-image: url(../images/icon-doubt.png);
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-    }
-    .el-message-box__message {
-      padding: 0;
-    }
-  }
-  &__btns {
-    height: 75px;
-    padding: 30px 20px 10px;
-    text-align: center;
-
-    > .el-button {
-      width: 100px;
-    }
-  }
-}
-
-.alert-message {
-  .el-message-box__btns {
-    text-align: center;
-    > .el-button {
-      position: relative;
-      left: auto;
-      top: 0;
-      margin: 0;
-    }
-  }
-}
-// .el-message
-.el-message-loading {
-  border-color: mix($--color-white, $--color-success, 80%);
-  background-color: mix($--color-white, $--color-success, 90%);
-}
-// el-date-editor
-.el-date-editor {
-  border-radius: 8px;
-  .el-range-separator {
-    width: auto;
-  }
-  .el-range-input {
-    background-color: transparent;
-  }
-}
-
-// el-step
-.el-step {
-  &__title.is-success,
-  &__description.is-success,
-  &__title.is-process,
-  &__description.is-process {
-    color: $--color-success;
-  }
-  &__title.is-process {
-    font-weight: normal;
-  }
-  &__head.is-success {
-    .el-step__line {
-      background-color: $--color-success;
-    }
-    .el-step__icon.is-text {
-      color: $--color-white;
-      border-color: $--color-success;
-      background-color: $--color-success;
-    }
-  }
-  &__head.is-process {
-    .el-step__icon.is-text {
-      color: $--color-success;
-      border-color: $--color-success;
-    }
-  }
-
-  &__title.is-wait,
-  &__description.is-wait {
-    color: $--color-text-gray-2;
-  }
-  &__head.is-wait {
-    .el-step__icon.is-text {
-      color: $--color-text-gray-2;
-      border-color: #e1e3eb;
-      background-color: #e1e3eb;
-    }
-  }
-}
-// el-popover
-.el-popper-dark {
-  background-color: $--color-text-dark-1;
-  color: #fff;
-  font-size: 12px;
-  line-height: 18px;
-  padding: 16px;
-  border: none;
-}
-.el-popper-dark {
-  box-shadow: 0px 10px 10px 0px rgba(54, 61, 89, 0.2);
-}
-.el-popper-dark[x-placement^="right"] .popper__arrow {
-  border-right-color: $--color-text-dark-1;
-
-  &::after {
-    border-right-color: $--color-text-dark-1;
-  }
-}
-.el-popper-dark[x-placement^="top"] .popper__arrow {
-  border-top-color: $--color-text-dark-1;
-
-  &::after {
-    border-top-color: $--color-text-dark-1;
-  }
-}
-.el-popper-dark[x-placement^="bottom"] .popper__arrow {
-  border-bottom-color: $--color-text-dark-1;
-
-  &::after {
-    border-bottom-color: $--color-text-dark-1;
-  }
-}
-.el-popper-dark[x-placement^="left"] .popper__arrow {
-  border-left-color: $--color-text-dark-1;
-
-  &::after {
-    border-left-color: $--color-text-dark-1;
-  }
-}
-// popper-list
-.popper-list {
-  min-width: auto;
-
-  .el-button {
-    display: block;
-    width: 100%;
-    margin: 0;
-    &:not(:last-child) {
-      margin-bottom: 5px;
-    }
-  }
-}

src/modules/card/assets/styles/home.scss

@@ -1,341 +0,0 @@
-/* home */
-.home {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: auto;
-}
-.home-body {
-  position: absolute;
-  left: 0;
-  top: 50px;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
-  background: $--color-background;
-  z-index: 98;
-}
-.home-main {
-  position: relative;
-  padding: 20px 30px 50px 250px;
-  min-height: 100%;
-}
-
-/* navs */
-.home-navs {
-  position: absolute;
-  width: 220px;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-  overflow: auto;
-  font-size: 14px;
-  background: $--color-white;
-  border-top-right-radius: $--border-radius-huge;
-  border-bottom-right-radius: $--border-radius-huge;
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    height: 100%;
-    width: 1px;
-    right: 0;
-    bottom: 0;
-    z-index: 9;
-    background: rgba(229, 229, 229, 1);
-  }
-
-  .head-logo {
-    padding: 0 40px;
-    font-size: 20px;
-    line-height: 40px;
-    text-align: center;
-    &-content {
-      display: block;
-      padding: 30px 0;
-      border-bottom: 1px solid #eff0f5;
-    }
-    img {
-      display: block;
-      max-width: 160px;
-      height: 40px;
-    }
-  }
-
-  .nav-part {
-    padding: 20px 0;
-    border-top: 1px solid $--color-border;
-  }
-
-  .nav-head {
-    padding: 10px 0;
-    color: $--color-text-gray-2;
-    font-size: $--font-size-base;
-    line-height: 20px;
-    position: relative;
-    font-weight: 500;
-    > span {
-      display: inline-block;
-      vertical-align: top;
-      font-weight: 600;
-    }
-    &-right-icon {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      color: #d3d5e0;
-      font-size: 12px;
-    }
-  }
-
-  // .nav-list {
-  //   padding: 0 0 0 23px;
-  // }
-  .nav-item {
-    overflow: hidden;
-    color: $--color-text-dark-1;
-    &-main {
-      padding: 10px 0;
-      line-height: 20px;
-      position: relative;
-      font-weight: 500;
-      cursor: pointer;
-      &-act,
-      &:hover {
-        font-weight: 600;
-        color: $--color-primary;
-      }
-    }
-    &-icon {
-      display: block;
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      top: 50%;
-      margin-top: -10px;
-      text-align: center;
-      line-height: 20px;
-    }
-    &-icon-right {
-      right: 5px;
-    }
-    &-info {
-      display: block;
-      position: absolute;
-      padding: 0 3px;
-      min-width: 16px;
-      height: 16px;
-      font-size: 12px;
-      line-height: 16px;
-      top: 12px;
-      right: 40px;
-      background-color: $--color-warning;
-      color: #fff;
-      text-align: center;
-      border-radius: 3px;
-    }
-  }
-}
-.el-menu-home {
-  padding-top: 20px;
-  .el-submenu {
-    margin-bottom: 20px;
-  }
-  .el-submenu__title {
-    padding: 0 40px !important;
-    height: 50px;
-    line-height: 50px;
-    font-weight: 600;
-
-    > .icon {
-      margin-right: 12px;
-    }
-  }
-  .el-menu-item {
-    height: auto;
-    min-height: 40px;
-    line-height: 20px;
-    padding: 10px 40px !important;
-    white-space: normal;
-  }
-  .el-menu-item.is-active {
-    font-weight: 600;
-  }
-  .el-submenu__icon-arrow {
-    right: 40px;
-  }
-}
-
-/* head */
-.home-header {
-  position: absolute;
-  width: 100%;
-  height: 50px;
-  top: 0;
-  left: 0;
-  z-index: 99;
-  color: #fff;
-  padding-left: 220px;
-  background-color: $--color-text-dark;
-  overflow: hidden;
-
-  .menu-list {
-    li {
-      display: inline-block;
-      vertical-align: top;
-      padding: 10px 25px;
-      height: 50px;
-      line-height: 30px;
-      opacity: 0.4;
-      font-size: 16px;
-      position: relative;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-        opacity: 1;
-      }
-
-      &.menu-item-act {
-        opacity: 1;
-      }
-
-      span {
-        display: inline-block;
-        vertical-align: top;
-        margin-left: 8px;
-      }
-      .icon {
-        margin-top: -3px;
-      }
-    }
-  }
-  .head-menu {
-    float: left;
-  }
-  .head-user {
-    float: right;
-    padding-right: 10px;
-    li {
-      padding: 10px;
-    }
-    .menu-item-account {
-      white-space: nowrap;
-      padding: 10px;
-      span {
-        max-width: 156px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-  // .head-menu-btn
-  .head-menu-btn {
-    display: none;
-    float: right;
-    line-height: 36px;
-    padding: 12px 15px;
-    text-align: center;
-    > span {
-      display: block;
-      height: 36px;
-      width: 36px;
-      border-radius: 5px;
-      background-color: rgba($color: #fff, $alpha: 0.3);
-    }
-    i {
-      font-size: 22px;
-      vertical-align: middle;
-    }
-  }
-}
-// menu-dialog
-.menu-dialog {
-  .el-dialog.is-fullscreen {
-    border-radius: 0;
-    box-shadow: none;
-
-    .el-dialog__body {
-      padding: 10px;
-      &::after {
-        display: none;
-      }
-    }
-  }
-
-  .menu-logout {
-    padding: 10px;
-    width: 52px;
-    height: 52px;
-    margin: 0 auto;
-    border: 1px solid $--color-text-gray-3;
-    border-radius: 50%;
-    font-size: 30px;
-    text-align: center;
-    color: $--color-text-gray-3;
-    cursor: pointer;
-
-    &:hover {
-      border-color: $--color-danger;
-      color: $--color-danger;
-    }
-  }
-}
-
-// home-breadcrumb
-.home-breadcrumb {
-  margin-bottom: 18px;
-  font-size: 12px;
-  font-weight: 500;
-  color: $--color-text-gray-2;
-
-  .breadcrumb-tips {
-    display: inline-block;
-    vertical-align: middle;
-    > i {
-      margin-top: -2px;
-      margin-right: 8px;
-    }
-  }
-  .el-breadcrumb {
-    line-height: 16px;
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 12px;
-
-    .el-breadcrumb__item {
-      .el-breadcrumb__inner {
-        color: $--color-text-gray-2;
-      }
-    }
-    .el-breadcrumb__separator {
-      margin: 0 5px;
-    }
-  }
-}
-
-// home-view
-
-/* view-footer */
-.home-footer {
-  position: absolute;
-  width: 100%;
-  height: 60px;
-  bottom: 0;
-  left: 0;
-  z-index: auto;
-  padding: 20px 0;
-  line-height: 20px;
-  color: $--color-text-gray-3;
-  text-align: center;
-  font-size: 13px;
-  a {
-    color: $--color-text-gray-3;
-  }
-  a:hover {
-    color: $--color-text-gray;
-  }
-}

src/modules/card/assets/styles/index.scss

@@ -1,10 +0,0 @@
-@import "./variables.scss";
-@import "./base.scss";
-@import "./icons.scss";
-@import "./home.scss";
-
-// card
-@import "./card-preview.scss";
-@import "./card-design.scss";
-// element-ui
-@import "./element-ui-costom.scss";

src/modules/card/components/CardDesign.vue

@@ -234,7 +234,6 @@ export default {
         return {
           pages: [],
           cardConfig: {},
-          paperParams: {},
         };
       },
     },
@@ -259,7 +258,6 @@ export default {
       "pageDefaultElems",
       "topics",
       "pages",
-      "paperParams",
       "curElement",
       "curPage",
       "curPageNo",
@@ -410,9 +408,8 @@ export default {
           const data = JSON.stringify(
             {
               version: CARD_VERSION,
-              cardType: "STANDARD",
+              cardType: "PAPER",
               cardConfig: this.cardConfig,
-              paperParams: this.paperParams,
               pages: this.pages,
             },
             (k, v) => (k.startsWith("_") ? undefined : v)
@@ -426,7 +423,14 @@ export default {
       this.isSubmit = true;
       const model = await this.getCardJson();
       const datas = this.getCardData("", model);
-      this.$emit("on-preview", datas);
+      // this.$emit("on-preview", datas);
+
+      // TODO:LINSHI:
+      window.sessionStorage.setItem("cardData", JSON.stringify(datas));
+      this.$router.push({
+        name: "CardPreview",
+        params: { cardId: "1", viewType: "view" },
+      });
     },
     async toSave() {
       if (!this.checkCardValid()) return;
@@ -444,7 +448,6 @@ export default {
       this.$emit("on-submit", {
         cardConfig: this.cardConfig,
         pages: this.pages,
-        paperParams: this.paperParams,
       });
     },
     toExit() {

src/modules/card/components/CardView.vue

@@ -57,9 +57,23 @@
                   </div>
                 </div>
               </div>
+              <page-number
+                type="text"
+                :total="pages.length * 2"
+                :current="pageNo * 2 + columnNo + 1"
+              ></page-number>
             </div>
           </div>
         </div>
+        <!-- side edit erea -->
+        <div class="page-main-side">
+          <free-element-preview
+            v-for="element in page.sides"
+            :key="element.id"
+            class="page-side-element"
+            :data="element"
+          ></free-element-preview>
+        </div>
         <!-- outer edit area -->
         <div class="page-main-outer">
           <page-number
@@ -67,11 +81,6 @@
             :total="pages.length"
             :current="pageNo + 1"
           ></page-number>
-          <page-number
-            type="text"
-            :total="pages.length"
-            :current="pageNo + 1"
-          ></page-number>
         </div>
       </div>
     </template>
@@ -80,13 +89,14 @@
 
 <script>
 import TopicElementPreview from "./TopicElementPreview";
+import FreeElementPreview from "./FreeElementPreview";
 import PageNumber from "./PageNumber";
 import previewTemp from "../previewTemp";
 import exchangeMixins from "../mixins/exchange";
 
 export default {
   name: "CardView",
-  components: { TopicElementPreview, PageNumber },
+  components: { TopicElementPreview, FreeElementPreview, PageNumber },
   mixins: [exchangeMixins],
   props: {
     pages: {

src/modules/card/components/RightClickMenu.vue

@@ -12,6 +12,9 @@
           <i class="el-icon-edit-outline"></i>
           {{ IS_CONTAINER_ELEMENT ? "编辑元素" : "编辑大题" }}
         </li>
+        <li v-if="IS_CONTAINER_ELEMENT" class="li-danger" @click="toDelete">
+          <i class="el-icon-delete"></i>删除元素
+        </li>
         <li
           v-if="IS_CONTAINER_ELEMENT && IS_EXPLAIN"
           @click="toCopyExplainElement"
@@ -201,12 +204,8 @@ export default {
       this.toRebuildPages();
     },
     removeSelectElement() {
-      if (this.curElement["container"]) {
-        this.removeElementChild(this.curElement);
-      } else {
-        this.removeElement(this.curElement);
-      }
-
+      if (!this.curElement["container"]) return;
+      this.removeElementChild(this.curElement);
       this.toRebuildPages();
     },
     toCopyExplainElement() {

src/modules/card/elements/explain/model.js

@@ -53,6 +53,7 @@ const getFullModel = (explainProp) => {
       topicNo: parent.topicNo,
       serialNumber: item,
       showTitle: !index,
+      elements: [],
       parent,
     });
 

src/modules/card/elements/fill-question/model.js

@@ -1,4 +1,9 @@
-import { getElementId, randomCode, objAssign } from "../../plugins/utils";
+import {
+  getElementId,
+  randomCode,
+  objAssign,
+  deepCopy,
+} from "../../plugins/utils";
 import { BOOLEAN_TYPE, ALPHABET } from "../../enumerate";
 
 const MODEL = {
@@ -32,7 +37,7 @@ function getChoiceList(data) {
 }
 
 const getModel = (presetData) => {
-  const model = objAssign(MODEL, presetData);
+  const model = objAssign(deepCopy(MODEL), presetData);
   model.id = getElementId();
   model.key = randomCode();
   return model;

src/modules/card/elements/grids/ElemGrids.vue

@@ -8,7 +8,7 @@
             :key="cindex"
             :style="styles"
           >
-            <div v-if="data.halving" style="paddingbottom: 100%"></div>
+            <div v-if="data.halving" :style="{ paddingBottom: '100%' }"></div>
           </td>
         </tr>
         <tr v-if="data.rowSpace" :key="`space-${rindex}`">

src/modules/card/enumerate.js

@@ -1,4 +1,4 @@
-export const CARD_VERSION = "2.0.0";
+export const CARD_VERSION = "1.0.0";
 
 export const EXAM_NUMBER_STYLE = {
   PRINT: "印刷条码",

src/modules/card/plugins/utils.js

@@ -1,5 +1,3 @@
-const deepmerge = require("deepmerge");
-
 /**
  * 判断对象类型
  * @param {*} obj 对象
@@ -25,9 +23,8 @@ function objTypeOf(obj) {
  * 深拷贝
  * @param {Object/Array} data 需要拷贝的数据
  */
-function deepCopy(data, options) {
-  const defObj = objTypeOf(data) === "array" ? [] : {};
-  return deepmerge(defObj, data, options || {});
+function deepCopy(data) {
+  return JSON.parse(JSON.stringify(data));
 }
 
 /**

src/modules/card/views/CardEdit.vue

@@ -147,9 +147,15 @@ export default {
       this.cardPreviewUrl = href;
     },
     registWindowSubmit() {
-      window.submitCardTemp = async (htmlContent, model) => {
+      window.submitCardTemp = async (htmlContent, model, cardImages) => {
+        if (!cardImages || !cardImages.length) {
+          this.$message.error("题卡图片生成失败！");
+          return;
+        }
+
         const datas = this.getCardData(htmlContent, model);
         datas.status = "SUBMIT";
+        datas.cardImages = cardImages;
         const result = await saveCard(datas, this.getRequestConfig()).catch(
           () => {}
         );

src/modules/card/views/CardPreview.vue

@@ -1,8 +1,7 @@
 <template>
   <div :class="classes">
-    <div v-if="IS_COMMON_CARD" id="preview-frame" class="preview-frame"></div>
     <card-view
-      v-if="!IS_COMMON_CARD && pages.length"
+      v-if="pages.length"
       ref="CardView"
       class="preview-body"
       :pages="pages"
@@ -15,6 +14,7 @@
 import CardView from "../components/CardView";
 import { cardDetail } from "../api";
 import { deepCopy } from "../plugins/utils";
+import html2canvas from "html2canvas";
 
 export default {
   name: "CardPreview",
@@ -26,7 +26,6 @@ export default {
       cardId: this.$route.params.cardId,
       cardConfig: {},
       pages: [],
-      IS_COMMON_CARD: false,
     };
   },
   computed: {
@@ -43,7 +42,12 @@ export default {
     if (this.isFrame) {
       this.initFrame();
     } else {
-      this.init();
+      // this.init();
+      // TODO:LINSHI:
+      const detData = JSON.parse(window.sessionStorage.getItem("cardData"));
+      const { cardConfig, pages } = JSON.parse(detData.content);
+      this.cardConfig = cardConfig;
+      this.pages = pages;
     }
   },
   methods: {
@@ -52,106 +56,55 @@ export default {
       if (!cardData) return;
 
       const { cardConfig, pages } = deepCopy(cardData);
-      let fieldInfos = {};
-      [...cardConfig.requiredFields, ...cardConfig.extendFields]
-        .filter((item) => item.enable)
-        .map((item) => {
-          fieldInfos[item.code] = "${" + item.code + "}";
-        });
-      if (cardConfig.examNumberStyle === "PRINT") {
-        fieldInfos.examNumber = "data:image/png;base64,${examNumber}";
-        fieldInfos.examNumberStr = "${examNumberStr}";
-      }
-
-      if (cardConfig.aOrB && cardConfig.paperType === "PRINT") {
-        fieldInfos.paperType = "data:image/png;base64,${paperType}";
-        fieldInfos.paperTypeName = "${paperTypeName}";
-      }
 
       this.cardConfig = cardConfig;
-      this.pages = this.appendFieldInfo(pages, fieldInfos);
+      this.pages = pages;
 
       this.$nextTick(() => {
-        const cardContentTemp = this.$refs.CardView.getPreviewTemp(
-          this.$el.outerHTML
-        );
-        const model = this.$refs.CardView.getPageModel(cardData);
-        window.parent &&
-          window.parent.submitCardTemp &&
-          window.parent.submitCardTemp(cardContentTemp, model);
+        this.buildData(cardData);
       });
     },
+    async buildData(cardData) {
+      const cardContentTemp = this.$refs.CardView.getPreviewTemp(
+        this.$el.outerHTML
+      );
+      const model = this.$refs.CardView.getPageModel(cardData);
+      const cardImages = await this.transformImags().catch(() => {});
+
+      window.parent &&
+        window.parent.submitCardTemp &&
+        window.parent.submitCardTemp(cardContentTemp, model, cardImages);
+    },
     async init() {
       const detData = await cardDetail(this.cardId);
-
-      this.IS_COMMON_CARD = detData.type === "GENERIC";
-      // 通卡展示
-      if (this.IS_COMMON_CARD) {
-        // TODO:通卡展示逻辑要调整
-        this.$nextTick(() => {
-          this.initHtmlTemp(detData.htmlContent);
-        });
-        return;
-      }
       // 常规卡展示
       if (!detData.content) {
         this.$message.error("很抱歉，当前题卡还没开始制作！");
         return;
       }
       const { cardConfig, pages } = JSON.parse(detData.content);
-      const fieldInfos = this.fetchFieldInfos(cardConfig, {});
 
       this.cardConfig = cardConfig;
-      this.pages = this.appendFieldInfo(pages, fieldInfos);
-    },
-    initHtmlTemp(htmlTemp) {
-      const iframeDom = document.createElement("iframe");
-      document.getElementById("preview-frame").appendChild(iframeDom);
-      const wwidth = window.innerWidth - 10;
-      const wheight = window.innerHeight - 10;
-      iframeDom.style.cssText = `width: ${wwidth}px;height: ${wheight}px;border:none;outline:none;`;
-      const iframeDoc = iframeDom.contentDocument;
-      iframeDoc.open();
-      iframeDoc.write(htmlTemp);
-      iframeDoc.close();
+      this.pages = pages;
     },
-    fetchFieldInfos(cardConfig, stdInfo) {
-      let fieldInfos = {};
-      const defContent = "相关信息";
-      const defNumber = "123456789";
-      [...cardConfig.requiredFields, ...cardConfig.extendFields]
-        .filter((item) => item.enable)
-        .map((item) => {
-          fieldInfos[item.code] = stdInfo[item.code] || defContent;
-        });
-      if (cardConfig.examNumberStyle === "PRINT") {
-        fieldInfos.examNumber = this.getBase64Barcode(
-          stdInfo["examNumber"] || defNumber
-        );
-        fieldInfos.examNumberStr = stdInfo["examNumber"] || defNumber;
-      }
-      if (cardConfig.aOrB && cardConfig.paperType === "PRINT") {
-        fieldInfos.paperType = this.getBase64Barcode(
-          stdInfo["paperType"] || defNumber
-        );
-        fieldInfos.paperTypeName = stdInfo["paperTypeName"] || "A";
-      }
+    async transformPageToImage(pageDom) {
+      const canvasDom = await html2canvas(pageDom, {
+        allowTaint: true,
+        imageTimeout: 3000,
+      });
 
-      return fieldInfos;
+      return canvasDom.toDataURL();
     },
-    getBase64Barcode(str) {
-      return str;
-    },
-    appendFieldInfo(pages, fieldInfos) {
-      pages.forEach((page, pageNo) => {
-        if (pageNo % 2) return;
-        const cardHeadElement = page.columns[0].elements[0];
-
-        if (cardHeadElement.type === "CARD_HEAD") {
-          cardHeadElement.fieldInfos = fieldInfos;
-        }
-      });
-      return pages;
+    async transformImags() {
+      const pageDoms = this.$el.querySelectorAll(".page-box");
+      let images = [];
+      for (let i = 0; i < pageDoms.length; i++) {
+        const pageDom = pageDoms[i];
+        const imgDataUrl = await this.transformPageToImage(pageDom);
+        images[i] = imgDataUrl;
+      }
+      console.log(images);
+      return images;
     },
   },
 };