fix product-introduction 1440
This commit is contained in:
yuanshan
parent
7466bcdcf7
commit
bbc63346a1
@ -37,7 +37,7 @@ export default {
|
|||||||
customPxToViewportPlugin({
|
customPxToViewportPlugin({
|
||||||
defaultViewportWidth:1920,
|
defaultViewportWidth:1920,
|
||||||
unitPrecision: 5, // 保留的小数位数
|
unitPrecision: 5, // 保留的小数位数
|
||||||
selectorBlackList: [/^\.van/, '.px-fixed'], // 以 .van 开头的类名不转换
|
selectorBlackList: [/^\.van/], // 以 .van 开头的类名不转换
|
||||||
minPixelValue: 1, // 小于或等于 1px 不转换
|
minPixelValue: 1, // 小于或等于 1px 不转换
|
||||||
viewportUnit: "vw", // 转换后的单位
|
viewportUnit: "vw", // 转换后的单位
|
||||||
fontViewportUnit: "vw", // 字体单位
|
fontViewportUnit: "vw", // 字体单位
|
||||||
|
|||||||
@ -2,14 +2,14 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div class="grid-lines px-fixed">
|
<div class="grid-lines">
|
||||||
<div class="line solid line-1"></div>
|
<div class="line solid line-1"></div>
|
||||||
<div class="line dashed line-2"></div>
|
<div class="line dashed line-2"></div>
|
||||||
<div class="line dashed line-3"></div>
|
<div class="line dashed line-3"></div>
|
||||||
<div class="line dashed line-4"></div>
|
<div class="line dashed line-4"></div>
|
||||||
<div class="line solid line-5"></div>
|
<div class="line solid line-5"></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="hero-section px-fixed relative">
|
<section class="hero-section relative">
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<div class="hero-title">
|
<div class="hero-title">
|
||||||
More than just a tool——<br />
|
More than just a tool——<br />
|
||||||
@ -18,7 +18,7 @@
|
|||||||
publishing, analysis, and monetization
|
publishing, analysis, and monetization
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="core-value-card px-fixed">
|
<div class="core-value-card">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-title">Core Value</div>
|
<div class="card-title">Core Value</div>
|
||||||
<div class="card-text">
|
<div class="card-text">
|
||||||
@ -39,7 +39,7 @@
|
|||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="features-section px-fixed">
|
<section class="features-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<div class="decorator-bar"></div>
|
<div class="decorator-bar"></div>
|
||||||
<div class="section-title">Product Features</div>
|
<div class="section-title">Product Features</div>
|
||||||
@ -47,7 +47,7 @@
|
|||||||
<div class="features-list">
|
<div class="features-list">
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-title">
|
<div class="feature-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
One-click Synchronous Publishing
|
One-click Synchronous Publishing
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-description">
|
<div class="feature-description">
|
||||||
@ -57,7 +57,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-title">
|
<div class="feature-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Intelligent Scheduled Publishing
|
Intelligent Scheduled Publishing
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-description">
|
<div class="feature-description">
|
||||||
@ -67,7 +67,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-title">
|
<div class="feature-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Unified Management of Multiple Accounts
|
Unified Management of Multiple Accounts
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-description">
|
<div class="feature-description">
|
||||||
@ -78,7 +78,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-title">
|
<div class="feature-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Cloud Content Library
|
Cloud Content Library
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-description">
|
<div class="feature-description">
|
||||||
@ -88,7 +88,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="feature-item">
|
<div class="feature-item">
|
||||||
<div class="feature-title">
|
<div class="feature-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Basic Data Tracking
|
Basic Data Tracking
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-description">
|
<div class="feature-description">
|
||||||
@ -100,7 +100,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="solutions-section px-fixed">
|
<section class="solutions-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<div class="decorator-bar"></div>
|
<div class="decorator-bar"></div>
|
||||||
<div class="section-title">Value Added Solutions</div>
|
<div class="section-title">Value Added Solutions</div>
|
||||||
@ -114,7 +114,7 @@
|
|||||||
class="solution-icon"
|
class="solution-icon"
|
||||||
/>
|
/>
|
||||||
<div class="solution-title">
|
<div class="solution-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
KOL Brand Promotion Services
|
KOL Brand Promotion Services
|
||||||
</div>
|
</div>
|
||||||
<div class="solution-description">
|
<div class="solution-description">
|
||||||
@ -130,7 +130,7 @@
|
|||||||
class="solution-icon"
|
class="solution-icon"
|
||||||
/>
|
/>
|
||||||
<div class="solution-title">
|
<div class="solution-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Professional Content Creation Support
|
Professional Content Creation Support
|
||||||
</div>
|
</div>
|
||||||
<div class="solution-description">
|
<div class="solution-description">
|
||||||
@ -146,7 +146,7 @@
|
|||||||
class="solution-icon"
|
class="solution-icon"
|
||||||
/>
|
/>
|
||||||
<div class="solution-title">
|
<div class="solution-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Account Operation and Hosting Services
|
Account Operation and Hosting Services
|
||||||
</div>
|
</div>
|
||||||
<div class="solution-description">
|
<div class="solution-description">
|
||||||
@ -161,14 +161,13 @@
|
|||||||
src="@/assets/image/1440/product-introduction-img1.png"
|
src="@/assets/image/1440/product-introduction-img1.png"
|
||||||
alt="Value Added Solutions"
|
alt="Value Added Solutions"
|
||||||
class="solution-image"
|
class="solution-image"
|
||||||
style="width: 434px"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="advantages-section px-fixed">
|
<section class="advantages-section">
|
||||||
<div class="advantages-content px-fixed">
|
<div class="advantages-content">
|
||||||
<div class="advantages-header">
|
<div class="advantages-header">
|
||||||
<div class="decorator-bar"></div>
|
<div class="decorator-bar"></div>
|
||||||
<div class="section-title text-white">Our Advantages</div>
|
<div class="section-title text-white">Our Advantages</div>
|
||||||
@ -178,7 +177,7 @@
|
|||||||
<div class="advantages-list">
|
<div class="advantages-list">
|
||||||
<div class="advantage-item">
|
<div class="advantage-item">
|
||||||
<div class="advantage-title">
|
<div class="advantage-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Time Saving
|
Time Saving
|
||||||
</div>
|
</div>
|
||||||
<div class="advantage-description">
|
<div class="advantage-description">
|
||||||
@ -189,7 +188,7 @@
|
|||||||
|
|
||||||
<div class="advantage-item">
|
<div class="advantage-item">
|
||||||
<div class="advantage-title">
|
<div class="advantage-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Safe and Reliable
|
Safe and Reliable
|
||||||
</div>
|
</div>
|
||||||
<div class="advantage-description">
|
<div class="advantage-description">
|
||||||
@ -199,7 +198,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="advantage-item">
|
<div class="advantage-item">
|
||||||
<div class="advantage-title">
|
<div class="advantage-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Maintain Consistency
|
Maintain Consistency
|
||||||
</div>
|
</div>
|
||||||
<div class="advantage-description">
|
<div class="advantage-description">
|
||||||
@ -209,7 +208,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="advantage-item">
|
<div class="advantage-item">
|
||||||
<div class="advantage-title">
|
<div class="advantage-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Data Driven
|
Data Driven
|
||||||
</div>
|
</div>
|
||||||
<div class="advantage-description">
|
<div class="advantage-description">
|
||||||
@ -218,7 +217,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="advantage-item">
|
<div class="advantage-item">
|
||||||
<div class="advantage-title">
|
<div class="advantage-title">
|
||||||
<div class="vertical-line px-fixed"></div>
|
<div class="vertical-line"></div>
|
||||||
Easy to Use
|
Easy to Use
|
||||||
</div>
|
</div>
|
||||||
<div class="advantage-description">
|
<div class="advantage-description">
|
||||||
@ -231,7 +230,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="cta-section px-fixed">
|
<section class="cta-section">
|
||||||
<img
|
<img
|
||||||
src="@/assets/image/1440/product-introduction-img5.png"
|
src="@/assets/image/1440/product-introduction-img5.png"
|
||||||
alt="background"
|
alt="background"
|
||||||
@ -267,7 +266,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.page-container {
|
.page-container {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
font-family: "PingFang SC", sans-serif;
|
font-family: "PingFang SC", sans-serif;
|
||||||
@ -275,7 +274,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-section.px-fixed {
|
.hero-section {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-image: url("@/assets/image/1440/product-introduction-img3.png");
|
background-image: url("@/assets/image/1440/product-introduction-img3.png");
|
||||||
@ -290,28 +289,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
.hero-title {
|
||||||
font-size: 40px;
|
font-size: 40 * 1.33px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 56px;
|
line-height: 56 * 1.33px;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2 * 1.33px;
|
||||||
padding: 153px 0;
|
padding: 153 * 1.33px 0;
|
||||||
color: #000;
|
color: #000;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.hero-bg-img {
|
.hero-bg-img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -204px;
|
bottom: -204 * 1.33px;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.core-value-card.px-fixed {
|
.core-value-card {
|
||||||
width: 932px;
|
width: 932 * 1.33px;
|
||||||
padding: 40px 32px;
|
padding: 40 * 1.33px 32 * 1.33px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 16px;
|
border-radius: 16 * 1.33px;
|
||||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
box-shadow: 0 * 1.33px 3 * 1.33px 14 * 1.33px 0 * 1.33px rgba(0, 0, 0, 0.16);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -320,134 +319,134 @@
|
|||||||
.card-content {
|
.card-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 32px;
|
gap: 32 * 1.33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 40px;
|
font-size: 40 * 1.33px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 56px;
|
line-height: 56 * 1.33px;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2 * 1.33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-text {
|
.card-text {
|
||||||
font-size: 16px;
|
font-size: 16 * 1.33px;
|
||||||
line-height: 22px;
|
line-height: 22 * 1.33px;
|
||||||
color: #455363;
|
color: #455363;
|
||||||
letter-spacing: 0.48px;
|
letter-spacing: 0.48 * 1.33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32 * 1.33px;
|
||||||
padding: 0 16px;
|
padding: 0 16 * 1.33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.decorator-bar {
|
.decorator-bar {
|
||||||
width: 58px;
|
width: 58 * 1.33px;
|
||||||
height: 7px;
|
height: 7 * 1.33px;
|
||||||
background-color: #ff7bac;
|
background-color: #ff7bac;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16 * 1.33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 40px;
|
font-size: 40 * 1.33px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 56px;
|
line-height: 56 * 1.33px;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2 * 1.33px;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
.features-section.px-fixed {
|
.features-section {
|
||||||
padding-top: 200px;
|
padding-top: 102 * 1.33px;
|
||||||
width: 932px;
|
width: 932 * 1.33px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.features-list {
|
.features-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 32px;
|
gap: 24 * 1.33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-item {
|
.feature-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 16 * 1.33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-title {
|
.feature-title {
|
||||||
font-size: 24px;
|
font-size: 24 * 1.33px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 32px;
|
line-height: 32 * 1.33px;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2 * 1.33px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 16px;
|
gap: 16 * 1.33px;
|
||||||
}
|
}
|
||||||
.feature-description {
|
.feature-description {
|
||||||
font-size: 16px;
|
font-size: 16 * 1.33px;
|
||||||
line-height: 22px;
|
line-height: 22 * 1.33px;
|
||||||
color: #455363;
|
color: #455363;
|
||||||
letter-spacing: 0.48px;
|
letter-spacing: 0.48 * 1.33px;
|
||||||
padding: 0 16px;
|
padding: 0 16 * 1.33px;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
font-feature-settings: "liga" off, "clig" off;
|
font-feature-settings: "liga" off, "clig" off;
|
||||||
}
|
}
|
||||||
|
|
||||||
.solutions-section.px-fixed {
|
.solutions-section {
|
||||||
padding-top: 80px;
|
padding-top: 80 * 1.33px;
|
||||||
width: 932px;
|
width: 932 * 1.33px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.solutions-content {
|
.solutions-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
gap: 16 * 1.33px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.solutions-list {
|
.solutions-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 24 * 1.33px;
|
||||||
width: 466px;
|
width: 466 * 1.33px;
|
||||||
}
|
}
|
||||||
.solution-item {
|
.solution-item {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 14px;
|
gap: 16 * 1.33px;
|
||||||
}
|
}
|
||||||
.solution-icon {
|
.solution-icon {
|
||||||
width: 92px;
|
width: 76 * 1.33px;
|
||||||
height: 76px;
|
height: 76 * 1.33px;
|
||||||
padding-left: 16px;
|
margin-left: 16 * 1.33px;
|
||||||
}
|
}
|
||||||
.solution-title {
|
.solution-title {
|
||||||
font-family: "PingFang SC";
|
font-family: "PingFang SC";
|
||||||
font-size: 24px;
|
font-size: 24 * 1.33px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 32px; /* 133.333% */
|
line-height: 32 * 1.33px; /* 133.333% */
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2 * 1.33px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
gap: 16 * 1.33px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
.solution-description {
|
.solution-description {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
color: #455363;
|
color: #455363;
|
||||||
padding: 0 16px;
|
padding: 0 16 * 1.33px;
|
||||||
|
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
font-feature-settings: "liga" off, "clig" off;
|
font-feature-settings: "liga" off, "clig" off;
|
||||||
/* 正文 */
|
/* 正文 */
|
||||||
font-family: "PingFang SC";
|
font-family: "PingFang SC";
|
||||||
font-size: 16px;
|
font-size: 16 * 1.33px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 22px; /* 137.5% */
|
line-height: 22 * 1.33px; /* 137.5% */
|
||||||
letter-spacing: 0.48px;
|
letter-spacing: 0.48 * 1.33px;
|
||||||
}
|
}
|
||||||
.solution-image-container {
|
.solution-image-container {
|
||||||
width: 434px;
|
width: 434 * 1.33px;
|
||||||
border-radius: 16px;
|
border-radius: 16 * 1.33px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -457,12 +456,12 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 16px;
|
border-radius: 16 * 1.33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantages-section.px-fixed {
|
.advantages-section {
|
||||||
margin-top: 80px;
|
margin-top: 80 * 1.33px;
|
||||||
padding: 80px 0;
|
padding: 80 * 1.33px 0;
|
||||||
background-image: url("@/assets/image/1440/product-introduction-img4.png");
|
background-image: url("@/assets/image/1440/product-introduction-img4.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
@ -470,8 +469,8 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantages-content.px-fixed {
|
.advantages-content {
|
||||||
width: 932px;
|
width: 932 * 1.33px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -480,44 +479,44 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.advantages-header {
|
.advantages-header {
|
||||||
width: 466px;
|
width: 466 * 1.33px;
|
||||||
padding: 0 16px;
|
padding: 0 16 * 1.33px;
|
||||||
}
|
}
|
||||||
.advantages-list {
|
.advantages-list {
|
||||||
width: 466px;
|
width: 466 * 1.33px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 32px;
|
gap: 24 * 1.33px;
|
||||||
}
|
}
|
||||||
.advantage-item {
|
.advantage-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 16 * 1.33px;
|
||||||
}
|
}
|
||||||
.advantage-title {
|
.advantage-title {
|
||||||
font-size: 24px;
|
font-size: 24 * 1.33px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 32px;
|
line-height: 32 * 1.33px;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2 * 1.33px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
gap: 16 * 1.33px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
.advantage-description {
|
.advantage-description {
|
||||||
font-size: 16px;
|
font-size: 16 * 1.33px;
|
||||||
line-height: 22px;
|
line-height: 22 * 1.33px;
|
||||||
letter-spacing: 0.48px;
|
letter-spacing: 0.48 * 1.33px;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
padding: 0 16px;
|
padding: 0 16 * 1.33px;
|
||||||
}
|
}
|
||||||
.text-white {
|
.text-white {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-section.px-fixed {
|
.cta-section {
|
||||||
padding: 60px 0;
|
padding: 80 * 1.33px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 932px;
|
width: 932 * 1.33px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@ -525,7 +524,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 16px;
|
padding: 0 16 * 1.33px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
@ -533,24 +532,24 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 188px;
|
height: 188 * 1.33px;
|
||||||
}
|
}
|
||||||
.cta-arrow {
|
.cta-arrow {
|
||||||
width: 60px;
|
width: 60 * 1.33px;
|
||||||
height: 32px;
|
height: 32 * 1.33px;
|
||||||
}
|
}
|
||||||
.cta-title {
|
.cta-title {
|
||||||
font-size: 40px;
|
font-size: 40 * 1.33px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 56px;
|
line-height: 56 * 1.33px;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2 * 1.33px;
|
||||||
}
|
}
|
||||||
.cta-qr-code {
|
.cta-qr-code {
|
||||||
width: 188px;
|
width: 188 * 1.33px;
|
||||||
height: 188px;
|
height: 188 * 1.33px;
|
||||||
background-color: #90ffff;
|
background-color: #90ffff;
|
||||||
border-radius: 16px;
|
border-radius: 16 * 1.33px;
|
||||||
padding: 14px;
|
padding: 14 * 1.33px;
|
||||||
}
|
}
|
||||||
.cta-qr-code img {
|
.cta-qr-code img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -559,27 +558,27 @@
|
|||||||
}
|
}
|
||||||
.cta-bg-img {
|
.cta-bg-img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 80px;
|
top: 0;
|
||||||
left: 355px;
|
left: 201 * 1.33px;
|
||||||
width: 530px;
|
width: 530 * 1.33px;
|
||||||
height: 268px;
|
height: 268 * 1.33px;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
.vertical-line.px-fixed {
|
.vertical-line {
|
||||||
width: 1px;
|
width: 1 * 1.33px;
|
||||||
height: 16px;
|
height: 16 * 1.33px;
|
||||||
background: #ff7bac;
|
background: #ff7bac;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-top: 6px;
|
margin-top: 6 * 1.33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-lines.px-fixed {
|
.grid-lines {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 932px;
|
width: 932 * 1.33px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
@ -592,26 +591,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.grid-lines .line.solid {
|
.grid-lines .line.solid {
|
||||||
width: 1px;
|
width: 1 * 1.33px;
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-lines .line.dashed {
|
.grid-lines .line.dashed {
|
||||||
width: 0;
|
width: 0;
|
||||||
border-left: 1px dotted rgba(0, 0, 0, 0.12);
|
border-left: 1 * 1.33px dotted rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-lines .line-1 {
|
.grid-lines .line-1 {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.grid-lines .line-2 {
|
.grid-lines .line-2 {
|
||||||
left: 310px;
|
left: 234 * 1.33px;
|
||||||
}
|
}
|
||||||
.grid-lines .line-3 {
|
.grid-lines .line-3 {
|
||||||
left: 620px;
|
left: 468 * 1.33px;
|
||||||
}
|
}
|
||||||
.grid-lines .line-4 {
|
.grid-lines .line-4 {
|
||||||
left: 930px;
|
left: 702 * 1.33px;
|
||||||
}
|
}
|
||||||
.grid-lines .line-5 {
|
.grid-lines .line-5 {
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user