fix page style
This commit is contained in:
yuanshan
parent
ea9ad3d08e
commit
009d6d4d67
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 1.6 MiB |
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<!-- 通用页脚 -->
|
||||
<div class="custom-footer">
|
||||
<span>© 2025 FiEE, Inc. All Rights Reserved.</span>
|
||||
<div class="footer-links">
|
||||
<span @click="handleLink('privacyPolicy')">Privacy Policy</span>
|
||||
<span @click="handleLink('termsOfUse')">Terms of use</span>
|
||||
<span @click="handleLink('siteMap')">Site Map</span>
|
||||
</div>
|
||||
<div>© 2025 FiEE, Inc. All Rights Reserved.</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -26,29 +26,28 @@ const handleLink = (link) => {
|
||||
// } else if (link === "siteMap") {
|
||||
// window.open(siteMap, "_blank");
|
||||
// }
|
||||
router.push(link)
|
||||
router.push(link);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
padding: 24 * 2.5px 32 * 2.5px;
|
||||
color: #888;
|
||||
// font-size: 15px;
|
||||
font-size: 1.05rem;
|
||||
font-size: 14 * 2.5px;
|
||||
background: #f7f8fa;
|
||||
letter-spacing: 1px;
|
||||
border-top: 1px solid #ececec;
|
||||
z-index: 100;
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.footer-links {
|
||||
margin: 0.4rem 0 0;
|
||||
span {
|
||||
border-right: 1px solid #d2d2d7;
|
||||
padding: 0 10px;
|
||||
padding: 0 16 * 2.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span:nth-last-child(1) {
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from '@/components/customHeader/size375/index.vue'
|
||||
import size768 from '@/components/customHeader/size375/index.vue'
|
||||
import size1440 from '@/components/customHeader/size1440/index.vue'
|
||||
import size1920 from '@/components/customHeader/size1920/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import size375 from "@/components/customHeader/size375/index.vue";
|
||||
import size768 from "@/components/customHeader/size768/index.vue";
|
||||
import size1440 from "@/components/customHeader/size1440/index.vue";
|
||||
import size1920 from "@/components/customHeader/size1920/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const router = useRouter()
|
||||
const { width } = useWindowSize()
|
||||
const { t } = useI18n()
|
||||
const router = useRouter();
|
||||
const { width } = useWindowSize();
|
||||
const { t } = useI18n();
|
||||
|
||||
const viewComponent = computed(() => {
|
||||
const viewWidth = width.value
|
||||
const viewWidth = width.value;
|
||||
if (viewWidth <= 450) {
|
||||
return size375
|
||||
return size375;
|
||||
} else if (viewWidth <= 835) {
|
||||
return size768
|
||||
return size768;
|
||||
} else if (viewWidth <= 1640) {
|
||||
return size1440
|
||||
return size1440;
|
||||
} else if (viewWidth <= 1920 || viewWidth > 1920) {
|
||||
return size1920
|
||||
return size1920;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
220
src/components/customHeader/size768/index.vue
Normal file
220
src/components/customHeader/size768/index.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<!-- 通用页头 -->
|
||||
<NLayoutHeader
|
||||
class="custom-header"
|
||||
:class="{ 'header-scrolled': isScrolled }"
|
||||
>
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage class="logo-image" :src="FiEELogo" preview-disabled />
|
||||
</div>
|
||||
<div
|
||||
class="menu-btn"
|
||||
:class="{ 'menu-open': showMenu }"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<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>
|
||||
<transition name="fade-slide">
|
||||
<div v-if="showMenu" class="mobile-menu-wrapper" @click.self="closeMenu">
|
||||
<NConfigProvider :theme-overrides="themeOverrides">
|
||||
<NMenu
|
||||
mode="vertical"
|
||||
:options="menuOptions"
|
||||
:inverted="isScrolled"
|
||||
class="mobile-menu"
|
||||
accordion
|
||||
v-model:value="selectedKey"
|
||||
@update:value="handleMenuSelect"
|
||||
/>
|
||||
</NConfigProvider>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FiEELogo from "@/assets/image/header/logo.png";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { NMenu, NLayoutHeader, NImage, NIcon, NConfigProvider } from "naive-ui";
|
||||
import { MenuSharp, CloseSharp } from "@vicons/ionicons5";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
|
||||
const themeOverrides = {
|
||||
Menu: {
|
||||
itemTextColorHover: "#000",
|
||||
itemTextColorActive: "#FF7BAC",
|
||||
itemTextColorActiveHover: "#fff8fb",
|
||||
itemColorHover: "#FDDFE9",
|
||||
itemColorActive: "#fff",
|
||||
itemColorActiveHover: "#fff8fb",
|
||||
},
|
||||
};
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const isScrolled = ref(false);
|
||||
const showMenu = ref(false);
|
||||
const selectedKey = ref(null);
|
||||
|
||||
const toggleMenu = () => {
|
||||
showMenu.value = !showMenu.value;
|
||||
};
|
||||
const closeMenu = () => {
|
||||
showMenu.value = false;
|
||||
};
|
||||
|
||||
// 递归查找菜单项
|
||||
function findMenuOptionByKey(options, key) {
|
||||
for (const option of options) {
|
||||
if (option.key === key) return option;
|
||||
if (option.children) {
|
||||
const found = findMenuOptionByKey(option.children, key);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 菜单点击跳转
|
||||
const handleMenuSelect = (key) => {
|
||||
const option = findMenuOptionByKey(menuOptions, key);
|
||||
if (option && option.href) {
|
||||
router.push(option.href);
|
||||
showMenu.value = false; // 跳转后收起菜单
|
||||
}
|
||||
};
|
||||
|
||||
// 使用统一的菜单配置
|
||||
const menuOptions = useHeaderMenuConfig();
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
//滚动距离大于100*2.5px时，处理对应的header样式
|
||||
isScrolled.value = window.scrollY >= 100;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
//点击回到首页
|
||||
const handleToHome = () => {
|
||||
router.push("/");
|
||||
selectedKey.value = null; // 重置菜单选中状态
|
||||
showMenu.value = false; // 在移动端同时关闭菜单
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-header {
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
height: 60 * 2.5px;
|
||||
|
||||
&.header-scrolled {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 2 * 2.5px 8 * 2.5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 59 * 2.5px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logo {
|
||||
flex-shrink: 0;
|
||||
margin-left: 11 * 2.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 120 * 2.5px;
|
||||
height: 27 * 2.5px;
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 75 * 2.5px;
|
||||
padding: 20 * 2.5px;
|
||||
border-radius: 30 * 2.5px;
|
||||
background: transparent;
|
||||
user-select: none;
|
||||
transition: background 0.2s;
|
||||
position: relative;
|
||||
|
||||
.menu-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
.menu-icon-close {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
|
||||
}
|
||||
|
||||
&.menu-open {
|
||||
.menu-icon-menu {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) rotate(90deg) scale(0.8);
|
||||
}
|
||||
.menu-icon-close {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-wrapper {
|
||||
position: fixed;
|
||||
top: 60 * 2.5px;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background: #fff;
|
||||
z-index: 1100;
|
||||
box-shadow: 0 30 * 2.5px 40 * 2.5px rgba(0, 0, 0, 0.08);
|
||||
padding: 40 * 2.5px;
|
||||
max-height: 1500 * 2.5px;
|
||||
overflow-y: auto;
|
||||
:deep(.n-menu-item) {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-slide-enter-active,
|
||||
.fade-slide-leave-active {
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.fade-slide-enter-from,
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-50 * 2.5px);
|
||||
}
|
||||
</style>
|
||||
@ -341,6 +341,7 @@ const handleClickOutside = (event) => {
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
// width: 932px;
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -430,11 +431,11 @@ const handleClickOutside = (event) => {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
|
||||
&:last-child {
|
||||
.separator-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// &:last-child {
|
||||
// .separator-line {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
&:nth-child(even) {
|
||||
margin: 12px 0;
|
||||
|
||||
@ -342,6 +342,7 @@ const handleClickOutside = (event) => {
|
||||
.page-container {
|
||||
width: 932px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
@ -429,11 +430,11 @@ const handleClickOutside = (event) => {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
|
||||
&:last-child {
|
||||
.separator-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// &:last-child {
|
||||
// .separator-line {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
&:nth-child(even) {
|
||||
margin: 4px 0;
|
||||
|
||||
@ -542,9 +542,9 @@ const downloadPdf = (url) => {
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
// &:last-child {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
}
|
||||
|
||||
.result-title {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -677,9 +677,9 @@ const getPageData = async () => {
|
||||
background: #fff8fb;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
// &:last-child {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
|
||||
&:nth-child(even) {
|
||||
margin: 4px 0;
|
||||
|
||||
@ -676,9 +676,9 @@ const getPageData = async () => {
|
||||
background: #fff8fb;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
// &:last-child {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
|
||||
&:nth-child(even) {
|
||||
margin: 4px 0;
|
||||
|
||||
@ -539,6 +539,7 @@ const handleClickOutside = (event) => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
@ -547,11 +548,11 @@ const handleClickOutside = (event) => {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
|
||||
&:last-child {
|
||||
.separator-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// &:last-child {
|
||||
// .separator-line {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -656,6 +657,7 @@ const handleClickOutside = (event) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
gap: 21px;
|
||||
}
|
||||
|
||||
@ -535,6 +535,7 @@ const handleClickOutside = (event) => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
@ -543,11 +544,11 @@ const handleClickOutside = (event) => {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
|
||||
&:last-child {
|
||||
.separator-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// &:last-child {
|
||||
// .separator-line {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
@ -3,7 +3,7 @@ import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
// import size375 from "./size375/index.vue";
|
||||
// import size768 from "./size768/index.vue";
|
||||
import size768 from "./size768/index.vue";
|
||||
import size1440 from "./size1440/index.vue";
|
||||
import size1920 from "./size1920/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
@ -0,0 +1,619 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<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 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 content creation,<br />
|
||||
publishing, analysis, and monetization
|
||||
</div>
|
||||
</div>
|
||||
<div class="core-value-card px-fixed">
|
||||
<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/1440/product-introduction-img2.png"
|
||||
alt="background"
|
||||
class="hero-bg-img"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="features-section px-fixed">
|
||||
<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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></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 px-fixed"></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 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="solutions-list">
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/1440/product-introduction-icon1.png"
|
||||
alt="KOL Brand Promotion"
|
||||
class="solution-icon"
|
||||
/>
|
||||
<div class="solution-title">
|
||||
<div class="vertical-line px-fixed"></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/1440/product-introduction-icon2.png"
|
||||
alt="Content Creation Support"
|
||||
class="solution-icon"
|
||||
/>
|
||||
<div class="solution-title">
|
||||
<div class="vertical-line px-fixed"></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/1440/product-introduction-icon3.png"
|
||||
alt="Account Operation"
|
||||
class="solution-icon"
|
||||
/>
|
||||
<div class="solution-title">
|
||||
<div class="vertical-line px-fixed"></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/1440/product-introduction-img1.png"
|
||||
alt="Value Added Solutions"
|
||||
class="solution-image"
|
||||
style="width: 434px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 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-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 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-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 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 px-fixed">
|
||||
<img
|
||||
src="@/assets/image/1440/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/1440/product-introduction-img6.png"
|
||||
alt="QR Code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
background-color: #fff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-section.px-fixed {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-image: url("@/assets/image/1440/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: -204px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.core-value-card.px-fixed {
|
||||
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: 32px;
|
||||
}
|
||||
|
||||
.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.px-fixed {
|
||||
padding-top: 200px;
|
||||
width: 932px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.features-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.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;
|
||||
text-align: justify;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
}
|
||||
|
||||
.solutions-section.px-fixed {
|
||||
padding-top: 80px;
|
||||
width: 932px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.solutions-content {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.solutions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
width: 466px;
|
||||
}
|
||||
.solution-item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.solution-description {
|
||||
align-self: stretch;
|
||||
color: #455363;
|
||||
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: 434px;
|
||||
border-radius: 16px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.solution-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.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.px-fixed {
|
||||
width: 932px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.advantages-header {
|
||||
width: 466px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.advantages-list {
|
||||
width: 466px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
.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;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.text-white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cta-section.px-fixed {
|
||||
padding: 60px 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: 355px;
|
||||
width: 530px;
|
||||
height: 268px;
|
||||
opacity: 0.8;
|
||||
z-index: 0;
|
||||
}
|
||||
.vertical-line.px-fixed {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: #ff7bac;
|
||||
flex-shrink: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.grid-lines.px-fixed {
|
||||
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: 310px;
|
||||
}
|
||||
.grid-lines .line-3 {
|
||||
left: 620px;
|
||||
}
|
||||
.grid-lines .line-4 {
|
||||
left: 930px;
|
||||
}
|
||||
.grid-lines .line-5 {
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user