zc

src/views/safetyEducationExaminationNew/publicConfiguration/basicConfiguration/index.vue

@@ -18,7 +18,8 @@
       <specialtyConfiguration ref="specialtyConfiguration" class="right-max-big-box" v-if="buttonType == 2"></specialtyConfiguration>
       <gradingConfiguration ref="gradingConfiguration" class="right-max-big-box" v-if="buttonType == 3"></gradingConfiguration>
       <classHoursConfiguration ref="classHoursConfiguration" class="right-max-big-box" v-if="buttonType == 4"></classHoursConfiguration>
-      <otherConfiguration ref="otherConfiguration" class="right-max-big-box" v-if="buttonType == 5"></otherConfiguration>
+      <trainingConfiguration ref="trainingConfiguration" class="right-max-big-box" v-if="buttonType == 5"></trainingConfiguration>
+      <otherConfiguration ref="otherConfiguration" class="right-max-big-box" v-if="buttonType == 6"></otherConfiguration>
     </div>
   </div>
 </template>
@@ -28,6 +29,7 @@
   import specialtyConfiguration from "./specialtyConfiguration.vue";
   import gradingConfiguration from "./gradingConfiguration.vue";
   import classHoursConfiguration from "./classHoursConfiguration.vue";
+  import trainingConfiguration from "./trainingConfiguration.vue";
   import otherConfiguration from "./otherConfiguration.vue";
   export default {
     name: 'index',
@@ -36,6 +38,7 @@
       specialtyConfiguration,
       gradingConfiguration,
       classHoursConfiguration,
+      trainingConfiguration,
       otherConfiguration,
     },
     data () {
@@ -49,7 +52,8 @@
           {name:'专业类别配置',value:'2'},
           {name:'分级要求配置',value:'3'},
           {name:'学时积分配置',value:'4'},
-          {name:'其他配置',value:'5'},
+          {name:'培训分类配置',value:'5'},
+          {name:'其他配置',value:'6'},
         ],
         //管理权限
         sustainType:false,
@@ -82,6 +86,8 @@
         }else if(this.buttonType == 4){
           this.$refs.classHoursConfiguration.resetButton();
         }else if(this.buttonType == 5){
+          this.$refs.trainingConfiguration.resetButton();
+        }else if(this.buttonType == 6){
           this.$refs.otherConfiguration.resetButton();
         }
       },
@@ -96,6 +102,8 @@
         }else if(this.buttonType == 4){
           this.$refs.classHoursConfiguration.submitButton();
         }else if(this.buttonType == 5){
+          this.$refs.trainingConfiguration.submitButton();
+        }else if(this.buttonType == 6){
           this.$refs.otherConfiguration.submitButton();
         }
       },

src/views/safetyEducationExaminationNew/publicConfiguration/basicConfiguration/trainingConfiguration.vue

