feat:调整一下
This commit is contained in:
fangyunong
parent
1177bdb0be
commit
02ea680fac
11
pnpm-lock.yaml
generated
11
pnpm-lock.yaml
generated
@ -397,67 +397,56 @@ packages:
|
||||
resolution: {integrity: sha512-n0edDmSHlXFhrlmTK7XBuwKlG5MbS7yleS1cQ9nn4kIeW+dJH+ExqNgQ0RrFRew8Y+0V/x6C5IjsHrJmiHtkxQ==}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@rollup/rollup-linux-arm-musleabihf@4.44.1':
|
||||
resolution: {integrity: sha512-8WVUPy3FtAsKSpyk21kV52HCxB+me6YkbkFHATzC2Yd3yuqHwy2lbFL4alJOLXKljoRw08Zk8/xEj89cLQ/4Nw==}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@rollup/rollup-linux-arm64-gnu@4.44.1':
|
||||
resolution: {integrity: sha512-yuktAOaeOgorWDeFJggjuCkMGeITfqvPgkIXhDqsfKX8J3jGyxdDZgBV/2kj/2DyPaLiX6bPdjJDTu9RB8lUPQ==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@rollup/rollup-linux-arm64-musl@4.44.1':
|
||||
resolution: {integrity: sha512-W+GBM4ifET1Plw8pdVaecwUgxmiH23CfAUj32u8knq0JPFyK4weRy6H7ooxYFD19YxBulL0Ktsflg5XS7+7u9g==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@rollup/rollup-linux-loongarch64-gnu@4.44.1':
|
||||
resolution: {integrity: sha512-1zqnUEMWp9WrGVuVak6jWTl4fEtrVKfZY7CvcBmUUpxAJ7WcSowPSAWIKa/0o5mBL/Ij50SIf9tuirGx63Ovew==}
|
||||
cpu: [loong64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@rollup/rollup-linux-powerpc64le-gnu@4.44.1':
|
||||
resolution: {integrity: sha512-Rl3JKaRu0LHIx7ExBAAnf0JcOQetQffaw34T8vLlg9b1IhzcBgaIdnvEbbsZq9uZp3uAH+JkHd20Nwn0h9zPjA==}
|
||||
cpu: [ppc64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@rollup/rollup-linux-riscv64-gnu@4.44.1':
|
||||
resolution: {integrity: sha512-j5akelU3snyL6K3N/iX7otLBIl347fGwmd95U5gS/7z6T4ftK288jKq3A5lcFKcx7wwzb5rgNvAg3ZbV4BqUSw==}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@rollup/rollup-linux-riscv64-musl@4.44.1':
|
||||
resolution: {integrity: sha512-ppn5llVGgrZw7yxbIm8TTvtj1EoPgYUAbfw0uDjIOzzoqlZlZrLJ/KuiE7uf5EpTpCTrNt1EdtzF0naMm0wGYg==}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@rollup/rollup-linux-s390x-gnu@4.44.1':
|
||||
resolution: {integrity: sha512-Hu6hEdix0oxtUma99jSP7xbvjkUM/ycke/AQQ4EC5g7jNRLLIwjcNwaUy95ZKBJJwg1ZowsclNnjYqzN4zwkAw==}
|
||||
cpu: [s390x]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@rollup/rollup-linux-x64-gnu@4.44.1':
|
||||
resolution: {integrity: sha512-EtnsrmZGomz9WxK1bR5079zee3+7a+AdFlghyd6VbAjgRJDbTANJ9dcPIPAi76uG05micpEL+gPGmAKYTschQw==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@rollup/rollup-linux-x64-musl@4.44.1':
|
||||
resolution: {integrity: sha512-iAS4p+J1az6Usn0f8xhgL4PaU878KEtutP4hqw52I4IO6AGoyOkHCxcc4bqufv1tQLdDWFx8lR9YlwxKuv3/3g==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@rollup/rollup-win32-arm64-msvc@4.44.1':
|
||||
resolution: {integrity: sha512-NtSJVKcXwcqozOl+FwI41OH3OApDyLk3kqTJgx8+gp6On9ZEt5mYhIsKNPGuaZr3p9T6NWPKGU/03Vw4CNU9qg==}
|
||||
|
||||
BIN
src/assets/images/luolan_avatar.jpg
Normal file
BIN
src/assets/images/luolan_avatar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
14
src/store/app.ts
Normal file
14
src/store/app.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useAppStore = defineStore('User', () => {
|
||||
|
||||
//左侧菜单相关
|
||||
const menuApp = reactive({
|
||||
isExpaned:true, //
|
||||
});
|
||||
return {
|
||||
menuApp
|
||||
}
|
||||
},
|
||||
{ persist: true }
|
||||
)
|
||||
@ -1,8 +1,130 @@
|
||||
<template>
|
||||
<div>首页</div>
|
||||
<n-layout>
|
||||
<n-layout-header>颐和园路</n-layout-header>
|
||||
<n-layout content-class="layout__main" has-sider>
|
||||
<n-menu :collapsed="!menuApp.isExpaned" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions"
|
||||
:render-label="renderMenuLabel" :render-icon="renderMenuIcon" :expand-icon="expandIcon" />
|
||||
<n-layout-content content-style="padding: 24px;">
|
||||
<RouterView></RouterView>
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { BookmarkOutline, CaretDownOutline } from '@vicons/ionicons5';
|
||||
import { MenuOption, NIcon } from 'naive-ui';
|
||||
import { useAppStore } from '@/store/app';
|
||||
import { storeToRefs } from 'pinia';
|
||||
const appStore = useAppStore();
|
||||
const { menuApp } = storeToRefs(appStore)
|
||||
const expandIcon = () => {
|
||||
return h(NIcon, null, { default: () => h(CaretDownOutline) })
|
||||
}
|
||||
const renderMenuIcon = (option: MenuOption) => {
|
||||
// 渲染图标占位符以保持缩进
|
||||
if (option.key === 'sheep-man')
|
||||
return true
|
||||
// 返回 falsy 值，不再渲染图标及占位符
|
||||
if (option.key === 'food')
|
||||
return null
|
||||
return h(NIcon, null, { default: () => h(BookmarkOutline) })
|
||||
}
|
||||
const menuOptions: MenuOption[] = [
|
||||
{
|
||||
label: '且听风吟',
|
||||
key: 'hear-the-wind-sing',
|
||||
href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199'
|
||||
},
|
||||
{
|
||||
label: '1973年的弹珠玩具',
|
||||
key: 'pinball-1973',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: '鼠',
|
||||
key: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '寻羊冒险记',
|
||||
key: 'a-wild-sheep-chase',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '舞，舞，舞',
|
||||
key: 'dance-dance-dance',
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
label: '人物',
|
||||
key: 'people',
|
||||
children: [
|
||||
{
|
||||
label: '叙事者',
|
||||
key: 'narrator'
|
||||
},
|
||||
{
|
||||
label: '羊男',
|
||||
key: 'sheep-man'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '饮品',
|
||||
key: 'beverage',
|
||||
children: [
|
||||
{
|
||||
label: '威士忌',
|
||||
key: 'whisky',
|
||||
href: 'https://baike.baidu.com/item/%E5%A8%81%E5%A3%AB%E5%BF%8C%E9%85%92/2959816?fromtitle=%E5%A8%81%E5%A3%AB%E5%BF%8C&fromid=573&fr=aladdin'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '食物',
|
||||
key: 'food',
|
||||
children: [
|
||||
{
|
||||
label: '三明治',
|
||||
key: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '过去增多，未来减少',
|
||||
key: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const renderMenuLabel = (option: MenuOption) => {
|
||||
if ('href' in option) {
|
||||
return h(
|
||||
'a',
|
||||
{ href: option.href, target: '_blank' },
|
||||
option.label as string
|
||||
)
|
||||
}
|
||||
return option.label as string
|
||||
}
|
||||
// icon
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.n-layout-header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.n-layout-sider {
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.n-layout-content {
|
||||
background: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
.layout__main{
|
||||
height:calc(100vh - 60px);
|
||||
}
|
||||
</style>
|
||||
@ -1,228 +1,646 @@
|
||||
<template>
|
||||
<div class="deepseek-home">
|
||||
<header class="deepseek-home__header">
|
||||
<div class="deepseek-home__logo">
|
||||
<span class="deepseek-home__logo-text">ZeroNode</span>
|
||||
<span class="deepseek-home__logo-beta">零枢</span>
|
||||
<div class="zn-home">
|
||||
<!-- 导航栏 -->
|
||||
<header class="zn-header">
|
||||
<div class="zn-header__content">
|
||||
<div class="zn-logo">
|
||||
<span class="zn-logo__text">ZeroNode</span>
|
||||
<span class="zn-logo__tag">零枢 · 数字化管理平台</span>
|
||||
</div>
|
||||
<div class="deepseek-home__actions">
|
||||
<n-button type="primary" @click="handleLogin">登录</n-button>
|
||||
<n-button @click="handleLogout">注册</n-button>
|
||||
<nav class="zn-nav">
|
||||
<a href="#" class="zn-nav__link">产品功能</a>
|
||||
<a href="#" class="zn-nav__link">解决方案</a>
|
||||
<a href="#" class="zn-nav__link">客户案例</a>
|
||||
<div class="zn-actions">
|
||||
<n-button ghost @click="handleLogin">登录</n-button>
|
||||
<n-button type="primary" @click="handleContact">联系我们</n-button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="deepseek-home__main">
|
||||
<section class="deepseek-home__hero">
|
||||
<h1 class="deepseek-home__title">科技赋能数字化管理</h1>
|
||||
<p class="deepseek-home__subtitle">先进的陪玩管理系统，为您提供智能陪玩店体验</p>
|
||||
<!-- 主要内容 -->
|
||||
<main class="zn-main">
|
||||
<!-- 英雄区域 -->
|
||||
<section class="zn-hero">
|
||||
<div class="zn-hero__content">
|
||||
<h1 class="zn-hero__title">
|
||||
科技赋能 <span class="highlight">第五人格</span> 陪玩产业链
|
||||
</h1>
|
||||
<p class="zn-hero__subtitle">
|
||||
基于.NET9 + Vue3的智能管理系统，为您提供全方位的数字化解决方案
|
||||
</p>
|
||||
<div class="zn-hero__cta">
|
||||
<n-button type="primary" size="large" @click="handleLogin">
|
||||
立即体验
|
||||
</n-button>
|
||||
<n-button size="large" @click="handleDemo">
|
||||
观看演示
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="zn-hero__stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">100+</div>
|
||||
<div class="stat-label">合作陪玩店</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">99.9%</div>
|
||||
<div class="stat-label">覆盖需求</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">10+</div>
|
||||
<div class="stat-label">开发人员</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zn-hero__illustration">
|
||||
<img src="/public/logo.jpg" alt="系统预览" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="deepseek-home__features">
|
||||
<div class="deepseek-home__feature">
|
||||
<div class="deepseek-home__feature-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M12 3L1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z" />
|
||||
</svg>
|
||||
<!-- 特性展示 -->
|
||||
<section class="zn-features">
|
||||
<div class="zn-section-header">
|
||||
<h2>为什么选择 ZeroNode</h2>
|
||||
<p>专为第五人格陪玩产业设计的全方位解决方案</p>
|
||||
</div>
|
||||
<h3 class="deepseek-home__feature-title">稳定系统</h3>
|
||||
<p class="deepseek-home__feature-desc">基于.NET9 + Vue3研发，提供更稳定的系统体验。</p>
|
||||
<div class="zn-features__grid">
|
||||
<div class="zn-feature-card">
|
||||
<div class="feature-icon">
|
||||
<n-icon color="#3d8eff">
|
||||
<GitCompare />
|
||||
</n-icon>
|
||||
</div>
|
||||
<div class="deepseek-home__feature">
|
||||
<div class="deepseek-home__feature-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 15c1.66 0 3-1.34 3-3V6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 15.22 14.47 17 12 17s-4.52-1.78-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V21c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z" />
|
||||
</svg>
|
||||
<h3>高效运营</h3>
|
||||
<p>自动化订单处理、智能排班系统，提升店铺运营效率30%以上</p>
|
||||
<a href="#" class="feature-link">了解更多 →</a>
|
||||
</div>
|
||||
<div class="zn-feature-card highlight">
|
||||
<div class="feature-icon">
|
||||
<n-icon color="#fff">
|
||||
<BarChartSharp />
|
||||
</n-icon>
|
||||
</div>
|
||||
<h3>数据洞察</h3>
|
||||
<p class="highlight">实时数据分析仪表盘，帮助您做出更明智的商业决策</p>
|
||||
<a href="#" class="feature-link">了解更多 →</a>
|
||||
</div>
|
||||
<div class="zn-feature-card">
|
||||
<div class="feature-icon">
|
||||
<n-icon color="#3d8eff">
|
||||
<Server />
|
||||
</n-icon>
|
||||
</div>
|
||||
<h3>安全可靠</h3>
|
||||
<p>银行级数据加密，多重备份保障，确保您的数据万无一失</p>
|
||||
<a href="#" class="feature-link">了解更多 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 客户评价 -->
|
||||
<section class="zn-testimonials">
|
||||
<div class="zn-section-header">
|
||||
<h2>客户评价</h2>
|
||||
<p>听听他们怎么说</p>
|
||||
</div>
|
||||
<div class="zn-testimonials__slider">
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-content">
|
||||
"这个平台专注于服务玩家和陪玩双方，提供了一个安全有保障、匹配效率高的新空间。在这里，用户（无论是玩家还是陪玩）都能更快捷地实现各自的目标，获得满意的体验。"
|
||||
</div>
|
||||
<div class="testimonial-author">
|
||||
<img src="@/assets/images/luolan_avatar.jpg" alt="罗经理" />
|
||||
<div>
|
||||
<div class="author-name">罗经理</div>
|
||||
<div class="author-title">ASG陪玩店 运营总监</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-content">
|
||||
"ZeroNode系统彻底改变了我们的管理方式，订单处理速度提升了50%，代理满意度也大幅提高，陪玩更乐意于在我们团工作了。"
|
||||
</div>
|
||||
<div class="testimonial-author">
|
||||
<img src="@/assets/images/luolan_avatar.jpg" alt="落梨" />
|
||||
<div>
|
||||
<div class="author-name">落店长</div>
|
||||
<div class="author-title">巅峰电竞 创始人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-content">
|
||||
"灵枢系统专门为第五人格陪玩打造，一条龙流程极速成单，科技赋能，将陪玩产业推向巅峰。"
|
||||
</div>
|
||||
<div class="testimonial-author">
|
||||
<img src="@/assets/images/luolan_avatar.jpg" alt="杨某人" />
|
||||
<div>
|
||||
<div class="author-name">杨嚣张</div>
|
||||
<div class="author-title">X电竞 校长</div>
|
||||
</div>
|
||||
<h3 class="deepseek-home__feature-title">科技赋能</h3>
|
||||
<p class="deepseek-home__feature-desc">实施动态数据抓取，为您带来更高效的数据管理。</p>
|
||||
</div>
|
||||
<div class="deepseek-home__feature">
|
||||
<div class="deepseek-home__feature-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="deepseek-home__feature-title">融创集群</h3>
|
||||
<p class="deepseek-home__feature-desc">将系统产品与第五人格陪玩产业融合，打造数字化集群统一平台。</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="deepseek-home__footer">
|
||||
<div class="deepseek-home__footer-content">
|
||||
<div class="deepseek-home__footer-links">
|
||||
<a href="#" class="deepseek-home__footer-link">使用条款</a>
|
||||
<a href="#" class="deepseek-home__footer-link">隐私政策</a>
|
||||
<a href="#" class="deepseek-home__footer-link">联系我们</a>
|
||||
<!-- 页脚 -->
|
||||
<footer class="zn-footer">
|
||||
<div class="zn-footer__content">
|
||||
<div class="zn-footer__main">
|
||||
<div class="footer-col">
|
||||
<h4>产品</h4>
|
||||
<a href="#">功能特性</a>
|
||||
<a href="#">定价</a>
|
||||
<a href="#">更新日志</a>
|
||||
<a href="#">路线图</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>资源</h4>
|
||||
<a href="#">文档中心</a>
|
||||
<a href="#">API接口</a>
|
||||
<a href="#">帮助中心</a>
|
||||
<a href="#">社区论坛</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>公司</h4>
|
||||
<a href="#">关于我们</a>
|
||||
<a href="#">加入我们</a>
|
||||
<a href="#">媒体报道</a>
|
||||
<a href="#">联系方式</a>
|
||||
</div>
|
||||
<div class="footer-col newsletter">
|
||||
<h4>订阅电子报</h4>
|
||||
<p>获取最新产品动态和行业洞察</p>
|
||||
<n-input placeholder="您的邮箱地址" round>
|
||||
<template #suffix>
|
||||
<n-button type="primary" size="small" circle>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<ChevronForward />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
</n-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deepseek-home__footer-copyright">
|
||||
<div class="zn-footer__bottom">
|
||||
<div class="copyright">
|
||||
© 2025 AvengerS Gaming. All rights reserved.
|
||||
</div>
|
||||
<div class="social-links">
|
||||
<a href="#"><i class="icon-wechat"></i></a>
|
||||
<a href="#"><i class="icon-weibo"></i></a>
|
||||
<a href="#"><i class="icon-bilibili"></i></a>
|
||||
<a href="#"><i class="icon-qq"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ChevronForward, GitCompare, BarChartSharp, Server } from '@vicons/ionicons5';
|
||||
import { useAuth0 } from '@auth0/auth0-vue';
|
||||
import { useDialog } from 'naive-ui';
|
||||
const dialog = useDialog();
|
||||
const handleDemo = () => {
|
||||
console.log('观看演示');
|
||||
}
|
||||
|
||||
const { loginWithRedirect, logout } = useAuth0();
|
||||
const handleLogin = () => {
|
||||
loginWithRedirect();
|
||||
}
|
||||
// 登出
|
||||
const handleLogout = () => {
|
||||
logout({ logoutParams: { returnTo: window.location.origin } });
|
||||
}
|
||||
// 联系我们
|
||||
const handleContact = () => {
|
||||
dialog.warning({
|
||||
title: '联系方式',
|
||||
content: () => '微信：king1632739220'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.deepseek-home {
|
||||
.zn-home {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #f9fafc;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&__header {
|
||||
/* 导航栏样式 */
|
||||
.zn-header {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
||||
&__content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
.zn-logo {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
|
||||
&-text {
|
||||
color: $primaryColor;
|
||||
&__text {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #3d8eff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-beta {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
&__tag {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
&__main {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
&__hero {
|
||||
max-width: 800px;
|
||||
margin: 3rem auto;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
&__features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
max-width: 1000px;
|
||||
margin: 5rem auto;
|
||||
}
|
||||
|
||||
&__feature {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 1.5rem;
|
||||
background-color: rgba(61, 142, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
.zn-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $primaryColor;
|
||||
gap: 32px;
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
background-color: #f8f8f8;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__footer-content {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
&__footer-links {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
&__footer-link {
|
||||
color: #666;
|
||||
&__link {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: $primaryColor;
|
||||
color: #3d8eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer-copyright {
|
||||
color: #999;
|
||||
font-size: 0.9rem;
|
||||
.zn-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 英雄区域样式 */
|
||||
.zn-hero {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__illustration {
|
||||
flex: 1;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 40px rgba(61, 142, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.highlight {
|
||||
color: #3d8eff;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
margin-bottom: 32px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
|
||||
.stat-item {
|
||||
.stat-number {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #3d8eff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 特性区域样式 */
|
||||
.zn-features {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 24px;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
|
||||
margin-top: -40px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zn-section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
.zn-features__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.zn-feature-card {
|
||||
padding: 32px;
|
||||
border-radius: 12px;
|
||||
background-color: #f9fafc;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.highlight {
|
||||
background: linear-gradient(135deg, #3d8eff, #6a5acd);
|
||||
color: #fff;
|
||||
|
||||
.feature-link {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(61, 142, 255, 0.15);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
margin: 20px 0 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
|
||||
&.highlight {
|
||||
color: #DDD;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: rgba(61, 142, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3d8eff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.feature-link {
|
||||
color: #3d8eff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 客户评价样式 */
|
||||
.zn-testimonials {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 24px;
|
||||
|
||||
.zn-section-header {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.zn-testimonials__slider {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
min-width: 400px;
|
||||
padding: 32px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.testimonial-content {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #555;
|
||||
margin-bottom: 24px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.author-title {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
.zn-footer {
|
||||
background-color: #1a2b4a;
|
||||
color: #fff;
|
||||
margin-top: 80px;
|
||||
|
||||
&__content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 24px 0;
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 40px;
|
||||
padding-bottom: 60px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none;
|
||||
margin-bottom: 12px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #3d8eff;
|
||||
}
|
||||
}
|
||||
|
||||
&.newsletter {
|
||||
p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
|
||||
.copyright {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 20px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #3d8eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 992px) {
|
||||
.zn-hero {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
|
||||
&__subtitle {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.zn-features__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.zn-footer__main {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.zn-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zn-hero__title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.zn-footer__main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.zn-footer__bottom {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user