移动端预览框架

src/mobile_preview/index.vue

@@ -0,0 +1,450 @@
+<template>
+  <div class="common-preview">
+    <div class="common-preview__header">
+      <div class="menu-container">
+        <MenuPopover :node-list="node_list" :book-name="courseware_info.book_name" @selectNode="selectNode" />
+      </div>
+      <!-- <div class="courseware">
+        <span class="name-path">{{ courseware_info.name_path }}</span>
+        <span class="flow-nodename">{{ courseware_info.cur_audit_flow_node_name }}</span>
+        <slot name="middle" :courseware="courseware_info"></slot>
+        <div class="group">
+          <el-checkbox v-model="isShowGroup">显示分组</el-checkbox>
+          <el-checkbox v-model="groupShowAll">分组显示全部</el-checkbox>
+          <el-checkbox v-model="isJudgeCorrect">判断对错</el-checkbox>
+          <el-checkbox v-model="isShowAnswer" :disabled="!isJudgeCorrect">显示答案</el-checkbox>
+        </div>
+        <span class="link">
+          <el-select v-model="lang" placeholder="请选择语言" size="mini" class="lang-select">
+            <el-option v-for="item in langList" :key="item.type" :label="item.name" :value="item.type" />
+          </el-select>
+        </span>
+        <div class="operator">
+          <slot name="operator" :courseware="courseware_info"></slot>
+        </div>
+      </div> -->
+    </div>
+
+    <div class="audit-content">
+      <div ref="previewMain" class="main-container">
+        <main :class="['preview-main']">
+          <span class="title" :style="{ backgroundColor: unified_attrib?.topic_color }">
+            <SvgIcon icon-class="menu-2" size="24" />
+            <span>{{ courseware_info.name_path }}</span>
+          </span>
+          <MobileCoursewarePreview
+            v-if="courseware_info.book_name"
+            ref="courserware"
+            :is-show-group="isShowGroup"
+            :group-show-all="groupShowAll"
+            :group-row-list="content_group_row_list"
+            :data="data"
+            :component-list="component_list"
+            :background="background"
+            :can-remark="isTrue(courseware_info.is_my_audit_task) && isTrue(courseware_info.is_can_add_audit_remark)"
+            :show-remark="false"
+            :component-remark-obj="remark_list_obj"
+            @computeScroll="computeScroll"
+          />
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MobileCoursewarePreview from '@/views/book/courseware/preview/MobileCoursewarePreview.vue';
+import MenuPopover from '@/views/personal_workbench/common/MenuPopover.vue';
+import { isTrue } from '@/utils/validate';
+import * as OpenCC from 'opencc-js';
+
+import { GetBookCoursewareInfo, GetCoursewareAuditRemarkList } from '@/api/project';
+import {
+  ContentGetCoursewareContent_View,
+  ChapterGetBookChapterStructExpandList,
+  GetBookBaseInfo,
+  GetLanguageTypeList,
+  GetBookUnifiedAttrib,
+} from '@/api/book';
+
+export default {
+  name: 'CommonPreview',
+  components: {
+    MobileCoursewarePreview,
+    MenuPopover,
+  },
+  provide() {
+    return {
+      getLang: () => this.lang,
+      getChinese: () => this.chinese,
+      getLangList: () => this.langList,
+      convertText: this.convertText,
+    };
+  },
+  data() {
+    return {
+      book_id: this.$route.query.book_id || '',
+      select_node: '',
+      courseware_info: {
+        book_name: '',
+        is_can_start_edit: 'false',
+        is_can_submit_audit: 'false',
+        is_can_audit_pass: 'false',
+        is_can_audit_reject: 'false',
+        is_can_add_audit_remark: 'false',
+        is_can_finish_audit: 'false',
+        is_can_request_shangjia_book: 'false',
+        is_can_request_rollback_project: 'false',
+        is_can_shangjia_book: 'false',
+        is_can_rollback_project: 'false',
+      },
+      background: {
+        background_image_url: '',
+        background_position: {
+          left: 0,
+          top: 0,
+        },
+      },
+      node_list: [],
+      data: { row_list: [] },
+      component_list: [],
+      content_group_row_list: [],
+      remark_list: [],
+      remark_list_obj: {}, // 存放以组件为对象的数组
+      visible: false,
+      remark_content: '',
+      submit_loading: false,
+      isTrue,
+      menuPosition: {
+        x: -1,
+        y: -1,
+        componentId: 'WHOLE',
+      },
+      sidebarIconList: [
+        { icon: 'search', title: '搜索', handle: '', param: {} },
+        { icon: 'mindmap', title: '思维导图', handle: 'openMindMap', param: {} },
+        { icon: 'connect', title: '连接', handle: '', param: {} },
+        { icon: 'audio', title: '音频', handle: 'openDrawer', param: { type: '1' } },
+        { icon: 'image', title: '图片', handle: 'openDrawer', param: { type: '0' } },
+        { icon: 'video', title: '视频', handle: 'openDrawer', param: { type: '2' } },
+        { icon: 'text', title: '文本', handle: '', param: {} },
+        { icon: 'file', title: '文件', handle: '', param: {} },
+        { icon: 'collect', title: '收藏', handle: '', param: {} },
+        { icon: 'setting', title: '设置', handle: '', param: {} },
+      ],
+      visibleMindMap: false,
+      isChildDataLoad: false,
+      mindMapJsonData: {}, // 思维导图json数据
+      drawerType: '', // 抽屉类型
+      drawerStyle: {
+        top: '0',
+        height: '0',
+        right: '0',
+      },
+      page_capacity: 10,
+      cur_page: 1,
+      file_list: [],
+      total_count: 0,
+      loading: false,
+      isShowGroup: false,
+      groupShowAll: true,
+      opencc: OpenCC.Converter({ from: 'cn', to: 'tw' }),
+      langList: [],
+      lang: 'ZH',
+      chinese: 'zh-Hans',
+      isJudgeCorrect: false,
+      isShowAnswer: false,
+      unified_attrib: {},
+    };
+  },
+  computed: {
+    disabled() {
+      return this.loading || this.noMore;
+    },
+    noMore() {
+      return this.file_list.length >= this.total_count && this.total_count > 0;
+    },
+  },
+  watch: {
+    isJudgeCorrect(newVal) {
+      if (!newVal) {
+        this.isShowAnswer = false;
+      }
+      this.simulateAnswer(newVal);
+    },
+    isShowAnswer() {
+      this.simulateAnswer();
+    },
+  },
+  created() {
+    this.getBookBaseInfo();
+    this.getBookChapterStructExpandList();
+    this.getBookUnifiedAttr();
+  },
+  methods: {
+    getBookBaseInfo() {
+      GetBookBaseInfo({ id: this.book_id }).then(({ book_info }) => {
+        this.courseware_info = { ...this.courseware_info, ...book_info, book_name: book_info.name };
+      });
+    },
+
+    /**
+     * 得到教材课件信息
+     * @param {string} id - 课件ID
+     */
+    getBookCoursewareInfo(id) {
+      GetBookCoursewareInfo({ id, is_contain_producer: 'true', is_contain_auditor: 'true' }).then(
+        ({ courseware_info }) => {
+          this.courseware_info = { ...this.courseware_info, ...courseware_info };
+          this.getLangList();
+        },
+      );
+    },
+    /**
+     * 得到课件内容（展示内容）
+     * @param {string} id - 课件ID
+     */
+    getCoursewareComponentContent_View(id) {
+      ContentGetCoursewareContent_View({ id }).then(({ content, component_list, content_group_row_list }) => {
+        if (content) {
+          const _content = JSON.parse(content);
+          this.data = _content;
+          this.background = {
+            background_image_url: _content.background_image_url,
+            background_position: _content.background_position,
+          };
+        } else {
+          this.data = { row_list: [] };
+        }
+
+        if (component_list) this.component_list = component_list;
+        if (content_group_row_list) this.content_group_row_list = JSON.parse(content_group_row_list) || [];
+      });
+    },
+
+    getLangList() {
+      GetLanguageTypeList({ book_id: this.courseware_info.book_id, is_contain_zh: 'true' }).then(
+        ({ language_type_list }) => {
+          this.langList = language_type_list;
+        },
+      );
+    },
+
+    /**
+     * 得到教材章节结构展开列表
+     */
+    getBookChapterStructExpandList() {
+      ChapterGetBookChapterStructExpandList({
+        book_id: this.book_id,
+        node_deep_mode: 0,
+        is_contain_producer: 'true',
+        is_contain_auditor: 'true',
+      }).then(({ node_list }) => {
+        this.node_list = node_list;
+      });
+    },
+
+    getBookUnifiedAttr() {
+      GetBookUnifiedAttrib({ book_id: this.book_id }).then(({ content }) => {
+        if (content) {
+          this.unified_attrib = JSON.parse(content);
+        }
+      });
+    },
+
+    /**
+     * 选择节点
+     * @param {string} nodeId - 节点ID
+     */
+    selectNode(nodeId) {
+      this.getCoursewareComponentContent_View(nodeId);
+      this.getBookCoursewareInfo(nodeId);
+      this.getCoursewareAuditRemarkList(nodeId);
+      this.select_node = nodeId;
+    },
+    // 审校批注列表
+    getCoursewareAuditRemarkList(id) {
+      this.remark_list = [];
+      let remarkListObj = {};
+      GetCoursewareAuditRemarkList({
+        courseware_id: id,
+      }).then(({ remark_list }) => {
+        this.remark_list = remark_list;
+        if (!remark_list) return;
+        remarkListObj = remark_list.reduce((acc, item) => {
+          if (!acc[item.component_id]) {
+            acc[item.component_id] = [];
+          }
+          acc[item.component_id].push(item);
+          return acc;
+        }, {});
+
+        this.remark_list_obj = remarkListObj;
+      });
+    },
+    dialogClose(type) {
+      this[`visible${type}`] = false;
+    },
+    // 计算previewMain滑动距离
+    computeScroll() {
+      this.$refs.courserware.handleResult(
+        this.$refs.previewMain.scrollTop,
+        this.$refs.previewMain.scrollLeft,
+        this.select_node,
+      );
+    },
+
+    /**
+     * 文本转换
+     * @param {string} text - 要转换的文本
+     * @returns {string} - 转换后的文本
+     */
+    convertText(text) {
+      if (this.chinese === 'zh-Hant' && this.opencc) {
+        return this.opencc(text);
+      }
+      return text;
+    },
+
+    simulateAnswer(disabled = true) {
+      this.$refs.courserware.simulateAnswer(this.isJudgeCorrect, this.isShowAnswer, disabled);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.common-preview {
+  &__header {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 6px 4px;
+    margin-bottom: 5px;
+    background-color: #fff;
+    border-top: $border;
+    border-bottom: $border;
+
+    > .menu-container {
+      display: flex;
+      justify-content: space-between;
+      width: 360px;
+      padding: 4px 8px;
+      border-right: $border;
+    }
+
+    > .courseware {
+      display: flex;
+      flex-grow: 1;
+      column-gap: 16px;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+
+      .name-path {
+        min-width: 200px;
+        height: 40px;
+        padding: 4px 8px;
+        font-size: 14px;
+        line-height: 32px;
+        border-right: $border;
+      }
+
+      .lang-select {
+        :deep .el-input {
+          width: 100px;
+        }
+
+        :deep .el-input__inner {
+          height: 24px;
+          line-height: 24px;
+          background-color: #fff;
+        }
+
+        :deep .el-input__icon {
+          line-height: 24px;
+        }
+      }
+
+      .flow-nodename {
+        flex: 1;
+      }
+
+      .group {
+        display: flex;
+        align-items: center;
+      }
+
+      .operator {
+        display: flex;
+        column-gap: 8px;
+        align-items: center;
+
+        .link {
+          + .link {
+            margin-left: 0;
+
+            &::before {
+              margin-right: 8px;
+              color: #999;
+              content: '|';
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .main-container {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+  }
+
+  main.preview-main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    row-gap: 5px;
+    width: 100%;
+    min-height: 100%;
+    padding: 5px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);
+
+    .title {
+      display: inline-flex;
+      column-gap: 24px;
+      align-items: center;
+      width: 100%;
+      min-width: 280px;
+      height: 64px;
+      padding: 18px 24px;
+      font-size: 20px;
+      color: #fff;
+      background-color: #f44444;
+      border-top-left-radius: 12px;
+      border-top-right-radius: 16px;
+    }
+  }
+
+  .audit-content {
+    display: flex;
+    width: 100%;
+  }
+}
+</style>
+
+<style lang="scss">
+.tox-tinymce-aux {
+  z-index: 9999 !important;
+}
+</style>

src/router/modules/index.js

@@ -1,3 +1,3 @@
-import { BookPreview, EnterPage, NotFoundPage } from './basic';
+import { BookPreview, MobileBookPreview, EnterPage, NotFoundPage } from './basic';
 
-export const routes = [BookPreview, EnterPage, NotFoundPage];
+export const routes = [BookPreview, MobileBookPreview, EnterPage, NotFoundPage];

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -40,41 +40,7 @@
                   gridArea: grid.grid_area,
                   height: grid.height,
                 }"
-                @contextmenu.native.prevent="handleContextMenu($event, grid.id)"
               />
-
-              <div
-                v-if="showMenu && componentId === grid.id"
-                :key="'menu' + grid.id + k"
-                class="custom-context-menu"
-                :style="{ left: menuPosition.x + 'px', top: menuPosition.y + 'px' }"
-                @click="handleMenuItemClick"
-              >
-                添加批注
-              </div>
-              <div
-                v-if="showRemark && Object.keys(componentRemarkObj).length !== 0 && componentRemarkObj[grid.id]"
-                :key="'show' + grid.id + k"
-              >
-                <el-popover
-                  v-for="(items, indexs) in componentRemarkObj[grid.id]"
-                  :key="indexs"
-                  placement="bottom"
-                  width="200"
-                  trigger="click"
-                >
-                  <div v-html="items.content"></div>
-                  <template #reference>
-                    <SvgIcon
-                      slot="reference"
-                      icon-class="icon-info"
-                      size="24"
-                      class="remark-info"
-                      :style="{ left: items.position_x - 12 + 'px', top: items.position_y - 12 + 'px' }"
-                    />
-                  </template>
-                </el-popover>
-              </div>
             </template>
           </div>
         </template>
@@ -168,10 +134,6 @@ export default {
       left: rect.left,
       top: rect.top,
     };
-    window.addEventListener('mousedown', this.handleMouseDown);
-  },
-  beforeDestroy() {
-    window.removeEventListener('mousedown', this.handleMouseDown);
   },
   methods: {
     /**
@@ -319,43 +281,6 @@ export default {
         gridTemplateRows,
       };
     },
-    handleContextMenu(event, id) {
-      console.log(this.canRemark);
-
-      if (this.canRemark) {
-        event.preventDefault(); // 阻止默认的上下文菜单显示
-        this.menuPosition = {
-          x: event.clientX - this.divPosition.left,
-          y: event.clientY - this.divPosition.top,
-        }; // 设置菜单位置
-        this.componentId = id;
-        this.$emit('computeScroll');
-      }
-    },
-    handleResult(top, left, select_node) {
-      this.menuPosition = {
-        x: this.menuPosition.x + left,
-        y: this.menuPosition.y + top,
-        select_node,
-      }; // 设置菜单位置
-      this.showMenu = true; // 显示菜单
-    },
-    handleMenuItemClick() {
-      this.showMenu = false; // 隐藏菜单
-      this.$emit(
-        'addRemark',
-        this.menuPosition.select_node,
-        this.menuPosition.x,
-        this.menuPosition.y,
-        this.componentId,
-      );
-    },
-    handleMouseDown(event) {
-      if (event.button === 0 && event.target.className !== 'custom-context-menu') {
-        // 0 表示左键
-        this.showMenu = false;
-      }
-    },
     /**
      * 查找子组件
      * @param {string} id 组件的唯一标识符

src/views/book/courseware/preview/MobileCoursewarePreview.vue

@@ -14,8 +14,9 @@
       },
     ]"
   >
+    <!-- 行 -->
     <template v-for="(row, i) in data.row_list">
-      <div v-show="computedRowVisibility(row.row_id)" :key="i" class="row" :style="getMultipleColStyle(i)">
+      <div v-show="computedRowVisibility(row.row_id)" :key="i" class="row">
         <el-checkbox
           v-if="
             isShowGroup &&
@@ -26,59 +27,27 @@
         />
         <!-- 列 -->
         <template v-for="(col, j) in row.col_list">
-          <div :key="j" :class="['col', `col-${i}-${j}`]" :style="computedColStyle(col)">
+          <div :key="j" :class="['col', `col-${i}-${j}`]">
             <!-- 网格 -->
             <template v-for="(grid, k) in col.grid_list">
               <component
                 :is="previewComponentList[grid.type]"
                 :key="k"
                 ref="preview"
+                class="grid"
                 :content="computedColContent(grid.id)"
                 :data-row="i"
                 :data-col="j"
                 :data-grid="k"
                 :data-view-order="computedGridViewOrder(grid.id)"
                 :class="[grid.id]"
+                :is-mobile="true"
                 :data-id="grid.id"
                 :style="{
                   gridArea: grid.grid_area,
                   height: grid.height,
                 }"
-                @contextmenu.native.prevent="handleContextMenu($event, grid.id)"
               />
-
-              <div
-                v-if="showMenu && componentId === grid.id"
-                :key="'menu' + grid.id + k"
-                class="custom-context-menu"
-                :style="{ left: menuPosition.x + 'px', top: menuPosition.y + 'px' }"
-                @click="handleMenuItemClick"
-              >
-                添加批注
-              </div>
-              <div
-                v-if="showRemark && Object.keys(componentRemarkObj).length !== 0 && componentRemarkObj[grid.id]"
-                :key="'show' + grid.id + k"
-              >
-                <el-popover
-                  v-for="(items, indexs) in componentRemarkObj[grid.id]"
-                  :key="indexs"
-                  placement="bottom"
-                  width="200"
-                  trigger="click"
-                >
-                  <div v-html="items.content"></div>
-                  <template #reference>
-                    <SvgIcon
-                      slot="reference"
-                      icon-class="icon-info"
-                      size="24"
-                      class="remark-info"
-                      :style="{ left: items.position_x - 12 + 'px', top: items.position_y - 12 + 'px' }"
-                    />
-                  </template>
-                </el-popover>
-              </div>
             </template>
           </div>
         </template>
@@ -172,10 +141,6 @@ export default {
       left: rect.left,
       top: rect.top,
     };
-    window.addEventListener('mousedown', this.handleMouseDown);
-  },
-  beforeDestroy() {
-    window.removeEventListener('mousedown', this.handleMouseDown);
   },
   methods: {
     /**
@@ -206,6 +171,7 @@ export default {
     /**
      * 计算行的可见性
      * @params {string} rowId 行的ID
+     * @returns {boolean} 行是否可见
      */
     computedRowVisibility(rowId) {
       if (this.groupShowAll) return true;
@@ -323,43 +289,6 @@ export default {
         gridTemplateRows,
       };
     },
-    handleContextMenu(event, id) {
-      console.log(this.canRemark);
-
-      if (this.canRemark) {
-        event.preventDefault(); // 阻止默认的上下文菜单显示
-        this.menuPosition = {
-          x: event.clientX - this.divPosition.left,
-          y: event.clientY - this.divPosition.top,
-        }; // 设置菜单位置
-        this.componentId = id;
-        this.$emit('computeScroll');
-      }
-    },
-    handleResult(top, left, select_node) {
-      this.menuPosition = {
-        x: this.menuPosition.x + left,
-        y: this.menuPosition.y + top,
-        select_node,
-      }; // 设置菜单位置
-      this.showMenu = true; // 显示菜单
-    },
-    handleMenuItemClick() {
-      this.showMenu = false; // 隐藏菜单
-      this.$emit(
-        'addRemark',
-        this.menuPosition.select_node,
-        this.menuPosition.x,
-        this.menuPosition.y,
-        this.componentId,
-      );
-    },
-    handleMouseDown(event) {
-      if (event.button === 0 && event.target.className !== 'custom-context-menu') {
-        // 0 表示左键
-        this.showMenu = false;
-      }
-    },
     /**
      * 查找子组件
      * @param {string} id 组件的唯一标识符
@@ -380,8 +309,12 @@ export default {
         item.showAnswer(isJudgingRightWrong, isShowRightAnswer, null, disabled);
       });
     },
+    /**
+     * 获取网格 id，是第几行第几列第几个网格，通过 data.row_list 计算
+     * @param {string} id 网格 id
+     * @returns {number} 网格的显示顺序
+     */
     computedGridViewOrder(id) {
-      // 获取网格 id，是第几行第几列第几个网格，通过 data.row_list 计算
       let rowIndex = -1;
       let colIndex = -1;
       let gridIndex = -1;
@@ -437,16 +370,20 @@ export default {
   border-bottom-left-radius: 12px;
 
   .row {
-    display: grid;
-    grid-template-columns: 1fr !important;
-    grid-auto-flow: unset !important;
+    display: flex;
+    flex-direction: column;
     gap: 16px;
 
     .col {
-      display: grid;
+      display: flex;
+      flex-direction: column;
       gap: 16px;
       overflow: hidden;
 
+      .grid {
+        width: 100%;
+      }
+
       .main {
         .option-list {
           flex-direction: column !important;

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -37,6 +37,11 @@ const mixin = {
       type: String,
       default: '',
     },
+    // 是否为移动端预览
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     showLang() {

src/web_preview/index.vue

@@ -441,134 +441,6 @@ export default {
     display: flex;
     min-width: 1400px;
     height: calc(100vh - 56px);
-
-    .remark-list {
-      width: 300px;
-      margin-left: 20px;
-      overflow: auto;
-      border: 1px solid #e5e5e5;
-
-      h5 {
-        padding: 0 5px;
-        margin: 0;
-        font-size: 18px;
-        line-height: 40px;
-        background: #f2f3f5;
-      }
-
-      .delete-btn {
-        padding-left: 10px;
-        color: #f44444;
-        border-left: 1px solid #e5e5e5;
-      }
-
-      ul {
-        height: calc(100% - 40px);
-        overflow: auto;
-
-        li {
-          border-bottom: 1px solid #e5e5e5;
-
-          > p {
-            padding: 5px;
-          }
-
-          :deep p {
-            margin: 0;
-          }
-
-          .remark-bottom {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 5px;
-            font-size: 14px;
-            color: #555;
-            border-top: 1px solid #e5e5e5;
-          }
-        }
-      }
-    }
-
-    .sidebar {
-      display: flex;
-      flex-direction: column;
-      row-gap: 16px;
-      align-items: center;
-      height: 100%;
-      padding: 12px 8px;
-      margin-left: 8px;
-      box-shadow: -4px 0 4px rgba(0, 0, 0, 10%);
-
-      &-icon {
-        cursor: pointer;
-      }
-    }
-
-    .el-drawer__body {
-      .scroll-container {
-        display: flex;
-        flex-direction: column;
-        row-gap: 8px;
-        margin: 6px;
-
-        .list-item {
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          border: 1px solid #ccc;
-          border-radius: 8px;
-
-          :deep .el-slider {
-            .el-slider__runway {
-              background-color: #eee;
-            }
-          }
-
-          :deep .audio-middle {
-            width: calc(25vw - 40px);
-            border: none;
-            border-radius: 8px;
-          }
-
-          .el-image {
-            display: flex;
-            width: 30%;
-            min-width: 30%;
-            height: 90px;
-            margin: 6px;
-            background-color: #ccc;
-            border-radius: 8px;
-          }
-
-          .video-play {
-            width: 30%;
-            min-width: 30%;
-            margin: 6px;
-          }
-
-          .text-box {
-            word-break: break-word;
-          }
-        }
-      }
-
-      p {
-        color: #999;
-        text-align: center;
-      }
-    }
-  }
-}
-
-:deep .audit-dialog {
-  .el-dialog__body {
-    height: calc(100vh - 260px);
-    padding: 5px 20px;
-  }
-
-  .mind-map-container .mind-map {
-    height: calc(100vh - 310px);
   }
 }
 </style>