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

<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' ? 'Events' : '会议报名' }}</span>
            <span :class="informationsClass == 2 ? 'information2' : 'information1'" @click="getInformation(2)"
                class="cursor">{{ $i18n.locale == 'en' ? 'ExhibitionApply' : '会展报名' }}</span>
            <span :class="informationsClass == 3 ? 'information2' : 'information1'" @click="getInformation(3)"
                class="cursor">{{ $i18n.locale == 'en' ? 'ActivityApply' : '活动报名' }}</span>
            <span :class="informationsClass == 4 ? 'information2' : 'information1'" @click="getInformation(4)"
                class="cursor">{{ $i18n.locale == 'en' ? 'Online Meeting' : '网络会议' }}</span>
        </div>
        <!-- <userCenterConferenceRegistration v-if="informationsClass==1"></userCenterConferenceRegistration> -->
        <userCenterConferenceRegistration v-if="informationsClass == 1"></userCenterConferenceRegistration>
        <UserCenterExhibition v-if="informationsClass == 2"></UserCenterExhibition>
        <userCenterActivityRegistration v-if="informationsClass == 3"></userCenterActivityRegistration>
        <userCenterConferenceOnline v-if="informationsClass == 4"></userCenterConferenceOnline>
    </div>
</template>


<script>
import userCenterConferenceRegistration from './userCenterConferenceRegistration' //会议报名
import userCenterActivityRegistration from './userCenterActivityRegistration' //活动报名
import userCenterConferenceOnline from './userCenterConferenceOnline' //网络会议
import UserCenterExhibition from './userCenterExhibition.vue' //会展报名
export default {
    name: 'userCenterInformation',
    components: { userCenterConferenceRegistration, userCenterConferenceOnline, userCenterActivityRegistration, UserCenterExhibition },
    data() {
        return {
            informationsClass: '1',
            dialogVisible: false,
            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;
    width: 123px;
    height: 100%;
    border: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
    background: #f9f9f9;
    color: #999;
}

.information2 {
    display: inline-block;
    width: 123px;
    height: 100%;
    border-top: 3px solid #2c5589;
    text-align: center;
    color: #2c5589;
}

.information1:hover {
    color: #FF0036;
}
</style>