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

<!--
<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyActivity">
        <div style="height: 60px;line-height: 60px;padding-top: 30px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
            {{$t('common.MyActivities')}}
        </div>
        <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><img src="@/assets/img/userCenter/messageImg.gif" alt=""
                                  style="width: 100%;height: 150px;"></div>
                        <div>
                            <div class="title">{{item.date}}</div>
                            <div class="myActivityLi_data">
                                <span class="margin_left">{{item.address}}</span>
                                <span style="margin-left: 100px;">{{item.startTime}}-{{item.endTime}}</span>
                            </div>
                            <div class="myActivityLi_data margin_left">
                                {{item.address5}}
                            </div>
                            <div class="myActivityLi_data margin_left" style="margin-top: 11px;">
                                <el-tag type="success">{{$t('common.domestic')}}</el-tag>
                                <el-tag type="info">{{$t('common.ElectricEnergy')}}</el-tag>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <ul style="margin:30px;width: 90%;">
            <img v-if="this.$i18n.locale.toUpperCase()=='ZH'" src="@/assets/img/noData.png" alt=""
                 style="width: 100%;height: 100%;">
            <img v-if="this.$i18n.locale.toUpperCase()=='EN'" src="@/assets/img/noDataEn.png" alt=""
                 style="width: 100%;height: 100%;">
        </ul>
        <div style="margin-left: 250px;">

            &lt;!&ndash; <el-pagination
                style="margin-top: 40px;height: 80px;"
                background
                layout="prev, pager, next"
                :total="0"  @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
                </el-pagination> &ndash;&gt;
        </div>
    </div>
</template>
<script>
    export default {
        name: 'userCenterMyActivity',
        data() {
            return {
                formInline: {
                    user: '',
                    region: ''
                },
                tableData: [
                    {
                        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: '各界专家从人类命运共同体的高度出发,围绕全理...',
                    }, {
                        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: 300px;
        float: left;
        height: 253px;
        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: 5px;
    }

    .myActivityLi_data {
        color: #666;
        font-size: 12px;
        margin-top: 5px;
    }

    .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>-->
<template>
    <div class="application-history">
        <div style="height:50px;line-height:50px">
            <span :class="informationsClass==1?'information2':'information1'" @click="getInformation(1)" class="cursor">{{$i18n.locale=='en'? 'Activities Involved': '我参与的活动'}}</span>
            <span :class="informationsClass==2?'information2':'information1'" @click="getInformation(2)" class="cursor">{{$i18n.locale=='en'? 'Published Activities': '我发布的活动'}}</span>
        </div>
        <userCenterMyActivityParticipation v-if="informationsClass==1"></userCenterMyActivityParticipation>
        <userCenterMyActivityIssue v-if="informationsClass==2"></userCenterMyActivityIssue>
    </div>
</template>

<script>
    import Base from "@/views/base/Base";
    import userCenterMyActivityParticipation from './userCenterMyActivityParticipation' //我参与的活动
    import userCenterMyActivityIssue from './userCenterMyActivityIssue' //我发布的活动

    export default {
        name: "userCenterMyActivity",
        extends: Base,
        components:{ userCenterMyActivityParticipation, userCenterMyActivityIssue },
        data() {
            return {
                informationsClass:'1',
                lang: localStorage.getItem('local')
            }
        },
        created() {
            this.$bus.on('setLang', lang=>{
                this.lang = lang;
            })
        },
        methods: {
            getInformation(num){
                this.informationsClass=num
            },
        }
    }
</script>

<style scoped>
    .application-history{
        background: #fff;
        min-height: 700px;
    }
    .information1 {
        display: inline-block;
        min-width: 123px;
        padding: 0 20px;
        height: 100%;
        border:1px solid rgba(228, 228, 228, 1);
        text-align: center;
        background: #f9f9f9;
        color: #999;
    }
    .information2 {
        display: inline-block;
        min-width: 123px;
        padding: 0 20px;
        height: 100%;
        border-top:3px solid #2c5589;
        text-align: center;
        color: #2c5589;
    }
    .information1:hover {
        color: #FF0036;
    }
</style>