scout666/fiee-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix product-introduction 1440

Browse Source
This commit is contained in:
yuanshan 2025-10-10 11:27:00 +08:00
parent e3196f5619
commit 8d38e839ca
2 changed files with 87 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
postcss.config.js
View File

@ -37,7 +37,7 @@ export default {
customPxToViewportPlugin({ customPxToViewportPlugin({
defaultViewportWidth:1920, defaultViewportWidth:1920,
unitPrecision: 5, // 保留的小数位数 unitPrecision: 5, // 保留的小数位数
selectorBlackList: [/^\.van/], // 以 .van 开头的类名不转换 selectorBlackList: [/^\.van/, '.px-fixed'], // 以 .van 开头的类名不转换
minPixelValue: 1, // 小于或等于 1px 不转换 minPixelValue: 1, // 小于或等于 1px 不转换
viewportUnit: "vw", // 转换后的单位 viewportUnit: "vw", // 转换后的单位
fontViewportUnit: "vw", // 字体单位 fontViewportUnit: "vw", // 字体单位

167
src/views/product-introduction/size1440/index.vue
View File

@ -2,14 +2,14 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div class="grid-lines"> <div class="grid-lines px-fixed">
<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 relative"> <section class="hero-section px-fixed 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"> <div class="core-value-card px-fixed">
<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"> <section class="features-section px-fixed">
<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"></div> <div class="vertical-line px-fixed"></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"></div> <div class="vertical-line px-fixed"></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"></div> <div class="vertical-line px-fixed"></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"></div> <div class="vertical-line px-fixed"></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"></div> <div class="vertical-line px-fixed"></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"> <section class="solutions-section px-fixed">
<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"></div> <div class="vertical-line px-fixed"></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"></div> <div class="vertical-line px-fixed"></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"></div> <div class="vertical-line px-fixed"></div>
Account Operation and Hosting Services Account Operation and Hosting Services
</div> </div>
<div class="solution-description"> <div class="solution-description">
@ -167,67 +167,71 @@
</div> </div>
</section> </section>
<section class="advantages-section"> <section class="advantages-section px-fixed">
<div class="advantages-content"> <div class="advantages-content px-fixed">
<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>
</div> </div>
<div class="advantages-list">
<div class="advantage-item"> <div style="width: 50%">
<div class="advantage-title"> <div class="advantages-list">
<div class="vertical-line"></div> <div class="advantage-item">
Time Saving <div class="advantage-title">
<div class="vertical-line px-fixed"></div>
Time Saving
</div>
<div class="advantage-description">
Multi platform publishing efficiency improvement, allowing you
to focus on content creation.
</div>
</div> </div>
<div class="advantage-description">
Multi platform publishing efficiency improvement, allowing you to <div class="advantage-item">
focus on content creation. <div class="advantage-title">
<div class="vertical-line px-fixed"></div>
Safe and Reliable
</div>
<div class="advantage-description">
Enterprise level data encryption and permission control ensure
account and content security.
</div>
</div> </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
Safe and Reliable </div>
<div class="advantage-description">
Ensure that brand information is presented uniformly on all
platforms.
</div>
</div> </div>
<div class="advantage-description"> <div class="advantage-item">
Enterprise level data encryption and permission control ensure <div class="advantage-title">
account and content security. <div class="vertical-line px-fixed"></div>
Data Driven
</div>
<div class="advantage-description">
Optimizing Content Strategies Based on Actual Performance.
</div>
</div> </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
Maintain Consistency </div>
</div> <div class="advantage-description">
<div class="advantage-description"> Intuitive interface design, no need for professional technical
Ensure that brand information is presented uniformly on all background.
platforms. </div>
</div>
</div>
<div class="advantage-item">
<div class="advantage-title">
<div class="vertical-line"></div>
Data Driven
</div>
<div class="advantage-description">
Optimizing Content Strategies Based on Actual Performance.
</div>
</div>
<div class="advantage-item">
<div class="advantage-title">
<div class="vertical-line"></div>
Easy to Use
</div>
<div class="advantage-description">
Intuitive interface design, no need for professional technical
background.
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="cta-section"> <section class="cta-section px-fixed">
<img <img
src="@/assets/image/1440/product-introduction-img5.png" src="@/assets/image/1440/product-introduction-img5.png"
alt="background" alt="background"
@ -267,12 +271,11 @@
.page-container { .page-container {
background-color: #fff; background-color: #fff;
font-family: "PingFang SC", sans-serif; font-family: "PingFang SC", sans-serif;
/* width:1240px */
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
.hero-section { .hero-section.px-fixed {
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");
@ -302,8 +305,8 @@
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
.core-value-card { .core-value-card.px-fixed {
width: 1240px; width: 932px;
padding: 40px 32px; padding: 40px 32px;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
@ -353,9 +356,9 @@
letter-spacing: 1.2px; letter-spacing: 1.2px;
color: #000; color: #000;
} }
.features-section { .features-section.px-fixed {
padding-top: 200px; padding-top: 200px;
width: 1240px; width: 932px;
margin: 0 auto; margin: 0 auto;
} }
.features-list { .features-list {
@ -389,25 +392,27 @@
font-feature-settings: "liga" off, "clig" off; font-feature-settings: "liga" off, "clig" off;
} }
.solutions-section { .solutions-section.px-fixed {
padding-top: 80px; padding-top: 80px;
width: 1240px; width: 932px;
margin: 0 auto; margin: 0 auto;
} }
.solutions-content { .solutions-content {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: center;
} }
.solutions-list { .solutions-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
width: 620px; width: 466px;
} }
.solution-item { .solution-item {
text-align: left; text-align: left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px;
} }
.solution-icon { .solution-icon {
width: 92px; width: 92px;
@ -424,7 +429,6 @@
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: flex-start; align-items: flex-start;
margin-bottom: 16px;
} }
.solution-description { .solution-description {
align-self: stretch; align-self: stretch;
@ -442,7 +446,7 @@
letter-spacing: 0.48px; letter-spacing: 0.48px;
} }
.solution-image-container { .solution-image-container {
width: 50%; width: 434px;
border-radius: 16px; border-radius: 16px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
@ -456,7 +460,7 @@
border-radius: 16px; border-radius: 16px;
} }
.advantages-section { .advantages-section.px-fixed {
margin-top: 80px; margin-top: 80px;
padding: 80px 0; padding: 80px 0;
background-image: url("@/assets/image/1440/product-introduction-img4.png"); background-image: url("@/assets/image/1440/product-introduction-img4.png");
@ -466,8 +470,8 @@
position: relative; position: relative;
} }
.advantages-content { .advantages-content.px-fixed {
width: 1240px; width: 932px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -504,15 +508,16 @@
line-height: 22px; line-height: 22px;
letter-spacing: 0.48px; letter-spacing: 0.48px;
opacity: 0.7; opacity: 0.7;
padding: 0 16px;
} }
.text-white { .text-white {
color: #fff; color: #fff;
} }
.cta-section { .cta-section.px-fixed {
padding: 80px 0; padding: 60px 0;
position: relative; position: relative;
width: 1240px; width: 932px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
@ -561,20 +566,20 @@
opacity: 0.8; opacity: 0.8;
z-index: 0; z-index: 0;
} }
.vertical-line { .vertical-line.px-fixed {
width: 1px; width: 1px;
height: 19px; height: 16px;
background: #ff7bac; background: #ff7bac;
flex-shrink: 0; flex-shrink: 0;
margin-top: 6px; margin-top: 6px;
} }
.grid-lines { .grid-lines.px-fixed {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 1240px; width: 932px;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;