html - ionic 2/3 列表项 : item inside item

Question

我在 ionic 元素中工作，我想创建一个通知列表页面，该列表有点自定义，如下图所示:

这是我运行代码时得到的结果:

这是html代码:

<ion-content>
    <ion-list no-line>
        <ion-item>
            <ion-thumbnail item-end>
                <img src="img/garbage1.jpg">
            </ion-thumbnail>
            <ion-row>
                <ion-col>
                    <ion-item class="notification-informations">
                        <label class="notification-title">Parrot refused</label>&nbsp; &nbsp;<small class="date-notification">YESTERDAY</small>
                        <p class="text-notification">You earned <small class="star-number">25</small>
                            <ion-icon class="star-notification" name="md-star"></ion-icon> with 3 tags</p>
                    </ion-item>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-item class="user-notification">
                    <ion-avatar item-start>
                        <img class="user-image" src="img/profile.jpg">
                    </ion-avatar>
                    <div class="username">
                        <small class="user-name">Chicken chika</small>
                    </div>
                </ion-item>
            </ion-row>
        </ion-item>

        <ion-item>
            <ion-thumbnail item-end>
                <img src="img/garbage1.jpg">
            </ion-thumbnail>
            <ion-row>
                <ion-col>
                    <ion-item class="notification-informations">
                        <label class="notification-title">Parrot refused</label>&nbsp; &nbsp;<small class="date-notification">YESTERDAY</small>
                        <p class="text-notification">You earned <small class="star-number">25</small>
                            <ion-icon class="star-notification" name="md-star"></ion-icon> with 3 tags</p>
                    </ion-item>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-item class="user-notification">
                    <ion-avatar item-start>
                        <img class="user-image" src="img/profile.jpg">
                    </ion-avatar>
                    <div class="username">
                        <small class="user-name">Chicken chika</small>
                    </div>
                </ion-item>
            </ion-row>
        </ion-item>



    </ion-list>
</ion-content>

这里是 css:

page-notification {
    .item-md {
        padding-left: 16px;
        padding-right: 0;
        position: relative;
        font-size: 1.6rem;
        font-weight: normal;
        height: 110px;
        text-transform: none;
        color: #000;
        background-color: #fff;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .notification-informations {
        padding-left: 5px;
        height: 35px;
    }
    .col {
        padding: 0;
    }
    .star-notification {
        color: color($colors, starcolor);
    }
    .star-number {
        font-weight: 600;
        font-size: 13px;
        color: color($colors, profileblue);
    }
    .item {
        border-style: none
    }
    .date-notification {
        margin-left: -8px;
        font-size: 8px;
        color: color($colors, icon-stat);
    }
    .text-notification {
        color: color($colors, icon-stat);
        font-weight: 500;
        font-size: 13px;
        margin-top: 4px;
    }
    .user-notification {
        height: 20px;
        padding-left: 0;
    }
    .user-image {
        border-radius: 50%;
        width: 20px;
        height: 20px;
    }
    img>.user-image {
        width: 20px;
        height: 20px;
    }
    .item-md ion-avatar img {
        border-radius: 50%;
        overflow: hidden;
        width: 25px;
        height: 25px;
    }
    .item-md ion-avatar[item-start],
    .item-md ion-thumbnail[item-start] {
        margin: 30px -5px 4px 5px;
    }
    page-notification .label-md {
        margin-top: 13px;
        margin: -9px 8px 13px 0;
    }
    .user-name {
        color: color($colors, profileblue);
        font-weight: 600;
    }
    .username {
        margin-top: 17px;
    }
    .item-md ion-thumbnail img {
        width: 60px;
        height: 60px;
    }
    .notification-title {
        font-size: 15px;
    }
}

有人可以帮助正确创建元素设计正确的列表吗？提前致谢

Answer 1

看不到与您的代码相关的任何问题。您所要做的就是删除 border-bottoms(您可以使用 border:0 来完成)并为 ion-list 上方的 Survey 部分创建一张卡片。

我用你的代码创建了一个 plunker。 see this