图片预览修复

src/main.js

@@ -40,7 +40,12 @@ Vue.use(ElementUI, {
 // Vue.use(ElementUI)
 
 
-Vue.use(Viewer)
+Vue.use(Viewer, {
+	defaultOptions: {
+		zIndex: 99999, // 修改viewer的默认层级
+	}
+})
+
 // 这里是插件的默认设置
 Viewer.setDefaults({
 	zIndex: 9999,

src/views/audited/index.vue

@@ -73,18 +73,18 @@
 				<div style="color: #999; font-weight: bold; width: 80px; text-align: right;">民宿图片</div>
 				<div style="margin: 0 10px; width: 230px;">
 					<div style="color: #000; margin: 0 0 10px 0; text-align: center;">封面图：</div>
-					<div style="text-align: center; border-radius: 5px;">
-						<viewer>
-							<img :src="approved_reject_Data.coverImg" style="border-radius: 5px;" alt="" width="180">
+					<div style="border-radius: 5px; width: 240px;  height: 180px; display: flex; justify-content: center; align-items: center;">
+						<viewer :images="approved_reject_Data.coverImg">
+							<img :src="approved_reject_Data.coverImg" style="border-radius: 5px; max-width: 100%; max-height: 100%; cursor: pointer;" alt="">
 						</viewer>
 					</div>
 				</div>
 				<div style="margin: 0 10px; width: 500px;">
 					<div style="color: #000; margin: 0 0 10px 0; text-align: center; ">详情图：</div>
-					<viewer>
-						<el-carousel :interval="3000" height="180px" style="border-radius: 5px;">
+					<viewer :images="approved_reject_Data.fileInfoList">
+						<el-carousel :interval="3000" height="180px" width="500px" style="border-radius: 5px;">
 							<el-carousel-item v-for="item in approved_reject_Data.fileInfoList" :key="item.id">
-								<img :src="item.url" width="500">
+								<img :src="item.url" width="500" style="border-radius: 5px; cursor: pointer;">
 							</el-carousel-item>
 						</el-carousel>
 					</viewer>
@@ -104,8 +104,8 @@
 			</div>
 			<div style="display: flex; margin-top: 20px;">
 				<div style="color: #999; font-weight: bold; width: 80px; text-align: right; margin-right: 10px;">备注</div>
-				<el-input type="textarea" placeholder="暂无备注内容" readonly rows="2" style="width: 740px;" v-model="approved_reject_Data.workflowRemark" maxlength="100"
-					show-word-limit>
+				<el-input type="textarea" placeholder="暂无备注内容" readonly rows="2" style="width: 740px;" v-model="approved_reject_Data.workflowRemark"
+					maxlength="100" show-word-limit>
 				</el-input>
 			</div>
 		</el-dialog>
@@ -118,13 +118,13 @@
 			</div>
 			<div style="display: flex;">
 				<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频/图片：</div>
-				<div style="display: flex;">
-					<div v-if="approved_reject_Data.fileInfoList.length > 0">
-						<viewer>
-							<img height="110" width="110" style="margin: 0 2px; border-radius: 5px;" v-for="src in approved_reject_Data.fileInfoList" :src="src.url"
-								:key="src.id">
-						</viewer>
-					</div>
+				<div v-if="approved_reject_Data.fileInfoList.length > 0">
+					<viewer :images="approved_reject_Data.fileInfoList">
+						<div style="height: 110px; display: flex; justify-content: center; align-items: center;">
+							<img style="margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
+								v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
+						</div>
+					</viewer>
 				</div>
 			</div>
 			<el-divider></el-divider>
@@ -135,8 +135,8 @@
 			</div>
 			<div style="display: flex; margin-top: 20px;">
 				<div style="color: #999; font-weight: bold; width: 80px; text-align: right; margin-right: 10px;">备注</div>
-				<el-input type="textarea" placeholder="暂无备注内容" readonly rows="2" style="width: 740px;" v-model="approved_reject_Data.workflowRemark" maxlength="100"
-					show-word-limit>
+				<el-input type="textarea" placeholder="暂无备注内容" readonly rows="2" style="width: 740px;" v-model="approved_reject_Data.workflowRemark"
+					maxlength="100" show-word-limit>
 				</el-input>
 			</div>
 		</el-dialog>
@@ -153,13 +153,13 @@
 			</div>
 			<div style="display: flex;">
 				<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频/图片：</div>
-				<div style="display: flex;">
-					<div v-if="approved_reject_Data.fileInfoList.length > 0" style="height: 120px;">
-						<viewer>
-							<img width="110" style="margin: 0 2px; border-radius: 5px;" v-for="src in approved_reject_Data.fileInfoList" :src="src.url"
-								:key="src.id">
-						</viewer>
-					</div>
+				<div v-if="approved_reject_Data.fileInfoList.length > 0">
+					<viewer :images="approved_reject_Data.fileInfoList">
+						<div style="height: 120px; display: flex; justify-content: center; align-items: center;">
+							<img style="margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
+								v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
+						</div>
+					</viewer>
 				</div>
 			</div>
 			<el-divider></el-divider>
@@ -264,7 +264,7 @@
 				var that = this
 				// console.log(data);
 				getTableData(this.pagination).then((res) => {
-					console.log(res.data);
+					// console.log(res.data);
 					if (res.code === 200) {
 						var d = res.data
 						that.pagination.total = d.total

src/views/myAgent/index.vue

@@ -52,21 +52,21 @@
 				<div style="color: #999; font-weight: bold; width: 80px; text-align: right;">民宿图片</div>
 				<div style="margin: 0 10px; width: 230px;">
 					<div style="color: #000; margin: 0 0 10px 0; text-align: center;">封面图：</div>
-					<div style="text-align: center; border-radius: 5px;">
-						<viewer>
-							<img :src="approved_reject_Data.coverImg" style="border-radius: 5px;" alt="" width="180">
+					<div style="border-radius: 5px; width: 240px;  height: 180px; display: flex; justify-content: center; align-items: center;">
+						<viewer :images="approved_reject_Data.coverImg">
+							<img :src="approved_reject_Data.coverImg" style="border-radius: 5px; max-width: 100%; max-height: 100%; cursor: pointer;" alt="">
 						</viewer>
 					</div>
 				</div>
 				<div style="margin: 0 10px; width: 500px;">
 					<div style="color: #000; margin: 0 0 10px 0; text-align: center; ">详情图：</div>
-					<viewer>
-						<el-carousel :interval="3000" height="180px" style="border-radius: 5px;">
+					<el-carousel :interval="3000" height="180px" width="500px" style="border-radius: 5px;">
+						<viewer :images="approved_reject_Data.fileInfoList">
 							<el-carousel-item v-for="item in approved_reject_Data.fileInfoList" :key="item.id">
-								<img :src="item.url" width="500" height="180">
+								<img :src="item.url" width="500" style="border-radius: 5px; cursor: pointer;">
 							</el-carousel-item>
-						</el-carousel>
-					</viewer>
+						</viewer>
+					</el-carousel>
 				</div>
 			</div>
 			<div style="display: flex; margin-top: 20px;">
@@ -89,13 +89,13 @@
 			</div>
 			<div style="display: flex;">
 				<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频/图片：</div>
-				<div style="display: flex;">
-					<div v-if="approved_reject_Data.fileInfoList.length > 0">
-						<viewer>
-							<img width="110" style="margin: 0 2px; border-radius: 5px;" v-for="src in approved_reject_Data.fileInfoList" :src="src.url"
-								:key="src.id">
-						</viewer>
-					</div>
+				<div v-if="approved_reject_Data.fileInfoList.length > 0">
+					<viewer :images="approved_reject_Data.fileInfoList">
+						<div style="display: flex; justify-content: center; align-items: center;">
+							<img style="margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
+								v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
+						</div>
+					</viewer>
 				</div>
 			</div>
 			<p style="display: flex; justify-content: center;">
@@ -116,13 +116,13 @@
 			</div>
 			<div style="display: flex;">
 				<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频/图片：</div>
-				<div style="display: flex;">
-					<div v-if="approved_reject_Data.fileInfoList.length > 0" style="height: 120px;">
-						<viewer>
-							<img width="110" style="margin: 0 2px; border-radius: 5px;" v-for="src in approved_reject_Data.fileInfoList" :src="src.url"
-								:key="src.id">
-						</viewer>
-					</div>
+				<div v-if="approved_reject_Data.fileInfoList.length > 0">
+					<viewer :images="approved_reject_Data.fileInfoList">
+						<div style="height: 120px; display: flex; justify-content: center; align-items: center;">
+							<img style="margin: 0 2px; border-radius: 5px; max-width: 100%; max-height: 100%; cursor: pointer;" v-for="src in approved_reject_Data.fileInfoList"
+								:src="src.url" :key="src.id">
+						</div>
+					</viewer>
 				</div>
 			</div>
 			<p style="display: flex; justify-content: center;">