yql/components/uni-ui/tab-nvue/mediaList.nvue

<template>
    <div>
        <div class="list-cell" @click="bindClick">
            <div class="media-list" v-if="data.title">
                <div :class="[isImgRight?'media-image-right':'',isImgLeft?'media-image-left':'']">
                    <text :class="['media-title',isImgRight||isImgLeft?'media-title2':'']">{{data.title}}</text>
                    <div v-if="showImg" :class="['image-section',isImgRight?'image-section-right':'',isImgLeft?'image-section-left':'']">
                        <image :class="['image-list1',isImgRight||isImgLeft?'image-list2':'']" v-if="data.image_url"
                            :src="data.image_url"></image>
                        <image class="image-list3" v-if="data.image_list" :src="source.url" v-for="(source, i) in data.image_list"
                            :key="i" />
                    </div>
                </div>
                <div class="media-foot">
                    <div class="media-info">
                        <text class="info-text">{{data.source}}</text>
                        <text class="info-text">{{data.comment_count}}条评论</text>
                        <text class="info-text">{{data.datetime}}</text>
                    </div>
                    <div class="max-close-view" @click="close">
                        <div class="close-view"><text class="close">×</text></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            data: {
                type: Object,
                default: function(e) {
                    return {}
                }
            }
        },
        computed: {
            isImgRight() {
                return this.data.article_type === 2
            },
            isImgLeft() {
                return this.data.article_type === 1
            },
            showImg() {
                return this.data.image_list || this.data.image_url
            }
        },
        methods: {
            close(e) {
                this.$emit('close');
                e.stopPropagation();
            },
            bindClick() {
                this.$emit('click');
            }
        }
    }
</script>

<style>
    .list-cell {
        width: 750px;
        padding: 0 30px;
    }

    .list-cell:active {
        background-color: #eeeeee;
    }

    .media-list {
        flex: 1;
        flex-direction: column;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #c8c7cc;
        padding: 20px 0;
    }

    .media-image-right {
        flex-direction: row;
    }

    .media-image-left {
        flex-direction: row-reverse;
    }

    .media-title {
        flex: 1;
    }

    .media-title {
        lines: 3;
        text-overflow: ellipsis;
        font-size: 32px;
        color: #555555;
    }

    .media-title2 {
        flex: 1;
        margin-top: 6px;
        line-height: 40px;
    }

    .image-section {
        margin-top: 20px;
        flex-direction: row;
        justify-content: space-between;
    }

    .image-section-right {
        margin-top: 0px;
        margin-left: 10px;
        width: 225px;
        height: 146px;
    }

    .image-section-left {
        margin-top: 0px;
        margin-right: 10px;
        width: 225px;
        height: 146px;
    }

    .image-list1 {
        width: 690px;
        height: 481px;
    }

    .image-list2 {
        width: 225px;
        height: 146px;
    }

    .image-list3 {
        width: 225px;
        height: 146px;
    }

    .media-info {
        flex-direction: row;
    }

    .info-text {
        margin-right: 20px;
        color: #999999;
        font-size: 24px;
    }

    .media-foot {
        margin-top: 20px;
        flex-direction: row;
        justify-content: space-between;
    }

    .max-close-view {
        align-items: center;
        justify-content: flex-end;
        flex-direction: row;
        height: 40px;
        width: 80px;
    }

    .close-view {
        border-style: solid;
        border-width: 1px;
        border-color: #999999;
        border-radius: 10px;
        justify-content: center;
        height: 30px;
        width: 40px;
        line-height: 30px;
    }

    .close {
        text-align: center;
        color: #999999;
        font-size: 28px;
    }
</style>