鸿蒙应用-分布式可见式布局体验

鸿蒙时代

发布于 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%;
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.

Js代码如下：

export default {
    data: {
        title: "任务列表",
        strong:"锻炼身体",
        time1:"7:30",
        shopping:"买东西",
        time2:"14:20",
        date:"和女神约会",
        time3:"20:30"
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.