dev/dcp-web-gate/src_old/views/helpCenter/appDownload.vue

<template>
    <div style="height: 100px;background-color: #fff;" class="registerBox">
      <div class="header1">
        <div class="header2">
          <div class="logo">
            <img
              :src="$i18n.locale=='zh'?require('@/assets/img/home/LOGO2020-12-22.png'):require('@/assets/img/home/LOGO2020-12-22.png')"
              alt
              class="cursor"
              :style="$i18n.locale=='zh'?'width: 336px;':'width:336px;transform:translateY(1px)'"
              @click="toView(0,'home')"
            />
          </div>
        </div>
      </div>

      <div style="width: 100%;height: 800px;background-color: #deedfe;">
        <div style="width: 1200px;height: 700px;margin: auto;position: relative;" class="appCload">
            <div style="position: absolute;top: 100px;right: 100px;">
                <img src="../../assets/img/home/footer/cn.png" alt="" v-if="$i18n.locale == 'zh'">
                <img src="../../assets/img/home/footer/en.png" alt="" v-else>
            </div>
            <div style="padding-top: 180px;">
                <div style="color: #2c558a;font-weight: 700;" :style="$i18n.locale=='zh'?'font-size: 60px;':'font-size: 40px;'">
                    {{$i18n.locale=='zh'?'能联全球APP':'World of Energy Interconnection APP'}}
                </div>
                <div style="margin-top: 20px;color: #2c558a;text-indent: 5px;" :style="$i18n.locale=='zh'?'font-size: 35px;':'font-size: 30px;'">

                    {{$i18n.locale=='zh'?'绿色 低碳 可持续发展':'Green, low carbon and sustainable development'}}
                </div>
                <div style="margin-top: 65px;font-size: 20px;margin-bottom: 20px;">
                    {{$i18n.locale=='zh'?'请根据您的手机选择下载客户端':'Please select the download client according to your mobile phone'}}
                </div>
                <div style="position: relative;width: 153px;text-align: center;float: left;">
                    <div ref="qrcodeAndroidEn" id="qrcodeAndroidEn" v-show="$i18n.locale=='en'"></div>
                    <div ref="qrcodeAndroidZh" id="qrcodeAndroidZh" v-show="$i18n.locale=='zh'"></div>
                    <div style="margin-top: 8px;">
                        <img src="../../assets/img/home/footer/android.png" alt=""  style="vertical-align: middle;">
                        Android
                    </div>
                </div>
                <div style="position: relative;width: 153px;text-align: center;float: left;margin-left: 50px;">
                    <div ref="qrcodeIOSZH" id="qrcodeIOSZH" v-show="$i18n.locale=='zh'"></div>
                    <div ref="qrcodeIOSEN" id="qrcodeIOSEN" v-show="$i18n.locale=='en'"></div>
                    <div style="margin-top: 8px;">
                        <img src="../../assets/img/home/footer/iphone.png" alt="" style="vertical-align: middle;">
                        IOS
                    </div>
                </div>
                <div style="position: relative;width: 153px;text-align: center;float: left;margin-left: 50px;">
                    <div ref="qrcodeH5" id="qrcodeH5"></div>
                    <div style="margin-top: 10px;">
                        <!-- <img src="../../assets/img/home/footer/iphone.png" alt="" style="vertical-align: middle;"> -->
                        {{$i18n.locale=='zh'?'手机网页版':'Mobile Web'}}

                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </template>
<script>

import QRCode from 'qrcodejs2'
  export default {
    name: "appDownload",
    data() {
      return {


      };
    },
    mounted() {

        this.qrcode();
    },

    methods: {
          toView(num, router, json) {
            console.log(num,router)
            this.$router.push({ name: router, query: { key: json } });
            this.$store.commit("modify", router);
            window.localStorage.setItem("router", router);
            if (num == 1) {
              let i = {
                label: "用户中心",
                value: "userCenterView",
              };
              if (this.$Cookies.get('token')) {
                return (this.i = 2);
              } else if (this.$i18n.locale == "en") {
                return (this.i = 3);
              } else {
                return (this.i = 1);
              }
              this.$nextTick(() => {
                Bus.$emit("title", i);
              });
            }
        },
        qrcode () {
          this.$nextTick(() => {
            let qrcodeAndroidEn = new QRCode('qrcodeAndroidEn', {
                width: 153,
                height: 153,
                text: 'https://www.geidcp.com/api/file/pub/app/apk/EN.apk', // 二维码地址
            })
            let qrcodeAndroidZh = new QRCode('qrcodeAndroidZh', {
                width: 153,
                height: 153,
                text: 'https://www.geidcp.com/api/file/pub/app/apk/SN.apk', // 二维码地址
            })
            let qrcodeIOSZH = new QRCode('qrcodeIOSZH', {
                width: 153,
                height: 153,
                text: 'https://apps.apple.com/us/app/id1543854564', // 二维码地址
            })
            let qrcodeIOSEN = new QRCode('qrcodeIOSEN', {
                width: 153,
                height: 153,
                text: 'https://apps.apple.com/us/app/id1543854564', // 二维码地址
            })
            let qrcodeH5 = new QRCode('qrcodeH5', {
                width: 153,
                height: 153,
                text: 'https://m.geidcp.com', // 二维码地址
            })
          });

        },
    },
  };
  </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header1 {
    width: 100%;
    height: 120px;
    margin: auto;
    background: #2c558a;
    /* border-bottom: 2px solid #c2c2c2; */
  }
  .header2 {
    width: 1200px;
    height: 120px;
    margin: auto;
    position: relative;
    border-bottom: 1px solid #fff;
    /* background: skyblue; */
  }
  .language {
    line-height: 50px;
    color: #ccc;
    font-weight: 400;
    font-size: 12px;
  }

  .logo {
    position: absolute;
    top: 30px;
    left: 421px;
    width: 240px;
    height: 55px;
    /* background-image: url(@/assets/logo.png); */
  }
  .title {
    position: absolute;
    top: 40px;
    left: 450px;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
  }
 .appCload {
    background: url('../../assets/img/home/footer/bg.png');
 }
  </style>