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

<template>
    <div>
          <div class="autoBox box">
             <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item >合作介绍</el-breadcrumb-item>
                </el-breadcrumb>
             </div>
             <div style="margin-top: 70px;" class="introductionBox">
              <div style="margin: 30px 50px;height: 300px;border-bottom: 1px solid #bcbcbc; position: relative;" v-for="(details,index) in initData" class="introductionBoxitem">
                 <div style="position: absolute;top: 10px;left: 50%;transform: translateX(-50%);color: #000;font-weight: 700;padding-bottom: 5px;border-bottom: 2px solid #6bb8ff;">{{details.label}}</div>
                 
                  <div>
                    <!-- <img :src="getIconUrl(details.img)" alt="" style="width:200px;margin-top:40px;vertical-align: top;"> -->
                    <span style="float: left;margin-top: 60px;margin-left: 75px; width: 390px;height: 100%;" v-if="index==0">
                      全球能源互联网发展合作组织会员分布情况，截至2020年5月，共825家会员，遍及六大洲，112个国家，涉及12个行业。
                    </span>
                    <span style="float: right;margin-top: 60px;margin-right: 75px; width: 390px;height: 100%;" v-if="index==1">
                      全球能源互联网发展合作组织联盟成员员分布情况，截至2020年5月，共成立大学联盟、智库联盟、金融联盟、装备联盟四大联盟，XXX家联盟成员，遍及六大洲，XXX个国家，涉及12个行业。
                    </span>
                    <span style="float: left;margin-top: 60px;margin-left: 75px; width: 390px;height: 100%;" v-if="index==2">
                      全球能源互联网发展合作组织为合作单位提供个性化服务，截至2020年5月，个性化服务共XX项，遍及六大洲，112个国家，涉及12个行业。
                    </span>
                    <span style="float: left;width: 200px;margin: 50px 0 0 100px;">
                      <el-button v-for="(item,index) in details.child" :type="item.tag?'primary':''"
                        
                        style="margin-left: 0;margin-top: 10px;width: 145px;text-align: left;"
                        @click="toView(item.url,'')"
                      >
                      <img :src="getIconUrl(item.icon)" alt="" class="img">{{item.label}}</el-button>
                    </span>
                  </div>
                 
              </div>
             </div>
             
          </div>
         
    </div>
  </template>
  
  <script>
  export default {
    name: 'RnterpriseDetails',
    data () {
      return {
        enterpriseDetails:'',
        initData:[{
          label:'会员介绍',
          img:'20200611_03.gif',
          details:'',
          child:[{
            icon:'profile.png',
            label:'会员概况',
            url:'IntroductionMemberProfile',
          },{
            icon:'information.png',
            label:'会员信息',
            url:'IntroductionMemberInformation',
          },{
            icon:'information.png',
            label:'入会申请',
            url:'IntroductionMembershipApplication',
            tag:'1'
          }]
        },{
          label:'联盟介绍',
          img:'20200611456_03.gif',
          details:'',
          child:[{
            icon:'overview.png',
            label:'联盟概况',
            url:'IntroductionAllianceOverview',
          },{
            icon:'Alliance.png',
            label:'联盟成员信息',
            url:'IntroductionAllianceMemberInformation',
          },{
            icon:'Alliance.png',
            label:'入盟申请',
            url:'IntroductionApplicationMembership',
            tag:'1'
          }]
        },{
          label:'合作单位介绍',
          img:'20200611123_03.gif',
          details:'',
          child:[{
            icon:'situation.png',
            label:'合作概况',
            url:'IntroductionGeneralSituation',
          },{
            icon:'PartnerInformation.png',
            label:'合作单位信息',
            url:'IntroductionPartnerInformation',
          },{
            icon:'PartnerInformation.png',
            label:'定制服务申请', 
            url:'IntroductionCustomService',
            tag:'1'
          },{
            icon:'PartnerInformation.png',
            label:'资助申请',
            url:'IntroductionFundingApplication',
            tag:'1'
          }]
        }]
      }
    },
    created(){
        this.enterpriseDetails=this.$route.params.key
    },
    mounted(){
    },
    methods:{
     getIconUrl(url){
       return require("@/assets/img/introductionCooperation/"+url);
     },
     toView(router,json){
        this.$router.push({name:router,params:json})
      },
      screenBack(data){
          console.log(data,'screenBackscreenBackscreenBackscreenBack')
      },
      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: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
  .introductionBox .introductionBoxitem:nth-child(2n+1) img {
    float: left;
    margin-left: 80px;
  }
  .introductionBox .introductionBoxitem:nth-child(2n+1) .img {
    float: left;
    margin-left: 0px;
    margin-right: 5px;
  }
  .introductionBox .introductionBoxitem:nth-child(2n) img {
    float: right;
    margin-right: 80px;
  }
  .introductionBox .introductionBoxitem:nth-child(2n) .img {
    float: left;
    margin-right: 5px;
  }
  .introductionBoxitem span{
    color: #768aa3;
    line-height: 25px;
  }
  .introductionBoxitem:nth-child(3){
    border-bottom: 0 !important;
  }
</style>