.ul-ad-list {}

.ul-ad-item {
    box-shadow: 1px 1px 8px #666;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    margin-bottom: 15px;
}

.ul-ad-left {
    width: 72%;
    height: 170px;
}

.ul-ad-img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.ul-ad-right {
    width: 25%;
}

.ul-ad-title {
    font-size: 28px;
    font-weight: 100;
    margin: 0;
    color: #e4393c;

}

.ul-ad-desc {
    font-size: 14px;
    color: #666666;
    margin: 26px 0;
    line-height: 24px;
}

.ul-ad-item {
  box-shadow: 1px 1px 8px #666;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  margin-bottom: 15px;
}
.ul-ad-left {
  width: 72%;
  height: 170px;
}
.ul-ad-img {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.ul-ad-right {
  width: 25%;
}
.ul-ad-title {
  font-size: 28px;
  font-weight: 100;
  margin: 0;
  color: #e4393c;
}
.ul-ad-desc {
  font-size: 14px;
  color: #666666;
  margin: 26px 0;
  line-height: 24px;
}

<view class="ul-ad-list">
    <view class="ul-ad-item" data-repeat="3">
        <view class="ul-ad-left">
            <view class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></view>
        </view>
        <view class="ul-ad-right">
            <view class="ul-ad-title">福牛迎春</view>
            <view class="ul-ad-desc">天天送大礼</view>
            <view class="ul-ad-options">
                <view class="layui-btn">查看详情</view>
            </view>
        </view>
    </view>
</view>

.ul-avatar-list {

    /* 用户头像开始 */
    .ul-avatar-list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px;
        background-color: rgb(229, 228, 228);
    }

    .ul-avatar-list-item.current {
        background-color: rgb(216, 215, 215);
    }

    .ul-avatar-list-item-img {
        height: 48px;
        width: 48px;
        background-image: url("/static/images/avatar.png");
        background-size: cover;
        background-position: center;
        border-radius: 3px;
        background-color: #fff;
    }

    .ul-avatar-list-item-info {
        margin-left: 10px;
        position: relative;
        width: calc(100% - 48px - 10px);
    }

    .ul-avatar-list-item-time {
        position: absolute;
        right: 0;
        top: 0;
        color: rgb(187, 187, 187);
    }

    .ul-avatar-list-item-tips {
        color: rgb(187, 187, 187);
        font-size: 14px;
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

@charset "UTF-8";
.ul-avatar-list {
  /* 用户头像开始 */
}
.ul-avatar-list .ul-avatar-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background-color: #e5e4e4;
}
.ul-avatar-list .ul-avatar-list-item.current {
  background-color: #d8d7d7;
}
.ul-avatar-list .ul-avatar-list-item-img {
  height: 48px;
  width: 48px;
  background-image: url("/static/images/avatar.png");
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  background-color: #fff;
}
.ul-avatar-list .ul-avatar-list-item-info {
  margin-left: 10px;
  position: relative;
  width: calc(100% - 48px - 10px);
}
.ul-avatar-list .ul-avatar-list-item-time {
  position: absolute;
  right: 0;
  top: 0;
  color: #bbb;
}
.ul-avatar-list .ul-avatar-list-item-tips {
  color: #bbb;
  font-size: 14px;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

<view class="ul-avatar-list">
    <view class="ul-avatar-list-item">
        <view class="ul-avatar-list-item-img"></view>
        <view class="ul-avatar-list-item-info">
            <view class="ul-avatar-list-item-title">张三</view>
            <view class="ul-avatar-list-item-tips">深山旅馆电话事件的最新消息 </view>
            <view class="ul-avatar-list-item-time">19:54</view>
        </view>
    </view>
    <view class="ul-avatar-list-item">
        <view class="ul-avatar-list-item-img"></view>
        <view class="ul-avatar-list-item-info">
            <view class="ul-avatar-list-item-title">张三</view>
            <view class="ul-avatar-list-item-tips">深山旅馆电话事件的最新消息 </view>
            <view class="ul-avatar-list-item-time">19:54</view>
        </view>
    </view>
</view>
<view class="ul-avatar-list" style="width: 400px;">
    <view class="ul-avatar-list-item">
        <view class="ul-avatar-list-item-img"></view>
        <view class="ul-avatar-list-item-info">
            <view class="ul-avatar-list-item-title">张三</view>
            <view class="ul-avatar-list-item-tips">深山旅馆电话事件的最新消息 </view>
            <view class="ul-avatar-list-item-time">19:54</view>
        </view>
    </view>
    <view class="ul-avatar-list-item">
        <view class="ul-avatar-list-item-img"></view>
        <view class="ul-avatar-list-item-info">
            <view class="ul-avatar-list-item-title">张三</view>
            <view class="ul-avatar-list-item-tips">深山旅馆电话事件的最新消息 </view>
            <view class="ul-avatar-list-item-time">19:54</view>
        </view>
    </view>
</view>
<view class="ul-avatar-list" style="width: 200px;">
    <view class="ul-avatar-list-item current">
        <view class="ul-avatar-list-item-img"></view>
        <view class="ul-avatar-list-item-info">
            <view class="ul-avatar-list-item-title">张三</view>
            <view class="ul-avatar-list-item-tips">深山旅馆电话事件的最新消息 </view>
            <view class="ul-avatar-list-item-time">19:54</view>
        </view>
    </view>
    <view class="ul-avatar-list-item">
        <view class="ul-avatar-list-item-img"></view>
        <view class="ul-avatar-list-item-info">
            <view class="ul-avatar-list-item-title">张三</view>
            <view class="ul-avatar-list-item-tips">深山旅馆电话事件的最新消息 </view>
            <view class="ul-avatar-list-item-time">19:54</view>
        </view>
    </view>
</view>

.ul-avatar-sidebar-list {

    .ul-avatar-sidebar-list-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 12px;

        &:not(:last-child) {
            margin-bottom: 12px;
        }
    }

    .ul-avatar-sidebar-list-item-img {
        width: 58px;
        height: 58px;
        border-radius: 58px;
        background-image: url("/static/images/avatar.png");
        background-size: cover;
        background-position: center;

    }

    .ul-avatar-sidebar-list-item-info {
        margin-left: 10px;
    }

    .ul-avatar-sidebar-list-item-intro {
        font-size: 12px;
        color: #999;
        line-height: 2;
    }
}

.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item:not(:last-child) {
  margin-bottom: 12px;
}
.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item-img {
  width: 58px;
  height: 58px;
  border-radius: 58px;
  background-image: url("/static/images/avatar.png");
  background-size: cover;
  background-position: center;
}
.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item-info {
  margin-left: 10px;
}
.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item-intro {
  font-size: 12px;
  color: #999;
  line-height: 2;
}

<view class="ul-avatar-sidebar-list" style="width: 200px;">
    <view class="ul-avatar-sidebar-list-item" data-repeat="3">
        <view class="ul-avatar-sidebar-list-item-img"></view>
        <view class="ul-avatar-sidebar-list-item-info">
            <view class="ul-avatar-sidebar-list-item-title">张三</view>
            <view class="ul-avatar-sidebar-list-item-intro">法外狂徒不寂寞</view>
        </view>
    </view>
</view>

.ul-book-list {
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    flex-wrap      : wrap;
}

.ul-book-item {
    width          : 140px;
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
    margin-bottom  : 15px;
    margin-right   : 15px;
    cursor         : pointer;
    border         : 1px solid transparent;
}

.ul-book-item:hover {
    border-color: #ddd;
}

.ul-book-poster {
    background-image      : url(../img/book-bg.png);
    background-size       : cover;
    background-position   : center;
    width                 : 60px;
    height                : 80px;
    /* margin-right       : 15px; */
}

.ul-book-info {
    position: relative;
    height  : 80px;
    width   : 75px;
}

.ul-book-title {
    font-size         : 16px;
    color             : #3e3a39;
    margin-bottom     : 6px;
    font-weight       : 600;
    line-height       : 1.5;
    word-break        : break-all;
    text-overflow     : ellipsis;
    display           : -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow          : hidden;
}

.ul-book-author {
    font-size : 12px;
    color     : #3e3a39;
    word-break: break-all;
}

.ul-book-status {
    font-size: 12px;
    color    : #99999a;
    position : absolute;
    bottom   : 0;
    left     : 0;
}

.ul-book-list.big .ul-book-item {
    width: 240px;
}

.ul-book-list.big .ul-book-poster {
    width : 120px;
    height: 160px;
}

.ul-book-list.big .ul-book-info {
    height: 160px;
    width : 110px;
}

.ul-book-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ul-book-item {
  width: 140px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 15px;
  margin-right: 15px;
  cursor: pointer;
  border: 1px solid transparent;
}
.ul-book-item:hover {
  border-color: #ddd;
}
.ul-book-poster {
  background-image: url(../img/book-bg.png);
  background-size: cover;
  background-position: center;
  width: 60px;
  height: 80px;
  /* margin-right       : 15px; */
}
.ul-book-info {
  position: relative;
  height: 80px;
  width: 75px;
}
.ul-book-title {
  font-size: 16px;
  color: #3e3a39;
  margin-bottom: 6px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ul-book-author {
  font-size: 12px;
  color: #3e3a39;
  word-break: break-all;
}
.ul-book-status {
  font-size: 12px;
  color: #99999a;
  position: absolute;
  bottom: 0;
  left: 0;
}
.ul-book-list.big .ul-book-item {
  width: 240px;
}
.ul-book-list.big .ul-book-poster {
  width: 120px;
  height: 160px;
}
.ul-book-list.big .ul-book-info {
  height: 160px;
  width: 110px;
}

<view class="layui-word-aux">一般大小</view>
<view class="ul-book-list">
    <view class="ul-book-item" data-repeat="6">
        <view class="ul-book-poster" style="background-image: url('/static/images/view.jpg');"></view>
        <view class="ul-book-info">
            <view class="ul-book-title">三体</view>
            <view class="ul-book-author">刘慈欣</view>
            <view class="ul-book-status">阅读次数333</view>
        </view>
    </view>
</view>
<view class="layui-word-aux">大号</view>
<view class="ul-book-list big">
    <view class="ul-book-item" data-repeat="6">
        <view class="ul-book-poster" style="background-image: url('/static/images/view.jpg');"></view>
        <view class="ul-book-info">
            <view class="ul-book-title">三体</view>
            <view class="ul-book-author">刘慈欣</view>
            <view class="ul-book-status"><span>阅读</span><span>3333</span></view>
        </view>
    </view>
</view>

.ul-course-list {
    margin: -10px;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
}

.ul-course-item {
    display: inline-block;
    margin: 10px;
    width: calc(25% - 20px);
    background-color: #fff;
    padding-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
}

.ul-course-item-poster {
    background-position: center;
    background-size: cover;
    height: 140px;
    transition: all 0.6s;
    position: relative;
}

.ul-course-item-tag {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 9999;
}

.ul-course-item-info {
    padding: 6px;
}

.ul-course-item-title {
    padding: 8px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ul-course-item-option-item {
    display: inline-block;
    margin-right: 8px;
    font-size: 12px;
    color: #999;
}

.ul-course-item-poster:hover {
    transform: scale(1.2)
}

.ul-course-item-poster-container:hover .ul-course-item-tag {
    display: none;
}

.ul-course-item-poster-container {
    overflow: hidden;
    position: relative;
}

.ul-course-list {
  margin: -10px;
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
}
.ul-course-item {
  display: inline-block;
  margin: 10px;
  width: calc(25% - 20px);
  background-color: #fff;
  padding-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
}
.ul-course-item-poster {
  background-position: center;
  background-size: cover;
  height: 140px;
  transition: all 0.6s;
  position: relative;
}
.ul-course-item-tag {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 9999;
}
.ul-course-item-info {
  padding: 6px;
}
.ul-course-item-title {
  padding: 8px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ul-course-item-option-item {
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  color: #999;
}
.ul-course-item-poster:hover {
  transform: scale(1.2);
}
.ul-course-item-poster-container:hover .ul-course-item-tag {
  display: none;
}
.ul-course-item-poster-container {
  overflow: hidden;
  position: relative;
}

<view class="ul-course-list">
    <a class="ul-course-item" data-repeat="10">
        <view class="ul-course-item-poster-container">
            <view class="layui-btn layui-btn-xs ul-course-item-tag">免费 </view>
            <view class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');"></view>
        </view>
        <view class="ul-course-item-info">
            <view class="ul-course-item-title">PHP8最新特性介绍和演示</view>
            <view class="ul-course-item-options">
                <view class="ul-course-item-option-item ul-color-main">免费 </view>
                <view class="ul-course-item-option-item">初级</view>
                <view class="ul-course-item-option-item">3节课</view>
                <view class="ul-course-item-option-item">1人报名</view>
            </view>
        </view>
    </a>
</view>

.ul-course-sidebar-list {}

.ul-course-sidebar-item {
    display: flex;
    padding: 8px 0;
    align-items: center;
    justify-content: flex-start;
}

.ul-course-sidebar-item:not(:last-child) {
    border-bottom: 1px dotted #999;
}

.ul-course-sidebar-item-poster {
    height: 50px;
    width: 80px;
    background-size: cover;
    background-position: center;

}

.ul-course-sidebar-item-option-item {
    display: inline-block;
    font-size: 12px;
    color: #999;
}

.ul-course-sidebar-item-info {
    margin-left: 8px;
}

.ul-course-sidebar-item-title {
    line-height: 2;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ul-course-sidebar-item {
  display: flex;
  padding: 8px 0;
  align-items: center;
  justify-content: flex-start;
}
.ul-course-sidebar-item:not(:last-child) {
  border-bottom: 1px dotted #999;
}
.ul-course-sidebar-item-poster {
  height: 50px;
  width: 80px;
  background-size: cover;
  background-position: center;
}
.ul-course-sidebar-item-option-item {
  display: inline-block;
  font-size: 12px;
  color: #999;
}
.ul-course-sidebar-item-info {
  margin-left: 8px;
}
.ul-course-sidebar-item-title {
  line-height: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<view class="ul-course-sidebar-list">
    <a class="ul-course-sidebar-item" data-repeat="4">
        <view class="ul-course-sidebar-item-poster-container">
            <view class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');"></view>
        </view>
        <view class="ul-course-sidebar-item-info">
            <view class="ul-course-sidebar-item-title">PHP8最新特性介绍和演示</view>
            <view class="ul-course-sidebar-item-options">
                <view class="ul-course-sidebar-item-option-item ul-color-main">免费 </view>
                <view class="ul-course-sidebar-item-option-item">初级</view>
                <view class="ul-course-sidebar-item-option-item">3节课</view>
            </view>
        </view>
    </a>
</view>

.ul-list-record {
    .item-record {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        box-shadow: 0px 0px 4px rgba(77, 85, 114, 0.1);
        padding: 12px;
        margin-bottom: 9px;
        border-radius: 12px;

        .right {
            text-align: right;
        }

        .item-name {
            font-size: 14px;
        }

        .item-desc {
            font-size: 12px;
            color: #999;
            margin-top: 6px;
        }

        .item-change {
            font-weight: 600;
            color: green;

            &.status-2 {
                color: orangered
            }
        }
    }
}

.ul-list-record .item-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  box-shadow: 0px 0px 4px rgba(77, 85, 114, 0.1);
  padding: 12px;
  margin-bottom: 9px;
  border-radius: 12px;
}
.ul-list-record .item-record .right {
  text-align: right;
}
.ul-list-record .item-record .item-name {
  font-size: 14px;
}
.ul-list-record .item-record .item-desc {
  font-size: 12px;
  color: #999;
  margin-top: 6px;
}
.ul-list-record .item-record .item-change {
  font-weight: 600;
  color: green;
}
.ul-list-record .item-record .item-change.status-2 {
  color: orangered;
}

<view class="ul-list-record">
    <view class="item-record" data-repeat="3">
        <view class="left">
            <view class="item-name">充值 </view>
            <view class="item-desc">小程序端充值 </view>
        </view>
        <view class="right">
            <view class="item-change">+1000</view>
            <view class="item-desc">2023年4月10日21:12:23</view>
        </view>
    </view>
    <view class="item-record">
        <view class="left">
            <view class="item-name">消费</view>
            <view class="item-desc">商城消费</view>
        </view>
        <view class="right">
            <view class="item-change status-2">-1000</view>
            <view class="item-desc">2023年4月10日21:12:23</view>
        </view>
    </view>
</view>

.ul-list-user-info {
    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px;
        background-color: #fff;

        &:not(:last-child) {
            border-bottom: 1px solid #eee;
        }

        .info {

            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-shrink: 1;

            .main {
                margin-left: 9px;

                .header {
                    display: flex;
                    align-items: center;
                    margin-bottom: 8px;

                    .name {
                        font-size: 14px;
                        font-weight: 500;
                        margin-right: 6px;
                    }
                }

                .content {
                    display: flex;
                    flex-wrap: wrap;

                    margin-bottom: 6px;
                }

                .footer {
                    display: flex;
                    align-items: flex-end;
                }
            }

        }

    }

    .tag-item {
        font-size: 10px;
        background-color: #c6e6fe;
        color: #0091ff;
        padding: 2px 4px;
        border-radius: 3px 3px 3px 0;
        margin-right: 6px;
    }

    .info-item {
        color: #999;
        margin-right: 6px;
        font-size: 12px;
    }

    .title-item {
        font-size: 14px;
        font-weight: 500;
        margin-right: 6px;
    }

    .text-item {
        color: #1E9FFF;
        margin-right: 6px;
        font-size: 12px;
        line-height: 18px;
    }
}

.ul-list-user-info .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px;
  background-color: #fff;
}
.ul-list-user-info .item:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.ul-list-user-info .item .info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 1;
}
.ul-list-user-info .item .info .main {
  margin-left: 9px;
}
.ul-list-user-info .item .info .main .header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.ul-list-user-info .item .info .main .header .name {
  font-size: 14px;
  font-weight: 500;
  margin-right: 6px;
}
.ul-list-user-info .item .info .main .content {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ul-list-user-info .item .info .main .footer {
  display: flex;
  align-items: flex-end;
}
.ul-list-user-info .tag-item {
  font-size: 10px;
  background-color: #c6e6fe;
  color: #0091ff;
  padding: 2px 4px;
  border-radius: 3px 3px 3px 0;
  margin-right: 6px;
}
.ul-list-user-info .info-item {
  color: #999;
  margin-right: 6px;
  font-size: 12px;
}
.ul-list-user-info .title-item {
  font-size: 14px;
  font-weight: 500;
  margin-right: 6px;
}
.ul-list-user-info .text-item {
  color: #1E9FFF;
  margin-right: 6px;
  font-size: 12px;
  line-height: 18px;
}

<view class="ul-list-user-info">
    <view class="item" data-repeat="4">
        <view class="info">
            <view class="avatar ul-demo-img-bg circle" style="width: 60px;height: 60px;"></view>
            <view class="main">
                <view class="header">
                    <view class="name">奥古斯宏</view>
                    <view class="tag-item">8年经验</view>
                    <view class="tag-item">全栈开发 </view>
                </view>
                <view class="content">
                    <view class="info-item">PHP全栈开发 </view>
                    <view class="info-item">开源</view>
                    <view class="info-item">山东</view>
                </view>
                <view class="footer">
                    <view class="title-item">￥ 2200</view>
                    <view class="text-item">山东</view>
                    <view class="text-item">3.3.km</view>
                </view>
            </view>
        </view>
        <view class="option">
            <view class="layui-btn layui-btn-sm">联系</view>
        </view>
    </view>
</view>

.ul-music-list {

    .ul-music-list-item {

        display        : flex;
        align-items    : center;
        justify-content: left;

        padding: 10px;

        &__image {
            width        : 50px;
            height       : 50px;
            border-radius: 5px
        }

        &__number {
            font-size  : 16px;
            font-weight: bolder;
            margin     : 12px;
        }

        &__title {
            color    : #303133;
            font-size: 16px;
        }

        &__dot {
            color    : #303133;
            font-size: 16px;
            margin   : 8px
        }

        &__author {
            color    : #999;
            font-size: 13px;
        }
    }
}

.ul-music-list .ul-music-list-item {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 10px;
}
.ul-music-list .ul-music-list-item__image {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
.ul-music-list .ul-music-list-item__number {
  font-size: 16px;
  font-weight: bolder;
  margin: 12px;
}
.ul-music-list .ul-music-list-item__title {
  color: #303133;
  font-size: 16px;
}
.ul-music-list .ul-music-list-item__dot {
  color: #303133;
  font-size: 16px;
  margin: 8px;
}
.ul-music-list .ul-music-list-item__author {
  color: #999;
  font-size: 13px;
}

<view class="ul-music-list">
    <view class="ul-music-list-item" v-for="i in 3">
        <view class="ul-music-list-item__image ul-demo-img-bg"></view>
        <view class="ul-music-list-item__number">{{i}}</view>
        <view class="ul-music-list-item__title">星星点灯</view>
        <view class="ul-music-list-item__dot">-</view>
        <view class="ul-music-list-item__author">郑智化</view>
    </view>
</view>

.ul-note-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    cursor: pointer;
    padding: 15px;
}

.ul-note-item.current,
.ul-note-item:hover {
    background-color: #dedede;
}

.ul-note-item .ul-note-item-icon {
    margin-right: 10px;
}

.ul-note-item .ul-note-item-desc {
    color: #999;
    font-size: 12px;
    margin-top: 5px;
    word-break: break-all;
}

.ul-note-item .ul-note-item-time {
    color: #bbb;
    font-size: 12px;
    margin-top: 5px;
}

.ul-note-item .ul-note-item-tree {
    font-size: 12px;
    color: #bbb;
    margin-top: 5px;
}

.ul-note-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  cursor: pointer;
  padding: 15px;
}
.ul-note-item.current, .ul-note-item:hover {
  background-color: #dedede;
}
.ul-note-item .ul-note-item-icon {
  margin-right: 10px;
}
.ul-note-item .ul-note-item-desc {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
  word-break: break-all;
}
.ul-note-item .ul-note-item-time {
  color: #bbb;
  font-size: 12px;
  margin-top: 5px;
}
.ul-note-item .ul-note-item-tree {
  font-size: 12px;
  color: #bbb;
  margin-top: 5px;
}

<view class="ul-note-list">
    <view class="ul-note-item current">
        <view class="ul-note-item-icon"><i class="layui-icon layui-icon-read"></i></view>
        <view class="ul-note-item-info">
            <view class="ul-note-item-title">未命名的笔记</view>
            <view class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</view>
            <view class="ul-note-item-time">2021-04-11</view>
            <view class="ul-note-item-tree">ddd</view>
        </view>
    </view>
    <view class="ul-note-item">
        <view class="ul-note-item-icon"><i class="layui-icon layui-icon-read"></i></view>
        <view class="ul-note-item-info">
            <view class="ul-note-item-title">未命名的笔记</view>
            <view class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</view>
            <view class="ul-note-item-time">2021-04-11</view>
            <view class="ul-note-item-tree">ddd</view>
        </view>
    </view>
</view>

.ul-order-list-simple-card {
    .item {
        box-shadow   : 0 0 3px #ddd;
        border-radius: 2px;
        padding      : 15px;
        margin-bottom: 15px;
        background-color: #fff;
    }

    .item-header {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        font-size      : 13px;
        margin-bottom  : 5px;

        .item-header-status {
            color: #1E9FFF;
        }
    }

    .item-body {
        margin-top    : 10px;
        padding-bottom: 10px;

        .item-body-item {
            display        : flex;
            align-items    : center;
            justify-content: space-between;
            padding        : 5px 0;

            .item-image {
                width              : 90px;
                height             : 90px;
                background-size    : cover;
                background-position: center;
                box-shadow         : 0 0 2px #999;

            }

            .item-info {
                width      : calc(100% - 90px - 15px);
                margin-left: 15px;
                height     : 90px;
                position   : relative;

                .ul-info-title {
                    font-weight       : 500;
                    font-size         : 15px;
                    margin-bottom     : 5px;
                    text-overflow     : -o-ellipsis-lastline;
                    overflow          : hidden;
                    text-overflow     : ellipsis;
                    display           : -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .ul-info-value {
                    display        : flex;
                    align-items    : center;
                    justify-content: space-between;
                    color          : #999;
                    font-size      : 14px;
                }

                .ul-info-money {
                    position   : absolute;
                    bottom     : 0;
                    left       : 0;
                    font-size  : 15px;
                    font-weight: 600;
                }
            }
        }
    }

    .item-footer {
        padding-top    : 15px;
        margin-top     : 5px;
        border-top     : 1px solid #eee;
        display        : flex;
        align-items    : center;
        justify-content: space-between;
    }
}

.ul-order-list-simple-card .item {
  box-shadow: 0 0 3px #ddd;
  border-radius: 2px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
}
.ul-order-list-simple-card .item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 5px;
}
.ul-order-list-simple-card .item-header .item-header-status {
  color: #1E9FFF;
}
.ul-order-list-simple-card .item-body {
  margin-top: 10px;
  padding-bottom: 10px;
}
.ul-order-list-simple-card .item-body .item-body-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}
.ul-order-list-simple-card .item-body .item-body-item .item-image {
  width: 90px;
  height: 90px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 2px #999;
}
.ul-order-list-simple-card .item-body .item-body-item .item-info {
  width: calc(100% - 90px - 15px);
  margin-left: 15px;
  height: 90px;
  position: relative;
}
.ul-order-list-simple-card .item-body .item-body-item .item-info .ul-info-title {
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 5px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ul-order-list-simple-card .item-body .item-body-item .item-info .ul-info-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #999;
  font-size: 14px;
}
.ul-order-list-simple-card .item-body .item-body-item .item-info .ul-info-money {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 15px;
  font-weight: 600;
}
.ul-order-list-simple-card .item-footer {
  padding-top: 15px;
  margin-top: 5px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<view class="ul-order-list-simple-card">
    <view class="item" v-for="i in 3">
        <view class="item-header">
            <view class="item-header-title"><i class="layui-icon layui-icon-home"></i> 奥宏商店</view>
            <view class="item-header-status">处理中</view>
        </view>
        <view class="item-body">
            <view class="item-body-item">
                <view class="item-image ul-demo-img-bg"></view>
                <view class="item-info">
                    <view class="ul-info-title">商品名称商品名称商品名称商品名称商品名称商品名称</view>
                    <view class="ul-info-value">
                        <view class="ul-info-value-item">500ml</view>
                        <view class="ul-info-value-item">数量×2</view>
                    </view>
                    <view class="ul-info-money">￥1300.00</view>
                </view>
            </view>
        </view>
        <view class="item-footer">
            <view class="item-footer-item">2022年4月4日11:31:24</view>
            <view class="item-footer-item">
                <view class="">
                    <view class="layui-btn layui-btn-sm layui-btn-primary">取消</view>
                    <view class="layui-btn layui-btn-sm layui-btn-normal">评价</view>
                </view>
            </view>
        </view>
    </view>
</view>

.ul-photo-card-list {
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    flex-wrap      : wrap;
}

.ul-photo-card-item {
    width     : 200px;
    margin    : 15px;
    box-shadow: 0 5px 10px #999;
}

.ul-photo-card-poster {
    width              : 100%;
    height             : 140px;
    background-size    : cover;
    background-position: center;
}

.ul-photo-card-info {
    padding    : 5px;
    font-size  : 18px;
    line-height: 1.5;
}

.ul-photo-card-desc {
    font-size: 14px;
    color    : #999;
}

.ul-photo-card-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ul-photo-card-item {
  width: 200px;
  margin: 15px;
  box-shadow: 0 5px 10px #999;
}
.ul-photo-card-poster {
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
}
.ul-photo-card-info {
  padding: 5px;
  font-size: 18px;
  line-height: 1.5;
}
.ul-photo-card-desc {
  font-size: 14px;
  color: #999;
}

<view class="ul-photo-card-list">
    <view class="ul-photo-card-item" data-repeat="7">
        <view class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');"></view>
        <view class="ul-photo-card-info">
            <view class="ul-photo-card-title">周末野外广场树林写真</view>
            <view class="ul-photo-card-desc">相册说明内容</view>
            <view class="ul-photo-card-plus">45P+1V</view>
        </view>
    </view>
</view>

.ul-photo-list {
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    flex-wrap      : wrap;
}

.ul-photo-item {
    margin    : 15px;
    text-align: center;
    min-width : 220px;
}

.ul-photo-poster {
    width              : 180px;
    height             : 140px;
    background-image   : url("../static/images/avatar.png");
    background-size    : cover;
    background-position: center;
    margin             : 0 auto;
    box-shadow         : 1px 1px 3px #999;
}

.ul-photo-info {
    margin-top : 10px;
    font-size  : 18px;
    line-height: 1.5;
}

.ul-photo-desc {
    font-size: 14px;
    color    : #999;
}

.ul-photo-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ul-photo-item {
  margin: 15px;
  text-align: center;
  min-width: 220px;
}
.ul-photo-poster {
  width: 180px;
  height: 140px;
  background-image: url("../static/images/avatar.png");
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  box-shadow: 1px 1px 3px #999;
}
.ul-photo-info {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.5;
}
.ul-photo-desc {
  font-size: 14px;
  color: #999;
}

<view class="ul-photo-list">
    <view class="ul-photo-item" data-repeat="3">
        <view class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');"></view>
        <view class="ul-photo-info">
            <view class="ul-photo-title">周末野外广场树林写真</view>
            <view class="ul-photo-plus">45P+1V</view>
            <view class="ul-photo-desc">相册说明内容</view>
        </view>
    </view>
</view>

.ul-photo-list-b {
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    flex-wrap      : wrap;

    .ul-photo-item {
        margin    : 15px;
        text-align: left;
        width     : 200px;
    }

    .ul-photo-poster {
        width              : 100%;
        height             : 120px;
        background-image   : url("../static/images/avatar.png");
        background-size    : cover;
        background-position: center;
        margin             : 0 auto;
        box-shadow         : 1px 1px 3px #bbb;
    }

    .ul-photo-info {
        margin-top : 10px;
        font-size  : 18px;
        line-height: 1.5;
    }

}

.ul-photo-list-b {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ul-photo-list-b .ul-photo-item {
  margin: 15px;
  text-align: left;
  width: 200px;
}
.ul-photo-list-b .ul-photo-poster {
  width: 100%;
  height: 120px;
  background-image: url("../static/images/avatar.png");
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  box-shadow: 1px 1px 3px #bbb;
}
.ul-photo-list-b .ul-photo-info {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.5;
}

<view class="ul-photo-list-b">
    <view class="ul-photo-item" data-repeat="3">
        <view class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');"></view>
        <view class="ul-photo-info">
            <view class="ul-photo-title">周末野外广场树林写真</view>
            <view class="ul-photo-desc">相册说明内容</view>
        </view>
    </view>
</view>

.ul-site-group {
    margin-bottom: 8px;
}

.ul-site-group-header {
    font-size     : 16px;
    color         : #333;
    padding-bottom: 8px;
}

.ul-site-list {
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    flex-wrap      : wrap;
    margin-top     : 8px;
}

.ul-site-item {
    width          : 20%;
    margin-right   : 5%;
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    margin-bottom  : 15px;


    &.card {
        background-color: #fff;
        border-radius   : 5px;
        padding         : 10px;
        margin-right    : 15px;
    }

    &.same-height {
        align-self: normal;
    }
}

.ul-site-item-logo {
    width              : 34px;
    height             : 34px;
    margin-right       : 8px;
    margin-top         : 4px;
    background-size    : cover;
    background-position: center;


}


.ul-site-item-info {
    width: calc(100% - 34px);

}

.ul-site-item-title {
    color          : #4662d9;
    font-weight    : bold;
    text-decoration: none;
}

.ul-site-item-desc {
    font-size: 12px;
    color    : #666;
}

@media screen and (max-width:450px) {

    .ul-site-list {
        display        : flex;
        align-items    : flex-start;
        justify-content: space-between;

        .ul-site-item {
            width       : calc(50% - 10px);
            margin-right: 0;

            &.card {
                width: calc(50% - 30px);
            }
        }

        .ul-site-item-desc {
            font-size : 11px;
            margin-top: 3px;
        }
    }
}

.ul-site-group {
  margin-bottom: 8px;
}
.ul-site-group-header {
  font-size: 16px;
  color: #333;
  padding-bottom: 8px;
}
.ul-site-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ul-site-item {
  width: 20%;
  margin-right: 5%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 15px;
}
.ul-site-item.card {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin-right: 15px;
}
.ul-site-item.same-height {
  align-self: normal;
}
.ul-site-item-logo {
  width: 34px;
  height: 34px;
  margin-right: 8px;
  margin-top: 4px;
  background-size: cover;
  background-position: center;
}
.ul-site-item-info {
  width: calc(100% - 34px);
}
.ul-site-item-title {
  color: #4662d9;
  font-weight: bold;
  text-decoration: none;
}
.ul-site-item-desc {
  font-size: 12px;
  color: #666;
}
@media screen and (max-width: 450px) {
  .ul-site-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .ul-site-list .ul-site-item {
    width: calc(50% - 10px);
    margin-right: 0;
  }
  .ul-site-list .ul-site-item.card {
    width: calc(50% - 30px);
  }
  .ul-site-list .ul-site-item-desc {
    font-size: 11px;
    margin-top: 3px;
  }
}

<view class="ul-site-group">
    <view class="ul-site-group-header">基础样式</view>
    <view class="ul-site-list">
        <view class="ul-site-item" v-for="i in 5">
            <view class="ul-site-item-logo ul-demo-img-bg"></view>
            <view class="ul-site-item-info">
                <view class="ul-site-item-title">layui奥宏样式库</view>
                <view class="ul-site-item-desc">纯CSS的组件案例样式大全 </view>
            </view>
        </view>
        <view class="ul-site-item">
            <view class="ul-site-item-logo ul-demo-img-bg"></view>
            <view class="ul-site-item-info">
                <view class="ul-site-item-title">高度修复</view>
                <view class="ul-site-item-desc">纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全 </view>
            </view>
        </view>
    </view>
</view>
<view class="ul-site-group">
    <view class="ul-site-group-header">卡片</view>
    <view class="ul-site-list">
        <view class="ul-site-item card" v-for="i in 5">
            <view class="ul-site-item-logo ul-demo-img-bg"></view>
            <view class="ul-site-item-info">
                <view class="ul-site-item-title">layui奥宏样式</view>
                <view class="ul-site-item-desc">纯CSS的组件</view>
            </view>
        </view>
        <view class="ul-site-item card">
            <view class="ul-site-item-logo ul-demo-img-bg"></view>
            <view class="ul-site-item-info">
                <view class="ul-site-item-title">高度修复</view>
                <view class="ul-site-item-desc">纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全 </view>
            </view>
        </view>
    </view>
</view>
<view class="ul-site-group">
    <view class="ul-site-group-header">卡片(修复高度)</view>
    <view class="ul-site-list">
        <view class="ul-site-item card same-height" v-for="i in 5">
            <view class="ul-site-item-logo ul-demo-img-bg"></view>
            <view class="ul-site-item-info">
                <view class="ul-site-item-title">layui奥宏样式</view>
                <view class="ul-site-item-desc">纯CSS的组件</view>
            </view>
        </view>
        <view class="ul-site-item card same-height">
            <view class="ul-site-item-logo ul-demo-img-bg"></view>
            <view class="ul-site-item-info">
                <view class="ul-site-item-title">高度修复</view>
                <view class="ul-site-item-desc">纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全 </view>
            </view>
        </view>
    </view>
</view>