点击富文本图片放大

src/components/main/opendetail.vue

@@ -1,259 +1,334 @@
 <template>
-    <div>
-        <el-dialog
-            v-model="dialogVisible"
-            :before-close="handleClose"
-            fullscreen
-            :show-close="false"
-            v-loading="pageloading"
-        >
-            <template #header>
-               <div class="topH">
+	<div>
+		<el-dialog
+			v-model="dialogVisible"
+			:before-close="handleClose"
+			fullscreen
+			:show-close="false"
+			v-loading="pageloading"
+		>
+			<template #header>
+				<div class="topH">
 					<div class="backA"></div>
 					<div class="dialog-header">
 						{{ Tips }}
 					</div>
 					<div class="backA">
-						<div class="bABtn" style="flex-shrink: 0;" @click="openCourseDetail">进入课程</div>
-						<div @click="handleCloseL" style="cursor: pointer;display: flex;align-items: center;gap: 5px;">
-                            <img src="../../assets/icon/backk.svg" alt="">
-							<span style="flex-shrink: 0;">返回</span>
+						<div class="bABtn" style="flex-shrink: 0" @click="openCourseDetail">
+							进入课程
+						</div>
+						<div
+							@click="handleCloseL"
+							style="
+								cursor: pointer;
+								display: flex;
+								align-items: center;
+								gap: 5px;
+							"
+						>
+							<img src="../../assets/icon/backk.svg" alt="" />
+							<span style="flex-shrink: 0">返回</span>
 						</div>
 					</div>
 				</div>
-            </template>
-            <div class="fileArea2" @click="openDra">
-                <!-- <img src="../../assets/icon/filemr.svg" alt=""> -->
-            </div>
-            <el-drawer
-                v-model="drawer"
-                direction="rtl"
-                size="500px"
-                :close-on-click-modal="false"
-                :show-close="false"
-                :before-close="handleClose"
-            >
-                <template #header>
-                    <div class="closeBtn">
-                        <div style="display: flex;align-items: center;gap: 10px;">
-                            <img src="../../assets/icon/tishi.svg" alt="">
-                            <span>使用说明</span>
-                        </div>
-                        <div class="fileArea" @click="drawer = false"></div>
-                    </div>
-                </template>
-                <template #default>
-                    <div class="draCon">
-                        <div class="dratit">
-                            <div class="tit" :class="[drawertit == 1 ? 'tit2':'']" @click="drawertit = 1">文件({{ inst.file && inst.file.length ? inst.file.length : 0 }})</div>
-                            <div class="tit" :class="[drawertit == 0 ? 'tit2':'']" @click="drawertit = 0">文本</div>
-                        </div>
-                        <div class="draconL" v-if="drawertit == 0">
-                             <div v-html="inst.content"></div>
-                        </div>
-                        <div class="draCon" v-if="drawertit == 1">
-                            <div class="pdflist" v-if="inst.file && inst.file.length">
-                                <div v-for="item in inst.file" :key="item.id">
-                                    <div @click="cutPdf(item.url)" class="pdfCS" :class="[pdfUrl == item.url? 'pdfback' : '']">
-                                        <div class="pdfCSTit">{{ item.name }}</div>
-                                        <img style="flex-shrink: 0;" src="../../assets/icon/xiazai.png" alt="" @click.stop="downloadPdf(item)">
-                                        <!-- @click.stop="downloadPdf(item.url,item.name)" -->
-                                    </div>
-                                </div>
-                            </div>
-                            <div style="flex: 1;" v-if="inst.file && inst.file.length">
-                                <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe>
-                            </div>
-                        </div>
-                    </div>
-                   
-
-                </template>
-            </el-drawer>
-            <!-- <div class="courseL" @click="openCourseDetail">
+			</template>
+			<div class="fileArea2" @click="openDra">
+				<!-- <img src="../../assets/icon/filemr.svg" alt=""> -->
+			</div>
+			<el-drawer
+				v-model="drawer"
+				direction="rtl"
+				size="500px"
+				:close-on-click-modal="false"
+				:show-close="false"
+				:before-close="handleClose"
+			>
+				<template #header>
+					<div class="closeBtn">
+						<div style="display: flex; align-items: center; gap: 10px">
+							<img src="../../assets/icon/tishi.svg" alt="" />
+							<span>使用说明</span>
+						</div>
+						<div class="fileArea" @click="drawer = false"></div>
+					</div>
+				</template>
+				<template #default>
+					<div class="draCon">
+						<div class="dratit">
+							<div
+								class="tit"
+								:class="[drawertit == 1 ? 'tit2' : '']"
+								@click="drawertit = 1"
+							>
+								文件({{ inst.file && inst.file.length ? inst.file.length : 0 }})
+							</div>
+							<div
+								class="tit"
+								:class="[drawertit == 0 ? 'tit2' : '']"
+								@click="drawertit = 0"
+							>
+								文本
+							</div>
+						</div>
+						<div class="draconL" v-if="drawertit == 0">
+							<div v-html="inst.content" @click="showPreviewImg"></div>
+						</div>
+						<div class="draCon" v-if="drawertit == 1">
+							<div class="pdflist" v-if="inst.file && inst.file.length">
+								<div v-for="item in inst.file" :key="item.id">
+									<div
+										@click="cutPdf(item.url)"
+										class="pdfCS"
+										:class="[pdfUrl == item.url ? 'pdfback' : '']"
+									>
+										<div class="pdfCSTit">{{ item.name }}</div>
+										<img
+											style="flex-shrink: 0"
+											src="../../assets/icon/xiazai.png"
+											alt=""
+											@click.stop="downloadPdf(item)"
+										/>
+										<!-- @click.stop="downloadPdf(item.url,item.name)" -->
+									</div>
+								</div>
+							</div>
+							<div style="flex: 1" v-if="inst.file && inst.file.length">
+								<iframe
+									:src="pdfUrl"
+									width="100%"
+									height="100%"
+									frameborder="0"
+								></iframe>
+							</div>
+						</div>
+					</div>
+				</template>
+			</el-drawer>
+			<!-- <div class="courseL" @click="openCourseDetail">
                 <span>点击进入对应课程</span>
                 <img :src="dian" alt="">
             </div> -->
