Harmonyos third training notes

Reproduce the screenshot of the first page

 

 cookbook Related codes

<element name= "cb-swiper" src="./swiper/swiper"></element>
<element name= "cb-hotcate" src="./hotcate/hotcate"></element>

<div class= "cb-container">
    <div class="cb-title">
        <text> Food collection </text>
    </div>
    <div class="cb-body">
        <list>
            <list-item class="cb-body-item">
                <cb-swiper  list="{
   {list}}"></cb-swiper>
            </list-item>
            <list-item class="cb-body-item">
                <cb-hotcate></cb-hotcate>
            </list-item>
        </list>
    </div>
</div>

.cb-container {
    flex-direction: column ;


}
.cb-body {
    flex: 1;

}
.cb-body-item{
    flex-direction: column;
}

.cb-title {
    width: 100%;
    height: 44px;
    justify-content: center;
    align-items: center;
    background-color: #ee742f;
    }
text{
    font-size: 16px;
    font-weight: normal;
    color:#fff;
}

// @ts-nocheck
import list from '../../../common/data/cook-list.json';
export default {
    data: {
        list: []
    } ,
    onInit() {
        this.list=list.data
    }
}