---
const { description = '', title = '', keywords = '', breadcrumb = [] } = Astro.props;
import {getConfig, getTp5Extra} from '../../utils/config'
import { Image } from 'astro:assets';
const config = getConfig(Astro)
const extra = getTp5Extra(config.app_extra_tag)
import BaijiahaoLogo from '../../public/common/baijiahao.svg'
import Toutiaohao from '../../public/common/toutiaohao.svg'
import Douyin from '../../public/common/douyin.svg'
import Weibo from '../../public/common/weibo.svg'

import '../styles/common/main.css'
import '../styles/template_5/bootstrap.min.css'
import '../styles/template_5/style.css'
import '../styles/template_5/responsive.css'
---
<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<meta name="applicable-device"content="pc,mobile">
		<link rel="icon" type="image/svg+xml" href={config.app_logo} />
		<title>{title}</title>
		<meta name="description" content={description} />
		<meta name="keywords" content={keywords} />
		{config.app_baidu_zhanzhang ? <Fragment set:html={config.app_baidu_zhanzhang} /> : ''}
	</head>
	
	<div class="banner_outer">
		<header>
			<div class="container">
				<nav class="navbar navbar-expand-lg navbar-light">
					<a class="navbar-brand" href="/"><figure class="mb-0"><Image src={config.app_logo} alt="" height={40} width={40} class="img-fluid"></figure></a>
					<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" 
					aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
					<span class="navbar-toggler-icon"></span>
					<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav ml-auto">
							<li class="nav-item active">
								<a class="nav-link" href="/">首页</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="/news">产品动态</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="/about-us">关于我们</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="/contact-us">联系我们(400-188-3508)</a>
							</li>
							<li class="nav-item">
								<a class="nav-link try_free_btn" href={extra.app_download}>立即下载</a>
							</li>
						</ul>
					</div>
				</nav>
			</div>
		</header>
		<figure class="mb-0 bannersidelayer">
			<img src="./template_5/images/banner-sidelayer.png" alt="">
		</figure>
	<!-- Banner -->
		<slot name="banner-slot" />
	</div>
	<slot />
	<!-- Footer -->
<section class="footer-section">
    <div class="container">
        <div class="middle-portion">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                    <div class="icons">
                        <!-- <a href="./index.html">
                            <figure class="footer-logo">
                                <img src="./template_5/images/footer-logo.png" alt="">
                            </figure>
                        </a> -->
						<p>官方账号</p>
                        <ul class="list-unstyled mb-0">
							{
								extra.weibo_offical.address ?
								<a class="follow-icon" href={extra.weibo_offical.address}>
									<Weibo height={25} width={25} />
								</a> : ''
							}
							{
								extra.douyin_offical.address ?
								<a class="follow-icon" href={extra.douyin_offical.address}>
									<Douyin height={25} width={25} />
								</a> : ''
							}
							{
								extra.baijiahao_offical.address ?
								<a class="follow-icon" href={extra.baijiahao_offical.address}>
									<BaijiahaoLogo height={25} width={25} />
								</a> : ''
							}
							{
								extra.toutiaohao_offical.address ?
								<a class="follow-icon" href={extra.toutiaohao_offical.address}>
									<Toutiaohao height={25} width={25} />
								</a> : ''
							}
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-12 d-sm-block">
                    <div class="links">
                        <h3 class="heading">新闻专栏</h3>
                        <ul class="list-unstyled mb-0">
                            <li><a href="/news" class=" text text-decoration-none">产品动态</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-12 d-md-block">
                    <div class="links">
                        <h3 class="heading">关于我们</h3>
                        <ul class="list-unstyled mb-0">
                            <li><a href="/about-us" class=" text text-decoration-none">关于我们</a></li>
                            <li><a href="/contact-us" class=" text text-decoration-none">联系我们</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-lower">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                    <p class="mb-0 text-size-18">© 2025© {config.app_name} - {config.app_company}<a href={config.app_filing_url}>{config.app_filing}</a></p>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-12 d-md-block d-none">
                    <!-- <p class="mb-0 term text-size-18">Term of Use  |  Privacy Policy</p> -->
                </div>
            </div>
        </div>
    </div>
</section>

	<!-- Latest compiled JavaScript -->
<script is:inline src="/template_5/js/jquery-3.6.0.min.js"> </script>
<script is:inline src="/template_5/js/bootstrap.min.js"> </script>
<script is:inline src="/template_5/js/video_link.js"></script>
<script is:inline src="/template_5/js/video.js"></script>
<script is:inline src="/template_5/js/counter.js"></script>
<script is:inline src="/template_5/js/custom.js"></script>
<script is:inline src="/template_5/js/animation_links.js"></script>
<script is:inline src="/template_5/js/animation.js"></script>
</html>

