ppt

package.json

@@ -54,6 +54,7 @@
     "tippy.js": "^6.3.7",
     "vue": "^3.5.17",
     "vuedraggable": "^4.1.0",
+    "wangeditor": "^4.7.15",
     "y-websocket": "^3.0.0",
     "yjs": "^13.6.27"
   },

src/views/Student/components/ChoiceWorkModal.vue

@@ -1,7 +1,7 @@
 <template>
   <Modal :visible="visible" :width="1024" :closeButton="true" @update:visible="val => emit('update:visible', val)">
     <div class="wp_tool wp_tool45" v-if="workData">
-      <div class="wp_t45_title">题目内容</div>
+      <!-- <div class="wp_t45_title">题目内容</div>
       <div
         class="s_b_m_toolItem"
         v-for="(item, index) in workData.testJson"
@@ -61,8 +61,73 @@
             <span v-else>{{ item2 }}</span>
           </span>
         </div>
+      </div> -->
+      <div class="cq_title" v-if="workData.testJson[showIndex]">
+      <span>{{ workData.testJson[showIndex].teststitle }}</span>
+
+      <div class="cq_changeBtnArea" v-if="workData.testJson.length>1">
+        <span :class="{cq_cba_disabled: showIndex == 0}" @click="changeQuestion('prev')">上一题</span>
+        <span :class="{cq_cba_disabled: showIndex == workData.testJson.length - 1}" @click="changeQuestion('next')">下一题</span>
       </div>
     </div>
+
+
+    <img class="cq_image" v-if="workData.testJson[showIndex].timuList.length>0" :src="workData.testJson[showIndex].timuList[0].src" @click="openPreview(workData.testJson[showIndex].timuList[0])">
+
+    <div class="cq_type" v-if="workData.testJson[showIndex]">
+      {{ workData.testJson[showIndex].type == 1 ? "单选题" : "多选题" }}
+      <span v-if="workData.testJson.length>1">（{{showIndex+1}}/{{workData.testJson.length}}）</span>
+
+    </div>
+    <div class="cq_checkListArea">
+      <div
+        class="cq_ca_type1"
+        v-if="
+          workData.testJson[showIndex] && workData.testJson[showIndex].showType == '1'
+        "
+      >
+        <div
+          class="cq_ca_t1_item"
+          :class="{
+            cq_ca_t1_item_active:
+            workData.testJson[showIndex].type == '1'
+                ? workData.testJson[showIndex].userAnswer === index
+                : workData.testJson[showIndex].userAnswer.includes(index)
+          }"
+          v-for="(item, index) in workData.testJson[showIndex].checkList"
+          :key="showIndex + '_' + index"
+        >
+          <div>
+            <span>{{ options[index] }}</span>
+          </div>
+          <img v-if="item.imgType && item.imgType=='1'" :src="item.src" @click="openPreview(item)">
+          <span v-else>{{ item }}</span>
+        </div>
+      </div>
+
+      <div class="cq_ca_type2" v-if="
+          workData.testJson[showIndex] && workData.testJson[showIndex].showType == '2'
+        ">
+        <div
+          class="cq_ca_t2_item"
+          :class="{
+            cq_ca_t2_item_active:
+            workData.testJson[showIndex].type == '1'
+                ? workData.testJson[showIndex].userAnswer === index
+                : workData.testJson[showIndex].userAnswer.includes(index)
+          }"
+          v-for="(item, index) in workData.testJson[showIndex].checkList"
+          :key="showIndex + '_' + index"
+        >
+          <div>
+            <span>{{ options[index] }}</span>
+          </div>
+          <img v-if="item.imgType && item.imgType=='1'" :src="item.src" @click="openPreview(item)">
+          <span v-else>{{ item }}</span>
+        </div>
+      </div>
+    </div>
+    </div>
   </Modal>
 
 
@@ -111,6 +176,36 @@ const visible = computed({
   set: (v: boolean) => emit('update:visible', v)
 })
 
