pbl-teacher-table/src/components/pages/classroomObservation/dialog/editBaseMessageDialog.vue

<template>
	<div>
		<el-dialog
			:center="true"
			:visible.sync="show"
			:close-on-click-modal="false"
      :modal="true"
			width="auto"
			height="auto"
      :append-to-body="true"
			class="editBaseMessageDialog"
		>
    <div class="box">
      <div class="b_head">
        <span>编辑基本信息</span>
        <img src="../../../../assets/icon/classroomObservation/close.svg" @click="close()">
      </div>
      <div class="b_main">
        <div class="m-m-form">
				<div class="m-m-formItem" style="width: clamp(50%, 50%, 50%)">
					<div class="m-m-fi-label">课堂名称</div>
					<div class="m-m-fi-input">
						<el-input
							v-model="data.courseName"
							placeholder="请输入课堂名称"
							@change="changeData()"
						></el-input>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(21%,21%,21%)">
					<div class="m-m-fi-label">授课老师</div>
					<div class="m-m-fi-input">
						<el-input
							v-model="data.teacherName"
							placeholder="请输入授课老师"
							@change="changeData()"
						></el-input>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(22%,22%,22%)"">
					<div class="m-m-fi-label">授课时间</div>
					<div class="m-m-fi-input" style="position: relative;">
						<el-date-picker
							v-model="data.time"
							type="datetime"
							format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss"
							style="width: 100%;"
							class="m_m_fi_inputDisabledIcon"
							prefix-icon="none"
							@change="changeData()"
							placeholder="请选择授课时间"
						>

						</el-date-picker>
						<i class="el-icon-date" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;"></i>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(24%,24%,24%)"">
					<div class="m-m-fi-label">授课年级</div>
					<div class="m-m-fi-input">
						<el-select
							style="width: 100%"
							v-model="data.grade"
							@change="changeData()"
							placeholder="请选择年级"
						>
							<el-option
								v-for="(item, index) in gradeList"
								:key="index"
								:value="item.value"
								:label="item.label"
							></el-option>
						</el-select>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(24.5%,24.5%,24.5%)">
					<div class="m-m-fi-label">授课科目</div>
					<div class="m-m-fi-input">
						<el-select
							style="width: 100%"
							v-model="data.subject"
							@change="changeData()"
							placeholder="请选择科目"
						>
							<el-option
								v-for="(item, index) in subjectList"
								:key="index"
								:value="item.value"
								:label="item.label"
							></el-option>
						</el-select>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(21%,21%,21%)"">
					<div class="m-m-fi-label">教材版本</div>
					<div class="m-m-fi-input">
						<el-input
							v-model="data.textbook"
							placeholder="请输入教材版本"
							@change="changeData()"
						></el-input>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(22%,22%,22%)"">
					<div class="m-m-fi-label">学生人数</div>
					<div class="m-m-fi-input">
						<el-input
							v-model.number="data.studentNum"
							placeholder="请输入学生人数"
							@change="changeData()"
						></el-input>
					</div>
				</div>
			</div>
			<div class="fileList">
				<div class="fl_img">
					<div class="imgTit">
						<span>课堂图片</span>
						<span>（建议图片比例16:9，最多上传3张）</span>
					</div>
					<div class="m-m-formImage" v-loading="uploadImageLoading">
								<div
									class="m-m-fi-imageItem"
									v-for="(value, key, index) in data.imageList"
									:key="index"
									v-if="(key == 'fileList1' || key == 'fileList2' || key == 'fileList3') && value.length >0"
									@click.stop="previewImg(value[0].url)"
									style="max-width:32%;"
								>
									<el-image
										class="itemUrl"
										:src="value[0].url"
										fit="cover"
										style="width: 100%;"
									></el-image>
									<span @click.stop="delImage(key)"></span>
									<!-- <img class="itemUrl" :src="value[0].url" alt="" /> -->
								</div>
								<!-- 图片区域 -->

							<div
								class="m-m-fi-imageItem"
								@click.stop="addImage2()"
								style="max-width:32%;"
								v-if="
									data.imageList.fileList1 &&
									data.imageList.fileList1.length +
                  data.imageList.fileList2.length +
                  data.imageList.fileList3.length <
										3
								"
							>
								<img
									src="../../../../assets/icon/classroomObservation/Union.svg"
									alt=""
								/>
								<div
									style="
										font-size: 12px;
										font-weight: 400;
										margin-top: 5px;
										color: rgba(0, 0, 0, 0.4);
									"
								>
									点击上传图片
								</div>
							</div>
							<!-- 图片区域 -->
						<!-- <div class="m-m-fi-btn" >添加课堂图片</div> -->
					</div>
				</div>
				<div class="fl_video">
					<div class="imgTit">
						<span>课堂视频</span>
						<span></span>
						<!-- <span>（建议视频比例16:9，最多上传1个）</span> -->
					</div>

					<div class="m-m-formImage" v-loading="uploadVideoLoading">

								<div
									class="m-m-fi-imageItem"
									style="max-width:100%;"
									v-if="!data.imageList.videoList.length==0"
									v-for="(item, index) in data.imageList.videoList?data.imageList.videoList:[]"
									:key="index"
									@click.stop="previewVideo(item.url)"
								>
								<!-- <div>{{ item }}</div> -->
									<el-image
										class="itemUrl"
										:src="require('../../../../assets/icon/classroomObservation/isVideo.png')"
										fit="cover"
									></el-image>
									<span @click.stop="delVideo('videoList')"></span>
								</div>
							<!-- <el-progress v-if="progressData.uploadVideo && !imageList.videoList.length" class="m_m_fi_progress" :percentage="progressData.value"></el-progress> -->
							<el-popover
  					  placement="top"
  					  width="180"
  					  trigger="hover"
							style="width: 140px"
							v-if="(((data.imageList.videoList&&data.imageList.videoList.length<=0) || !data.imageList.videoList) && !progressData.uploadVideo)"
  					>
						<div class="m_m_box">
							<el-button-group style="width: 100%;display: flex;justify-content: center;">
							  <el-button size="small" @click="addVideo()">本地上传</el-button>
								<el-button size="small" @click="resourceUploadVideo()">资源库上传</el-button>
							</el-button-group>
						</div>
							<div
							  slot="reference"
								class="m-m-fi-imageItem"
								@click.stop="addVideo()"
								style="max-width:100%;"
								v-if="(((data.imageList.videoList&&data.imageList.videoList.length<=0) || !data.imageList.videoList) && !progressData.uploadVideo)"
							>
								<img
									src="../../../../assets/icon/classroomObservation/Union.svg"
									alt=""
								/>
								<div
									style="
										font-size: 12px;
										font-weight: 400;
										margin-top: 5px;
										color: rgba(0, 0, 0, 0.4);
									"
								>
									点击上传视频
								</div>
							</div>
						</el-popover>

							<div
								class="m-m-fi-imageItem"
								style="max-width:60%;border-radius: 8px;overflow: hidden;"
								v-if="progressData.uploadVideo && !data.imageList.videoList.length""
							>
							<el-image
								class="itemUrl"
								:src="require('../../../../assets/icon/classroomObservation/videoFile.svg')"
								fit="cover"
							></el-image>
							<div class="m_m_fi_videBtn">
								<img v-if="!progressData.stop" :src="require('../../../../assets/icon/classroomObservation/stopIcon.png')" @click.stop="stopUploadVideo()">
								<img v-if="progressData.stop" :src="require('../../../../assets/icon/classroomObservation/startIcon.png')"  @click.stop="startUploadVideo()">
								<img :src="require('../../../../assets/icon/classroomObservation/delFile.svg')" @click.stop="delUploadVideo()">
							</div>
							<div class="m_m_fi_progress">
									<div>{{ progressData.value }}%</div>
									<span v-if="!progressData.stop">上传中...</span>
									<span v-else>已暂停</span>
									<div class="m_m_fi_p_bar">
										<div :style="{width:progressData.value+'%'}"></div>
									</div>
							</div>
						</div>
						<!-- <div class="m-m-fi-btn" >添加课堂图片</div> -->
					</div>
				</div>
				<!-- <div class="nephogramArea"> -->
				<div class="fl_nephogram">
					<div class="imgTit">
						<span>词云图</span>
						<span></span>
					</div>
					<div class="m-m-formImage">
								<div
									class="m-m-fi-nephogramItem"
									style="width:100%;"
									 v-loading="uploadNephogramLoading"
									v-if="(data.imageList.NephogramList&&data.imageList.NephogramList.length>0)"
								>
									<wordcloudEChart :data="data.imageList.NephogramList[0]"/>
									<span @click.stop="delNephogram('NephogramList')"></span>
								</div>
							<div
								class="m-m-fi-nephogramItem"
								 v-loading="uploadNephogramLoading"
								@click.stop="addNephogram()"
								style="width:60%;max-height: 100px;"
								v-if="((data.imageList.NephogramList&&data.imageList.NephogramList.length<=0) || !data.imageList.NephogramList)"
							>
								<img
									:src="require('../../../../assets/icon/classroomObservation/bmRefresh.png')"
									alt=""
									style="width:20px"
								/>
								<div
									style="
										font-size: 12px;
										font-weight: 400;
										margin-top: 5px;
										color: rgba(0, 0, 0, 0.4);
									"
								>
									生成词云图
								</div>
							</div>
					</div>
				<!-- </div> -->
			</div>

			</div>
      </div>
      <div class="b_bottom">
        <el-button size="small" @click="close()">取消</el-button>
        <el-button size="small" type="primary" @click="submit">确定修改</el-button>
      </div>
      <previewVideoDialog ref="previewVideoDialogRef" v-if="show"/>
		<uploadFile v-if="progressData.uploadVideo && show" ref="uploadFileRef" @progressUpdate="videoProgressUpdate" @delUpload="videoDelUpload" @success="updateVideoSuccess" @startUpload="videoStartUpload"/>
		<resourceLibraryDialog v-if="show" ref="resourceLibraryDialogRef" @addFile="resourceLibraryDialogAddFile"/>
    </div>
		</el-dialog>

	</div>
