2022年5月29日从svn移到git

src/views/course/Courseware.vue

@@ -0,0 +1,671 @@
+<template>
+  <div>
+    <!-- <Remark> 关于课程 的上传流程需要讨论一下 <br/> 文档类的比如word文档，转化成pdf显示</br>
+    批量操作还存在疑问，如果是批量操作可见性，那么保存和批量操作不是功能重复了？
+    </Remark> -->
+    <el-container>
+      <el-header style="height:120px">
+        <div style="padding: 12px 0px 10px 0px;  position: relative;" >
+          <!-- <el-row :gutter="20">
+             <el-col :span="3" style="margin-left:88%">
+              <div class="grid-content bg-purple" style="line-height: 34px; "><el-checkbox v-model="params.self">只看自己</el-checkbox></div>
+            </el-col> -->
+          <!-- </el-row> -->
+          <el-row :gutter="20">
+            
+            <!-- <el-col :span="6">
+              <div class="grid-content bg-purple">
+                <el-cascader style="margin-left: 0px" placeholder="资源归属" :options="resOwnerListMap" :props="defaultProps" v-model="resOwner" clearable></el-cascader>
+              </div>
+            </el-col> -->
+            <el-col :span="4">
+              <div class="grid-content bg-purple"><el-input v-model="params.name" placeholder="名称" clearable></el-input></div>
+            </el-col>
+            <el-col :span="4">
+              <div class="grid-content bg-purple"><el-input placeholder="创建人" v-model="params.sysCreateBy" clearable></el-input></div>
+            </el-col>
+             <el-col :span="4">
+              <div class="grid-content bg-purple">
+                <el-select v-model="params.resType" clearable placeholder="课件类型">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+              </div>
+            </el-col>
+             <el-col :span="8" >
+              <div class="grid-content bg-purple" >
+                <el-button type="primary" style="margin-left: 0px" @click="getSearch()" icon="el-icon-search">搜索</el-button>
+                <el-button @click="reset()" style="margin-left: 20pxpx" type="primary" icon="el-icon-refresh-right">重置</el-button>
+              </div>
+              
+            </el-col>
+          </el-row>
+          
+           <el-row :gutter="20" style="margin-top:15px;margin-bottom:15px">
+            <el-col :span="4" style="margin-left:0%;">
+              <div class="grid-content bg-purple">
+                <el-button @click="addFile()" type="primary" icon="el-icon-plus">上传课件</el-button>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="grid-content bg-purple" style="line-height: 34px;">
+                <el-checkbox v-model="params.self" @change="getSearch()">仅显示我上传的</el-checkbox>
+                 <!-- <el-checkbox v-model="params.self" label="只看自己" border></el-checkbox> -->
+                </div>
+            </el-col> 
+            <!-- <el-col :span="6">
+             
+            </el-col> -->
+           
+          </el-row>
+          <!-- <div><el-button @click="addFile()" type="primary">上传课件</el-button></div> -->
+          <!-- <el-cascader style="margin-left: 10px" placeholder="资源归属" :options="resOwnerList" :props="defaultProps"   v-model="resOwner" clearable></el-cascader> -->
+          <!-- <div> -->
+          <!-- <div style="display: flex; justify-content: flex-end"> -->
+
+          <!-- <div class="one_search"><el-input v-model="params.name" placeholder="名称关键字" clearable></el-input></div> -->
+          <!-- <div class="two_search" style="margin-left: 10px">
+                <el-select v-model="params.resType" clearable placeholder="课件类型" style="margin-left: 10px">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+              </div> -->
+          <!-- <el-button type="primary" style="margin-left: 10px" @click="getSearch()">查询</el-button> -->
+          <!-- </div> -->
+          <!-- </div> -->
+        </div>
+      </el-header>
+      <el-container style="min-height: 500px; margin:0px 10px; ">
+        <el-main>
+          <el-table border stripe :data="tableData" style="width: 100%">
+            <el-table-column label="序号" type="index" width="50"></el-table-column>
+            <el-table-column prop="name" show-overflow-tooltip label="名称" width="200">
+              <template slot-scope="scope">
+                <span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
+              </template>
+            </el-table-column>
+            <!-- 点击名称预览 -->
+            <el-table-column prop="resType" label="类型">
+              <template slot-scope="scope">
+                {{ getType(scope.row.resType) }}
+              </template>
+            </el-table-column>
+            <!-- <el-table-column prop="type" label="资源归属" width="400" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <span>{{ resOwnerName(scope.row.resOwner1) }}</span>
+                <span v-if="scope.row.resOwner2 != ''">/{{ resOwnerName(scope.row.resOwner2) }}</span>
+                <span v-if="scope.row.resOwner3 != ''">/{{ resOwnerName(scope.row.resOwner3) }}</span>
+              </template>
+            </el-table-column> -->
+            <el-table-column prop="resType" label="创建人">
+              <template slot-scope="scope">
+                {{ scope.row.sysCreateBy }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="resType" label="上传时间" width="200">
+              <template slot-scope="scope">
+                {{ scope.row.sysCreateTime }}
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="fileName" label="文件名" width="200" show-overflow-tooltip></el-table-column>
+            <el-table-column label="操作" width="160px" fixed="right">
+              <template slot-scope="scope">
+                <el-button type="text" size="mini" v-if="scope.row.down" @click="downloadFile(scope.row)">下载</el-button>
+                <el-button type="text" size="mini" @click="editFile(scope.row)">编辑</el-button>
+                <el-button type="text" size="mini" @click="deleteCourseware(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div v-if="tableData.length > 0" style="text-align: center;margin-top:70px">
+            <el-pagination background
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="page.pageIndex"
+              :page-sizes="[10, 20, 30, 40]"
+              :page-size="page.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="page.count"
+            ></el-pagination>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
+    <el-dialog title="上传课件" :close-on-click-modal="false" width="700px" :visible.sync="upload.show" custom-class="g-dialog">
+      <div>
+        <div style="line-height: 30px;">
+          <div>请在当前面板选择需要上传的课件</div>
+          <div>提示：课件大小超过1G时，无法上传，请先压缩视频，或剪切成多个再上传。</div>
+        </div>
+        <div>
+          <!-- <div>
+            资源归属：
+            <el-cascader clearable v-model="projectOwnership" :options="resOwnerListMap" :props="defaultProps" @change="handleChange"></el-cascader>
+          </div> -->
+          <!-- <div style="margin-top: 10px" v-if="isUpload"><el-button type="primary" size="mini" @click="isUploadHandle()">选择文件并上传</el-button></div> -->
+          <div style="margin-top: 10px">
+            <file-upload dir="files" :showList="true" :value="imageShowUrl" :limit="5" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></file-upload>
+          </div>
+        </div>
+        <div style="margin-top: 10px">
+          <el-table border stripe :data="fileList" style="width: 100%" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55"></el-table-column>
+            <el-table-column prop="fileName" label="文件名称"></el-table-column>
+            <el-table-column prop="name" label="课件名称">
+              <template slot-scope="scope">
+                <el-input type="text" v-model="scope.row.name"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="duration" label="时长(秒)">
+              <template slot-scope="scope">
+                <el-input type="number" v-model="scope.row.duration"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="可见性">
+              <template slot-scope="scope">
+                <el-checkbox label="移动端" v-model="fileList[scope.$index].device1"></el-checkbox>
+                <el-checkbox label="pc端" v-model="fileList[scope.$index].device2"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否允许下载" width="200">
+              <template slot-scope="scope">
+                <el-checkbox v-model="fileList[scope.$index].down"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="80">
+              <template slot-scope="scope">
+                <el-button type="text" @click="deleteFile(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <span slot="footer">
+        <el-button type="infor" @click="isVisible(1)">移动端可见</el-button>
+        <el-button type="infor" @click="isVisible(2)">pc端可见</el-button>
+        <el-button type="primary" @click="saveUpload()">保存</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="预览课件" :close-on-click-modal="false" :visible.sync="coursewareShow" custom-class="g-dialog">
+      <div>
+        <div class="courseware-title">{{ fileUrl.fileName }}</div>
+        <div class="courseware-icon">
+          <div v-if="fileUrl.resType == 10" style="position: relative;">
+            <videoPlayer
+              :src="fileBaseUrl + fileUrl.filePath"
+              @onPlayerPlaying="onPlayerPlaying"
+              @onPlayerPlay="onPlayerPlay"
+              @onPlayerPause="onPlayerPause"
+              @onPlayerEnded="onPlayerEnded"
+            ></videoPlayer>
+            <!-- <video :src="fileBaseUrl + fileUrl.filePath" controls controlslist="nodownload" style="width: 100%; height: 100%; object-fit: fill"></video> -->
+          </div>
+          <div v-if="fileUrl.resType == 20">
+            <audioPlayer
+              :url="fileBaseUrl + fileUrl.filePath"
+              :name="fileUrl.fileName"
+              @onPlaying="audioPlaying"
+              @onPlay="audioPlay"
+              @onPause="audioPause"
+              @onPlayEnd="audioEnd"
+            ></audioPlayer>
+            <!-- <audio width="100%" controls :src="fileBaseUrl+fileUrl.filePath">
+                   您的浏览器不支持 audio 标签。
+              </audio> -->
+          </div>
+          <div v-if="fileUrl.resType == 30"><img style="width:100%;height:100%" :src="fileBaseUrl + fileUrl.filePath" alt="图片" /></div>
+          <div v-if="fileUrl.resType == 40"><pdfPreview :filePath="fileBaseUrl + fileUrl.previewFilePath"></pdfPreview></div>
+        </div>
+      </div>
+      <span slot="footer"><el-button type="primary" @click="coursewareShow = false">关闭</el-button></span>
+    </el-dialog>
+    <el-dialog title="编辑课件" :close-on-click-modal="false" :visible.sync="editCoursewareShow" custom-class="g-dialog">
+      <div>
+        <el-form ref="form" :model="form" label-width="80px">
+          <!-- <el-form-item label="资源归属">
+            <el-cascader v-model="projectOwnership1" :options="resOwnerListMap" :props="defaultProps" @change="handleChange"></el-cascader>
+          </el-form-item> -->
+          <!-- <el-form-item label="编号">{{}}</el-form-item> -->
+          <el-form-item label="文件名称">{{ form.fileName }}</el-form-item>
+          <el-form-item label="课件名称"><el-input v-model="form.name"  maxlength="50" show-word-limit></el-input></el-form-item>
+          <el-form-item label="课件类型">{{ getType(form.resType) }}</el-form-item>
+          <el-form-item label="时长">
+            <!-- <el-input v-model="form.duration"></el-input> -->
+            <el-input
+              type="number"
+              placeholder="请输入数字"
+             :maxlength="32"
+              show-word-limit
+              v-model="form.duration"
+            >
+            </el-input>
+            <!-- <el-input-number max="" v-model="form.duration" controls-position="right"></el-input-number> -->
+          </el-form-item>
+          <el-form-item label="可见性">
+            <el-checkbox label="移动端" v-model="form.device1"></el-checkbox>
+            <el-checkbox label="pc端" v-model="form.device2"></el-checkbox>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer"><el-button :loading="loading" type="primary" @click="saveUpdate()">保存</el-button></span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import coueseFile from '../../api/modules/courseFile';
+import FileUpload from '@/components/FileUpload/index.vue';
+import { getType, deepCopy, toContentType } from '../../utils/tools.js';
+import pdfPreview from '@/components/PdfPreview/index.vue';
+import { mapGetters, mapActions } from 'vuex';
+import videoPlayer from '@/components/VideoPlayer/index.vue';
+import audioPlayer from '@/components/AudioPlayer/index.vue';
+
+export default {
+  components: { FileUpload, pdfPreview, videoPlayer, audioPlayer },
+  computed: {
+    ...mapGetters(['resOwnerMap', 'sysTypeMap'])
+  },
+  data() {
+    return {
+      resOwnerListMap: [],
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+      getType: getType,
+      loading: false,
+      defaultProps: {
+        value: 'code',
+        label: 'name'
+      },
+      // resOwnerName: resOwnerIndexName,
+      isUpload: true,
+      fileUrl: {},
+      device1: 1,
+      device2: 2,
+      projectOwnership1: '',
+      imageShowUrl: '',
+      page: {
+        count: 0,
+        pageSize: 10,
+        pageIndex: 1
+      },
+      resOwner: [],
+      params: {
+        name: '', //查,询的名称的关键字
+        self: null, //默认是true,是否只查询自己上传的课件
+        resOwner1: '', //资源归属一级的id
+        resOwner2: '', //资源归属二级的id
+        resOwner3: '', // 资源归属三级的id
+        resType: '' //文件类型,10视频，20音频，30图片， 40 文档，41表图文，50表scrom包,90表其它
+      },
+      options: [
+        { value: null, label: '全部' },
+        { value: 10, label: '视频' },
+        { value: 20, label: '音频' },
+        { value: 30, label: '图片' },
+        { value: 40, label: '文档' }
+        // { value: 41, label: "图文" },
+        // { value: 50, label: "scrom包" },
+        // { value: 90, label: "其他" }
+      ],
+      form: {
+        device1:false,
+        device2:false,
+      },
+      editCoursewareShow: false,
+      currentPage4: 4,
+      projectOwnership: [],
+      videoPathUrl: '',
+      coursewareShow: false,
+      tableData: [], //Array(10).fill(item)
+      // params: { code: '', ctype: '' },
+      data: [],
+      // defaultProps: { children: 'children', label: 'label' },
+      upload: {
+        show: false
+      },
+      fileList: [],
+      courseShow: false,
+      multipleSelection: []
+    };
+  },
+  watch: {
+    projectOwnership(val) {
+      if (val.length !== 0) {
+        this.isUpload = false;
+      } else {
+        this.isUpload = true;
+      }
+    },
+    resOwner(val) {
+      if (val.length !== 0) {
+        this.params.resOwner1 = val[0];
+        this.params.resOwner2 = val[1];
+        this.params.resOwner3 = val[2];
+      } else {
+        this.params.resOwner1 = '';
+        this.params.resOwner2 = '';
+        this.params.resOwner3 = '';
+      }
+    }
+  },
+  created() {
+    this.getSearch();
+  },
+  mounted() {
+    this.loadResOwners();
+    this.getResOwnerTree().then(rs => {
+      this.resOwnerListMap = rs;
+    });
+  },
+  methods: {
+    reset() {
+      this.params.self = null;
+      this.params.name = '';
+      this.params.resType = '';
+      this.resOwner = [];
+      this.params.sysCreateBy = '';
+      this.params.resOwner1 = '';
+      this.params.resOwner2 = '';
+      this.params.resOwner3 = '';
+	    this.getSearch();
+    },
+    ...mapActions({
+      getResOwnerTree: 'resOwner/getResOwnerTree',
+      loadResOwners: 'resOwner/loadResOwners'
+    }),
+    resOwnerName(code) {
+      if (code == '') {
+        return '';
+      }
+      return this.resOwnerMap.get(code);
+    },
+    onPlayerPlay() {
+      console.log('开始播放');
+    },
+    onPlayerPause() {
+      console.log('暂停');
+    },
+    onPlayerEnded() {
+      console.log('播放结束');
+    },
+    onPlayerPlaying(itme) {
+      console.log('当前播放' + itme);
+    },
+    audioPlaying(item) {
+      console.log('当前播放' + item);
+    },
+    audioPlay() {
+      console.log('开始播放');
+    },
+    audioPause() {
+      console.log('暂停');
+    },
+    audioEnd() {
+      console.log('播放结束');
+    },
+    addFile() {
+      this.upload.show = true;
+      this.projectOwnership = [];
+      this.fileList = [];
+    },
+    isUploadHandle() {
+      this.$message.warning('请选择资源归属！');
+    },
+    // 编辑保存
+    async saveUpdate() {
+      this.form.resOwner1 = this.projectOwnership1[0]; //资源归属一级的id
+      this.form.resOwner2 = this.projectOwnership1[1]; //资源归属二级的id
+      this.form.resOwner3 = this.projectOwnership1[2]; //资源归属三级的id
+      if (this.form.device1 === true && this.form.device2 === true) {
+        this.form.device = 3;
+      } else if (this.form.device1 === true) {
+        this.form.device = 1;
+      } else if (this.form.device2 === true) {
+        this.form.device = 2;
+      }
+      try {
+        const { status,message} = await coueseFile.batchUpdate([this.form]);
+        if (status === 200) {
+          this.$message.success('保存成功');
+          this.editCoursewareShow = false;
+        } else {
+          this.$message.error(message);
+        }
+      } catch (error) {
+        this.$message.error(error);
+        this.editCoursewareShow = false;
+      }
+    },
+
+    isVisible(num) {
+      let ids = [];
+      this.multipleSelection.forEach(item => {
+        ids.push(item.id);
+      });
+      //待完善
+      for (let index = 0; index < ids.length; index++) {
+        this.fileList.forEach((item, i) => {
+          if (item.id === ids[index]) {
+            if (num === 1) {
+              item.device1 = true;
+              this.$set(this.fileList, i, item);
+            } else {
+              item.device2 = true;
+              this.$set(this.fileList, i, item);
+            }
+            this.$forceUpdate();
+          }
+        });
+      }
+    },
+    async handleUploadSuccess(rs) {
+      if (rs.status === 200) {
+        let type = toContentType(rs.result.fileType);
+        // ["doc", "xls", "ppt","docx", "xlsx", "pptx","png","txt", "pdf","jpg","gif","bmp","mp4","mp3"]
+        console.log(type, 'type');
+        if(rs.result.displayName.length > 100){
+          this.$message.error('文件名称请不要超过100个字符');
+          return;
+        }
+        const data = {
+          fileName: rs.result.displayName,
+          fileType: rs.result.fileType.toLowerCase(), //文件的后缀名，比如：mp4
+          filePath: rs.result.filePath, // 文件的保存路径
+          resOwner1: this.projectOwnership[0], //资源归属一级的id
+          resOwner2: this.projectOwnership[1], //资源归属二级的id
+          resOwner3: this.projectOwnership[2], //资源归属三级的id
+          resType: type //文件类型,10视频，20音频，30图片， 40 文档，50表图文，60表scrom包,90表其它，
+          // remark: 备注说明，可以为空，不填
+        };
+        try {
+          const { result, status } = await coueseFile.saveUpload(data);
+          if (status === 200) {
+            result.device1 = true;
+            result.device2 = true;
+            this.fileList.push(result);
+          } else {
+            this.$message.error(error);
+          }
+        } catch (error) {
+          this.$message.error(error);
+        }
+      } else {
+        this.$message.error(rs.message);
+      }
+    },
+    handleRemoveSuccess(res) {},
+    // 文件上传保存
+    saveUpload() {
+      this.fileList.forEach(item => {
+        if (item.device1 === true && item.device2 === true) {
+          item.device = 3;
+        } else if (item.device1 === true) {
+          item.device = 1;
+        } else if (item.device2 === true) {
+          item.device = 2;
+        }
+      });
+      this.loading = true;
+      coueseFile.batchUpdate(this.fileList).then(rs => {
+        if (rs.status === 200) {
+          this.$message.success('保存成功');
+          this.getSearch();
+          this.upload.show = false;
+        } else {
+          this.$message.error(rs.message);
+        }
+        this.loading = false;
+      });
+    },
+    // 列表查询
+    async getSearch() {
+      try {
+        // this.params.count = this.page.count;
+        this.params.pageSize = this.page.pageSize;
+        this.params.pageIndex = this.page.pageIndex;
+        const { result, error, status } = await coueseFile.pageList(this.params, this.page);
+        if (status === 200) {
+          this.tableData = result.list;
+          this.page.count = result.count;
+          this.page.pageSize = result.pageSize;
+          // this.page.totalPages = result.totalPages;
+        }
+      } catch (error) {}
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    editFile(row) {
+      coueseFile.detail(row.id).then(res=>{
+        if(res.status == 200) {
+          this.form = res.result;
+           if (res.result.resOwner3 == '') {
+            this.projectOwnership1 = [res.result.resOwner1, res.result.resOwner2];
+          } else {
+            this.projectOwnership1 = [res.result.resOwner1, res.result.resOwner2, res.result.resOwner3];
+          }
+          if (res.result.device === 1) {
+            this.form.device1 = true;
+          } else if (res.result.device === 2) {
+            this.form.device2 = true;
+          } else if (res.result.device === 3) {
+            this.form.device1 = true;
+            this.form.device2 = true;
+          }
+            }
+          })
+      this.editCoursewareShow = true;
+    },
+    handleSizeChange(val) {
+      this.page.pageSize = val;
+      this.page.pageIndex = 1;
+      this.getSearch();
+    },
+    handleCurrentChange(val) {
+      this.page.pageIndex = val;
+      this.getSearch();
+    },
+    handleChange(value) {
+      this.projectOwnership = value;
+    },
+    downloadFile(row) {
+      if (!row.filePath) return;
+      let link = document.createElement('a'); //创建a标签
+      link.style.display = 'none'; //使其隐藏
+      link.download = this.fileBaseUrl + row.filePath;
+      link.setAttribute('target', '_blank');
+      link.href = this.fileBaseUrl + row.filePath; //赋予文件下载地址
+      link.setAttribute('download', row.name); //设置下载属性 以及文件名
+      document.body.appendChild(link); //a标签插至页面中
+      link.click(); //强制触发a标签事件
+      document.body.removeChild(link);
+    },
+    deleteFile(row) {
+      this.fileList.forEach((item, index) => {
+        if (item.id === row.id) {
+          this.fileList.splice(index, 1);
+        }
+      });
+    },
+    uploadFile() {
+      if (this.projectOwnership.length === 0) return this.$message.warning('请选择项目归属！');
+    },
+    deleteCourseware(row) {
+      this.$confirm('此操作将数据永久删除, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          let params = {
+            id: row.id,
+            filePath: row.filePath, //文件的路径
+            flag: true
+          };
+          const { status } = await coueseFile.delFile(params);
+          if (status === 200) {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.getSearch();
+          }
+        })
+        .catch(err => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+    },
+    viewCourseware(row) {
+      this.coursewareShow = true;
+      this.videoPathUrl = row.pathUrl;
+    },
+    handleNodeClick(data) {
+      console.log(data);
+    },
+    viewTopic(row) {
+      this.fileUrl = row;
+      console.log(row, 'row');
+      this.coursewareShow = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.butpost{
+  position: absolute;
+  right: 1%;
+}
+.butpost2{
+   position: absolute;
+   right: 1%;
+}
+.el-col {
+  padding: 0 0 0 10px !important;
+}
+.grid-content {
+  padding-right: 0px;
+}
+.el-button--text {
+  font-size: 14px;
+}
+.el-aside {
+  margin: 0px;
+  padding: 0px 2px 10px 0px;
+}
+.el-main {
+  margin: 0px;
+  padding: 0px 10px;
+}
+.courseware-title {
+  font-size: 24px;
+  font-weight: 700;
+  margin-left: 50px;
+}
+.courseware-icon {
+  text-align: center;
+  width: 100%;
+  min-height: 400px;
+}
+</style>