1. 程式人生 > 其它 >Vue -- 使用 element 佈局實現頁面的五等分 -- 24

Vue -- 使用 element 佈局實現頁面的五等分 -- 24

技術標籤:# 表單

<el-row :gutter="20" style="height:100%;margin:5px 3px 0 15px">
	<el-col v-for="partData in overviewPartData" :span="4" style="height:100%;padding-left:0px;width:20%">
		<div style="border:1px solid #eee;height:100%;background-color
:#fff;padding-top:10px;min-width:100px;cursor:pointer
"
>
<div style="height:40%;text-align:center;margin:0 10px 0 10px;" > <span style="font-size:15px;">{{partData.partName}}</span> </div> <div style="height:60%;text-align:center;margin
:0 10px 0 10px;
"
>
<span style="font-size:25px;color:#1fb1ea;font-weight:bold;" >{{partData.num}}</span> </div> </div> </el-col> </el-row>

關鍵1::span="4"

關鍵2:width:20%

效果:

在這裡插入圖片描述