鸿蒙OS第三次任务

搜索：

<search hint="请输入搜索内容" searchbutton="搜索" @search="search">
</search>

tab-bar

<tabs class = "tabs" index="0" vertical="false" οnchange="change">
    <tab-bar class="tab-bar" mode="fixed">
        <text class="tab-text">上面的1</text>
        <text class="tab-text">上面的2</text>
    </tab-bar>
    <tab-content class="tabcontent" scrollable="true">
        <div class="item-content" >

<text>下面的1</text>
        </div>
        <div class="item-content" >
            <text>下面的1</text>
        </div>
    </tab-content>
</tabs>

.tabs {

width: 100%;

}

.tab-bar {

margin: 10px;

height: 60px;

border-color: #007dff;

border-width: 1px;

}

.item-title {

font-size: 60px;

}

.item-content {

height: 100%;

justify-content: center;

}

list:

<list class="listG">
    <list-item-group>
        <list-item><text class="group">上面的list</text></list-item>
        <list-item><text class="groupValue">上面的1</text></list-item>
        <list-item><text class="groupValue">上面的2</text></list-item>
        <list-item><text class="groupValue">上面的3</text></list-item>
    </list-item-group>
</list>

.listG{
    height: 400px;
}
.group{
    width: 96%;
    height: 60px;
    padding-left: 3%;
    margin-left: 6%;
    border-bottom: 1px solid #DEDEDE;
    font-size: 20px;
    font-weight:500;
}
.groupValue{
    font-size: 16px;
    width: 95%;
    height: 60px;
    margin-left: 15%;
    border-bottom: 1px solid  #DEDEDE;
}

toolbar:

阿里图标网：https://www.iconfont.cn/home/index

<toolbar style="position: fixed; bottom: 0px; ">
    <toolbar-item icon='common/icon/main.png' value='Option 1' >   </toolbar-item>
    <toolbar-item icon='common/icon/dis.png' value='Option 2'>   </toolbar-item>
    <toolbar-item icon='common/icon/mine.png' value='Option 3'  >   </toolbar-item>
</toolbar>