<!doctype html>
<html>
<?php include 'head.php'; ?>
<body>
<?php
get_header(); // 获取头部
?>

<div class="ind_ban">
	<div class="swiper-container sw1">
		<ul class="swiper-wrapper">
            <li class="swiper-slide"><a href="javascript:;"><img src="/wp-content/uploads/2024/03/2019092410171721.jpg"></a></li>
            <li class="swiper-slide"><a href="javascript:;"><img src="/wp-content/uploads/2024/03/2019072515043198.jpg"></a></li>
            <li class="swiper-slide"><a href="javascript:;"><img src="/wp-content/uploads/2024/03/2019072515054593.jpg"></a></li>
        </ul>
		<!--<div class="swiper-pagination swp1"></div>-->
		<div class="swiper-button-prev swbp1"></div>
		<div class="swiper-button-next swbn1"></div>
	</div>
</div>

<div class="ind_box1">
	<div class="ind_tit1">
		<h3>关于我们</h3>
		<p><span>“产业+互联网”S2B2b商业生态平台</span></p>
	</div>
	<div class="w1200">
		<ul>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_25.jpg"></div>
				<h3>1000<span>+</span></h3>
				<p>连锁门店</p>
			</li>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_26.jpg"></div>
				<h3>30<span>+</span></h3>
				<p>专利技术</p>
			</li>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_27.jpg"></div>
				<h3>17<span>+</span></h3>
				<p>品牌权益 </p>
			</li>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_28.jpg"></div>
				<h3>5000<span>+</span></h3>
				<p>修配联合</p>
			</li>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_29.jpg"></div>
				<h3>5万<span>+</span></h3>
				<p>社区站点</p>
			</li>
		</ul>
	</div>
</div>

<div class="ind_box2">
	<div class="l">
        <video id="video1" loop poster="" width="100%" height="auto">
            <source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/video.mp4" type="video/mp4">
        </video> 
    </div>
	<div class="r">
		<ul>
			<li>
				<span>产业</span>
				<div>是一家专业研发、生产、销售、服务汽车易损易耗件的一体化、生态化的综合性汽配企业。</div>
			</li>
			<li>
				<span>定位</span>
				<div>以“汽车易损易耗件”为品类定位，以“终端汽修汽保店”为客户定位</div>
			</li>
			<li>
				<span>模式</span>
				<div>推行“汽车易损易耗件产业+互联网”的新商业模式，全力打造全产业链全流程互联网化的管理服务S2B2b2C商业生态平台</div>
			</li>
			<a href="/about" class="more">更多 >></a>
		</ul>
	</div>
</div>

<div class="ind_box3">
	<div class="ind_tit2">
		<h3>门店展示</h3>
		<p><span>千店连锁成功见证</span></p>
	</div>
	<div class="w1200">
		<div class="swiper-container sw2">
			<ul class="swiper-wrapper">
				<?php
				 
				// 查询参数
				$args0 = array(
					'cat' => 24, // 分类ID
					'posts_per_page' => 9, // 每页显示的文章数量
					'paged' => $paged
				);
				
				// 查询文章
				$query0 = new WP_Query($args0);
				
				if ($query0->have_posts()) {
					while ($query0->have_posts()) {
						$query0->the_post();
						// 在这里编写你的文章列表
						$excerpt = get_the_excerpt(); // 获取摘要
						if ( mb_strlen( $excerpt ) > 90 ) { // 如果字数超过200字
							$excerpt = mb_substr( $excerpt, 0, 90 ); // 截取前200个字符
							$excerpt .= '...'; // 添加省略号
						}
				  
				?>
				<li class="swiper-slide">
                    <div>
                        <?php
                        if(has_post_thumbnail()){
                            // 获取特色图片的ID
                            $thumbnail_id = get_post_thumbnail_id();
                            // 获取特色图片的URL
                            $thumbnail_url = wp_get_attachment_url( $thumbnail_id );
                            
                        ?>
                            <a href="#"><img src="<?php echo $thumbnail_url ?>" width="100%"></a>
                        <?php
                            }
                        ?>
                    </div>
                    <h3><?php the_title(); ?></h3>
                </li>
				<?php    
					  }
					} 
					// 重置WordPress查询
					wp_reset_postdata();
				?>
			</ul>
		</div>
		<div class="swiper-button-prev swbp2"></div>
		<div class="swiper-button-next swbn2"></div>
		<a href="/about/?fid=24" class="more">更多 >></a>
	</div>
</div>

