Merge branch 'lhd'

src/views/book/courseware/create/components/question/character_structure/CharacterStructure.vue

@@ -25,12 +25,14 @@
       </div>
       <div class="structure-img-box" v-if="data.structure_select_list.length > 0">
         <span>已选选项</span>
-        <div v-for="(item, index) in data.structure_select_list" :key="item.value" class="select-item">
-          <img
-            :src="item.type === 'local' ? require('@/assets/structure/' + item.value) : item.value"
-            class="select-img"
-          />
-          <span>选项{{ index + 1 }}</span>
+        <div style="display: flex; flex-flow: wrap; gap: 16px">
+          <div v-for="(item, index) in data.structure_select_list" :key="item.value" class="select-item">
+            <img
+              :src="item.type === 'local' ? require('@/assets/structure/' + item.value) : item.value"
+              class="select-img"
+            />
+            <span>选项{{ index + 1 }}</span>
+          </div>
         </div>
       </div>
       <div class="option-list" v-for="(item, index) in data.option_list" :key="index">
@@ -79,7 +81,7 @@ import {
   getOption,
   isEnable,
 } from '@/views/book/courseware/data/characterStructure';
-import { GetStaticResources } from '@/api/app';
+import { GetStaticResources, GetFileURLMap } from '@/api/app';
 
 export default {
   name: 'CharacterStructurePage',
@@ -97,7 +99,7 @@ export default {
     };
   },
   watch: {
-    // 'data.option_list': 'handleMindMap',
+    'data.structure_select_id': 'handleData',
   },
   methods: {
     updateFileList({ file_list, file_id_list, file_info_list }) {
@@ -173,6 +175,22 @@ export default {
       item.pinyin = cnchar.spell(cons, 'array', 'low', 'tone').join(' ');
       this.handleMindMap();
     },
+    handleData() {
+      let file_id_list = [];
+      this.data.structure_img_list.forEach((item) => {
+        if (item.file_id.length > 3) {
+          file_id_list.push(item.file_id);
+        }
+      });
+      GetFileURLMap({ file_id_list: file_id_list }).then(({ url_map }) => {
+        file_id_list.forEach((id) => {
+          let items = this.data.structure_img_list.find((p) => p.file_id === id);
+          items.value = url_map[id];
+          let item = this.data.structure_select_list.find((p) => p.file_id === id);
+          item.value = url_map[id];
+        });
+      });
+    },
   },
 };
 </script>

src/views/book/courseware/data/characterStructure.js

