dev/dcp-web-gate/src_old/views/introductionCooperation/IntroductionMemberProfile.vue

<template>
    <div>
          <div class="autoBox box">
             <div class="crumbs">
                <div style="height: 30px;padding-top: 15px;">
                  <el-breadcrumb separator="/" style="float: left;margin: 0 15px ">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item >{{$t('common.CooperationNetwork')}}</el-breadcrumb-item>
                    <el-breadcrumb-item >{{$t(Screens)}}</el-breadcrumb-item>
                  </el-breadcrumb>
                  <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0">
                    <span class="cursor" :class="screenIndex==item.value?'screen1':'screen2'"
                     @click="realTimeInfoScreen(item,item.value)" v-for="(item,index) in realTimeInfoScreens"> 
                      &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp;
                    </span>
                  </el-breadcrumb>
                </div>
                <!-- 会员介绍 -->
               
              <!-- 联盟介绍 -->
              <!-- <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0" v-if="screenIndex=='union'">
                <span class="cursor" :class="screenIndex==index?'screen1':'screen2'" @click="realTimeInfoScreen(item,item.value)" v-for="(item,index) in realTimeInfoScreens2"> 
                  &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp; <span v-if="(index+1)!==realTimeInfoScreens.length">/</span>
                </span>
              </el-breadcrumb> -->
              <!-- 合作单位介绍 -->
              <!-- <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0" v-if="screenIndex=='cooperation'">
                <span class="cursor" :class="screenIndex==index?'screen1':'screen2'" @click="realTimeInfoScreen(item,item.value)" v-for="(item,index) in realTimeInfoScreens3"> 
                  &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp; <span v-if="(index+1)!==realTimeInfoScreens.length">/</span>
                </span>
              </el-breadcrumb> -->
               <!-- 定制服务 -->
               <!-- <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0" v-if="screenIndex=='custom'">
                <span class="cursor" :class="screenIndex==index?'screen1':'screen2'" @click="realTimeInfoScreen(item,item.value)" v-for="(item,index) in realTimeInfoScreens4"> 
                  &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp; <span v-if="(index+1)!==realTimeInfoScreens.length">/</span>
                </span>
              </el-breadcrumb> -->
             </div>
             <IntroductionMemberIntroduction v-if="screenIndex=='member'" style="background: #fff;"></IntroductionMemberIntroduction>
             <IntroductionAllianceOverview v-if="screenIndex=='union'" style="background: #fff;"></IntroductionAllianceOverview>
             <IntroductionCustomService v-if="screenIndex=='custom'" style="background: #fff;"></IntroductionCustomService>
             <IntroductionPartnerInformation v-if="screenIndex=='cooperation'" style="background: #fff;"></IntroductionPartnerInformation>
          </div>  
    </div>
</template>
  
  <script>
    import IntroductionMemberIntroduction from './IntroductionMemberIntroduction'// 会员介绍
    import IntroductionAllianceOverview from './IntroductionAllianceOverview'// 联盟介绍
    import IntroductionCustomService from './IntroductionCustomService'// 定制服务
    import IntroductionPartnerInformation from './IntroductionPartnerInformation'// 合作单位介绍
  export default {
    name: 'IntroductionMemberProfile',
    components:{IntroductionMemberIntroduction,IntroductionAllianceOverview,IntroductionCustomService,IntroductionPartnerInformation},
    data () {
      return {
        screenIndex:'member',
        Screens:'common.MemberIntroduction',
        realTimeInfoScreens:[{
            lable:"common.MemberIntroduction",
            value:'member'
          },{
            lable:"common.AllianceIntroduction",
            value:'union'
          },{
            lable:"common.CooperativeUnitIntroduction",
            value:'cooperation'
          },{
            lable:"common.CustomizedService",
            value:'custom'
          }],
        realTimeInfoScreens2:[{
            lable:"common.MemberIntroduction",
            value:'member'
          },{
            lable:"common.CooperativeUnitIntroduction",
            value:'cooperation'
          },{
            lable:"common.CustomizedService",
            value:'custom'
          }],
        realTimeInfoScreens3:[{
            lable:"common.MemberIntroduction",
            value:'member'
          },{
            lable:"common.AllianceIntroduction",
            value:'union'
          },{
            lable:"common.CustomizedService",
            value:'custom'
          }],
        realTimeInfoScreens4:[{
            lable:"common.MemberIntroduction",
            value:'member'
          },{
            lable:"common.AllianceIntroduction",
            value:'union'
          },{
            lable:"common.CooperativeUnitIntroduction",
            value:'cooperation'
          }],
      }
    },
    created(){
        if(this.$route.query.key){
          this.screenIndex=this.$route.query.key;
          if(this.screenIndex=='member'){
            return this.Screens='common.MemberIntroduction'
          }else if(this.screenIndex=='union'){
            return this.Screens='common.AllianceIntroduction'
          }else if(this.screenIndex=='cooperation'){
            return this.Screens='common.CooperativeUnitIntroduction'
          }else if(this.screenIndex=='custom'){
            return this.Screens='common.CustomizedService'
          }
      }
    },
    mounted(){
    },
    methods:{
     getIconUrl(url){
       return require("@/assets/img/introductionCooperation/"+url);
     },
     getIconUrl2(url){
       return require("@/assets/img/introductionCooperation/industry/"+url);
     },
     toView(router,json){
        this.$router.push({name:router,params:json})
      },
      screenBack(data){
          console.log(data,'screenBackscreenBackscreenBackscreenBack')
      },
      realTimeInfoScreen(i,index){
        this.screenIndex=index
        this.Screens=i.lable
      },
      screen(i){
        this.index=i
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    .box {
         margin-top: 10px;
        /* background: #fff; */
        /* height: 500px; */
        padding-bottom: 10px;
    }
    .crumbs {
        /* margin-left: 20px; */
        background: #fff;
    }
    body {
        margin: 0;
    }
    .screen1 {
        background: linear-gradient(180deg, #3280E2 0%, #144E97 100%);
        border-radius: 20px 20px 20px 20px;
        padding: 8px 12px;
        color: #F0F3F8;
        margin-left: 10px;
    }
    .screen2 {
        font-size: 14px;
        background: linear-gradient(180deg, #B4D5FF 0%, #4F81BF 100%);
        border-radius: 20px;
        padding: 8px 12px;
        color: #165099;
        margin-left: 10px;
    }
   
</style>