toom1996/lanyu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
toom1996
2025-08-18 17:34:33 +08:00
parent 6dcea93eaa
commit 47b5625128
71 changed files with 2380 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/pre.css Normal file
View File

File diff suppressed because one or more lines are too long

14
src/assets/css/style.css Normal file
View File

File diff suppressed because one or more lines are too long

16
src/assets/css/vendor.bundle.css Normal file
View File

File diff suppressed because one or more lines are too long

1
src/assets/fonts/roboto/roboto-light-webfont.woff2 Normal file
View File

@ -0,0 +1 @@
No Content: https://v.bootstrapmb.com/2025/7/r6t016220/fonts/roboto/roboto-light-webfont.woff2

1
src/assets/fonts/roboto/roboto-medium-webfont.woff2 Normal file
View File

@ -0,0 +1 @@
No Content: https://v.bootstrapmb.com/2025/7/r6t016220/fonts/roboto/roboto-medium-webfont.woff2

1
src/assets/fonts/roboto/roboto-regular-webfont.woff2 Normal file
View File

@ -0,0 +1 @@
No Content: https://v.bootstrapmb.com/2025/7/r6t016220/fonts/roboto/roboto-regular-webfont.woff2

1
src/assets/fonts/themify.woff Normal file
View File

@ -0,0 +1 @@
No Content: https://v.bootstrapmb.com/2025/7/r6t016220/fonts/themify.woff?-fvbane

160
src/layouts/Layout.astro
View File

@ -1,14 +1,168 @@
---
import { getConfig } from '../../utils/config'
import '../assets/css/pre.css'
import '../assets/css/vendor.bundle.css'
import '../assets/css/style.css'
const config = getConfig(Astro)
const { isShowHeader = true } = Astro.props
const {
desc = '',
title = '',
keywords = '',
bytedance = ''
} = Astro.props
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="generator" content={Astro.generator} />
<title>Astro Basics</title>
<title>{title ? `${title} | 览屿官方网站` : `览屿官方网站`}</title>
<!-- site metas -->
<meta name="keywords" content={keywords}>
<meta name="description" content={desc}>
<link rel="icon" href="/logo.png" type="image/gif" sizes="16x16">
</head>
<body>
<body data-spy="scroll" data-target="#navbar" data-offset="70">
<!-- Preloader -->
<!-- <div id="preloader">
<div id="status">&nbsp;</div>
</div> -->
<!-- -->
<!-- header -->
<header>
<!-- navbar -->
<nav id="navbar" class="navbar navbar-custom navbar-fixed-top" data-spy="affix" data-offset-top="70">
<div class="container">
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
菜单
</button>
<a class="navbar-brand page-scroll logo-light" href="/">
<img alt="" src="/logo.png" width="30" height="30">
</a>
<a class="navbar-brand page-scroll logo-clr" href="/">
<img alt="" src="/logo.png" width="30" height="30">
</a>
<span class="img-pre" style="font-weight: bold;color:black;margin-left:.5rem">览屿</span>
</div>
<!-- Collect the nav links,forms,and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="right-nav text-right">
<ul class="nav navbar-nav menu">
<li>
<a href="/">首页</a>
</li>
<li>
<a href="/news">产品动态</a>
</li>
<li>
<a href="/about">关于我们</a>
</li>
<li>
<a href="/contact">联系我们</a>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
</nav>
<!-- End navbar -->
<!-- banner -->
<div class="hero bg-shape" style={isShowHeader ? '' : 'display:none'}>
<div class="hero-content">
<div class="container">
<div class="row">
<div class="row">
<div class="col-sm-5">
<div class="intro-text grad-orange">
<div class="meta-head clip-txt">览屿</div>
<h2>沉浸学习，大咖分享</h2>
<div class="spce"></div>
<p class="large">览屿是一款超实用的知识学习应用，堪称知识宝库！想提升自我的你别错过。它有丰富课程，生活学院讲传统智慧，国学学院授易经知识，书画学院教国画技巧 ，每周上新直播课，专业授课。</p>
<div class="btn-holder">
<a href="https://appgallery.huawei.com/app/C114689713" class="btn grdnt-orange">立即下载</a>
</div>
</div>
</div>
<div class="col-sm-7">
<div class="text-right img-pre">
<img alt="" src="image/img-1.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Banner -->
</header>
<!-- End header -->
<slot />
<footer class="footer-wrapper bg-gray pb-0 sec-pad">
<div class="container footer-content">
<div class="row">
<div class="row footer-widget">
<div class="col-md-3 col-sm-6 res-margin">
<a class="navbar-brand" href="index.html">
<img alt="" src="/logo.png" width="30" height="30">
</a>
<div class="spce"></div>
<p>7 * 24小时客服热线 <a href="tel:400-180-1950">400-180-1950</a></p>
</div>
<div class="col-md-2 col-sm-6 col-md-offset-1 res-margin">
<h6>产品</h6>
<div class="spce"></div>
<ul>
<li>
<a href="/news">产品动态</a>
</li>
</ul>
</div>
<div class="col-md-3 col-sm-6 res-margin">
<h6>支持</h6>
<div class="spce"></div>
<ul>
<li>
<a href="/contact">联系我们</a>
</li>
<li>
<a href="/about">关于我们</a>
</li>
</ul>
</div>
<div class="col-md-3 col-sm-6">
<h6>关注我们</h6>
<div class="spce"></div>
<ul>
<li>
<a href="https://author.baidu.com/home?from=bjh_article&app_id=1837340757389869"><img alt="" src="/baijiahao.svg" width="30" height="30"></a>
<a href="https://www.douyin.com/user/MS4wLjABAAAAVSHPmAfZaIHG2JkIDxz6ZsRnd8LyDjabi56FHGWnwF4?from_tab_name=main"><img alt="" src="/douyin.svg" width="30" height="30"></a>
</li>
</ul>
</div>
</div>
<div class="spce md"></div>
<div class="spce"></div>
<div class="copyright text-center">
Copyright © 2025 览屿
All Rights By <a href="https://www.bootstrapmb.com">览屿</a>
.
苏ICP备2024117037号-27 苏B2-20242110号
</div>
</div>
</div>
</footer>
<script is:inline src="/js/vendor.bundle.js"></script>
<script is:inline src="/js/script.js"></script>
</body>
</html>