+const showIndex = ref(0)
+
+const options = [
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z'
+]
 
 
 const renderedFormula = computed(() => {
@@ -179,7 +274,21 @@ const imageUrl = ref('')
 
 watch(() => props.visible, (newVal) => {
   if (props.work && newVal) {
+    showIndex.value = 0
     workData.value = JSON.parse(decodeURIComponent(props.work.content))
+    workData.value.testJson.forEach(i => {
+      const maxLength = i.checkList.reduce((pre, cur) => {
+        if (pre < cur.length) return cur.length
+        return pre
+      }, 0)
+
+      if (maxLength <= 6 && i.checkList.length <= 4) {
+        i.showType = '1'
+      }
+      else {
+        i.showType = '2'
+      }
+    })
   } 
 }, {
   immediate: true,
@@ -202,6 +311,17 @@ const closePreview = () => {
   previewVisible.value = false
 }
 
+const changeQuestion = (type) => {
+  if (type === 'prev') {
+    if (showIndex.value === 0) return
+    showIndex.value--
+  }
+  else {
+    if (showIndex.value === workData.value.testJson.length - 1) return
+    showIndex.value++
+  }
+}
+
 const zoomStep = 0.2
 const minScale = 0.2
 const maxScale = 6
@@ -270,7 +390,7 @@ const onDragEnd = () => {
 
 <style lang="scss" scoped>
 
-.wp_tool {
+/*.wp_tool {
   width: 100%;
   height: auto;
 	max-height: 80vh;
@@ -302,7 +422,6 @@ const onDragEnd = () => {
   height: auto;
   padding: 15px 15px 15px 15px;
   display: flex;
-  /* flex-wrap: wrap; */
   background-color: #f3f7fd;
   border-radius: 30px;
   margin: 10px 0 10px 0px;
@@ -413,5 +532,240 @@ const onDragEnd = () => {
 .s_b_m_ti_title > div {
   font-size: 30px;
   font-weight: bold;
+}*/
+
+.wp_tool45 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  /* justify-content: center; */
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 50px 10%;
+  overflow: auto;
+  position: relative;
+}
+
+.cq_title {
+  font-size: 35px;
+  font-weight: bold;
+  text-align: center;
+  width: 70%;
+  position: relative;
+}
+
+.cq_image{
+  width: auto;
+  height: 300px;
+  object-fit: cover;
+  margin: 20px 0;
+  cursor: pointer;
+}
+
+.cq_changeBtnArea {
+  position: absolute;
+  top: 0px;
+  right: -200px;
+  width: 200px;
+  height: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.cq_changeBtnArea > span{
+  width: 100px;
+  height: 40px;
+  background: #3681FC;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin-left: 20px;
+  transition: .2s;
+}
+
+.cq_changeBtnArea > span:hover{
+  background: #5893FF;
+}
+
+.cq_cba_disabled{
+  background: #D9D9D9 !important;
+  cursor: not-allowed !important;
+}
+
+.cq_type {
+  margin: 20px 0 40px 0;
+  font-size: 22px;
+  color: #808080;
+}
+
+.cq_checkListArea {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cq_ca_type1 {
+  width: auto;
+  height: auto;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 30px; /* 可根据需要调整间距 */
+  justify-content: center;
+  align-items: center;
+  margin: 40px 20px;
+}
+
+.cq_ca_t1_item {
+  width: 100%;
+  max-width: 400px;
+  min-width: 300px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: #fff;
+  box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  margin: auto;
+  cursor: pointer;
+  transition: 0.3s;
+  font-size: 20px;
+  color: #000;
+  user-select: none;
+  /* 不可选中 */
+  /* box-sizing: border-box;
+  padding: 20px 40px; */
+}
+
+.cq_ca_t1_item_active {
+  box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
+}
+
+.cq_ca_t1_item > div {
+  color: #fff;
+  position: relative;
+  margin-right: 20px;
+}
+
+.cq_ca_t1_item>img{
+  width: 80px;
+  height: 80px;
+  cursor: pointer;
+  object-fit: cover;
+}
+
+.cq_ca_t1_item > div > span {
+  position: relative;
+  z-index: 2;
+  color: #fff;
+  font-size: 20px;
+}
+
+.cq_ca_t1_item > div::after {
+  content: "";
+  width: 25px;
+  height: 25px;
+  background: rgba(252, 207, 0, 1);
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1; /* after在内容下方 */
+  pointer-events: none;
+}
+
+.cq_ca_type2{
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.cq_ca_t2_item{
+  width: 100%;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  padding-left: 40px;
+  padding-right: 20px;
+  margin-bottom: 20px;
+  background: #fff;
+  box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: 0.3s;
+  font-size: 20px;
+  color: #000;
+  user-select: none;
+  overflow: auto;
+  overflow-y: hidden;
+}
+
+.cq_ca_t2_item>div{
+  color: #fff;
+  position: relative;
+  margin-right: 20px;
+}
+
+.cq_ca_t2_item>span{
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.cq_ca_t2_item>img{
+  width: 70px;
+  height: 70px;
+  cursor: pointer;
+  object-fit: cover;
+}
+
+
+.cq_ca_t2_item_active {
+  box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
+}
+
+.cq_ca_t2_item > div {
+  color: #fff;
+  position: relative;
+  margin-right: 20px;
+}
+.cq_ca_t2_item > div > span {
+  position: relative;
+  z-index: 2;
+  color: #fff;
+  font-size: 20px;
+}
+
+.cq_ca_t2_item > div::after {
+  content: "";
+  width: 25px;
+  height: 25px;
+  background: rgba(252, 207, 0, 1);
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1; /* after在内容下方 */
+  pointer-events: none;
 }
 </style>

src/views/Student/components/QAWorkModal.vue

@@ -1,7 +1,7 @@
 <template>
   <Modal :visible="visible" :width="1024" :closeButton="true" @update:visible="val => emit('update:visible', val)">
-    <div class="wp_tool wp_tool15" v-if="workData">
-      <div class="wp_t15_title">{{ workData.answerQ }}</div>
+    <div class="questionsAndAnswers wp_tool15" v-if="workData">
+      <!-- <div class="wp_t15_title">{{ workData.answerQ }}</div>
       <span class="wp_type">问答题</span>
       <div class="wp_tl15_inputArea">
        <div class="wp_tl15_inputArea_content">
@@ -16,7 +16,18 @@
         >
           <img :src="item.url" alt="" @click.stop="openPreview(item)"/>
         </div>
-      </div>
+      </div> -->
+
+      <div class="qaa_title">{{ workData.answerQ }}</div>
+    <div class="qaa_type">问答题</div>
+    <div class="qaa_editArea">
+      <wangEnduit
+        ref="wangEnduitRef"
+        style="height: 100%;"
+        :disabled="true"
+        :value="workData.answer"
+      />
+    </div>
     </div>
   </Modal>
 
@@ -47,6 +58,7 @@
 
 <script lang="ts" setup>
 import { computed, watch, ref } from 'vue'
+import wangEnduit from "./wangEnduit.vue";
 import Modal from '@/components/Modal.vue'
 
 const props = defineProps<{
@@ -167,7 +179,7 @@ const onDragEnd = () => {
 
 
 <style scoped>
-.wp_tool {
+/*.wp_tool {
   width: 100%;
   height: auto;
   display: flex;
@@ -270,6 +282,103 @@ const onDragEnd = () => {
 	width: 100%;
 	height: 150px;
 	overflow: auto;
+}*/
+
+.questionsAndAnswers {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  /* justify-content: center; */
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 50px 10%;
+  overflow: auto;
+}
+
+.qaa_title {
+  font-size: 35px;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+}
+
+.qaa_type {
+  margin: 20px 0 40px 0;
+  font-size: 22px;
+  color: #808080;
+}
+
+.qaa_recording {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  border-radius: 12px;
+  border: solid 2px rgba(231, 231, 231, 1);
+  padding: 15px 25px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
+.qaa_r_left{
+  width: calc(100% - 200px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.qaa_r_left>svg,img{
+  width: 23px;
+  height: 23px;
+}
+
+
+.qaa_r_right{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qaa_r_r_btn{
+  width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.qaa_r_r_btn>img{
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.qaa_editArea {
+  width: 100%;
+  min-height: 300px;
+  height: calc(100% - 300px);
+  box-sizing: border-box;
+  border-radius: 12px;
+  border: solid 2px rgba(231, 231, 231, 1);
+  margin-top: 40px;
+}
+
+.voiceprint{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.voiceprint_icon{
+  margin-left: 200px;
 }
 
 </style>

src/views/Student/components/wangEnduit.vue

@@ -0,0 +1,364 @@
+<template lang="html">
+  <div class="editor cont">
+    <div ref="toolbar" class="toolbar">
+    </div>
+    <div ref="editor" class="text">
+    </div>
+    <slot></slot>
+    <div v-if="proVisible" class="mask">
+      <div class="progressBox">
+        <div class="lbox">
+          <img src="../../../../assets/loading.gif" />上传中，请稍后
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import E from 'wangeditor'
+import '../../../../aws-sdk.js'
+// import 'wangeditor/release/wangEditor.min.css'
+export default {
+  name: 'editoritem',
+  data() {
+    return {
+      // uploadPath,
+      editor: null,
+      info_: null,
+      proVisible: false,
+      progress: 0
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+    isClear: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '请输入正文'
+    },
+    showGetTextLoading: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  watch: {
+    isClear(val) {
+      // 触发清除文本域内容
+      if (val) {
+        this.editor.txt.clear()
+        this.info_ = null
+      }
+    },
+    value: function(value) {
+      if (value !== this.editor.txt.html()) {
+        this.editor.txt.html(this.value)
+      }
+    },
+    disabled: function(newVal) {
+      this.setDisabled(newVal)
+    }
+    // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  mounted() {
+    this.seteditor()
+    this.editor.txt.html(this.value)
+    this.setDisabled(this.disabled)
+  },
+  methods: {
+    seteditor() {
+      this.editor = new E(this.$refs.toolbar, this.$refs.editor)
+      // 关闭菜单栏fixed
+      this.editor.config.menuFixed = false
+      // 普通的自定义菜单
+      this.editor.config.menus = [
+        'head', // 标题
+        'bold', // 加粗
+        'fontSize', // 字体大小
+        // "fontName", //字体
+        // "italic", //斜体
+        // "underline", //下划线
+        // "strikeThrough", //删除线
+        'indent', // 缩进
+        // "lineHeight", //行高
+        // "foreColor",
+        // "backColor",
+        // "link",
+        // "list",
+        // "todo",
+        'justify',
+        // "quote",
+        // "emoticon",
+        'image',
+        // "video",
+        'table',
+        // "code",
+        // "splitLine",
+        'undo',
+        'redo',
+      ]
+      // 带格式粘贴
+      this.editor.config.pasteFilterStyle = false
+      // 忽略粘贴内容中的图片
+      this.editor.config.pasteIgnoreImg = false
+      this.editor.config.showLinkImg = false
+      this.editor.config.placeholder = this.placeholder
+      const that = this
+      this.editor.config.customUploadImg = function(files, insert) {
+        // const loading = Loading.service({
+        //   lock: true,
+        //   background: 'rgba(0, 0, 0, 0.7)'
+        // });
+        // 图片自定义上传方法
+        let kk = 0
+        for (let i = 0; i < files.length; i++) {
+          const file = files[i]
+          const credentials = {
+            accessKeyId: 'AKIATLPEDU37QV5CHLMH',
+            secretAccessKey: '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',
+          } // 秘钥形式的登录上传
+          window.AWS.config.update(credentials)
+          window.AWS.config.region = 'cn-northwest-1' // 设置区域
+
+          const bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' } }) // 选择桶
+          that.proVisible = true
+          if (file) {
+            const params = {
+              Key:
+                file.name.split('.')[0] +
+                new Date().getTime() +
+                '.' +
+                file.name.split('.')[file.name.split('.').length - 1],
+              ContentType: file.type,
+              Body: file,
+              'Access-Control-Allow-Credentials': '*',
+              ACL: 'public-read',
+            } // key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+            const options = {
+              partSize: 2048 * 1024 * 1024,
+              queueSize: 2,
+              leavePartsOnError: true,
+            }
+            bucket
+              .upload(params, options)
+              .on('httpUploadProgress', function(evt) {
+                // 这里可以写进度条
+                // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+              })
+              .send(function(err, data) {
+                kk++
+                if (kk == files.length - 1 || kk > files.length - 1) {
+                  that.proVisible = false
+                }
+                // loading.close();
+                if (err) {
+                  that.$message.error('上传失败')
+                }
+                else {
+                  // 上传成功处理
+                  insert(data.Location)
+                }
+              })
+          }
+        }
+      }
+      // 配置 自定义处理粘贴的文本内容
+      this.editor.config.pasteTextHandle = function(content) {
+        if (content == '' && !content) return ''
+        let str = content
+        str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
+        str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
+        str = str.replace(/<\/?[^>]*>/g, '')
+        str = str.replace(/[ | ]*\n/g, '\n')
+        str = str.replace(/&nbsp;/ig, '')
+        // console.log('****', content)
+        // console.log('****', str)
+        return str
+      }
+      this.editor.config.onchange = (html) => {
+        this.info_ = html // 绑定当前逐渐地值
+        this.$emit('change', this.info_) // 将内容同步到父组件中
+      }
+      // 创建富文本编辑器
+      this.editor.create()
+      // 初始化后，设定disabled状态
+      this.setDisabled(this.disabled)
+    },
+    // 新增的disabled控制方法
+    setDisabled(disabled) {
+      if (this.editor) {
+        if (disabled) {
+          this.editor.disable()
+        } else {
+          this.editor.enable()
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style lang="css" scoped>
+.editor {
+   width: 100%;
+   height: calc(100%);
+   margin: 0px auto;
+   position: relative;
+   z-index: 0;
+ }
+
+ .toolbar {
+   /* border: 1px solid #ccc; */
+   border-radius: 12px 12px 0 0;
+   border-bottom: solid 2px #E7E7E7;
+   background: none;
+ }
+
+ .toolbar :deep(.w-e-toolbar){
+  border-radius: 12px 12px 0 0;
+  background: none;
+ }
+
+ .text {
+   /* border: 1px solid #ccc; */
+   height: calc(100% - 42px);
+   overflow: auto;
+ }
+
+ .text :deep(.w-e-text-container){
+  background: none;
+  border-radius: 0 0 12px 12px;
+ }
+
+
+ /* table 样式 */
+ .cont>>>table {
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+}
+
+.cont>>>table td,
+.cont>>>table th {
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  /* padding: 20px 5px; */
+  padding: 5px 10px;
+  max-width: 0px;
+  height: 30px;
+  vertical-align: baseline;
+}
+
+.cont>>>table th {
+  border-bottom: 2px solid #ccc;
+  text-align: center;
+}
+
+ /* blockquote 样式 */
+ .cont>>>blockquote {
+   display: block;
+   border-left: 8px solid #d0e5f2;
+   padding: 5px 10px;
+   margin: 10px 0;
+   line-height: 1.4;
+   font-size: 100%;
+   background-color: #f1f1f1;
+ }
+
+ /* code 样式 */
+ .cont>>>code {
+   display: inline-block;
+   *display: inline;
+   *zoom: 1;
+   background-color: #f1f1f1;
+   border-radius: 3px;
+   padding: 3px 5px;
+   margin: 0 3px;
+ }
+
+ .cont>>>pre code {
+   display: block;
+ }
+
+ /* ul ol 样式 */
+ .cont>>>ul,
+ ol {
+   margin: 0 !important;
+ }
+
+ /* .cont>>>.w-e-droplist{
+  width: 80px !important;
+ } */
+
+ .mask {
+  background-color: rgb(0 0 0 / 30%);
+  /* position: fixed; */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mask2 {
+  position: fixed !important;
+  z-index: 999999;
+}
+
+.progressBox {
+  width: 300px;
+  height: 150px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+
+.progressBox>>>.el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+</style>