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">About Us</div>
        <div class="top_location">
          <span class="iconfont icon-weizhi"></span>
          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span>About Us <span class="iconfont icon-dkw_guanbi-"></span><span>Company Profile</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">
      <img src="@/assets/images/about/img2.png" alt="">
      <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 class="industry">
      <div class="industry_t">
        <div class="industry_title">Industry Coverage</div>
        <div class="industry_list">
          <template v-for="(v,i) in professionList" :key="i">
            <div>
              <img :src="v.imgUrl" :alt="v.title" />
              <div v-html="v.title"></div>
            </div>
          </template>
        </div>
      </div>
      <div class="industry_b">
      </div>
    </div>
    <div class="teamsBox">
      <div class="teamsBox_l">
        <div class="teamsBox_l_title">Teams</div>
        <div class="teamsBox_l_text">
          <div>WENKH has the best research team, which consists of senior analysts from many fields such as automobiles, chemicals, electronics, equipment and medical. The team analysts have an average of more than 8 years of experience in their respective research fields, and have long focused on market trend tracking, competitive product analysis and technology development research. Our team has led many large-scale market research projects for Fortune 500 companies and government organizations, has a deep understanding of industrypain points and development opportunities, can accurately capture market dynamics and output professional opinions.</div>
          <div>WENKH also has a professional consulting team. With excellent business insight and strategic planning capabilities, they have formulated development strategies, optimized business processes, and improved operational efficiency for large companies around the world, and have accumulated rich international consulting experience and high-end business resources.</div>
        </div>
      </div>
      <div class="teamsBox_r">
        <img src="@/assets/images/about/img3.png" alt="">
      </div>
    </div>
    <div class="corporateBox">
      <img src="@/assets/images/about/img4.png" alt="">
      <div>
        <div class="corporateBox_title">Corporate Mission</div>
        <div class="corporateBox_list">
          <div class="corporateBox_item">
            <img src="@/assets/images/about/img5.png" alt="">
            <div class="corporateBox_item_title">Foresight</div>
            <div class="corporateBox_item_text">
              <div>
                <div></div>
              </div>
              With a global vision and forward-looking research, we providecustomers with accurate market insights and help companiesseize opportunities in transformation.
            </div>
          </div>
          <div class="corporateBox_item">
            <img src="@/assets/images/about/img6.png" alt="">
            <div class="corporateBox_item_title">Foresight</div>
            <div class="corporateBox_item_text">
              <div>
                <div></div>
              </div>
              With a global vision and forward-looking research, we providecustomers with accurate market insights and help companiesseize opportunities in transformation.
            </div>
          </div>
          <div class="corporateBox_item">
            <img src="@/assets/images/about/img7.png" alt="">
            <div class="corporateBox_item_title">Foresight</div>
            <div class="corporateBox_item_text">
              <div>
                <div></div>
              </div>
              With a global vision and forward-looking research, we providecustomers with accurate market insights and help companiesseize opportunities in transformation.
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="customerBox">
      <div class="customerBox_title">Customer Distribution</div>
      <img src="@/assets/images/about/img8.png" alt="">
    </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 img01 from "@/assets/images/companyProfile/img01.png";
