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"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></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 {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: left;
        color: #ffffff;
      }
      .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-354);
      // padding: var(--size-11);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      box-shadow: 0 0 50px #e2e2e2;
      .content-item {
        width: var(--size-469);
        height: var(--size-332);
        background-color: #fff;
        border-radius: var(--size-354) 0 0 0;
        // filter:
        &:nth-child(2) {
          border-radius: 0 var(--size-354) 0 0;
        }
        &:nth-child(4) {
          border-radius: 0 0 var(--size-354) 0;
          margin-top: var(--size-11);
        }
        &:nth-child(3) {
          border-radius: 0 0 0 var(--size-354);
          margin-top: var(--size-11);
        }
      }
    }
  }
}
</style>