鸿蒙应用-分布式可见式布局体验
鸿蒙时代
发布于 2021-4-21 15:01
浏览
0收藏
今天敲了一个分布式的案例,用到了手机端,电视端,手表端。
Hml代码如下:
<div class="box">
<div class="top_box">
<text class="text_font">{{title}}</text>
</div>
<div class="center_box">
<div class="center_text">
<div class="button_box">
<input class="input_button" checked="true" type="checkbox"></input>
</div>
<div class="box_renwu">
<div class="box_leibiao">
<text class="box_siz">
<span>{{strong}}</span>
</text>
</div>
<div class="box_leibiao">
<text class="box_siz">
<span>{{time1}}</span>
</text>
</div>
</div>
</div>
<div class="center_text">
<div class="button_box">
<input class="input_button" checked="true" type="checkbox"></input>
</div>
<div class="box_renwu">
<div class="box_leibiao">
<text class="box_siz">
<span>{{shopping}}</span>
</text>
</div>
<div class="box_leibiao">
<text class="box_siz">
<span>{{time2}}</span>
</text>
</div>
</div>
</div>
<div class="center_text">
<div class="button_box">
<input class="input_button" checked="true" type="checkbox"></input>
</div>
<div class="box_renwu">
<div class="box_leibiao">
<text class="box_siz">
<span>{{date}}</span>
</text>
</div>
<div class="box_leibiao">
<text class="box_siz">
<span>{{time3}}</span>
</text>
</div>
</div>
</div>
</div>
</div>
Css代码如下:
.box{
flex-direction: column;
width: 100%;
background-color: black;
height: 100%;
}
.top_box{
height: 100px;
width: 100%;
}
.center_box{
height: 100%;
width: 100%;
margin-top: 30px;
flex-direction: column;
}
.box_renwu{
flex-direction: column;
}
.box_siz{
font-size: 32px;
color: #ccc;
}
.center_text{
flex-direction: row;
width: 100%;
height: 120px;
}
@media (device-type: phone){
.text_font{
font-size: 84px;
color: #ccc;
}
.box_siz{
font-size: 52px;
color: #ccc;
}
.input_button{
width: 160px;
height: 160px;
}
}
@media (device-type: tv){
.text_font{
font-size: 48px;
color: #ccc;
}
.input_button{
width: 40px;
height: 40px;
margin-top: 20px;
}
.button_box{
width: 100px;
height: 100px;
justify-content: center;
}
}
@media (device-type: wearable){
.text_font{
font-size: 52px;
text-align: center;
color: #ccc;
}
.top_box{
height: 100px;
width: 100%;
justify-content: center;
}
.center_text{
flex-direction: row;
width: 100%;
height: 120px;
margin-left: 60px;
}
.box_leibiao{
height: 50%;
width: 100%;
}
}
Js代码如下:
export default {
data: {
title: "任务列表",
strong:"锻炼身体",
time1:"7:30",
shopping:"买东西",
time2:"14:20",
date:"和女神约会",
time3:"20:30"
}
}
完整代码地址:
分类
标签
已于2021-4-30 17:29:31修改
赞
3
收藏
回复
不错👍