Harmony实战

首先编写css样式，美化页面的整体色彩和组件大小：

.cb-swiper-container {
    height: 240px;
}

swiper {
    width: 100%;
}

image {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.cb-hc-container {
    flex-direction: column;
}

.cb-hc-title {
    border-bottom-width: 0.5px;
    border-bottom-color: #eee;
    height: 44px;
}

text {
    font-size: 12px;
    padding-left: 10px;
}

.cb-hc-list {
    flex-wrap: wrap;
    margin-top: 20px;
}

.cb-hc-item {
    width: 33.33333%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

image {
    object-fit: cover;
    width: 70px;
    height: 70px;
    border-radius: 8px;
}

text {
    font-size: 14px;
    line-height: 30px;
}

.cb-top-container {
    flex-direction: column;
    background-color: #f5f5f5;
}

.cb-title-title {
    height: 50px;
    padding-top: 5px;
    padding-left: 10px;
    color: #333;
}

text {
    font-size: 12px;
}

.cb-top-body {
    flex-wrap: wrap;
    padding-left: 10px;
    padding-right: 10px;
}

.cb-top-item {
    width: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding-bottom: 15px;
    margin-bottom: 10px;
    height: 160px;
}

image {
    width: 100%;
    flex: 1;
    object-fit: contain;
}

.cb-top-item-info {
    height: 50px;
    flex-direction: column;
    align-items: center;
}

.cb-top-item-title {
    font-size: 16px;
}

.cb-top-item-subtitle {
    font-size: 12px;
    color: #666;
    font-weight: 100;
}

 在jason文件中实现内容的展示，用数组的循环遍历，配合前端组件的使用，最终完成展示的效果

用js中的slice方法，做到字符串中内容的提取。

slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。

start 参数字符串中第一个字符位置为 0, 第二个字符位置为 1, 以此类推，如果是负数表示从尾部截取多少个字符串，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

end 参数如果为负数，-1 指字符串的最后一个字符的位置，-2 指倒数第二个字符，以此类推。

 list组件展示其中的信息

<div class="container">
    <text class="title">默认列表</text>
   <list class="list">
       <list-item for="{{array}}" class="listItem">
           <text class="text">{{$item.value}}</text>
       </list-item>
   </list>
    <text class="title">分组列表</text>
    <list class="listG">
        <list-item-group>
            <list-item><text class="group">分组列表</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
        </list-item-group>
        <list-item-group>
            <list-item><text class="group">分组列表</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
        </list-item-group>
        <list-item-group>
            <list-item><text class="group">分组列表</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
        </list-item-group>
        <list-item-group>
            <list-item><text class="group">分组列表</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
            <list-item><text class="groupValue">文本内容</text></list-item>
        </list-item-group>
    </list>
</div>

实现效果：