zsx.git - Gitblit

懒羊羊

2023-08-30 1ac2bc1590406d9babec036e154d8d08f34a6aa1

提交 \| 用户 \| 时间
1ac2bc	1	<!-- fileChoose -->
懒	2	<div class="file-choose-dialog">
	3	<!-- 顶部工具栏 -->
	4	<div class="file-choose-top-bar">
	5	<div class="file-choose-top-text">当前位置：<span id="fc-current-position">/</span></div>
	6	<div class="file-choose-top-btn-group">
	7	<button id="fc-btn-back" class="layui-btn layui-btn-sm layui-btn-primary">
	8	<i class="layui-icon"></i>上级
	9	</button>
	10	<button id="fc-btn-refresh" class="layui-btn layui-btn-sm layui-btn-primary">
	11	<i class="layui-icon"></i>刷新
	12	</button>
	13	<button id="fc-btn-upload" class="layui-btn layui-btn-sm layui-btn-normal" style="margin-right: 0;">
	14	<i class="layui-icon"></i>上传
	15	</button>
	16	</div>
	17	</div>
	18	<!-- 文件列表 -->
	19	<div id="file-choose-list" class="file-choose-list"></div>
	20	<!-- 加载动画 -->
	21	<div class="file-choose-loading-group">
	22	<div class="file-choose-loading">
	23	<span></span><span></span><span></span><span></span>
	24	</div>
	25	</div>
	26	<!-- 底部工具栏 -->
	27	<div class="file-choose-bottom-bar">
	28	<button id="fc-btn-ok-sel" class="layui-btn layui-btn-sm layui-btn-normal">完成选择</button>
	29	</div>
	30	</div>
	31
	32	<style>
	33	/** fileChoose */
	34	.file-choose-dialog {
	35	position: relative;
	36	background: #fff;
	37	height: 100%;
	38	}
	39
	40	/** 顶部工具栏 */
	41	.file-choose-dialog .file-choose-top-bar {
	42	position: relative;
	43	white-space: nowrap;
	44	overflow: auto;
	45	text-align: right;
	46	padding: 5px 12px;
	47	background-color: #fff;
	48	z-index: 1;
	49	}
	50
	51	.file-choose-dialog .file-choose-top-bar .layui-btn {
	52	padding: 0 6px;
	53	margin-left: 5px;
	54	}
	55
	56	.file-choose-dialog .file-choose-top-bar .layui-btn .layui-icon {
	57	font-size: 14px !important;
	58	}
	59
	60	.file-choose-dialog .file-choose-top-text {
	61	padding: 7px 15px 0 0;
	62	display: inline-block;
	63	float: left;
	64	}
	65
	66	.file-choose-dialog .file-choose-top-btn-group {
	67	display: inline-block;
	68	}
	69
	70	/** 底部工具栏 */
	71	.file-choose-dialog .file-choose-bottom-bar {
	72	position: absolute;
	73	left: 0;
	74	right: 0;
	75	bottom: 0;
	76	border-top: 1px solid #eee;
	77	padding: 8px 12px;
	78	text-align: right;
	79	background-color: #fff;
	80	}
	81
	82	.file-choose-dialog.hide-bottom .file-choose-bottom-bar {
	83	display: none;
	84	}
	85
	86	/** 文件列表 */
	87	.file-choose-dialog .file-choose-list, .file-choose-loading-group {
	88	position: absolute;
	89	top: 40px;
	90	bottom: 48px;
	91	left: 0;
	92	right: 0;
	93	overflow: auto;
	94	padding: 5px 8px;
	95	}
	96
	97	.file-choose-dialog.hide-bottom .file-choose-list, .file-choose-dialog.hide-bottom .file-choose-loading-group {
	98	bottom: 0;
	99	}
	100
	101	/* 文件列表item */
	102	.file-choose-dialog .file-choose-list-item {
	103	position: relative;
	104	display: inline-block;
	105	vertical-align: top;
	106	padding: 8px 8px;
	107	margin: 5px 0;
	108	cursor: pointer;
	109	}
	110
	111	.file-choose-dialog .file-choose-list-item:hover {
	112	background-color: #F7F7F7;
	113	}
	114
	115	/* 文件列表图片 */
	116	.file-choose-dialog .file-choose-list-item-img {
	117	width: 90px;
	118	height: 90px;
	119	background-repeat: no-repeat;
	120	background-position: center;
	121	background-size: cover;
	122	border-radius: 3px;
	123	overflow: hidden;
	124	position: relative;
	125	background-color: #eee;
	126	}
	127
	128	.file-choose-dialog .file-choose-list-item-img.img-icon {
	129	background-size: inherit;
	130	background-color: transparent;
	131	}
	132
	133	.file-choose-dialog .file-choose-list-item.active .file-choose-list-item-img:after {
	134	content: "";
	135	position: absolute;
	136	left: 0;
	137	top: 0;
	138	bottom: 0;
	139	right: 0;
	140	background: rgba(0, 0, 0, 0.3);
	141	}
	142
	143	/* 文件列表名称 */
	144	.file-choose-dialog .file-choose-list-item-name {
	145	width: 90px;
	146	overflow: hidden;
	147	text-overflow: ellipsis;
	148	white-space: nowrap;
	149	color: #333;
	150	font-size: 12px;
	151	text-align: center;
	152	margin-top: 12px;
	153	}
	154
	155	/* 文件列表复选框 */
	156	.file-choose-dialog .file-choose-list-item-ck {
	157	position: absolute;
	158	right: 8px;
	159	top: 8px;
	160	}
	161
	162	.file-choose-dialog .file-choose-list-item-ck .layui-form-checkbox {
	163	padding: 0;
	164	}
	165
	166	/* 文件列表操作菜单 */
	167	.file-choose-dialog .file-choose-oper-menu {
	168	background-color: #fff;
	169	position: absolute;
	170	left: 8px;
	171	top: 8px;
	172	border-radius: 2px;
	173	box-shadow: 0px 0px 10px rgba(0, 0, 0, .15);
	174	transition: all .3s;
	175	overflow: hidden;
	176	transform: scale(0);
	177	transform-origin: left top;
	178	visibility: hidden;
	179	}
	180
	181	.file-choose-dialog .file-choose-oper-menu.show {
	182	transform: scale(1);
	183	visibility: visible;
	184	}
	185
	186	/* 文件列表操作菜单item */
	187	.file-choose-dialog .file-choose-oper-menu-item {
	188	color: #555;
	189	padding: 6px 5px;
	190	font-size: 14px;
	191	min-width: 70px;
	192	text-align: center;
	193	cursor: pointer;
	194	display: block;
	195	}
	196
	197	.file-choose-dialog .file-choose-oper-menu-item:hover {
	198	background-color: #eee;
	199	}
	200
	201	/** 文件列表为空时样式 */
	202	.file-choose-dialog .file-choose-empty {
	203	text-align: center;
	204	color: #999;
	205	padding: 50px 0;
	206	}
	207
	208	.file-choose-dialog .file-choose-empty .layui-icon {
	209	font-size: 60px;
	210	display: block;
	211	margin-bottom: 8px;
	212	}
	213
	214	/** 加载动画 */
	215	.file-choose-dialog .file-choose-loading-group {
	216	background-color: #fff;
	217	}
	218
	219	.file-choose-dialog .file-choose-loading {
	220	position: absolute;
	221	left: 50%;
	222	top: 50%;
	223	-webkit-transform: translate(-50%, -50%);
	224	transform: translate(-50%, -50%);
	225	}
	226
	227	.file-choose-dialog .file-choose-loading span {
	228	display: inline-block;
	229	width: 5px;
	230	height: 0px;
	231	margin: 0 2px;
	232	vertical-align: bottom;
	233	background-color: #1E9FFF;
	234	animation: fcl-signal-load 1s infinite;
	235	-webkit-animation: fcl-signal-load 1s infinite;
	236	}
	237
	238	.file-choose-dialog .file-choose-loading span:nth-child(2) {
	239	animation-delay: 0.05s;
	240	-webkit-animation-delay: 0.05s;
	241	}
	242
	243	.file-choose-dialog .file-choose-loading span:nth-child(3) {
	244	animation-delay: 0.1s;
	245	-webkit-animation-delay: 0.1s;
	246	}
	247
	248	.file-choose-dialog .file-choose-loading span:nth-child(4) {
	249	animation-delay: 0.15s;
	250	-webkit-animation-delay: 0.15s;
	251	}
	252
	253	@keyframes fcl-signal-load {
	254	0% {
	255	height: 0px;
	256	}
	257	50% {
	258	height: 15px;
	259	}
	260	100% {
	261	height: 0px;
	262	}
	263	}
	264
	265	@-webkit-keyframes fcl-signal-load {
	266	0% {
	267	height: 0px;
	268	}
	269	50% {
	270	height: 15px;
	271	}
	272	100% {
	273	height: 0px;
	274	}
	275	}
	276	</style>