-            <iframe 
-                allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
-                ref="iframeRef1" 
-                :src="iframeRef1Url" 
-                style="width: 100%;height: 100%;"
-                frameborder="0">
-            </iframe>
-        </el-dialog>
+			<iframe
+				allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
+				ref="iframeRef1"
+				:src="iframeRef1Url"
+				style="width: 100%; height: 100%"
+				frameborder="0"
+			>
+			</iframe>
+		</el-dialog>
+	</div>
+    <!-- 富文本图片放大 -->
+    <div class="imgDolg" v-show="imgPreview.show" @click.stop="imgPreview.show = false">
+      <i class="el-icon-close" id="imgDolgClose" @click.stop="imgPreview.show = false"></i>
+      <img @click.stop="imgPreview.show = true" :src="imgPreview.img" />
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 import "../../common/aws-sdk-2.235.1.min.js";
 
-import { userInfoStore } from '../../stores/counter'
-import { defineExpose } from 'vue'
-const user = userInfoStore()
-const iframeRef1Url = ref('')
-const cid = ref('')
-const dialogVisible = ref(false)
-const Tips = ref('')
-const drawer = ref(false)
-const drawertit = ref('1')
-const inst = ref('')
-const pdfUrl = ref('')
-const pageloading = ref(false)
+import { userInfoStore } from "../../stores/counter";
+import { defineExpose } from "vue";
+const user = userInfoStore();
+const iframeRef1Url = ref("");
+const cid = ref("");
+const dialogVisible = ref(false);
+const Tips = ref("");
+const drawer = ref(false);
+const drawertit = ref("1");
+const inst = ref("");
+const pdfUrl = ref("");
+const pageloading = ref(false);
+const imgPreview = ref({
+	img: "",
+	show: false,
+});
 // onMounted(() => {
 //     requestUser()
 // })
