lw_test/public/static/mobile/js/components/articleList.js

app.component('article-list', {
    template: `
    <style>
        .article-list article{box-shadow:0 0 6px rgba(0, 0, 0, 0.028), 0 0 18px rgba(0, 0, 0, 0.042), 0 0 80px rgba(0, 0, 0, 0.07);border-radius: 5px;width:95%;height:110px;margin:10px auto;display:flex;align-items:center;background:white;padding:5px 10px;}
        .article-list article .s-left {height:90px;display:flex;flex-direction:column;width: 100%;}
        .article-list article .s-left.image {width: calc(100% - 120px);}
        .article-list article .s-left .s-title{font-size: 16px;text-overflow: ellipsis;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-box-pack: center;-webkit-box-align: center;-webkit-line-clamp: 3;}
        .article-list article .s-left .s-time{font-size: 12px;color:#999;margin-top:auto;}
        .article-list article .s-right {width:110px;margin-left:auto;}
    </style>
    <div class="article-list">
        <article v-for="item in list" @click="toDetail(item.id)">
            <section class="s-left" :class="{image:!!item.header_image}">
                <div class="s-title">{{item.title}}</div>
                <div class="s-time">{{item.update_time}}</div>
            </section>
            <section class="s-right" v-if="item.header_image">
                <van-image
                        width="110"
                        height="85"
                        fit="cover"
                        :src="item.header_image"
                ></van-image>
            </section>
        </article>
    </div>
    `,
    data() {
        return {}
    },
    props: {
        list: {
            type: Array,
            default: [],
        },
    },
    methods: {
        toDetail(id) {
            location.href = "/mobile/article/detail.html?id=" + id;
        },
    },
});