</template>

<script>
import previewVideoDialog from '../components/previewVideoDialog.vue';
import wordcloudEChart from '../components/wordcloudEChart.vue'
import uploadFile from '../components/uploadFile.vue';
import resourceLibraryDialog from '../components/resourceLibraryDialog.vue';
export default {
  components:{
    previewVideoDialog,
    wordcloudEChart,
    uploadFile,
    resourceLibraryDialog
  },
	data() {
		return {
			loading: false,
			show: false,
      userId: this.$route.query["userid"],
      uploadVideoLoading:false,
      uploadImageLoading:false,
      uploadNephogramLoading:false,
      editId:null,
      data: {
				courseName: "",
				teacherName: "",
        time:"",
				grade: "",
				subject: "",
        textbook:"",
				studentNum: 0,
        imageList:{
        fileList1: [],
        fileList2: [],
        fileList3: [],
        NephogramList: [],
        videoList: []
      },
			},
      gradeList: [
				{ value: "小学一年级", label: "小学一年级" },
				{ value: "小学二年级", label: "小学二年级" },
				{ value: "小学三年级", label: "小学三年级" },
				{ value: "小学四年级", label: "小学四年级" },
				{ value: "小学五年级", label: "小学五年级" },
				{ value: "小学六年级", label: "小学六年级" },
				{ value: "初中一年级", label: "初中一年级" },
				{ value: "初中二年级", label: "初中二年级" },
				{ value: "初中三年级", label: "初中三年级" },
				{ value: "高中一年级", label: "高中一年级" },
				{ value: "高中二年级", label: "高中二年级" },
				{ value: "高中三年级", label: "高中三年级" },
			],
			subjectList: [
				{ value: "语文", label: "语文" },
				{ value: "数学", label: "数学" },
				{ value: "英语", label: "英语" },
				{ value: "科学", label: "科学" },
				{ value: "信息技术", label: "信息技术" },
				{ value: "心理", label: "心理" },
				{ value: "物理", label: "物理" },
				{ value: "化学", label: "化学" },
				{ value: "生物", label: "生物" },
				{ value: "历史", label: "历史" },
				{ value: "地理", label: "地理" },
				{ value: "通用技术", label: "通用技术" },
				{ value: "政治", label: "政治" },
				{ value: "STEM", label: "STEM" },
				{ value: "美术", label: "美术" },
				{ value: "音乐", label: "音乐" },
				{ value: "其他", label: "其他" },
			],

			progressData:{
				stop:false,
				uploadVideo:false,
				value:0,
				status:"",
				key:"",
				uploadid:"",
			},
			uploadFileObj:null,
			loading:false,
		};
	},
	methods: {
		open({editId,message}) {
      this.editId = editId;
      this.data = JSON.parse(JSON.stringify(message));
      this.loading = false;
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.loading = false;
      this.data = {
        courseName: "",
				teacherName: "",
        time:"",
				grade: "",
				subject: "",
        textbook:"",
				studentNum: 0,
        imageList:{
        fileList1: [],
        fileList2: [],
        fileList3: [],
        NephogramList: [],
        videoList: []
      }
    }
    this.progressData = {
      stop:false,
				uploadVideo:false,
				value:0,
				status:"",
				key:"",
				uploadid:"",
    }
      this.editId = null;
		},
    submit(){
      if(!this.data.courseName.trim())return this.$message.error("请输入胡课堂名称");
      this.$emit("success",{editId:this.editId,message:JSON.parse(JSON.stringify(this.data))})
    },
    changeData(){
      // this.$message.info("更新数据")
    },
    //本地上传
    localUploadVideo(){
      this.$message.info("本地上传")
    },
    //资源库上传
    resourceUploadVideo(){
      this.$refs.resourceLibraryDialogRef.open();
    },
    //添加视频
    addVideo(){
      let input = document.createElement("input");
			input.type = "file";
			input.accept = "video/*";
			input.click();
			input.onchange = () => {
				this.progressData.uploadVideo = true;
				// this.uploadVideoLoading = true;
				this.progressData.stop = false;
				this.progressData.status = "";
				this.progressData.value = 0;
				let file = input.files[0];
				this.uploadFileObj = file;
				this.$nextTick(()=>{
					this.$refs.uploadFileRef.awsupload({
					file:file,
					folderName:this.editId
				})
				})
			}
    },
    //删除词云图
    delNephogram(){
      this.$message.info("删除词云图")
    },
    //生成词云图
    addNephogram(){
      // this.$message.info("生成词云图")
    },
    delVideo(key){
			this.$confirm("确定删除该视频吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				this.data.imageList.videoList = [];
        this.$message.success("删除成功")
			}).catch(e=>{
				console.log("取消删除")
			});
		},
    //资源库添加文件
    resourceLibraryDialogAddFile(file){
      let _file = file[0];
			if(!_file.file.endsWith(".mp4")){
				this.$message.error("请选择mp4视频文件")
				return;
			}
      console.log(_file)
      this.$message.info("上传文件")
      this.data.imageList.videoList = [{
        name: _file.name,
				status: "success",
				uid: _file.id,
				url: _file.file,
      }]
			this.$message.success("上传成功")
    },
    videoProgressUpdate(data){
			if(data.status=="processing"){
				this.progressData.value = data.percent;
				this.progressData.status = data.status;
			}else if(data.status=="fail"){
				this.progressData.value = data.percent;
				this.progressData.status = data.status;
				this.$message.error('上传发生错误，请点击继续上传')
				this.$refs.uploadFileRef.stopUpload();
			}else if(data.status=="success"){
				this.progressData.value = data.percent;
				this.progressData.status = data.status;
				this.$refs.uploadFileRef.stopUpload();
			}else if(data.status=="error"){
				this.progressData.stop = true;
				this.progressData.status = data.status;
				this.$refs.uploadFileRef.stopUpload();
				this.$message.error('上传发生错误，请重新上传')
			}
			console.log(this.progressData)
		},
		videoDelUpload(res){
			this.progressData.uploadVideo = false;
			this.progressData.uploadid = "";
			this.progressData.key = "";
			this.progressData.status = "";
			this.progressData.stop = false;
			this.progressData.value = 0;
			this.$message.success("已删除视频");
		},
    videoStartUpload({key,uploadid}){
			this.progressData.uploadid = uploadid;
			this.progressData.key = key;
			this.progressData.status = "start"
		},
		updateVideoSuccess(res){
			if(!res.data)return;
			this.progressData.uploadVideo = false;
			this.progressData.stop = false;
			this.progressData.uploadid = "";
			this.progressData.status = "";
			this.progressData.value = 0;
			let {data} = res;
			this.$refs.uploadFileRef.file = null;
      console.log(data)
      this.data.imageList.videoList = [{
        name: data.Key,
					status: "success",
					uid: this.userId,
					url: data.Location,
      }]
      this.$message.success("上传成功");
		},
    //上传课堂图片
    addImage2(){
			let input = document.createElement("input");
			input.type = "file";
			input.accept = "image/*";
			input.multiple = true;
			input.click();


			input.onchange = () => {
				this.uploadImageLoading = true;
        let promise =[];
        for(let i=0;i<input.files.length;i++){
          promise.push(this.uploadFile(input.files[i]));
        }
        Promise.all(promise).then(res=>{
          this.saveImage2(res)
          // this.$emit("saveImage2",res);
          this.uploadImageLoading = false;
        })
			};
    },
    saveImage2(dataList){
      for(let i=0;i<dataList.length;i++){
        if (this.data.imageList.fileList1.length == 0) {
          this.data.imageList.fileList1.push(dataList[i]);
        } else if (this.data.imageList.fileList2.length == 0) {
          this.data.imageList.fileList2.push(dataList[i]);
        } else if (this.data.imageList.fileList3.length == 0) {
          this.data.imageList.fileList3.push(dataList[i]);
        } else {
          this.$message.error("最多只能上传3张图片");
          break;
        }
      }
    },
    delImage(key){
      this.$confirm("确定删除该图片吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
        this.data.imageList[key] = [];
				// this.$emit("delImage", key);
			});
    },
    uploadFile(file){
      return new Promise(resolve=>{
        var credentials = {
					accessKeyId: "AKIATLPEDU37QV5CHLMH",
					secretAccessKey: "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",
				}; //秘钥形式的登录上传
				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) {
					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) + '%');
						})
						.send(function (err, data) {
							if (err) {
								resolve(0)
							} else {
                resolve({
									name: data.key,
									status: "success",
									uid: "1",
									url: data.Location,
								})
							}
						});
				}
      })
    },
    previewVideo(url){
      this.$refs.previewVideoDialogRef.open(url)
    },
	},
};
</script>

