---
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('')
// swiper 数据
const swiper = extra.index.sc3.swiper;
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={extra.app_download} 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={extra.app_download} 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 sc1">
                    <div class="sc1-mkt-text">
                        <div class="mkt-info">
                            <Image src={config.app_logo} alt="logo" width="25" height="25" loading="eager"/>
                            <h1 class="app-name">{config.app_name}</h1>
                        </div>
                        <h1 class="mkt-title">{extra.index.sc1.mkt_title}</h1>
                        <p class="mkt-text">
                            <Fragment set:html={extra.index.sc1.mkt_text}/>
                        </p>
                    </div>
                    <div class="sc1-mkt-img">
                        <Image style="height:100%;width:100%" src={extra.index.sc1.img_box} alt="app首页" width={100} height={100} loading="eager"/>
                    </div>
                </div>
                <div class="app-read-sc2">
                    <div class="text-box">
                        <div class="read-title">
                            {extra.index.sc2.reaad_title}
                        </div>
                        <p class="read-text">
                            {extra.index.sc2.reaad_text}
                        </p>
                    </div>
                    <div class="sc2-swiper-box">
                        <div class="swiper-wrapper sc2-swiper-container">
                            {
                                extra.index.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.index.sc5.img_box} alt="背景" width={100} height={100} />
                        </div>
                        <div class="text-box">
                            <div class="read-subtitle">
                                {extra.index.sc5.read_subtitle}
                            </div>
                            <div class="read-title">
                                {extra.index.sc5.read_title}
                            </div>
                            <p class="read-text">
                                <Fragment set:html={extra.index.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.index.sc6.read_title}
                            </div>
                            <p class="read-text">
                                <Fragment set:html={extra.index.sc6.read_text} />
                            </p>
                        </div>
                        <div class="sc6-animation-box img-box" id="sc6ZdpScene">
                            <Image src={extra.index.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.index.sc7.read_title}
                        </div>
                        <p class="read-text">
                            <Fragment set:html={extra.index.sc7.read_text}>
                        </p>
                    </div>
                    <div class="sc7-img-box">
                        <Image class="h-auto" src={extra.index.sc7.img_box} alt="背景图" width={100} height={100} />
                    </div>
                </div>
                <div class="app-read-sc8">
                    <Image class="h-full" src={extra.index.sc8.img_box} alt="背景" height={100} width={100}/>
                    <div class="sc8-content-wrapper">
                        <div class="text-box">
                            <div class="read-title">
                                {extra.index.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.index.sc8.icon1} alt="icon" height={100} width={100} />
                                        <span class="icon-desc">{extra.index.sc8.icon1_text}</span>
                                    </div>
                                    <div class="icon-item">
                                        <Image class="h-full" src={extra.index.sc8.icon2} alt="icon" height={100} width={100} />
                                        <span class="icon-desc">{extra.index.sc8.icon2_text}</span>
                                    </div>
                                </div>
                                <div class="icon-center">
                                    <div class="icon-item icon-item2">
                                        <Image class="h-full" src={extra.index.sc8.icon3} alt="icon" height={100} width={100} />
                                        <span class="icon-desc">{extra.index.sc8.icon3_text}</span>
                                    </div>
                                </div>
                                <div class="icon-bottom">
                                    <div class="icon-item">
                                        <Image class="h-full" src={extra.index.sc8.icon4} alt="icon" height={100} width={100} />
                                        <span class="icon-desc">{extra.index.sc8.icon4_text}</span>
                                    </div>
                                    <div class="icon-item">
                                        <Image class="h-full" src={extra.index.sc8.icon5} alt="icon" height={100} width={100} />
                                        <span class="icon-desc">{extra.index.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>
    .mkt-info {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        img {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
    }

    .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;
        }

        .mkt-info {
            img {
                width: 30px;
                height: 30px;
            }
        }

        .sc1 .app-name {
            font-size: 2rem;
        }
    }

    @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>