dev/dcp-web-gate/src_old/components/footersNewEN.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;">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="centerBracket_div4">
                    <span @click="getAboutMenu('关于我们')" class="cursor">About us</span>
                    <span>|</span>
                    <span @click="getAboutMenu('用户协议')" class="cursor">User Agreement</span>
                    <span>|</span>
                    <span @click="getAboutMenu('隐私政策')" class="cursor">Privacy Policy</span>
                    <span>|</span>
                    <span @click="toViewLega('helpCenter')" class="cursor">Help Center</span>
                    <span>|</span>
                    <span @click="cofLogin" class="cursor">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">京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%;">
                        The link you visited is about to leave the Enlink Global website. Do you want to continue?
                    </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')">
                        Continue to visit
                    </span>
                    <span @click="dialogVisible = false" style="cursor: pointer;">Give up</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;">
                        This function can be used only after you log in
                    </div>
                    <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
                  font-weight: normal;color: #666666;line-height: 30px;">
                        System will be in <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;">
                        If the page does not automatically jump, please click the following link
                    </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')">
                            I want to login
                        </span>
                        <span style="margin-left: 10px;" class="cursor" @click="toViewLega('Register')">
                            I want to 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>