dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterCollectionMeeting.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="width: 100%;position: relative;">
                                <span style="color: #fff;position: absolute;right: 1px;top: 0;width: 95px;height: 28px;line-height: 28px;background: #666; text-align: center; font-size: 14px;font-weight: 400;">已结束</span>
                            <div style="width: 100%;height: 200px;">
                                
                                    <img src="@/assets/img/userCenter/u46347.png" alt="" style="width: 100%;height: 100%;">
                                
                            </div>
                            <div style="color:#666;width: 100%;text-align: left;font-weight: 600;" class="margin_top">
                                {{item.address5}}
                                <span style="float: right;font-size: 12px;color: #999;font-weight: 400;">取消收藏</span>
                            </div>
                            <div style="color:#999;width: 100%;text-align: left;font-size: 12px;" class="margin_top">
                                <span><i class="el-icon-location-outline"></i>{{item.address}}</span>
                                <span style="margin-left: 50px;"><i class="el-icon-timer"></i>{{item.startTime}}</span>
                            </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: 'userCenterCollectionMeeting',
        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;
    }
    .margin_top{
        margin-top: 5px;
    }
    .myActivityLi {
        width: 295px;
        float: left;
        height: 256px;
        margin-bottom: 20px;
        border: 1px solid rgba(228, 228, 228, 1);
        box-shadow: rgba(228, 228, 228, 1);
    }
    .myActivityLi .title {
        color: #ccc;
        font-size: 14px;  
    }
    .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>