<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="">
        <button type="button" @click="list[0].projectName = '修改过的title'">change first title</button>
    </div>
    <div class="list-b-item" v-for="item in list" :key="item.leadsId">
        <h4>{{ item.projectName }}</h4>
        <p>{{ item.abstract }}</p>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            list: []
        };
    },
    params: ['v'],
    api(){
        let type = this.$route.query.v === '1' ? 'a' : 'b';
        let list;
        this.$api({
            url: '/data/list-tab-' + type + '.json',
            params: {
                tab: "finance",
                page: 0,
                limit: 20
            }
        }).then(res => {
            list = res.data.data.ups.filter(item => type === 'a' ? item.type === 'leads' : item.type !== "count");
        });
        return new Promise((res ,rej) => {
            setTimeout(function(){ this.list = list; res(); }.bind(this), 1500);
        });
    },
}
</script>

<style scoped>
.about {
    width: 460px;
    margin: auto;
}
.list-b-item {
    text-align: right;
    margin: 10px 0;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fafafa;
}
.list-b-item h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
}
.list-b-item p {
    margin: 0
}
</style>
