daikan-international/src/components/RTC/dialog/checkBrowser.vue

<template>
  <div id="checkBrowser">
    <i class="iconfont iconshow_cancel" @click="closeCheckBrowser"></i>
    <p class="title">建議使用以下最新版本的瀏覽器用於通話</p>
    <div class="browser_list">
      <div class="item" v-for="i,index in browserList" :key="index">
        <div class="browser_icon">
          <img :src="$config.getStaticResource(`img/apps/rtcLive/${i.icon}.png`)" alt="">
        </div>
        <div class="browser_name">{{i.name}}</div>
        <!-- <div class="browser_version ">{{i.version}}</div> -->
      </div>
    </div>
  </div>
</template>

<script >
export default {
  data() {
    return {
      browserList: [
        {
          icon: "chrome",
          name: "Chrome",
          version: "60",
        },
        {
          icon: "firefox",
          name: "Firefox",
          version: "55",
        },
        {
          icon: "edge",
          name: "Edge",
          version: "40",
        },
        {
          icon: "safari",
          name: "Safari",
          version: "11",
        },
      ],
    };
  },
  components: {},
  methods: {
    closeCheckBrowser() {
      this.$parent.showCheckBrowser = false;
    },
  },
};
</script>

<style scoped lang="scss">
#checkBrowser {
  position: fixed;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  padding: 1.11rem;
  border-radius: 0.14rem;
  text-align: center;
  z-index: 10000;
  .iconshow_cancel {
    font-size: 0.42rem;
    position: absolute;
    right: 0.33rem;
    top: 0.33rem;
  }
  .title {
    font-size: 0.28rem;
    color: #fff;
  }
  .browser_list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.42rem 0 0 0;
    .item {
      img {
        width: 1.39rem;
        height: auto;
      }
      margin-right: 0.28rem;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}
</style>