优化后台UI

完善表单上传组件

view/upload/server.html

@@ -1,6 +1,13 @@
 {include file="admin/public/header" /}
 <style type="text/css">
 .tab-box{height: 345px; overflow: hidden;}
+.img-list{padding: 5px; height: 300px; overflow-y: scroll; display: flex; justify-content: start; flex-wrap: wrap; border: 1px dashed #999999;}
+.img-list .item{width: 20%;}
+.img-list .item .thumb{margin: 5px; border: 1px solid #efefef; height: 120px; border-radius: 4px; position: relative; cursor: pointer; overflow: hidden;}
+.img-list .item .thumb img{width: 100%;}
+.img-list .item .close{position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; font-size: 10px; text-align: center; line-height: 20px; color: #000000; border-radius: 50%; background: #333333;}
+.page{height: 45px;}
+.page .pagination{margin: 0;}
 </style>
 <div class="nav-tabs-custom">
 	<ul class="nav nav-tabs">
@@ -9,17 +16,20 @@
 	</ul>
 	<div class="tab-content">
 		<div class="tab-pane tab-box active" id="server">
-			<div class="row">
-				<div class="col-sm-12">
-					{if empty($list)}
-					<p class="no-data">无{if $param['type'] == 'image'}图片{else/}文件{/if}</p>
-					{else/}
-					<ul>
-
-					</ul>
-					{/if}
+			{if empty($list)}
+			<p class="no-data">无{if $param['type'] == 'image'}图片{else/}文件{/if}</p>
+			{else/}
+			<div class="img-list">
+				{volist name="list" id="item"}
+				<div class="item">
+					<div class="thumb"><img src="{$item['url']}" /></div>
 				</div>
-				<div class="col-sm-2 col-sm-offset-10"><button class="btn btn-primary btn-select">确认选择</button></div>
+				{/volist}
+			</div>
+			{/if}
+			<div class="row" style="padding-top: 10px;">
+				<div class="col-xs-10 page">{$page|raw}</div>
+				<div class="col-xs-2"><button class="btn btn-primary btn-block btn-select">确认选择</button></div>
 			</div>
 		</div>
 	</div>