---
import "swiper/swiper-bundle.css";
import Layout from "../../../layouts/Layout_4.astro";
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
import { Image } from 'astro:assets';
import { getConfig, getTp4Extra } from "../../../../utils/config";
import { TP2_COLUMN_ABOUT_US, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from "../../../../utils/const";
import { newsIndex } from "../../../../utils/rpc";
const config = getConfig(Astro)
const extra = getTp4Extra(config.app_extra_tag);
const {code, data} = await newsIndex(config.id, 3);

const breadcrumb = [{
    title: TP2_COLUMN_INDEX,
    url: TP2_COLUMN_INDEX_URL
}]
---
<Layout
    title={`${config.app_name}`}
    description={config.app_description}
    keywords={config.app_keywords}
    breadcrumb={breadcrumb}
>

    <main>
        <div class="app_slider  d-flex align-items-center fix">
            <div class="App_shape-circle">
                <img class="shapeAbsoulute scale-upOne d-sm-none d-md-block" src="/template_4/images/shape/circle.png" alt=""/>
                <img class="shape10" src="/template_4/images/shape/shape10.png" alt=""/>
                <img class="shape13" src="/template_4/images/shape/shape13.png" alt=""/>
            </div>
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                    <div class="App_shape wow fadeInLeft  d-sm-none d-md-block d-none  d-sm-block" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInLeft;">
                        <img src="/template_4/images/shape/mainshape.png" alt=""/>
                    </div>
                </div>
                <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 d-flex align-items-center">
                    <div class="app_sliderContent">
                        <div class="shapeesright">
                            <img class="shape1" src="/template_4/images/shape/shape1.png" alt=""/>
                            <img class="shape2" src="/template_4/images/shape/shape2.png" alt=""/>
                            <img class="shape3" src="/template_4/images/shape/shape3.png" alt=""/>
                            <img class="shape4" src="/template_4/images/shape/shape4.png" alt=""/>
                            <img class="shape5" src="/template_4/images/shape/shape5.png" alt=""/>
                            <img class="shape6" src="/template_4/images/shape/shape6.png" alt=""/>
                            <img class="shape7" src="/template_4/images/shape/shape7.png" alt=""/>
                            <img class="shape8" src="/template_4/images/shape/shape8.png" alt=""/>
                            <img class="shape9" src="/template_4/images/shape/shape9.png" alt=""/>
                            <img class="shape11" src="/template_4/images/shape/shape5.png" alt=""/>
                        </div>
                        <h2 class="hero-two-title">{extra.sc1.text1}<br> {extra.sc1.text2}</h2>
                        <p>{extra.sc1.text3}</p>
                    </div>
                </div>
            </div>
        </div>
        </div>

    <!-- FETURES START -->
        <div class="homefeture_1 pt-115 pb-130">
            <div class="container">
                <div class="app_left_shape">
                    <img class="leftanimation d-none d-sm-block" src="/template_4/images/shape/left.png" alt="leftshape"/>
                    <img src="/template_4/images/shape/shape7.png" alt="leftshape"/>
                    <img class="downsahpe d-none d-sm-block" src="/template_4/images/shape/shape3.png" alt="leftshape"/>
                </div>
                <div class="section_title_wrapper text-center wow fadeInUp mb-70" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
                    <h2 class="section-title">{extra.sc2.text1}</h2>
                </div>
                <div class="row">
                    <div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
                        <div class="feabox mb-30">
                            <div class="feabox__img mb-50">
                                <Image src={`/template_4/images/fetures/forma1.svg`} alt="pic" width={80} height={80}/>
                            </div>
                            <div class="feabox__content">
                                <h3 class="feabox-title tcolor0">{extra.sc2.text2}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
                        <div class="feabox mb-30 clr1">
                            <div class="feabox__img img1 mb-50">
                                <img src="/template_4/images/fetures/Forma2.png" alt="form2"/>
                            </div>
                            <div class="feabox__content">
                                <h3 class="feabox-title tcolor1">{extra.sc2.text3}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
                        <div class="feabox mb-30 clr2">
                            <div class="feabox__img img2 mb-50">
                                <img src="/template_4/images/fetures/Forma3.png" alt="form3"/>
                            </div>
                            <div class="feabox__content">
                                <h3 class="feabox-title tcolor2">{extra.sc2.text4}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
                        <div class="feabox mb-30 clr3">
                            <div class="feabox__img img3 mb-50">
                                <img src="/template_4/images/fetures/Forma4.png" alt="form4"/>
                            </div>
                            <div class="feabox__content">
                                <h3 class="feabox-title tcolor3">{extra.sc2.text5}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- FETURES END -->

    <!-- APP DETAILS START -->
        <div class="app_details pb-20">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-7 col-lg-6 col-md-12">
                        <div class="details_content  pb-70">
                            <h2 class="section-title section_title_large">{extra.sc3.text1}</h2>
                        </div>
                        <div class="row">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                <div class="feature3">
                                    <div class="feature3__image">
                                        <img class="pb-30" src="/template_4/images/service/s7.png" alt="details"/>
                                    </div>
                                    <div class="feature3__content">
                                        <h4 class="content_title">{extra.sc3.text2}</h4>
                                        <p>{extra.sc3.text3}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                <div class="feature3 pl-40">
                                    <div class="feature3__image febg1">
                                        <img class="pb-30" src="/template_4/images/fetures/s2.png" alt="details"/>
                                    </div>
                                    <div class="feature3__content">
                                        <h4 class="content_title">{extra.sc3.text4}</h4>
                                        <p>{extra.sc3.text5}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                <div class="feature3">
                                    <div class="feature3__image febg2">
                                        <img class="pb-30" src="/template_4/images/fetures/s3.png" alt="details"/>
                                    </div>
                                    <div class="feature3__content">
                                        <h4 class="content_title">{extra.sc3.text6}</h4>
                                        <p>{extra.sc3.text7}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                <div class="feature3 pl-40">
                                    <div class="feature3__image febg3">
                                        <img class="pb-30" src="/template_4/images/fetures/s4.png" alt="details"/>
                                    </div>
                                    <div class="feature3__content">
                                        <h4 class="content_title">{extra.sc3.text8}</h4>
                                        <p>{extra.sc3.text9}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-5 col-lg-6 col-lg-6 col-md-12 d-md-none d-lg-block d-sm-none d-md-block d-sm-block">
                        <div class="wow zoomIn" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.2s; animation-name: zoomIn;">
                            <img src="/template_4/images/fetures/mockup.png" alt="blogshape"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- APP DETAILS END -->

    <!-- DOWNLOAD START  -->
        <div class="download-area pt-50 mt-100">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-4 col-sm-12 d-sm-none d-md-block">
                        <div class="download_image">
                            <img class="dw d-none d-sm-block" src="/template_4/images/shape/iphon2.png" alt="download_shape"/>
                            <img class="downloadpos  d-md-none d-lg-block d-none d-sm-block" src="/template_4/images/shape/iphone3.png" alt="download_shape"/>
                            <img class="downloadpos2 d-md-none d-lg-block d-none d-sm-block" src="/template_4/images/shape/circle.png" alt="download_shape"/>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12">
                        <div class="download_content pl-105 pt-90">
                            <h2 class="section-title">{extra?.sc4?.text1}</h2>
                            <p>{extra?.sc4?.text2}</p>
                            <div class="download-btn">
                                <a class="tp_download" href={extra?.sc4?.text3}><Image width={50} height={50} alt="huawei-store" src={`/template_4/images/store/huawei.svg`} /></a>
                                <a class="tp_download" href={extra?.sc4?.text4}><Image width={50} height={50} alt="xiaomi-store" src={`/template_4/images/store/xiaomi.svg`} /></a>
                                <a class="tp_download" href={extra?.sc4?.text5}><Image width={50} height={50} alt="tencent-store" src={`/template_4/images/store/tencent.svg`} /></a>
                                <a class="tp_download" href={extra?.sc4?.text6}><Image width={50} height={50} alt="wandoujia-store" src={`/template_4/images/store/wandoujia.svg`} /></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- DOWNLOAD END  -->

    <div class="blog3">
        <div class="container">
            <div class="section_title_wrapper mb-60 text-center">
                <h2 class="section-title team_title_h3">新闻产品资讯</h2>
            </div>
            
            <div class="row">
                {
                    data.map(item => {
                        return <div class="col-xl-4 col-lg-4 col-md-6">
                                    <div class="blog">
                                        <a href={`/news/${item.id}`}>
                                            <div class="blog__image">
                                                <Image class="blog-image" width={100} height={100} alt={item.title} src={item.cover} />
                                                {/* <img src="assets/img/Blog/blog1.png" alt="blogImage"> */}
                                            </div>
                                            <div class="blog__meta">
                                                <span>{item.created_at}</span>
                                                <div><h3 class="title">{item.title}</h3></div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                    })
                }
            </div>
        </div>
    </div>

    <!-- TRY START  -->
    <div class="social_share mb-100">
        <div class="container">
            <div class="section_title_wrapper mb-80 text-center mt-115">
                <h2 class="section-title mb-20">{extra?.sc5?.text1}</p>
            </div>
            <div class="row">
                <div class="col-xl-3 col-lg-4 col-md-6 share-container">
                    <div class="share align-items-center mb-30">
                        <div class="share__icon">
                            <Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/vivo.svg`} />
                        </div>
                        <div class="share__content">
                            <h4>vivo</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 share-container">
                    <div class="share align-items-center mb-30">
                        <div class="share__icon">
                            <!-- <img src="assets/img/social/twitter.png" alt="shareIcon"> -->
                            <Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/huawei.svg`} />
                        </div>
                        <div class="share__content">
                            <h4>华为</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 share-container">
                    <div class="share align-items-center mb-30">
                        <div class="share__icon">
                            <Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/xiaomi.svg`} />
                        </div>
                        <div class="share__content">
                            <h4>小米</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 share-container">
                    <div class="share align-items-center mb-30">
                        <div class="share__icon">
                            <Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/oppo.svg`} />
                        </div>
                        <div class="share__content">
                            <h4>OPPO</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- TRY END  -->
    </main>
		
</Layout>
<style>
    .blog-image {
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        -webkit-line-clamp: 1;
        overflow: hidden;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .title {
        -webkit-line-clamp: 1;
        overflow: hidden;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
</style>