基于JavaScript实现HarmonyOS备忘录服务卡片

<div class="image_with_info_layout">
    <div class="header">
        <text>
            <span class="header-text">备忘录</span>
        </text>
    </div>

    <list class="list">
        <list-item class="list-item">
            <text class="list-text">
                <span>18号要参加618活动</span>
            </text>
        </list-item>
        <list-item class="list-item">
            <text class="list-text">
                <span>某某某欠我2块钱</span>
            </text>
        </list-item>
        <list-item class="list-item">
            <text class="list-text">
                <span>论坛账号密码是123xxxxxxxx</span>
            </text>
        </list-item>
        <list-item class="list-item">
            <text class="list-text">
                <span>震惊！这件事的真相居然是这样</span>
            </text>
        </list-item>
        <list-item class="list-item">
            <text class="list-text">
                <span>隐藏的备忘，你看到了吗</span>
            </text>
        </list-item>
    </list>
</div>

.header{
    width: 100%;
    height: 35px;
    background-color: #ff9900;
    padding-left: 10px;
}

.header-text{
    font-size: 16px;
    color: #fff;
}
.list{
    width: 100%;
    height: 140px;
    padding-left: 10px;
}
.list-item{
    padding: 5px 1px 5px 2px;
    border-bottom: 1px solid #ddd;
}
.list-text{
    font-size: 14px;
    text-overflow:ellipsis;
}