|
|
@@ -1,156 +1,151 @@
|
|
|
<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="MdToday" size="40" style="vertical-align: middle;" />
|
|
|
- <span>{{ t('common.navAboutUs.method') }}</span>
|
|
|
+ <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>
|
|
|
- 1 sdfgsdfgsdfgsdfgsdfg
|
|
|
|
|
|
- <!-- <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="MdToday" />{{ t('common.navAboutUs.method') }}
|
|
|
- </n-breadcrumb-item>
|
|
|
- </n-breadcrumb>
|
|
|
+ <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>
|
|
|
|
|
|
- <!--研究方法-->
|
|
|
- <div class="research-show">
|
|
|
- <div class="container research-content">
|
|
|
- <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <h2>{{ t('common.navAboutUs.method') }}</h2>
|
|
|
+ <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="show-box">
|
|
|
- <div class="show-img box-img01 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <!-- <img src="@/assets/images/research-01.jpg"> -->
|
|
|
- </div>
|
|
|
- <div class="show-desc wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <p>{{ t('aboutUs.method.desc01') }}</p>
|
|
|
- </div>
|
|
|
+ <div class="method-right method-lr">
|
|
|
+ <p class="title">Top Down Research Methodology</p>
|
|
|
</div>
|
|
|
- <div class="show-box">
|
|
|
- <div class="show-desc wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <p>{{ t('aboutUs.method.desc02') }}</p>
|
|
|
+ </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="show-img box-img02 wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <!-- <img class="img-02" src="@/assets/images/research-02.jpg"> -->
|
|
|
+ <div class="level-img">
|
|
|
+ <img :src="item.left.img" alt="" />
|
|
|
+ <div class="level-white" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="show-box">
|
|
|
- <div class="show-img box-img03 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <!-- <img src="@/assets/images/research-03.jpg"> -->
|
|
|
- </div>
|
|
|
- <div class="show-desc wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <p>{{ t('aboutUs.method.desc03') }}</p>
|
|
|
+ <div class="method-right method-lr">
|
|
|
+ <div class="level-img">
|
|
|
+ <img :src="item.right.img" alt="" />
|
|
|
+ <div class="level-white" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="report-img">
|
|
|
- <div class="img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <!-- <img v-if="lang == 'zh-CN'" src="@/assets/images/report-method.png" />
|
|
|
- <img v-else src="@/assets/images/report-method-en.png" /> -->
|
|
|
+ <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="research-detail">
|
|
|
- <div class="container">
|
|
|
- <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <h2>研究细节</h2>
|
|
|
- </div>
|
|
|
- <div class="img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <img src="@/assets/images/report-method.png"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <!--数据验证-->
|
|
|
- <div class="report-data">
|
|
|
- <div class="container">
|
|
|
- <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <h2>{{ t('aboutUs.data.title') }}</h2>
|
|
|
+ <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="img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <!-- <img v-if="lang == 'zh-CN'" src="@/assets/images/data-valid.png" />
|
|
|
- <img v-else src="@/assets/images/data-valid-en.png" /> -->
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--数据来源-->
|
|
|
- <div class="report-source">
|
|
|
- <div class="container">
|
|
|
- <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <h2>{{ t('aboutUs.source.title') }}</h2>
|
|
|
+ <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="desc wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <p>{{ t('aboutUs.source.desc') }}</p>
|
|
|
+ <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="img wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <!-- <img v-if="lang == 'zh-CN'" src="@/assets/images/report-source.png" />
|
|
|
- <img v-else src="@/assets/images/report-source-en.png" /> -->
|
|
|
+
|
|
|
+ <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="partial-database">
|
|
|
- <div class="container">
|
|
|
- <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <h2>{{ t('aboutUs.database.title') }}</h2>
|
|
|
- </div>
|
|
|
- <div class="db-box wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
|
|
|
- <!-- <div class="img"><img src="@/assets/images/d01.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d02.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d03.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d04.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d05.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d06.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d07.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d08.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d09.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d10.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d11.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d12.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d13.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d14.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d15.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d16.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d17.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d18.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d19.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d20.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d21.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d22.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d23.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d24.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d25.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d26.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d27.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d28.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d29.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d30.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d31.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d32.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d33.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d34.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d35.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d36.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d37.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d38.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d39.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d40.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d41.png" /></div>
|
|
|
- <div class="img"><img src="@/assets/images/d42.png" /></div> -->
|
|
|
+ <div class="data-source">
|
|
|
+ <div class="source-content">
|
|
|
+ <div class="content-text">
|
|
|
+ <div class="value">
|
|
|
+ <div class="text-title">Data Source</div>
|
|
|
+ <div 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.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img class="value content-img" src="@/assets/images/about/DataSource.png" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -193,90 +188,398 @@ useHead({
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
+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>
|
|
|
-.research-show {
|
|
|
- background-color: #fff;
|
|
|
- margin-top: 10px;
|
|
|
- .show-box {
|
|
|
- display: flex;
|
|
|
- .show-img {
|
|
|
- width: 50%;
|
|
|
- overflow: hidden;
|
|
|
+.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: 100%;
|
|
|
- object-fit: cover;
|
|
|
+ width: var(--size-71);
|
|
|
+ height: var(--size-66);
|
|
|
}
|
|
|
}
|
|
|
- .box-img01 {
|
|
|
- max-height: v-bind("img01");
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .box-img02 {
|
|
|
- max-height: v-bind("img02");
|
|
|
- > img {
|
|
|
- height: v-bind("img02");
|
|
|
+ .method-level_1 {
|
|
|
+ .method-left {
|
|
|
+ padding-right: var(--size-51);
|
|
|
+ }
|
|
|
+ .method-right {
|
|
|
+ padding-left: var(--size-51);
|
|
|
}
|
|
|
}
|
|
|
- .box-img03 {
|
|
|
- max-height: v-bind("img03");
|
|
|
+ .method-level_2 {
|
|
|
+ .method-left {
|
|
|
+ padding-right: var(--size-102);
|
|
|
+ }
|
|
|
+ .method-right {
|
|
|
+ padding-left: var(--size-102);
|
|
|
+ }
|
|
|
}
|
|
|
- .show-desc {
|
|
|
- width: 50%;
|
|
|
- padding: 10px;
|
|
|
- > p {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 30px;
|
|
|
- margin: 0;
|
|
|
+ .method-level_3 {
|
|
|
+ .method-left {
|
|
|
+ padding-right: var(--size-153);
|
|
|
+ }
|
|
|
+ .method-right {
|
|
|
+ padding-left: var(--size-153);
|
|
|
+ }
|
|
|
+ .level-white {
|
|
|
+ display: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .report-img {
|
|
|
- width: 100%;
|
|
|
- padding-top: 80px;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
+
|
|
|
+ .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);
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-.report-data,
|
|
|
-.research-detail,
|
|
|
-.report-source {
|
|
|
- background-color: #fff;
|
|
|
- .img {
|
|
|
- > img {
|
|
|
- width: 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.report-source {
|
|
|
- .desc {
|
|
|
- > p {
|
|
|
- font-size: 16px;
|
|
|
- color: #000;
|
|
|
+
|
|
|
+.data-source {
|
|
|
+ padding: var(--size-90) var(--size-146);
|
|
|
+ background: #f5f5f5;
|
|
|
+ .source-content {
|
|
|
+ width: 100%;
|
|
|
+ height: var(--size-615);
|
|
|
+ // background: url("@/assets/images/about/DataSource.png") no-repeat right center;
|
|
|
+ // background-size: var(--size-1029) 100%;
|
|
|
+ .value{
|
|
|
+ display: inline;
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-.partial-database {
|
|
|
- background-color: #fff;
|
|
|
- border-bottom: 1px solid #dedede;
|
|
|
- padding-bottom: 20px;
|
|
|
- .db-box {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- border-bottom: 1px solid #dedede;
|
|
|
- border-left: 1px solid #dedede;
|
|
|
- .img {
|
|
|
- width: 16.6666%;
|
|
|
- border-top: 1px solid #dedede;
|
|
|
- border-right: 1px solid #dedede;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 0.2rem 0;
|
|
|
- > img {
|
|
|
- width: 100%;
|
|
|
+
|
|
|
+ .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>
|
|
|
+</style>
|