@@ -134,6 +134,7 @@ export function getCharacterStructureData() {
     structure_select_list: [],
     image_list: [],
     image_id_list: [],
+    file_list:[],
     file_id_list: [],
     mark: getRandomNumber(),
     mind_map: {

src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

@@ -1,9 +1,30 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="newWord-preview" :style="getAreaStyle()">
+  <div class="structure-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
-    <div class="main"></div>
+    <div class="main">
+      <div class="option">
+        <draggable
+          v-model="SortArr"
+          animation="300"
+          @start="onStart($event)"
+          @end="onEnd($event)"
+          @choose="choose($event)"
+          group="site"
+          class="content-box"
+        >
+          <transition-group>
+            <div class="option_one" :id="item.id" v-for="(item, i) in data.structure_select_list" :key="'op' + i">
+              <img
+                :src="item.type === 'local' ? require('@/assets/structure/' + item.value) : item.value"
+                class="small-img"
+              />
+            </div>
+          </transition-group>
+        </draggable>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,904 +32,149 @@
 import { getCharacterStructureData } from '@/views/book/courseware/data/characterStructure';
 
 import PreviewMixin from '../common/PreviewMixin';
+import draggable from 'vuedraggable';
 
 export default {
   name: 'CharacterStructurePreview',
 
-  components: {},
+  components: { draggable },
   mixins: [PreviewMixin],
   data() {
     return {
       data: getCharacterStructureData(),
+      dragData: [],
+      SortArr: [],
+      single: [],
+      drag: false,
+      currentId: null,
+      isPraShow: false,
+      curData: null,
+      userErrorList: [],
+      correctArr: [],
     };
   },
   watch: {
-    data: {
+    'data.option_list': {
       handler(val) {
         if (val) {
+          this.handleData();
         }
       },
       deep: true,
       immediate: true,
     },
   },
-  methods: {},
+  methods: {
+    onMove(e) {
+      return false;
+    },
+    choose(e) {
+      let index = e.item.outerHTML.indexOf('id');
+      let formIndex = e.item.outerHTML[index + 4];
+      let formIndex2 = e.item.outerHTML[index + 5];
+      if (formIndex * 1 != NaN) {
+        this.currentId = formIndex * 1;
+      }
+      if (formIndex2 * 1 != NaN) {
+        this.currentId = (this.currentId + '' + formIndex2) * 1;
+      }
+    },
+    //开始拖拽事件
+    onStart() {
+      this.drag = true;
+      this.dragData = JSON.parse(JSON.stringify(this.SortArr));
+    },
+    //拖拽结束事件
+    onEnd(e) {
+      this.drag = false;
+      let formIndex = e.to.firstChild.attributes[1].value[4] * 1;
+      if (`${formIndex}` != 'NaN') {
+        if (this.curQue.Bookanswer[formIndex].answerList.length > 1) {
+          let arr = [];
+          this.curQue.option.forEach((item) => {
+            if (item.id == this.currentId) {
+              arr.push(item);
+            }
+          });
+          this.curQue.Bookanswer[formIndex].answerList = JSON.parse(JSON.stringify(arr));
+        }
+      }
+      this.SortArr = JSON.parse(JSON.stringify(this.dragData));
+    },
+    handleData() {
+      this.data.structure_select_list.forEach((item) => {
+        let items = this.data.file_list.find((p) => p.file_id === item.file_id);
+        item.value = items.file_url;
+      });
+      this.data.option_list.forEach((items) => {
+        if (items.is_example) {
+          let obj = {
+            id: items.answer,
+            img_list: [],
+            userAnswerJudge: 'example',
+          };
+          this.single.push({
+            answerList: [obj],
+          });
+        } else {
+          this.single.push({
+            answerList: [],
+          });
+        }
+        if (items.answer) {
+          let obj = {
+            id: items.answer,
+            img_list: [],
+          };
+          this.correctArr.push({
+            answerList: [obj],
+          });
+        } else {
+          this.correctArr.push({
+            answerList: [],
+          });
+        }
+      });
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 @use '@/styles/mixin.scss' as *;
 
-.newWord-preview {
-  @include preview-base;
-
-  .NPC-zhedie {
-    width: 1007px;
-
-    // width: 780px;
-    margin-bottom: 24px;
-
-    .aduioLine-box {
-      margin-bottom: 8px;
-    }
-
-    .practiceBox {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100vh;
-      overflow: hidden;
-      overflow-y: auto;
-      background: rgba(0, 0, 0, 19%);
-    }
-
-    .NPC-word-list {
-      overflow: auto;
-      background: #f7f7f7;
-
-      .NPC-word-tab-common,
-      .collocation,
-      .tabNum-box {
-        flex-shrink: 0;
-      }
-    }
-
-    .NPC-word-table {
-      width: 100%;
-
-      :deep p {
-        margin: 0;
-      }
-
-      > .NPC-word-tr {
-        margin-bottom: 8px;
-        background: #fff;
-        border-radius: 8px;
-
-        .NPC-word-row {
-          position: relative;
-          display: flex;
-
-          // flex-flow: wrap;
-          justify-content: flex-start;
-          padding: 8px 13px 8px 12px;
-          padding-right: 80px;
-          cursor: pointer;
-          border-radius: 8px;
-
-          &.active {
-            background: linear-gradient(0deg, rgba(0, 0, 0, 8%), rgba(0, 0, 0, 8%)), #fff;
-          }
-
-          .right-box {
-            position: absolute;
-            top: 8px;
-            right: 5px;
-            display: flex;
-            gap: 5px;
-          }
-
-          > span {
-            font-size: 16px;
-            line-height: 150%;
-            color: #000;
-          }
-        }
-
-        .NPC-word-tab-common {
-          box-sizing: border-box;
-          width: 125px;
-          padding-left: 8px;
-        }
-      }
-    }
-  }
-
-  .NPC-word-list {
-    padding: 20px 24px;
-    border: 1px solid rgba(0, 0, 0, 10%);
-    border-top: none;
-    border-radius: 0 0 8px 8px;
-  }
-
-  .detail-icon {
-    display: block;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    opacity: 0.5;
-  }
-
-  .tabNum-box {
-    position: relative;
-
-    .star-label {
-      position: absolute;
-      top: 1px;
-      right: -6px;
-      width: 6px;
-      height: 6px;
-    }
-  }
-
-  .play-btn {
-    display: block;
-    width: 16px;
-    height: 16px;
-    margin-top: 4px;
-    background: url('@/assets/fill/voice-pause-red.png') no-repeat left top;
-    background-size: 100% 100%;
-
-    &.active {
-      background: url('@/assets/fill/voice-play-red.png') no-repeat left top;
-      background-size: 100% 100%;
-    }
-  }
-
-  .tabNum {
-    display: block;
-    width: 16px;
-    height: 16px;
-    margin-top: 4px;
-    margin-left: 8px;
-    font-family: 'robot', 'alabo';
-    font-size: 12px;
-    line-height: 16px;
-    color: #fff;
-    text-align: center;
-    background: #de4444;
-    border-radius: 50%;
-  }
-
-  .NPC-word-tab-box {
-    width: 240px;
-
-    span {
-      display: block;
-      width: 100%;
-      margin: 2px 0;
-      color: #000;
-    }
-  }
-
-  .NPC-word-tab-pinyin {
-    font-family: 'League';
-
-    // white-space: nowrap;
-    font-size: 12px;
-    word-break: break-word;
-
-    &.NPC-word-tab-pinyin-red {
-      color: #e35454;
-    }
-
-    &.NPC-word-tab-pinyin-green {
-      color: #24b99e;
-    }
-
-    &.NPC-word-tab-pinyin-brown {
-      color: #bd8865;
-    }
-  }
-
-  .NPC-word-tab-word {
-    font-family: '楷体';
-    font-size: 16px;
-    white-space: nowrap;
-
-    &.NPC-word-tab-word-red {
-      color: #e35454;
-    }
-
-    &.NPC-word-tab-word-green {
-      color: #24b99e;
-    }
-
-    &.NPC-word-tab-word-brown {
-      color: #bd8865;
-    }
-
-    &-break {
-      word-break: break-word;
-      white-space: normal;
-    }
-  }
-
-  .NPC-word-tab-cixing {
-    box-sizing: border-box;
-
-    // width: 48px;
-    width: 60px;
-    font-family: 'robot', 'alabo';
-    text-align: left;
-    word-break: break-word;
-
-    // font-style: italic;  // 要求改为正体
-    &.NPC-word-tab-cixing-red {
-      color: #e35454;
-    }
-
-    &.NPC-word-tab-cixing-green {
-      color: #24b99e;
-    }
-
-    &.NPC-word-tab-cixing-brown {
-      color: #bd8865;
-    }
-
-    &.hasCn {
-      font-size: 13px;
-    }
-  }
-
-  .NPC-word-tab-def {
-    box-sizing: border-box;
-
-    // flex: 1;
-    font-family: 'robot', 'alabo';
-    word-break: break-word;
-    white-space: pre-wrap;
-
-    &.NPC-word-tab-def-red {
-      color: #e35454;
-    }
-
-    &.NPC-word-tab-def-green {
-      color: #24b99e;
-    }
-
-    &.NPC-word-tab-def-brown {
-      color: #bd8865;
-    }
-  }
-
-  .collocation {
-    display: flex;
-    width: 100%;
-
-    // padding-top: 8px;
-
-    > span {
-      flex-shrink: 0;
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 24px;
-      color: #000;
-    }
-
-    > div b {
-      display: block;
-    }
-
-    > b,
-    > div b {
-      flex: 1;
-      font-family: 'robot', '楷体', 'alabo';
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 24px;
-      color: rgba(0, 0, 0, 65%);
-    }
-  }
-
-  @keyframes firstrotate {
-    0% {
-      transform: rotateZ(0deg);
-    }
-
-    100% {
-      transform: rotateZ(180deg);
-    }
-  }
-
-  @keyframes huifuRotate {
-    0% {
-      transform: rotateZ(180deg);
-    }
-
-    100% {
-      transform: rotateZ(0deg);
-    }
-  }
-
-  .luyin-box-wordphrase {
-    height: 24px;
-  }
-
-  .NPC-word-tile {
+.structure-preview {
+  .option {
     display: flex;
-    flex-flow: wrap;
-    gap: 20px;
-    padding: 20px 0;
-  }
-
-  .writeTop {
-    position: relative;
-    display: flex;
-    column-gap: 8px;
-    width: 400px;
-
-    .left,
-    .right {
-      position: relative;
-      box-sizing: border-box;
-      width: 100%;
-      min-height: 270px;
-      padding: 8px 12px 18px;
-      overflow: hidden;
-      background: #fff;
-      border: 4px solid #fff;
-      border-radius: 24px;
-
-      .header-info {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        margin-bottom: 12px;
-
-        :deep .el-input__inner {
-          height: 24px;
-          padding: 0;
-          font-size: 24px;
-          font-weight: 400;
-          line-height: 100%;
-          color: rgba(0, 0, 0, 100%);
-          border: none;
-        }
-
-        .label {
-          :deep .el-input__inner {
-            text-align: right;
-          }
-        }
-      }
-    }
-
-    min-height: 332px;
-    transition: 0.6s;
-    perspective: 1000px;
-    transform-style: preserve-3d;
-
-    .left-preview {
-      padding-top: 40px;
-
-      // padding-bottom: 32px;
-      // position: absolute;
-      backface-visibility: hidden;
-    }
-
-    .header-info-preview {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      width: 100%;
-
-      h5 {
-        padding: 0 12px;
-        margin: 0;
-        font-size: 20px;
-        font-weight: 400;
-        line-height: 32px;
-        color: #000;
-      }
-
-      label {
-        position: absolute;
-        top: -4px;
-        right: -4px;
-        padding: 0 16px 0 8px;
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 150%;
-        color: #fff;
-        background: #fff;
-        border-radius: 0 8px;
-      }
-    }
+    flex-wrap: wrap;
+    padding: 22px 30px;
+    background: rgba(10, 75, 149, 15%);
+    border-radius: 8px;
 
-    .left-big {
+    .option_one {
       display: flex;
       align-items: center;
       justify-content: center;
-    }
-
-    .del-btn {
-      position: absolute;
-      right: 8px;
-      bottom: 8px;
-      padding: 5px 8px;
-      font-size: 24px;
-      color: #fff;
-      cursor: pointer;
-      background: #f56767;
-      border-radius: 40px;
-    }
-
-    .overturn-btn {
-      position: absolute;
-      right: 8px;
-      bottom: 8px;
-      width: 40px;
-      height: 40px;
-      padding: 8px;
-      font-size: 24px;
-      line-height: 1;
-      color: #fff;
-      cursor: pointer;
-      background: #e0e0e0;
-      border-radius: 8px;
-    }
-
-    .el-icon-zoom-in,
-    .filt-check {
-      position: absolute;
-      bottom: 8px;
-      left: 8px;
-      width: 30px;
-      height: 30px;
-      font-size: 24px;
-      cursor: pointer;
-
-      :deep .el-checkbox__inner {
-        width: 24px;
-        height: 24px;
-      }
-
-      :deep .el-checkbox__inner::after {
-        left: 8px;
-        width: 6px;
-        height: 14px;
-      }
-    }
-
-    .right {
-      display: flex;
-      flex-flow: wrap;
-      row-gap: 8px;
-      align-items: center;
-      padding: 16px 24px 26px;
-
-      .card-label {
-        width: 100%;
-        height: 22px;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-        color: #4e5969;
-      }
-
-      :deep .el-textarea {
-        height: 64px;
-      }
-
-      .config-box {
-        display: flex;
-        align-items: center;
-        width: 100%;
-
-        span {
-          margin-right: 8px;
-          font-size: 14px;
-          line-height: 20px;
-          color: #000;
-        }
-
-        .el-color-picker {
-          height: 32px;
-        }
-
-        :deep .el-color-picker__trigger {
-          height: 32px;
-        }
-
-        .el-radio {
-          margin-right: 8px;
-        }
-
-        .el-radio-group {
-          display: flex;
-        }
-
-        :deep .el-radio__input.is-checked .el-radio__inner {
-          background: #000;
-          border-color: #000;
-        }
-
-        :deep .el-radio__input.is-checked + .el-radio__label {
-          color: #000;
-        }
-      }
-    }
-
-    .right-preview {
-      display: block;
-      padding: 36px;
-
-      .pinyin-box {
-        margin-bottom: 8px;
-        font-family: 'League';
-        font-feature-settings: 'cv01' on;
-
-        // font-size: 18px;
-        line-height: 120%;
-        color: #de4444;
-        text-align: center;
-      }
-
-      .hz-box {
-        width: 100%;
-
-        .hz-item {
-          text-align: center;
-
-          :deep .strockplayInner {
-            width: 76px;
-            height: 76px;
-          }
-
-          p {
-            margin: 0 0 8px;
-            font-family: 'League';
-            font-size: 18px;
-            font-feature-settings: 'cv01' on;
-            line-height: 120%;
-            color: #de4444;
-          }
-        }
-      }
-
-      :deep .audio-wrapper {
-        box-sizing: border-box;
-        width: 50px;
-        height: 50px;
-        padding: 13px;
-        margin: 0 auto 8px;
-        cursor: pointer;
-        background: #f3f3f3;
-        border-radius: 40px;
-
-        .voice-play {
-          width: 24px;
-          height: 24px;
-        }
-      }
-
-      .definition_list-box {
-        margin-top: 16px;
-        white-space: pre;
-
-        > div {
-          display: flex;
-          margin-bottom: 8px;
-
-          label,
-          p {
-            width: 40px;
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 150%;
-            color: #000;
-          }
-
-          label {
-            width: 47px;
-          }
-
-          p {
-            flex: 1;
-            line-height: 0;
-            word-break: break-word;
-            white-space: pre-wrap;
-          }
-        }
-      }
-
-      :deep p {
-        margin: 0;
-        line-height: 1.5;
-      }
-    }
-
-    .right-preview-rota {
-      transform: rotateY(180deg);
-    }
-
-    .item-image {
-      position: relative;
+      width: 72px;
+      height: 72px;
+      margin: 10px 20px;
       overflow: hidden;
-      font-size: 0;
-
-      // background: #f2f3f5;
-      border-radius: 8px;
-
-      .item-image-del {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        display: block;
-        width: 16px;
-        height: 16px;
-        padding: 8px;
-        font-size: 16px;
-        color: #ee3232;
-        cursor: pointer;
-        background-color: #fff;
-        border-radius: 50%;
-        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 25%);
-      }
-    }
-
-    .item-con {
-      display: flex;
-      align-items: center;
-      width: 50%;
-      margin-top: 16px;
-
-      label {
-        width: 44px;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-        color: #4e5969;
-      }
-
-      :deep .el-input__inner {
-        width: 235px;
-        height: 32px;
-        font-family: '楷体';
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-        background: #f2f3f5;
-        border: none;
-        border-radius: 2px;
-      }
-
-      .pinyin {
-        :deep .el-input__inner {
-          font-family: 'League';
-        }
-      }
-    }
-
-    .con-preview {
-      margin-top: 8px;
-      font-family: '楷体';
-      font-size: 38px;
-      font-weight: 400;
-      line-height: 100%;
-      color: #000;
-      text-align: center;
-
-      &-big {
-        margin: 0;
-        font-size: 86px;
-      }
-    }
-
-    .writeTop-row {
-      display: flex;
-      justify-content: center;
-    }
-  }
-
-  .flipped {
-    transform: rotateY(180deg);
-  }
-
-  .flipped-back {
-    transform: rotateY(180deg);
-  }
-
-  .hz-box {
-    display: flex;
-    width: max-content;
-  }
-
-  .writeTop-item {
-    border: 1px solid #de4444;
-  }
-
-  .writeTop-item-noLeft {
-    border-left: none;
-  }
-}
-
-.newWord-table {
-  .cell {
-    width: max-content;
-    white-space: nowrap;
-  }
-
-  :deep thead {
-    display: none;
-  }
-}
-</style>
-<style lang="scss">
-.NPC-zhedie {
-  .topTitle {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    height: 48px;
-    padding-right: 16px;
-    padding-left: 24px;
-    overflow: hidden;
-    background: #e35454;
-    border: 1px solid rgba(0, 0, 0, 10%);
-    border-radius: 8px 8px 0 0;
-
-    .NPC-top-left {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-
-      .NPC-topTitle-text {
-        margin-right: 8px;
-        font-family: 'sourceR';
-        font-size: 16px;
-        font-weight: bold;
-        color: #fff;
-        white-space: pre;
-      }
-    }
-
-    .NPC-top-right {
-      display: flex;
-      gap: 4px;
-      align-items: center;
-      justify-content: flex-start;
       cursor: pointer;
-
-      &-text {
-        font-size: 14px;
-        font-weight: normal;
-        line-height: 16px;
-        color: #fff;
-      }
+      border: 2px solid;
+      border-radius: 8px;
 
       img {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    img {
-      width: 24px;
-      height: 24px;
-    }
+        max-width: 100%;
+        max-height: 100%;
 
-    .rotate {
-      animation-name: firstrotate;
-      animation-timing-function: linear;
-      animation-direction: 2s;
-      animation-fill-mode: both;
-    }
-  }
-
-  .topTitleWhite {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    height: 48px;
-    padding-right: 16px;
-    padding-left: 24px;
-    overflow: hidden;
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 10%);
-    border-radius: 8px 8px 0 0;
-
-    .NPC-top-left {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-
-      .NPC-topTitle-text {
-        margin-right: 8px;
-        font-family: 'sourceR';
-        font-size: 16px;
-        font-weight: bold;
-        color: #000;
+        // position: relative;
+        // top: 2px;
+        opacity: 0.8;
       }
     }
 
-    .NPC-top-right {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      cursor: pointer;
-
-      &-text {
-        font-size: 14px;
-        font-weight: normal;
-        line-height: 16px;
-        color: #000;
-      }
-
-      img {
-        width: 16px;
-        height: 16px;
-        margin-left: 4px;
-      }
-    }
-
-    img {
-      width: 24px;
-      height: 24px;
-    }
-
-    .rotate {
-      animation-name: firstrotate;
-      animation-timing-function: linear;
-      animation-direction: 2s;
-      animation-fill-mode: both;
+    .option_one:hover {
     }
   }
-
-  .el-collapse-item__content {
-    padding-bottom: 0;
-  }
-
-  .el-slider__button {
-    width: 8px;
-    height: 8px;
-  }
-
-  .el-slider__runway {
-    padding: 0;
-    margin: 0;
-  }
-
-  .el-slider {
-    position: relative;
-
-    // top: -3px;
-  }
-
-  .el-collapse {
-    box-sizing: border-box;
-    background: #f7f7f7;
-    border-radius: 8px;
-  }
-
-  .el-collapse-item__wrap {
-    background: #f7f7f7;
-    border: 1px solid rgba(0, 0, 0, 10%);
-    border-top: 0;
-    border-radius: 0 0 8px 8px;
-  }
-
-  .el-collapse-item__arrow {
-    display: none;
-  }
-
-  .el-table__row {
-    padding: 4px 0;
-  }
 }
 </style>