---
const { description = '', title = '', keywords = '', breadcrumb = [] } = Astro.props;
import {getConfig, getTp4Extra} from '../../utils/config'
import { Image } from 'astro:assets';
const config = getConfig(Astro)
const extra = getTp4Extra(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_4/bootstrap.min.css'
import '../styles/template_4/responsive.css'
import '../styles/template_4/style.css'
import '../styles/template_4/meanmenu.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>

	<header>
		<div id="header-sticky" class="header-area transparent-header pt-10 pb-10">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-xl-2 col-lg-2 col-md-4 col-10 d-flex align-items-center">
						<div class="logo">
							<a href="/">
								<Image src={config.app_logo} alt='logo' width={40} height={40}/>
								<!-- <img src="assets/img/logo/logo.png" alt=""> -->
							</a>
						</div>                        
					</div>
					<div class="col-xl-10 col-lg-10 col-md-7 col-8 d-none d-md-block">
						<div class="main-menu colormenu d-block">
							<nav id="mobile-menu">
								<ul>
									<li><a href="/">首页</a></li>
									<li><a href="/about-us">关于我们</a></li>
									<li><a href="/news">新闻专栏</a></li>
									<li><a href="/contact-us">联系我们</a></li>
								</ul>
							</nav>
						</div>
					</div>
					<div class="col-2 col-md-1">
						<div class="side-menu-icon d-lg-none text-end">
							<button class="side-toggle">三</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>

	<div class="fix">
        <div class="side-info">
            <button class="side-info-close"><i class="fal fa-times"></i></button>
            <div class="side-info-content">
                <div class="mobile-menu mean-container">
					
				</div>
            </div>
        </div>
    </div>
	<div class="offcanvas-overlay"></div>
	

		<slot />

	<!-- FOOTER START -->
	<div class="footer-area">
		<div class="container">
			<div class="row">
				<div class="col-xl-2 col-lg-2 col-md-4">
					<div class="footer_logo">
						<!-- <img src="/template_4/images/logo/logo.png" alt="logo"/> -->
						<Image src={config.app_logo} alt='logo' width={40} height={40}/>
					</div>
				</div>
				<div class="col-xl-2 col-lg-2 col-md-4">
					<div class="footer_widget_design wow  fadeInUp"  data-wow-duration="2s" data-wow-delay=".2s">
						<div class="link_heading">
							<h3 class="link_heading">网站链接</h3>
						</div>
						<div class="links">
							<ul>
								<li><a href="/">首页 </a></li>
								<li><a href="/about-us">关于我们</a></li>
								<li><a href="/contact-us">联系我们</a></li>
								<li><a href="/news">新闻产品资讯</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-lg-2 col-md-4">
					<div class="footer_widget_design wow  fadeInUp"  data-wow-duration="2s" data-wow-delay=".2s">
						<div class="link_heading">
							<h3 class="link_heading linkspecail">办公地址</h3>
						</div>
						<div class="links special_widget_tp">
							<ul>
								<li><a href="/contact"><i class="far fa-map-marker-alt"></i><span class="tp-spaceing">{extra.app_location}</span></a></li>
							</ul>
						</div>
					</div>
					<div class="footer_widget_design wow  fadeInUp"  data-wow-duration="2s" data-wow-delay=".2s">
						<div class="link_heading">
							<h3 class="link_heading linkspecail">联系电话</h3>
						</div>
						<div class="links special_widget_tp">
							<ul>
								<li><a href={`tel:${extra.app_phone}`}><i class="fad fa-phone-alt"></i>{extra.app_phone}</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer_bottom pt-60 pb-15">
			<div class="container tp-border">
				<div class="row align-items-center">
					<div class="col-xl-6 col-lg-6 col-md-6">
						<div class="copyright_text pt-20">
							<p>2025© {config.app_name} - {config.app_company}</p>
						</div>
					</div>
					<div class="col-xl-6 col-lg-6 col-md-6">
						<div class="footer_social f-right">
							<span>关注我们</span>
							{
								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> : ''
							}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- FOOTER END -->
	<!-- JS here -->
	<script is:inline src="/template_4/js/vendor/modernizr-3.5.0.min.js"></script>
	<script is:inline src="/template_4/js/vendor/jquery-1.12.4.min.js"></script>
	<script is:inline src="/template_4/js/popper.min.js"></script>
	<script is:inline src="/template_4/js/bootstrap.min.js"></script>
	<script is:inline src="/template_4/js/owl.carousel.min.js"></script>
	<script is:inline src="/template_4/js/isotope.pkgd.min.js"></script>
	<script is:inline src="/template_4/js/one-page-nav-min.js"></script>
	<script is:inline src="/template_4/js/slick.min.js"></script>
	<script is:inline src="/template_4/js/jquery.meanmenu.min.js"></script>
	<script is:inline src="/template_4/js/ajax-form.js"></script>
	<script is:inline src="/template_4/js/wow.min.js"></script>
	<script is:inline src="/template_4/js/jquery.scrollUp.min.js"></script>
	<script is:inline src="/template_4/js/imagesloaded.pkgd.min.js"></script>
	<script is:inline src="/template_4/js/jquery.magnific-popup.min.js"></script>
	<script is:inline src="/template_4/js/plugins.js"></script>
	<script is:inline src="/template_4/js/main.js"></script>
</html>
<style>
	.follow-icon {
		text-decoration: none;
		padding-left: 1rem;
	}
</style>
