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

<template>
    <div>
             <div style="width: 100%;height: 342px;margin-top: 15px;position: relative;" class="Introductionheader">
                <div style="position:absolute;left:90px;top:54px;color:#fcfdfe;font-size: 30px;">
                      {{$t('common.GEIDCOMembers')}}
                </div>
               <!-- 服务区域 -->
               <div style="position:absolute;left:92px;top:119px;height: 200px;">
                 <div style="color: #eceff4;font-size: 22px;">{{$t('common.Weprovide')}} 
                  <span style="font-size: 31px;"> 8 </span> 
                  {{$t('common.membershipservicesforyou')}}
                </div>
                 <div class="service">
                  
                  <span v-for="(item,index) in service" style="color: #eceff4;">
                    {{$t(item.label)}}{{index==service.length-1?'':'、'}}
                  </span>
                 </div>
                 <div>
                  <el-button type="primary" @click="toView('IntroductionFundingApplication','')">{{$t('common.MembershipApplication')}}</el-button>
                 </div>
               </div>
              
             </div>
             <div style="margin-top: 20px; padding: 0 40px;" class="continents">
                <div style="width: 100%;text-align: center;font-weight: 700;height: 80px;">
                    <div style="width: 850px;height: 80px;margin: auto;border: 1px solid #ccc;">
                        <div style="height:100px;width:80%;z-index: 2;background: #fff;margin: auto;transform: translateY(-10px);">
                            <div style="padding-top: 24px;color: #2d568a;font-size: 20px;">{{$t('common.GEIDCOmembersarewidelydistributedon6continents')}}</div>
                           <!-- <div style="padding-top: 10px;color: #87a0bd;font-size: 15px;">合作组织会员总数达 {{initDataList.sumCount}} 家，
                              遍及五大洲 {{initDataList.typeCountry?initDataList.typeCountry.length:"0"}} 个国家</div>-->
                            <div style="padding-top: 10px;color: #87a0bd;font-size: 15px;">{{$t('common.906membersfrom')}} {{initDataList.sumCount}} {{$t('common.119countries')}}{{initDataList.typeCountry.length}}{{$t('common.Countries')}}</div>
                        </div>
                    </div>
                </div>
             </div>
              <!-- 地图区域 -->
            <div style="height: 410px;width:100%;margin-top: 40px;" class="map">
                <img src="@/assets/img/country/MAP.png" alt="" style="margin-left: 100px;">
                  <span v-for="(item,index) in continentsWorld" @click="toView('IntroductionMemberInformation',item,item.value)"  
                  >
                  <!-- @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)" -->
                   <div  style="position: absolute;left: 3px;top:-50px;width: 56px;height: 56px;" class="outer-tag">
                    <img src="@/assets/img/introductionCooperation/industry/dispersed.png" 
                    alt="" 
                    style="width:100%;height: 100%;"
                    :ref="`img${index}`"
                    >
                    <div class="inner-tag"></div>
                    <div style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);" :ref="`mouse${index}`">{{item.num?item.num:0}}</div>
                   </div>
                    
                    <el-button> {{item.label}}</el-button>
                  </span>
            </div>
            <div style="margin-top: 20px; padding: 0 40px;" class="continents">
                <div style="width: 100%;text-align: center;font-weight: 700;height: 80px;">
                    <div style="width: 850px;height: 80px;margin: auto;border: 1px solid #ccc;">
                        <div style="height:100px;width:80%;z-index: 2;background: #fff;margin: auto;transform: translateY(-10px);">
                            <div style="padding-top: 12px;color: #2d568a;font-size: 20px;">{{$t('common.GEIDCOmemberscover11categories')}}</div>
                            <div style="padding-top: 10px;color: #87a0bd;font-size: 15px;">{{$i18n.locale=='zh'?'会员结构不断丰富，从能源电力企业、装备制造企业拓展到团体组织、金融机构等，共计11个类别':'The membership structure is constantly enriched, from energy and power companies, equipment manufacturing companies to group orginations, financial institutions, etc., totaling 11 categories'}}</div>
                        </div>
                    </div>
                </div>
             </div>
             <div style="height:400px;margin-top: 20px; padding: 0px 20px 0 60px;position: relative;" class=" continents continents2">
                <ul style="margin-top: 50px;">
                  <li v-for="(item,index) in continents" style="position: relative;cursor: pointer;" @click="toView('IntroductionMemberInformation',item,item.value)">
                    <div class="texts" :style="$i18n.locale=='en'?'padding-left:30px':''" style="margin-top: 10px;">
                      {{item.label}}
                    </div>
                    <div class="texts2" :style="$i18n.locale=='en'?'padding-left:20px':''">{{item.num}}</div>
                    <div>
                      <img :src="getIconUrl2(item.img)" alt="" style="position:absolute;left:28px;top:16px;">                 
                    </div>
                  </li>
                </ul>
            </div>
    </div>
  </template>
  
  <script>
    import {getDicts} from '@/api/dict'
    import {getnetworkData} from '@/api/baseContactsInfo'
  export default {
    name: 'IntroductionMemberIntroduction',
    data () {
      return {
        enterpriseDetails:'',
        initDataList:{},
        continentsWorld:[],
        continens:[{
          value:'01',
          img:'electricity.png',
        },{
          value:'02',
          img:'manufacturing.png'
        },{
          value:'03',
          img:'engineering.png'
        },{
          value:'04',
          img:'communication.png'
        },{
          value:'05',
          img:'consulting.png'
        },{
          value:'06',
          img:'scientific.png'
        },{
          value:'07',
          img:'financial.png'
        },{
          value:'08',
          img:'group.png'
        },{
          value:'09',
          img:'University.png'
        },{
          value:'10',
          img:'Media.png'
        },{
          value:'11',
          img:'Personal.png'
        }],
        continents:[],
        service:[{
          label:'common.InformationService',
          value:''
        },{
          label:'common.PublicityService',
          value:''
        },{
          label:'common.ExchangeatConferences',
          value:''
        },{
          label:'common.TrainingandSeminars',
          value:''
        },{
          label:'common.ResourceSharing',
          value:''
        },{
          label:'common.BusinessDevelopment',
          value:''
        },{
          label:'common.ProfessionalAlliancesactivities',
          value:''
        },{
          label:'common.CustomizedService',
          value:''
        }]
      }
    },
    created(){
        this.enterpriseDetails=this.$route.params.key;
    },
    mounted(){
      this.getInitData();
    },
    watch:{
      '$i18n.locale'(){
        this.getInitData();
      }
    },
    methods:{
      getInitData(){
        getDicts(this.$i18n.locale=='zh'?'INDUSTRY_DICTS':'INDUSTRY_DICTS_EN').then(res=>{
              this.continens.forEach(element => {
                  res.data[0].forEach(i=>{
                    if(element.value==i.value){
                            element.label=i.label;
                            element.dictTypeId=i.dictTypeId
                            element.id=i.id
                    }
                  })
              });
              this.continents=this.continens
              this.continents.forEach(item=>{
                item.num=0;
              })
        });
        getDicts(this.$i18n.locale=='zh'?'CONTINENT_CODE_DICT':'CONTINENT_CODE_DICT_EN').then(res=>{
          this.continentsWorld=res.data[0];
          this.continentsWorld.forEach((i,j)=>{
              if(this.$i18n.locale!='zh'){
                  if(i.label == 'NorthAmerica')
                  {
                      this.continentsWorld[j].label='North America';
                  }else if(i.label == 'SouthAmerica'){
                      this.continentsWorld[j].label='South America';
                  }
              }
          })
        });
        this.getNteList()
      },
      // 获取会员数据
      getNteList(){
        getnetworkData().then(res=>{
          this.initDataList=res.data;
          // 大洲数据
          res.data.typeContinent.forEach((element,index)=>{
            this.continentsWorld.forEach((i,j)=>{
              if(element.continent_dict==i.value){
                i.num=element.count
              }
            })
          });
          // 企业数据
          res.data.typeIndustry.forEach((element,index)=>{
            this.continents.forEach((i,j)=>{
              if(element.industry_dict==i.value){
                // debugger;
                i.num=element.count;
              }
            })
          });
          this.$forceUpdate();
        });
      },
     getIconUrl(url){
       return require("@/assets/img/introductionCooperation/"+url);
     },
     getIconUrl2(url){
       return require("@/assets/img/introductionCooperation/industry/"+url);
     },
     toView(router,json,type){
         console.log(router,'------------------------------跳转会员展示的')
         console.log(json,'------------------------------跳转会员展示的')
         console.log(type,'------------------------------跳转会员展示的')

         this.$router.push({name:router,params:{id:json,type:type}})
      },
      screenBack(data){
          console.log(data,'screenBackscreenBackscreenBackscreenBack')
      },
      screen(i){
        this.index=i
      },
      mouseOver(index){
        this.$refs[`img${index}`][0].style.display='block';
        this.$refs[`mouse${index}`][0].style.display='block';
      },
      mouseLeave(index){

        this.$refs[`img${index}`][0].style.display='none';
        this.$refs[`mouse${index}`][0].style.display='none';

      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
   .continents ul {
        text-align: top;
        height: 100px;
        justify-content:space-between;
        flex-wrap:wrap;
       
    }
    .service {
        margin-top: 20px;
        text-align: left;
        height: 90px;
    }
    .service span {
      /* width: 20%; */
      float: left;
      font-size: 15px;
      line-height: 30px;
    }
    /* .continents ul li {
          width: 190px;
          border-right: 1px solid #bcbcbc;
    } */
    .continents ul li .texts {
      width: 100%;
      text-align: center;
      font-size: 15px;
      color: rgb(45, 86, 138);
      font-weight: 700;
    }
    .texts2 {
      font-size: 25px;
      color: #368ee5;
      font-weight: 700;
      width: 100%;
      text-align: center;
      margin-top: 20px;
    }
    .continents ul li:nth-child(6){
      border: 0;
    }
    .continents2 ul li {
        float: left;
      height: 100px;
      width: 24%;
      border: 0;
      border: 1px solid transparent;
    }
    .continents2 ul li:hover {
        border:1px solid  #e36844;
        transition: all 0.2s;
    }
    .Introductionheader {
        background: url('../../assets/img/introductionCooperation/earth.png') no-repeat;
        background-size: 100% 100%;
    }
    .map {
        position: relative;
        color: #406c85;
        font-weight: 600;
        
    }
    .map span{
        cursor: pointer;
    }
    .map span:nth-of-type(1){
        position: absolute;right: 280px;top: 71px;
    }
    .map span:nth-of-type(2){
        position: absolute;right: 545px;top:198px;
    }
    .map span:nth-of-type(3){
        position: absolute;right: 485px;;top: 71px;
    }  
    .map span:nth-of-type(4){
        position: absolute;left: 246px;top:87px;
    }
    .map span:nth-of-type(5){
        position: absolute;left: 329px;top:240px;
    }
    .map span:nth-of-type(6){
        position: absolute;right: 181px;top:268px;
    }
    .map span:hover {
        color: #368ee5;
    }
    .map span >>>.el-button {
      background: transparent ;
      border: none;
    }
    .my-tooltip {
      border-radius: 50px;
    background-color: rgba(106, 237, 247, .7);
    border: none;
    padding: 15px;
    color: #fff;
    font-size: 16px;
    }
    .outer-tag{
      
    }
    .inner-tag{
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      transition: all .5s;
    }
    .outer-tag:hover .inner-tag{
      width: 80px;
      height: 80px;
      opacity: 0;
    }

</style>