dev/dcp-web-gate/src_old/components/footers.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:10px 0;background:#8395b3;border:1px solid #5a729b"></div>
                <div :class="$i18n.locale=='zh'?'centerBracket_div2':'centerBracket_div4'">
                    <!-- Useragreement -->
                    <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,
        menu:[],
        aboutMenu:[],
        year:null,
        srcPdf: null,
        srcPdf2: null,
        srcPdf3: null,
        srcPdf4: null,
        img:[{
          url:'Instagram'
        },{
          url:'YouTube'
        },{
          url:'faceBook'
        },{
          url:'in'
        },{
          url:'Twitter'
        },{
          url:'WeChat'
        },{
          url:'microBlog'
        }],
        toViewLogin:false,
        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--;
                    console.log(that.num)
                } else {
                    if(that.toViewLogin==false){
                        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();
            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");
          },
        toNewHome(){
            this.$router.push({name:'home'});
          },
        toView(router,json,item){
                this.$router.push({name:'HomeHistory'});
          },
        viewLogin(router, json) {
            this.$router.push({
                name: router,
                query: {
                    key:json,

                }
            });
        },
        toViewLega(router,json,item){
            this.$store.commit('modify', router);
            window.localStorage.setItem('router', router);
            this.$router.push({name:router});
          },
        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.cn/')
          },
        handleClose(done) {
            this.RegistdialogVisible = false;
          },
        //跳转关于我们
        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');
        },
        //获取关于我们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;
                    }
                }
            })
        },

    }
  }
</script>
<style>
  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: 20px;
    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 {
    display: flex;
    /*justify-content:space-between;*/
    flex-wrap:wrap;
      justify-content:center;
    padding: 0px 90px;
    font-size: 14px;
    color: #e0edee;
  }
  .el-dialog__wrapper,
  .background {
    background-color:rgba(0,0,0,.5)!important;
  }

</style>