import img02 from "@/assets/images/companyProfile/img02.png";
import img03 from "@/assets/images/companyProfile/img03.png";
import img04 from "@/assets/images/companyProfile/img04.png";
import img05 from "@/assets/images/companyProfile/img05.png";
import img06 from "@/assets/images/companyProfile/img06.png";
import img07 from "@/assets/images/companyProfile/img07.png";
import img08 from "@/assets/images/companyProfile/img08.png";
import img09 from "@/assets/images/companyProfile/img09.png";
import img10 from "@/assets/images/companyProfile/img10.png";
import img11 from "@/assets/images/companyProfile/img11.png";
import img12 from "@/assets/images/companyProfile/img12.png";
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const professionList = [
  {
    imgUrl: img01,
    title: "Chemical and Materials",
  },
  {
    imgUrl: img02,
    title: "Aerospace",
  },
  {
    imgUrl: img03,
    title: "Agriculture",
  },
  {
    imgUrl: img04,
    title: "Machinery and Equipment",
  },
  {
    imgUrl: img05,
    title: "Medical and Bio-Health",
  },
  {
    imgUrl: img06,
    title: "Electronics and Semiconductors",
  },
  {
    imgUrl: img07,
    title: "Software and Services",
  },
  {
    imgUrl: img08,
    title: "Consumer Products <br/> and Retail",
  },
  {
    imgUrl: img09,
    title: "Automobile and Transportation",
  },
  {
    imgUrl: img10,
    title: "Food and Beverage",
  },
  {
    imgUrl: img11,
    title: "Emerging Industries",
  },
  {
    imgUrl: img12,
    title: "Other Industries",
  },
];
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);
          margin: 0 var(--size-4);
        }
        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: var(--size-500);
    position: relative;
    > img {
      width: var(--size-650);
      height: var(--size-435);
      position: absolute;
      left: var(--size-145);
      top: 50%;
      transform: translateY(-50%);
    }
    > div {
      background: #f6faf7;
      padding: var(--size-130) var(--size-145) var(--size-130) var(--size-345);
      .researchBox_title {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        color: #1a1a1a;
        position: relative;
        z-index: 5;
      }
      .researchBox_des {
        font-size: var(--size-16);
        font-family: Arial, Arial-Regular;
        color: #1a1a1a;
        line-height: var(--size-24);
        position: relative;
        z-index: 5;
      }
    }
  }
  .industry {
    .industry_t {
      width: 100%;
      padding: var(--size-60) var(--size-145) 0;
      height: var(--size-355);
      background: linear-gradient(159deg, #499f81 3%, #749c56 91%, #749c56 97%);
      .industry_title {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        margin-bottom: var(--size-38);
      }
      .industry_list {
        display: flex;
        flex-wrap: wrap;
        > div {
          position: relative;
          img {
            width: var(--size-270);
            height: var(--size-180);
            display: block;
            object-fit: cover;
          }
          div {
            width: 100%;
            font-size: var(--size-16);
            font-family: Arial, Arial-Regular;
            font-weight: 400;
            text-align: center;
            padding: 0 0 var(--size-15);
            color: #ffffff;
            line-height: var(--size-20);
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }
      }
    }
    .industry_b {
      height: var(--size-180);
    }
  }
  .teamsBox {
    padding: var(--size-70) var(--size-145) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .teamsBox_l {
      width: calc(50% - var(--size-30));
      .teamsBox_l_title {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        color: #1a1a1a;
        line-height: var(--size-80);
        position: relative;
        &::after {
          content: "";
          display: block;
          width: var(--size-90);
          height: var(--size-10);
          background: linear-gradient(180deg, #84a96d, #5fab91);
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
      .teamsBox_l_text {
        font-size: var(--size-16);
        font-family: Arial, Arial-Regular;
        color: #666666;
        line-height: var(--size-28);
        > div {
          margin-top: var(--size-25);
        }
      }
    }
    .teamsBox_r {
      img {
        width: var(--size-810);
        height: var(--size-605);
      }
    }
  }
  .corporateBox {
    position: relative;
    top: var(--size--20);
    > img {
      width: 100%;
      height: var(--size-640);
    }
    > div {
      width: calc(100% - var(--size-290));
      position: absolute;
      top: 0;
      left: var(--size-145);
      padding-top: var(--size-300);
      .corporateBox_title {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: center;
        color: #1a1a1a;
        line-height: var(--size-63);
      }
      .corporateBox_list {
        background: #f7f7f7;
        display: flex;
        margin-top: var(--size-35);

        .corporateBox_item {
          position: relative;
          width: 33.3%;
          img {
            width: var(--size-54);
          }
          .corporateBox_item_title {
            font-size: var(--size-22);
            font-family: Arial, Arial-Bold;
            font-weight: 700;
            color: #1a1a1a;
          }
          .corporateBox_item_text {
            font-size: var(--size-14);
            font-family: Arial, Arial-Regular;
            color: #666666;
            line-height: var(--size-20);
            display: flex;
            > div {
              padding-top: var(--size-8);
              margin-right: var(--size-8);
              > div {
                width: var(--size-6);
                height: var(--size-6);
                background: #666666;
                border-radius: 50%;
                flex-shrink: 0;
              }
            }
          }
          &:nth-child(1) {
            padding: var(--size-50) var(--size-95) var(--size-70) var(--size-30);
          }
          &:nth-child(2) {
            padding: var(--size-50) var(--size-95) var(--size-70) var(--size-95);
          }
          &:nth-child(3) {
            padding: var(--size-50) var(--size-95) var(--size-70) var(--size-95);
          }
          &::after {
            content: "";
            display: block;
            width: var(--size-1);
            height: var(--size-180);
            background: #e6e6e6;
            position: absolute;
            right: 0;
            top: var(--size-52);
          }
        }
      }
    }
  }
  .customerBox {
    text-align: center;
    padding-top: var(--size-70);
    height: var(--size-700);
    .customerBox_title {
      font-size: var(--size-48);
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      text-align: center;
      color: #1a1a1a;
      line-height: var(--size-63);
      margin-bottom: var(--size-20);
    }
    img {
      width: var(--size-1200);
    }
  }
}
@include responseTo("phone") {
  .page {
    .top {
      img {
        height: 100px;
        object-fit: cover;
      }
      > div {
        padding: var(--size-15);
        .top_title {
          font-size: var(--size-28);
        }
        .top_location {
          font-size: var(--size-12);
        }
      }
    }
    .numList {
      padding: 0 var(--size-30);
      display: block;
      .item {
        width: 100% !important;
        height: auto;
        padding: var(--size-20) 0;
        text-align: center;
        img {
          margin: auto;
        }
        &::after {
          display: none;
        }
      }
    }
    .researchBox {
      padding: var(--size-15);
      display: flex;
      flex-direction: column;
      background: #f6faf7;
      > img {
        position: inherit;
        width: 100%;
        height: auto;
        transform: none;
        top: 0;
        left: 0;
      }
      > div {
        padding: 0;
        .researchBox_title {
          font-size: var(--size-20);
        }
        .researchBox_des {
          font-size: var(--size-14);
        }
      }
    }
    .industry {
      .industry_t {
        padding: var(--size-15);
        height: var(--size-380);
        .industry_title {
          font-size: var(--size-20);
          margin-bottom: 0;
        }
        .industry_list {
          margin-top: var(--size-22);
          display: flex;
          > div {
            width: 50%;
            img {
              width: 100%;
              height: var(--size-105);
              display: block;
            }
            div {
              width: 100%;
              font-size: var(--size-12);
              padding: 0 0 var(--size-6);
            }
          }
        }
      }
      .industry_b {
        height: var(--size-320);
      }
    }
    .teamsBox {
      padding: var(--size-15);
      display: flex;
      flex-direction: column;
      .teamsBox_l {
        width: 100%;
        .teamsBox_l_title {
          font-size: var(--size-20);
          line-height: var(--size-35);
          text-align: center;
          &::after {
            width: var(--size-30);
            height: var(--size-5);
            left: 50%;
            transform: translateX(-50%);
          }
        }
        .teamsBox_l_text {
          div {
            margin-top: var(--size-10);
          }
        }
      }
      .teamsBox_r {
        img {
          width: 100%;
          height: auto;
        }
      }
    }
    .corporateBox {
      top: 0;
      height: var(--size-800);
      > img {
        width: 100%;
        height: auto;
      }
      > div {
        width: 100%;
        // position: inherit;
        padding-top: 0;
        left: 0;
        left: 0;
        .corporateBox_title {
          font-size: var(--size-30);
        }
        .corporateBox_list {
          flex-direction: column;
          padding-top: var(--size-20);
          .corporateBox_item {
            width: 60%;
            margin: 0 auto var(--size-20);
            padding: 0 !important;
            text-align: center;
            .corporateBox_item_text {
              text-align: left;
            }
            &::after {
              display: none;
            }
          }
        }
      }
    }
    .customerBox {
      height: var(--size-270);
      .customerBox_title {
        font-size: var(--size-22);
      }
      > img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>