<div class="ind_box4">
	<div class="ind_tit2">
		<h3>新闻中心</h3>
		<p><span>与时俱进，箭冠第一手新闻</span></p>
	</div>
	<ul class="lm">
        <li><a href="/news/?fid=6"><span><span style="background: url(/wp-content/uploads/2024/03/2019072012523265.png);"></span></span>公司资讯</a></li>	
        <li><a href="/news/?fid=7"><span><span style="background: url(/wp-content/uploads/2024/03/2019072012525057.png);"></span></span>门店速递</a></li>	
        <li><a href="/news/?fid=8"><span><span style="background: url(/wp-content/uploads/2024/03/2019072012530973.png);"></span></span>行业资讯</a></li>	
        <li><a href="/news/?fid=9"><span><span style="background: url(/wp-content/uploads/2024/03/2019072012534612.png);"></span></span>品类知识</a></li>
    </ul>
	<?php 
		// 查询参数
		$args = array(
			'cat' => 5,
			'posts_per_page' => 6,
			'orderby' => 'post_date',
			'order' => 'DESC',
			'post_status' => 'publish',
			'ignore_sticky_posts' => true
		);

		// 查询文章
		$query = new WP_Query( $args );
		if ($query->have_posts()) {
	?>
	<div class="list w1200">
		<?php
			// 取出第一篇文章
			$query->the_post();
		?>
		<div class="l">
			<div>
				<?php
				if(has_post_thumbnail()){
					// 获取特色图片的ID
					$thumbnail_id = get_post_thumbnail_id();
					// 获取特色图片的URL
					$thumbnail_url = wp_get_attachment_url( $thumbnail_id );
					// 标题
					$title = get_the_title(); 
                    if ( mb_strlen( $title ) > 22 ) { 
						$title = mb_substr(  $title, 0, 22 ); 
						$title .= '...'; // 添加省略号
                    }

					$categories = get_the_category();
					if ( ! empty( $categories ) ) {
						// 获取第一个分类的ID
						$category_id = $categories[0]->term_id;
						if($category_id == 5){
							$category_id = $categories[1]->term_id;
						}
					}
				?>
					<a href="/newsDetail/?id=<?php echo the_id() ?>&&fid=<?php echo $category_id ?>"><img src="<?php echo $thumbnail_url ?>" width="100%"></a>
				<?php
					}
				?>
			</div>
			<h3><span>[<?php echo get_the_date(); ?>]</span><a href="/newsDetail/?id=<?php echo the_id() ?>&&fid=<?php echo $category_id ?>"><?php echo $title; ?></a></h3>
		</div>
		<?php 
			rewind_posts(); // 重置查询指针，以便下次使用
		?>
		<div class="r">
			<?php
				// 取出第二篇文章
				$query->the_post();
			?>
				<div>
					<div>
						<?php
						if(has_post_thumbnail()){
							// 获取特色图片的ID
							$thumbnail_id = get_post_thumbnail_id();
							// 获取特色图片的URL
							$thumbnail_url = wp_get_attachment_url( $thumbnail_id );

							$excerpt = get_the_excerpt(); // 获取摘要
							if ( mb_strlen( $excerpt ) > 70 ) { // 如果字数超过200字
								$excerpt = mb_substr( $excerpt, 0, 70 ); // 截取前200个字符
								$excerpt .= '...'; // 添加省略号
							} 
							$categories = get_the_category();
							if ( ! empty( $categories ) ) {
								// 获取第一个分类的ID
								$category_id = $categories[0]->term_id;
								if($category_id == 5){
									$category_id = $categories[1]->term_id;
								}
							}
						?>
							<a href="/newsDetail/?id=<?php echo the_id() ?>&&fid=<?php echo $category_id ?>"><img src="<?php echo $thumbnail_url ?>" width="100%"></a>
						<?php
							}
						?>
					</div>
					<h3><a href="/newsDetail/?id=<?php echo the_id() ?>&&fid=<?php echo $category_id ?>"><?php the_title(); ?></a></h3>
					<span><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_76.jpg"><?php echo get_the_date(); ?></span>
					<p><?php echo $excerpt; ?></p>
				</div>
			<?php 
				rewind_posts(); // 重置查询指针，以便下次使用
			?>
				<ul>
				<?php 
					while ($query->have_posts()) {
						$query->the_post();
						// 标题
						$title1 = get_the_title(); 
						if ( mb_strlen( $title ) > 22 ) { 
							$title = mb_substr(  $title, 0, 22 ); 
							$title .= '...'; // 添加省略号
						} 
						$categories = get_the_category();
						if ( ! empty( $categories ) ) {
							// 获取第一个分类的ID
							$category_id = $categories[0]->term_id;
							if($category_id == 5){
								$category_id = $categories[1]->term_id;
							}
						}
				?>
					<li>
					<span>[<?php echo get_the_date(); ?>]</span><a href="/newsDetail/?id=<?php echo the_id() ?>&&fid=<?php echo $category_id ?>"><?php echo $title1; ?></a>
					</li>
				<?php 
					}
					// 重置WordPress查询
					wp_reset_postdata();
				?>
				</ul>
				<a href="/news" class="more">更多 >></a>
		</div>
	</div>
	<?php 
		}
	?>
