flex垂直布局,容器间距相等

javascript 复制代码
<div
	style="
		width: 170px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	">
	<div
		class="tj_box"
		:style="{
			backgroundColor: fullscreen ? boxBgColor : '#1677ff',
		}"
	>
		<div class="tj_tit">客户总数</div>
		<div>{{ hzData.customer_num }}</div>
	</div>
	<div
		class="tj_box"
		:style="{
			backgroundColor: fullscreen ? boxBgColor : '#ff8f1f',
		}"
	>
		<div class="tj_tit">合同总数</div>
		<div>{{ hzData.compact_num }}</div>
	</div>
	<div
		class="tj_box"
		:style="{
			backgroundColor: fullscreen ? boxBgColor : '#00bfd0',
		}"
	>
		<div class="tj_tit">销项合同金额</div>
		<div>{{ hzData.xx_compact_money }}</div>
	</div>
	<div
		class="tj_box"
		:style="{
			backgroundColor: fullscreen ? boxBgColor : '#f93a4a',
		}"
	>
		<div class="tj_tit">进项合同金额</div>
		<div>{{ hzData.jx_compact_money }}</div>
	</div>
</div>
<style scoped>
.tj_box {
	height: 100px;
	border-radius: 8px;
	/* margin-bottom: 10px; */
	text-align: center;
	font-size: 18px;
	box-sizing: border-box;
	padding-top: 20px;
	color: #fff;
}
</style>
相关推荐
Joy T4 小时前
Agent 确定性上下文设计:从 Prompt 参数注入到能力分层
java·开发语言·微服务·架构·prompt·agent context
半个落月7 小时前
LangSmith 全链路观测(下):用 Dataset 与 LLM Judge 量化评估 RA
javascript·langchain
专注仿真7 小时前
引擎扩展性与集成设计深度剖析:从 14 个扩展点到 DIS→HLA 演进之路
开发语言·算法·仿真引擎·推演引擎
Best-Wishes7 小时前
科来网络分析系统(技术交流版)使用说明书
开发语言·junit·php
半个落月7 小时前
LangSmith 全链路观测(上):用 LangGraph 与 Milvus 构建可追踪的 RAG 客服
javascript·langchain
代码不停8 小时前
自动化测试(java)
java·开发语言·selenium·自动化
半个落月8 小时前
LangChain.js Agent 中间件实战:生命周期、动态工具与文件权限
javascript·langchain
志尊宝9 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
鬼手点金10 小时前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
爱上网的小舟10 小时前
星际战士2启动错误怎么办?5种游戏报错解决方法
开发语言·php