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

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

@ -2,14 +2,14 @@
<template>
<div class="page-container">
<div class="grid-lines">
<div class="grid-lines px-fixed">
<div class="line solid line-1"></div>
<div class="line dashed line-2"></div>
<div class="line dashed line-3"></div>
<div class="line dashed line-4"></div>
<div class="line solid line-5"></div>
</div>
<section class="hero-section relative">
<section class="hero-section px-fixed relative">
<div class="hero-content">
<div class="hero-title">
More than just a tool——<br />
@ -18,7 +18,7 @@
publishing, analysis, and monetization
</div>
</div>
<div class="core-value-card">
<div class="core-value-card px-fixed">
<div class="card-content">
<div class="card-title">Core Value</div>
<div class="card-text">
@ -39,7 +39,7 @@
/>
</section>
<section class="features-section">
<section class="features-section px-fixed">
<div class="section-header">
<div class="decorator-bar"></div>
<div class="section-title">Product Features</div>
@ -47,7 +47,7 @@
<div class="features-list">
<div class="feature-item">
<div class="feature-title">
<div class="vertical-line"></div>
<div class="vertical-line px-fixed"></div>
One-click Synchronous Publishing
</div>
<div class="feature-description">
@ -57,7 +57,7 @@
</div>
<div class="feature-item">
<div class="feature-title">
<div class="vertical-line"></div>
<div class="vertical-line px-fixed"></div>
Intelligent Scheduled Publishing
</div>
<div class="feature-description">
@ -67,7 +67,7 @@
</div>
<div class="feature-item">
<div class="feature-title">
<div class="vertical-line"></div>
<div class="vertical-line px-fixed"></div>
Unified Management of Multiple Accounts
</div>
<div class="feature-description">
@ -78,7 +78,7 @@
</div>
<div class="feature-item">
<div class="feature-title">
<div class="vertical-line"></div>
<div class="vertical-line px-fixed"></div>
Cloud Content Library
</div>
<div class="feature-description">
@ -88,7 +88,7 @@
</div>
<div class="feature-item">
<div class="feature-title">
<div class="vertical-line"></div>
<div class="vertical-line px-fixed"></div>
Basic Data Tracking
</div>
<div class="feature-description">
@ -100,7 +100,7 @@
</div>
</section>
<section class="solutions-section">
<section class="solutions-section px-fixed">
<div class="section-header">
<div class="decorator-bar"></div>
<div class="section-title">Value Added Solutions</div>
@ -114,7 +114,7 @@
class="solution-icon"
/>
<div class="solution-title">
<div class="vertical-line"></div>
<div class="vertical-line px-fixed"></div>
KOL Brand Promotion Services
</div>
<div class="solution-description">
@ -130,7 +130,7 @@
class="solution-icon"
/>
<div class="solution-title">
<div class="vertical-line"></div>
<div class="vertical-line px-fixed"></div>
Professional Content Creation Support
</div>
<div class="solution-description">
@ -146,7 +146,7 @@
class="solution-icon"
/>
<div class="solution-title">
<div class="vertical-line"></div>
<div class="vertical-line px-fixed"></div>
Account Operation and Hosting Services
</div>
<div class="solution-description">
@ -167,67 +167,71 @@
</div>
</section>
<section class="advantages-section">
<div class="advantages-content">
<section class="advantages-section px-fixed">
<div class="advantages-content px-fixed">
<div class="advantages-header">
<div class="decorator-bar"></div>
<div class="section-title text-white">Our Advantages</div>
</div>
<div class="advantages-list">
<div class="advantage-item">
<div class="advantage-title">
<div class="vertical-line"></div>
Time Saving
<div style="width: 50%">
<div class="advantages-list">
<div class="advantage-item">
<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 class="advantage-description">
Multi platform publishing efficiency improvement, allowing you to
focus on content creation.
<div class="advantage-item">
<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 class="advantage-item">
<div class="advantage-title">
<div class="vertical-line"></div>
Safe and Reliable
<div class="advantage-item">
<div class="advantage-title">
<div class="vertical-line px-fixed"></div>
Maintain Consistency
</div>
<div class="advantage-description">
Ensure that brand information is presented uniformly on all
platforms.
</div>
</div>
<div class="advantage-description">
Enterprise level data encryption and permission control ensure
account and content security.
<div class="advantage-item">
<div class="advantage-title">
<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 class="advantage-item">
<div class="advantage-title">
<div class="vertical-line"></div>
Maintain Consistency
</div>
<div class="advantage-description">
Ensure that brand information is presented uniformly on all
platforms.
</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 class="advantage-item">
<div class="advantage-title">
<div class="vertical-line px-fixed"></div>
Easy to Use
</div>
<div class="advantage-description">
Intuitive interface design, no need for professional technical
background.
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cta-section">
<section class="cta-section px-fixed">
<img
src="@/assets/image/1440/product-introduction-img5.png"
alt="background"
@ -267,12 +271,11 @@
.page-container {
background-color: #fff;
font-family: "PingFang SC", sans-serif;
/* width:1240px */
margin: 0 auto;
position: relative;
}
.hero-section {
.hero-section.px-fixed {
text-align: center;
position: relative;
background-image: url("@/assets/image/1440/product-introduction-img3.png");
@ -302,8 +305,8 @@
width: 100%;
z-index: 1;
}
.core-value-card {
width: 1240px;
.core-value-card.px-fixed {
width: 932px;
padding: 40px 32px;
margin: 0 auto;
background-color: #fff;
@ -353,9 +356,9 @@
letter-spacing: 1.2px;
color: #000;
}
.features-section {
.features-section.px-fixed {
padding-top: 200px;
width: 1240px;
width: 932px;
margin: 0 auto;
}
.features-list {
@ -389,25 +392,27 @@
font-feature-settings: "liga" off, "clig" off;
}
.solutions-section {
.solutions-section.px-fixed {
padding-top: 80px;
width: 1240px;
width: 932px;
margin: 0 auto;
}
.solutions-content {
display: flex;
gap: 16px;
align-items: center;
}
.solutions-list {
display: flex;
flex-direction: column;
gap: 24px;
width: 620px;
width: 466px;
}
.solution-item {
text-align: left;
display: flex;
flex-direction: column;
gap: 14px;
}
.solution-icon {
width: 92px;
@ -424,7 +429,6 @@
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 16px;
}
.solution-description {
align-self: stretch;
@ -442,7 +446,7 @@
letter-spacing: 0.48px;
}
.solution-image-container {
width: 50%;
width: 434px;
border-radius: 16px;
margin: 0 auto;
display: flex;
@ -456,7 +460,7 @@
border-radius: 16px;
}
.advantages-section {
.advantages-section.px-fixed {
margin-top: 80px;
padding: 80px 0;
background-image: url("@/assets/image/1440/product-introduction-img4.png");
@ -466,8 +470,8 @@
position: relative;
}
.advantages-content {
width: 1240px;
.advantages-content.px-fixed {
width: 932px;
margin: 0 auto;
display: flex;
justify-content: space-between;
@ -504,15 +508,16 @@
line-height: 22px;
letter-spacing: 0.48px;
opacity: 0.7;
padding: 0 16px;
}
.text-white {
color: #fff;
}
.cta-section {
padding: 80px 0;
.cta-section.px-fixed {
padding: 60px 0;
position: relative;
width: 1240px;
width: 932px;
margin: 0 auto;
overflow: hidden;
}
@ -561,20 +566,20 @@
opacity: 0.8;
z-index: 0;
}
.vertical-line {
.vertical-line.px-fixed {
width: 1px;
height: 19px;
height: 16px;
background: #ff7bac;
flex-shrink: 0;
margin-top: 6px;
}
.grid-lines {
.grid-lines.px-fixed {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1240px;
width: 932px;
height: 100%;
pointer-events: none;
z-index: 0;