<style scoped>
.editBaseMessageDialog >>> .el-dialog {
  width: 1200px !important;
	border-radius: 8px;
	background-color: #fff;
	overflow: hidden;
  padding: 0;
}

.editBaseMessageDialog >>> .el-dialog__body {
  width: 1200px !important;
	height: auto;
	flex-shrink: 0;
	box-sizing: border-box;
	overflow: auto;
  padding: 0;
}

.editBaseMessageDialog >>> .el-dialog__header {
	display: none !important;
}

.box{
  width:1200px;
  height:500px;
  background:#FAFAFA;
  border-radius:15px;
  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
}

.b_head{
  width:100%;
  height:50px;
  border-radius:15px 15px 0 0;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing: border-box;
  padding: 0 20px;
}

.b_head>span{
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.b_head>img{
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.b_main{
  width:100%;
  height:calc(100% - 50px - 70px);
  background:#FAFAFA;
	padding: 20px 20px 0 20px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.m-m-form {
	display: flex;
	flex-wrap: wrap;
	width: 100%;

}

.m-m-formItem {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: left;
	margin-top: 10px;
	margin-right: 1.5%;
	/* margin-bottom: 10px; */
}

.m-m-fi-input {
	max-width: 100%;
}

.m_m_fi_inputDisabledIcon>>> .el-input__prefix{
	display: none;
}

.m_m_fi_inputDisabledIcon>>>.el-input__inner{
	padding-left: 15px;
}

.m-m-fi-label {
	font-size: 16px;
	display: flex;
	padding-bottom: 5px;
	/* justify-content: center; */
	/* align-items: center; */
	box-sizing: border-box;
	/* padding: 0 10px; */
	text-wrap: nowrap;
	min-width: fit-content;
}

.m-m-formImage {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-start;
	/* flex-wrap: wrap; */
}

.m-m-fi-imageList {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
}

.m-m-fi-imageItem {
	width: auto;
	height: auto;
	background-color: rgba(238, 238, 238, 1);
	width: 140px;
	height: 100px;
	min-width: 110px !important;
	margin-right: 1%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	font-size: 14px;
	cursor: pointer;
	position: relative;
	margin-bottom: 10px;
	border-radius: 4px;
	border: dashed 1px #DCDCDC;
	overflow: hidden;
}
.m-m-fi-imageItem > .itemUrl {
	width: 100%;
	height: 100%;
}

.m-m-fi-imageItem > span {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	background-image: url("../../../../assets/icon/classroomObservation/delFile.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
	z-index: 9999;
	/* display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 2px 10px;
	color: #666666;
	font-size: 18px;
	background-color: #FFBBBB;
	cursor: pointer;
	border-radius: 100%;
	display: none; */
}

.m-m-fi-imageItem:hover > span {
	display: flex;
}

/* .m-m-fi-i-icon {
	width: 20px;
	height: 20px;
	background: url("../../../../assets/icon/classroomObservation/file.png")
		no-repeat;
	background-size: 100% 100%;
	margin-right: 5px;
} */

.m-m-fi-btn {
	width: auto;
	height: 35px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 18px;
	font-size: 14px;
	border: solid 1px #c5c5c5;
	background-color: white;
	cursor: pointer;
	padding: 0 10px;
}

.fileList{
	width: 100%;
	position: relative;
	display: flex;
}

.fl_img{
	width: 50%;
	height: auto;
}

.fl_video{
	width: 21.8%;
	margin-left: 1.6%;
	height: auto;

}

.nephogramArea{
	width: 20%;
	height: auto;
}

.fl_nephogram{
	width: 20%;
	/* margin-left: 1.5%; */
	height: auto;
	margin-left: 1%;
	/* margin-top: -2%; */
}


.m_m_fi_progress{
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* 加载 */
	/* cursor:wait !important; */
	background-color: #00000099;
}

.m_m_fi_progress>div:nth-child(1){
	font-size: 20px;
	color: white;
}

.m_m_fi_progress>span:nth-child(2){
	font-size: 16px;
	color: #FFFFFF8C;
}

.m_m_fi_p_bar{
	width: 100%;
	height: 5px;
	position: absolute;
	bottom: 0;
	background-color: #D8E3F7;
}

.m_m_fi_p_bar>div{
	background-color: #3975CE;
	max-width: 100%;
	height: 100%;
}

.m-m-fi-nephogramItem{
	width: 140px;
	height: 100px;
	background-color: rgba(238, 238, 238, 1);
	min-width: 140px;
	min-height: 100px;
	margin-right: 1%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	font-size: 14px;
	cursor: pointer;
	position: relative;
	margin-bottom: 10px;
	border-radius: 4px;
	border: dashed 1px #DCDCDC;
	overflow: hidden;

}
.m-m-fi-nephogramItem> .itemUrl {
	width: 100%;
	height: 100%;
}

.m-m-fi-nephogramItem > span {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	background-image: url("../../../../assets/icon/classroomObservation/delFile.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
	z-index: 99999;
	/* display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 2px 10px;
	color: #666666;
	font-size: 18px;
	background-color: #FFBBBB;
	cursor: pointer;
	border-radius: 100%;
	display: none; */
}

.m-m-fi-nephogramItem:hover > span {
	display: flex;
}

.m_m_fi_videBtn{
	position: absolute;
	right: 4px;
	top: 4px;
	width:auto;
	height: 20px;
	background-size: 100% 100%;
	/* display: none; */
	z-index: 99999;
	display: flex;
}

.m_m_fi_videBtn>img{
	width: 20px;
	height: 20px;
	margin-left:10px;
	cursor: pointer;
}

.imgTit {
	height: 40px;
	line-height: 40px;
}
.imgTit :first-child {
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	text-align: right;
}
.imgTit :last-child {
	font-family: PingFang SC;
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	color: rgba(0, 0, 0, 0.4);
}

.b_bottom{
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0 20px;
}
</style>