586 lines
14 KiB
Vue
586 lines
14 KiB
Vue
<script setup>
|
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-container">
|
|
<div class="grid-lines">
|
|
<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">
|
|
<div class="hero-content">
|
|
<div class="hero-title">
|
|
{{ t("product_intro.hero_line1") }}<br />
|
|
{{ t("product_intro.hero_line2") }}<br />
|
|
{{ t("product_intro.hero_line3") }}<br />
|
|
{{ t("product_intro.hero_line4") }}
|
|
</div>
|
|
</div>
|
|
<div class="core-value-card">
|
|
<div class="card-content">
|
|
<div class="card-title">
|
|
{{ t("product_intro.core_value_title") }}
|
|
</div>
|
|
<div class="card-text">
|
|
{{ t("product_intro.core_value_text") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img
|
|
src="@/assets/image/1920/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">{{ t("product_intro.features_title") }}</div>
|
|
</div>
|
|
<div class="features-list">
|
|
<div class="feature-item">
|
|
<div class="feature-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.feature_sync") }}
|
|
</div>
|
|
<div class="feature-description">
|
|
{{ t("product_intro.feature_sync_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.feature_schedule") }}
|
|
</div>
|
|
<div class="feature-description">
|
|
{{ t("product_intro.feature_schedule_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.feature_accounts") }}
|
|
</div>
|
|
<div class="feature-description">
|
|
{{ t("product_intro.feature_accounts_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.feature_library") }}
|
|
</div>
|
|
<div class="feature-description">
|
|
{{ t("product_intro.feature_library_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.feature_tracking") }}
|
|
</div>
|
|
<div class="feature-description">
|
|
{{ t("product_intro.feature_tracking_desc") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="solutions-section">
|
|
<div class="section-header">
|
|
<div class="decorator-bar"></div>
|
|
<div class="section-title">
|
|
{{ t("product_intro.solutions_title") }}
|
|
</div>
|
|
</div>
|
|
<div class="solutions-content">
|
|
<div class="solutions-list">
|
|
<div class="solution-item">
|
|
<img
|
|
src="@/assets/image/1920/product-introduction-icon1.png"
|
|
alt="KOL Brand Promotion"
|
|
class="solution-icon"
|
|
/>
|
|
<div class="solution-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.sol_kol") }}
|
|
</div>
|
|
<div class="solution-description">
|
|
{{ t("product_intro.sol_kol_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="solution-item">
|
|
<img
|
|
src="@/assets/image/1920/product-introduction-icon2.png"
|
|
alt="Content Creation Support"
|
|
class="solution-icon"
|
|
/>
|
|
<div class="solution-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.sol_content") }}
|
|
</div>
|
|
<div class="solution-description">
|
|
{{ t("product_intro.sol_content_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="solution-item">
|
|
<img
|
|
src="@/assets/image/1920/product-introduction-icon3.png"
|
|
alt="Account Operation"
|
|
class="solution-icon"
|
|
/>
|
|
<div class="solution-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.sol_ops") }}
|
|
</div>
|
|
<div class="solution-description">
|
|
{{ t("product_intro.sol_ops_desc") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="solution-image-container">
|
|
<img
|
|
src="@/assets/image/1920/product-introduction-img1.png"
|
|
alt="Value Added Solutions"
|
|
class="solution-image"
|
|
/>
|
|
</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">
|
|
{{ t("product_intro.advantages_title") }}
|
|
</div>
|
|
</div>
|
|
<div class="advantages-list">
|
|
<div class="advantage-item">
|
|
<div class="advantage-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.adv_time") }}
|
|
</div>
|
|
<div class="advantage-description">
|
|
{{ t("product_intro.adv_time_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="advantage-item">
|
|
<div class="advantage-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.adv_safe") }}
|
|
</div>
|
|
<div class="advantage-description">
|
|
{{ t("product_intro.adv_safe_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="advantage-item">
|
|
<div class="advantage-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.adv_consistent") }}
|
|
</div>
|
|
<div class="advantage-description">
|
|
{{ t("product_intro.adv_consistent_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="advantage-item">
|
|
<div class="advantage-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.adv_data") }}
|
|
</div>
|
|
<div class="advantage-description">
|
|
{{ t("product_intro.adv_data_desc") }}
|
|
</div>
|
|
</div>
|
|
<div class="advantage-item">
|
|
<div class="advantage-title">
|
|
<div class="vertical-line"></div>
|
|
{{ t("product_intro.adv_easy") }}
|
|
</div>
|
|
<div class="advantage-description">
|
|
{{ t("product_intro.adv_easy_desc") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta-section">
|
|
<img
|
|
src="@/assets/image/1920/product-introduction-img5.png"
|
|
alt="background"
|
|
class="cta-bg-img"
|
|
/>
|
|
<div class="cta-content">
|
|
<div class="cta-text">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="60"
|
|
height="32"
|
|
viewBox="0 0 60 32"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M42.4968 0.636391C43.3437 -0.21213 44.7165 -0.21213 45.5635 0.636391L59.3648 14.4638C60.2117 15.3123 60.2117 16.6877 59.3648 17.5362L45.5635 31.3636C44.7165 32.2121 43.3437 32.2121 42.4968 31.3636C41.6499 30.5151 41.6499 29.1397 42.4968 28.2912L52.5962 18.1728H2.16868C0.970951 18.1728 0 17.2 0 16C0 14.8 0.970951 13.8272 2.16868 13.8272H52.5962L42.4968 3.70883C41.6499 2.86031 41.6499 1.48491 42.4968 0.636391Z"
|
|
fill="#FF7BAC"
|
|
/>
|
|
</svg>
|
|
<div class="cta-title">
|
|
{{ t("product_intro.cta_title_line1") }}<br />
|
|
{{ t("product_intro.cta_title_line2") }}
|
|
</div>
|
|
</div>
|
|
<div class="cta-qr-code">
|
|
<img
|
|
src="@/assets/image/1920/product-introduction-img6.png"
|
|
alt="QR Code"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</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/1920/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: 40px;
|
|
font-weight: 500;
|
|
line-height: 56px;
|
|
letter-spacing: 1.2px;
|
|
padding: 153px 0;
|
|
color: #000;
|
|
z-index: 2;
|
|
}
|
|
.hero-bg-img {
|
|
position: absolute;
|
|
bottom: -84px;
|
|
left: 0;
|
|
width: 100%;
|
|
/* height: 100%; */
|
|
z-index: 1;
|
|
}
|
|
.core-value-card {
|
|
width: 932px;
|
|
padding: 40px 32px;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
border-radius: 16px;
|
|
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
|
text-align: left;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 40px;
|
|
font-weight: 500;
|
|
line-height: 56px;
|
|
letter-spacing: 1.2px;
|
|
}
|
|
|
|
.card-text {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
color: #455363;
|
|
letter-spacing: 0.48px;
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 32px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.decorator-bar {
|
|
width: 58px;
|
|
height: 7px;
|
|
background-color: #ff7bac;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 40px;
|
|
font-weight: 500;
|
|
line-height: 56px;
|
|
letter-spacing: 1.2px;
|
|
color: #000;
|
|
}
|
|
.features-section {
|
|
padding-top: 200px;
|
|
width: 932px;
|
|
margin: 0 auto;
|
|
}
|
|
.features-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.feature-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.feature-title {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
line-height: 32px;
|
|
letter-spacing: 1.2px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
}
|
|
.feature-description {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
color: #455363;
|
|
letter-spacing: 0.48px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.solutions-section {
|
|
padding-top: 80px;
|
|
width: 932px;
|
|
margin: 0 auto;
|
|
}
|
|
.solutions-content {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
.solutions-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
width: 466px;
|
|
}
|
|
.solution-item {
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.solution-icon {
|
|
width: 92px;
|
|
height: 76px;
|
|
padding-left: 16px;
|
|
}
|
|
.solution-title {
|
|
font-family: "PingFang SC";
|
|
font-size: 24px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 32px; /* 133.333% */
|
|
letter-spacing: 1.2px;
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
margin-bottom: 16px;
|
|
}
|
|
.solution-description {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
color: #455363;
|
|
letter-spacing: 0.48px;
|
|
padding: 0 16px;
|
|
}
|
|
.solution-image-container {
|
|
width: 434px;
|
|
border-radius: 16px;
|
|
}
|
|
.solution-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.advantages-section {
|
|
margin-top: 80px;
|
|
padding: 80px 0;
|
|
background-image: url("@/assets/image/1920/product-introduction-img4.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
color: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.advantages-content {
|
|
width: 932px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
gap: 16px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.advantages-header {
|
|
width: 466px;
|
|
padding: 0 16px;
|
|
}
|
|
.advantages-list {
|
|
width: 466px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
.advantage-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
.advantage-title {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
line-height: 32px;
|
|
letter-spacing: 1.2px;
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
.advantage-description {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
letter-spacing: 0.48px;
|
|
opacity: 0.7;
|
|
}
|
|
.text-white {
|
|
color: #fff;
|
|
}
|
|
|
|
.cta-section {
|
|
padding: 80px 0;
|
|
position: relative;
|
|
width: 932px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
.cta-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.cta-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 188px;
|
|
}
|
|
.cta-arrow {
|
|
width: 60px;
|
|
height: 32px;
|
|
}
|
|
.cta-title {
|
|
font-size: 40px;
|
|
font-weight: 500;
|
|
line-height: 56px;
|
|
letter-spacing: 1.2px;
|
|
}
|
|
.cta-qr-code {
|
|
width: 188px;
|
|
height: 188px;
|
|
background-color: #90ffff;
|
|
border-radius: 16px;
|
|
padding: 14px;
|
|
}
|
|
.cta-qr-code img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.cta-bg-img {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 201px;
|
|
width: 530px;
|
|
height: 268px;
|
|
opacity: 0.8;
|
|
z-index: 0;
|
|
}
|
|
.vertical-line {
|
|
width: 1px;
|
|
height: 20px;
|
|
background: #ff7bac;
|
|
flex-shrink: 0;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.grid-lines {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 932px;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.grid-lines .line {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.grid-lines .line.solid {
|
|
width: 1px;
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.grid-lines .line.dashed {
|
|
width: 0;
|
|
border-left: 1px dotted rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.grid-lines .line-1 {
|
|
left: 0;
|
|
}
|
|
.grid-lines .line-2 {
|
|
left: 233px;
|
|
}
|
|
.grid-lines .line-3 {
|
|
left: 466px;
|
|
}
|
|
.grid-lines .line-4 {
|
|
left: 699px;
|
|
}
|
|
.grid-lines .line-5 {
|
|
right: 0;
|
|
}
|
|
</style>
|