GCLS_Page_Learn/src/App.vue

<template>
  <div id="app" :dir="dir">
    <router-view />
    <progress-bar />
    <div v-if="userAgentTipShow" class="userAgentTips">
      <img src="./assets/userAgentWarning.png" width="32px" />
      <span>当前浏览器可能与网站不兼容！建议使用 chrome 浏览器获得最佳使用体验。</span>
      <img src="./assets/userAgentClose.png" width="16px" @click="handleClickUserAgent" />
    </div>
  </div>
</template>

<script>
import ProgressBar from '@/common/progress_bar/index.vue';

export default {
  components: {
    ProgressBar
  },
  data() {
    return {
      dir: 'ltr',
      userAgentTipShow: false
    };
  },
  created() {
    // const lang_type = this.$store.state.user.language_type;
    // if (lang_type === 'AR') {
    //   this.dir = 'rtl';
    // }
    this.handleUserAgentRoot();
  },
  methods: {
    handleUserAgentRoot() {
      if (!sessionStorage.getItem('useragent_root_close') && navigator.userAgent.indexOf('Chrome') === -1) {
        this.userAgentTipShow = true;
      }
    },
    handleClickUserAgent() {
      sessionStorage.setItem('useragent_root_close', true);
      this.userAgentTipShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.userAgentTips {
  position: fixed;
  top: 62px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 8px;
  margin-left: -312px;
  font-size: 16px;
  line-height: 24px;
  background: #fff;
  border-radius: 8px;

  :nth-child(1) {
    margin-right: 8px;
  }

  :nth-child(3) {
    cursor: pointer;
  }
}
</style>