|
|
@@ -1,63 +1,128 @@
|
|
|
<template>
|
|
|
- <div class="l_box">
|
|
|
- <div class="l_type_box" v-loading="isLoading">
|
|
|
- <div class="header">
|
|
|
- <span class="title">我的资源库</span>
|
|
|
- <span class="add" @click="addClick" ref="divToHide3">添加分类</span>
|
|
|
+ <div class="pb_content" style="overflow: auto">
|
|
|
+ <div class="pb_head top">
|
|
|
+ <span>素材库</span>
|
|
|
+ <div v-if="choose == 0" @click="addImg($event)">
|
|
|
+ <input type="file" accept="image/*" capture="camera" style="display: none" @change="beforeUpload1($event, 1)" />
|
|
|
+ <div class="uploadThing">上传图片</div>
|
|
|
</div>
|
|
|
- <div class="nav">
|
|
|
- <div class="nav_b">
|
|
|
- <div class="nav_box" :class="{ active1: pid == 'wu' }" @click="checkType('wu')"><span
|
|
|
- class="icon no"></span><span class="name">未分类</span>
|
|
|
- </div>
|
|
|
+ <div v-if="choose == 1" @click="addImg($event)">
|
|
|
+ <input type="file" accept="video/mp4,video/quicktime,video/x-msvideo" capture="camera" style="display: none"
|
|
|
+ @change="beforeUpload2($event, 2)" />
|
|
|
+ <div class="uploadThing">上传视频</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="choose == 2" @click="addImg($event)">
|
|
|
+ <input type="file"
|
|
|
+ accept="application/pdf,.ppt,.pptx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
|
|
|
+ style="display: none" @change="beforeUpload2($event, 3)" />
|
|
|
+ <div class="uploadThing">上传附件</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pb_content_body" style="height: 70%">
|
|
|
+ <div class="student_head">
|
|
|
+ <div class="three">
|
|
|
+ <div :class="choose == 0 ? 'choose' : ''" @click="sMtl(0)">图片</div>
|
|
|
+ <div :class="choose == 1 ? 'choose' : ''" @click="sMtl(1)">视频</div>
|
|
|
+ <div :class="choose == 2 ? 'choose' : ''" @click="sMtl(2)">附件</div>
|
|
|
</div>
|
|
|
- <div class="nav_b" v-for="(item, index) in typeArray" :key="index">
|
|
|
- <div class="nav_box" :class="{ open: item.open, active2: pid.split('-')[0] == index }"
|
|
|
- @click="checkType(index + '')"><span class="icon" :class="{ haveL: item.child.length }"
|
|
|
- @click.stop="typeOpen(index)"></span>
|
|
|
- <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '')" ref="renameInput"
|
|
|
- @change="rename" @keyup.enter="rename">
|
|
|
- <el-tooltip :content="item.name" placement="top" effect="dark" v-else>
|
|
|
- <span class="name">{{ item.name }}</span>
|
|
|
- </el-tooltip>
|
|
|
- <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '')"></span>
|
|
|
- </div>
|
|
|
- <div class="nav_child_box" v-if="item.open && item.child.length">
|
|
|
- <div class="nav_box" :class="{ active: pid == index + '-' + index2 }" v-for="(item2, index2) in item.child"
|
|
|
- :key="index + '-' + index2" @click="checkType(index + '-' + index2)">
|
|
|
- <span class="icon"></span>
|
|
|
- <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '-' + index2)"
|
|
|
- ref="renameInput" @change="rename" @keyup.enter="rename">
|
|
|
- <el-tooltip :content="item2.name" placement="top" effect="dark" v-else>
|
|
|
- <span class="name">{{ item2.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="student_table" v-loading="isLoading">
|
|
|
+ <div v-if="this.choose == 0" class="boxCss">
|
|
|
+ <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
|
|
|
+ <div class="tup">
|
|
|
+ <img :src="item.chapdataInfo ? JSON.parse(item.chapdataInfo).url : mtp
|
|
|
+ " alt="" @click="
|
|
|
+ handlePictureCardPreview(JSON.parse(item.chapdataInfo).url)
|
|
|
+ " />
|
|
|
+ <div class="deleteWord" @click="deleteM(item.id)">
|
|
|
+ <img src="../../assets/icon/delete.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom_box">
|
|
|
+ <el-tooltip :content="item.chapdataInfo
|
|
|
+ ? JSON.parse(item.chapdataInfo).name
|
|
|
+ : '暂无名称'" placement="top" effect="dark">
|
|
|
+ <div>
|
|
|
+ {{
|
|
|
+ item.chapdataInfo
|
|
|
+ ? JSON.parse(item.chapdataInfo).name
|
|
|
+ : "暂无名称"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
</el-tooltip>
|
|
|
- <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '-' + index2)"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="add_box" v-if="addVisbile2 === index" ref="divToHide2">
|
|
|
- <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <div class="add_box" v-if="addVisbile" ref="divToHide">
|
|
|
- <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
|
|
|
+ <div v-if="this.choose == 1" class="boxCss">
|
|
|
+ <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
|
|
|
+ <div class="tup">
|
|
|
+ <img :src="msp" alt="" @click="
|
|
|
+ handlePictureCardPreview1(JSON.parse(item.chapdataInfo).url)
|
|
|
+ " />
|
|
|
+ <div class="deleteWord" @click="deleteM(item.id)">
|
|
|
+ <img src="../../assets/icon/delete.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom_box">
|
|
|
+ <el-tooltip :content="item.chapdataInfo
|
|
|
+ ? JSON.parse(item.chapdataInfo).name
|
|
|
+ : '暂无名称'" placement="top" effect="dark">
|
|
|
+ <div>
|
|
|
+ {{
|
|
|
+ item.chapdataInfo
|
|
|
+ ? JSON.parse(item.chapdataInfo).name
|
|
|
+ : "暂无名称"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div v-if="showActionDiv" ref="actionDiv" :style="actionDivStyle" class="action-div">
|
|
|
- <div @click="actionDelete">删除</div>
|
|
|
- <div @click="actionRename">重命名</div>
|
|
|
- <div class="move" v-if="pidArray.length">
|
|
|
- <span>移动</span>
|
|
|
- <div class="pid_box">
|
|
|
- <div v-for="(item, index) in pidArray" :key="index" @click="actionMove(item)">
|
|
|
- <!-- <el-tooltip :content="item.name" placement="right" effect="dark"> -->
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- <!-- </el-tooltip> -->
|
|
|
+ <div v-if="this.choose == 2" class="boxCss">
|
|
|
+ <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
|
|
|
+ <div class="tup">
|
|
|
+ <img :src="mfj" alt="" @click="downFile(JSON.parse(item.chapdataInfo).url)" />
|
|
|
+ <div class="deleteWord" @click="deleteM(item.id)">
|
|
|
+ <img src="../../assets/icon/delete.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom_box">
|
|
|
+ <el-tooltip :content="item.chapdataInfo
|
|
|
+ ? JSON.parse(item.chapdataInfo).name
|
|
|
+ : '暂无名称'" placement="top" effect="dark">
|
|
|
+ <div>
|
|
|
+ {{
|
|
|
+ item.chapdataInfo
|
|
|
+ ? JSON.parse(item.chapdataInfo).name
|
|
|
+ : "暂无名称"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="student_page">
|
|
|
+ <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" v-if="page && chapInfo.length"
|
|
|
+ @current-change="handleCurrentChange">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :visible.sync="pictureDialog" size="tiny">
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :visible.sync="vedioDialog" size="tiny">
|
|
|
+ <video-player v-if="vedioDialog" class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
|
|
|
+ :options="playerO" @play="onPlayerPlay($event)" style="width: 100%; height: 100%"></video-player>
|
|
|
+ </el-dialog>
|
|
|
+ <div v-if="proVisible" class="mask">
|
|
|
+ <div class="progressBox">
|
|
|
+ <div class="lbox">
|
|
|
+ <img :src="require('../../assets/loading.gif')" />上传中，请稍后
|
|
|
+ </div>
|
|
|
+ <el-progress :text-inside="true" :stroke-width="20" :percentage="progress" style="width: 80%"></el-progress>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="l_file_box"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -65,616 +130,443 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- userid: this.$route.query.userid,
|
|
|
- pid: 'wu',
|
|
|
- addInput: '',
|
|
|
- addVisbile: false,
|
|
|
- addVisbile2: '',
|
|
|
+ choose: 0,
|
|
|
+ chapInfo: [],
|
|
|
+ cImgInfo: [],
|
|
|
isLoading: false,
|
|
|
- typeArray: [],
|
|
|
- showActionDiv: false,
|
|
|
- actionDivStyle: {
|
|
|
- top: '0px',
|
|
|
- left: '0px'
|
|
|
+ noneBtnImg: false,
|
|
|
+ mtp: require("../../assets/tup1.png"),
|
|
|
+ msp: require("../../assets/icon/fileIcon/isVideo.png"),
|
|
|
+ mfj: require("../../assets/icon/fileIcon/word2.png"),
|
|
|
+ page: 1,
|
|
|
+ total: 0,
|
|
|
+ dialogImageUrl: "",
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ pictureDialog: false,
|
|
|
+ vedioDialog: false,
|
|
|
+ playerOptions: {
|
|
|
+ playbackRates: [0.7, 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: [
|
|
|
+ {
|
|
|
+ type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目 || "video/ogg"|| "video/webm"
|
|
|
+ src: "", //url地址require("../../assets/media/aaa.mp4")
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // poster: require("../../assets/tu31.png"), //你的封面地址
|
|
|
+ // poster: dataRes.imgUrl, //你的封面地址
|
|
|
+ notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
+ controlBar: {
|
|
|
+ timeDivider: true, //当前时间和持续时间的分隔符
|
|
|
+ durationDisplay: true, //显示持续时间
|
|
|
+ remainingTimeDisplay: false, //是否显示剩余时间功能
|
|
|
+ fullscreenToggle: true, //全屏按钮
|
|
|
+ },
|
|
|
},
|
|
|
- actionType: '',
|
|
|
- renameType: '',
|
|
|
- renameInput: '',
|
|
|
- pidArray: [],
|
|
|
- }
|
|
|
+ playerO: {},
|
|
|
+ proVisible: false,
|
|
|
+ progress: 0,
|
|
|
+ };
|
|
|
},
|
|
|
methods: {
|
|
|
- getData() {
|
|
|
- this.isLoading = true;
|
|
|
- let params = {
|
|
|
- uid: this.userid,
|
|
|
- };
|
|
|
- this.ajax
|
|
|
- .get(this.$store.state.api + "getSourceFileType", params)
|
|
|
- .then((res) => {
|
|
|
- this.isLoading = false;
|
|
|
- let pid = res.data[0];
|
|
|
- let child = res.data[1];
|
|
|
- for (var i = 0; i < pid.length; i++) {
|
|
|
- pid[i].child = []
|
|
|
- pid[i].open = (this.typeArray.length && this.typeArray[i]) ? this.typeArray[i].open : false
|
|
|
- for (var j = 0; j < child.length; j++) {
|
|
|
- if (pid[i].id == child[j].pid) {
|
|
|
- pid[i].child.push(child[j])
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- this.typeArray = pid
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- this.isLoading = false;
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page = val;
|
|
|
+ this.selectMtl();
|
|
|
},
|
|
|
- addClick() {
|
|
|
- if (this.pid == 'wu') {
|
|
|
- this.addVisbile = true;
|
|
|
- this.addInput = '一级分类标签'
|
|
|
- setTimeout(() => {
|
|
|
- this.$refs.divToHide.children[0].select()
|
|
|
- }, 500);
|
|
|
- } else {
|
|
|
- let check = this.pid.split('-')
|
|
|
- this.addVisbile2 = parseInt(check[0]);
|
|
|
- this.addInput = '二级分类标签'
|
|
|
- setTimeout(() => {
|
|
|
- this.$refs.divToHide2[0].children[0].select()
|
|
|
- }, 500);
|
|
|
- }
|
|
|
-
|
|
|
+ addImg(e) {
|
|
|
+ var el = e.currentTarget;
|
|
|
+ el.getElementsByTagName("input")[0].click();
|
|
|
+ el.target.value = ''
|
|
|
+
|
|
|
},
|
|
|
- addType() {
|
|
|
- let pid = ''
|
|
|
- if (!this.addInput) {
|
|
|
- this.$message.error('请输入分类名字');
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.addVisbile) {
|
|
|
- pid = '0'
|
|
|
- } else if (this.addVisbile2 === 0 || this.addVisbile2) {
|
|
|
- let check = this.pid.split('-')
|
|
|
- pid = this.typeArray[check[0]].id
|
|
|
- }
|
|
|
- let params = [{
|
|
|
- pid: pid,
|
|
|
- name: encodeURIComponent(this.addInput),
|
|
|
- uid: this.userid
|
|
|
- }];
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "addSourceFileType", params)
|
|
|
- .then((res) => {
|
|
|
- this.$message.success('添加成功');
|
|
|
- this.addVisbile = false
|
|
|
- this.addVisbile2 = ''
|
|
|
- this.getData()
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
+ imgChange(file, fileList, type) {
|
|
|
+ var _tmp = this.chapInfo;
|
|
|
+ this.noneBtnImg = _tmp.length >= 1;
|
|
|
},
|
|
|
- typeOpen(index) {
|
|
|
- if (this.typeArray[index].child.length > 0) {
|
|
|
- this.typeArray[index].open = !this.typeArray[index].open
|
|
|
- }
|
|
|
+ downFile(url) {
|
|
|
+ window.open( "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"+encodeURIComponent(url.split(
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"
|
|
|
+ )[1]));
|
|
|
},
|
|
|
- checkType(pid) {
|
|
|
- if (this.pid == pid) {
|
|
|
- return
|
|
|
- }
|
|
|
- let _pid = pid.split('-')
|
|
|
- if (_pid.length === 1 && pid != 'wu') {
|
|
|
- if (this.typeArray[_pid[0]].child.length > 0) {
|
|
|
- this.pid = pid + '-0';
|
|
|
- this.typeArray[_pid[0]].open = true;
|
|
|
- } else {
|
|
|
- this.pid = pid;
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.pid = pid;
|
|
|
+ beforeUpload1(event, type) {
|
|
|
+ var file = event.target.files[0];
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var _this = this;
|
|
|
+ if (file) {
|
|
|
+ _this.progress = 0;
|
|
|
+ _this.proVisible = true;
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[file.name.split(".").length - 1],
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read",
|
|
|
+ }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ var options = {
|
|
|
+ partSize: 2048 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true,
|
|
|
+ };
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function (evt) {
|
|
|
+ //这里可以写进度条
|
|
|
+ // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
+ _this.progress = parseInt((evt.loaded * 80) / evt.total);
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ _this.progress = 100;
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.proVisible = false;
|
|
|
+ }, 1000);
|
|
|
+ if (err) {
|
|
|
+ var a = _this.$refs.upload1.uploadFiles;
|
|
|
+ a.splice(a.length - 1, a.length);
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ _this.cImgInfo.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ });
|
|
|
+ _this.addMtl();
|
|
|
+ _this.cImgInfo = [];
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
- handleClickOutside(event) {
|
|
|
- const target = event.target;
|
|
|
- const divToHide = this.$refs.divToHide; // 获取需要隐藏的 div 的引用
|
|
|
- const divToHide2 = this.$refs.divToHide2; // 获取需要隐藏的 div 的引用
|
|
|
- const divToHide3 = this.$refs.divToHide3; // 获取需要隐藏的 div 的引用
|
|
|
- const divToHide4 = this.$refs.actionDiv; // 获取需要隐藏的 div 的引用
|
|
|
- const divToHide5 = this.$refs.divToHide5; // 获取需要隐藏的 div 的引用
|
|
|
- const renameInput = this.$refs.renameInput; // 获取需要隐藏的 div 的引用
|
|
|
- console.log('1')
|
|
|
- if (divToHide && !divToHide.contains(target) && divToHide3 && !divToHide3.contains(target)) {
|
|
|
- // 点击的不是需要隐藏的 div，则隐藏它
|
|
|
- this.addVisbile = false
|
|
|
- }
|
|
|
- if (divToHide2 && divToHide2[0] && !divToHide2[0].contains(target) && divToHide3 && !divToHide3.contains(target)) {
|
|
|
- // 点击的不是需要隐藏的 div，则隐藏它
|
|
|
- this.addVisbile2 = ''
|
|
|
- }
|
|
|
-
|
|
|
- if (divToHide4 && !divToHide4.contains(target) && divToHide5 && !divToHide5[0].contains(target)) {
|
|
|
- // 点击的不是需要隐藏的 div，则隐藏它
|
|
|
- this.showActionDiv = false;
|
|
|
- }
|
|
|
-
|
|
|
- if (renameInput && renameInput[0] && !renameInput[0].contains(target) && (!divToHide4 || (divToHide4 && !divToHide4.contains(target)))) {
|
|
|
- // 点击的不是需要隐藏的 div，则隐藏它
|
|
|
- this.renameType = ''
|
|
|
- }
|
|
|
+ handlePictureCardPreview(url) {
|
|
|
+ this.dialogImageUrl = url;
|
|
|
+ this.pictureDialog = true;
|
|
|
},
|
|
|
- showActions(event, type) {
|
|
|
- this.showActionDiv = true;
|
|
|
- const buttonRect = event.target.getBoundingClientRect();
|
|
|
- this.actionDivStyle.top = `${buttonRect.bottom - 30}px`;
|
|
|
- this.actionDivStyle.left = `${buttonRect.left + 25}px`;
|
|
|
- this.pidArray = []
|
|
|
- let _type = type.split('-')
|
|
|
- if (_type.length > 1) {
|
|
|
- let pid = this.typeArray[_type[0]].child[_type[1]].pid
|
|
|
- this.typeArray.forEach(item => {
|
|
|
- item.id != pid && this.pidArray.push(item)
|
|
|
- })
|
|
|
+ handlePictureCardPreview1(url) {
|
|
|
+ this.playerO = {};
|
|
|
+ this.playerOptions.poster = "";
|
|
|
+ this.playerOptions.sources[0].src = url;
|
|
|
+ this.playerO = this.playerOptions;
|
|
|
+ // this.dialogImageUrl = url;
|
|
|
+ this.vedioDialog = true;
|
|
|
+ },
|
|
|
+ beforeUpload2(event, type) {
|
|
|
+ var file = event.target.files[0];
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var _this = this;
|
|
|
+ if (file) {
|
|
|
+ _this.progress = 0;
|
|
|
+ _this.proVisible = true;
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[file.name.split(".").length - 1],
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read",
|
|
|
+ }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ var options = {
|
|
|
+ partSize: 2048 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true,
|
|
|
+ };
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function (evt) {
|
|
|
+ //这里可以写进度条
|
|
|
+ // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
+ _this.progress = parseInt((evt.loaded * 80) / evt.total);
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ _this.progress = 100;
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.proVisible = false;
|
|
|
+ }, 1000);
|
|
|
+ if (err) {
|
|
|
+ var a = _this.$refs.upload1.uploadFiles;
|
|
|
+ a.splice(a.length - 1, a.length);
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ if (type == 2) {
|
|
|
+ _this.cImgInfo.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ });
|
|
|
+ _this.addMtl();
|
|
|
+ _this.cImgInfo = [];
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ } else if (type == 3) {
|
|
|
+ _this.cImgInfo.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ });
|
|
|
+ _this.addMtl();
|
|
|
+ _this.cImgInfo = [];
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ }
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
- this.actionType = type;
|
|
|
- this.$forceUpdate();
|
|
|
},
|
|
|
- actionMove(pid) {
|
|
|
- let type = this.actionType.split('-')
|
|
|
- let id = this.typeArray[type[0]].child[type[1]].id
|
|
|
- this
|
|
|
- .$confirm('确定移动到'+pid.name+'吗？并且此分类的底下的文件也会跟随！', "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- let params = [{
|
|
|
- id: id,
|
|
|
- pid: pid.id
|
|
|
- }];
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "updateSourceFileTypePid", params)
|
|
|
- .then((res) => {
|
|
|
- this.$message.success('移动成功');
|
|
|
- this.showActionDiv = false
|
|
|
- this.getData()
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
+ addMtl() {
|
|
|
+ let params = {
|
|
|
+ cInfo: this.cImgInfo[0],
|
|
|
+ t: this.choose,
|
|
|
+ cBy: this.userid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "addMtl", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message.success("上传素材成功");
|
|
|
+ this.selectMtl();
|
|
|
})
|
|
|
- .catch(() => {
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
});
|
|
|
},
|
|
|
- actionRename() {
|
|
|
- let type = this.actionType.split('-')
|
|
|
- if (type.length == 1) {
|
|
|
- this.renameInput = this.typeArray[type[0]].name
|
|
|
- } else {
|
|
|
- this.renameInput = this.typeArray[type[0]].child[type[1]].name
|
|
|
- }
|
|
|
- this.renameType = this.actionType
|
|
|
- if (this.pid != this.renameType) {
|
|
|
- this.checkType(this.renameType)
|
|
|
- }
|
|
|
- console.log(this.renameType);
|
|
|
- setTimeout(() => {
|
|
|
- this.$refs.renameInput[0].select();
|
|
|
- this.showActionDiv = false
|
|
|
- }, 500);
|
|
|
+ sMtl(type) {
|
|
|
+ this.choose = type;
|
|
|
+ this.selectMtl();
|
|
|
},
|
|
|
- rename() {
|
|
|
- if (!this.renameInput) {
|
|
|
- this.$message.error('请输入分类名字');
|
|
|
- return
|
|
|
- }
|
|
|
- let type = this.renameType.split('-')
|
|
|
- let id = ''
|
|
|
- if (type.length == 1) {
|
|
|
- id = this.typeArray[type[0]].id
|
|
|
- } else {
|
|
|
- id = this.typeArray[type[0]].child[type[1]].id
|
|
|
- }
|
|
|
- let params = [{
|
|
|
- id: id,
|
|
|
- name: encodeURIComponent(this.renameInput)
|
|
|
- }];
|
|
|
+ selectMtl() {
|
|
|
+ this.isLoading = true;
|
|
|
+ let params = {
|
|
|
+ t: parseInt(this.choose),
|
|
|
+ uid: this.userid,
|
|
|
+ page: this.page,
|
|
|
+ };
|
|
|
this.ajax
|
|
|
- .post(this.$store.state.api + "updateSourceFileName", params)
|
|
|
+ .get(this.$store.state.api + "selectMtl2", params)
|
|
|
.then((res) => {
|
|
|
- this.$message.success('修改成功');
|
|
|
- this.renameType = ''
|
|
|
- this.getData()
|
|
|
+ this.isLoading = false;
|
|
|
+ this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
|
|
|
+ this.chapInfo = res.data[0];
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
+ this.isLoading = false;
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
- actionDelete() {
|
|
|
- let type = this.actionType.split('-')
|
|
|
- let id = ''
|
|
|
- let msg = ''
|
|
|
- if (type.length == 1) {
|
|
|
- if (this.typeArray[type[0]].child.length) {
|
|
|
- msg = '删除此分类后，该分类下的所有子分类将全部删除，确定删除此分类吗？'
|
|
|
- } else {
|
|
|
- msg = '确定删除此分类吗？'
|
|
|
- }
|
|
|
- id = this.typeArray[type[0]].id
|
|
|
- } else {
|
|
|
- msg = '确定删除此分类吗？'
|
|
|
- id = this.typeArray[type[0]].child[type[1]].id
|
|
|
- }
|
|
|
+ deleteM(id) {
|
|
|
this
|
|
|
- .$confirm(msg, "提示", {
|
|
|
+ .$confirm("确定删除吗", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
- let params = [{
|
|
|
+ let params = {
|
|
|
id: id,
|
|
|
- }];
|
|
|
+ };
|
|
|
this.ajax
|
|
|
- .post(this.$store.state.api + "deleteSoureFileType", params)
|
|
|
+ .get(this.$store.state.api + "deleteM", params)
|
|
|
.then((res) => {
|
|
|
- this.$message.success('删除成功');
|
|
|
- this.showActionDiv = false
|
|
|
- this.getData()
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.selectMtl();
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
+ this.isLoading = false;
|
|
|
console.error(err);
|
|
|
});
|
|
|
})
|
|
|
.catch(() => {
|
|
|
+
|
|
|
});
|
|
|
- }
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- document.removeEventListener('click', this.handleClickOutside);
|
|
|
+
|
|
|
+ },
|
|
|
+ onPlayerPlay() { },
|
|
|
},
|
|
|
- mounted() {
|
|
|
- document.addEventListener('click', this.handleClickOutside);
|
|
|
- this.getData();
|
|
|
+ created() {
|
|
|
+ this.selectMtl();
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.l_box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #f0f2f5;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- padding: 20px;
|
|
|
+/* .student_button {
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 40px;
|
|
|
+ } */
|
|
|
+.student_head>>>.el-button--primary {
|
|
|
+ background-color: #2268bc;
|
|
|
}
|
|
|
|
|
|
-.l_type_box {
|
|
|
- width: 300px;
|
|
|
- height: 100%;
|
|
|
- background: #fff;
|
|
|
- border-radius: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.header {
|
|
|
- width: 100%;
|
|
|
- padding: 15px 15px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 1px solid #E7E7E7;
|
|
|
+.student_head {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.header>.title {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.header>.add {
|
|
|
+.three {
|
|
|
display: flex;
|
|
|
- cursor: pointer;
|
|
|
- align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 200px;
|
|
|
height: 30px;
|
|
|
- padding: 0 8px;
|
|
|
- background: rgb(0, 97, 255);
|
|
|
- color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 14px;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.header>.add::before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- margin-right: 7px;
|
|
|
- background-image: url('../../assets/icon/sourceFile/icon_add.png');
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.nav {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 62px);
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 15px;
|
|
|
- overflow: auto;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b {
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box {
|
|
|
- height: 44px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+.three>div {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box>.name {
|
|
|
- font-size: 16px;
|
|
|
- color: #000000e6;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box .active2 {
|
|
|
- background: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box .active2 .name {
|
|
|
- color: #3681FC !important;
|
|
|
+.choose {
|
|
|
+ border-bottom: 5px solid #3994fd;
|
|
|
}
|
|
|
|
|
|
-.l_type_box .active {
|
|
|
- background: #3681fc;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box .active1 {
|
|
|
- background: #3681fc !important;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box .active .name,
|
|
|
-.l_type_box .active1 .name {
|
|
|
- color: #fff !important;
|
|
|
+.student_table {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #f2f2f2;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box:hover {
|
|
|
- background: #e0eafb;
|
|
|
+.tup {
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: 120px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box:hover .more {
|
|
|
+.out_box:hover .deleteWord {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box>.icon {
|
|
|
- min-width: 16px;
|
|
|
- height: 16px;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 10px;
|
|
|
- /* background: #000; */
|
|
|
- transition: all 0.3s;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box>.no {
|
|
|
- background-image: url('../../assets/icon/sourceFile/icon_no.png');
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box.active>.no {
|
|
|
- background-image: url('../../assets/icon/sourceFile/icon_no_active.png');
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box>.more {
|
|
|
+.deleteWord {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ position: absolute;
|
|
|
+ right: -25px;
|
|
|
+ top: -10px;
|
|
|
cursor: pointer;
|
|
|
- margin: 0 0 0 auto;
|
|
|
display: none;
|
|
|
- background-image: url('../../assets/icon/sourceFile/icon_select.png');
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box>.haveL {
|
|
|
- transform: rotate(-90deg);
|
|
|
- background-image: url('../../assets/icon/sourceFile/icon_arrow.png');
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box.active2>.haveL {
|
|
|
- transform: rotate(-90deg);
|
|
|
- background-image: url('../../assets/icon/sourceFile/icon_arrow_active.png');
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_box.open>.haveL {
|
|
|
- transform: rotate(0deg);
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box {
|
|
|
- margin-top: 10px;
|
|
|
+.tup>img,
|
|
|
+.deleteWord>img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box+.nav_box {
|
|
|
- margin-top: 10px;
|
|
|
+.out_box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ width: 235px;
|
|
|
+ padding: 10px 0;
|
|
|
+ background: #fff;
|
|
|
+ margin: 0 20px 20px 0;
|
|
|
+ height: fit-content;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box {
|
|
|
- height: 44px;
|
|
|
- width: 100%;
|
|
|
+.bottom_box {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10px 0 5px 0;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.name {
|
|
|
- font-size: 16px;
|
|
|
- color: #000000e6;
|
|
|
+.bottom_box>div:nth-child(1) {
|
|
|
white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ width: 200px;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover {
|
|
|
- background: #e0eafb;
|
|
|
-}
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active:hover {
|
|
|
- background: #5E9AFC;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover .more {
|
|
|
- display: block;
|
|
|
+.uploadThing {
|
|
|
+ background: #2268bc;
|
|
|
+ width: 90px;
|
|
|
+ height: 35px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 35px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.icon {
|
|
|
- min-width: 16px;
|
|
|
- height: 16px;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 10px;
|
|
|
- transition: all 0.3s;
|
|
|
+.top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.more {
|
|
|
- margin: 0 0 0 auto;
|
|
|
- display: none;
|
|
|
- background-image: url('../../assets/icon/sourceFile/icon_select.png');
|
|
|
+.student_page {
|
|
|
+ margin-top: 30px;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active>.more {
|
|
|
- background-image: url('../../assets/icon/sourceFile/icon_select_active.png');
|
|
|
+.boxCss {
|
|
|
+ padding: 15px 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ min-height: 250px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-.add_box {
|
|
|
- height: 44px;
|
|
|
+.mask {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 20000;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 0 3px 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- cursor: pointer;
|
|
|
- background: #E1EDFD;
|
|
|
- margin-top: 10px;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
-.add_box>input {
|
|
|
- width: calc(100% - 16px);
|
|
|
- height: calc(100% - 6px);
|
|
|
- box-sizing: border-box;
|
|
|
- border: none;
|
|
|
- margin-left: 16px;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 0 12px;
|
|
|
- font-size: 16px;
|
|
|
- outline: none;
|
|
|
-}
|
|
|
-
|
|
|
-.renameInput {
|
|
|
- width: calc(100% - 16px);
|
|
|
- height: calc(100% - 6px);
|
|
|
- box-sizing: border-box;
|
|
|
- border: none;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 0 12px;
|
|
|
- font-size: 16px;
|
|
|
- outline: none;
|
|
|
-}
|
|
|
-
|
|
|
-.action-div {
|
|
|
- position: absolute;
|
|
|
- background: #ffffff;
|
|
|
+.progressBox {
|
|
|
+ width: 500px;
|
|
|
+ height: 180px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 6px 1px #bfbfbf;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
flex-direction: column;
|
|
|
- border-radius: 5px;
|
|
|
- /* overflow: hidden; */
|
|
|
- padding: 5px 0;
|
|
|
- box-shadow: 0 0 2px 0px #00000021;
|
|
|
-}
|
|
|
-
|
|
|
-.action-div>div {
|
|
|
- width: 115px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- cursor: pointer;
|
|
|
- padding: 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 14px;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.action-div>div:hover {
|
|
|
- background: #e0eafb;
|
|
|
}
|
|
|
|
|
|
-.action-div>.move::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- right: 10px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%) rotate(-90deg);
|
|
|
- background-image: url('../../assets/icon/sourceFile/icon_arrow.png');
|
|
|
-}
|
|
|
-
|
|
|
-.action-div>.move:hover .pid_box {
|
|
|
+.progressBox .lbox {
|
|
|
+ height: 100px;
|
|
|
+ font-size: 19px;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
-.pid_box {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- transform: translateX(100%);
|
|
|
- background: #ffffff;
|
|
|
- flex-direction: column;
|
|
|
- border-radius: 5px;
|
|
|
- /* overflow: hidden; */
|
|
|
- padding: 5px 0;
|
|
|
- box-shadow: 0 0 2px 0px #00000021;
|
|
|
- top: 0;
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
-.pid_box>div {
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- cursor: pointer;
|
|
|
- padding: 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 14px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-
|
|
|
-.pid_box>div:hover {
|
|
|
- background: #e0eafb;
|
|
|
+.progressBox .lbox img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-.l_file_box {
|
|
|
- width: calc(100% - 320px);
|
|
|
- margin-left: 20px;
|
|
|
- background: #fff;
|
|
|
- height: 100%;
|
|
|
- border-radius: 5px;
|
|
|
+.progressBox>>>.el-progress-bar__outer {
|
|
|
+ background-color: #d1dfff !important;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
