web/pages/about/qualify.vue

<template>
  <div class="page" id="page">
    <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="top-container">
        <n-icon :component="MdPaper" size="40" style="vertical-align: middle;" />
        <span>{{ t('common.navAboutUs.qualify') }}</span>
      </div>
    </div>

    <div class="page-nav-container wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="nav-txt">
        <n-breadcrumb separator=">">
          <n-breadcrumb-item>
            <n-icon :component="MdHome" /><router-link to="/home">{{ t('common.navigate.home') }}</router-link>
          </n-breadcrumb-item>
          <n-breadcrumb-item>
            <n-icon :component="MdPaper" />{{ t('common.navAboutUs.qualify') }}
          </n-breadcrumb-item>
        </n-breadcrumb>
      </div>
    </div>

    <div class="qualify-container">
      <div class="container">
        <div class="title">
          <h2>{{ t('common.navAboutUs.qualify') }}</h2>
        </div>
        <div class="qualify-box">
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua12.jpg" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua01.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua02.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua03.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua04.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua05.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua06.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua07.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua08.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua09.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua10.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua11.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua13.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua14.png" />
            </n-card>
          </div>
          <div class="box">
            <n-card size="medium" content-style="display:flex">
              <img src="@/assets/images/qua15.png" />
            </n-card>
          </div>
          <div class="box">
            <!-- <n-card size="medium" content-style="display:flex">
            </n-card> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { MdHome, MdPaper } from "@vicons/ionicons4";
import { NIcon, NBreadcrumb, NBreadcrumbItem, NCard } from "naive-ui";
import { onMounted } from "vue";
import { useI18n } from "#imports";
const { t } = useI18n();

onMounted(() => {
  onMounted(() => {
    if (typeof window !== "undefined") {
      window.scrollTo(0, 1);
    }
  });
});
useHead({
  title: t("common.navAboutUs.qualify") + "-" + t("defaultSettings.title"),
  viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
  charset: "utf-8",
  meta: [
    {
      hid: "keywords",
      name: "keywords",
      content: t("defaultSettings.keyword"),
    },
    {
      hid: "description",
      name: "description",
      content: t("defaultSettings.desc"),
    },
  ],
});
</script>
<style lang="scss" scoped>
.qualify-container {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  .qualify-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .box {
      width: 24%;
      padding-bottom: 20px;
    }
  }
}

img {
  width: 100%;
  height: 300px;
  object-fit: contain;
}
</style>