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

<template>
    <div>
      <!--  -->
            <div  style="margin: 0 20px; margin-top: 15px;border-bottom: 1px solid #eeeeee;padding-top: 10px;" class="continents">
                <ul >
                  <li  v-for="(item,index) in initData"
                  :key="'item'+index" class="cursor continentsItem"
                    :class="bigIndex!==null ?index===bigIndex ? 'big':'min':''"
                    @click="mouseOver($event,index)"
                    :style="{backgroundImage: 'url('+getIconUrls(background_img[index])+')',backgroundSize: '100% 100%'}"
                  >
                    <div style="height: 285px;position: relative;">
                      <img style="position: absolute;left: 0;right: 0;width: 100%;height: 285px;"
                       :src="getIconUrl(background_img[index])" alt="" v-if="bigIndex==null && bigIndex!==index">
                       <img style="position: absolute;left: 0;right: 0;width: 100%;height: 285px;"
                       :src="getIconUrl(background_img2[index])" alt="" v-if="bigIndex!==null && bigIndex==index">
                    </div>
                    <div style="margin-top: 0px;color: #333333;padding:  40px 20px 0 20px;
                      background:linear-gradient(#DAEAFF,#FFFFFF);" :style="bigIndex==null?'height: 370px':bigIndex!==index?'height:115px;overflow:hidden':'height: 383px'">
                        <div style="width: 100%;text-align: center;padding-bottom: 15px;" class="background_img border">
                          <div>
                            <img :src="getIconUrl(item.img)" alt="" style="width: 62px;height: 62px;">
                          </div>
                          <div style="margin-top: 5px;">{{$t(item.lable)}}</div>
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;overflow: hidden;
                          text-overflow: ellipsis;white-space: wrap;line-height: 20px;"
                           v-if="bigIndex==null">
                          {{$t(item.establishment)}}
                        </div>
                         <div style="line-height: 30px;color: #666;font-size: 20px;margin-top: 10px; " v-if="bigIndex!==null && bigIndex==index">
                            <div style="width:100%">
                              <div style="display: inline-block;">
                                <img :src="getIconImg2(backgroundImg)" alt="" style="width: 300px;height: 185px;">
                              </div>
                              <div style="display: inline-block;padding:0 0px; width: 54%;
                              vertical-align: top; color: #333333;font-size: 14px;line-height: 24px;
                              margin-left: 15px;"v-show="item.show">
                                  <span style="text-indent: 30px;display: inline-block;">{{$t(Details.label)}}</span>
                                  <span style="text-indent: 30px;display: inline-block;margin-top: 20px;
                                  color: #666;font-weight: 400;
                                  border: 1px solid #2C558A;padding: 10px;position: relative;">
                                    <div style="width: 150px;height: 5px;position: absolute;left: 110px;top: -4px;z-index: 99;background-color: #f1f7ff;"></div>
                                    <div style="width: 150px;height: 5px;position: absolute;left: 50px;bottom: -4px;z-index: 99;background-color: #fff;"></div>
                                    <div style="height: 72px; -webkit-box-orient: vertical;
                                    position:relative;
                                    line-height:1.4em;
                                    overflow: hidden;
                                    height:7em" class="plate">
                                      {{$t(Details.value)}}
                                    </div>
                                  </span>
                              </div>
                              <div style="display: inline-block;padding:0 20px;width: 54%;color: #333333;font-size: 14px;line-height: 24px;margin-left: 15px;">

                              </div>

                          </div>
                        </div>
                    </div>
                    <div style="height: 269px;" v-if="bigIndex!==null && bigIndex!==index">

                    </div>
                    <div class="apply">
                      <span style="font-size: 14px;cursor: pointer;display: inline-block;width: 100%;height: 60px;
                      border-radius: 0 0 12px 12px;line-height: 60px;text-align: center;color: #fff;"
                        @click="goToView(index)" class="span">
                        {{$t('common.EntertheAlliance')}}
                      </span>
                    </div>
                  </li>
                </ul>
             </div>
             <div style="margin: 0 100px;position: relative;height: 80px;":style="bigIndex==null?'margin-top: 0':'margin-top: 100px'">

                <el-button type="primary" style="position: absolute;left: 50%;top: 20px;transform: translateX(-50%);
                background-color: #0E4891;width: 160px;height: 50px;"
                  @click="nextChange"
                >{{$t('common.ApplyToJoin')}}</el-button>
             </div>


        <el-dialog
                :title="$i18n.locale=='zh'?'提示':'Reminder'"
                :visible.sync="toViewLogin"
                :width="$i18n.locale=='zh'?'500px':'750px'"
                :height="$i18n.locale=='zh'?'300px':'386px'"
                :before-close="toViewLoginChange"
        >
            <div style="width: 100%;height: 100%;">
                <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
                <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
                    <div style="font-size: 20px;font-weight: normal;color: #333333;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                line-height: 40px;">
                        {{$t('common.ReminderFirst')}}
                    </div>
                    <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
                        {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
                        {{$t('common.ReminderForth')}}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
                <span style="margin-left: 40px;" class="cursor" @click="toViewLoginCh('login')">
                  {{$t('common.ReminderFifth')}}
                </span>
                        <span style="margin-left: 10px;" class="cursor" @click="toViewLoginCh('Register')">
                  {{$t('common.ReminderSixth')}}
                </span>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
  </template>

  <script>
  export default {
    name: 'IntroductionMembershipApplication',

    data () {
      return {
        enterpriseDetails:'',
        toViewLogin:false,
        loop:false,
        timer:'',
        Details: {},
        time:undefined,
        bigIndex:null,
        num:0,
        show:false,
        background_img:[
          'daxue.png',
          'ziku.png',
          'jinrong.png',
          'zhuangbei.png'
        ],
        background_img2:[
          'daxueIcon2.png',
          'zikuIcon2.png',
          'jinrongIcon2.png',
          'zhuangbeiIcon2.png'
        ],
        backgroundImg:'university.png',
        initData:[{
          lable:'common.UniversityAlliance',
          img:'daxueIcon.png',
          establishment:'common.Universityestablishment',
          purpose:'common.Universitypurpose',
          Alliance:'common.UniversityAlliances',
          show:false
        },{
          lable:'common.ThinkTankAlliance',
          img:'zikuIcon.png',
          establishment:'common.ThinkTankestablishment',
          purpose:'common.ThinkTankpurpose',
          Alliance:'common.ThinkTankAlliances',
          show:false
        },{
          lable:'common.FinancialAlliance',
          img:'jinrongIcon.png',
          establishment:'common.Financialestablishment',
          purpose:'common.Financialpurpose',
          Alliance:'common.FinancialAlliances',
          show:false
        },{
          lable:'common.EquipmentAlliance',
          img:'zhuangbeiIcon.png',
          establishment:'common.Equipmentestablishment',
          purpose:'common.Equipmentpurpose',
          Alliance:'common.EquipmentAlliances',
          show:false
        }]
      }
    },
    created(){
        this.enterpriseDetails=this.$route.params.key
    },
    mounted(){
    },
    updated() {
        this.Swiper();
    },
    watch:{
        toViewLogin() {
            if (this.toViewLogin == true) {
                this.loginTipsChange();
            }
        },
    },
    methods:{
      mouseOver($event,index){
          const that =this;
          if(that.bigIndex==index){
            that.bigIndex=null;
          }else {
            that.bigIndex=index;
          }
          this.initData.forEach(element => {
            element.show=false;
          });
          setTimeout(() => {
            this.initData[index].show=!this.initData[index].show;
          },300)
          // $event.currentTarget.className = 'big';
          if (index == 0) {
                    this.Details = {
                        label: "common.GoalUniversitylabel",
                        value: 'common.GoalUniversityvalue',
                        establishment:'common.Universityestablishment',
                        purpose:'common.Universitypurpose',
                        Alliance:'common.UniversityAlliances',
                    }
                    this.backgroundImg = 'university.png';
                    this.img = 'IntroductionUniversity.png';
          } else if (index == 1) {
                    this.Details = {
                        label: "common.GoalThinkTanklabel",
                        value: 'common.GoalThinkTankvalue',
                        establishment:'common.ThinkTankestablishment',
                        purpose:'common.ThinkTankpurpose',
                        Alliance:'common.ThinkTankAlliances',
                    }
                    this.backgroundImg = 'Thinkanks.png'
                    this.img = 'IntroductionThinkTanks.png';
                } else if (index == 2) {
                    this.Details = {
                        label: "common.GoalFinanciallabel",
                        value: 'common.GoalFinancialvalue',
                        establishment:'common.Financialestablishment',
                        purpose:'common.Financialpurpose',
                        Alliance:'common.FinancialAlliances',
                    }
                    this.backgroundImg = 'finances.png'
                    this.img = 'IntroductionFinance.png';
                } else if (index == 3) {
                    this.Details = {
                        label: "common.GoalEquipmentlabel",
                        value: 'common.GoalEquipmentvalue',
                        establishment:'common.Equipmentestablishment',
                        purpose:'common.Equipmentpurpose',
                        Alliance:'common.EquipmentAlliances',
                    }
                    this.backgroundImg = 'equipments.png'
                    this.img = 'IntroductioneEuipment.png';
                }

      },
      mouseout(e,index){
        const that =this;
        that.bigIndex=null;
      },
      getIconImg2(url) {
          return require("@/assets/img/introductionCooperation/" + this.backgroundImg);
      },
      Swiper(){
            var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 30,
            centeredSlides: true,
            loop: true,
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
            });
      },
      goToView(index){
        this.toView('IntroductionEquipmentAlliance',index)
        // if(index==0){
        //   this.toView('IntroductionUniversityAlliance','') //大学联盟
        // }else if(index==1){
        //   this.toView('IntroductionThinkTankAlliance','')//智库联盟
        // }else if(index==2){
        //   this.toView('IntroductionFinancialUnion','')//金融联盟
        // }else {
        //   this.toView('IntroductionEquipmentAlliance','')//装备联盟
        // }
      },
        //跳转登录
        toViewLoginCh(router){
            clearInterval(this.timer);
            this.$router.push(router);
        },
        loginTipsChange() {
            const that = this;
            this.num = 10;
            clearInterval(that.timer);

            this.timer = setInterval(function () {
                if (that.num > 0) {
                    that.num--;
                    console.log(that.num)
                } else {
                    if (that.toViewLogin == true) {
                        clearInterval(that.timer);
                        that.toViewLoginCh("login");
                    } else {
                        clearInterval(that.timer);
                    }
                }
            }, 1000);
        },
        // 判断未登录跳转是否关闭
        toViewLoginChange(done){
            this.toViewLogin=false;
            this.num=10;
            clearInterval(this.timer);

        },
      nextChange(){
        if (!this.$Cookies.get('token')) {
              this.toViewLogin=true;
        } else {
          this.toView('IntroductionApplicationMembership')
        }

      },
     getIconUrl(url){
       return require("@/assets/img/introductionCooperation/"+url);
      //  @/assets/imgin/troductionCooperation/jinrong.png
     },
     getIconUrls(url){
       return require("@/assets/img/introductionCooperation/"+url);
      //  @/assets/imgin/troductionCooperation/jinrong.png
     },
     toView(router,json){
        this.$router.push({name:router,query:{id: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;
    }
    .continents ul {
        text-align: top;
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content:space-between;
        flex-wrap:wrap;

    }
    .continents ul li {
      width: 275px;
      background: #fff;
      color: #999;

    }
    /* .background_img {
      background: url('@/ass');
    } */
    .continents ul li:nth-of-type(1) .border{
      border-bottom: 2px solid #07a9fc;
    }
    .continents ul li:nth-of-type(3) .border{
      border-bottom: 2px solid #f7b500;
    }
    .continents ul li:nth-of-type(2) .border{
      border-bottom: 2px solid #6dd400;
    }
    .continents ul li:nth-of-type(4) .border{
      border-bottom: 2px solid #43d7b5;
    }
    .continents ul li .button {
      position:absolute;
      left:50%;
      bottom:0;
      transform:translate(-50%,0);
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #bcbcbc;
      font-size: 14px;
      border-radius: 5px;
      box-shadow:5px 5px 5px #f1f1f1 ;

    }
    .continents ul li:nth-of-type(1) .span{
      background-color: #60A0F4;
    }
    .continents ul li:nth-of-type(2) .span{
      background-color: #5DB724;
    }
    .continents ul li:nth-of-type(3) .span{
      background-color: #FFC001;
    }
    .continents ul li:nth-of-type(4) .span{
      background-color: #44D7B6;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }
  /* .continentsLi {
    border: 1px solid #000;
  } */
  .continentsLi:nth-child(1) {
    background: url('../../assets/img/introductionCooperation/IntroductionUniversity.png') 100% 100% no-repeat;
  }
  .el-carousel__item {
    background-color: #99a9bf;
    width: 120px;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }
	.big{
      width: 750px !important;
      height: 700px;
      transition:all 300ms;
      -webkit-backface-visibility: hidden;
      -webkit-transform-style: preserve-3d;
	}
  .min{
    width: 120px !important;
    height: 718px;
    transition:all 300ms;
    -webkit-backface-visibility: hidden;
      -webkit-transform-style: preserve-3d;
  }
  .el-carousel__item--card.is-active {
    transform:translateX(0)!important;
    height:735px;
    width:779px;
  }
</style>