grid布局加flex给文子设置横排展示效果

最新推荐文章于 2023-10-29 09:13:40 发布

WCR_520

最新推荐文章于 2023-10-29 09:13:40 发布

阅读量547

点赞数

分类专栏：该死的前端文章标签： css html css3

本文链接：https://blog.csdn.net/FIQ_527/article/details/122430295

版权

该死的前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
.wait-matter-box {
	margin-top: 10px;
	margin-left: 20px;
	display: grid;
	grid-template-columns: repeat(4, 25%);
}

.wait-matter-box .grid-item {
	text-align: center;
	justify-self: center;
	align-self: center;
	display: flex;
	flex-direction: column;
}
/* 状态标题 */
.grid-item .wait-matter-title {
	text-align: left;
	font-weight: bold;
	font-size: 14px;
}
/* 新增数 */
.grid-item .wait-matter-complete-title {
	color: #333333;
	font-size: 13px;
}
/* 状态对应数量 */
.grid-item .wait-matter-total {
	font-size: 18px;
	font-weight: bold;
	margin: 10px 0;
}
/* 新增数 */
.grid-item .wait-matter-complete-num {
	margin-left: 10px;
	font-size: 13px;
}
.span-font-small-time{
	font-size: 14px;
}
		</style>
	</head>
	<body>
		<div style="margin-right:8px;height:20px;text-align:right" >
		<span class="span-font-small-time">截止当前时间：<span>
		<span class="span-font-small-time">{{this.data.updateTime}}<span>
		</div>
<div class="wait-matter-box" style="height:100%;">
			<div class="grid-item item-1">
				<span class="wait-matter-title" style="color:black;">预警总数</span>
				<span class="wait-matter-total" style="color:black;">{{this.data.totalNum}}</span>
				<span class="wait-matter-complete-title">今日新增<span class="wait-matter-complete-num">{{this.data.inrWarn}}</span></span>
			</div>
			<div class="grid-item item-2" s>
				<span class="wait-matter-title" style="color:green;">已处理</span>
				<span class="wait-matter-total" style="color:green;">{{this.data.doneNum}}</span>
				<span class="wait-matter-complete-title">今日新增<span class="wait-matter-complete-num">{{this.data.inrDone}}</span></span>
			</div>
			<div class="grid-item item-3">
				<span class="wait-matter-title" style="color: #3399FF;">已忽略</span>
				<span class="wait-matter-total" style="color: #3399FF;">{{this.data.inoreNum}}</span>
				<span class="wait-matter-complete-title">今日新增
				<span class="wait-matter-complete-num">{{this.data.inrInore}}</span>

				</span>
			</div>
			<div class="grid-item item-4">
				<span class="wait-matter-title" style="color:red;">未处理</span>
				<span class="wait-matter-total" style="color:red;">{{this.data.undoneNum}}</span>
				<span class="wait-matter-complete-title">今日新增
					<span class="wait-matter-complete-num">{{this.data.inrUndone}}</span>

				</span>
			</div>
		</div>
		
	</body>
</html>