dev/dcp-web-gate/src_old/components/footersNew.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;">{{$i18n.locale=='zh'?'主办单位':'Hosts'}}</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=='zh'?'centerBracket_div2':'centerBracket_div4'">
                    <span @click="getAboutMenu('关于我们')" class="cursor">{{$t('common.AboutUs')}}</span>
                    <span>|</span>
                    <span @click="getAboutMenu('用户协议')" class="cursor">{{$t('common.Useragreement')}}</span>
                    <span>|</span>
                    <span @click="getAboutMenu('隐私政策')" class="cursor">{{$t('common.Privacypolicy')}}</span>
                    <span>|</span>
                    <span @click="toViewLega('helpCenter')" class="cursor">{{$t('common.HelpCenter')}}</span>
                    <span>|</span>
                    <span @click="cofLogin" class="cursor">{{$t('common.Feedback')}}</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">{{$t('common.RecordNo')}}</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%;">
                        {{$t('common.Thelinyouvisitedwillleavethewebsiteof')}}
                    </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')">
                        {{$t('common.Continuetovisit')}}
                    </span>
                    <span @click="dialogVisible=false" style="cursor: pointer;">{{$t('common.giveup')}}</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=='zh'" 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=='zh'" 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=='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="toViewLega('login')">
                            {{$t('common.ReminderFifth')}}
                        </span>
                        <span style="margin-left: 10px;" class="cursor" @click="toViewLega('Register')">
                            {{$t('common.ReminderSixth')}}
                        </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 = "ZH"
        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: #2c558a;
}
.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>