<template>
    <!-- 展示信息列表 -->
    <div class="main">
        <div class="item" v-for="(item,index) in list" :key="index">
            <div class="item-left">{{item.name}}</div>
            <div
                class="item-right ellips"
                :style="{color:item.color?item.color:''}"
            >{{item.content}}</div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            /**
             *
             * @example
             * [{ name: "运费", content: "2010-2014", color: "red" }]
             * color=> color用来覆盖右边文字的颜色
             */
            list: {
                type: Array,
                required: true
            }
        },
        data() {
            return {
                // 参考  color=>覆盖右边的文字颜色
                // list: [
                //     {
                //         name: "订单编号",
                //         content: "2010-2014地方"
                //     },
                //     { name: "运费", content: "2010-2014", color: "red" }
                // ]
            };
        }
    };
</script>
<style lang='less' scoped>
    .main {
        padding: 0 0.3rem;
        .item {
            display: flex;
            justify-content: space-between;
            height: 0.7rem;
            line-height: 0.7rem;
            font-size: 0.3rem;
            color: #333333;
            &:not(:nth-last-of-type(1)) {
                border-bottom: 0.01rem solid #f1f1f1;
            }
            .item-right {
                flex: 1;
                margin-left: 0.2rem;
                color: #999999;
                text-align: right;
                line-height: 0.7rem;
            }
            .item-left {
                max-width: 1.3rem;
            }
        }
    }
</style>