40
src/middleware/index.ts Normal file
View File

@ -0,0 +1,40 @@
import { getHost } from "../../utils/host";
import { websiteConfig } from "../../utils/rpc";
export async function onRequest (context: any, next: any) {
console.log('middleware')
// 拦截一个请求里的数据
// 可选地修改 `locals` 中的属性
const host = await getHost(context.request);
console.log(host)
// if (host == 'www.zhishihuisheng.com' || host == 'zhishihuisheng.com') {
// return next();
// }
// 防止无线跳转
if (context.locals.is_write) {
return next();
}
if (!host) {
context.locals.is_write = 1;
return context.rewrite('/404');
}
const {code, data} = await websiteConfig(host);
if (!data || code !== 0) {
context.locals.is_write = 1;
return context.rewrite('/404');
}
if (!context.locals.is_write) {
context.locals.is_write = 1;
context.locals.template_config = data;
// return context.rewrite('/template/' + data.app_template + context.url.pathname);
}
return next();
};

356
src/pages/about.astro Normal file
View File

@ -0,0 +1,356 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout isShowHeader = {false}>
<div class="container-fluid" style="padding-top: 5rem;padding-bottom:2rem">
<div class="hero-content">
<!-- <span class="text-title aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">About Us</span> -->
<div class="hero-content-left">
<h1 class="text1 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="300">关于我们</h1>
<span class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">
淮安川界信息技术有限公司成立于2021年，我们是一家深植于互联网领域，专注于产品开发与创新的前沿企业。自成立以来，我们始终秉持着以技术为驱动，以用户为核心的发展理念，矢志不渝地致力于提供卓越的数字化解决方案。我们的使命不仅仅在于打造功能强大、安全可靠的互联网产品，更在于通过我们的专业能力和不懈努力，帮助客户实现业务的持续增长，推动其运营模式的高效升级，并创造更加人性化、便捷且富有吸引力的用户体验。
</span>
<span class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
在这个快速变化的数字时代，我们紧跟技术潮流，不断探索和应用最新的互联网技术，包括但不限于大数据、云计算、人工智能、物联网等，以创新驱动产品迭代和服务升级。我们的团队汇聚了来自不同背景的精英人才，他们拥有丰富的行业经验、深厚的技术功底和敏锐的创新思维，共同构成了我们强大的研发实力和竞争优势。
</span>
<span class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="600">
我们深知，每一个客户的需求都是独一无二的。因此，我们坚持提供定制化服务，从深入理解客户的业务场景和需求出发，量身定制最适合的数字化解决方案。无论是助力传统企业数字化转型，还是陪伴初创企业快速成长，我们都能够成为客户信赖的伙伴，携手共赴成功之路。
</span>
<span class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="700">
展望未来，我们将继续秉承开放、合作、共赢的态度，深化与各界伙伴的交流与合作，共同推动互联网行业的繁荣发展。同时，我们也将持续优化自身，不断提升技术创新能力和服务水平，为全球范围内的客户提供更加优质、高效、全面的数字化服务，共创美好未来。
</span>
</div>
<div class="hero-content-right">
<h2 class="text3 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="400">川界成长与发展</h2>
<p class="text4 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="300">多维发展空间</p>
<li class="text5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">提供不同类型、赛道、地域和文化的实战机会</li>
<p class="text4 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="300">高人才密度</p>
<li class="text5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">汇聚优秀人才，共同成长、相互激发</li>
<p class="text4 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="300">学习和培养</p>
<li class="text5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">提供开放的学习资源和针对性培训，不断自我提升</li>
</div>
</div>
</div>
</Layout>
<style>
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-webkit-scrollbar {
width: 0;
display: none;
}
.ac-more:hover {
cursor: pointer;
color: #5b63ff;
}
.hover-pointer:hover {
cursor: pointer;
}
.bg-light-pink {
background-color: #fcf2f0;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.hero-section-padding {
padding: 320px 0 220px;
}
@media only screen and (min-width: 1800px) and (max-width: 2600px) {
.hero-section-padding {
padding: 350px 0 200px;
height: 100vh;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
.hero-section-padding {
padding: 300px 0 143px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-section-padding {
padding: 300px 0 143px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-section-padding {
padding: 170px 0 140px;
}
}
@media only screen and (max-width: 767px) {
.hero-section-padding {
padding: 110px 0 70px;
}
}
/* 文案 */
.hero-content {
display: flex;
font-family: 'Proxima Nova Rg';
}
.hero-content .text-title {
color: #36299a;
font-size: 30px;
font-weight: bold;
}
/* left */
.hero-content .hero-content-left {
width: 34%;
display: flex;
flex-direction: column;
margin-left: 8%;
}
.hero-content .hero-content-left .text1 {
font-weight: bold;
font-size: 48px;
color: #000000;
font-family: 'Proxima Nova Rg';
line-height: 60px;
letter-spacing: 10px;
}
.hero-content .hero-content-left .text2 {
font-size: 15px;
color: #333333;
line-height: 25px;
margin-top: 30px;
}
/* right */
.hero-content .hero-content-right {
margin-left: 12%;
}
.hero-content .hero-content-right .text3 {
color: #36299a;
font-size: 30px;
font-weight: bold;
font-family: 'Proxima Nova Rg';
margin-bottom: 50px;
margin-top: 10px;
letter-spacing: 4px;
}
.hero-content .hero-content-right .text4 {
color: #36299a;
font-size: 17px;
font-weight: bold;
margin-top: 26px;
}
.hero-content .hero-content-right .text5 {
color: #333333;
font-size: 16px;
}
.body-dark-mode-wrap.dark-visible .hero-content .text-title {
color: #d1d1d1;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-left .text1 {
color: #ffffff;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-left .text2 {
color: #9b9b9b;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-right .text3 {
color: #ffffff;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-right .text4 {
color: #d1d1d1;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-right .text5 {
color: #9b9b9b;
}
@media only screen and (min-width: 1200px) and (max-width: 1370px) {
.hero-content .text-title {
font-size: 28px;
}
.hero-content .hero-content-left .text1 {
font-size: 44px;
line-height: 60px;
letter-spacing: 10px;
}
.hero-content .hero-content-left .text2 {
font-size: 13px;
line-height: 23px;
margin-top: 26px;
}
.hero-content .hero-content-right .text3 {
font-size: 28px;
margin-bottom: 50px;
margin-top: 8px;
letter-spacing: 2px;
}
.hero-content .hero-content-right .text4 {
font-size: 15px;
margin-top: 20px;
}
.hero-content .hero-content-right .text5 {
font-size: 14px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-content .text-title {
font-size: 26px;
}
.hero-content .hero-content-left .text1 {
font-size: 40px;
line-height: 50px;
letter-spacing: 8px;
}
.hero-content .hero-content-left .text2 {
font-size: 12px;
line-height: 22px;
margin-top: 22px;
}
.hero-content .hero-content-right .text3 {
font-size: 26px;
margin-bottom: 40px;
margin-top: 8px;
letter-spacing: 2px;
}
.hero-content .hero-content-right .text4 {
font-size: 14px;
margin-top: 16px;
}
.hero-content .hero-content-right .text5 {
font-size: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-content .text-title {
font-size: 20px;
}
.hero-content .hero-content-left .text1 {
font-size: 32px;
line-height: 42px;
letter-spacing: 7px;
}
.hero-content .hero-content-left .text2 {
font-size: 10px;
line-height: 18px;
margin-top: 16px;
}
.hero-content .hero-content-right .text3 {
font-size: 22px;
margin-bottom: 34px;
margin-top: 6px;
letter-spacing: 2px;
}
.hero-content .hero-content-right .text4 {
font-size: 12px;
margin-top: 14px;
line-height: 12px;
margin-bottom: 8px;
}
.hero-content .hero-content-right .text5 {
font-size: 10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero-content .text-title {
font-size: 14px;
}
.hero-content .hero-content-left .text1 {
font-size: 22px;
line-height: 34px;
letter-spacing: 6px;
}
.hero-content .hero-content-left .text2 {
font-size: 8px;
line-height: 16px;
margin-top: 10px;
}
.hero-content .hero-content-right .text3 {
font-size: 16px;
margin-bottom: 24px;
margin-top: 6px;
}
.hero-content .hero-content-right .text4 {
font-size: 10px;
margin-top: 10px;
line-height: 16px;
margin-bottom: 0;
}
.hero-content .hero-content-right .text5 {
font-size: 8px;
}
}
/* wap */
@media only screen and (max-width: 767px) {
.hero-content {
display: flex;
flex-direction: column;
padding: 30px 15px;
margin-bottom: 40px;
}
.hero-content .hero-content-left {
width: 100%;
display: flex;
flex-direction: column;
margin-left: 0;
}
/* right */
.hero-content .hero-content-right {
width: 100%;
margin-left: 0;
margin-top: 20px;
}
.hero-content .hero-content-right .text3 {
margin-bottom: 14px;
}
.hero-content .hero-content-right .text4 {
margin-top: 10px;
}
}
</style>

346
src/pages/contact.astro Normal file
View File

@ -0,0 +1,346 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout isShowHeader = {false}>
<div class="hero-section-padding section-padding-lr-1 bg-light-pink">
<div class="container-fluid">
<div class="hero-content">
<div class="hero-content-left">
<h1 class="text1 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="200">与我们保持联系</h1>
<span class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">江苏省淮安市淮安区平桥镇团结路253号</span>
<a class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="300" href="tel:400-180-1950">+400-180-1950</a>
<span class="text3 aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">
<a href="mailto:chuanjiexinxi@163.com">chuanjiexinxi@163.com</a>
</span>
</div>
<div class="hero-content-right">
<h2 class="text4 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="300">你可能遇到的问题</h2>
<span class="text5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">软件如何进行退费？</span>
<span class="text5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="600">你们的产品会不会收集个人信息？</span>
<span class="text5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="700">如何不在跳转产品？</span>
<div class="bott-b aos-init aos-animate" data-aos="fade-up" data-aos-delay="800">
<a href="tel:400-180-1950">联系我们</a>
</div>
</div>
</div>
</div>
</div>
</Layout>
<style>
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-webkit-scrollbar {
width: 0;
display: none;
}
.ac-more:hover {
cursor: pointer;
color: #5b63ff;
}
.hover-pointer:hover {
cursor: pointer;
}
.bg-light-pink {
/* background-color: #fcf2f0; */
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.hero-section-padding {
padding: 300px 0 230px;
}
@media only screen and (min-width: 1800px) and (max-width: 2600px) {
.hero-section-padding {
padding: 400px 0 500px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
.hero-section-padding {
padding: 300px 0 143px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-section-padding {
padding: 300px 0 143px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-section-padding {
padding: 170px 0 140px;
}
}
@media only screen and (max-width: 767px) {
.hero-section-padding {
padding: 110px 0 70px;
}
}
/* 文案 */
.hero-content {
display: flex;
font-family: "Proxima Nova Rg";
}
/* left */
.hero-content .hero-content-left {
width: 46%;
display: flex;
flex-direction: column;
margin-left: 4%;
}
.hero-content .hero-content-left .box-big {
display: flex;
margin-top: 40px;
}
.hero-content .hero-content-left .box-nu {
width: 50px;
height: 50px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
margin-right: 22px;
}
.hero-content .hero-content-left .box-2 {
background: #36299a;
}
.hero-content .hero-content-left .text1 {
color: #36299a;
font-size: 44px;
font-weight: bold;
font-family: "Proxima Nova Rg";
margin-bottom: 40px;
letter-spacing: 4px;
}
.hero-content .hero-content-left .text2 {
font-size: 18px;
color: #000000;
line-height: 40px;
}
.hero-content .hero-content-left .text3 {
margin-top: 20px;
}
.hero-content .hero-content-left .text3 a {
font-size: 26px;
font-weight: bold;
color: #f88341;
border-bottom: 1px solid #f88341;
}
/* right */
.hero-content .hero-content-right {
margin-left: 6%;
display: flex;
flex-direction: column;
}
.hero-content .hero-content-right .bott-b {
width: 180px;
height: 55px;
background: #f88341;
border-radius: 22px;
}
.hero-content .hero-content-right .bott-b a {
width: 100%;
height: 100%;
display: inline-block;
text-align: center;
line-height: 55px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
}
.hero-content .hero-content-right .text4 {
color: #36299a;
font-size: 44px;
font-weight: bold;
font-family: "Proxima Nova Rg";
margin-bottom: 40px;
letter-spacing: 4px;
}
.hero-content .hero-content-right .text5 {
color: #898989;
font-size: 16px;
border-bottom: 1px solid #e1e1e1;
margin-bottom: 50px;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-left .text1 {
color: #ffffff;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-left .text2 {
color: #9b9b9b;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-right .text4 {
color: #ffffff;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-right .text5 {
color: #9b9b9b;
}
@media only screen and (min-width: 1200px) and (max-width: 1370px) {
.hero-content .hero-content-left .text1 {
font-size: 44px;
line-height: 60px;
letter-spacing: 10px;
}
.hero-content .hero-content-left .text2 {
font-size: 13px;
line-height: 23px;
margin-top: 26px;
}
.hero-content .hero-content-right .text4 {
font-size: 28px;
margin-bottom: 50px;
margin-top: 8px;
letter-spacing: 2px;
}
.hero-content .hero-content-right .text5 {
font-size: 14px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-content .hero-content-left .text1 {
font-size: 40px;
line-height: 50px;
letter-spacing: 8px;
}
.hero-content .hero-content-left .text2 {
font-size: 12px;
line-height: 22px;
margin-top: 22px;
}
.hero-content .hero-content-right .text4 {
font-size: 26px;
margin-bottom: 40px;
margin-top: 8px;
letter-spacing: 2px;
}
.hero-content .hero-content-right .text5 {
font-size: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-content .hero-content-left .text1 {
font-size: 32px;
line-height: 42px;
letter-spacing: 7px;
}
.hero-content .hero-content-left .text2 {
font-size: 10px;
line-height: 18px;
margin-top: 16px;
}
.hero-content .hero-content-right .text4 {
font-size: 22px;
margin-bottom: 34px;
margin-top: 6px;
letter-spacing: 2px;
}
.hero-content .hero-content-right .text5 {
font-size: 10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hero-content .hero-content-left .text1 {
font-size: 22px;
line-height: 34px;
letter-spacing: 6px;
}
.hero-content .hero-content-left .text2 {
font-size: 8px;
line-height: 16px;
margin-top: 10px;
}
.hero-content .hero-content-right .text4 {
font-size: 16px;
margin-bottom: 24px;
margin-top: 6px;
}
.hero-content .hero-content-right .text5 {
font-size: 8px;
}
}
/* wap */
@media only screen and (max-width: 767px) {
.hero-content {
display: flex;
flex-direction: column;
padding: 60px 15px;
margin-bottom: 40px;
}
.hero-content .hero-content-left {
width: 100%;
display: flex;
flex-direction: column;
margin-left: 0;
}
.hero-content .hero-content-left .text1 {
font-size: 30px;
margin-bottom: 20px;
letter-spacing: 2px;
}
/* right */
.hero-content .hero-content-right {
width: 100%;
margin-left: 0;
margin-top: 20px;
}
.hero-content .hero-content-right .text4 {
margin-top: 30px;
font-size: 20px;
margin-bottom: 20px;
letter-spacing: 2px;
}
.hero-content .hero-content-right .text5 {
font-size: 14px;
border-bottom: 1px solid #e1e1e1;
margin-bottom: 30px;
}
}
</style>

237
src/pages/index.astro
View File

@ -1,11 +1,236 @@
---
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
import Layout from "../layouts/Layout.astro";
import { Image } from "astro:assets";
---
<Layout>
<Welcome />
<!--count -->
<section class="ft-drk bg-shape-after sec-pad-lg text-center light">
<div class="sec-pad-sm"></div>
<div class="container">
<div class="row">
<div class="text-center section-text wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
<h4>为什么选择我们</h4>
</div>
<div class="row ft-dark grad-orange pt-0">
<div class="col-md-10 col-md-offset-1">
<div class="col-sm-4 wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
<div class="item">
<div class="icon">
<img alt="" src="image/icon-4.png">
</div>
<h5 class="heading">4.5 分</h5>
<p>平均评分</p>
</div>
</div>
<div class="col-sm-4 wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
<div class="item">
<div class="icon">
<img alt="" src="image/icon-5.png">
</div>
<h4 class="heading">100000+</h4>
<p>应用商店总下载量</p>
</div>
</div>
<div class="col-sm-4 wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
<div class="item">
<div class="icon">
<img alt="" src="image/icon-6.png">
</div>
<h4 class="heading">10000+</h4>
<p>用户总数</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End -->
<!-- Tools -->
<section class="tools bg-grad-shad sec-pad-lg">
<div class="sec-pad-lg pb-0">
<div class="text-center section-text wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
<h4>我们的合作商</h4>
<div class="spce"></div>
<p class="large fx-wdth">支持各大手机厂商及主流软件。您可在各大应用商店下载。</p>
</div>
<div class="owl-carousel pb-0 tools-carousel wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
<div class="tools-item">
<!-- <Image src='huawei.svg' alt={`huawei`} width={100} /> -->
<img alt="" src="huawei.svg">
</div>
<div class="tools-item">
<img alt="" src="meizu.svg">
</div>
<div class="tools-item">
<img alt="" src="vivo.svg">
</div>
<div class="tools-item">
<img alt="" src="oppo.svg">
</div>
<div class="tools-item">
<img alt="" src="xiaomi.svg">
</div>
<div class="tools-item">
<img alt="" src="weibo.svg">
</div>
<div class="tools-item">
<img alt="" src="baijiahao.svg">
</div>
<div class="tools-item">
<img alt="" src="douyin.svg">
</div>
</div>
</div>
</section>
<!-- Overview -->
<section class="about-section" id="overview">
<div class="container">
<div class="row sec-pad pb-0">
<div class="col-md-10 col-md-offset-1">
<div class="flx-container res-center-sm align-flx-center flx-off-xs row">
<div class="col-sm-8 col-md-7 res-margin-sm">
<div class="overview-img wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
<img alt="" src="image/img-10.jpg">
</div>
</div>
<div class="col-sm-4 col-md-5">
<div class="overview-text wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
<div class="text">
<h4>名师讲书</h4>
<div class="spce"></div>
<p>名师带您走进书的世界，大咖引领您探索智慧的边界，一场不可错过的视听盛宴即将开启。</p>
<div class="spce sm"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row sec-pad pt-0">
<div class="col-md-10 col-md-offset-1">
<div class="flx-container res-center-sm align-flx-center flx-off-xs row">
<div class="col-sm-4 col-md-5 res-margin-sm">
<div class="overview-text wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
<div class="text">
<h4>授课专业，每周上新</h4>
<div class="spce"></div>
<p>精品直播呈现，权威师资授课，每周准时更新，为你持续输送优质内容。</p>
<div class="spce"></div>
<!-- <a href="#" class="btn grdnt-orange">Get It Now</a> -->
</div>
</div>
</div>
<div class="col-sm-8 col-md-7 res-margin-sm">
<div class="overview-img fr wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
<img alt="" src="image/img-11.png">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- // -->
<!-- FAQS-->
<section class="sec-pad-lg bg-dark light">
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="faq-wrapper row">
<div class="text-center section-text wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
<h4>常见问题</h4>
<div class="spce"></div>
<p class="large fx-wdth">为您整理了览屿app的常见问题，让您可以快速找到答案。</p>
</div>
<div class="row">
<div class="faq-items right-dir-col col-md-8">
<div class="col-sm-6 res-margin-sm wow fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
<div class="icon-bg-sm grdnt-orange">
<span class="clip-txt">?</span>
</div>
<div class="text">
<h5>如何下载安装?</h5>
<p>您可以在各大手机的应用商店进行下载安装。</p>
</div>
</div>
<div class="col-sm-6 wow fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
<div class="icon-bg-sm grdnt-orange">
<span class="clip-txt">?</span>
</div>
<div class="text">
<h5>软件免费吗?</h5>
<p>软件内有免费的课程供您学习，您也可以升级成会员解锁更多功能。</p>
</div>
</div>
<div class="spce lg"></div>
<div class="col-sm-6 res-margin-sm wow fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
<div class="icon-bg-sm grdnt-orange">
<span class="clip-txt">?</span>
</div>
<div class="text">
<h5>能否下载后无网络收听?</h5>
<p>软件支持下载后离线浏览。</p>
</div>
</div>
<div class="col-sm-6 wow fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
<div class="icon-bg-sm grdnt-orange">
<span class="clip-txt">?</span>
</div>
<div class="text">
<h5>关于会员</h5>
<p>关于会员的问题可以联系客服热线:400-180-1950。我们会有专门人员对您一对一解答。</p>
</div>
</div>
<div class="spce lg"></div>
<div class="col-sm-6 wow fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
<div class="icon-bg-sm grdnt-orange">
<span class="clip-txt">?</span>
</div>
<div class="text">
<h5>如何联系客服人员?</h5>
<p>您可以拨打我们的7 * 24小时客服热线:400-180-1950。</p>
</div>
</div>
<div class="col-sm-6 res-margin-sm wow fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
<div class="icon-bg-sm grdnt-orange">
<span class="clip-txt">?</span>
</div>
<div class="text">
<h5>是个什么平台?</h5>
<p>是一款非常好用的学习办公的软件,这款软件里面包含的非常多丰富的学习办公的软件,这里面的可以很好的满足更多用户的稀罕的,可以在这里面提升更多的学习的氛围的。</p>
</div>
</div>
</div>
<div class="img-pre col-md-4 wow fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".3s">
<img alt="" src="image/img-faq.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- -->
</Layout>
<style>
.overview-img {
max-width: 300px;
}
.fr {
float: right;
}
.tools-item img{
padding: 1.5rem;
}
.row {
margin-left: unset;
margin-right: unset;
}
</style>

223
src/pages/news.astro Normal file
View File

@ -0,0 +1,223 @@
---
import Layout from '../layouts/Layout.astro';
import { newsIndex } from '../../utils/rpc';
import { getConfig } from '../../utils/config';
// import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from '../../../../utils/const';
const config = getConfig(Astro)
const {code, data} = await newsIndex(config.id);
console.log(data)
---
<Layout
isShowHeader = {false}
>
<main class="v4 main page-news">
<div class="news-list-component">
<div class="container">
<div class="wrap wrap--small">
<div class="result-product">
<div class="result-product__items news-archive-items">
{
data.map(news => (
<a href={`/news/${news.id}`} title={news.title} class="result-product__item result-product__item--border">
<div class="result-product__content">
<span class="result-product__label">{news.created_at}</span>
<div class="heading result-product__title">{news.title}</div>
<p class="result-product__info">{news.description}</p>
</div>
<div class="result-product__media ">
<img class="result-product__image img-lazy show success-img" alt={news.title} src={news.cover} onerror="imgErrorUrl(this)" style="" />
</div>
</a>
))
}
</div>
</div>
</div>
</div>
</div>
</main>
</Layout>
<style>
.page-news {
background-color: #fff !important;
padding-top: 5rem;
.result-product__image {
border-radius: 16px;
}
.columns-name {
font-size: 5rem;
padding: 3rem;
}
@media only screen and (max-width: 767.98px) {
.columns-name {
font-size: 2rem;
padding: 1rem;
}
}
.result-product__media {
-webkit-box-flex: 0;
-webkit-flex: 0 0 260px;
-ms-flex: 0 0 260px;
flex: 0 0 260px;
max-width: 260px;
height: 173.3px;
position: relative
}
.result-product__image {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
border: 0;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: pointer
}
.result-product__item {
justify-content: space-between;
align-items: center;
}
.result-product__info {
font-size: 16px;
font-weight: 500;
color: #7f7f7f;
line-height: 1.5
}
.result-product__label {
font-size: 14px;
font-weight: 500;
color: #7f7f7f;
line-height: 1.71;
display: block;
margin-bottom: 8px
}
.result-product__title {
font-size: 22px;
font-weight: 700;
line-height: 1.45;
color: #000;
display: block;
margin-bottom: 8px;
max-height: 120px;
overflow: hidden
}
.result-product__item--border {
border-bottom: 1px solid #ededed
}
.result-product__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 32px 0
}
.result-product {
margin-bottom: 80px
}
.result-product:last-of-type {
margin-bottom: 0
}
.result-product__items {
display: block;
background-color: #fff
}
.result-product__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 32px 0
}
@media only screen and (min-width: 1200px) {
.no-touch .result-product__item:hover .result-product__title {
color:#7f7f7f
}
.no-touch .result-product__item:hover .result-product__image--thumb::before {
opacity: .5
}
}
@media screen and (max-width: 768px) {
.result-product__media {
-webkit-box-flex: 0;
-webkit-flex: 0 0 120px;
-ms-flex: 0 0 120px;
flex: 0 0 120px;
height: 90px;
background-color: unset
}
.result-product__info {
display: none;
}
.result-product__title {
font-size: 15px;
}
.result-product__content {
display: flex;
flex-direction: column-reverse;
}
}
.result-product__item--border {
border-bottom: 1px solid #ededed
}
.result-product__item-title {
font-size: 22px;
font-weight: 700;
line-height: 1.45;
color: #000;
display: block;
padding-bottom: 24px;
padding-top: 80px
}
.result-product__item-title--big {
font-size: 32px;
line-height: 1.25;
letter-spacing: -0.5px
}
.result-product__label {
font-size: 14px;
font-weight: 500;
color: #7f7f7f;
line-height: 1.71;
display: block;
margin-bottom: 8px
}
.result-product__content-text {
position: relative;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
max-width: 730px;
padding-right: 20px
}
}
</style>

336
src/pages/news/[...slug].astro Normal file
View File

@ -0,0 +1,336 @@
---
import Layout from '../../layouts/Layout.astro';
import { newsDetail } from '../../../utils/rpc';
import { getConfig } from '../../../utils/config';
// import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL } from '../../../../utils/const';
const { slug } = Astro.params;
const config = getConfig(Astro)
if (!slug) {
return Astro.redirect('/500');
}
const {code, data} = await newsDetail(slug, config);
if (!data || code !== 0) {
return Astro.redirect('/404');
}
// const breadcrumb = [{
// title: '主页',
// url: '/'
// }, {title: TP2_COLUMN_NEWS, url: TP2_COLUMN_NEWS_URL}, {title: data.title, url: 'javascript:void(0);'}]
---
<Layout isShowHeader = {false}>
<div>
<main class="news-main">
<div class="news-container">
<article class="news-detail-content">
<!-- <span class="news-date">发布于: {data.created_at}</span> -->
<h1 class="title" title="标题">{data.title}</h1>
<div class="top-icon"></div>
<div class="news-content" set:html={data.content}>
</div>
<div class="news-navigation">
{
data.prevNews && (
<div>
<span>上一篇: </span>
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
</div>
)
}
{
data.nextNews && (
<div>
<span>下一篇: </span>
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
</div>
)
}
</div>
</article>
<!-- <aside class="news-sidebar">
<div class="related-news">
<h3>相关新闻</h3>
<ul>
{data.about.map(item => (
<li>
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
<span class="related-title">{item.title}</span>
{/* <span class="related-date">{item.date}</span> */}
</a>
</li>
))}
</ul>
</div>
</aside> -->
</div>
</main>
</div>
<style is:inline>
.news-content p {
margin: 20px 0;
color: #6f6f6f;
font-size: 18px;
line-height: 32px;
}
.news-content img {
max-width: 100%;
height: auto;
}
</style>
<style>
main {
margin-top: 5rem;
}
article {
width: 50rem;
}
/* .news-main {
margin-top: 5rem;
} */
.top-icon {
padding-bottom: 30px;
border-bottom: 1px solid #e0e0e0
}
.news-date {
font-weight: 700;
font-size: 14px;
color: #d0021b;
line-height: 17px;
margin-bottom: 30px;
display: inline-block
}
.news-meta {
border-bottom: 1px solid var(--text-primary);
color: black;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.title {
font-size: 2.5rem;
text-align: left;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
line-height: 1.4;
}
.news-meta {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1.5rem;
}
.news-meta span{
color: var(--text-primary);
}
/* .news-date, .news-author {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
} */
.news-author a {
color: black;
text-decoration: none;
}
/*
.news-date::before {
content: '📅';
}
.news-author::before {
content: '👤';
} */
.news-tags {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.news-tag {
background: rgba(255, 255, 255, 0.15);
color: white;
padding: 0.3rem 1rem;
border-radius: var(--radius-md);
font-size: 0.9rem;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.news-tag:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.news-container {
/* max-width: 1200px; */
/* margin: -2rem auto 0; */
/* padding: 0 1.5rem 3rem; */
/* display: grid; */
/* grid-template-columns: 1fr 320px; */
/* gap: 2.5rem; */
position: relative;
display: flex;
justify-content: center;
}
.news-detail-content {
border-right: 1px solid var(--text-primary);
padding: 3rem;
position: relative;
overflow: hidden;
}
.news-content {
padding-top: 3rem;
font-size: 1.1rem;
line-height: 1.3;
}
.news-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.news-images img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: transform 0.3s ease;
}
.news-images img:hover {
transform: scale(1.02);
}
.news-content p {
margin-bottom: 1.8rem;
}
.news-content p:last-child {
margin-bottom: 0;
}
.news-navigation {
margin-top: 1rem;
padding-top: 2rem;
border-top: 1px solid var(--divider-color);
}
.news-sidebar {
position: sticky;
top: 2rem;
height: fit-content;
}
.related-news {
padding: 1rem;
/* box-shadow: var(--shadow-lg); */
}
.related-news h3 {
font-size: 1.2rem;
color: var(--text-primary);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--text-primary);
}
.related-news ul {
list-style: none;
padding: 0;
margin: 0;
}
.related-news li {
/* margin-bottom: 1.2rem;
padding-bottom: 1.2rem; */
border-bottom: 1px solid var(--divider-color);
}
.related-news li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.related-news a {
display: flex;
flex-direction: column;
gap: 0.5rem;
text-decoration: none;
/* color: var(--text-secondary); */
/* color: black; */
transition: all 0.3s ease;
padding: 0.4rem;
border-radius: var(--radius-md);
}
.related-news a:hover {
transform: translateX(5px);
}
.related-title {
font-size: 1rem;
line-height: 1.5;
}
.related-date {
font-size: 0.9rem;
color: var(--text-tertiary);
}
@media (max-width: 1024px) {
.news-container {
grid-template-columns: 1fr;
margin-top: -1rem;
}
.news-sidebar {
position: static;
}
}
@media (max-width: 480px) {
.news-detail-content {
padding: 1.5rem;
border: none;
}
.news-share {
flex-wrap: wrap;
gap: 0.8rem;
}
.share-btn {
width: 100%;
text-align: center;
}
}
</style>
</Layout>