de-net-official/pages/install.vue

<template>
  <div class="wrapper">
    <img class="img-title" src="../static/img/img-install-title.png" @click="installExtension">
    <div class="row">
      <img src="../static/img/img-install-01.png">
      <img src="../static/img/img-install-02.png">
      <img src="../static/img/img-install-03.png">
      <img src="../static/img/img-install-04.png">
    </div>
  </div>
</template>

<script>
import axios from 'axios';
const api = {
	prod: 'https://api.denetme.net',
	pre: 'https://preapi.denetme.net',
	test: 'https://testapi.denetme.net'
}
const baseURL = api[process.env.NUXT_ENV.MODE]

export default {
	name: "install",
  data() {
		return {
			config: {
				extensionsInstallChannel : 'officeDownload', // chromeAppStore
				extensionsInstallUrl: ''
      }
    }
  },
  methods: {
		installExtension() {
			let {extensionsInstallChannel, extensionsInstallUrl} = this.config;
			let url = extensionsInstallUrl
			switch (extensionsInstallChannel) {
				case "officeDownload":
					location.href = url;
					break;
				case "chromeAppStore":
					window.open(extensionsInstallUrl)
					break;
			}
		},
		async getConfig() {
			let {data} = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
				baseInfo: {
					appVersionCode: this.appVersionCode,
					mid: this.mid
				},
				params: {
				}
			})
			if (data.code == 0) {
				this.config = data.data;
			}
		},
  },
  mounted () {
		this.getConfig();
	}
}
</script>

<style scoped lang="scss">
.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  .img-title {
    width: 510px;
    margin-bottom: 90px;
    cursor: pointer;
  }
  .row {
    img {
      width: 270px;
      margin-right: 30px;
    }
  }
}
</style>