add product-introduction 1920
This commit is contained in:
yuanshan
parent
318f850885
commit
7b4d234c48
BIN
src/assets/image/product-introduction-icon1.png
Normal file
BIN
src/assets/image/product-introduction-icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/image/product-introduction-icon2.png
Normal file
BIN
src/assets/image/product-introduction-icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/image/product-introduction-icon3.png
Normal file
BIN
src/assets/image/product-introduction-icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/image/product-introduction-img1.png
Normal file
BIN
src/assets/image/product-introduction-img1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
BIN
src/assets/image/product-introduction-img2.jpg
Normal file
BIN
src/assets/image/product-introduction-img2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/image/product-introduction-img2.png
Normal file
BIN
src/assets/image/product-introduction-img2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/image/product-introduction-img3.png
Normal file
BIN
src/assets/image/product-introduction-img3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/image/product-introduction-img4.png
Normal file
BIN
src/assets/image/product-introduction-img4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 MiB |
BIN
src/assets/image/product-introduction-img5.png
Normal file
BIN
src/assets/image/product-introduction-img5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/image/product-introduction-img6.png
Normal file
BIN
src/assets/image/product-introduction-img6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -149,6 +149,7 @@ const routes = [
|
||||
{
|
||||
path: "/product-introduction",
|
||||
name: "product-introduction",
|
||||
meta: { bg: 'null' },
|
||||
component: () => import("@/views/product-introduction/index.vue"),
|
||||
},
|
||||
],
|
||||
|
||||
@ -658,7 +658,7 @@ onUnmounted(() => {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
gap: 21px;
|
||||
}
|
||||
@ -675,7 +675,7 @@ onUnmounted(() => {
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 21px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
@ -787,6 +787,7 @@ onUnmounted(() => {
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
|
||||
@ -1,150 +1,142 @@
|
||||
<template>
|
||||
<header></header>
|
||||
<main class="page-container">
|
||||
<div class="financials-container">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.quarterlyreports.title") }}
|
||||
</div>
|
||||
<div class="page-container">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.quarterlyreports.title") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="
|
||||
t('financialinformation.quarterlyreports.search.placeholder')
|
||||
"
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
/>
|
||||
<button class="search-button" @click="handleSearch">
|
||||
{{ t("financialinformation.quarterlyreports.search.button") }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="
|
||||
t('financialinformation.quarterlyreports.search.placeholder')
|
||||
"
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
/>
|
||||
<button class="search-button" @click="handleSearch">
|
||||
{{ t("financialinformation.quarterlyreports.search.button") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-table">
|
||||
<div class="reports-list">
|
||||
<div
|
||||
v-for="(item, index) in pagedList"
|
||||
:key="index"
|
||||
class="table-row"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="file-content">
|
||||
<div class="file-info">
|
||||
<div class="vertical-line"></div>
|
||||
<p class="file-title">{{ item.title }}</p>
|
||||
</div>
|
||||
<p class="file-description">{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="download-section">
|
||||
<p class="download-text" @click="downloadPdf(item.url)">
|
||||
PDF Download
|
||||
</p>
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-table">
|
||||
<div class="reports-list">
|
||||
<div v-for="(item, index) in pagedList" :key="index" class="table-row">
|
||||
<div class="content">
|
||||
<div class="file-content">
|
||||
<div class="file-info">
|
||||
<div class="vertical-line"></div>
|
||||
<p class="file-title">{{ item.title }}</p>
|
||||
</div>
|
||||
<p class="file-description">{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="download-section">
|
||||
<p class="download-text" @click="downloadPdf(item.url)">
|
||||
PDF Download
|
||||
</p>
|
||||
</div>
|
||||
<div class="separator-line"></div>
|
||||
</div>
|
||||
<div class="separator-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-info">
|
||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<div class="pagination-controls">
|
||||
<div class="pagination-buttons">
|
||||
<button
|
||||
class="page-btn prev-btn"
|
||||
:disabled="state.currentPage === 1"
|
||||
@click="goToPrevPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M4 1L1 4.5L4 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- 动态生成页码按钮 -->
|
||||
<template v-for="page in getVisiblePages()" :key="page">
|
||||
<button
|
||||
v-if="page !== '...'"
|
||||
class="page-btn"
|
||||
:class="{ active: page === state.currentPage }"
|
||||
@click="goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button v-else class="page-btn disabled" disabled>...</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
class="page-btn next-btn"
|
||||
:disabled="state.currentPage === totalPages"
|
||||
@click="goToNextPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M1 1L4 4.5L1 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-size-selector" @click="togglePageSizeMenu">
|
||||
<span>{{ state.pageSize }}/page</span>
|
||||
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-info">
|
||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<div class="pagination-controls">
|
||||
<div class="pagination-buttons">
|
||||
<button
|
||||
class="page-btn prev-btn"
|
||||
:disabled="state.currentPage === 1"
|
||||
@click="goToPrevPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M1 1L5 4L9 1"
|
||||
d="M4 1L1 4.5L4 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<!-- 页面大小选择菜单 -->
|
||||
<div v-if="showPageSizeMenu" class="page-size-menu">
|
||||
<div
|
||||
v-for="size in [10, 20, 50]"
|
||||
:key="size"
|
||||
class="page-size-option"
|
||||
:class="{ active: state.pageSize === size }"
|
||||
@click="changePageSize(size)"
|
||||
>
|
||||
{{ size }}/page
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- 动态生成页码按钮 -->
|
||||
<template v-for="page in getVisiblePages()" :key="page">
|
||||
<button
|
||||
v-if="page !== '...'"
|
||||
class="page-btn"
|
||||
:class="{ active: page === state.currentPage }"
|
||||
@click="goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button v-else class="page-btn disabled" disabled>...</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
class="page-btn next-btn"
|
||||
:disabled="state.currentPage === totalPages"
|
||||
@click="goToNextPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M1 1L4 4.5L1 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-size-selector" @click="togglePageSizeMenu">
|
||||
<span>{{ state.pageSize }}/page</span>
|
||||
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
|
||||
<path
|
||||
d="M1 1L5 4L9 1"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<!-- 页面大小选择菜单 -->
|
||||
<div v-if="showPageSizeMenu" class="page-size-menu">
|
||||
<div
|
||||
v-for="size in [10, 20, 50]"
|
||||
:key="size"
|
||||
class="page-size-option"
|
||||
:class="{ active: state.pageSize === size }"
|
||||
@click="changePageSize(size)"
|
||||
>
|
||||
{{ size }}/page
|
||||
</div>
|
||||
</div>
|
||||
<div class="goto-section">
|
||||
<span>Goto</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="state.gotoPage"
|
||||
class="goto-input"
|
||||
:min="1"
|
||||
:max="totalPages"
|
||||
@keyup.enter="handleGoto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goto-section">
|
||||
<span>Goto</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="state.gotoPage"
|
||||
class="goto-input"
|
||||
:min="1"
|
||||
:max="totalPages"
|
||||
@keyup.enter="handleGoto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer></footer>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onUnmounted, computed, reactive } from "vue";
|
||||
@ -348,12 +340,6 @@ const handleClickOutside = (event) => {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.financials-container {
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -553,7 +539,7 @@ const handleClickOutside = (event) => {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
gap: 21px;
|
||||
}
|
||||
@ -570,7 +556,7 @@ const handleClickOutside = (event) => {
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 21px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
@ -682,6 +668,7 @@ const handleClickOutside = (event) => {
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<div class="historic-data-container">
|
||||
<div class="echarts-container">
|
||||
<customEcharts></customEcharts>
|
||||
</div>
|
||||
@ -715,8 +715,9 @@ const getPageData = async () => {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
gap: 21px;
|
||||
}
|
||||
|
||||
@ -732,7 +733,7 @@ const getPageData = async () => {
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 21px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
@ -740,7 +741,6 @@ const getPageData = async () => {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -844,6 +844,7 @@ const getPageData = async () => {
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
|
||||
@ -1,233 +1,546 @@
|
||||
<script setup>
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
console.log(stockQuote);
|
||||
getStockQuate();
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<main ref="main" class="stock-quote-hero">
|
||||
<div class="hero-content">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="stock-title">Stock Quote</div>
|
||||
<div class="page-container">
|
||||
<section class="hero-section 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 content creation,<br />
|
||||
publishing, analysis, and monetization
|
||||
</div>
|
||||
</div>
|
||||
<section class="quote-layout">
|
||||
<article class="price-card">
|
||||
<div class="price-value">${{ stockQuote.price }}</div>
|
||||
<div class="price-market">NASDAQ: FIEE</div>
|
||||
<div class="price-time">{{ formatted }}</div>
|
||||
</article>
|
||||
<div class="stats-table">
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">Open</span>
|
||||
<span class="stat-value">{{ stockQuote.open }}</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">% Change</span>
|
||||
<span
|
||||
class="stat-value"
|
||||
:class="
|
||||
stockQuote.change
|
||||
? String(stockQuote.change).includes('-')
|
||||
? 'negative-change'
|
||||
: String(stockQuote.change).includes('+')
|
||||
? 'positive-change'
|
||||
: 'neutral-change'
|
||||
: 'neutral-change'
|
||||
"
|
||||
>
|
||||
{{ stockQuote.change }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">Day's Range</span>
|
||||
<span class="stat-value">{{ stockQuote.daysRange }}</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">52-Week Range</span>
|
||||
<span class="stat-value">{{ stockQuote.week52Range }}</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">Volume</span>
|
||||
<span class="stat-value">{{ stockQuote.volume }}</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">Market Cap</span>
|
||||
<span class="stat-value">{{ stockQuote.marketCap }}</span>
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/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="solutions-list">
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/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/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/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 class="solution-image-container">
|
||||
<img
|
||||
src="@/assets/image/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">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">
|
||||
<img
|
||||
src="@/assets/image/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">
|
||||
Get customized <br />
|
||||
solutions for free
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-qr-code">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-img6.png"
|
||||
alt="QR Code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stock-quote-hero {
|
||||
.page-container {
|
||||
background-color: #fff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
/* max-width: 932px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-image: url("@/assets/image/product-introduction-img3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.hero-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.title-decoration {
|
||||
width: 58px;
|
||||
height: 7px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 43px;
|
||||
}
|
||||
|
||||
.stock-title {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 40px;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: 3%;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.gradient-badge {
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
background: #e62968;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: #0d1b2a;
|
||||
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;
|
||||
}
|
||||
|
||||
.quote-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 420px 1fr;
|
||||
align-items: start;
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
.price-card {
|
||||
width: 420px;
|
||||
min-height: 420px;
|
||||
border-radius: 32px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #f0f3f8;
|
||||
box-shadow: 0 12px 32px rgba(16, 46, 86, 0.08);
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
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;
|
||||
max-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: center;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.feature-description {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 110px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-transform: uppercase;
|
||||
.solutions-section {
|
||||
padding-top: 80px;
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.solutions-content {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
.solutions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
width: 466px;
|
||||
}
|
||||
.solution-item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.solution-icon {
|
||||
width: 92px;
|
||||
height: 76px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.solution-title {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.solution-description {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.solution-image-container {
|
||||
width: 434px;
|
||||
height: 628px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.solution-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.price-market {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: #0d1b2a;
|
||||
margin-bottom: 12px;
|
||||
.advantages-section {
|
||||
margin-top: 80px;
|
||||
padding: 80px 0;
|
||||
background-image: url("@/assets/image/product-introduction-img4.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.price-time {
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.02em;
|
||||
color: #5a6775;
|
||||
.advantages-content {
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.stats-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
border-radius: 24px;
|
||||
.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: center;
|
||||
}
|
||||
.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;
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stats-cell {
|
||||
.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: center;
|
||||
gap: 8px;
|
||||
padding: 24px 32px;
|
||||
border-bottom: 1px solid rgba(232, 237, 245, 0.85);
|
||||
border-right: 1px solid rgba(232, 237, 245, 0.85);
|
||||
justify-content: space-between;
|
||||
height: 188px;
|
||||
}
|
||||
|
||||
.stats-cell:nth-child(2n) {
|
||||
border-right: none;
|
||||
.cta-arrow {
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.stats-cell:nth-last-child(-n + 2) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 14px;
|
||||
.cta-title {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #73849a;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: #10243b;
|
||||
.cta-qr-code {
|
||||
width: 188px;
|
||||
height: 188px;
|
||||
background-color: #90ffff;
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
color: #455363;
|
||||
.cta-qr-code img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: #0d1b2a;
|
||||
.cta-bg-img {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 201px;
|
||||
width: 530px;
|
||||
height: 268px;
|
||||
opacity: 0.8;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.positive-change {
|
||||
color: #00c48c;
|
||||
}
|
||||
|
||||
.negative-change {
|
||||
color: #cf3050;
|
||||
}
|
||||
|
||||
.neutral-change {
|
||||
color: #0d1b2a;
|
||||
.vertical-line {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #ff7bac;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user