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

<template>
        <div class="footers2">
            <div class="autoBox" >
              <div class="centerBracket">
                <div class="centerBracket_div1">
                      <span style="color: #333;margin-left: -40px;margin-right: 20px;font-size: 14px;">{{$i18n.locale=='zh'?'主办单位':'Hosts'}}</span>
                      <img :src="footerimg" alt="" style="height:80%;vertical-align: middle;" @click="toViewChange">
                      <!-- href="https://www.geidco.org.cn/" -->
                </div>
                <div style="margin:0;border-bottom:1px solid #ccc"></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  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: #333;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 {
        year:new Date().getFullYear(),
        dialogVisible:false,
        RegistdialogVisible:false,
        innerVisible1: false,
        innerVisible2: false,
          menu:[],
          aboutMenu:[],
        srcPdf: null,
        srcPdf2: null,
        srcPdf3: null,
        srcPdf4: null,
        footerimg:require('@/assets/img/login/orisvg.svg'),
        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';
        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");
      },
      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});
      },
      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.$router.push({ name: router, query: {key:id} });
        // },
        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;
                        console.log(this.aboutMenu)
                    }
                }
            })
        },
    }
  }
</script>
<style scoped>
  .footers1 {
    height: 170px;
  }
  .footers2 {
    width: 100%;
    height: 170px;
  }
  .LeftBracket {
    float: left;
    width: 340px;
    height: 120px;
    margin-left: 206px;
    margin-right: 240px;
  }
  a:hover,a:active{
    color:red !important;
  }
  a {
    text-decoration:none;
    color: #333;
  }
  .RightBracket {
    float: left;
    width: 340px;
    height: 170px;
  }
  .centerBracket {
    position: absolute;
    left: 320px;
    top: 0;
    width: 700px;
    height: 170px;
  }
  .centerBracket_div1 {
    margin-top:14px;
    height: 40px;
    text-align: center;
    cursor: pointer;
  }
  .centerBracket_div2 {
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
    padding: 10px 100px;
    font-size: 14px;
    color: #333;
  }
  .centerBracket_div4 {
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
    padding: 10px 70px;
    font-size: 14px;
    color: #333;
  }
  .centerBracket_div3 {
    text-align: center;
    font-size: 14px;
    color: #333;
  }
  .el-dialog__wrapper,
  .background {
    background-color:rgba(0,0,0,.5)!important;
  }
</style>