dev/dcp-web-gate/src_old/components/footersNewZH.vue

<template>
    <div class="footers2">
        <div class="autoBox" >
          <span class="LeftBracket"></span>
          <span class="RightBracket"></span>
          <div class="centerBracket">
            <div class="centerBracket_div1">
                  <span style="color: #e0edee;margin-left: -40px;margin-right: 20px;font-size: 14px;">主办单位</span>
                  <img src="@/assets/img/home/footer/footerLogo.png" alt=""
                   style="height:88%;vertical-align: middle;"
                   @click="toViewChange">
                <!-- href="https://www.geidco.org.cn/" -->
  
            </div>
            
  
            <div style="margin:0px 0 10px 0;background:#8395b3;border:1px solid #5a729b"></div>
            <div :class="$i18n.locale=='CN'?'centerBracket_div2':'centerBracket_div4'">
              <span  @click="getAboutMenu('关于我们')" class="cursor">关于我们</span>
              <span>|</span>
              <span @click="getAboutMenu('用户协议')" class="cursor">用户协议</span>
              <span>|</span>
              <span @click="getAboutMenu('隐私政策')" class="cursor">隐私政策</span>
              <span>|</span>
              <span  @click="toViewLega('helpCenter')" class="cursor">helpCenter</span>
              <span>|</span>
              <span  @click="cofLogin" class="cursor">意见反馈</span>
  
            </div>
            <div class="centerBracket_div3" style="width:100%;min-width: 700px;position: relative;left:50%;transform: translateX(-50%);">
                <span>{{year}}  GEIDCO
                  <span @click="toView" class="cursor">All </span>
                  <span class="cursor" @click="toNewHome"> rights  </span>
                <span>reserved. <a style="color:#fff;" class="beianSrc" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">京ICP备19029734号-3</a>. </span>
                <span> &ensp;&ensp; </span>
                <span style="text-align: center;color: #fff;font-size: 14px;">
                  &emsp;  E-mail: <span> </span>  geidcp-info@geidco.org
                </span>
              </span>
            </div>
          </div>
  
        </div>
        <div id="dialog">
          <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
            ref="dialog"
            center>
            <div style="min-height: 120px;">
              <span style="font-size: 23px;text-align: center;display: block;width: 100%;">
                  您访问的链接即将离开“能联全球”网站，是否继续?
              </span>
            </div>
            <span slot="footer" class="dialog-footer"
              style="height: 50px;display: block;width: 100%;color: #ab0d07;font-size: 20px;">
              <span style="margin-right:30px;padding: 10px 18px;
              background:linear-gradient(#eee, #f1f1f1,#e6e6e6);
              border-radius: 10px;cursor: pointer;" @click="toViewChange('1')">
               继续访问
              </span>
              <span @click="dialogVisible=false" style="cursor: pointer;">放弃</span>
            </span>
          </el-dialog>
        </div>
  
       <!-- 用户协议 -->
       <div>
          <el-dialog width="60%"
              :title="  $i18n.locale=='en'?'《User Agreement of Global Energy Interconnection Development and Cooperation Platform》':'《全球能源互联网发展合作平台用户协议》' "
              :visible.sync="innerVisible1" append-to-body>
              <!-- <PlatformRegistered ></PlatformRegistered> -->
              <iframe v-if="$i18n.locale=='CN'" width="100%" id="embed" name="main" ref="embed1" height="600px" :src="srcPdf3" frameborder="0"></iframe>
              <iframe v-if="$i18n.locale=='en'" width="100%" id="embed" name="main" ref="embed1" height="600px" :src="srcPdf4" frameborder="0"></iframe>
  
          </el-dialog>
          <el-dialog
            width="60%"
            :title=" $i18n.locale=='en'?'《Privacy Policy of Global Energy Interconnection Development and Cooperation Platform》':'《全球能源互联网发展合作平台隐私政策》' "
            :visible.sync="innerVisible2"
            append-to-body
          >
  
            <!-- <LegalNotices></LegalNotices> -->
              <iframe v-if="$i18n.locale=='CN'" width="100%" id="embed" name="main" ref="embed2" height="600px" :src="srcPdf" frameborder="0"></iframe>
              <iframe v-if="$i18n.locale=='en'" width="100%" id="embed" name="main" ref="embed2" height="600px" :src="srcPdf2" frameborder="0"></iframe>
            <!-- <div>asdasdasdasd</div> -->
          </el-dialog>
      </div>
  
        <!-- 登录提示 -->
        <el-dialog
                :title="$i18n.locale=='CN'?'提示':'Reminder'"
                :visible.sync="toViewLogin"
                :width="$i18n.locale=='CN'?'500px':'750px'"
                :height="$i18n.locale=='CN'?'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=='CN'?'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;">
                        该功能需要登录后使用
                    </div>
                    <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
                  font-weight: normal;color: #666666;line-height: 30px;">
                        系统将在 <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;">
                       如页面未自动跳转，请点击以下链接
                    </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="toViewLega('login')">
                      我要登录
                      </span>
                        <span style="margin-left: 10px;" class="cursor" @click="toViewLega('Register')">
                      我要注册
                      </span>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
  </template>
  <script>
  import {getHelpColumnTree} from '@/api/operation/help/helpCenterEntity';
  import Base from "@/views/base/Base";
  import {getToken} from '@/utils/auth';
  
  
  export default {
  name: 'Footers',
    extends: Base,
  data () {
  return {
    dialogVisible:false,
    RegistdialogVisible:false,
    innerVisible1: false,
    innerVisible2: false,
    year:null,
    menu:[],
    aboutMenu:[],
    srcPdf: null,
    srcPdf2: null,
    srcPdf3: null,
    srcPdf4: null,
    toViewLogin:false,
    img:[{
      url:'Instagram'
    },{
       url:'YouTube'
     },{
       url:'faceBook'
     },{
       url:'in'
     },{
       url:'Twitter'
     },{
       url:'WeChat'
     },{
       url:'microBlog'
    }],
     num:0,
     timer:null,
  
  }
  },
  
  mounted(){
    this.srcPdf = '/api/file/pub/def/PrivacyPolicy_CN.pdf';
    this.srcPdf2 = '/api/file/pub/def/PrivacyPolicy_EN.pdf';
    this.srcPdf3 = '/api/file/pub/def/UserAgreement_CN.pdf';
    this.srcPdf4 = '/api/file/pub/def/UserAgreement_EN.pdf';
    let date=new Date;
    this.year = date.getFullYear();
    this.getAboutId()
  },
  watch:{
      "toViewLogin"(){
          if(this.toViewLogin==true){
              this.loginTipsChange()
          }
      }
  },
  methods:{
      //登录跳转
      loginTipsChange(){
          const that=this;
          this.num=5;
          this.timer = setInterval(function() {
              if (that.num > 0) {
                  that.num--;
  
              } else {
                  if(that.toViewLogin==true){
                      clearInterval(that.timer);
                      that.toViewLega('login')
                  }else {
                      clearInterval(that.timer);
                  }
              }
          }, 1000)
      },
      // 判断未登录跳转是否关闭
      toViewLoginChange(done){
          this.toViewLogin=false;
          this.num=5;
          clearInterval(this.timer);
  
      },
      cofLogin(){
          let token = getToken();
          console.log(!token)
          if(!token){
              this.toViewLogin = true;
          }else{
              this.toViewLega('Feedback')
          }
      },
  
      //尾页关于我们数据连接处理
      getAboutMenu(type){
          this.aboutMenu.forEach(item =>{
              if(item.name==type){
                  this.toViewAbout('helpCenter',item.id);
              }
          })
      },
      getIconUrl(url){
        return require("@/assets/img/home/footer/"+url+".png");
      },
      toView(router,json,item){
            this.$router.push({name:'HomeHistory'});
      },
      toNewHome(){
        this.$router.push({name:'homeNew'});
      },
      toViewLega(router,json,item){
        this.$store.commit('modify', router);
        window.localStorage.setItem('router', router);
        this.$router.push({name:router});
      },
        //跳转关于我们
      toViewAbout(router,id){
          this.$store.commit('modify', router);
          window.localStorage.setItem('router', router);
          const { href } = this.$router.resolve({
              name: router,
              query:{
                  key:id
              }
  
          });
          window.open(href, '_blank');
      },
  
      toViewChange(json){
  
        this.dialogVisible=true;
        console.log(this.$refs.dialog.style)
        this.$refs.dialog.style.backgroundColor='rgba(0,0,0,.8)';
        if(json==1){
          this.dialogVisible=false;
          window.open('https://www.geidco.org.cn/');
        }
  
        // window.open('https://www.geidco.org')
      },
      handleClose(done) {
        this.RegistdialogVisible = false;
      },
        //获取关于我们id信息
      getAboutId() {
        var language = "CN"
        getHelpColumnTree(language).then((result) => {
            this.aboutMenu = [];
            let menuHelp = result.data;
            for(let i = 0;i<=menuHelp.length-1;i++){
                if(menuHelp[i].name == "关于我们" || menuHelp[i].name == "About Us"){
                    this.aboutMenu = menuHelp[i].children;
                    console.log(this.aboutMenu)
                }
            }
        })
      },
  }
  }
  </script>
  <style scoped>
  a:hover,a:active{
  color:red !important;
  }
  a {
  text-decoration:none;
  }
  .footers1 {
  height: 170px;
  }
  .footers2 {
  width: 100%;
  height: 170px;
  background: #0E4891;
  }
  .LeftBracket {
  float: left;
  width: 340px;
  height: 170px;
  background: url('../assets/img/home/LeftBracket.png') no-repeat;
  margin-left: 206px;
  margin-right: 240px;
  }
  .RightBracket {
  float: left;
  width: 340px;
  height: 170px;
  background: url('../assets/img/home/RightBracket.png') no-repeat;
  }
  .centerBracket {
  position: absolute;
  left: 320px;
  top: 0;
  width: 559px;
  height: 170px;
  }
  .centerBracket_div1 {
  margin-top: 10px;
  height: 64px;
  text-align: center;
  cursor: pointer;
  }
  .centerBracket_div2 {
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  padding: 10px 100px;
  font-size: 14px;
  color: #e0edee;
  }
  .centerBracket_div4 {
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  padding: 10px 70px;
  font-size: 14px;
  color: #e0edee;
  }
  
  .centerBracket_div3 {
  text-align: center;
  /*display: flex;*/
  /*justify-content:space-between;*/
  /*flex-wrap:wrap;*/
  /*padding: 0px 90px;*/
  font-size: 14px;
  color: #e0edee;
  }
  .el-dialog__wrapper,
  .background {
  background-color:rgba(0,0,0,.5)!important;
  }
  </style>