-const downloadPdf =(f) =>{
-    console.log('f',f);
+const showPreviewImg = (e) => {
+
+	if (e.target.nodeName === "IMG") {
+		imgPreview.value.img = e.target.src;
+		imgPreview.value.show = true;
+	}
+    console.log('imgPreview',imgPreview.value);
     
-      var credentials = {
-        accessKeyId: "AKIATLPEDU37QV5CHLMH",
-        secretAccessKey: "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"
-      }; //秘钥形式的登录上传
-      window.AWS.config.update(credentials);
-      window.AWS.config.region = "cn-northwest-1"; //设置区域
-      let url2 = f.url;
-      let _url2 = "";
-      if (
-        url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
-      ) {
-        _url2 = url2.split(
-          "https://view.officeapps.live.com/op/view.aspx?src="
-        )[1];
-      } else {
-        _url2 = url2;
-      }
+};
+const downloadPdf = (f) => {
+	console.log("f", f);
 
-      var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
-      let name = decodeURIComponent(
-        _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
-      );
-      var params = {
-        Bucket: "ccrb",
-        Key: name
-      };
-      s3.getObject(params, function(err, data) {
-        if (err) console.log(err, err.stack);
-        // an error occurred
-        else {
-          let url = window.URL.createObjectURL(new Blob([data.Body]));
-          let a = document.createElement("a");
-          a.name = f.name;
-          a.href = url;
-          a.download = f.name;
-          a.click();
-          console.log(data);
-        } // sxuccessful response
-      });
-    }
+	var credentials = {
+		accessKeyId: "AKIATLPEDU37QV5CHLMH",
+		secretAccessKey: "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",
+	}; //秘钥形式的登录上传
+	window.AWS.config.update(credentials);
+	window.AWS.config.region = "cn-northwest-1"; //设置区域
+	let url2 = f.url;
+	let _url2 = "";
+	if (
+		url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+	) {
+		_url2 = url2.split("https://view.officeapps.live.com/op/view.aspx?src=")[1];
+	} else {
+		_url2 = url2;
+	}
 
+	var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+	let name = decodeURIComponent(
+		_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
+	);
+	var params = {
+		Bucket: "ccrb",
+		Key: name,
+	};
+	s3.getObject(params, function (err, data) {
+		if (err) console.log(err, err.stack);
+		// an error occurred
+		else {
+			let url = window.URL.createObjectURL(new Blob([data.Body]));
+			let a = document.createElement("a");
+			a.name = f.name;
+			a.href = url;
+			a.download = f.name;
+			a.click();
+			console.log(data);
+		} // sxuccessful response
+	});
+};
 
 const handleClose = (done) => {
-    done()
-}
+	done();
+};
 
 const handleCloseL = () => {
-    dialogVisible.value = false
-    iframeRef1Url.value = ''
-}
-const cutPdf = (val) =>{
-    pdfUrl.value = val
-}
-const gotoPage = (val)=>{
-    pageloading.value = true
-    dialogVisible.value = true
-    console.log('val',val);
-    inst.value = ''
-    drawertit.value = '1'
-	iframeRef1Url.value = val.link
-	cid.value = val.courselink
-    console.log('inst.value',inst.value);
-    if (val.inst) {
-        inst.value = JSON.parse(val.inst)
-        console.log('inst',{...inst.value});
-        if ({...inst.value}.file.length) {
-            pdfUrl.value = {...inst.value}.file[0].url
-        }
-    }
-	dialogVisible.value = true
-	Tips.value = val.name
-    pageloading.value = false
-}
+	dialogVisible.value = false;
+	iframeRef1Url.value = "";
+};
+const cutPdf = (val) => {
+	pdfUrl.value = val;
+};
+const gotoPage = (val) => {
+	pageloading.value = true;
+	dialogVisible.value = true;
+	console.log("val", val);
+	inst.value = "";
+	drawertit.value = "1";
+	iframeRef1Url.value = val.link;
+	cid.value = val.courselink;
+	console.log("inst.value", inst.value);
+	if (val.inst) {
+		inst.value = JSON.parse(val.inst);
+		// console.log("inst", { ...inst.value });
+		if ({ ...inst.value }.file.length) {
+			pdfUrl.value = { ...inst.value }.file[0].url;
+		}
+	}
+	dialogVisible.value = true;
+	Tips.value = val.name;
+	pageloading.value = false;
+};
 defineExpose({
-  gotoPage
-})
-const openDra = () =>{
-    drawer.value = true
-}
+	gotoPage,
+});
+const openDra = () => {
+	drawer.value = true;
+};
 
 const openCourseDetail = () => {
-	let id = cid.value
-	console.log(user.user)
+	let id = cid.value;
+	console.log(user.user);
 	// 会返回复制得课程
-	top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/getcopyCourseByUseridSz", [id, user.user.userid], function (res) {
-		console.log(res)
-		if (res.value[0].length > 0) {
-		// let isSave = res.value[0].filter(x => {
-		//   return x.courseId == id
-		// })
-		//这个是打开指定的课程接口
-		top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 2, user.user.type);
-		} else {
-			updateCourseId(id, "studyDetail")
-		}
-	}, [], { "type": "POST", "withCredentials": true });
-}
+	top.U.A.Request(
+		"https://pbl.cocorobo.cn/api/pbl/getcopyCourseByUseridSz",
+		[id, user.user.userid],
+		function (res) {
+			console.log(res);
+			if (res.value[0].length > 0) {
+				// let isSave = res.value[0].filter(x => {
+				//   return x.courseId == id
+				// })
+				//这个是打开指定的课程接口
+				top.U.MD.D.I.openInApplication(
+					"studyDetail",
+					res.value[0][0].courseId,
+					2,
+					user.user.type
+				);
+			} else {
+				updateCourseId(id, "studyDetail");
+			}
+		},
+		[],
+		{ type: "POST", withCredentials: true }
+	);
+};
 const updateCourseId = (id, type) => {
-  top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/copyCourseSz", [id, user.user.userid], function (res) {
-    console.log(res)
-    if (res.value[0][0].courseId != "") {
-      if (type == "openCourseNewUpdate") {
-        top.U.MD.D.I.openInApplication("openCourseNewUpdate", res.value[0][0].courseId)
-      } else {
-        top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 3, user.user.type);
-      }
-    }
-  }, [], { "type": "POST", "withCredentials": true });
-}
+	top.U.A.Request(
+		"https://pbl.cocorobo.cn/api/pbl/copyCourseSz",
+		[id, user.user.userid],
+		function (res) {
+			console.log(res);
+			if (res.value[0][0].courseId != "") {
+				if (type == "openCourseNewUpdate") {
+					top.U.MD.D.I.openInApplication(
+						"openCourseNewUpdate",
+						res.value[0][0].courseId
+					);
+				} else {
+					top.U.MD.D.I.openInApplication(
+						"studyDetail",
+						res.value[0][0].courseId,
+						3,
+						user.user.type
+					);
+				}
+			}
+		},
+		[],
+		{ type: "POST", withCredentials: true }
+	);
+};
 </script>
 
 <style lang="scss" scoped>
