dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterFavoriteItems.vue

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyActivity">
        <div style="margin-left: 30px;margin-right: 30px;margin-top: 10px; " class="myActivity">
            <div>
                <ul>
                    <li class="myActivityLi" v-for="(item,index) in tableData ">
                        <div style="display: inline-block;height: 100%;"><img src="@/assets/img/userCenter/messageImg.gif" alt="" style="width:150px;height: 100%;"></div>
                        <div style="display: inline-block;vertical-align:top">
                            <div class="title">
                                <span>{{item.date}}</span>
                                <span style="color: #ff0000;float: right;font-size: 12px;font-weight: 400;">取消收藏</span>
                            </div>
                            <div class="myActivityLi_data">{{item.address}}</div>
                            <div class="myActivityLi_data ">
                                {{item.address5}}
                            </div>
                            <div class="myActivityLi_data">
                                <span class="">322人关注/一年前发布</span>
                                <span style="margin-left: 50px;">截至日期{{item.endTime}}</span>
                            </div>
                            <div class="myActivityLi_data">
                                项目阶段：招标阶段
                            </div>
                            <div class="myActivityLi_data" style="margin-top: 11px;">
                                <el-tag type="success">国内</el-tag>
                                <el-tag type="info">电力能源</el-tag>
                            </div>
                        </div>
                    </li>
                  
                </ul>
            </div>
        </div>
        <div style="margin-left: 250px;">
            <el-pagination
                style="margin-top: 40px;height: 80px;"
                background
                layout="prev, pager, next"
                :total="1000"  @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
                </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'userCenterMyFollow',
        data () {
            return {
                formInline: {
                    user: '',
                    region: ''
                },
                tableData: [{
                    date: '日本大型海上风电项目',
                    address: '中国  北京市',
                    startTime: '2020-05-25',
                    endTime: '2020-05-31',
                    address5: '海上风电|跨国|咨询',
                    },{
                    date: '2020全球能源互联网大会',
                    address: '中国  北京市',
                    startTime: '2020-05-25',
                    endTime: '2020-05-31',
                    address5: '海上风电|跨国|咨询',
                    },{
                    date: '2020全球能源互联网大会',
                    address: '中国  北京市',
                    startTime: '2020-05-25',
                    endTime: '2020-05-31',
                    address5: '海上风电|跨国|咨询',
                    },{
                    date: '2020全球能源互联网大会',
                    address: '中国  北京市',
                    startTime: '2020-05-25',
                    endTime: '2020-05-31',
                    address5: '海上风电|跨国|咨询',
                    },{
                    date: '2020全球能源互联网大会',
                    address: '中国  北京市',
                    startTime: '2020-05-25',
                    endTime: '2020-05-31',
                    address5: '海上风电|跨国|咨询',
                    },{
                    date: '2020全球能源互联网大会',
                    address: '中国  北京市',
                    startTime: '2020-05-25',
                    endTime: '2020-05-31',
                    address5: '海上风电|跨国|咨询',
                    }]
            }
        },
        methods:{
            // 发布
            release(index, rows) {
                console.log(index, rows)
            },
            // 编辑
            change(index, rows) {
                console.log(index, rows)
            },
            // 删除
            deleteRow(index, rows) {
                console.log(index, rows)
            },
            // 撤回
            withdraw(index,rows) {
                console.log(index, rows)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>
<style scoped>

    .el-input {
        width: 200px ;
    }
    .el-form-item__content,.el-select {
        width: 200px !important;
    }
    .el-table thead {
        background: #eee;
    }
    .userCenterMyActivity >>> .el-pagination .el-pager li,
    .userCenterMyActivity >>> .el-pagination .btn-next,
    .userCenterMyActivity >>> .el-pagination .btn-prev{
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    .userCenterMyActivity >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #0050d8;
    }
    .margin_left {
        margin-left: 5px;
    }
    .myActivityLi {
        width: 456px;
        float: left;
        height: 153px;
        margin-bottom: 20px;
        border: 1px solid rgba(228, 228, 228, 1);
        box-shadow: rgba(228, 228, 228, 1);
    }
    .myActivityLi .title {
        color: #666;
        font-weight: 700;
        margin-left: 10px;
        margin-top: 8px;
    }
    .myActivityLi_data {
        color: #666;
        font-size: 12px;
        margin-top: 5px;
        margin-left: 10px;
    }
    .myActivity ul {
        text-align: top;
        height: 100%;
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content:space-between;
        flex-wrap:wrap;
    }
    .el-tag {
        height: 22px;
        line-height: 22px;
        margin-right: 5px;
    }
</style>