@@ -0,0 +1,226 @@
+<!-- 培训分类配置 -->
+<template>
+  <div class="page-container trainingConfiguration-addPage">
+    <div class="top-box">
+      <el-form class="add-form-box" :model="newData" ref="form" label-width="">
+        <el-form-item label="" prop="disciplineName">
+          <div style="display: flex">
+            <el-input v-model="newData.disciplineName" placeholder="输入培训分类名称" maxLength="20" style="width:500px;"></el-input>
+            <p class="form-button" @click="addButton()">+ 添加</p>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <p class="title-p">培训分类名称</p>
+    <div class="bottom-box scrollbar-box">
+      <div class="for-box" v-for="(item,index) in dataList" :key="index">
+        <div class="input-box" v-if="editorIndex === index">
+          <el-input v-model="item.disciplineName" placeholder="输入培训分类名称"
+                    maxLength="20" style="flex:1;margin:10px 0 10px 5px;"></el-input>
+          <p @click="confirmButton()">确定</p>
+        </div>
+        <div class="text-box" v-else>
+          <p>{{item.disciplineName}}</p>
+          <p @click="editorButton(index)">修改</p>
+          <p @click="delButton(index)">删除</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  //import { getDicts } from "@/api/commonality/noPermission";
+  //import { systemUserSelect } from "@/api/commonality/permission";
+  import { examElDisciplineTypeList,examElDisciplineTypeBatchSave } from "@/api/safetyEducationExaminationNew/index";
+  export default {
+    name: 'addPage',
+    props: {
+      propsData: {}
+    },
+    data() {
+      return {
+        newData:{
+          disciplineName:'',
+        },
+        dataList:[],
+        editorIndex:null,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initialize()
+    },
+    methods:{
+      initialize(){
+        examElDisciplineTypeList({}).then(response => {
+          this.$set(this,'dataList',response.data);
+        });
+      },
+      //修改按钮
+      editorButton(index){
+        this.$set(this,'editorIndex',index);
+      },
+      //确定
+      confirmButton(){
+        if(!this.dataList[this.editorIndex].disciplineName){
+          this.msgError('输入考试类型名称')
+          return
+        }
+        this.$set(this,'editorIndex',null);
+      },
+      delButton(index){
+        this.dataList.splice(index,1)
+      },
+      addButton(){
+        if(!this.newData.disciplineName){
+          this.msgError('输入考试类型名称')
+          return
+        }
+        this.dataList.push({
+          disciplineName:this.newData.disciplineName
+        })
+        this.$set(this.newData,'disciplineName','');
+      },
+      //重置
+      resetButton(){
+        let self = this;
+        this.$confirm('确认重置?', "提示", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+        }).then(() => {
+          this.initialize();
+        }).catch(() => {});
+      },
+      //提交
+      submitButton(){
+        let self = this;
+        if(this.editorIndex!=null){
+          this.msgError('请确认考试类型名称')
+          return
+        }
+        this.$confirm('确认提交?', "提示", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+        }).then(() => {
+          let list = [];
+          for(let i=0;i<self.dataList.length;i++){
+            let obj = {
+              id:self.dataList[i].id?self.dataList[i].id:'',
+              disciplineName:self.dataList[i].disciplineName,
+            }
+            list.push(obj);
+          }
+          examElDisciplineTypeBatchSave(list).then(response => {
+            self.msgSuccess(response.message);
+            self.initialize();
+          });
+        }).catch(() => {});
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .trainingConfiguration-addPage {
+    display: flex;
+    flex-direction: column;
+    flex:1;
+    overflow: hidden;
+    .top-box{
+      height:60px;
+      margin:20px 0 0 40px;
+      .form-button{
+        height:40px;
+        line-height:38px;
+        margin:0 0 0 10px;
+        padding:0 20px;
+        border-radius:4px;
+        background-color: #0183fa;
+        border:1px solid #0183fa;
+        color:#fff;
+        cursor: pointer;
+      }
+    }
+    .title-p{
+      width:600px;
+      line-height:60px;
+      //background-color: #dedede;
+      border-bottom:1px solid #dedede;
+      margin-left:40px;
+      padding-left:20px;
+      font-weight:600;
+    }
+    .bottom-box{
+      flex:1;
+      padding:0 20px 0 20px;
+      .for-box{
+        width:600px;
+        border-bottom:1px solid #dedede;
+        padding:0 20px 0 0;
+        margin-left:20px;
+        .text-box{
+          display: flex;
+          p{
+            font-size:14px;
+          }
+          p:nth-child(1){
+            flex:1;
+            line-height:60px;
+            font-weight:600;
+            margin-left:20px;
+          }
+          p:nth-child(2){
+            height:40px;
+            line-height:38px;
+            margin:10px 0 0 10px;
+            padding:0 20px;
+            border-radius:4px;
+            background-color: #0183fa;
+            border:1px solid #0183fa;
+            color:#fff;
+            cursor: pointer;
+          }
+          p:nth-child(3){
+            height:40px;
+            line-height:38px;
+            margin:10px 0 0 10px;
+            padding:0 20px;
+            border-radius:4px;
+            background-color: #fff;
+            border:1px solid #999;
+            color:#999;
+            cursor: pointer;
+          }
+        }
+        .input-box{
+          display: flex;
+          p{
+            font-size:14px;
+          }
+          p:nth-child(1){
+            flex:1;
+            line-height:60px;
+          }
+          p:nth-child(2){
+            height:40px;
+            line-height:38px;
+            margin:10px 0 0 10px;
+            padding:0 20px;
+            border-radius:4px;
+            background-color: #FF6666;
+            border:1px solid #FF6666;
+            color:#fff;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/safetyEducationExaminationNew/trainingManagement/index.vue

@@ -0,0 +1,510 @@
+<!-- 培训任务 -->
+<template>
+  <div class="app-container trainingTask">
+    <div class="page-container trainingTaskPage" v-if="pageType === 1">
+      <div class="page-form-title-box">
+        <el-form :model="queryParams" class="form-box" ref="queryForm"
+                 :inline="true" style="width:100%;"
+        >
+          <el-form-item label="" prop="queryParamsData1">
+            <el-input
+              maxLength="30"
+              v-model="queryParams.queryParamsData1"
+              placeholder="搜索培训名称、主讲人"
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="" prop="queryParamsData2">
+            <el-select v-model="queryParams.queryParamsData2" placeholder="状态" style="width: 200px">
+              <el-option
+                v-for="dict in optionListA"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="" prop="queryParamsData3">
+            <el-select v-model="queryParams.queryParamsData3" placeholder="分类" style="width: 200px">
+              <el-option
+                v-for="dict in optionListB"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="" prop="queryParamsData4">
+            <el-cascader
+              style="width: 180px"
+              v-model="queryParams.deptId"
+              :options="optionListC"
+              :props="{
+                    emitPath:false,
+                    checkStrictly: true,
+                    value: 'deptId',
+                    label: 'deptName',
+                    children: 'child',
+                  }"
+              :show-all-levels="false"
+              filterable
+              placeholder="学院单位"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item label="" prop="state">
+            <el-date-picker
+              :clearable="false"
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
+          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+          <p class="page-submit-common-style-button"
+             style="float: right;"
+             @click="tableButton(1)"
+             v-hasPermiRouter="['demo:demo:add']"
+          >新增</p>
+        </el-form>
+      </div>
+      <div class="page-content-box">
+        <el-table class="table-box" border :data="dataList">
+          <el-table-column label="培训名称" prop="name" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span @click="tableButton(2)">{{scope.row.name}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="分类" prop="content" width="200" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span style="color:#1857d4;">{{scope.row.name}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="培训时间" prop="createTime" width="200" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div>
+                <p>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</p>
+                <p>10:00 - 12:00</p>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="学时/积分" prop="content" width="200" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span style="color:#10a37f;font-weight:600;">学时{{scope.row.name}} +{{scope.row.name}}分</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="签到人数" prop="content" width="200" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div>
+                <p><span :class="scope.row.status==1?'color-a':(scope.row.status==2?'color-b':(scope.row.status==3?'color-c':''))">50</span>/<span>60</span></p>
+                <p><el-progress :percentage="100" :format="format"></el-progress></p>
+              </div>
+              <span>{{scope.row.name}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" prop="content" width="100" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <p :class="scope.row.status==1?'border-color-a':(scope.row.status==2?'border-color-b':(scope.row.status==3?'border-color-c':''))">{{scope.row.status==1?'进行中':(scope.row.status==2?'未开始':(scope.row.status==3?'已结束':''))}}</p>
+            </template>
+          </el-table-column>
+          <el-table-column label="发布" prop="state" width="100" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-switch
+                @click.native="tableButton(3,scope.row)"
+                class="switch captcha-img"
+                :active-value="true"
+                :inactive-value="false"
+                active-color="#0183FA"
+                inactive-color="#999"
+                v-model="scope.row.state"
+                active-text="启用"
+                inactive-text="停用"
+                disabled
+              ></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="240" show-overflow-tooltip v-if="tableButtonType">
+            <template slot-scope="scope">
+              <div class="table-button-box">
+                <p class="table-button-null"></p>
+                <p class="table-button-p"
+                   v-if="scope.row.status==3"
+                   @click="tableButton(4,scope.row)"
+                   v-hasPermiRouter="['demo:demo:detail']"
+                >查看记录</p>
+                <p class="table-button-p"
+                   v-if="scope.row.status!=3"
+                   @click="tableButton(5,scope.row)"
+                   v-hasPermiRouter="['demo:demo:detail']"
+                >签到码</p>
+                <p class="table-button-p"
+                   @click="tableButton(6,scope.row)"
+                   v-hasPermiRouter="['demo:demo:edit']"
+                >进度</p>
+                <p class="table-button-p"
+                   @click="tableButton(7,scope.row)"
+                   v-hasPermiRouter="['demo:demo:edit']"
+                >编辑</p>
+                <p class="table-button-p"
+                   @click="tableButton(8,scope.row)"
+                   v-hasPermiRouter="['demo:demo:del']"
+                >删除</p>
+                <p class="table-button-null"></p>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.page"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+      </div>
+    </div>
+    <!--<add-page :propsData="propsData" v-if="pageType === 2"></add-page>-->
+    <!--培训二维码-->
+    <el-dialog class="trainingTask-dialog" title="签到二维码"
+               append-to-body v-if="dialogType"
+               :visible.sync="dialogType"
+               :close-on-click-modal="false" :close-on-press-escape="false" width="344px">
+      <p class="title-p">{{codeData.title}}</p>
+      <p class="time-p">{{codeData.playTime}}</p>
+      <vue-qr  ref="vueQr" class="trainingTask-dialog-qr" :text="codeData.vueQrCodeData" :size="200"></vue-qr>
+      <canvas v-show="!dialogType" class="qrCodeDialog-vue-qr-canvas" id="myCanvas" ref="myCanvas" width="300" :height="240"></canvas>
+      <div class="text-box">
+        <p>学员扫描此二维码完成签到</p>
+        <p>有效期至 {{codeData.endTime}}</p>
+      </div>
+      <div slot="footer" class="dialog-footer dialog-footer-box">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-info" @click="buttonClick(2)">取消</p>
+        <p class="dialog-footer-button-primary" @click="buttonClick(1)">下载</p>
+        <p class="dialog-footer-button-null"></p>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import vueQr from 'vue-qr'
+  //import { getDicts } from "@/api/commonality/noPermission";
+  //import { systemUserSelect } from "@/api/commonality/permission";
+  //import { getInfo } from "@/api/basicsModules/index";
+  //import addPage from "./addPage.vue";
+  import {
+    systemDeptCurrentDept,
+  } from "@/api/safetyEducationExaminationNew/index";
+  export default {
+    name: 'index',
+    components: {
+      vueQr
+    },
+    data() {
+      return {
+        tableButtonType: this.hasPermiDom(['demo:demo:detail', 'demo:demo:edit', 'demo:demo:del']),
+        //页面状态
+        pageType: 1,
+        //下拉列表数据
+        optionListA: [{ value: '0', label: '未开始' }, { value: '1', label: '进行中' }, { value: '2', label: '已结束' }],
+        optionListB: [],
+        optionListC: [],
+        //查询条件
+        queryParams: {
+          page: 1,
+          pageSize: 20,
+          queryParamsData1: '',
+          queryParamsData2: null,
+          queryParamsData3: null,
+          queryParamsData4: null,
+        },
+        //时间数据
+        dateRange: [],
+        //列表数据
+        dataList: [],
+        //数据数量
+        total: 0,
+        //组件传参
+        propsData: {},
+        //二维码组件参数
+        dialogType:false,
+        identification: localStorage.getItem('codeOnlineAdd'),            //二维码规则 服务器域名,需与微信后台开发配置内一致.
+        codeData:{
+          codeName:'',
+          vueQrCodeData:null,
+          title:'',
+          playTime:'',
+          endTime:'',
+        }
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.systemDeptCurrentDept();
+      this.getList();
+    },
+    methods: {
+      //查询按钮
+      handleQuery() {
+        this.$set(this.queryParams, 'page', 1)
+        this.getList()
+      },
+      //重置按钮
+      resetQuery() {
+        this.$set(this, 'dateRange', [])
+        this.$set(this, 'queryParams', {
+          page: 1,
+          pageSize: 20,
+          queryParamsData1: '',
+          queryParamsData2: null,
+          queryParamsData3: null,
+          queryParamsData4: null,
+        })
+        this.getList()
+      },
+      //获取数据列表
+      getList() {
+        let obj = JSON.parse(JSON.stringify(this.queryParams))
+        if (this.dateRange[0]) {
+          obj.startTime = this.dateRange[0] + 'T00:00:00'
+          obj.endTime = this.dateRange[1] + 'T23:59:59'
+        } else {
+          obj.startTime = ''
+          obj.endTime = ''
+        }
+        // getListFunction(obj).then(response => {
+        //   this.$set(this, 'dataList', response.data.records)
+        //   this.$set(this, 'total', response.data.total)
+        // })
+
+        this.$set(this, 'dataList', [{createTime:'2026-10-10 10:10',status:1},{createTime:'2026-10-10 10:10',status:2},{createTime:'2026-10-10 10:10',status:3}])
+        this.$set(this, 'total', 1)
+      },
+      //操作按钮
+      tableButton(type, row) {
+        let self = this
+        if (type == 1) {
+          //新增
+          this.$set(this, 'pageType', 2)
+          this.$set(this, 'propsData', {})
+        } else if (type == 2) {
+          //详情
+          this.$set(this, 'pageType', 2)
+          let obj = JSON.parse(JSON.stringify(row))
+          obj.showType = true
+          this.$set(this, 'propsData', obj)
+        }else if (type == 3) {
+          //启用&停用
+          let text = row.state ? '停用' : '启用'
+          this.$confirm('是否确认' + text + '?', '警告', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(function() {
+          }).then(() => {
+            stateFunction({ id: row.id, state: !row.state }).then(response => {
+              self.msgSuccess(response.message)
+              self.getList()
+            })
+          }).catch(() => {
+          })
+        } else if (type == 4) {
+          //查看记录
+          this.$set(this, 'pageType', 2)
+          let obj = JSON.parse(JSON.stringify(row))
+          obj.showType = false
+          this.$set(this, 'propsData', obj)
+        } else if (type == 5) {
+          //签到码
+          this.$set(this,'codeData',{
+            codeName:'实验室生物安全操作规范培训',
+            vueQrCodeData:this.identification+'?code='+row.id+'&type=onlineTraining',
+            // vueQrCodeData:this.identification+'?code='+row.id+'&type=offlineTraining',
+            title:'实验室生物安全操作规范培训',
+            playTime:'2026-08-01 10:00–12:00',
+            endTime:'2026-08-01 12:30',
+          });
+          this.dialogQrCodeOn();
+        } else if (type == 6) {
+          //进度
+          this.$set(this, 'pageType', 2)
+          let obj = JSON.parse(JSON.stringify(row))
+          obj.showType = false
+          this.$set(this, 'propsData', obj)
+        } else if (type == 7) {
+          //编辑
+          this.$set(this, 'pageType', 2)
+          let obj = JSON.parse(JSON.stringify(row))
+          obj.showType = false
+          this.$set(this, 'propsData', obj)
+        } else if (type == 8) {
+          //删除
+          this.$confirm(
+            '删除后数据将无法恢复，相关签到记录和证书也将一并删除。',
+            '确认删除此培训？', {
+            confirmButtonText: '确认删除',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(function() {
+          }).then(() => {
+            deleteFunction({ id: row.id }).then(response => {
+              self.msgSuccess(response.message)
+              self.getList()
+            })
+          }).catch(() => {
+          })
+        } else if (type == 9) {
+          //返回并刷新
+          this.$set(this, 'pageType', 1)
+          this.getList()
+        }
+      },
+      //学院列表
+      systemDeptCurrentDept(){
+        systemDeptCurrentDept({}).then(response => {
+          const list = response.data || [];
+          this.formatTreeData(list);
+          this.$set(this,'optionListC',list);
+        });
+      },
+      //进度条
+      format(percentage) {
+        return percentage === 100 ? '' : '';
+      },
+      //展示二维码
+      dialogQrCodeOn(){
+        let self = this;
+        this.$nextTick(()=>{
+          this.$set(this,'dialogType',true);
+          this.$nextTick(function () {
+            // DOM 更新了
+            setTimeout(function(){
+              //获取二维码数据
+              let imgbase64 = self.$refs.vueQr.imgUrl;
+              let img = new Image();
+              img.src = imgbase64;
+              //获取canvas容器
+              let myCanvas = document.getElementById( "myCanvas" ).getContext( '2d' );
+              //清空画布-设置背景白色
+              myCanvas.fillStyle = "#FFFFFF";
+              myCanvas.clearRect(0, 0, 300, 240);
+              myCanvas.fillRect(0, 0, 300, 240);
+              //绘制二维码
+              myCanvas.drawImage( img, 50, 0 );
+              if(self.codeData.codeName){
+                //设置水印
+                myCanvas.font = "bold 14px 'Fira Sans'";
+                myCanvas.fillStyle = 'rgba(0,0,0,1)'; //水印颜色
+                //绘制水印
+                myCanvas.fillText(self.codeData.codeName, (300-(self.codeData.codeName.length*14))/2, 215); //左下
+              }
+            },100);
+          })
+        })
+      },
+      buttonClick(type){
+        if(type == 1){
+          let canvas = this.$refs.myCanvas
+          const base64Img = canvas.toDataURL('image/png')
+          var a = document.createElement('a') // 生成一个a元素
+          var event = new MouseEvent('click') // 创建一个单击事件
+          a.download = this.codeData.codeName // 设置图片名称
+          a.href = base64Img // 将生成的URL设置为a.href属性
+          a.dispatchEvent(event)
+        }else{
+          this.$set(this,'dialogType',false);
+        }
+      },
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .trainingTask {
+    .trainingTaskPage {
+      .table-box ::v-deep .cell{
+        height:auto;
+        line-height: 23px;
+      }
+      .color-a{
+        color:#1857d4;
+        font-weight:600;
+      }
+      .color-b{
+        color:#e67e22;
+        font-weight:600;
+      }
+      .color-c{
+        color:#10a37f;
+        font-weight:600;
+      }
+      .border-color-a{
+        display: inline-block;
+        line-height:23px;
+        padding:0 10px;
+        border-radius:10px;
+        background-color: #fef6ec;
+        color:#e67e22;
+      }
+      .border-color-b{
+        display: inline-block;
+        line-height:23px;
+        padding:0 10px;
+        border-radius:10px;
+        background-color: #f4f6fa;
+        color:#8896a7;
+      }
+      .border-color-c{
+        display: inline-block;
+        line-height:23px;
+        padding:0 10px;
+        border-radius:10px;
+        background-color: #f4f6fa;
+        color:#4a5568;
+      }
+    }
+  }
+</style>
+<style lang="scss">
+  .trainingTask-dialog {
+    .trainingTask-dialog-qr{
+      margin: 0 50px 20px;
+      border: 3px solid #dde3ed;
+      border-radius: 6px;
+    }
+    .title-p{
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 4px;
+      text-align: center;
+    }
+    .time-p{
+      font-size: 12px;
+      color: #8896a7;
+      margin-bottom: 16px;
+      text-align: center;
+    }
+    .text-box{
+      background: #f5f8ff;
+      border-radius: 8px;
+      padding: 10px;
+      font-size: 12px;
+      margin-bottom: 16px;
+      p:nth-child(1){
+        text-align: center;
+        color:#4a5568;
+      }
+      p:nth-child(2){
+        text-align: center;
+        color:#e67e22;
+        font-weight: 500;
+      }
+    }
+  }
+</style>