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-14 16:27:50 +08:00
parent 33cceaadcb
commit c77a2daa5f
3 changed files with 250 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/template_4/js/main.js
View File

@ -29,7 +29,6 @@ $('#mobile-menu').meanmenu({
});
$('.side-toggle').on('click', function () {
alert('1111')
$('.side-info').addClass('info-open');
$('.offcanvas-overlay').addClass('overlay-open');
})

2
src/layouts/Layout_4.astro
View File

@ -56,7 +56,7 @@ import '../styles/template_4/meanmenu.css'
</div>
<div class="col-2 col-md-1">
<div class="side-menu-icon d-lg-none text-end">
<button class="side-toggle">顶顶顶顶顶</button>
<button class="side-toggle">三</button>
</div>
</div>
</div>

499
src/pages/template/4/index.astro
View File

@ -8,6 +8,7 @@ import { TP2_COLUMN_ABOUT_US, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from "../
import { newsIndex } from "../../../../utils/rpc";
const config = getConfig(Astro)
const extra = getTp4Extra(config.app_extra_tag);
console.log(extra)
const {code, data} = await newsIndex(config.id, 3);
const breadcrumb = [{
@ -22,274 +23,272 @@ const breadcrumb = [{
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 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>
<!-- 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 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>
<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>
})
}
<h2 class="hero-two-title">{extra.sc1.text1}<br> {extra.sc1.text2}</h2>
<p>{extra.sc1.text3}</p>
</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>
<!-- 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="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 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 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 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 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 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>
<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 class="feabox__content">
<h3 class="feabox-title tcolor3">{extra.sc2.text5}</h3>
</div>
</div>
</div>
</div>
</div>
<!-- TRY END -->
</main>
</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">
<span class="tp_download"><Image width={50} height={50} alt="huawei-store" src={`/template_4/images/store/huawei.svg`} /></span>
<span class="tp_download"><Image width={50} height={50} alt="xiaomi-store" src={`/template_4/images/store/xiaomi.svg`} /></span>
<span class="tp_download"><Image width={50} height={50} alt="tencent-store" src={`/template_4/images/store/tencent.svg`} /></span>
<span class="tp_download"><Image width={50} height={50} alt="wandoujia-store" src={`/template_4/images/store/wandoujia.svg`} /></span>
</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 -->
</Layout>
<style>