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

update

Browse Source
This commit is contained in:
toom1996
2025-07-02 16:32:48 +08:00
parent 945bb01109
commit be3b82a10a
42 changed files with 13608 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

422
src/pages/template/2/index.astro Normal file
View File

@ -0,0 +1,422 @@
---
import "swiper/swiper-bundle.css";
import Layout from "../../../layouts/Layout_2.astro";
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
import { Image } from 'astro:assets';
import { getConfig, getExtra } from "../../../../utils/config";
const config = getConfig(Astro)
const extra = getExtra().index
const sc1Homepage = config?.extra?.sc1?.img_homepage || '/template_2/index/homepage.webp'
// swiper 数据
const swiper = extra.sc3.swiper;
console.log(extra)
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-chenai.webp'
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-daming.webp'
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-fancui.webp'
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-qiren.webp'
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-wenhua.webp'
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-yuanze.webp'
// const sc2BookCover = config?.extra?.index?.sc2?.book1 || '/template_2/index/book-cover-zero.webp'
const breadcrumb = [{
title: '主页',
url: '/'
}]
---
<Layout title={`${config.app_name}`} breadcrumb={breadcrumb} description={config.app_description} keywords={config.app_keywords}>
<div class="v4 header-placeholder nav-v2" id="header-placeholder"></div>
<main class="content-v4">
<div>
<div class="second-navigation section"></div>
<div class="section">
<div class="new"></div>
</div>
<div class="iparys_inherited">
<div class="eumiSecondMenuV4 iparsys parsys"></div>
</div>
</div>
<div class="html-text-component parbase">
<div class="v4 n06-news-second-navigation" id="news-second-navigation-v4" data-component="n06-news-second-navigation">
<div class="product-tabs-wrap container">
<div class="product-tabs__heading">
<div class="product-tabs__title body-medium">
<a title={config.app_name} href="/" class="product-link product-link__active" data-title="华为阅读">{config.app_name}</a>
<a class="btn erweimaBTN a-btn-install-ga" href="https://appgallery.huawei.com/#/app/C100259315" target="_blank">点击下载
<ImageXiazai style="margin-left:10px;width: 11px;height: 11px;" alt="下载按钮" />
</a>
</div>
<div class="product-tabs__links-container" style="margin-right: -20px;">
<ul class="product-tabs__links">
<li class="product-tabs__links-item">
<a class="btn erweimaBTN a-btn-install-ga" href="https://appgallery.huawei.com/#/app/C100259315" style="position: relative;">
点击下载<ImageXiazai style="margin-left:10px;width: 11px;height: 11px;" alt="下载按钮" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="app-read-container">
<div class="app-read-sc1-kv">
<div class="sc1-mkt-text">
<h1>{config.app_name}</h1>
<h1 class="mkt-title">遇见更好的自己</h1>
<p class="mkt-text">
百万优质图书和精品有声内容；精巧微动效、精美排版，媲美精装纸质书；精品音色、定制人声，享受沉浸悦听；超
50
种语言一键翻译；跨设备流转，无缝续读；丰富的会员权益，各种福利活动持续<span class="text-nowrap">上新。</span>
</p>
</div>
<div class="sc1-mkt-img">
<Image style="height:100%;width:100%" src={sc1Homepage} alt="app首页" width={100} height={100} loading="eager"/>
</div>
</div>
<div class="app-read-sc2">
<div class="text-box">
<div class="read-title">
{extra.sc2.reaad_title}
</div>
<p class="read-text">
{extra.sc2.reaad_text}
</p>
</div>
<div class="sc2-swiper-box">
<div class="swiper-wrapper sc2-swiper-container">
{
extra.sc3.swiper.map(item => {
return <div class="sc2-swiper-silde swiper-slide">
<Image class="h-auto" src={item.url} height={100} width={100} alt={`${item.name}封面`}/>
<span class="book-name">{item.name}</span>
</div>
})
}
</div>
</div>
</div>
<div class="app-read-sc5" id="sc5Scene">
<div class="sc5-animation-box">
<div class="sc5-book-container img-box" id="sc5ZdpScene">
<Image class="h-full" src={extra.sc5.img_box} alt="背景" width={100} height={100} />
</div>
<div class="text-box">
<div class="read-subtitle">
{extra.sc5.read_subtitle}
</div>
<div class="read-title">
{extra.sc5.read_title}
</div>
<p class="read-text">
<Fragment set:html={extra.sc5.read_text}></Fragment>
</p>
</div>
</div>
</div>
<div class="app-read-sc6" id="sc6Scene">
<div class="sc6-animation-container">
<div class="text-box">
<div class="read-title">
{extra.sc6.read_title}
</div>
<p class="read-text">
<Fragment set:html={extra.sc6.read_text} />
</p>
</div>
<div class="sc6-animation-box img-box" id="sc6ZdpScene">
<Image src={extra.sc6.img_box} class="h-full" alt="" width={100} height={100}/>
</div>
</div>
</div>
<div class="app-read-sc7">
<div class="text-box">
<div class="read-title">
{extra.sc7.read_title}
</div>
<p class="read-text">
<Fragment set:html={extra.sc7.read_text}>
</p>
</div>
<div class="sc7-img-box">
<Image class="h-auto" src={extra.sc7.img_box} alt="背景图" width={100} height={100} />
</div>
</div>
<div class="app-read-sc8">
<Image class="h-full" src={extra.sc8.img_box} alt="背景" height={100} width={100}/>
<div class="sc8-content-wrapper">
<div class="text-box">
<div class="read-title">
{extra.sc8.read_title}
</div>
</div>
<div class="icon-container">
<div class="icon-warpper1"></div>
<div class="icon-warpper2">
<div class="icon-top">
<div class="icon-item">
<Image class="h-full" src={extra.sc8.icon1} alt="icon" height={100} width={100} />
<span class="icon-desc">{extra.sc8.icon1_text}</span>
</div>
<div class="icon-item">
<Image class="h-full" src={extra.sc8.icon2} alt="icon" height={100} width={100} />
<span class="icon-desc">{extra.sc8.icon2_text}</span>
</div>
</div>
<div class="icon-center">
<div class="icon-item icon-item2">
<Image class="h-full" src={extra.sc8.icon3} alt="icon" height={100} width={100} />
<span class="icon-desc">{extra.sc8.icon3_text}</span>
</div>
</div>
<div class="icon-bottom">
<div class="icon-item">
<Image class="h-full" src={extra.sc8.icon4} alt="icon" height={100} width={100} />
<span class="icon-desc">{extra.sc8.icon4_text}</span>
</div>
<div class="icon-item">
<Image class="h-full" src={extra.sc8.icon5} alt="icon" height={100} width={100} />
<span class="icon-desc">{extra.sc8.icon5_text}</span>
</div>
</div>
</div>
</div>
</div>
<p class="read-ps">
*具体以实际体验<span class="text-nowrap">为准</span>
</p>
</div>
</div>
</div>
</main>
</Layout>
<style>
.sc2-swiper-box {
img {
height: 100%;
}
}
main {
padding: unset;
max-width: unset;
}
.app-read-sc5{
margin-top: 2rem;
}
.header-tag-title.seo {
position: absolute;
display: block;
height: 0;
width: 0;
overflow: hidden;
z-index: -1;
}
/*five page common css*/
.img_pc {
display: inline-block;
}
.img_sp {
display: none;
}
.top_center {
max-width: 1100px;
width: 100%;
overflow: hidden;
margin: 0 auto;
padding-top: 70px;
}
.common_left {
float: left;
width: 50%;
}
.common_right {
float: right;
}
.common_btn a {
display: inline-block;
border: 1px solid #1681fb;
border-radius: 8px;
text-align: center;
padding: 10px 40px;
font-size: 18px;
color: #1681fb;
text-decoration-line: none;
}
.index_common {
padding-top: 80px;
text-align: center;
height: 700px;
}
.boutique {
height: 640px;
}
@media screen and (min-width: 1024px) {
.v4.n06-news-second-navigation .product-tabs__title .btn {
display: none !important;
}
}
@media (max-width: 1100px) {
.top_center {
padding: 10% 2% 0;
max-width: 96%;
width: 100%;
}
.common_h1 {
font-size: 60px;
}
}
@media (max-width: 1024px) {
.common_logo {
margin-top: 46px;
}
.top_center {
padding: 5% 5% 0;
max-width: 90%;
}
.common_left {
float: none;
margin: 0 auto;
max-width: 660px;
width: 100%;
}
.common_right {
float: none;
padding-top: 30px;
text-align: center;
}
.common_btn {
width: 204px;
margin: 0 auto;
}
section.index_common p {
padding: 0 25px;
}
}
@media (max-width: 767px) {
.img_pc {
display: none;
}
.img_sp {
display: inline-block;
}
.common_left {
width: 100%;
}
.index_common {
padding-left: 4%;
padding-right: 4%;
}
.common_logo {
font-size: 19px;
line-height: 25px;
background-size: 36px;
padding: 5px 0 6px 45px;
margin-top: 40px;
}
.common_h1 {
font-size: 32px;
line-height: 42px;
}
section.index_top p,
section.index_common p {
font-size: 14px;
line-height: 22px;
}
.index_common p.font_14 {
font-size: 12px;
line-height: 18px;
}
.index_common h2 {
font-size: 32px;
line-height: 42px;
}
.index_common {
padding-top: 70px;
text-align: center;
height: 400px;
}
}
@media (max-width: 534px) {
.index_common h2 {
font-size: 28px;
}
section.index_top p {
padding-right: 10px;
}
}
@media (max-width: 414px) {
section.index_common p {
padding: 0 20px;
}
}
.product-tabs-wrap .btn {
background-color: #ce0e2d !important;
border-radius: 23px;
color: #fff;
text-align: center;
height: 32px;
line-height: 32px !important;
cursor: pointer;
display: -ms-flexbox !important;
display: flex !important;
padding: 0 24px !important;
-ms-flex-align: center;
align-items: center;
transition: 0.3s ease-out;
border: 0 !important;
width: max-content;
}
.product-tabs-wrap .btn:hover .download-popup {
display: block !important;
}
</style>
<script>
import Swiper from "swiper";
import { Autoplay } from "swiper/modules";
Swiper.use([Autoplay]);
document.addEventListener('DOMContentLoaded', function() {
const swiper = new Swiper(".sc2-swiper-box", {
loop: true,
slidesPerView: "auto",
spaceBetween: 2,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
allowTouchMove: false,
});
});
</script>