-.alexp{
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    .areaL{
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-    }
-    .tit{
-        font-size: 16px;
-        color: #000;
-        font-weight: 600;
-    }
-    .con{
-        display: grid;
-        grid-template-columns: repeat(6, 1fr);
-        // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 0px;
-        .conL{
-            flex: 1;
-            box-sizing: border-box;
-            // background: #fff;
-            // border-radius: 10px;
-            display: flex;
-            cursor: pointer;
-            flex-direction: column;
-            justify-content: space-between;
-            img{
-                width: 100%;
-                object-fit: cover;
-                cursor: pointer;
-            }
-        }
-    }
+.alexp {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	.areaL {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+	}
+	.tit {
+		font-size: 16px;
+		color: #000;
+		font-weight: 600;
+	}
+	.con {
+		display: grid;
+		grid-template-columns: repeat(6, 1fr);
+		// grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 0px;
+		.conL {
+			flex: 1;
+			box-sizing: border-box;
+			// background: #fff;
+			// border-radius: 10px;
+			display: flex;
+			cursor: pointer;
+			flex-direction: column;
+			justify-content: space-between;
+			img {
+				width: 100%;
+				object-fit: cover;
+				cursor: pointer;
+			}
+		}
+	}
 }
 .aiex {
 	display: grid;
@@ -272,90 +347,92 @@ const updateCourseId = (id, type) => {
 		background: #fff;
 		img {
 			height: 170px;
-            width: 100%;
-            object-fit: cover;
+			width: 100%;
+			object-fit: cover;
 			border-radius: 5px;
 		}
-		.tit{
+		.tit {
 			margin-top: 16px;
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
-            font-weight: normal;
-            color: #555555;
-            font-size: 14px;
+			font-weight: normal;
+			color: #555555;
+			font-size: 14px;
 		}
 	}
 }
-:deep(.el-dialog__body){
+:deep(.el-dialog__body) {
 	width: 100% !important;
 	height: calc(100% - 65px);
 	padding: 0 !important;
 	position: relative;
 }
-.closeBtn{
-    display: flex;justify-content: space-between;align-items: baseline;
-    span{
-        font-family: PingFang TC;
-        font-weight: 600;
-        font-style: Semibold;
-        font-size: 20px;
-        line-height: 100%;
-        letter-spacing: 0%;
-        color: #000;
-    }
+.closeBtn {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	span {
+		font-family: PingFang TC;
+		font-weight: 600;
+		font-style: Semibold;
+		font-size: 20px;
+		line-height: 100%;
+		letter-spacing: 0%;
+		color: #000;
+	}
 }
-.fileArea{
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 63px;
-    height: 63px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    background: url('../../assets/icon/cha2.svg') no-repeat center center;
-    background-color: #3781FC33;
-    cursor: pointer;
+.fileArea {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 63px;
+	height: 63px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	background: url("../../assets/icon/cha2.svg") no-repeat center center;
+	background-color: #3781fc33;
+	cursor: pointer;
 }
-.fileArea:hover{
-    background: url('../../assets/icon/draCha.svg') no-repeat center center;
-    background-color: #3781FC;
+.fileArea:hover {
+	background: url("../../assets/icon/draCha.svg") no-repeat center center;
+	background-color: #3781fc;
 }
-.fileArea2{
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 63px;
-    height: 63px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    background: url('../../assets/icon/fmorer.png') no-repeat center center;
-    background-color: #3781FC33;
+.fileArea2 {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 63px;
+	height: 63px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	cursor: pointer;
+	background: url("../../assets/icon/fmorer.png") no-repeat center center;
+	background-color: #3781fc33;
 }
-.fileArea2:hover{
-    background: url('../../assets/icon/filemr.svg') no-repeat center center;
-    background-color: #3781FC;
+.fileArea2:hover {
+	background: url("../../assets/icon/filemr.svg") no-repeat center center;
+	background-color: #3781fc;
 }
-:deep(.el-dialog__header){
+:deep(.el-dialog__header) {
 	padding: 0 !important;
 	height: 58px;
 }
-.dialog-header{
+.dialog-header {
 	font-size: 18px;
-	font-weight: 600;	
+	font-weight: 600;
 	width: 70%;
 	text-align: center;
 	color: #000;
 }
-.courseL{
-	background: #FFFFFF;
+.courseL {
+	background: #ffffff;
 	cursor: pointer;
-	color: #F5A70C;
+	color: #f5a70c;
 	position: absolute;
 	display: flex;
 	justify-content: center;
@@ -368,19 +445,19 @@ const updateCourseId = (id, type) => {
 	border: 2px #e7e7e7 solid;
 	top: 10px;
 	left: 65%;
-    gap: 5px;
-    img{
-        height: 25px;
-        object-fit: contain;
-    }
+	gap: 5px;
+	img {
+		height: 25px;
+		object-fit: contain;
+	}
 }
-.topH{
+.topH {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	height: 100%;
 }
-.backA{
+.backA {
 	display: flex;
 	gap: 30px;
 	height: 35px;
@@ -388,72 +465,96 @@ const updateCourseId = (id, type) => {
 	width: 15%;
 	font-size: 16px;
 	justify-content: flex-end;
-	.bABtn{
+	.bABtn {
 		padding: 3px 15px;
 		cursor: pointer;
 		box-sizing: border-box;
-		background: #3781FC;
+		background: #3781fc;
 		color: #fff;
 		border-radius: 5px;
 	}
 }
-.draCon{
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    .dratit{
-        display: flex;
-        border-bottom: 1px #C3C3C3 solid;
-        .tit{
-            font-family: PingFang TC;
-            font-weight: 600;
-            font-style: Semibold;
-            font-size: 18px;
-            line-height: 100%;
-            color: #000;
-            flex: 1;
-            text-align: center;
-            height: 35px;
-            cursor: pointer;
-        }
-        .tit2{
-            border-bottom: 1px #000 solid;
-        }
-    }
-    .draconL{
-        flex: 1;
-        overflow: auto;
-    }
-    .pdflist{
-        max-height: 100px;overflow: auto;padding: 20px 0;
-        box-sizing: border-box;
-        .pdfCS{
-            padding: 3px 10px;
-            box-sizing: border-box;
-            border-radius: 5px;
-            font-size: 15px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            .pdfCSTit{
-                -webkit-line-clamp: 1;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                text-overflow: ellipsis; 
-            }
-            img{
-                height: 15px;
-                object-fit: cover;
-                cursor: pointer;
-            }
-        }
-        .pdfback{
-            background: #3781FC33;
-        }
-    }
+.draCon {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	.dratit {
+		display: flex;
+		border-bottom: 1px #c3c3c3 solid;
+		.tit {
+			font-family: PingFang TC;
+			font-weight: 600;
+			font-style: Semibold;
+			font-size: 18px;
+			line-height: 100%;
+			color: #000;
+			flex: 1;
+			text-align: center;
+			height: 35px;
+			cursor: pointer;
+		}
+		.tit2 {
+			border-bottom: 1px #000 solid;
+		}
+	}
+	.draconL {
+		flex: 1;
+		overflow: auto;
+	}
+	.pdflist {
+		max-height: 100px;
+		overflow: auto;
+		padding: 20px 0;
+		box-sizing: border-box;
+		.pdfCS {
+			padding: 3px 10px;
+			box-sizing: border-box;
+			border-radius: 5px;
+			font-size: 15px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			cursor: pointer;
+			.pdfCSTit {
+				-webkit-line-clamp: 1;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			img {
+				height: 15px;
+				object-fit: cover;
+				cursor: pointer;
+			}
+		}
+		.pdfback {
+			background: #3781fc33;
+		}
+	}
+}
+//富文本图片放大
+.imgDolg {
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	z-index: 9999;
+	background-color: rgba(140, 134, 134, 0.6);
+	top: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	#imgDolgClose {
+		position: fixed;
+		top: 35px;
+		cursor: pointer;
+		right: 7%;
+		font-size: 50px;
+		color: white;
+	}
+	img {
+		width: 80%;
+	}
 }
-
-
-</style>
+</style>