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

今天敲了一个分布式的案例，用到了手机端，电视端，手表端。

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"
    }
}

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/fbsbj