123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554 |
- <template>
- <div class="edit-page">
- <el-steps :active="stepsType" simple class="top-steps-box" >
- <el-step title="资源信息" icon="el-icon-edit" :status="stepsType==0?'finish ':'process'" @click.native="stepsClick(0,$event)" style="cursor:pointer;"></el-step>
- <el-step title="资源章节" icon="el-icon-folder-add" :status="stepsType==1?'finish ':'process'" @click.native="stepsClick(1,$event)" style="cursor:pointer;"></el-step>
- <el-step title="资源设置" icon="el-icon-setting" :status="stepsType==2?'finish ':'process'" @click.native="stepsClick(2,$event)" style="cursor:pointer;"></el-step>
- </el-steps>
- <!--课程信息-->
- <div class="center-content-max-box info-max-box" v-if="stepsType === 0">
- <el-form :model="infoForm" ref="infoForm" :rules="infoRules" label-width="80px">
- <el-form-item label="课程名称" prop="title">
- <el-input
- style="width:400px;"
- v-model="infoForm.title"
- maxLength="25"
- placeholder="请输入课程名称"
- clearable
- size="small"
- />
- {{infoForm.title.length}}/25
- </el-form-item>
- <el-form-item label="课程分类" prop="cateName">
- <div style="display: flex">
- <el-input
- style="width:400px;"
- v-model="infoForm.cateName"
- disabled
- maxLength="25"
- placeholder="请选择课程分类"
- clearable
- size="small"
- />
- <p class="add-button-one-90"
- style="margin-left:20px;"
- @click="openClassTreeClick"
- >选择分类</p>
- </div>
- </el-form-item>
- <!-- <el-form-item label="课程分类" prop="cateName">
- <el-select v-model="infoForm.cateName" placeholder="请选择">
- <el-option
- v-for="item in courseTypeList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </el-form-item>-->
- <el-form-item label="适用类型" prop="checkList">
- <el-checkbox-group v-model="infoForm.checkList">
- <el-checkbox
- v-for="item in scopeTypeList"
- :label="item.id"
- :key="item.id">{{item.value}}</el-checkbox>
- </el-checkbox-group>
- </el-form-item>
- <el-form-item label="适用学院" prop="deptId">
- <el-select v-model="infoForm.deptId" placeholder="请选择适用学院" style="width:400px;">
- <el-option
- v-for="item in deptOptions"
- :key="item.deptId"
- :label="item.deptName"
- :value="item.deptId"
- >
- </el-option>
- </el-select>
- </el-form-item>
- <!--<el-form-item label="上传封面" prop="certUrl">-->
- <!--<el-upload-->
- <!--class="certificate-avatar-uploader"-->
- <!--:action="uploadImgUrl"-->
- <!--:show-file-list="false"-->
- <!--accept="image/jpeg,image/gif,image/png"-->
- <!--:on-success="handleAvatarSuccess"-->
- <!--:headers="headers"-->
- <!--:before-upload="beforeAvatarUpload">-->
- <!--<img v-if="infoForm.certUrl" :src="infoForm.certUrl" class="avatar" style="height:80px;width:80px;">-->
- <!--<i v-if="!infoForm.certUrl" class="el-icon-plus avatar-uploader-icon"></i>-->
- <!--</el-upload>-->
- <!--</el-form-item>-->
- <!--<el-form-item label="资料介绍" prop="content" style="width:1000px;height:400px;">-->
- <!--<editor style="height:400px;" v-model="infoForm.content" :min-height="192"/>-->
- <!--</el-form-item>-->
- </el-form>
- </div>
- <!--课程章节-->
- <div class="center-content-max-box chapter-max-box" v-if="stepsType === 1">
- <div class="left-new-chapter-box">
- <p class="title-p">新建章节</p>
- <p class="add-chapter-p add-button-one-120" @click="add_el_chapterClick">新增章节</p>
- <div class="chapter-list-for-max-box scrollbar-box">
- <div class="chapter-list-for-big-box" v-for="(item,index) in chapterList" :key="index" :index="item.id">
- <div class="chapter-list-for-box" :class="{'checkChapter':item.id == chapterIndex}" @click.stop="checkChapterClick(item)">
- <p v-if="item.showType" @click.stop="chapterTreeClick(item,false)"><i class="el-icon-remove-outline"></i></p>
- <p v-if="!item.showType" @click.stop="chapterTreeClick(item,true)"><i class="el-icon-circle-plus-outline"></i></p>
- <p>{{item.title}}</p>
- <p @click.stop="del_el_chapter(item)"><i class="el-icon-circle-close"></i></p>
- </div>
- <div class="chapter-list-min-for-box" :class="{'checkChapter':minItem.id == chapterIndex}"
- @click.stop="checkChapterClick(minItem)"
- v-if="item.showType"
- v-for="(minItem,index2) in item.children" :key="index2" :index="minItem.id">
- <p>{{minItem.title}}</p>
- <p @click.stop="del_el_chapter(minItem)"><i class="el-icon-circle-close"></i></p>
- </div>
- </div>
- </div>
- </div>
- <div class="center-content-box scrollbar-box">
- <p class="title-p">编辑框</p>
- <p class="null-add-p" v-if="!chapterData.id">请先在左侧动作条选择或创建章节</p>
- <div class="center-content-box-one" v-if="!exerciseAddType">
- <el-form :model="chapterData" ref="chapterForm" :rules="chapterRules" v-if="chapterData.id">
- <div style="display: flex">
- <el-form-item label="标题" prop="title" style="margin:20px 0;" label-width="100px">
- <el-input
- style="width:190px;margin-right:20px;"
- v-model="chapterData.title"
- maxLength="20"
- minlength="1"
- placeholder="请输入标题"
- clearable
- size="small"
- />
- </el-form-item>
- <el-form-item label="时间" prop="timeValue" style="margin:20px 0;display: flex" v-if="chapterData.chapterData">
- <el-time-picker
- @change="timeChange"
- v-model="chapterData.timeValue"
- format = 'HH:mm:ss'
- value-format = 'HH:mm:ss'
- placeholder="请选择时间">
- </el-time-picker>
- </el-form-item>
- <el-form-item label="课后考核" prop="exerciseValue1" style="margin:20px 0;" label-width="100px" v-if="chapterData.chapterData">
- <el-switch
- v-model="chapterData.isAssess"
- :active-value="1"
- :inactive-value="0">
- </el-switch>
- </el-form-item>
- <p style="flex:1;"></p>
- <el-button type="primary" style="margin:20px 20px 0 20px;" @click="edit_el_chapterClick">保存</el-button>
- </div>
- <div class="exercise-title-max-box" v-if="chapterData.isAssess == 1">
- <el-form-item label="考核名称" prop="assessName" label-width="100px">
- <el-input
- style="width:300px;"
- v-model="chapterData.assessName"
- maxLength="20"
- minlength="1"
- placeholder="请输入考核名称"
- clearable
- size="small"
- />
- </el-form-item>
- <div class="exercise-add-max-box">
- <p class="exercise-add-button inquire-button-one" @click="exerciseAddClickOn">设置考核题目</p>
- <div class="exercise-add-text-box">
- <div>题目总数:{{totalNum}}</div>
- <div>单选题数:{{oneNum}}</div>
- <div>多选题数:{{manyNum}}</div>
- <div>判断题数:{{judgeNum}}</div>
- </div>
- </div>
- </div>
- <!--<el-form-item label="简介" prop="description" v-if="!chapterData.chapterData">-->
- <!--<el-input-->
- <!--style="width:790px;"-->
- <!--:rows="6"-->
- <!--v-model="chapterData.description"-->
- <!--maxLength="150"-->
- <!--placeholder="请输入简介"-->
- <!--clearable-->
- <!--type="textarea"-->
- <!--resize="none"-->
- <!--size="small"-->
- <!--/>-->
- <!--</el-form-item>-->
- </el-form>
- <div class="center-info-components-max-box scrollbar-box" v-loading="loading">
- <!--图片-->
- <img
- style="display: block;margin:0 auto;max-width:900px;"
- v-if="chapterData.postfix == 'png' || chapterData.postfix == 'jpeg' || chapterData.postfix == 'gif'"
- :src="chapterData.chapterData">
- <!--视频-->
- <!--<video-player-->
- <!--class="video-player vjs-custom-skin"-->
- <!--v-if="chapterData.postfix == 'mp4' || chapterData.postfix == 'webm'"-->
- <!--@pause="demo($event)"-->
- <!--:playsinline="true"-->
- <!--:options="playerOptions">-->
- <!--</video-player>-->
- <!--poster="@/assets/ZDimages/video_logo.jpg"-->
- <video class="video-player vjs-custom-skin"
- style="width:810px;height:512px;"
- autoplay="autoplay"
- :poster="videoCover"
- v-if="chapterData.chapterData && chapterData.postfix == 'mp4'">
- <source :src="chapterData.chapterData" type="video/mp4">
- </video>
- <!--word-->
- <iframe
- class="iframe"
- v-if="chapterData.postfix == 'pdf' || chapterData.postfix == 'doc' || chapterData.postfix == 'docx' || chapterData.postfix == 'ppt' || chapterData.postfix == 'pptx'"
- :src="chapterData.iframeSrc" scrolling="auto" frameborder="0">
- </iframe>
- <!--富文本-->
- <div v-if="chapterData.type == 5" v-html="chapterData.chapterData"></div>
- </div>
- </div>
- <!--课后练习-->
- <div class="center-content-box-two" v-if="exerciseAddType">
- <el-form class="center-content-box-two-top" style="margin-bottom:10px;" :model="exerciseQueryParams" ref="exerciseQueryParams" :inline="true" label-width="80px">
- <el-form-item label="题目名称" prop="content">
- <el-input
- style="width:140px;"
- v-model="exerciseQueryParams.content"
- placeholder="请输入题目名称"
- />
- </el-form-item>
- <el-form-item label="题目类型" prop="quType">
- <el-select
- style="width:150px;"
- v-model="exerciseQueryParams.quType"
- placeholder="请选择题目类型">
- <el-option
- v-for="dict in quTypes"
- :key="dict.type"
- :label="dict.value"
- :value="dict.type">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="题目分类" prop="cIds">
- <el-select
- style="width:150px;"
- v-model="exerciseQueryParams.cIds"
- placeholder="请选择题目分类">
- <el-option
- v-for="dict in optionList"
- :key="dict.id"
- :label="dict.title"
- :value="dict.id">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <p class="inquire-button-one" @click="exerciseHandleQuery" style="margin:0 10px;">查询</p>
- <p class="reset-button-one" @click="exerciseResetQuery">重置</p>
- </el-form-item>
- </el-form>
- <div class="center-content-box-two-bottom">
- <div class="center-content-box-two-bottom-left">
- <el-table v-loading="loading" border :data="exerciseList" empty-text="请在右侧添加题目">
- <el-table-column label="题目名称" align="left" prop="content" :show-overflow-tooltip="true"/>
- <el-table-column width="40">
- <template slot-scope="scope">
- <i class="el-icon-circle-close del-i" @click="delExerciseListClick(scope.row)"></i>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <div class="center-content-box-two-bottom-right">
- <div class="center-content-box-two-bottom-right-table ">
- <el-table v-loading="loading" border :data="el_courseList">
- <el-table-column label="题目名称" align="left" prop="content" :show-overflow-tooltip="true"/>
- <el-table-column label="题目类型" align="left" prop="title" width="120" :show-overflow-tooltip="true">
- <template slot-scope="scope">
- <span
- v-for="(item, index) in quTypes"
- :key="index"
- v-if="scope.row.quType == item.type"
- >{{ item.value }}</span>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="left" width="100">
- <template slot-scope="scope">
- <p class="table-min-button"
- style="width:80px;height:24px;line-height:24px;"
- @click="exerciseAdd(scope.row)">添加</p>
- </template>
- </el-table-column>
- </el-table>
- <pagination :page-sizes="[20, 30, 40, 50]"
- v-show="el_courseTotal>0"
- :total="el_courseTotal"
- :pager-count="5"
- layout="total, pager, jumper"
- :page.sync="exerciseQueryParams.pageNum"
- :limit.sync="exerciseQueryParams.pageSize"
- @pagination="getExerciseList"
- />
- </div>
- </div>
- </div>
- <div class="center-content-box-two-bottom-button">
- <p></p>
- <p class="reset-button-one" @click="exerciseAddClickOff">取消</p>
- <p class="inquire-button-one" @click="exerciseAddClickSave">确定</p>
- </div>
- </div>
- </div>
- <div class="right-courseware-box">
- <p class="title-p">资源管理</p>
- <div class="el-resources-tree scrollbar-box">
- <el-select v-model="selectTree" placeholder="请选择分类" style="width: 100%;margin-top: 20px;">
- <el-option :value="selectTreeValue" style="height: auto;">
- <el-tree
- :data="treeData"
- :props="defaultProps"
- :highlight-current="true"
- :expand-on-click-node="false"
- :filter-node-method="filterNode"
- ref="resourcesTree"
- default-expand-all
- @node-click="handleNodeClick"
- />
- </el-option>
- </el-select>
- <el-input class="el-resources-search" placeholder="请输入资源名称" v-model="resourceName" clearable style="margin-top: 14px;">
- <i slot="append" class="el-icon-search" style="font-size: 22px;" @click="queryResources"></i>
- </el-input>
- <!-- <el-tree
- :data="treeData"
- :props="defaultProps"
- :highlight-current="true"
- :expand-on-click-node="false"
- :filter-node-method="filterNode"
- ref="resourcesTree"
- default-expand-all
- @node-click="handleNodeClick"
- />-->
- </div>
- <div class="el-resources-list ">
- <el-table :data="el_resourcesList" border :show-header="false">
- <el-table-column label="课件名称" align="left" prop="title" width="240" :show-overflow-tooltip="true"/>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80">
- <template slot-scope="scope">
- <p style="cursor:pointer;color:#1c84c6!important;" @click="addMinChildren(scope.row)">添加</p>
- </template>
- </el-table-column>
- </el-table>
- <pagination :page-sizes="[20, 30, 40, 50]"
- style="height:50px;margin-left:10px;"
- v-show="total>0"
- :total="total"
- layout="total, prev, next"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getResources"
- />
- </div>
- </div>
- </div>
- <!--课程设置-->
- <div class="center-content-max-box set-up-max-box" v-if="stepsType === 2">
- <el-form :model="setUpForm" ref="setUpForm" :rules="setUpRules" label-width="180px">
- <!--<el-form-item label="课程学习时长(分钟)" prop="duration" style="margin-top:20px;">-->
- <!--<el-input-number-->
- <!--style="width:220px;"-->
- <!--v-model="setUpForm.duration"-->
- <!--:min="1" :max="1000"-->
- <!--label="请输入课程学习时长">-->
- <!--</el-input-number>-->
- <!--</el-form-item>-->
- <!--<el-form-item label="积分值" prop="points" style="margin-top:20px;">-->
- <!--<el-input-number-->
- <!--style="width:220px;"-->
- <!--v-model="setUpForm.points"-->
- <!--:min="0" :max="1000"-->
- <!--label="请输入积分值">-->
- <!--</el-input-number>-->
- <!--</el-form-item>-->
- <!--<el-form-item label="学习机积分值" prop="machinePoints" style="margin-top:20px;">-->
- <!--<el-input-number-->
- <!--style="width:220px;"-->
- <!--v-model="setUpForm.machinePoints"-->
- <!--:min="0" :max="1000"-->
- <!--label="请输入学习机积分值">-->
- <!--</el-input-number>-->
- <!--</el-form-item>-->
- <el-form-item label="有效时间类型" prop="ceType" style="margin-top:20px;">
- <el-radio v-model="setUpForm.ceType" :label="0" style="margin-right:20px;">永久</el-radio>
- <el-radio v-model="setUpForm.ceType" :label="1">有限</el-radio>
- </el-form-item>
- <el-form-item label="过期日期" prop="ceTime" v-if="setUpForm.ceType == 1" style="margin-top:20px;">
- <el-date-picker
- v-model="setUpForm.ceTime"
- type="date"
- value-format="yyyy-MM-dd"
- placeholder="请选择过期日期">
- </el-date-picker>
- </el-form-item>
- <el-form-item label="课程上架状态" prop="status" style="margin-top:20px;">
- <el-switch
- v-model="setUpForm.status"
- active-color="#00b7ee"
- inactive-color="#dedede"
- :active-value="1"
- :inactive-value="0">
- </el-switch>
- </el-form-item>
- <el-form-item label="显示课程拖拽进度" prop="videoDraggable" style="margin-top:20px;">
- <el-switch
- v-model="setUpForm.videoDraggable"
- active-color="#00b7ee"
- inactive-color="#dedede"
- :active-value="1"
- :inactive-value="0">
- </el-switch>
- </el-form-item>
- </el-form>
- </div>
- <div class="bottom-button-box">
- <el-button @click="offPage">取 消</el-button>
- <el-button type="primary" style="width:200px;" @click="stepsClick">{{stepsType==0?'保存并进入下一步':(stepsType==1?'下一步':stepsType==2?'完成':'')}}</el-button>
- </div>
- <!--选择分类-->
- <el-dialog title="选择分类" :visible.sync="openClassTree" width="700px" append-to-body>
- <div style="height:500px;" class="scrollbar-box">
- <el-tree
- v-if="openClassTree"
- :data="classTree"
- show-checkbox
- default-expand-all
- node-key="id"
- :check-strictly="true"
- ref="ditTree"
- highlight-current
- @node-click="editCheck"
- @check="editCheck"
- :props="defaultProps">
- </el-tree>
- </div>
- <div slot="footer" class="dialog-footer">
- <el-button @click="openClassTreeClickOff">取 消</el-button>
- <el-button type="primary" @click="openClassSubmit">确 定</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import { listQu } from "@/api/exam/qu";
- import { list_option } from "@/api/exam/el_classify";
- import { listDepartments } from "@/api/system/dept";
- import { listEl_resources } from "@/api/exam/el_resources";
- import { getEl_course,addEl_course, updateEl_course,add_el_chapter,edit_el_chapter,del_el_chapter,queryChapterQu } from "@/api/exam/el_course";
- import { listEl_category} from "@/api/exam/el_category";
- import { getToken } from "@/utils/auth";
- import { videoPlayer } from 'vue-video-player'
- import 'video.js/dist/video-js.css'
- export default {
- name: "edit",
- props:{
- infoId:{},
- },
- components:{
- videoPlayer
- },
- data() {
- return {
- videoCover:window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + localStorage.getItem('videoCover'),
- selectTree: '',
- selectTreeValue: [],
- /******************基本信息-开始******************/
- //上传封面设置
- uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
- headers: {
- Authorization: "Bearer " + getToken(),
- },
- //步骤条状态
- stepsType:0,
- //课程信息
- infoForm:{
- title:"",
- // content:"",
- cateName:"",
- // certUrl:"",
- checkList:[],
- deptId:"",
- },
- courseTypeList:[
- {id:'0',name:'基础课程'},
- {id:'1',name:'视频课程'},
- {id:'2',name:'VR课程'},
- {id:'3',name:'趣味学习'},
- ],
- resourceName:'',//资源名称
- //课程信息校验
- infoRules: {
- title: [
- { required: true, message: "请输入课程名称", trigger: "blur" },
- { required: true, message: "请输入课程名称", validator: this.spaceJudgment, trigger: "blur" }
- ],
- cateName: [
- { required: true, message: "请选择课程分类", trigger: "blur" },
- ],
- checkList: [
- { required: true, message: "请选择适用类型", trigger: "blur" },
- ],
- deptId: [
- { required: true, message: "请选择适用学院", trigger: "blur" },
- ],
- // certUrl: [
- // { required: true, message: "请上传封面", trigger: "blur" },
- // ],
- // content: [
- // { required: true, message: "请输入资料介绍", trigger: "blur" },
- // ],
- },
- //分类页面
- openClassTree:false,
- //分类树数据
- classTree:[],
- defaultProps: {
- children: "children",
- label: "title"
- },
- //分类选择临时数据
- openClassTreeType:{},
- //学院
- deptOptions:[],
- //适用类型
- scopeTypeList:[
- {id:"1",value:'安全准入考试'},
- {id:"2",value:'负面清单考试'},
- {id:"3",value:'黑名单考试'}
- ],
- /******************基本信息-结束******************/
- /******************章节信息-开始******************/
- // 章节数组
- chapterList:[],
- chapterIndex:0,
- chapterData:{},
- //课程信息校验
- chapterRules: {
- title: [
- { required: true, message: "请输入标题", trigger: "blur" },
- ],
- assessName: [
- { required: true, message: "请输入考核名称", trigger: "blur" },
- ],
- },
- //课件列表
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize:20,
- },
- //树列表
- treeData:[],
- //课件列表
- el_resourcesList:[],
- total:0,
- //加载动画
- loading:false,
- //pdf页数
- pdfNumPages:null,
- pageNum: 1,
- pageTotalNum: 1, //# 总页数
- loadedRatio: 0, //# 当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了
- //视频设置
- playerOptions: {
- playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
- autoplay: false, // 如果为true,浏览器准备好时开始回放。
- muted: false, // 默认情况下将会消除任何音频。
- loop: false, // 是否视频一结束就重新开始。
- preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
- language: 'zh-CN',
- aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
- fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
- sources: [],
- poster: '', // 封面地址
- notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
- controlBar: {
- timeDivider: true, // 当前时间和持续时间的分隔符
- durationDisplay: true, // 显示持续时间
- remainingTimeDisplay: false, // 是否显示剩余时间功能
- fullscreenToggle: true // 是否显示全屏按钮
- }
- },
- //课后题添加
- exerciseAddType:false,
- //题目类型
- quTypes: [
- {
- type: 1,
- value: "单选题",
- },
- {
- type: 2,
- value: "多选题",
- },
- {
- type: 3,
- value: "判断题",
- },
- ],
- //题目分类
- optionList:[],
- //题目搜索项
- exerciseQueryParams:{
- pageNum: 1,
- pageSize:20,
- content:null,
- quType:null,
- cIds:null,
- },
- //题目数量
- el_courseTotal:0,
- //题目列表
- el_courseList:[],
- //选中题目数据
- exerciseList:[],
- //总题数
- totalNum:0,
- //单选数
- oneNum:0,
- //多选数
- manyNum:0,
- //判断数
- judgeNum:0,
- /******************章节信息-结束******************/
- /******************设置信息-开始******************/
- setUpForm:{},
- durationNum:{},
- setUpRules:{
- duration: [
- { required: true, message: "请输入课程学习时长", trigger: "blur" },
- ],
- // points: [
- // { required: true, message: "请输入积分值", trigger: "blur" },
- // ],
- // machinePoints: [
- // { required: true, message: "请输入学习机积分值", trigger: "blur" },
- // ],
- ceType: [
- { required: true, message: "请选择有效时间类型", trigger: "blur" },
- ],
- ceTime: [
- { required: true, message: "请选择过期日期", trigger: "blur" },
- ],
- }
- /******************设置信息-结束******************/
- }
- },
- created() {
- console.log(this.infoId);
- if(this.infoId.id){
- this.getInfoData();
- }
- },
- mounted(){
- this.getTreeData();
- this.getResourceTreeData();
- this.getResources();
- this.getDeptList();
- this.getList_option();
- this.getExerciseList();
- },
- methods:{
- /******************基本信息-开始******************/
- /* 查询学院列表 */
- getDeptList(){
- listDepartments().then(response => {
- // this.deptOptions = response.data;
- this.$set(this, 'deptOptions', response.data)
- });
- },
- //步骤条下一步按钮
- stepsClick(type,e){
- if (type == 0||type == 1||type == 2){
- if(this.infoId.id && this.stepsType != type){
- if(type == 1){
- this.queryParams.cateId = "";
- this.queryParams.pageNum = 1;
- this.queryParams.pageSize = 20;
- this.getResources();
- }
- this.getInfoData();
- this.stepsType = type;
- }
- }else if(this.stepsType == 0){
- if(this.stepsType == 0){
- this.addElCourseClick();
- }
- }else if(this.stepsType == 1){
- // this.edit_el_chapterClick();
- this.stepsType++
- }else if(this.stepsType == 2){
- this.edutSetUpClick();
- }
- //关闭课后题目选择页面
- this.exerciseAddClickOff();
- },
- //选择分类页面开启
- openClassTreeClick(){
- let self = this;
- this.openClassTree = true;
- if(this.infoForm.cateId){
- setTimeout(function(){
- self.$refs.ditTree.setCheckedKeys([self.infoForm.cateId]);
- },100);
- }
- },
- openClassTreeClickOff(){
- this.openClassTree = false;
- this.openClassTreeType = {};
- },
- //上传
- handleAvatarSuccess(res, file) {
- this.infoForm.certUrl = res.data.url;
- this.$forceUpdate()
- },
- beforeAvatarUpload(file) {
- let type = false;
- console.log('file',file);
- if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
- type = true;
- }else{
- this.$message.error('只能上传png/jpeg/gif格式图片');
- type = false;
- }
- return type;
- },
- /** 查询课程分类树 */
- getTreeData() {
- listEl_category({},2).then( response => {
- this.classTree = JSON.parse(JSON.stringify(response.data));
- });
- },
- /** 查询资源分类树 */
- getResourceTreeData(){
- listEl_category({},1).then( response => {
- //this.classTree = JSON.parse(JSON.stringify(response.data));
- let list = [];
- let obj = {
- children:[],
- title:"所有分类",
- id:"",
- };
- list.push(obj);
- for(let i=0;i<response.data.length;i++){
- list.push(response.data[i]);
- }
- this.treeData = list;
- });
- },
- //分类树点击事件
- editCheck(event) {
- this.$refs.ditTree.setCheckedKeys([event.id]);
- this.openClassTreeType.cateName = event.title;
- this.openClassTreeType.cateId= event.id;
- },
- //选择分类确定
- openClassSubmit(){
- let obj = JSON.parse(JSON.stringify(this.openClassTreeType));
- this.infoForm.cateId = obj.cateId;
- this.infoForm.cateName = obj.cateName;
- this.openClassTree = !this.openClassTree;
- },
- //退出上一页
- offPage(){
- this.$parent.goPageEdit(4);
- },
- //获取课程数据
- getInfoData(){
- let self = this;
- getEl_course(this.infoId.id).then( response => {
- //基础信息
- this.$set(this.infoForm,'title',response.data.title);
- this.$set(this.infoForm,'cateName',response.data.cateTitle);
- this.$set(this.infoForm,'cateId',response.data.cateId);
- // this.$set(this.infoForm,'certUrl',response.data.img);
- // this.$set(this.infoForm,'content',unescape(response.data.description));
- if(response.data.scopeType){
- let scopeList = response.data.scopeType.split(',')
- this.$set(this.infoForm,'checkList',scopeList);
- }
- this.$set(this.infoForm,'deptId',parseInt(response.data.deptIds));
- //章节信息
- for(let i=0;i<response.data.chapterList.length;i++){
- response.data.chapterList[i].showType = true;
- }
- this.$set(this,'chapterList',response.data.chapterList);
- if(response.data.chapterList[0]){
- this.chapterIndex = response.data.chapterList[0].id;
- this.chapterData = JSON.parse(JSON.stringify(response.data.chapterList[0]))
- }else{
- this.chapterIndex = "";
- this.chapterData = {};
- }
- //设置信息
- this.$set(this.setUpForm,'duration',response.data.duration);
- // this.$set(this.setUpForm,'points',response.data.points);
- // this.$set(this.setUpForm,'machinePoints',response.data.machinePoints);
- this.$set(this.setUpForm,'ceType',response.data.ceType);
- this.$set(this.setUpForm,'ceTime',response.data.ceTime);
- this.$set(this.setUpForm,'status',response.data.status);
- this.$set(this.setUpForm,'videoDraggable',response.data.videoDraggable);
- });
- },
- //获取课程信息不从新定义index
- getInfoDataTow(){
- getEl_course(this.infoId.id).then( response => {
- console.log("课程数据",response)
- this.$set(this.infoForm,'title',response.data.title);
- this.$set(this.infoForm,'cateName',response.data.cateTitle);
- this.$set(this.infoForm,'cateId',response.data.cateId);
- // this.$set(this.infoForm,'certUrl',response.data.img);
- // this.$set(this.infoForm,'content',unescape(response.data.description));
- if(response.data.scopeType){
- let scopeList = response.data.scopeType.split(',')
- this.$set(this.infoForm,'checkList',scopeList);
- }
- this.$set(this.infoForm,'dictType',response.data.dictType);
- for(let i=0;i<response.data.chapterList.length;i++){
- response.data.chapterList[i].showType = true;
- }
- this.$set(this,'chapterList',response.data.chapterList);
- });
- },
- //信息保存
- addElCourseClick(){
- let self = this;
- this.$refs["infoForm"].validate(valid => {
- if (valid) {
- if(this.infoId.id){
- let obj = {
- id:this.infoId.id,
- title:this.infoForm.title,
- cateId:this.infoForm.cateId,
- // img:this.infoForm.certUrl,
- // description:escape(this.infoForm.content),
- deptIds:this.infoForm.deptId,
- };
- let scopeText = this.infoForm.checkList+'';
- obj.scopeType = scopeText;
- // let scopeType = [];
- // for(let i=0;i<self.infoForm.checkList.length;i++){
- // if(self.infoForm.checkList[i] == ''){
- //
- // }
- // }
- updateEl_course(obj).then( response => {
- this.msgSuccess("修改成功");
- this.stepsType++;
- });
- }else{
- let obj = {
- title:this.infoForm.title,
- cateId:this.infoForm.cateId,
- // img:this.infoForm.certUrl,
- // description:escape(this.infoForm.content),
- deptIds:this.infoForm.deptId,
- };
- let scopeText = this.infoForm.checkList+'';
- obj.scopeType = scopeText;
- addEl_course(obj).then( response => {
- this.infoId.id = response.data.id;
- this.getInfoData();
- this.msgSuccess("新增成功");
- this.stepsType++;
- });
- }
- }
- });
- },
- /******************基本信息-结束******************/
- /******************章节信息-开始******************/
- //搜索查询课件
- queryResources() {
- this.queryParams.title=this.resourceName;
- listEl_resources(this.queryParams).then( response => {
- this.el_resourcesList = response.rows;
- this.total = response.total;
- });
- },
- //获取课件
- getResources() {
- listEl_resources(this.queryParams).then( response => {
- this.el_resourcesList = response.rows;
- this.total = response.total;
- });
- },
- //获取题目分类
- getList_option(){
- list_option({}).then(response => {
- this.optionList = response.data;
- });
- },
- //选中章节
- checkChapterClick(item){
- this.chapterIndex = item.id;
- this.$set(this,'chapterData',JSON.parse(JSON.stringify(item)))
- let hour = parseInt(this.chapterData.duration/3600);
- let hourNum = this.chapterData.duration - this.accMul(hour,3600);
- let minute = parseInt(hourNum/60)
- let second = hourNum - this.accMul(minute,60);
- let timeValue = hour+':'+minute+':'+second;
- this.$set(this.chapterData,'timeValue',timeValue);
- if(this.chapterData.postfix == "mp4"){
- this.getVideo();
- }else if(this.chapterData.postfix == "pdf" || this.chapterData.postfix == "doc" || this.chapterData.postfix == "docx"||this.chapterData.postfix == "ppt" || this.chapterData.postfix == "pptx"){
- this.getWord();
- }else if(this.chapterData.type == 5){
- this.getRichText();
- }
- if(this.chapterData.isAssess == 1){
- this.getQueryChapterQu(this.chapterData.id);
- }
- this.countTheNumberOfQuestions();
- this.exerciseAddClickOff();
- this.$forceUpdate();
- },
- //富文本处理
- getRichText(){
- this.chapterData.chapterData = unescape(this.chapterData.chapterData)
- },
- //视频处理
- getVideo(){
- let list = [];
- let obj = {
- type:'video/'+this.chapterData.postfix,
- src:this.chapterData.chapterData,
- };
- list.push(obj);
- this.playerOptions.sources = list;
- },
- //word处理
- async getWord(){
- this.chapterData.iframeSrc = this.urlJudge(this.chapterData.chapterData);
- },
- demo(player){
- console.log("123",player)
- },
- //子类展开/关闭
- chapterTreeClick(item,type){
- item.showType = type;
- },
- //添加新章节
- add_el_chapterClick(){
- let obj = {
- type:0,
- courseId:this.infoId.id,
- parentId:0,
- title:"新章节"
- };
- add_el_chapter(obj).then( response => {
- response.data.showType = true;
- if(this.chapterList[0]){
- this.chapterList.push(response.data);
- }else{
- this.chapterList.push(response.data);
- this.chapterIndex = response.data.id
- this.chapterData = JSON.parse(JSON.stringify(response.data))
- }
- this.msgSuccess("新增成功");
- });
- },
- //时间确定
- timeChange(data){
- // this.$set(this.chapterData,'timeValue',data);
- let timeList = data.split(":");
- let hour = timeList[0];
- let minute = timeList[1];
- let second = timeList[2];
- minute = this.accAdd(minute,this.accMul(hour,60));
- second = this.accAdd(second,this.accMul(minute,60));
- this.$set(this.chapterData,'duration',second);
- this.$forceUpdate();
- },
- //修改章节
- edit_el_chapterClick(){
- let self = this;
- console.log("this.chapterData.duration",this.chapterData.duration)
- this.$refs["chapterForm"].validate(valid => {
- if (valid) {
- if(this.chapterData.chapterData){
- if(self.chapterData.isAssess == 1&& !self.chapterData.exerciseList){
- this.msgError("请添加题目或关闭课后考核")
- return
- }
- if(self.chapterData.isAssess == 1&& !self.chapterData.exerciseList[0]){
- this.msgError("请添加题目或关闭课后考核")
- return
- }
- let list = [];
- if(self.chapterData.isAssess == 1&& self.chapterData.exerciseList){
- for(let i=0;i<self.chapterData.exerciseList.length;i++){
- let minObj = {
- quId:self.chapterData.exerciseList[i].quId
- }
- list.push(minObj);
- }
- }
- let obj ={
- courseId:this.infoId.id,
- id:this.chapterData.id,
- title:this.chapterData.title,
- // description:this.chapterData.description,
- duration:this.chapterData.duration,
- isAssess:this.chapterData.isAssess,
- };
- if(list[0]){
- obj.assessName = this.chapterData.assessName
- obj.chapterQuList = list;
- }
- edit_el_chapter(obj).then( response => {
- this.msgSuccess("修改成功");
- this.getInfoDataTow();
- this.stepsType++
- });
- }else{
- let obj ={
- courseId:this.infoId.id,
- id:this.chapterData.id,
- title:this.chapterData.title,
- // description:this.chapterData.description,
- }
- edit_el_chapter(obj).then( response => {
- this.msgSuccess("修改成功");
- this.getInfoDataTow();
- this.stepsType++
- });
- }
- }
- });
- },
- //删除章节
- del_el_chapter(item){
- let self = this;
- del_el_chapter(item.id).then( response => {
- for(let i=0;i<self.chapterList.length;i++){
- if(item.id == self.chapterList[i].id){
- self.chapterList.splice(i,1);
- }
- }
- if(item.id == this.chapterIndex){
- if(self.chapterList[0]){
- this.chapterIndex = self.chapterList[0].id
- this.chapterData = JSON.parse(JSON.stringify(self.chapterList[0]))
- }else{
- this.chapterIndex = "";
- this.chapterData = {};
- }
- }
- this.$forceUpdate();
- this.msgSuccess("删除成功");
- this.getInfoDataTow();
- });
- },
- //添加节
- addMinChildren(item){
- console.log("item",item);
- if(!this.chapterData.id){
- this.msgError("请先选择或添加章节");
- return
- }
- if(this.chapterData.chapterData){
- this.msgError("无法给课程添加课程");
- return
- }
- let obj = {
- type:1,
- courseId:this.infoId.id,
- parentId:this.chapterData.id,
- resourcesId:item.id,
- chapterData:item.path,
- title:item.title,
- duration:item.duration
- };
- if(item.type == 5){
- obj.chapterData = item.content
- }
- add_el_chapter(obj).then( response => {
- this.msgSuccess("添加成功");
- this.getInfoDataTow();
- });
- },
- // 筛选节点
- filterNode(value, data) {
- if (!value) return true;
- return data.label.indexOf(value) !== -1;
- },
- // 节点单击事件
- handleNodeClick(data) {
- this.selectTree = data.title;
- this.queryParams.cateId = data.id;
- console.log('data',data);
- this.getResources();
- },
- //打开课后练习页面
- exerciseAddClickOn(){
- this.exerciseAddType = true;
- if(!this.chapterData.exerciseList){
- this.$set(this.chapterData,'exerciseList',[]);
- this.exerciseList = [];
- }else{
- this.$set(this,'exerciseList',this.chapterData.exerciseList);
- }
- },
- //关闭课后练习页面
- exerciseAddClickOff(){
- this.exerciseAddType = false;
- },
- //保存课后练习页面数据并计算题目数量
- exerciseAddClickSave(){
- this.$set(this.chapterData,'exerciseList',this.exerciseList);
- this.countTheNumberOfQuestions();
- this.exerciseAddType = false;
- },
- //删除已添加题目
- delExerciseListClick(row){
- let self = this;
- for(let i=0;self.exerciseList.length;i++){
- if(row.quId == self.exerciseList[i].quId){
- self.exerciseList.splice(i,1)
- }
- }
- },
- //获取题目列表
- getExerciseList() {
- this.loading = true;
- listQu(this.exerciseQueryParams).then((response) => {
- this.el_courseList = response.rows;
- this.el_courseTotal = response.total;
- this.loading = false;
- });
- },
- /** 搜索按钮操作 */
- exerciseHandleQuery() {
- this.exerciseQueryParams.pageNum = 1;
- this.getExerciseList();
- },
- /** 重置按钮操作 */
- exerciseResetQuery() {
- this.resetForm("exerciseQueryParams");
- this.handleQuery();
- },
- /** 添加题目*/
- exerciseAdd(row){
- let self = this;
- for(let i=0;i<self.exerciseList.length;i++){
- if(row.id == self.exerciseList[i].quId){
- this.msgError("该题目已添加")
- return
- }
- }
- row.quId = row.id;
- this.exerciseList.push(row);
- },
- /** 计算题目数量 */
- countTheNumberOfQuestions(){
- let self = this;
- if(this.stepsType == 1){
- console.log('1');
- if(this.chapterData.chapterData){
- console.log('2');
- if(this.chapterData.exerciseList){
- console.log('3');
- let total = 0;
- let one = 0;
- let many = 0;
- let judge = 0;
- for(let i=0;i<self.chapterData.exerciseList.length;i++){
- console.log('4');
- total++
- if(self.chapterData.exerciseList[i].quType == 1){
- one++
- }else if(self.chapterData.exerciseList[i].quType == 2){
- many++
- }else if(self.chapterData.exerciseList[i].quType == 3){
- judge++
- }
- }
- this.totalNum = total;
- this.oneNum = one;
- this.manyNum = many;
- this.judgeNum = judge;
- }else{
- this.totalNum = 0;
- this.oneNum = 0;
- this.manyNum = 0;
- this.judgeNum = 0;
- }
- }else{
- this.totalNum = 0;
- this.oneNum = 0;
- this.manyNum = 0;
- this.judgeNum = 0;
- }
- }
- },
- //获取章节题目数据
- getQueryChapterQu(id){
- console.log("id",id)
- queryChapterQu(id).then( res => {
- // console.log("res",res)
- this.$set(this.chapterData,'exerciseList',res.data)
- this.countTheNumberOfQuestions();
- });
- },
- /******************章节信息-结束******************/
- /******************设置信息-开始******************/
- edutSetUpClick(){
- this.$refs["setUpForm"].validate(valid => {
- if (valid) {
- let obj = {
- id:this.infoId.id,
- // duration:this.setUpForm.duration,
- // points:this.setUpForm.points,
- ceTime:this.setUpForm.ceTime,
- ceType:this.setUpForm.ceType,
- status:this.setUpForm.status,
- videoDraggable:this.setUpForm.videoDraggable,
- };
- updateEl_course(obj).then( response => {
- this.msgSuccess("修改成功");
- this.offPage();
- });
- }
- });
- },
- /******************设置信息-结束******************/
- //乘法
- accMul(arg1,arg2){
- var m=0,s1=arg1.toString(),s2=arg2.toString();
- try{m+=s1.split(".")[1].length}catch(e){}
- try{m+=s2.split(".")[1].length}catch(e){}
- return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
- },
- //加法
- accAdd(arg1,arg2){
- var r1,r2,m;
- try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
- try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
- m=Math.pow(10,Math.max(r1,r2))
- return ((arg1*m+arg2*m)/m).toFixed(0);
- },
- },
- }
- </script>
- <style scoped lang="scss">
- .edit-page {
- flex:1;
- display: flex!important;
- flex-direction: column;
- overflow: hidden;
- /*box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);*/
- /*padding:20px!important;*/
- /*margin:9px 20px 20px;*/
- .top-steps-box{
- margin:20px 20px 0;
- }
- .center-content-max-box{
- flex:1;
- }
- .bottom-button-box{
- width:280px;
- margin:0 auto 20px;
- }
- .info-max-box{
- margin:20px 20px 0;
- }
- .chapter-max-box{
- *{
- margin:0;
- padding:0;
- }
- display: flex;
- overflow: hidden;
- .left-new-chapter-box{
- /*backAnimation-color: blueviolet;*/
- box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
- border-radius:6px;
- width:270px;
- overflow: hidden;
- margin:20px;
- display: flex;
- flex-direction: column;
- .add-chapter-p{
- margin:15px auto;
- }
- .chapter-list-for-max-box{
- flex:1;
- margin-bottom:20px;
- overflow-y: scroll;
- padding:0!important;
- .chapter-list-for-big-box{
- margin: 10px 6px 0 10px;
- .chapter-list-for-box{
- display: flex;
- background: #F2F2F2;
- border:1px solid #F2F2F2;
- p{
- line-height:30px;
- font-size:15px;
- }
- p:nth-child(1){
- width:30px;
- text-align: center;
- font-size:18px;
- cursor:pointer;
- }
- p:nth-child(2){
- flex:1;
- display:block;
- overflow:hidden;
- text-overflow:ellipsis;
- white-space:nowrap;
- }
- p:nth-child(3){
- width:30px;
- text-align: center;
- font-size:18px;
- cursor:pointer;
- }
- }
- .chapter-list-min-for-box{
- display: flex;
- margin:10px 0 0 10px;
- border:1px solid #F2F2F2;
- p{
- line-height:30px;
- font-size:15px;
- }
- p:nth-child(1){
- flex:1;
- margin-left:10px;
- display:block;
- overflow:hidden;
- text-overflow:ellipsis;
- white-space:nowrap;
- }
- p:nth-child(2){
- width:30px;
- text-align: center;
- font-size:18px;
- cursor:pointer;
- }
- }
- }
- }
- }
- .center-content-box{
- display: flex;
- flex-direction: column;
- /*backAnimation-color: red;*/
- box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
- border-radius:6px;
- flex:1;
- margin:20px 0;
- width: 861px;
- .center-content-box-one{
- flex:1;
- display: flex;
- flex-direction: column;
- }
- .center-content-box-two{
- flex:1;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- .center-content-box-two-top{
- padding-top:10px;
- }
- .center-content-box-two-bottom{
- flex:1;
- display: flex;
- overflow: hidden;
- /*max-width:956px;*/
- .center-content-box-two-bottom-left{
- width:320px;
- border:1px solid #dedede;
- border-radius:4px;
- margin:0 20px;
- display: flex;
- flex-direction: column;
- overflow-y: hidden;
- .del-i{
- color:#999;
- cursor:pointer;
- font-size:16px;
- }
- .del-i:hover{
- color:#FF6666;
- }
- .center-content-box-two-bottom-left-title{
- background: #f8f8f9;
- border-bottom:1px solid #dfe6ec;
- height:40px;
- line-height:40px;
- padding-left:10px;
- font-size:14px;
- }
- .center-content-box-two-bottom-left-null{
- line-height:100px;
- text-align: center;
- font-size:14px;
- color:#999;
- }
- .center-content-box-two-bottom-left-for-box{
- flex:1;
- display: flex;
- flex-direction: column;
- .center-content-box-two-bottom-left-for-p{
- border-top:1px solid #dfe6ec;
- flex:1;
- line-height:40px;
- font-size:14px;
- color:#999;
- font-weight:500;
- padding:0 10px;
- display:block;
- white-space:nowrap;
- }
- }
- }
- .center-content-box-two-bottom-right{
- flex:1;
- border:1px solid #dedede;
- border-radius:4px;
- display: flex;
- flex-direction: column;
- overflow-y: hidden;
- margin-right:20px;
- position: relative;
- .center-content-box-two-bottom-right-table{
- display: flex;
- flex-direction: column;
- position: absolute;
- width:100%;
- height:100%;
- }
- }
- }
- .center-content-box-two-bottom-button{
- height:60px;
- display: flex;
- p:nth-child(1){
- flex:1;
- }
- p:nth-child(2){
- width:80px;
- margin:10px 0;
- }
- p:nth-child(3){
- width:80px;
- margin:10px 20px;
- }
- }
- }
- .center-info-components-max-box{
- margin:20px;
- overflow-y: scroll;
- flex:1;
- display: flex;
- flex-direction: column;
- iframe{
- flex:1;
- }
- }
- .exercise-add-max-box{
- margin:20px 20px 0;
- display: flex;
- .exercise-add-text-box{
- display: flex;
- flex:1;
- div{
- flex:1;
- padding:10px 20px;
- background: #f5f5f5;
- }
- }
- .exercise-add-button{
- width:200px;
- line-height:40px;
- text-align: center;
- border-radius:6px;
- margin-right:20px;
- }
- }
- }
- .right-courseware-box{
- /*backAnimation-color: blue;*/
- display: flex;
- flex-direction: column;
- box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
- border-radius:6px;
- width:365px;
- margin:20px;
- padding: 0 20px;
- box-sizing: border-box;
- .el-resources-tree{
- /* flex:1;*/
- border-bottom:1px solid #dedede;
- overflow-y: scroll;
- height: 130px;
- }
- .el-resources-search{
- flex:1;
- }
- .el-resources-list{
- height: 72%;
- overflow-y: auto;
- }
- }
- }
- .set-up-max-box{
- *{
- margin:0;
- padding:0;
- }
- }
- .title-p{
- margin:0;
- line-height:40px;
- font-size:16px;
- color:#0045AF;
- font-weight:500;
- padding-left:20px;
- border-bottom:2px solid #E0E0E0;
- }
- .null-add-p{
- font-size:20px;
- color:#999;
- text-align: center;
- line-height:300px;
- font-weight:500;
- }
- .checkChapter{
- border:1px solid #0045AF !important;
- }
- .video-player{
- video{
- object-fit:fill!important;
- }
- }
- }
- </style>
|