Compare commits
No commits in common. "c11364fa428d20408579f397e67f5f18a700ce4a" and "6679da97f6187e7a976e410810f05a69b92a9b48" have entirely different histories.
c11364fa42
...
6679da97f6
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 851 B |
Binary file not shown.
|
Before Width: | Height: | Size: 640 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 858 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 851 B |
Binary file not shown.
|
Before Width: | Height: | Size: 640 B |
@ -160,13 +160,13 @@ const handleToHome = () => {
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 12px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
font-size: 16px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
@ -153,13 +153,12 @@ const handleToHome = () => {
|
||||
position: relative;
|
||||
margin: 0 20px;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 700;
|
||||
// font-size: 16px;
|
||||
font-size: 1.05rem;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
@ -17,18 +17,12 @@
|
||||
:class="{ 'menu-open': showMenu }"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<img
|
||||
v-if="showMenu"
|
||||
src="@/assets/image/375/menu-close.png"
|
||||
alt="menu"
|
||||
class="menu-icon"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/image/375/menu-open.png"
|
||||
alt="menu"
|
||||
class="menu-icon"
|
||||
/>
|
||||
<n-icon size="28" class="menu-icon menu-icon-menu">
|
||||
<menu-sharp />
|
||||
</n-icon>
|
||||
<n-icon size="28" class="menu-icon menu-icon-close">
|
||||
<close-sharp />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</NLayoutHeader>
|
||||
@ -59,11 +53,11 @@ import { useRouter } from "vue-router";
|
||||
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
|
||||
const themeOverrides = {
|
||||
Menu: {
|
||||
itemTextColorHover: "#000",
|
||||
itemTextColorActive: "#FF7BAC",
|
||||
itemTextColorActiveHover: "#fff8fb",
|
||||
itemColorHover: "#FDDFE9",
|
||||
itemColorActive: "#fff",
|
||||
itemTextColorHover: "#ff7bac",
|
||||
itemTextColorActive: "#ff7bac",
|
||||
itemTextColorActiveHover: "#ff7bac",
|
||||
itemColorHover: "#fff8fb",
|
||||
itemColorActive: "#fff8fb",
|
||||
itemColorActiveHover: "#fff8fb",
|
||||
},
|
||||
};
|
||||
@ -131,7 +125,7 @@ const handleToHome = () => {
|
||||
.custom-header {
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
height: 60 * 5.12px;
|
||||
height: 320px;
|
||||
|
||||
&.header-scrolled {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
@ -158,7 +152,8 @@ const handleToHome = () => {
|
||||
}
|
||||
|
||||
.logo :deep(.n-image) {
|
||||
width: 94 * 5.12px;
|
||||
max-width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
@ -173,7 +168,6 @@ const handleToHome = () => {
|
||||
user-select: none;
|
||||
transition: background 0.2s;
|
||||
position: relative;
|
||||
width: 56 * 5.12px;
|
||||
|
||||
.menu-icon {
|
||||
position: absolute;
|
||||
@ -204,14 +198,14 @@ const handleToHome = () => {
|
||||
|
||||
.mobile-menu-wrapper {
|
||||
position: fixed;
|
||||
top: 60 * 5.12px;
|
||||
top: 320px;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background: #fff;
|
||||
background: #fddfea;
|
||||
z-index: 1100;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||
padding: 40px 0 80px 0;
|
||||
max-height: 1500 * 5.12px;
|
||||
max-height: 1500px;
|
||||
overflow-y: auto;
|
||||
|
||||
// 设置CSS变量，只影响当前组件的菜单
|
||||
|
||||
@ -13,18 +13,12 @@
|
||||
:class="{ 'menu-open': showMenu }"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<img
|
||||
v-if="showMenu"
|
||||
src="@/assets/image/768/menu-close.png"
|
||||
alt="menu"
|
||||
class="menu-icon"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/image/768/menu-open.png"
|
||||
alt="menu"
|
||||
class="menu-icon"
|
||||
/>
|
||||
<n-icon size="28" class="menu-icon menu-icon-menu">
|
||||
<menu-sharp />
|
||||
</n-icon>
|
||||
<n-icon size="28" class="menu-icon menu-icon-close">
|
||||
<close-sharp />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</NLayoutHeader>
|
||||
@ -170,7 +164,6 @@ const handleToHome = () => {
|
||||
user-select: none;
|
||||
transition: background 0.2s;
|
||||
position: relative;
|
||||
width: 56 * 2.5px;
|
||||
|
||||
.menu-icon {
|
||||
position: absolute;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from "./size375/index.vue";
|
||||
// import size375 from "./size375/index.vue";
|
||||
import size768 from "./size768/index.vue";
|
||||
import size1440 from "./size1440/index.vue";
|
||||
import size1920 from "./size1920/index.vue";
|
||||
|
||||
@ -262,10 +262,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
.page-container {
|
||||
background-color: #fff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
/* width:932px */
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -1,589 +0,0 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="grid-lines">
|
||||
<div class="line solid line-1"></div>
|
||||
<div class="line solid line-5"></div>
|
||||
</div>
|
||||
<section class="hero-section relative">
|
||||
<div class="hero-content">
|
||||
<div class="hero-title">
|
||||
More than just a tool——<br />
|
||||
Comprehensive growth <br />solutions, providing a one- <br />stop
|
||||
solution for content <br />creation, publishing, analysis,<br />
|
||||
and monetization
|
||||
</div>
|
||||
</div>
|
||||
<div class="core-value-card">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Core Value</div>
|
||||
<div class="card-text">
|
||||
The FIEE-SAAS platform is a one-stop content operation solution
|
||||
tailored for creators in the digital era. The platform utilizes
|
||||
intelligent distribution technology, A1 empowerment tools, and
|
||||
full-chain services,Assist you in efficiently reaching audiences on
|
||||
global mainstream platforms such as TikTok, YouTube, and Instagram,
|
||||
creating a KOL brand effect, unlocking content value, and achieving
|
||||
sustainable growth.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/375/product-introduction-img2.png"
|
||||
alt="background"
|
||||
class="hero-bg-img"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="features-section">
|
||||
<div class="section-header">
|
||||
<div class="decorator-bar"></div>
|
||||
<div class="section-title">Product Features</div>
|
||||
</div>
|
||||
<div class="features-list">
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
One-click Synchronous Publishing
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Synchronize graphic and video content to TikTok, YouTube, and
|
||||
Instagram platforms at once, saving time on repetitive operations.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
Intelligent Scheduled Publishing
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Plan the content release time in advance, support batch scheduling,
|
||||
and accurately grasp the optimal release time of each platform.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
Unified Management of Multiple Accounts
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Easily manage multiple accounts on one platform without the need for
|
||||
repeated login and switching, improving team collaboration
|
||||
efficiency.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
Cloud Content Library
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Safely store and manage all creative materials, access and use them
|
||||
anytime, anywhere, and support quick retrieval and reuse.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
Basic Data Tracking
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Visually view the content performance of various platforms,
|
||||
understand core data indicators, and provide a basis for optimizing
|
||||
strategies.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="solutions-section">
|
||||
<div class="section-header">
|
||||
<div class="decorator-bar"></div>
|
||||
<div class="section-title">Value Added Solutions</div>
|
||||
</div>
|
||||
<div class="solutions-content">
|
||||
<div class="solution-image-container">
|
||||
<img
|
||||
src="@/assets/image/375/product-introduction-img1.png"
|
||||
alt="Value Added Solutions"
|
||||
class="solution-image"
|
||||
/>
|
||||
</div>
|
||||
<div class="solutions-list">
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/375/product-introduction-icon1.png"
|
||||
alt="KOL Brand Promotion"
|
||||
class="solution-icon"
|
||||
/>
|
||||
<div class="solution-title">
|
||||
<div class="vertical-line"></div>
|
||||
KOL Brand Promotion Services
|
||||
</div>
|
||||
<div class="solution-description">
|
||||
Efficiently connect high-quality business cooperation
|
||||
opportunities and complete the entire process management from
|
||||
order acceptance to publication within the platform.
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/375/product-introduction-icon2.png"
|
||||
alt="Content Creation Support"
|
||||
class="solution-icon"
|
||||
/>
|
||||
<div class="solution-title">
|
||||
<div class="vertical-line"></div>
|
||||
Professional Content Creation Support
|
||||
</div>
|
||||
<div class="solution-description">
|
||||
Connect professional shooting and post production teams for you,
|
||||
create high-quality "art+story" content, and strengthen IP
|
||||
influence.
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/375/product-introduction-icon3.png"
|
||||
alt="Account Operation"
|
||||
class="solution-icon"
|
||||
/>
|
||||
<div class="solution-title">
|
||||
<div class="vertical-line"></div>
|
||||
Account Operation and Hosting Services
|
||||
</div>
|
||||
<div class="solution-description">
|
||||
From 0 to 1 account positioning, follower growth strategy to
|
||||
monetization cycle, operation experts provide full cycle running
|
||||
and hosting services.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="advantages-section">
|
||||
<div class="advantages-content">
|
||||
<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>
|
||||
<div class="advantage-description">
|
||||
Multi platform publishing efficiency improvement, allowing you to
|
||||
focus on content creation.
|
||||
</div>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-title">
|
||||
<div class="vertical-line"></div>
|
||||
Safe and Reliable
|
||||
</div>
|
||||
<div class="advantage-description">
|
||||
Enterprise level data encryption and permission control ensure
|
||||
account and content security.
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="cta-content">
|
||||
<div class="cta-title">Get customized<br />solutions for free</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="60"
|
||||
viewBox="0 0 32 60"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M31.3636 42.4968C32.2121 43.3437 32.2121 44.7165 31.3636 45.5635L17.5362 59.3648C16.6877 60.2117 15.3123 60.2117 14.4638 59.3648L0.636387 45.5635C-0.212133 44.7165 -0.212133 43.3437 0.636387 42.4968C1.48491 41.6499 2.8603 41.6499 3.70883 42.4968L13.8272 52.5962L13.8272 2.16868C13.8272 0.970951 14.8 -7.51835e-07 16 -6.99382e-07C17.2 -6.46929e-07 18.1728 0.970951 18.1728 2.16868L18.1728 52.5962L28.2912 42.4968C29.1397 41.6499 30.5151 41.6499 31.3636 42.4968Z"
|
||||
fill="#FF7BAC"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cta-qr-code">
|
||||
<img
|
||||
src="@/assets/image/375/product-introduction-img6.png"
|
||||
alt="QR Code"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/375/product-introduction-img5.png"
|
||||
alt="background"
|
||||
class="cta-bg-img"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
background-color: #fff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-image: url("@/assets/image/375/product-introduction-img3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 24 * 5.12px;
|
||||
font-weight: 500;
|
||||
line-height: 34 * 5.12px;
|
||||
letter-spacing: 0.2 * 5.12px;
|
||||
padding: 153 * 5.12px 0 163 * 5.12px 0;
|
||||
color: #000;
|
||||
z-index: 2;
|
||||
}
|
||||
.hero-bg-img {
|
||||
position: absolute;
|
||||
bottom: -25 * 5.12px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
z-index: 1;
|
||||
}
|
||||
.core-value-card {
|
||||
width: 346 * 5.12px;
|
||||
padding: 40 * 5.12px 32 * 5.12px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 16 * 5.12px;
|
||||
box-shadow: 0 * 5.12px 3 * 5.12px 14 * 5.12px 0 * 5.12px rgba(0, 0, 0, 0.16);
|
||||
text-align: left;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24 * 5.12px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 32 * 5.12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.8 * 5.12px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 14 * 5.12px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48 * 5.12px;
|
||||
text-align: justify;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 32 * 5.12px;
|
||||
padding: 0 16 * 5.12px;
|
||||
}
|
||||
|
||||
.decorator-bar {
|
||||
width: 58 * 5.12px;
|
||||
height: 7 * 5.12px;
|
||||
background-color: #ff7bac;
|
||||
margin-bottom: 16 * 5.12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: "PingFang SC";
|
||||
font-size: 24 * 5.12px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.features-section {
|
||||
padding-top: 64 * 5.12px;
|
||||
width: 346 * 5.12px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.features-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24 * 5.12px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 5.12px;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 24 * 5.12px;
|
||||
font-weight: 500;
|
||||
line-height: 32 * 5.12px;
|
||||
letter-spacing: 1.2 * 5.12px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16 * 5.12px;
|
||||
}
|
||||
.feature-description {
|
||||
font-size: 16 * 5.12px;
|
||||
line-height: 22 * 5.12px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48 * 5.12px;
|
||||
padding: 0 16 * 5.12px;
|
||||
text-align: justify;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
}
|
||||
|
||||
.solutions-section {
|
||||
padding-top: 64 * 5.12px;
|
||||
width: 346 * 5.12px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.solutions-content {
|
||||
display: flex;
|
||||
gap: 32 * 5.12px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.solutions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24 * 5.12px;
|
||||
width: 100%;
|
||||
}
|
||||
.solution-item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.solution-icon {
|
||||
width: 92 * 5.12px;
|
||||
height: 76 * 5.12px;
|
||||
padding-left: 16 * 5.12px;
|
||||
}
|
||||
.solution-title {
|
||||
font-family: "PingFang SC";
|
||||
font-size: 24 * 5.12px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 32 * 5.12px; /* 133.333% */
|
||||
letter-spacing: 1.2 * 5.12px;
|
||||
display: flex;
|
||||
gap: 16 * 5.12px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16 * 5.12px;
|
||||
}
|
||||
.solution-description {
|
||||
font-size: 14 * 5.12px;
|
||||
letter-spacing: 0.48 * 5.12px;
|
||||
padding: 0 16 * 5.12px;
|
||||
text-align: justify;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: #455363;
|
||||
}
|
||||
.solution-image-container {
|
||||
width: 100%;
|
||||
border-radius: 16 * 5.12px;
|
||||
}
|
||||
.solution-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: 16 * 5.12px;
|
||||
}
|
||||
|
||||
.advantages-section {
|
||||
margin-top: 64 * 5.12px;
|
||||
padding: 64 * 5.12px 0;
|
||||
background-image: url("@/assets/image/375/product-introduction-img4.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.advantages-content {
|
||||
width: 346 * 5.12px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 16 * 5.12px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.advantages-header {
|
||||
width: 100%;
|
||||
padding: 0 16 * 5.12px;
|
||||
}
|
||||
.advantages-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24 * 5.12px;
|
||||
}
|
||||
.advantage-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 5.12px;
|
||||
}
|
||||
.advantage-title {
|
||||
font-size: 24 * 5.12px;
|
||||
font-weight: 500;
|
||||
line-height: 32 * 5.12px;
|
||||
letter-spacing: 1.2 * 5.12px;
|
||||
display: flex;
|
||||
gap: 16 * 5.12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.advantage-description {
|
||||
font-size: 16 * 5.12px;
|
||||
line-height: 22 * 5.12px;
|
||||
letter-spacing: 0.48 * 5.12px;
|
||||
opacity: 0.7;
|
||||
padding: 0 16 * 5.12px;
|
||||
}
|
||||
.text-white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding: 80 * 5.12px 0 21 * 5.12px 0;
|
||||
width: 346 * 5.12px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cta-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16 * 5.12px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-family: "PingFang SC";
|
||||
font-size: 24 * 5.12px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.cta-qr-code {
|
||||
width: 188 * 5.12px;
|
||||
height: 188 * 5.12px;
|
||||
background-color: #90ffff;
|
||||
border-radius: 16 * 5.12px;
|
||||
padding: 14 * 5.12px;
|
||||
margin: 20 * 5.12px 0;
|
||||
}
|
||||
.cta-qr-code img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.cta-bg-img {
|
||||
width: 480 * 5.12px;
|
||||
height: auto;
|
||||
opacity: 0.8;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
width: 1 * 5.12px;
|
||||
height: 20 * 5.12px;
|
||||
background: #ff7bac;
|
||||
flex-shrink: 0;
|
||||
margin-top: 6 * 5.12px;
|
||||
}
|
||||
|
||||
.grid-lines {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 346 * 5.12px;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.grid-lines .line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.grid-lines .line.solid {
|
||||
width: 1 * 5.12px;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.grid-lines .line.dashed {
|
||||
width: 0;
|
||||
border-left: 1 * 5.12px dotted rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.grid-lines .line-1 {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.grid-lines .line-5 {
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
@ -2,21 +2,23 @@
|
||||
|
||||
<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 />
|
||||
Comprehensive growth solutions, <br />providing a one-stop solution
|
||||
for <br />content creation, publishing, analysis, <br />and
|
||||
monetization
|
||||
Comprehensive growth solutions, <br />
|
||||
providing a one-stop solution for content creation,<br />
|
||||
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">
|
||||
@ -31,13 +33,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/768/product-introduction-img2.png"
|
||||
src="@/assets/image/1440/product-introduction-img2.png"
|
||||
alt="background"
|
||||
class="hero-bg-img"
|
||||
/>
|
||||
</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>
|
||||
@ -45,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">
|
||||
@ -55,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">
|
||||
@ -65,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">
|
||||
@ -76,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">
|
||||
@ -86,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">
|
||||
@ -98,28 +100,21 @@
|
||||
</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>
|
||||
</div>
|
||||
<div class="solutions-content">
|
||||
<div class="solution-image-container">
|
||||
<img
|
||||
src="@/assets/image/768/product-introduction-img1.png"
|
||||
alt="Value Added Solutions"
|
||||
class="solution-image"
|
||||
/>
|
||||
</div>
|
||||
<div class="solutions-list">
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/768/product-introduction-icon1.png"
|
||||
src="@/assets/image/1440/product-introduction-icon1.png"
|
||||
alt="KOL Brand Promotion"
|
||||
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,12 +125,12 @@
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/768/product-introduction-icon2.png"
|
||||
src="@/assets/image/1440/product-introduction-icon2.png"
|
||||
alt="Content Creation Support"
|
||||
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,12 +141,12 @@
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/768/product-introduction-icon3.png"
|
||||
src="@/assets/image/1440/product-introduction-icon3.png"
|
||||
alt="Account Operation"
|
||||
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">
|
||||
@ -161,72 +156,84 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-image-container">
|
||||
<img
|
||||
src="@/assets/image/1440/product-introduction-img1.png"
|
||||
alt="Value Added Solutions"
|
||||
class="solution-image"
|
||||
style="width: 434px"
|
||||
/>
|
||||
</div>
|
||||
</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/768/product-introduction-img5.png"
|
||||
src="@/assets/image/1440/product-introduction-img5.png"
|
||||
alt="background"
|
||||
class="cta-bg-img"
|
||||
/>
|
||||
@ -251,7 +258,7 @@
|
||||
</div>
|
||||
<div class="cta-qr-code">
|
||||
<img
|
||||
src="@/assets/image/768/product-introduction-img6.png"
|
||||
src="@/assets/image/1440/product-introduction-img6.png"
|
||||
alt="QR Code"
|
||||
/>
|
||||
</div>
|
||||
@ -260,7 +267,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
.page-container {
|
||||
background-color: #fff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
@ -268,10 +275,10 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
.hero-section.px-fixed {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-image: url("@/assets/image/768/product-introduction-img3.png");
|
||||
background-image: url("@/assets/image/1440/product-introduction-img3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: top;
|
||||
@ -283,29 +290,28 @@
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 32 * 2.5px;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
line-height: 56 * 2.5px;
|
||||
letter-spacing: 1.2 * 2.5px;
|
||||
padding: 153 * 2.5px 0 133 * 2.5px 0;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1.2px;
|
||||
padding: 153px 0;
|
||||
color: #000;
|
||||
z-index: 2;
|
||||
}
|
||||
.hero-bg-img {
|
||||
position: absolute;
|
||||
bottom: -24 * 2.5px;
|
||||
bottom: -204px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
z-index: 1;
|
||||
}
|
||||
.core-value-card {
|
||||
width: 662 * 2.5px;
|
||||
padding: 40 * 2.5px 32 * 2.5px;
|
||||
.core-value-card.px-fixed {
|
||||
width: 932px;
|
||||
padding: 40px 32px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 16 * 2.5px;
|
||||
box-shadow: 0 * 2.5px 3 * 2.5px 14 * 2.5px 0 * 2.5px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
||||
text-align: left;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
@ -314,191 +320,204 @@
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24 * 2.5px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 40 * 2.5px;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
line-height: 56 * 2.5px;
|
||||
letter-spacing: 1.2 * 2.5px;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 16 * 2.5px;
|
||||
line-height: 22 * 2.5px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
letter-spacing: 0.48px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 32 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
margin-bottom: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.decorator-bar {
|
||||
width: 58 * 2.5px;
|
||||
height: 7 * 2.5px;
|
||||
width: 58px;
|
||||
height: 7px;
|
||||
background-color: #ff7bac;
|
||||
margin-bottom: 16 * 2.5px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40 * 2.5px;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
line-height: 56 * 2.5px;
|
||||
letter-spacing: 1.2 * 2.5px;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1.2px;
|
||||
color: #000;
|
||||
}
|
||||
.features-section {
|
||||
padding-top: 100 * 2.5px;
|
||||
width: 662 * 2.5px;
|
||||
.features-section.px-fixed {
|
||||
padding-top: 200px;
|
||||
width: 932px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.features-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24 * 2.5px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 2.5px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 24 * 2.5px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 32 * 2.5px;
|
||||
letter-spacing: 1.2 * 2.5px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1.2px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16 * 2.5px;
|
||||
gap: 16px;
|
||||
}
|
||||
.feature-description {
|
||||
font-size: 16 * 2.5px;
|
||||
line-height: 22 * 2.5px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
letter-spacing: 0.48px;
|
||||
padding: 0 16px;
|
||||
text-align: justify;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
}
|
||||
|
||||
.solutions-section {
|
||||
padding-top: 80 * 2.5px;
|
||||
width: 662 * 2.5px;
|
||||
.solutions-section.px-fixed {
|
||||
padding-top: 80px;
|
||||
width: 932px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.solutions-content {
|
||||
display: flex;
|
||||
gap: 32 * 2.5px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.solutions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24 * 2.5px;
|
||||
width: 100%;
|
||||
gap: 24px;
|
||||
width: 466px;
|
||||
}
|
||||
.solution-item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.solution-icon {
|
||||
width: 92 * 2.5px;
|
||||
height: 76 * 2.5px;
|
||||
padding-left: 16 * 2.5px;
|
||||
width: 92px;
|
||||
height: 76px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.solution-title {
|
||||
font-family: "PingFang SC";
|
||||
font-size: 24 * 2.5px;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 32 * 2.5px; /* 133.333% */
|
||||
letter-spacing: 1.2 * 2.5px;
|
||||
line-height: 32px; /* 133.333% */
|
||||
letter-spacing: 1.2px;
|
||||
display: flex;
|
||||
gap: 16 * 2.5px;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16 * 2.5px;
|
||||
}
|
||||
.solution-description {
|
||||
font-size: 16 * 2.5px;
|
||||
line-height: 22 * 2.5px;
|
||||
align-self: stretch;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
padding: 0 16px;
|
||||
|
||||
text-align: justify;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
/* 正文 */
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
letter-spacing: 0.48px;
|
||||
}
|
||||
.solution-image-container {
|
||||
width: 100%;
|
||||
border-radius: 16 * 2.5px;
|
||||
width: 434px;
|
||||
border-radius: 16px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.solution-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 16 * 2.5px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.advantages-section {
|
||||
margin-top: 80 * 2.5px;
|
||||
padding: 80 * 2.5px 0;
|
||||
background-image: url("@/assets/image/768/product-introduction-img4.png");
|
||||
.advantages-section.px-fixed {
|
||||
margin-top: 80px;
|
||||
padding: 80px 0;
|
||||
background-image: url("@/assets/image/1440/product-introduction-img4.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.advantages-content {
|
||||
width: 662 * 2.5px;
|
||||
.advantages-content.px-fixed {
|
||||
width: 932px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 16 * 2.5px;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.advantages-header {
|
||||
width: 100%;
|
||||
padding: 0 16 * 2.5px;
|
||||
width: 466px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.advantages-list {
|
||||
width: 100%;
|
||||
width: 466px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24 * 2.5px;
|
||||
gap: 32px;
|
||||
}
|
||||
.advantage-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 2.5px;
|
||||
gap: 16px;
|
||||
}
|
||||
.advantage-title {
|
||||
font-size: 24 * 2.5px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 32 * 2.5px;
|
||||
letter-spacing: 1.2 * 2.5px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1.2px;
|
||||
display: flex;
|
||||
gap: 16 * 2.5px;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.advantage-description {
|
||||
font-size: 16 * 2.5px;
|
||||
line-height: 22 * 2.5px;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.48px;
|
||||
opacity: 0.7;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.text-white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding: 80 * 2.5px 0;
|
||||
.cta-section.px-fixed {
|
||||
padding: 60px 0;
|
||||
position: relative;
|
||||
width: 662 * 2.5px;
|
||||
width: 932px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -506,7 +525,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16 * 2.5px;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -514,24 +533,24 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 188 * 2.5px;
|
||||
height: 188px;
|
||||
}
|
||||
.cta-arrow {
|
||||
width: 60 * 2.5px;
|
||||
height: 32 * 2.5px;
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
}
|
||||
.cta-title {
|
||||
font-size: 40 * 2.5px;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
line-height: 56 * 2.5px;
|
||||
letter-spacing: 1.2 * 2.5px;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
.cta-qr-code {
|
||||
width: 188 * 2.5px;
|
||||
height: 188 * 2.5px;
|
||||
width: 188px;
|
||||
height: 188px;
|
||||
background-color: #90ffff;
|
||||
border-radius: 16 * 2.5px;
|
||||
padding: 14 * 2.5px;
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
}
|
||||
.cta-qr-code img {
|
||||
width: 100%;
|
||||
@ -540,27 +559,27 @@
|
||||
}
|
||||
.cta-bg-img {
|
||||
position: absolute;
|
||||
top: 80 * 2.5px;
|
||||
left: 60 * 2.5px;
|
||||
width: 530 * 2.5px;
|
||||
height: 268 * 2.5px;
|
||||
top: 80px;
|
||||
left: 355px;
|
||||
width: 530px;
|
||||
height: 268px;
|
||||
opacity: 0.8;
|
||||
z-index: 0;
|
||||
}
|
||||
.vertical-line {
|
||||
width: 1 * 2.5px;
|
||||
height: 20 * 2.5px;
|
||||
.vertical-line.px-fixed {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: #ff7bac;
|
||||
flex-shrink: 0;
|
||||
margin-top: 6 * 2.5px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.grid-lines {
|
||||
.grid-lines.px-fixed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 662 * 2.5px;
|
||||
width: 932px;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
@ -573,26 +592,26 @@
|
||||
}
|
||||
|
||||
.grid-lines .line.solid {
|
||||
width: 1 * 2.5px;
|
||||
width: 1px;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.grid-lines .line.dashed {
|
||||
width: 0;
|
||||
border-left: 1 * 2.5px dotted rgba(0, 0, 0, 0.12);
|
||||
border-left: 1px dotted rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.grid-lines .line-1 {
|
||||
left: 0;
|
||||
}
|
||||
.grid-lines .line-2 {
|
||||
left: 162.5 * 2.5px;
|
||||
left: 310px;
|
||||
}
|
||||
.grid-lines .line-3 {
|
||||
left: 325 * 2.5px;
|
||||
left: 620px;
|
||||
}
|
||||
.grid-lines .line-4 {
|
||||
left: 487.5 * 2.5px;
|
||||
left: 930px;
|
||||
}
|
||||
.grid-lines .line-5 {
|
||||
right: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user