Files
lanyu/src/pages/index.astro
toom1996 47b5625128 update
2025-08-18 17:34:33 +08:00

236 lines
8.2 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
import Layout from "../layouts/Layout.astro";
import { Image } from "astro:assets";
---
<Layout>
<!--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>