
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
1、在date中定义数据模型
data: {
title:"我是一个标题",
arrs:["text1","text2","text3","text4","text5","text6","text7","text8","text9"],
text1:"鸿蒙",
text2:"页面",
text3:"布局"
}
2、使用<div>标签,对页面进行布局
<div class="pagediv">
<div class="topdiv">
<text class="textdiv">{{title}}</text>
</div>
<div class="middlediv">
<block for="{{arrs}}">
<div class="box">
<text class="boxtxt">{{$item}}</text>
</div>
</block>
</div>
<div class="buttomdiv">
<div class="buttomboxdiv">
<text class="buttomboxtxt">{{text1}}</text>
</div>
<div class="buttomboxdiv">
<text class="buttomboxtxt">{{text2}}</text>
</div>
<div class="buttomboxdiv">
<text class="buttomboxtxt">{{text3}}</text>
</div>
</div>
</div>
3、css属性设置
.pagediv{
width: 100%;
height: 1500px;
background-color: cornsilk;
/**启用flex布局**/
display: flex;
/**布局方向为按列布局**/
flex-direction: column;
}
.topdiv{
width: 100%;
height: 10%;
background-color: #AECAFA;
/**启用flex布局**/
display: flex;
/**水平居中**/
justify-content: center;
/**垂直居中**/
align-items: center;
}
.middlediv{
width: 100%;
height: 60%;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
/**自动换行**/
flex-wrap: wrap;
}
.box{
width: 31%;
height: 32%;
background-color: #C8FFDB;
border: 3px solid black;
border-radius: 20px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.textdiv{
font-size: 50px;
color: black;
font-weight: bold;
}
.boxtxt{
font-size: 45px;
color: black;
font-weight: bold;
}
.buttomdiv{
width: 100%;
height: 15%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.buttomboxdiv{
width: 30%;
height: 80%;
background-color: lavender;
border: 5px solid black;
border-radius: 20px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.buttomboxtxt{
font-size: 80px;
color: #7A9AFF;
font-weight: 800;
}