</div>

<div class="ind_box5">
	<div class="w1200">
		<div>行业老字号 创业更可靠</div>
		<h3>中国汽车易损易耗件连锁领跑品牌</h3>
		<p>加盟热线：400-881-2323</p>
	</div>
</div>

<div class="ind_box6">
	<div class="ind_tit2">
		<h3>加盟流程</h3>
		<p><span>全产业链 全流程 互联网化</span></p>
	</div>
	<div class="w1200">
		<ul>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_81.jpg"></div>
				<p>了解箭冠</p>
			</li>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_82.jpg"></div>
				<p>加盟申请</p>
			</li>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_83.jpg"></div>
				<p>达成协议</p>
			</li>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_84.jpg"></div>
				<p>支付定金</p>
			</li>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_85.jpg"></div>
				<p>统一培训</p>
			</li>
			<li>
				<div><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/index_86.jpg"></div>
				<p>新店开张</p>
			</li>
		</ul>
	</div>
</div>

<div class="ind_box7">
	<?php include 'commentFormMini.php'; ?>
</div>

<?php
get_footer(); // 获取尾部
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/swiper.min.css">
<style>
    .swiper-wrapper{
        height: auto;
    }
	.sw2 ul li > div{
		height: 235px;
		overflow: hidden;
		padding:5px;
		border: 1px solid #ddd;
		border-radius: 3px;
	}
    .sw2 ul li div a{display:flex;height:100%;width:100%;align-items: center;justify-content: center;}
</style>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/js/swiper.min.js"></script>
<script type="text/javascript">
// 提交表单
jQuery(document).ready(function($) {
        $('#contact-form').submit(function(e) {
            e.preventDefault();
            if($("#rename").val()==''){
                alert('请输入联系人姓名!');
                return
            }
            if($("#phone").val()==''){
                alert('请输入联系电话!');
                return
            }
            
            $.ajax({
                url: $(this).attr('action'),
                type: 'post',
                data: {
                    action: 'submit_custom_comment',
                    comment_data: $(this).serialize()
                },
                success: function(response) {
                    alert('提交成功!');
                    $('#contact-form')[0].reset();
                },
                error: function() {
                    alert('提交失败，请重试.');
                }
            });
        });
    });

//首页-banner图片
var swiper1 = new Swiper('.sw1', {
	slidesPerView: 1,
	spaceBetween: 0,
	slidesPerGroup: 1,
	loop: true,
	autoplay: {
		delay: 6000,//秒            
		disableOnInteraction: false,//滑动不会失效
		reverseDirection: false,//如果最后一个 反向播放
	},
	pagination: {
		el: '.swp1',
		clickable: true,
	},
	navigation: {
		nextEl: '.swbp1',
		prevEl: '.swbn1',
	},
});
//首页-门店展示
var ww = $(window).width();
var swiper2 = new Swiper('.sw2', {
	slidesPerView: ww < 768 ? (ww < 560 ? 1 : 2) : 4,
	spaceBetween: 16,
	slidesPerGroup: 1,
	loop: true,
	autoplay: {
		delay: 5000,//秒            
		disableOnInteraction: false,//滑动不会失效
		reverseDirection: false,//如果最后一个 反向播放
	},
	pagination: {
		el: '.swp2',
		clickable: true,
	},
	navigation: {
		nextEl: '.swbp2',
		prevEl: '.swbn2',
	},
});

//控制视频播放
var video1=document.getElementById("video1");
video1.onclick=function(){
    if(video1.paused){
		video1.play();
	}else{
		video1.pause();
	}
}
video1.addEventListener('canplaythrough', function() {
    video1.play();
});
$(window).scroll(function(e){
    video1.muted = true;
    if($(this).scrollTop() > $('.ind_box2').offset().top - window.innerHeight){
        if(video1.paused){
            video1.play();
            video1.muted = false;
        }
    }else{
        if(!video1.paused){
            video1.pause();
        }
    }
})
</script>
</body>
</html>