web/pages/about/index.vue

<template>
  <div class="page" id="page">
    <div class="top">
      <img src="@/assets/images/about/img1.png" alt="">
      <div>
        <div class="top_title">Contact Us</div>
        <div class="top_location">
          <span class="iconfont icon-weizhi"></span>
          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Contact Us</span>
        </div>
      </div>
    </div>
    <div class="numList">
      <div class="item ">
        <span class="iconfont icon-analytics"></span>
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="15" />
          Years+
        </div>
        <div class="item_b">Segmented Industry Research Experience</div>
      </div>
      <div class="item ">
        <img class="item_img" src="/assets/images/img9.png" alt="">
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="20000" />
          +
        </div>
        <div class="item_b">Segmented Product Report Covering the Entire Industry</div>
      </div>
      <div class="item ">
        <span class="iconfont icon-yinhuanzhili-qiyezichayinhuan"></span>
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="10000" />
          +
        </div>
        <div class="item_b">Segmented Product Reports Covering the Entire Industry</div>
      </div>
      <div class="item ">
        <span class="iconfont icon-dinghuoshujufenxi"></span>
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="12000" />
          K+
        </div>
        <div class="item_b">Data Point Information</div>
      </div>
      <div class="item ">
        <span class="iconfont icon-dinghuoshujufenxi"></span>
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="12000" />
          K+
        </div>
        <div class="item_b">Data Point Information</div>
      </div>
    </div>
    <div class="researchBox">
      <div>
        <div class="researchBox_title">WENKH Market Research</div>
        <div class="researchBox_des">
          <div>WENKH Market Research, as a globally leading information consulting firm, specializes in providing in-depth industry research services for major enterprises worldwide. We offer professional services, including market segmentation research reports,customized research reports, industry white papers, IPO consulting services, and feasibility study reports, across various sectorssuch as chemicals, electronics and semiconductors, healthcare, and machinery and equipment.</div>
          <div>Since its establishment, WENKH Market Research has remained focused on uncovering deep insights behind market data toprovide precise foundations for business decision-making. The company's core team consists of experienced professionals whohave dedicated many years to the field of market research. Like a precise and powerful information hub, we capture the mostrefined and critical data from the forefront of various industries with unique sharpness and expertise. This data forms the powerfulfoundation of our core competitive advantage.</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  IosFiling,
  MdHome,
  IosListBox,
  MdBusiness,
  IosPaper,
  MdList,
} from "@vicons/ionicons4";
import { NIcon, NBreadcrumb, NBreadcrumbItem, NCard } from "naive-ui";
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
onMounted(() => {
  if (typeof window !== "undefined") {
    window.scrollTo(0, 1);
  }
});
useHead({
  title: t("common.navAboutUs.comp") + "-" + 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>
@import "~/assets/css/tool.scss";
.page {
  .top {
    width: 100%;
    position: relative;
    margin-top: var(--size-130);
    img {
      width: 100%;
    }
    > div {
      width: 100%;
      padding: var(--size-60) var(--size-176) 0;
      position: absolute;
      top: 0;
      left: 0;
      .top_title {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: left;
        color: #ffffff;
      }
      .top_location {
        font-size: var(--size-14);
        font-family: Arial, Arial-Regular;
        font-weight: 400;
        color: #ffffff;
        .icon-dkw_guanbi- {
          color: #ffffff;
          font-size: var(--size-12);
        }
        span {
          color: #72ff56;
        }
      }
    }
  }
  .numList {
    display: flex;
    align-items: center;
    padding: 0 var(--size-75);
    background: #f5f5f5;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 var(--size-70);
      height: var(--size-265);
      position: relative;
      &::after {
        position: absolute;
        right: 0;
        top: var(--size-62);
        display: block;
        content: "";
        width: var(--size-1);
        height: var(--size-142);
        background: #cccccc;
      }
      &:nth-child(1) {
        width: var(--size-357);
      }
      &:nth-child(2) {
        width: var(--size-354);
      }
      &:nth-child(3) {
        width: var(--size-356);
      }
      &:nth-child(4) {
        width: var(--size-343);
      }
      &:nth-child(5) {
        width: var(--size-342);
        &::after {
          display: none;
        }
      }
      .iconfont {
        font-size: var(--size-62);
        color: #808080;
        line-height: var(--size-62);
      }
      .item_img {
        width: var(--size-62);
        height: var(--size-62);
      }
      .item_t {
        color: transparent;
        background-image: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        display: inline-block;
        font-size: var(--size-40);
        font-family: FZZhengHeiS-B-GB, FZZhengHeiS-B-GB-Regular;
        font-weight: 700;
        margin-top: var(--size-10);
      }
      .item_b {
        font-size: var(--size-16);
        color: #1a1a1a;
        font-family: Arial, Arial-Regular;
      }
    }
  }
  .researchBox {
    background: #ffffff;
    padding-left: 500px;
    > div {
      background: #f6faf7;
      padding: 130px 345px 130px 145px;
      .researchBox_title {
        font-size: 48px;
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 24px;
      }
      .researchBox_des {
        font-size: 16px;
        font-family: Arial, Arial-Regular;
        color: #1a1a1a;
        line-height: 24px;
        margin-top: 20px;
      }
    }
  }
}
</style>