1

src/assets/css/add-edit.scss

@@ -0,0 +1,426 @@
+.addEdit-block {
+  padding: 30px;
+  background: none;
+  width: 100%;
+}
+.add-update-preview {
+  border-radius: 10px;
+  padding: 40px 25% 40px 18%;
+  background: #ffffff;
+  border-color: #eee;
+  border-width: 1px;
+  border-style: solid;
+}
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+
+.search-box {
+  position: absolute;
+}
+
+.el-date-editor.el-input {
+  width: auto;
+}
+.add-update-preview ::v-deep .el-form-item {
+  border: 0px solid #eee;
+  padding: 0;
+  margin: 0 0 22px 0;
+  display: inline-block;
+  width: 100%;
+}
+.add-update-preview .el-form-item ::v-deep .el-form-item__label {
+  padding: 0 10px 0 0;
+  color: #6e6e6e;
+  font-weight: 500;
+  width: 180px;
+  font-size: 15px;
+  line-height: 40px;
+  text-align: right;
+}
+
+.add-update-preview .el-form-item ::v-deep .el-form-item__content {
+  margin-left: 180px;
+}
+.add-update-preview .el-form-item span.text {
+  padding: 0 10px;
+  color: #333;
+  background: none;
+  font-weight: 500;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 40px;
+  min-width: 50%;
+}
+
+.add-update-preview .el-input {
+  width: 100%;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner[readonly='readonly'] {
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number {
+  text-align: left;
+  width: 100%;
+}
+.add-update-preview .el-input-number ::v-deep .el-input__inner {
+  text-align: left;
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .is-disabled .el-input__inner {
+  text-align: left;
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__decrease {
+  display: none;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__increase {
+  display: none;
+}
+.add-update-preview .el-select {
+  width: 100%;
+}
+.add-update-preview .el-select ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-select ::v-deep .is-disabled .el-input__inner {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 10px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 34px;
+}
+.add-update-preview .el-date-editor {
+  width: 100%;
+}
+.add-update-preview .el-date-editor ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-date-editor ::v-deep .el-input__inner[readonly='readonly'] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .viewBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .viewBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .downBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .downBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .unBtn {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 0px;
+  margin: 0 20px 0 0;
+  outline: none;
+  color: #999;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  line-height: 40px;
+  height: 40px;
+  .iconfont {
+    margin: 0 2px;
+    color: #fff;
+    display: none;
+    font-size: 14px;
+    height: 34px;
+  }
+}
+.add-update-preview .unBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview ::v-deep .el-upload--picture-card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  line-height: initial;
+  vertical-align: middle;
+}
+
+.add-update-preview ::v-deep .upload .upload-img {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload .el-icon-plus {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+.add-update-preview ::v-deep .el-upload__tip {
+  color: #666;
+  font-size: 15px;
+}
+
+.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-height: 150px;
+  height: auto;
+}
+.add-update-preview .el-textarea ::v-deep .el-textarea__inner[readonly='readonly'] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  min-width: 400px;
+  height: auto;
+}
+.add-update-preview .el-form-item.btn {
+  padding: 0;
+  margin: 20px 0 0;
+  .btn1 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0356bb;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn1:hover {
+    opacity: 0.8;
+  }
+  .btn2 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #39c9ee;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 34px;
+    }
+  }
+  .btn2:hover {
+    opacity: 0.8;
+  }
+  .btn3 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #6ea0dc;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn3:hover {
+    opacity: 0.8;
+  }
+  .btn4 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #4abcff;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn4:hover {
+    opacity: 0.8;
+  }
+  .btn5 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0977fd;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn5:hover {
+    opacity: 0.8;
+  }
+}

src/assets/css/page.scss

