<!--  -->
<template>
  <div class="check-browser" :class="{ mobile: isMobile }">
      <div class="pic"></div>
      <p class="tips">{{ $t('toast.checkBrowser') }}</p>
      <p class="center-tips">{{ $t('toast.changeBrowser') }}</p>
      <div class="browser-list">
          <div class="browser-item" v-for="i in list" :key="i">
              <div class="browser-pic" :class="i"></div>
              <span class="borwser-name">{{ i }}</span>
          </div>
      </div>
  </div>
</template>

<script setup>
import { ref, toRefs, onBeforeMount, onMounted, computed } from 'vue'
import browser from '@/utils/browser'
const isMobile = computed(() => browser.isMobile)
const list = ref(['Firefox', 'Edge', 'Safari', 'Chrome'])

onBeforeMount(() => {})
onMounted(() => {})
</script>
<style lang="scss" scoped>
.check-browser {
  width: 100vw;
  height: 100vh;
  background: #f7f7f7;
  overflow: hidden;
  .pic {
      width: 240px;
      height: 240px;
      background: url('~@/assets/images/browser/pic_update.png') no-repeat;
      background-size: 100% 100%;
      margin: 120px auto 30px;
  }
  .tips {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #646566;
      line-height: 33px;
      text-align: center;
  }
  .center-tips {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #909090;
      line-height: 32px;
      text-align: center;
      margin: 10px auto 30px;
  }
  .browser-list {
      width: 100%;
      height: auto;
      font-size: 16px;
      font-weight: 400;
      color: #909090;
      line-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      .browser-item {
          width: 80px;
          margin-right: 100px;
          margin-bottom: 10px;
          &:last-of-type {
              margin-right: 0;
          }
          .browser-pic {
              width: 80px;
              height: 80px;
              background-size: 100% 100%;
              background-repeat: no-repeat;
              &.Firefox {
                  background-image: url('~@/assets/images/browser/browser_Firefox.png');
              }
              &.Edge {
                  background-image: url('~@/assets/images/browser/browser_Edge.png');
              }
              &.Safari {
                  background-image: url('~@/assets/images/browser/browser_Safari.png');
              }
              &.Chrome {
                  background-image: url('~@/assets/images/browser/browser_Chrome.png');
              }
          }
          .borwser-name {
              display: block;
              width: 100%;
              font-size: 16px;
              text-align: center;
          }
      }
  }
}
.mobile {
  .pic {
      width: 3.2rem;
      height: 3.2rem;
      background: url('~@/assets/images/browser/pic_update.png') no-repeat;
      background-size: 100% 100%;
      margin: 5.2rem auto 0.4rem;
  }
  .tips {
      font-size: 0.32rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #646566;
      line-height: 0.44rem;
      text-align: center;
  }
  .center-tips {
      font-size: 0.2133rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #909090;
      line-height: 0.4267rem;
      text-align: center;
      margin: 10px auto 0.4rem;
  }
  .browser-list {
      width: 100%;
      height: auto;
      font-size: 16px;
      font-weight: 400;
      color: #909090;
      line-height: 0.4267rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .browser-item {
          width: 1.0667rem;
          margin-right: 1.3333rem;
          margin-bottom: 0.1333rem;
          &:last-of-type {
              margin-right: 0;
          }
          .browser-pic {
              width: 1.0667rem;
              height: 1.0667rem;
              background-size: 100% 100%;
              background-repeat: no-repeat;
              &.Firefox {
                  background-image: url('~@/assets/images/browser/browser_Firefox.png');
              }
              &.Edge {
                  background-image: url('~@/assets/images/browser/browser_Edge.png');
              }
              &.Safari {
                  background-image: url('~@/assets/images/browser/browser_Safari.png');
              }
              &.Chrome {
                  background-image: url('~@/assets/images/browser/browser_Chrome.png');
              }
          }
          .borwser-name {
              display: block;
              width: 100%;
              text-align: center;
              font-size: 0.2133rem;
          }
      }
  }
}
</style>
