web/pages/about/link.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>
          <span>Research Method</span>
        </div>
      </div>
    </div>

    <div class="research-content">
      <div class="content-item-01">
        WENKH, with its rigorous research methods and extensive industry experience, is
        dedicated to providing high-quality industry research reports for clients. Our
        research system covers both primary and secondary research,gathering comprehensive
        and accurate data from multiple dimensions. Primary research involves in-depth
        discussions with key participants in the industry value chain, collecting market
        dynamics, trend forecasts, and critical data toensure the authority and
        forward-looking nature of the reports. Secondary research integrates data from
        public and professional sources such as government agencies, industry
        associations, company reports, and independentresearch organizations, combined
        with WENKH's proprietary database for in-depth analysis. Throughout the research
        process, we consider core factors such as government policies, market environment,
        competitive landscape,industry technological innovation, market risks, and
        opportunities, ensuring the comprehensiveness and reliability of our research
        results.
      </div>
      <div class="content-item-02">
        In the field of industry research, WENKH has developed a mature research
        methodology and industry evaluation system, utilizing scientific analysis tools
        such as the industry lifecycle theory, PEST analysis, Porter's Five Forces model,
        SWOT analysis, Boston Matrix, and Porter's Diamond theory to conduct in-depth
        analysis of key dimensions such as market supply and demand, competitive
        landscape, profit models, and industrial chain development. Based on long-term
        industrytracking and data accumulation, we can accurately forecastfuture industry
        trends and provide clients with comprehensive market insights. Our research
        reportsnot only cover the overall industry market capacity, segmentation data,
        import-expor situation, and market demand characteristics but also conduct
        in-depthresearch on the operational conditions of key enterprises, helping clients
        formulate scientifically soundstrategic decisions and seize opportunities in a
        complexand dynamic market environment.
      </div>
    </div>

    <div class="method-box">
      <div class="method-item">
        <div class="method-left method-lr">
          <p class="title">Bottom Up Research Method</p>
        </div>
        <div class="method-right method-lr">
          <p class="title">Top Down Research Methodology</p>
        </div>
      </div>
      <div class="level_top">
        <img src="@/assets/images/about/level_00.png" alt="" />
      </div>
      <div
        :class="['method-item ', `method-level_${index}`]"
        v-for="(item, index) in methodLevel"
        :key="index"
      >
        <div class="method-left method-lr">
          <div class="level_item">
            <p class="level-title">{{ item.left.title }}</p>
            <p class="level-text">{{ item.left.text }}</p>
          </div>
          <div class="level-img">
            <img :src="item.left.img" alt="" />
            <div class="level-white" />
          </div>
        </div>
        <div class="method-right method-lr">
          <div class="level-img">
            <img :src="item.right.img" alt="" />
            <div class="level-white" />
          </div>
          <div class="level_item">
            <p class="level-title">{{ item.right.title }}</p>
            <p class="level-text">{{ item.right.text }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="method-content">
      <div class="title">Multidimensional Data Cross Validation Method</div>
      <div class="content-box">
        <div class="content-item">
          <p class="item-title">Data Source Triangulation</p>
          <p class="item-text">
            We validate data by comparing internal records (sales, customer, financial)
            with multiple independenitem-ernal sources (industry reports,
            governmentstatistics, market research).
          </p>
        </div>
        <div class="content-item">
          <p class="item-title">Supply Chain and Demand Verification</p>
          <p class="item-text">
            We verify data across the supply chain, comparingproduction and consumption
            data (output vs.purchasevolumes, user surveys) toassess supply-demanddynamics.
          </p>
        </div>
        <div class="content-item">
          <p class="item-title">Methodological Cross-Validation</p>
          <p class="item-text">
            We cross-validate findings using diverse researchmethods (surveys, expert
            interviews) and analyticalmodels (time series, regression) to ensureaccuracy.
          </p>
        </div>
        <div class="content-item">
          <p class="item-title">Temporal Data Analysis</p>
          <p class="item-text">
            We analyze data across short-term (quarterly, monthly) andlong-term (annual,
            multi-year) timeframes, comparinghistorical and real-time data for
            comprehensivevalidation.
          </p>
        </div>

        <div class="data-cross-img">
          <img class="DataCross" src="@/assets/images/about/DataCross.png" alt="" />
          <div class="data-cross-text">Multidimensional Data Cross Validation Method</div>
        </div>
      </div>
    </div>

    <div class="data-source">
      <div class="source-content">
        <img
          class="source-img"
          src="@/assets/images/about/DataSource.png"
          width="120"
          alt=""
          hspace="8"
        />
        <p class="text-title">Data Source</p>
        <p class="text-text">
          Data quality and reliability are paramount to our company. We ensure accuracy
          and effectiveness through rich and diverse datasources. Our primary data is
          gathered via comprehensive interviews with key stakeholders, including senior
          corporate managers,industry experts, supply chain participants, and end
          consumers. This allows us to capture critical insights into strategic
          planning,policy interpretation, supply chain dynamics, and product usage. Our
          secondary data, encompassing government statistics,industry reports, consulting
          analyses, financial disclosures, academic research,news media, and international
          sources, provides robust support for dataverification and analysis.
        </p>
        <!-- <div>
          <p class="text-title">Data Source</p>
          <p class="text-text">
            Data quality and reliability are paramount to our company. We ensure accuracy
            and effectiveness through rich and diverse datasources. Our primary data is
            gathered via comprehensive interviews with key stakeholders, including senior
            corporate managers,industry experts, supply chain participants, and end
            consumers. This allows us to capture critical insights into strategic
            planning,policy interpretation, supply chain dynamics, and product usage. Our
            secondary data, encompassing government statistics,industry reports,
            consulting analyses, financial disclosures, academic research,news media, and
            international sources, provides robust support for dataverification and
            analysis.
          </p>
        </div>
        <img class="content-img" src="@/assets/images/about/DataSource.png" alt="" />
      </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "#imports";
import { NIcon, NBreadcrumb, NBreadcrumbItem } from "naive-ui";
import { MdHome, MdToday } from "@vicons/ionicons4";
import { onMounted, ref } from "vue";
import { useUserStore } from "@/store/user";

const { t } = useI18n();
const img01 = ref<string>(),
  img02 = ref<string>(),
  img03 = ref<string>();
const userStore = useUserStore();
const lang = userStore.getLang;

onMounted(async () => {
  img01.value = lang == "zh-CN" ? "200px" : "290px";
  img02.value = lang == "zh-CN" ? "380px" : "520px";
  img03.value = lang == "zh-CN" ? "170px" : "230px";
});
useHead({
  title: t("common.navAboutUs.method") + "-" + 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"),
    },
  ],
});
import level01 from "@/assets/images/about/level_01.png";
import level02 from "@/assets/images/about/level_02.png";
import level03 from "@/assets/images/about/level_03.png";
import level04 from "@/assets/images/about/level_04.png";
import level11 from "@/assets/images/about/level_11.png";
import level22 from "@/assets/images/about/level_22.png";
import level33 from "@/assets/images/about/level_33.png";
import level44 from "@/assets/images/about/level_44.png";
const methodLevel = [
  {
    left: {
      title: "Industry Overview",
      text:
        "Macro analysis of the entire industry, including research on market size, growth trends, competitivelandscape,industry policies, etc.",
      img: level01,
    },
    right: {
      title: "Company Research",
      text:
        "Select some representative companies for in-depth research, including analysis of the company's businessmodel, market position, financial status, etc.",
      img: level44,
    },
  },
  {
    left: {
      title: "Segmentation Analysis",
      text:
        "Select Some more segments within the industry and analyze them in detail, including marketcharacteristics, major players, development trends, etc.",
      img: level02,
    },
    right: {
      title: "Industry Overview",
      text:
        "After conducting research on subdivided fields, the cases of individual companies are integrated toconduct a macro analysis of the entire industry.",
      img: level33,
    },
  },
  {
    left: {
      title: "Company Research",
      text:
        "Select representative companies according to subdivided fields for in-depthresearch,including analysis of company background, competitiveadvantages, financial status, strategicplanning, etc.",
      img: level03,
    },
    right: {
      title: "Segmentation Analysis",
      text:
        "Through the research of different companies, find out their common segments or keybusinesses, and conduct a detailed analysis of the field.",
      img: level22,
    },
  },
  {
    left: {
      title: "Comprehensive Evaluation",
      text:
        "After conducting research on the entire industry, subdivisions and companies,conduct comprehensive assessment of the researchresults to form a view on thefuture trends andpotential opportunities of the industry.",
      img: level04,
    },
    right: {
      title: "Company Research",
      text:
        "Select some representative companies for in-depth research, including analysis of thecompany's business model, market position, financial status, etc.",
      img: level11,
    },
  },
];
</script>
<style lang="scss" scoped>
.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;
        }
      }
    }
  }

  .research-content {
    padding: var(--size-40) var(--size-146) var(--size-70);
    .content-item-01 {
      padding-bottom: var(--size-40);
      font-size: var(--size-16);
      font-family: Arial, Arial-Regular;
      font-weight: 400;
      text-align: left;
      color: #1a1a1a;
      line-height: var(--size-24);
    }
    .content-item-02 {
      padding: var(--size-46) var(--size-291) var(--size-46) var(--size-30);
      font-size: var(--size-16);
      font-family: Arial, Arial-Regular;
      font-weight: 400;
      text-align: left;
      color: #1a1a1a;
      line-height: var(--size-24);
      background: url("@/assets/images/about/img_02.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }

  .method-box {
    padding: var(--size-76) var(--size-146);
    // background: url("@/assets/images/about/img_03.png") no-repeat center center;
    // background-size: var(--size-524) var(--size-443);
    min-height: var(--size-670);
    background: linear-gradient(159deg, #499f81 3%, #749c56 91%, #749c56 97%);

    p {
      margin: 0;
      padding: 0;
    }
    .level_top {
      width: 100%;
      height: var(--size-58);
      text-align: center;
      img {
        width: var(--size-71);
        height: var(--size-66);
      }
    }
    .method-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      .title {
        width: 100%;
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: left;
        color: #ffffff;
        text-align: center !important;
      }
      .method-left {
        p {
          text-align: right;
        }
        // .title {
        //   padding-right: var(--size-47);
        // }
        .level_item {
          padding-right: var(--size-20);
        }
      }
      .method-right {
        // .title {
        //   padding-left: var(--size-47);
        // }
        .level_item {
          padding-left: var(--size-20);
        }
        .level-img {
          align-items: flex-end;
        }
      }
      .method-lr {
        width: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: stretch;
        .level_item {
          .level-title {
            font-size: var(--size-22);
            font-family: Arial, Arial-Bold;
            font-weight: 700;
            color: #ffffff;
          }
          .level-text {
            font-size: var(--size-14);
            font-family: Arial, Arial-Regular;
            font-weight: 400;
            color: #ffffff;
            line-height: var(--size-20);
          }
        }
        .level-img {
          width: var(--size-110);
          display: flex;
          flex-direction: column;
          img {
            width: var(--size-110);
            height: var(--size-82);
            display: inline-block;
          }
          .level-white {
            flex: 1;
            width: var(--size-59);
            min-height: var(--size-24);
            background-color: #fff;
          }
        }
      }
    }
    .method-level_1 {
      .method-left {
        padding-right: var(--size-51);
      }
      .method-right {
        padding-left: var(--size-51);
      }
    }
    .method-level_2 {
      .method-left {
        padding-right: var(--size-102);
      }
      .method-right {
        padding-left: var(--size-102);
      }
    }
    .method-level_3 {
      .method-left {
        padding-right: var(--size-153);
      }
      .method-right {
        padding-left: var(--size-153);
      }
      .level-white {
        display: none !important;
      }
    }
  }

  .method-content {
    padding: var(--size-80) 0;
    .title {
      font-size: var(--size-48);
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      text-align: center;
      color: #1a1a1a;
      height: var(--size-100);
    }
    .content-box {
      margin: 0 auto;
      // width: var(--size-971);
      // height: var(--size-697);

      width: var(--size-949);
      height: var(--size-675);
      background: #e2e2e2;
      border-radius: var(--size-404);
      // padding: var(--size-11);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      box-shadow: 0 0 50px #e2e2e2;
      position: relative;
      .data-cross-img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: var(--size-260);
        height: var(--size-260);
        .DataCross {
          width: 100%;
          height: 100%;
        }
        .data-cross-text {
          position: absolute;
          left: 50%;
          top: 50%;
          width: var(--size-156);
          transform: translate(-50%, -50%);

          font-size: var(--size-18);
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
          font-weight: 700;
          text-align: center;
          color: #ffffff;
          line-height: var(--size-32);
        }
      }
      .content-item {
        width: var(--size-469);
        height: var(--size-332);
        background-color: #fff;
        border-radius: var(--size-354) 0 0 0;
        padding: 0 var(--size-41) 0 var(--size-71);
        // filter:
        &:nth-child(2) {
          border-radius: 0 var(--size-354) 0 0;
          padding: 0 var(--size-71) 0 var(--size-41);
        }
        &:nth-child(4) {
          border-radius: 0 0 var(--size-354) 0;
          margin-top: var(--size-11);
          padding: 0 var(--size-71) 0 var(--size-41);
        }
        &:nth-child(3) {
          border-radius: 0 0 0 var(--size-354);
          margin-top: var(--size-11);
        }
        p {
          padding: 0;
          margin: 0;
          text-align: center;
        }
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .item-title {
          font-size: var(--size-22);
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
          font-weight: 700;
          text-align: center;
          color: #1a1a1a;
          line-height: var(--size-30);
          padding-bottom: var(--size-10);
        }
        .item-text {
          font-size: var(--size-14);
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #666666;
        }
      }
    }
  }
}

.data-source {
  padding: var(--size-90) var(--size-146);
  background: #f5f5f5;
  .source-content {
    width: 100%;
    height: var(--size-615);
    p {
      padding: 0;
      margin: 0;
    }
    .source-img {
      float: right;
      clear: both;
      width: var(--size-1029);
      height: 100%;
      shape-outside: polygon(
        38% 0%,
        100% 0%,
        100% 100%,
        15% 100%,
        15% 66.66666%,
        0% 66.66666%,
        0% 31%,
        38% 31%,
        38% 0%
      );
    }

    .text-title {
      font-size: var(--size-48);
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      color: #1a1a1a;
      padding-bottom: var(--size-30);
    }
    .text-text {
      font-size: var(--size-16);
      font-family: Arial, Arial-Regular;
      font-weight: 400;
      text-align: left;
      color: #1a1a1a;
      line-height: var(--size-24);
    }
    // //   background: url("@/assets/images/about/DataSource.png") no-repeat right center;
    // // background-size: var(--size-1029) 100%;
    // .value {
    //   display: inline;
    // }

    // .content-img {
    //   width: var(--size-1029);
    //   height: 100%;
    //   float: right;
    // }
    // .content-text {
    //   // width: var(--size-912);
    //   height: var(--size-615);
    //   // background-color: red;
    //   // overflow: hidden;
    //   // clip-path: polygon(0% 0%, 100% 0%, 100% 28%, 60% 28%, 60% 100%, 0% 100%, 0% 0%);
    //   .text-title {
    //     font-size: var(--size-48);
    //     font-family: Arial, Arial-Bold;
    //     font-weight: 700;
    //     color: #1a1a1a;
    //     padding-bottom: var(--size-30);
    //   }
    //   .text-text {
    //     font-size: var(--size-16);
    //     font-family: Arial, Arial-Regular;
    //     font-weight: 400;
    //     text-align: left;
    //     color: #1a1a1a;
    //     line-height: var(--size-24);
    //   }
    // }
  }
}
</style>