@@ -0,0 +1,658 @@
+.center-form-pv {
+  .el-date-editor.el-input {
+    width: auto;
+  }
+}
+
+.el-input {
+  width: auto;
+}
+
+// form
+.center-form-pv .el-input {
+  width: auto;
+}
+.center-form-pv .el-input ::v-deep .el-input__inner {
+  border: 1px solid #ddd;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  width: 150px;
+  font-size: 15px;
+  height: 40px;
+}
+.center-form-pv .el-select {
+  width: auto;
+}
+.center-form-pv .el-select ::v-deep .el-input__inner {
+  border: 1px solid #ddd;
+  border-radius: 0px;
+  padding: 0 10px;
+  color: #666;
+  width: 150px;
+  font-size: 15px;
+  height: 40px;
+}
+.center-form-pv .el-date-editor {
+  width: auto;
+}
+
+.center-form-pv .el-date-editor ::v-deep .el-input__inner {
+  border: 1px solid #ddd;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  width: 150px;
+  font-size: 15px;
+  height: 40px;
+}
+
+.center-form-pv .search {
+  border: 0;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 20px;
+  color: #fff;
+  background: #0977fd;
+  width: auto;
+  font-size: 16px;
+  min-width: 90px;
+  height: 40px;
+}
+
+.center-form-pv .search:hover {
+  opacity: 0.8;
+}
+
+.center-form-pv .actions .add {
+  border: 1px solid #0977fd60;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 4px;
+  color: #0977fd;
+  background: #fff;
+  width: auto;
+  font-size: inherit;
+  height: 34px;
+}
+
+.center-form-pv .actions .add:hover {
+  opacity: 0.8;
+}
+
+.center-form-pv .actions .del {
+  border: 1px solid #cc000060;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 4px;
+  color: #c00;
+  background: #fff;
+  width: auto;
+  font-size: inherit;
+  height: 34px;
+}
+
+.center-form-pv .actions .del:hover {
+  opacity: 0.8;
+}
+
+.center-form-pv .actions .statis {
+  border: 1px solid #e0970460;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 20px;
+  margin: 4px;
+  color: #e09704;
+  background: #fff;
+  width: auto;
+  font-size: inherit;
+  height: 34px;
+}
+
+.center-form-pv .actions .statis:hover {
+  opacity: 0.8;
+}
+
+.center-form-pv .actions .btn18 {
+  border: 1px solid #ed9a0d60;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 4px;
+  color: #ed9a0d;
+  background: #fff;
+  width: auto;
+  font-size: inherit;
+  height: 34px;
+}
+
+.center-form-pv .actions .btn18:hover {
+  opacity: 0.8;
+}
+
+// table
+.el-table ::v-deep .el-table__header-wrapper thead {
+  color: #999;
+  background: #fff;
+  font-weight: 500;
+  width: 100%;
+}
+
+.el-table ::v-deep .el-table__header-wrapper thead tr {
+  background: #cae2ff;
+}
+
+.el-table ::v-deep .el-table__header-wrapper thead tr th {
+  padding: 8px 0;
+  background: none;
+  border-color: #f6f6f6;
+  border-width: 0 0px 0px 0;
+  border-style: solid;
+  text-align: left;
+}
+
+.el-table ::v-deep .el-table__header-wrapper thead tr th .cell {
+  padding: 0 0 0 5px;
+  word-wrap: normal;
+  color: #0977fd;
+  white-space: normal;
+  font-weight: bold;
+  display: flex;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  width: 100%;
+  align-items: center;
+  position: relative;
+  min-width: 110px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper {
+  position: relative;
+}
+.el-table ::v-deep .el-table__body-wrapper tbody {
+  width: 100%;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr {
+  background: #fff;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td {
+  padding: 4px 0;
+  color: #333;
+  background: #fff;
+  font-size: inherit;
+  border-color: #0977fd30;
+  border-width: 0 0px 1px 0;
+  border-style: solid;
+  text-align: left;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr:hover td {
+  padding: 4px 0;
+  color: #333;
+  background: #f4f9ff;
+  border-color: #0977fd30;
+  border-width: 0 0px 1px 0;
+  border-style: solid;
+  text-align: left;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td {
+  padding: 4px 0;
+  color: #333;
+  background: #fff;
+  font-size: inherit;
+  border-color: #0977fd30;
+  border-width: 0 0px 1px 0;
+  border-style: solid;
+  text-align: left;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .cell {
+  padding: 0 0 0 5px;
+  overflow: hidden;
+  word-break: break-all;
+  white-space: normal;
+  font-size: inherit;
+  line-height: 24px;
+  text-overflow: ellipsis;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .view {
+  border: 1px solid #0977fd60;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 0 5px 5px 0;
+  color: #0977fd;
+  background: #fff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .view:hover {
+  opacity: 0.8;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .add {
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .add:hover {
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit {
+  border: 1px solid #21c79260;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 0 5px 5px 0;
+  color: #21c792;
+  background: #fff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit:hover {
+  opacity: 0.8;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .del {
+  border: 1px solid #cc000060;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 0 5px 5px 0;
+  color: #c00;
+  background: #fff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .del:hover {
+  opacity: 0.8;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8 {
+  border: 1px solid #ed9a0d60;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 0 5px 5px 0;
+  color: #ed9a0d;
+  background: #fff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8:hover {
+  opacity: 0.8;
+}
+
+// pagination
+.main-content .el-pagination ::v-deep .el-pagination__total {
+  margin: 0 10px 0 0;
+  color: #666;
+  font-weight: 400;
+  display: inline-block;
+  vertical-align: top;
+  font-size: inherit;
+  line-height: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .btn-prev {
+  border: none;
+  border-radius: 100px;
+  padding: 0;
+  margin: 0 5px;
+  color: #fff;
+  background: #000;
+  display: inline-block;
+  vertical-align: top;
+  width: 28px;
+  font-size: 16px;
+  line-height: auto;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .btn-next {
+  border: none;
+  border-radius: 100%;
+  padding: 0;
+  margin: 0 5px;
+  color: #fff;
+  background: #000;
+  display: inline-block;
+  vertical-align: top;
+  width: 28px;
+  font-size: 16px;
+  line-height: auto;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .btn-prev:disabled {
+  border: none;
+  cursor: not-allowed;
+  padding: 0;
+  margin: 0 5px;
+  color: #666;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: auto;
+  border-radius: 100px;
+  background: #ccc;
+  width: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .btn-next:disabled {
+  border: none;
+  cursor: not-allowed;
+  padding: 0;
+  margin: 0 5px;
+  color: #666;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: auto;
+  border-radius: 100px;
+  background: #ccc;
+  width: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pager {
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.main-content .el-pagination ::v-deep .el-pager .number {
+  cursor: pointer;
+  border-radius: 100%;
+  padding: 0 10px;
+  margin: 0 2px;
+  color: #fff;
+  background: #b9b9b9;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: 28px;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pager .number:hover {
+  cursor: pointer;
+  border-radius: 100%;
+  padding: 0 10px;
+  margin: 0 2px;
+  color: #fff;
+  background: #0977fd;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: 28px;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pager .number.active {
+  cursor: default;
+  border-radius: 100%;
+  padding: 0 10px;
+  margin: 0 2px;
+  color: #fff;
+  background: #0977fd;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: 28px;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__sizes {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+  line-height: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input {
+  margin: 0 5px;
+  width: 100px;
+  position: relative;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input .el-input__inner {
+  border: 1px solid #dcdfe6;
+  cursor: pointer;
+  padding: 0 25px 0 8px;
+  color: #606266;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 28px;
+  border-radius: 10px;
+  outline: 0;
+  background: #fff;
+  width: 100%;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input span.el-input__suffix {
+  top: 0;
+  position: absolute;
+  right: 0;
+  height: 100%;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
+  cursor: pointer;
+  color: #c0c4cc;
+  width: 25px;
+  font-size: 14px;
+  line-height: 28px;
+  text-align: center;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__jump {
+  margin: 0 0 0 24px;
+  color: #606266;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+  line-height: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__jump .el-input {
+  border-radius: 3px;
+  padding: 0 2px;
+  margin: 0 2px;
+  display: inline-block;
+  width: 50px;
+  font-size: 15px;
+  line-height: 18px;
+  position: relative;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__jump .el-input .el-input__inner {
+  border: 1px solid #dcdfe6;
+  cursor: pointer;
+  padding: 0 3px;
+  color: #606266;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 28px;
+  border-radius: 3px;
+  outline: 0;
+  background: #fff;
+  width: 100%;
+  text-align: center;
+  height: 28px;
+}
+
+// list one
+.one .list1-view {
+  border: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0 15px;
+  margin: 0 5px 5px 0;
+  outline: none;
+  color: #fff;
+  background: #157ed2;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.one .list1-view:hover {
+  opacity: 0.8;
+}
+
+.one .list1-edit {
+  border: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0 15px;
+  margin: 0 5px 5px 0;
+  outline: none;
+  color: #fff;
+  background: #409eff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.one .list1-edit:hover {
+  opacity: 0.8;
+}
+
+.one .list1-del {
+  border: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0 15px;
+  margin: 0 5px 5px 0;
+  outline: none;
+  color: #fff;
+  background: rgba(255, 0, 0, 1);
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.one .list1-del:hover {
+  opacity: 0.8;
+}
+
+.one .list1-btn8 {
+  border: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0 24px;
+  margin: 0 5px 5px 0;
+  outline: none;
+  color: #fff;
+  background: rgba(255, 128, 0, 1);
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.one .list1-btn8:hover {
+  opacity: 0.8;
+}
+
+.main-content .el-table .el-switch {
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: 30px;
+  position: relative;
+  align-items: center;
+  height: 30px;
+}
+.main-content .el-table .el-switch ::v-deep .el-switch__label--left {
+  cursor: pointer;
+  margin: 0 10px 0 0;
+  color: #333;
+  font-weight: 500;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 16px;
+  transition: 0.2s;
+  height: 30px;
+}
+.main-content .el-table .el-switch ::v-deep .el-switch__label--right {
+  cursor: pointer;
+  margin: 0 0 0 10px;
+  color: #333;
+  font-weight: 500;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 16px;
+  transition: 0.2s;
+  height: 30px;
+}
+.main-content .el-table .el-switch ::v-deep .el-switch__core {
+  border: 1px solid #75c0d6;
+  cursor: pointer;
+  border-radius: 15px;
+  margin: 0;
+  background: #75c0d6;
+  display: inline-block;
+  width: 42px;
+  box-sizing: border-box;
+  transition: border-color 0.3s, background-color 0.3s;
+  height: 20px;
+}
+.main-content .el-table .el-switch ::v-deep .el-switch__core::after {
+  border-radius: 100%;
+  top: 1px;
+  left: 1px;
+  background: #fff;
+  width: 16px;
+  position: absolute;
+  transition: all 0.3s;
+  height: 16px;
+}
+.main-content .el-table .el-switch.is-checked ::v-deep .el-switch__core::after {
+  margin: 0 0 0 -18px;
+  left: 100%;
+}
+
+.main-content .el-table .el-rate ::v-deep .el-rate__item {
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  position: relative;
+}
+.main-content .el-table .el-rate ::v-deep .el-rate__item .el-rate__icon {
+  margin: 0 3px;
+  display: inline-block;
+  font-size: 18px;
+  position: relative;
+  transition: 0.3s;
+}
+::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+  background-color: #0977fd;
+}

src/views/modules/load-forecasting-v2/components/add-or-update.vue

@@ -114,430 +114,5 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.addEdit-block {
-  padding: 30px;
-  background: none;
-  width: 100%;
-}
-.add-update-preview {
-  border-radius: 10px;
-  padding: 40px 25% 40px 18%;
-  background: #ffffff;
-  border-color: #eee;
-  border-width: 1px;
-  border-style: solid;
-}
-.amap-wrapper {
-  width: 100%;
-  height: 500px;
-}
-
-.search-box {
-  position: absolute;
-}
-
-.el-date-editor.el-input {
-  width: auto;
-}
-.add-update-preview ::v-deep .el-form-item {
-  border: 0px solid #eee;
-  padding: 0;
-  margin: 0 0 22px 0;
-  display: inline-block;
-  width: 100%;
-}
-.add-update-preview .el-form-item ::v-deep .el-form-item__label {
-  padding: 0 10px 0 0;
-  color: #6e6e6e;
-  font-weight: 500;
-  width: 180px;
-  font-size: 15px;
-  line-height: 40px;
-  text-align: right;
-}
-
-.add-update-preview .el-form-item ::v-deep .el-form-item__content {
-  margin-left: 180px;
-}
-.add-update-preview .el-form-item span.text {
-  padding: 0 10px;
-  color: #333;
-  background: none;
-  font-weight: 500;
-  display: inline-block;
-  font-size: 15px;
-  line-height: 40px;
-  min-width: 50%;
-}
-
-.add-update-preview .el-input {
-  width: 100%;
-}
-.add-update-preview .el-input ::v-deep .el-input__inner {
-  border: 1px solid #e8e8e8;
-  border-radius: 0px;
-  padding: 0 12px;
-  color: #666;
-  background: #fff;
-  width: 100%;
-  font-size: 15px;
-  min-width: 50%;
-  height: 40px;
-}
-.add-update-preview .el-input ::v-deep .el-input__inner[readonly='readonly'] {
-  border: 0px solid #ccc;
-  cursor: not-allowed;
-  border-radius: 0px;
-  padding: 0 12px;
-  color: #666;
-  background: none;
-  width: auto;
-  font-size: 15px;
-  height: 40px;
-}
-.add-update-preview .el-input-number {
-  text-align: left;
-  width: 100%;
-}
-.add-update-preview .el-input-number ::v-deep .el-input__inner {
-  text-align: left;
-  border: 1px solid #e8e8e8;
-  border-radius: 0px;
-  padding: 0 12px;
-  color: #666;
-  background: #fff;
-  width: 100%;
-  font-size: 15px;
-  min-width: 50%;
-  height: 40px;
-}
-.add-update-preview .el-input-number ::v-deep .is-disabled .el-input__inner {
-  text-align: left;
-  border: 0px solid #ccc;
-  cursor: not-allowed;
-  border-radius: 0px;
-  padding: 0 12px;
-  color: #666;
-  background: none;
-  width: auto;
-  font-size: 15px;
-  height: 40px;
-}
-.add-update-preview .el-input-number ::v-deep .el-input-number__decrease {
-  display: none;
-}
-.add-update-preview .el-input-number ::v-deep .el-input-number__increase {
-  display: none;
-}
-.add-update-preview .el-select {
-  width: 100%;
-}
-.add-update-preview .el-select ::v-deep .el-input__inner {
-  border: 1px solid #e8e8e8;
-  border-radius: 0px;
-  padding: 0 10px;
-  color: #666;
-  background: #fff;
-  width: 100%;
-  font-size: 15px;
-  height: 40px;
-}
-.add-update-preview .el-select ::v-deep .is-disabled .el-input__inner {
-  border: 0;
-  cursor: not-allowed;
-  border-radius: 4px;
-  padding: 0 10px;
-  color: #666;
-  background: none;
-  width: auto;
-  font-size: 15px;
-  height: 34px;
-}
-.add-update-preview .el-date-editor {
-  width: 100%;
-}
-.add-update-preview .el-date-editor ::v-deep .el-input__inner {
-  border: 1px solid #e8e8e8;
-  border-radius: 0px;
-  padding: 0 10px 0 30px;
-  color: #666;
-  background: #fff;
-  width: 100%;
-  font-size: 15px;
-  height: 40px;
-}
-.add-update-preview .el-date-editor ::v-deep .el-input__inner[readonly='readonly'] {
-  border: 0;
-  cursor: not-allowed;
-  border-radius: 0px;
-  padding: 0 10px 0 30px;
-  color: #666;
-  background: none;
-  width: auto;
-  font-size: 15px;
-  height: 40px;
-}
-.add-update-preview .viewBtn {
-  border: 1px solid #e8e8e8;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 15px;
-  margin: 0 20px 0 0;
-  color: #666;
-  background: #fff;
-  width: auto;
-  font-size: 15px;
-  line-height: 34px;
-  height: 34px;
-  .iconfont {
-    margin: 0 2px;
-    color: #666;
-    font-size: 16px;
-    height: 34px;
-  }
-}
-.add-update-preview .viewBtn:hover {
-  opacity: 0.8;
-}
-.add-update-preview .downBtn {
-  border: 1px solid #e8e8e8;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 15px;
-  margin: 0 20px 0 0;
-  color: #666;
-  background: #fff;
-  width: auto;
-  font-size: 15px;
-  line-height: 34px;
-  height: 34px;
-  .iconfont {
-    margin: 0 2px;
-    color: #666;
-    font-size: 16px;
-    height: 34px;
-  }
-}
-.add-update-preview .downBtn:hover {
-  opacity: 0.8;
-}
-.add-update-preview .unBtn {
-  border: 0;
-  cursor: not-allowed;
-  border-radius: 4px;
-  padding: 0 0px;
-  margin: 0 20px 0 0;
-  outline: none;
-  color: #999;
-  background: none;
-  width: auto;
-  font-size: 15px;
-  line-height: 40px;
-  height: 40px;
-  .iconfont {
-    margin: 0 2px;
-    color: #fff;
-    display: none;
-    font-size: 14px;
-    height: 34px;
-  }
-}
-.add-update-preview .unBtn:hover {
-  opacity: 0.8;
-}
-.add-update-preview ::v-deep .el-upload--picture-card {
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  width: auto;
-  height: auto;
-  line-height: initial;
-  vertical-align: middle;
-}
-
-.add-update-preview ::v-deep .upload .upload-img {
-  border: 1px solid #e8e8e8;
-  cursor: pointer;
-  border-radius: 0px;
-  color: #666;
-  background: #fff;
-  width: 90px;
-  font-size: 24px;
-  line-height: 60px;
-  text-align: center;
-  height: 60px;
-}
-
-.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
-  border: 1px solid #e8e8e8;
-  cursor: pointer;
-  border-radius: 0px;
-  color: #666;
-  background: #fff;
-  width: 90px;
-  font-size: 24px;
-  line-height: 60px;
-  text-align: center;
-  height: 60px;
-}
-
-.add-update-preview ::v-deep .el-upload .el-icon-plus {
-  border: 1px solid #e8e8e8;
-  cursor: pointer;
-  border-radius: 0px;
-  color: #666;
-  background: #fff;
-  width: 90px;
-  font-size: 24px;
-  line-height: 60px;
-  text-align: center;
-  height: 60px;
-}
-.add-update-preview ::v-deep .el-upload__tip {
-  color: #666;
-  font-size: 15px;
-}
-
-.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
-  border: 1px solid #e8e8e8;
-  border-radius: 0px;
-  padding: 12px;
-  color: #666;
-  background: #fff;
-  width: 100%;
-  font-size: 15px;
-  min-height: 150px;
-  height: auto;
-}
-.add-update-preview .el-textarea ::v-deep .el-textarea__inner[readonly='readonly'] {
-  border: 0;
-  cursor: not-allowed;
-  border-radius: 0px;
-  padding: 12px;
-  color: #666;
-  background: none;
-  width: auto;
-  font-size: 15px;
-  min-width: 400px;
-  height: auto;
-}
-.add-update-preview .el-form-item.btn {
-  padding: 0;
-  margin: 20px 0 0;
-  .btn1 {
-    border: 0px solid #ccc;
-    cursor: pointer;
-    border-radius: 6px;
-    padding: 0 10px;
-    margin: 0 10px 0 0;
-    color: #fff;
-    background: #0356bb;
-    width: auto;
-    font-size: 16px;
-    min-width: 110px;
-    height: 40px;
-    .iconfont {
-      margin: 0 2px;
-      color: #fff;
-      display: none;
-      font-size: 14px;
-      height: 40px;
-    }
-  }
-  .btn1:hover {
-    opacity: 0.8;
-  }
-  .btn2 {
-    border: 0px solid #ccc;
-    cursor: pointer;
-    border-radius: 6px;
-    padding: 0 10px;
-    margin: 0 10px 0 0;
-    color: #fff;
-    background: #39c9ee;
-    width: auto;
-    font-size: 16px;
-    min-width: 110px;
-    height: 40px;
-    .iconfont {
-      margin: 0 2px;
-      color: #fff;
-      display: none;
-      font-size: 14px;
-      height: 34px;
-    }
-  }
-  .btn2:hover {
-    opacity: 0.8;
-  }
-  .btn3 {
-    border: 0px solid #ccc;
-    cursor: pointer;
-    border-radius: 6px;
-    padding: 0 10px;
-    margin: 0 10px 0 0;
-    color: #fff;
-    background: #6ea0dc;
-    width: auto;
-    font-size: 16px;
-    min-width: 110px;
-    height: 40px;
-    .iconfont {
-      margin: 0 2px;
-      color: #fff;
-      display: none;
-      font-size: 14px;
-      height: 40px;
-    }
-  }
-  .btn3:hover {
-    opacity: 0.8;
-  }
-  .btn4 {
-    border: 0px solid #ccc;
-    cursor: pointer;
-    border-radius: 6px;
-    padding: 0 10px;
-    margin: 0 10px 0 0;
-    color: #fff;
-    background: #4abcff;
-    width: auto;
-    font-size: 16px;
-    min-width: 110px;
-    height: 40px;
-    .iconfont {
-      margin: 0 2px;
-      color: #fff;
-      display: none;
-      font-size: 14px;
-      height: 40px;
-    }
-  }
-  .btn4:hover {
-    opacity: 0.8;
-  }
-  .btn5 {
-    border: 0px solid #ccc;
-    cursor: pointer;
-    border-radius: 6px;
-    padding: 0 10px;
-    margin: 0 10px 0 0;
-    color: #fff;
-    background: #0977fd;
-    width: auto;
-    font-size: 16px;
-    min-width: 110px;
-    height: 40px;
-    .iconfont {
-      margin: 0 2px;
-      color: #fff;
-      display: none;
-      font-size: 14px;
-      height: 40px;
-    }
-  }
-  .btn5:hover {
-    opacity: 0.8;
-  }
-}
+@import '@/assets/css/add-edit.scss';
 </style>

src/views/modules/load-forecasting-v2/components/forecasting-detail.vue

@@ -335,664 +335,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.center-form-pv {
-  .el-date-editor.el-input {
-    width: auto;
-  }
-}
-
-.el-input {
-  width: auto;
-}
-
-// form
-.center-form-pv .el-input {
-  width: auto;
-}
-.center-form-pv .el-input ::v-deep .el-input__inner {
-  border: 1px solid #ddd;
-  border-radius: 0px;
-  padding: 0 12px;
-  color: #666;
-  width: 150px;
-  font-size: 15px;
-  height: 40px;
-}
-.center-form-pv .el-select {
-  width: auto;
-}
-.center-form-pv .el-select ::v-deep .el-input__inner {
-  border: 1px solid #ddd;
-  border-radius: 0px;
-  padding: 0 10px;
-  color: #666;
-  width: 150px;
-  font-size: 15px;
-  height: 40px;
-}
-.center-form-pv .el-date-editor {
-  width: auto;
-}
-
-.center-form-pv .el-date-editor ::v-deep .el-input__inner {
-  border: 1px solid #ddd;
-  border-radius: 0px;
-  padding: 0 10px 0 30px;
-  color: #666;
-  width: 150px;
-  font-size: 15px;
-  height: 40px;
-}
-
-.center-form-pv .search {
-  border: 0;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 20px;
-  color: #fff;
-  background: #0977fd;
-  width: auto;
-  font-size: 16px;
-  min-width: 90px;
-  height: 40px;
-}
-
-.center-form-pv .search:hover {
-  opacity: 0.8;
-}
-
-.center-form-pv .actions .add {
-  border: 1px solid #0977fd60;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 4px;
-  color: #0977fd;
-  background: #fff;
-  width: auto;
-  font-size: inherit;
-  height: 34px;
-}
-
-.center-form-pv .actions .add:hover {
-  opacity: 0.8;
-}
-
-.center-form-pv .actions .del {
-  border: 1px solid #cc000060;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 4px;
-  color: #c00;
-  background: #fff;
-  width: auto;
-  font-size: inherit;
-  height: 34px;
-}
-
-.center-form-pv .actions .del:hover {
-  opacity: 0.8;
-}
-
-.center-form-pv .actions .statis {
-  border: 1px solid #e0970460;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 20px;
-  margin: 4px;
-  color: #e09704;
-  background: #fff;
-  width: auto;
-  font-size: inherit;
-  height: 34px;
-}
-
-.center-form-pv .actions .statis:hover {
-  opacity: 0.8;
-}
-
-.center-form-pv .actions .btn18 {
-  border: 1px solid #ed9a0d60;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 4px;
-  color: #ed9a0d;
-  background: #fff;
-  width: auto;
-  font-size: inherit;
-  height: 34px;
-}
-
-.center-form-pv .actions .btn18:hover {
-  opacity: 0.8;
-}
-
-// table
-.el-table ::v-deep .el-table__header-wrapper thead {
-  color: #999;
-  background: #fff;
-  font-weight: 500;
-  width: 100%;
-}
-
-.el-table ::v-deep .el-table__header-wrapper thead tr {
-  background: #cae2ff;
-}
-
-.el-table ::v-deep .el-table__header-wrapper thead tr th {
-  padding: 8px 0;
-  background: none;
-  border-color: #f6f6f6;
-  border-width: 0 0px 0px 0;
-  border-style: solid;
-  text-align: left;
-}
-
-.el-table ::v-deep .el-table__header-wrapper thead tr th .cell {
-  padding: 0 0 0 5px;
-  word-wrap: normal;
-  color: #0977fd;
-  white-space: normal;
-  font-weight: bold;
-  display: flex;
-  vertical-align: middle;
-  font-size: 14px;
-  line-height: 24px;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  width: 100%;
-  align-items: center;
-  position: relative;
-  min-width: 110px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper {
-  position: relative;
-}
-.el-table ::v-deep .el-table__body-wrapper tbody {
-  width: 100%;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr {
-  background: #fff;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td {
-  padding: 4px 0;
-  color: #333;
-  background: #fff;
-  font-size: inherit;
-  border-color: #0977fd30;
-  border-width: 0 0px 1px 0;
-  border-style: solid;
-  text-align: left;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr:hover td {
-  padding: 4px 0;
-  color: #333;
-  background: #f4f9ff;
-  border-color: #0977fd30;
-  border-width: 0 0px 1px 0;
-  border-style: solid;
-  text-align: left;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td {
-  padding: 4px 0;
-  color: #333;
-  background: #fff;
-  font-size: inherit;
-  border-color: #0977fd30;
-  border-width: 0 0px 1px 0;
-  border-style: solid;
-  text-align: left;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .cell {
-  padding: 0 0 0 5px;
-  overflow: hidden;
-  word-break: break-all;
-  white-space: normal;
-  font-size: inherit;
-  line-height: 24px;
-  text-overflow: ellipsis;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .view {
-  border: 1px solid #0977fd60;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 0 5px 5px 0;
-  color: #0977fd;
-  background: #fff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .view:hover {
-  opacity: 0.8;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .add {
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .add:hover {
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit {
-  border: 1px solid #21c79260;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 0 5px 5px 0;
-  color: #21c792;
-  background: #fff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit:hover {
-  opacity: 0.8;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .del {
-  border: 1px solid #cc000060;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 0 5px 5px 0;
-  color: #c00;
-  background: #fff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .del:hover {
-  opacity: 0.8;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8 {
-  border: 1px solid #ed9a0d60;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 0 5px 5px 0;
-  color: #ed9a0d;
-  background: #fff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8:hover {
-  opacity: 0.8;
-}
-
-// pagination
-.main-content .el-pagination ::v-deep .el-pagination__total {
-  margin: 0 10px 0 0;
-  color: #666;
-  font-weight: 400;
-  display: inline-block;
-  vertical-align: top;
-  font-size: inherit;
-  line-height: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .btn-prev {
-  border: none;
-  border-radius: 100px;
-  padding: 0;
-  margin: 0 5px;
-  color: #fff;
-  background: #000;
-  display: inline-block;
-  vertical-align: top;
-  width: 28px;
-  font-size: 16px;
-  line-height: auto;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .btn-next {
-  border: none;
-  border-radius: 100%;
-  padding: 0;
-  margin: 0 5px;
-  color: #fff;
-  background: #000;
-  display: inline-block;
-  vertical-align: top;
-  width: 28px;
-  font-size: 16px;
-  line-height: auto;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .btn-prev:disabled {
-  border: none;
-  cursor: not-allowed;
-  padding: 0;
-  margin: 0 5px;
-  color: #666;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: auto;
-  border-radius: 100px;
-  background: #ccc;
-  width: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .btn-next:disabled {
-  border: none;
-  cursor: not-allowed;
-  padding: 0;
-  margin: 0 5px;
-  color: #666;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: auto;
-  border-radius: 100px;
-  background: #ccc;
-  width: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pager {
-  padding: 0;
-  margin: 0;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.main-content .el-pagination ::v-deep .el-pager .number {
-  cursor: pointer;
-  border-radius: 100%;
-  padding: 0 10px;
-  margin: 0 2px;
-  color: #fff;
-  background: #b9b9b9;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: 28px;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pager .number:hover {
-  cursor: pointer;
-  border-radius: 100%;
-  padding: 0 10px;
-  margin: 0 2px;
-  color: #fff;
-  background: #0977fd;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: 28px;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pager .number.active {
-  cursor: default;
-  border-radius: 100%;
-  padding: 0 10px;
-  margin: 0 2px;
-  color: #fff;
-  background: #0977fd;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: 28px;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes {
-  display: inline-block;
-  vertical-align: top;
-  font-size: 15px;
-  line-height: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input {
-  margin: 0 5px;
-  width: 100px;
-  position: relative;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input .el-input__inner {
-  border: 1px solid #dcdfe6;
-  cursor: pointer;
-  padding: 0 25px 0 8px;
-  color: #606266;
-  display: inline-block;
-  font-size: 15px;
-  line-height: 28px;
-  border-radius: 10px;
-  outline: 0;
-  background: #fff;
-  width: 100%;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input span.el-input__suffix {
-  top: 0;
-  position: absolute;
-  right: 0;
-  height: 100%;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
-  cursor: pointer;
-  color: #c0c4cc;
-  width: 25px;
-  font-size: 14px;
-  line-height: 28px;
-  text-align: center;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__jump {
-  margin: 0 0 0 24px;
-  color: #606266;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 15px;
-  line-height: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__jump .el-input {
-  border-radius: 3px;
-  padding: 0 2px;
-  margin: 0 2px;
-  display: inline-block;
-  width: 50px;
-  font-size: 15px;
-  line-height: 18px;
-  position: relative;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__jump .el-input .el-input__inner {
-  border: 1px solid #dcdfe6;
-  cursor: pointer;
-  padding: 0 3px;
-  color: #606266;
-  display: inline-block;
-  font-size: 15px;
-  line-height: 28px;
-  border-radius: 3px;
-  outline: 0;
-  background: #fff;
-  width: 100%;
-  text-align: center;
-  height: 28px;
-}
-
-// list one
-.one .list1-view {
-  border: 0;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 0 15px;
-  margin: 0 5px 5px 0;
-  outline: none;
-  color: #fff;
-  background: #157ed2;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.one .list1-view:hover {
-  opacity: 0.8;
-}
-
-.one .list1-edit {
-  border: 0;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 0 15px;
-  margin: 0 5px 5px 0;
-  outline: none;
-  color: #fff;
-  background: #409eff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.one .list1-edit:hover {
-  opacity: 0.8;
-}
-
-.one .list1-del {
-  border: 0;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 0 15px;
-  margin: 0 5px 5px 0;
-  outline: none;
-  color: #fff;
-  background: rgba(255, 0, 0, 1);
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.one .list1-del:hover {
-  opacity: 0.8;
-}
-
-.one .list1-btn8 {
-  border: 0;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 0 24px;
-  margin: 0 5px 5px 0;
-  outline: none;
-  color: #fff;
-  background: rgba(255, 128, 0, 1);
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.one .list1-btn8:hover {
-  opacity: 0.8;
-}
-
-.main-content .el-table .el-switch {
-  display: inline-flex;
-  vertical-align: middle;
-  line-height: 30px;
-  position: relative;
-  align-items: center;
-  height: 30px;
-}
-.main-content .el-table .el-switch ::v-deep .el-switch__label--left {
-  cursor: pointer;
-  margin: 0 10px 0 0;
-  color: #333;
-  font-weight: 500;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 16px;
-  transition: 0.2s;
-  height: 30px;
-}
-.main-content .el-table .el-switch ::v-deep .el-switch__label--right {
-  cursor: pointer;
-  margin: 0 0 0 10px;
-  color: #333;
-  font-weight: 500;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 16px;
-  transition: 0.2s;
-  height: 30px;
-}
-.main-content .el-table .el-switch ::v-deep .el-switch__core {
-  border: 1px solid #75c0d6;
-  cursor: pointer;
-  border-radius: 15px;
-  margin: 0;
-  background: #75c0d6;
-  display: inline-block;
-  width: 42px;
-  box-sizing: border-box;
-  transition: border-color 0.3s, background-color 0.3s;
-  height: 20px;
-}
-.main-content .el-table .el-switch ::v-deep .el-switch__core::after {
-  border-radius: 100%;
-  top: 1px;
-  left: 1px;
-  background: #fff;
-  width: 16px;
-  position: absolute;
-  transition: all 0.3s;
-  height: 16px;
-}
-.main-content .el-table .el-switch.is-checked ::v-deep .el-switch__core::after {
-  margin: 0 0 0 -18px;
-  left: 100%;
-}
-
-.main-content .el-table .el-rate ::v-deep .el-rate__item {
-  cursor: pointer;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 0;
-  position: relative;
-}
-.main-content .el-table .el-rate ::v-deep .el-rate__item .el-rate__icon {
-  margin: 0 3px;
-  display: inline-block;
-  font-size: 18px;
-  position: relative;
-  transition: 0.3s;
-}
-::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-  background-color: #0977fd;
-}
-.tb-style {
-}
+@import '@/assets/css/page.scss';
 </style>

src/views/modules/load-forecasting-v2/index.vue

@@ -256,6 +256,7 @@
     </template>
     <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
     <add-or-update v-if="showFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+    <!-- 明细 -->
     <forecasting-detail v-if="showForecastingFlag" :parent="this" ref="forecastingDetail"></forecasting-detail>
   </div>
 </template>
@@ -416,664 +417,5 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.center-form-pv {
-  .el-date-editor.el-input {
-    width: auto;
-  }
-}
-
-.el-input {
-  width: auto;
-}
-
-// form
-.center-form-pv .el-input {
-  width: auto;
-}
-.center-form-pv .el-input ::v-deep .el-input__inner {
-  border: 1px solid #ddd;
-  border-radius: 0px;
-  padding: 0 12px;
-  color: #666;
-  width: 150px;
-  font-size: 15px;
-  height: 40px;
-}
-.center-form-pv .el-select {
-  width: auto;
-}
-.center-form-pv .el-select ::v-deep .el-input__inner {
-  border: 1px solid #ddd;
-  border-radius: 0px;
-  padding: 0 10px;
-  color: #666;
-  width: 150px;
-  font-size: 15px;
-  height: 40px;
-}
-.center-form-pv .el-date-editor {
-  width: auto;
-}
-
-.center-form-pv .el-date-editor ::v-deep .el-input__inner {
-  border: 1px solid #ddd;
-  border-radius: 0px;
-  padding: 0 10px 0 30px;
-  color: #666;
-  width: 150px;
-  font-size: 15px;
-  height: 40px;
-}
-
-.center-form-pv .search {
-  border: 0;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 20px;
-  color: #fff;
-  background: #0977fd;
-  width: auto;
-  font-size: 16px;
-  min-width: 90px;
-  height: 40px;
-}
-
-.center-form-pv .search:hover {
-  opacity: 0.8;
-}
-
-.center-form-pv .actions .add {
-  border: 1px solid #0977fd60;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 4px;
-  color: #0977fd;
-  background: #fff;
-  width: auto;
-  font-size: inherit;
-  height: 34px;
-}
-
-.center-form-pv .actions .add:hover {
-  opacity: 0.8;
-}
-
-.center-form-pv .actions .del {
-  border: 1px solid #cc000060;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 4px;
-  color: #c00;
-  background: #fff;
-  width: auto;
-  font-size: inherit;
-  height: 34px;
-}
-
-.center-form-pv .actions .del:hover {
-  opacity: 0.8;
-}
-
-.center-form-pv .actions .statis {
-  border: 1px solid #e0970460;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 20px;
-  margin: 4px;
-  color: #e09704;
-  background: #fff;
-  width: auto;
-  font-size: inherit;
-  height: 34px;
-}
-
-.center-form-pv .actions .statis:hover {
-  opacity: 0.8;
-}
-
-.center-form-pv .actions .btn18 {
-  border: 1px solid #ed9a0d60;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 4px;
-  color: #ed9a0d;
-  background: #fff;
-  width: auto;
-  font-size: inherit;
-  height: 34px;
-}
-
-.center-form-pv .actions .btn18:hover {
-  opacity: 0.8;
-}
-
-// table
-.el-table ::v-deep .el-table__header-wrapper thead {
-  color: #999;
-  background: #fff;
-  font-weight: 500;
-  width: 100%;
-}
-
-.el-table ::v-deep .el-table__header-wrapper thead tr {
-  background: #cae2ff;
-}
-
-.el-table ::v-deep .el-table__header-wrapper thead tr th {
-  padding: 8px 0;
-  background: none;
-  border-color: #f6f6f6;
-  border-width: 0 0px 0px 0;
-  border-style: solid;
-  text-align: left;
-}
-
-.el-table ::v-deep .el-table__header-wrapper thead tr th .cell {
-  padding: 0 0 0 5px;
-  word-wrap: normal;
-  color: #0977fd;
-  white-space: normal;
-  font-weight: bold;
-  display: flex;
-  vertical-align: middle;
-  font-size: 14px;
-  line-height: 24px;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  width: 100%;
-  align-items: center;
-  position: relative;
-  min-width: 110px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper {
-  position: relative;
-}
-.el-table ::v-deep .el-table__body-wrapper tbody {
-  width: 100%;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr {
-  background: #fff;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td {
-  padding: 4px 0;
-  color: #333;
-  background: #fff;
-  font-size: inherit;
-  border-color: #0977fd30;
-  border-width: 0 0px 1px 0;
-  border-style: solid;
-  text-align: left;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr:hover td {
-  padding: 4px 0;
-  color: #333;
-  background: #f4f9ff;
-  border-color: #0977fd30;
-  border-width: 0 0px 1px 0;
-  border-style: solid;
-  text-align: left;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td {
-  padding: 4px 0;
-  color: #333;
-  background: #fff;
-  font-size: inherit;
-  border-color: #0977fd30;
-  border-width: 0 0px 1px 0;
-  border-style: solid;
-  text-align: left;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .cell {
-  padding: 0 0 0 5px;
-  overflow: hidden;
-  word-break: break-all;
-  white-space: normal;
-  font-size: inherit;
-  line-height: 24px;
-  text-overflow: ellipsis;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .view {
-  border: 1px solid #0977fd60;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 0 5px 5px 0;
-  color: #0977fd;
-  background: #fff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .view:hover {
-  opacity: 0.8;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .add {
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .add:hover {
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit {
-  border: 1px solid #21c79260;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 0 5px 5px 0;
-  color: #21c792;
-  background: #fff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit:hover {
-  opacity: 0.8;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .del {
-  border: 1px solid #cc000060;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 0 5px 5px 0;
-  color: #c00;
-  background: #fff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .del:hover {
-  opacity: 0.8;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8 {
-  border: 1px solid #ed9a0d60;
-  cursor: pointer;
-  border-radius: 0px;
-  padding: 0 10px;
-  margin: 0 5px 5px 0;
-  color: #ed9a0d;
-  background: #fff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8:hover {
-  opacity: 0.8;
-}
-
-// pagination
-.main-content .el-pagination ::v-deep .el-pagination__total {
-  margin: 0 10px 0 0;
-  color: #666;
-  font-weight: 400;
-  display: inline-block;
-  vertical-align: top;
-  font-size: inherit;
-  line-height: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .btn-prev {
-  border: none;
-  border-radius: 100px;
-  padding: 0;
-  margin: 0 5px;
-  color: #fff;
-  background: #000;
-  display: inline-block;
-  vertical-align: top;
-  width: 28px;
-  font-size: 16px;
-  line-height: auto;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .btn-next {
-  border: none;
-  border-radius: 100%;
-  padding: 0;
-  margin: 0 5px;
-  color: #fff;
-  background: #000;
-  display: inline-block;
-  vertical-align: top;
-  width: 28px;
-  font-size: 16px;
-  line-height: auto;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .btn-prev:disabled {
-  border: none;
-  cursor: not-allowed;
-  padding: 0;
-  margin: 0 5px;
-  color: #666;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: auto;
-  border-radius: 100px;
-  background: #ccc;
-  width: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .btn-next:disabled {
-  border: none;
-  cursor: not-allowed;
-  padding: 0;
-  margin: 0 5px;
-  color: #666;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: auto;
-  border-radius: 100px;
-  background: #ccc;
-  width: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pager {
-  padding: 0;
-  margin: 0;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.main-content .el-pagination ::v-deep .el-pager .number {
-  cursor: pointer;
-  border-radius: 100%;
-  padding: 0 10px;
-  margin: 0 2px;
-  color: #fff;
-  background: #b9b9b9;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: 28px;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pager .number:hover {
-  cursor: pointer;
-  border-radius: 100%;
-  padding: 0 10px;
-  margin: 0 2px;
-  color: #fff;
-  background: #0977fd;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: 28px;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pager .number.active {
-  cursor: default;
-  border-radius: 100%;
-  padding: 0 10px;
-  margin: 0 2px;
-  color: #fff;
-  background: #0977fd;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 16px;
-  line-height: 28px;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes {
-  display: inline-block;
-  vertical-align: top;
-  font-size: 15px;
-  line-height: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input {
-  margin: 0 5px;
-  width: 100px;
-  position: relative;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input .el-input__inner {
-  border: 1px solid #dcdfe6;
-  cursor: pointer;
-  padding: 0 25px 0 8px;
-  color: #606266;
-  display: inline-block;
-  font-size: 15px;
-  line-height: 28px;
-  border-radius: 10px;
-  outline: 0;
-  background: #fff;
-  width: 100%;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input span.el-input__suffix {
-  top: 0;
-  position: absolute;
-  right: 0;
-  height: 100%;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
-  cursor: pointer;
-  color: #c0c4cc;
-  width: 25px;
-  font-size: 14px;
-  line-height: 28px;
-  text-align: center;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__jump {
-  margin: 0 0 0 24px;
-  color: #606266;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 15px;
-  line-height: 28px;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__jump .el-input {
-  border-radius: 3px;
-  padding: 0 2px;
-  margin: 0 2px;
-  display: inline-block;
-  width: 50px;
-  font-size: 15px;
-  line-height: 18px;
-  position: relative;
-  text-align: center;
-  height: 28px;
-}
-
-.main-content .el-pagination ::v-deep .el-pagination__jump .el-input .el-input__inner {
-  border: 1px solid #dcdfe6;
-  cursor: pointer;
-  padding: 0 3px;
-  color: #606266;
-  display: inline-block;
-  font-size: 15px;
-  line-height: 28px;
-  border-radius: 3px;
-  outline: 0;
-  background: #fff;
-  width: 100%;
-  text-align: center;
-  height: 28px;
-}
-
-// list one
-.one .list1-view {
-  border: 0;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 0 15px;
-  margin: 0 5px 5px 0;
-  outline: none;
-  color: #fff;
-  background: #157ed2;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.one .list1-view:hover {
-  opacity: 0.8;
-}
-
-.one .list1-edit {
-  border: 0;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 0 15px;
-  margin: 0 5px 5px 0;
-  outline: none;
-  color: #fff;
-  background: #409eff;
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.one .list1-edit:hover {
-  opacity: 0.8;
-}
-
-.one .list1-del {
-  border: 0;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 0 15px;
-  margin: 0 5px 5px 0;
-  outline: none;
-  color: #fff;
-  background: rgba(255, 0, 0, 1);
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.one .list1-del:hover {
-  opacity: 0.8;
-}
-
-.one .list1-btn8 {
-  border: 0;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 0 24px;
-  margin: 0 5px 5px 0;
-  outline: none;
-  color: #fff;
-  background: rgba(255, 128, 0, 1);
-  width: auto;
-  font-size: 14px;
-  height: 32px;
-}
-
-.one .list1-btn8:hover {
-  opacity: 0.8;
-}
-
-.main-content .el-table .el-switch {
-  display: inline-flex;
-  vertical-align: middle;
-  line-height: 30px;
-  position: relative;
-  align-items: center;
-  height: 30px;
-}
-.main-content .el-table .el-switch ::v-deep .el-switch__label--left {
-  cursor: pointer;
-  margin: 0 10px 0 0;
-  color: #333;
-  font-weight: 500;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 16px;
-  transition: 0.2s;
-  height: 30px;
-}
-.main-content .el-table .el-switch ::v-deep .el-switch__label--right {
-  cursor: pointer;
-  margin: 0 0 0 10px;
-  color: #333;
-  font-weight: 500;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 16px;
-  transition: 0.2s;
-  height: 30px;
-}
-.main-content .el-table .el-switch ::v-deep .el-switch__core {
-  border: 1px solid #75c0d6;
-  cursor: pointer;
-  border-radius: 15px;
-  margin: 0;
-  background: #75c0d6;
-  display: inline-block;
-  width: 42px;
-  box-sizing: border-box;
-  transition: border-color 0.3s, background-color 0.3s;
-  height: 20px;
-}
-.main-content .el-table .el-switch ::v-deep .el-switch__core::after {
-  border-radius: 100%;
-  top: 1px;
-  left: 1px;
-  background: #fff;
-  width: 16px;
-  position: absolute;
-  transition: all 0.3s;
-  height: 16px;
-}
-.main-content .el-table .el-switch.is-checked ::v-deep .el-switch__core::after {
-  margin: 0 0 0 -18px;
-  left: 100%;
-}
-
-.main-content .el-table .el-rate ::v-deep .el-rate__item {
-  cursor: pointer;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 0;
-  position: relative;
-}
-.main-content .el-table .el-rate ::v-deep .el-rate__item .el-rate__icon {
-  margin: 0 3px;
-  display: inline-block;
-  font-size: 18px;
-  position: relative;
-  transition: 0.3s;
-}
-::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-  background-color: #0977fd;
-}
-.tb-style {
-}
+@import '@/assets/css/page.scss';
 </style>