Explorar o código

添加后台店铺违规页面的图片预览功能

huxz %!s(int64=8) %!d(string=hai) anos
pai
achega
755b84ce54
Modificáronse 1 ficheiros con 98 adicións e 0 borrados
  1. 98 0
      src/main/webapp/WEB-INF/views/normal/adminWithNav.html

+ 98 - 0
src/main/webapp/WEB-INF/views/normal/adminWithNav.html

@@ -247,7 +247,105 @@
 		<i></i>
 	</div>
 	<!-- Loading End -->
+
+	<!-- 图片预览 -->
+	<div id="image-box" style="display: none">
+		<div class="x-floating-wrap"></div>
+		<div class="x-floating">
+			<div id="item-content">
+				<div class="x-close-wrap"><a href="javascript:void(0);">&times;</a></div>
+				<div class="img"><img/></div>
+			</div>
+		</div>
+	</div>
 </body>
+<style type="text/css">
+	/*查看大图*/
+	#image-box .x-floating-wrap,.image-box .x-floating-wrap {
+		position: fixed;
+		z-index: 99998;
+		background: #000;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0.5;
+	}
+	#image-box,.image-box{
+		display:table; overflow:hidden; margin-left:50px; _position:relative;  width: 1200px;height: 700px;
+		position: fixed;
+		top: 50%;
+		margin-top: -300px;
+		left: 50%;
+		margin-left: -600px;
+		z-index: 2000;
+	}
+	#image-box .x-floating,.image-box .x-floating {
+		vertical-align:middle !important;
+		display:table-cell;
+		text-align:center;
+		_position:absolute;
+		_top:50%; _left:50%;
+		top: inherit !important;
+		left: inherit !important;
+	}
+	#image-box .x-floating img ,.image-box .x-floating img {
+		margin: auto auto;
+		max-width: 970px !important;
+		max-height: 600px !important;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+	#image-box .x-floating-wrap,.image-box .x-floating-wrap{
+		z-index: 1000000 !important;
+	}
+	#item-content{
+		color:#fff; display:inline-block; _position:relative; _top:-50%; _left:-50%;
+		position: relative;
+		z-index: 10000000;
+	}
+	#item-content div.x-close-wrap{
+		position: absolute;
+		right: -15px;
+		line-height: 30px;
+		top: -13px;
+		color: #fff;
+		width: 35px;
+		height: 35px;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 100%;
+		opacity: 1;
+		margin: 0;
+		z-index: 100000;
+		min-height: initial;
+		text-align: center;
+	}
+	#item-content div.x-close-wrap a{
+		position: relative;
+		left: 0;
+		bottom: 0;
+		font-size: 34px;
+		color: #fff;
+	}
+	#item-content div.x-close-wrap a:hover{
+		text-decoration: none;
+		color: #fff !important;
+	}
+	#item-content div.x-close-wrap:hover{
+		cursor: pointer;
+		opacity: .9;
+	}
+	#item-content div.x-close-wrap img{
+		width: 30px !important;
+		height: 30px !important;
+	}
+	#item-content .img{
+		position: relative;
+		z-index: 10;
+	}
+</style>
 <script src="static/lib/quill/quill.core.js"></script>
 <script src="static/lib/quill/quill.min.js"></script>
 <script language="javascript" type="text/javascript" src="static/lib/datePicker/WdatePicker.js"></script>