dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterProject.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'? 'My Project': '我的项目'}}</span>
            <span :class="informationsClass==2?'information2':'information1'" @click="getInformation(2)" class="cursor">{{$i18n.locale=='en'? 'My Project Intention': '项目意向'}}</span>
            <span :class="informationsClass==3?'information2':'information1'" @click="getInformation(3)" class="cursor">{{$i18n.locale=='en'? 'My Project Recommendation': '项目推荐'}}</span>
        </div>
        <userCenterMyProject v-if="informationsClass==1"></userCenterMyProject>
        <userCenterMyProjectIntention v-if="informationsClass==2"></userCenterMyProjectIntention>
        <userCenterMyProjectRecommendation v-if="informationsClass==3"></userCenterMyProjectRecommendation>
    </div>
</template>

<script>
    import Base from "@/views/base/Base";
    import userCenterMyProject from "./userCenterMyProject";
    import userCenterMyProjectIntention from "./userCenterMyProjectIntention";
    import userCenterMyProjectRecommendation from "./userCenterMyProjectRecommendation";

    export default {
        name: "userCenterProject",
        extends: Base,
        components:{ userCenterMyProject, userCenterMyProjectIntention,userCenterMyProjectRecommendation },
        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>