高端大气智慧消防物联网大数据可视化云平台HTML5网站模板

​

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>高端大气智慧消防物联网大数据可视化云平台HTML5网站模板</title>
		<meta name="keywords" content="高端大气,智慧消防,物联网,大数据,可视化,云平台" />
		<meta name="description" content="高端大气智慧消防物联网大数据可视化云平台HTML5网站模板。智慧消防(www.gdliontech.com)" /> 
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/public.js"></script>
		<script src="js/raphael.min.js"></script>
	</head>

	<body>
		<div class="topbox">
			<div class="head clearfloat">
				<div class="logo clearfloat">
					<em></em> <span>智慧消防大数据云平台</span>
				</div>
				<div class="nav">
					<ul class="clearfloat">
						<li class="active"><a href="">首页</a></li>
						<li><a href="tmc1.html">产品中心</a>
							<div class="nav_down">
								<p><a href="tmc1.html">TMC智慧消防云平台</a></p>
								<p><a href="tmc2.html">TMC智慧消防APP/小程序</a></p>
								<p><a href="tmc3.html">TMC可视化指挥平台</a></p>
								<p><a href="hard.html">硬件终端</a></p>
							</div>
						</li>
						<li><a href="solve.html">解决方案 </a>
							<div class="nav_down">
								<p><a href="">火灾自动报警系统解决方案</a></p>
								<p><a href="">电气火灾监控系统解决方案</a></p>
								<p><a href="">可燃气体监控系统解决方案</a></p>
								<p><a href="">消防给水监测系统解决方案</a></p>
								<p><a href="">气体灭火控制系统解决方案</a></p>
								<p><a href="">防火门监控系统解决方案</a></p>
								<p><a href="">消防视频监控系统解决方案</a></p>
								<p><a href="">消防巡检系统解决方案</a></p>
								<p><a href="">应急疏散系统解决方案</a></p>
							</div>
						</li>
						<li><a href="case.html">应用案例</a></li>
						<li><a href="agent.html">招商代理</a></li>
						<li><a href="about.html">关于我们</a></li>
					</ul>
				</div>
			</div>

		</div>
		<!--top-->
		<div class="wraps">

			<div class="banner">
				<ul class="clearfloat bannerul">
					<li>
						<img src="images/banner.png" />
						<div class="ban_text">
							<h2>让消防数据产生价值</h2>
							<div class="ban_info">
								大数据+消防，运用大数据分析研判、预知预警、辅助决策并指导实战，全面提升消防安全
							</div>
							<div class="ban_more">
								<a href="">立即咨询</a>
							</div>
						</div>
					</li>
					<li>
						<img src="images/banner.png" />
						<div class="ban_text">
							<h2>让消防数据产生价值</h2>
							<div class="ban_info">
								大数据+消防，运用大数据分析研判、预知预警、辅助决策并指导实战，全面提升消防安全
							</div>
							<div class="ban_more">
								<a href="">立即咨询</a>
							</div>
						</div>
					</li>
					<li>
						<img src="images/banner.png" />
						<div class="ban_text">
							<h2>让消防数据产生价值</h2>
							<div class="ban_info">
								大数据+消防，运用大数据分析研判、预知预警、辅助决策并指导实战，全面提升消防安全
							</div>
							<div class="ban_more">
								<a href="">立即咨询</a>
							</div>
						</div>
					</li>
					<li>
						<img src="images/banner.png" />
						<div class="ban_text">
							<h2>让消防数据产生价值</h2>
							<div class="ban_info">
								大数据+消防，运用大数据分析研判、预知预警、辅助决策并指导实战，全面提升消防安全
							</div>
							<div class="ban_more">
								<a href="">立即咨询</a>
							</div>
						</div>
					</li>
				</ul>
				<ul class="num clearfloat">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<!--banner-->
			<div class="pro_box">
				<div class="pro_tit">
					产业中心
				</div>
				<div class="pro_info">
					零平台建设成本、租用式云服务，24小时在线防火告警通知服务
				</div>
				<div class="pro_list">
					<ul class="clearfloat">
						<li class="active">
							<div class="pro_top">
								<a href="javascript:void(0);">
								&#xe615;
							</a>
							</div>
							<div class="pro_name">
								云平台
							</div>
						</li>
						<li>
							<div class="pro_top">
								<a href="javascript:void(0);">
								&#xe610;
							</a>
							</div>
							<div class="pro_name">
								移动端
							</div>
						</li>
						<li>
							<div class="pro_top">
								<a href="javascript:void(0);">
								&#xe613;
							</a>
							</div>
							<div class="pro_name">
								可视化指挥平台
							</div>
						</li>
						<li>
							<div class="pro_top">
								<a href="javascript:void(0);">
								&#xe691;
							</a>
							</div>
							<div class="pro_name">
								硬件终端
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!--产业中心-->
			<div class="tmcbox">
				<div class="tmc active clearfloat">
					<div class="tmc_pic">
						<img src="temp/tmc.png" />
					</div>
					<div class="tmc_text">
						<div class="tmc_tit">
							TMC智慧消防云平台
						</div>
						<div class="tmc_info">
							TMC智慧消防云平台在现有的消防系统基础上，结合大数据、物联网、云计算等先进技术，通过在硬件层加入数据采集设备，构建传感网络，将数据上传至云平台，开发针对性的业务模块，将“人防、物防、技防”结合应用于传统的消防管理和监督，实现四个消防在线。
						</div>
					</div>
				</div>
				<div class="tmc clearfloat">
					<div class="tmc_pic">
						<img src="temp/tmc.png" />
					</div>
					<div class="tmc_text">
						<div class="tmc_tit">
							TMC智慧消防移动端
						</div>
						<div class="tmc_info">
							TMC智慧消防移动端是针对我国消防监管管理工作任务繁重，警力不足，检查不规范等现实情况而研发，以标准化，规范化，便携化，可扩展化为基本理念，从社会单位、维保单位，管理部门三种维度设计出消防监督管理APP和小程序，从而实现社会单位的消防实时安全管理。
						</div>
					</div>
				</div>
				<div class="tmc clearfloat">
					<div class="tmc_pic">
						<img src="temp/tmc.png" />
					</div>
					<div class="tmc_text">
						<div class="tmc_tit">
							TMC可视化指挥平台
						</div>
						<div class="tmc_info">
							“一张图”实战指挥系统，实现多领域安防系统大联网，可视化呈现救援信息要素，打通从灾情感知到智能研判再到救援调度的整个救灾流程。通过一张图做到指挥、调度、分析、决策一气呵成，为分秒必争的火灾救援抢时间。
						</div>
					</div>
				</div>
				<div class="tmc clearfloat">
					<div class="tmc_pic">
						<img src="temp/tmc.png" />
					</div>
					<div class="tmc_text">
						<div class="tmc_tit">
							硬件终端
						</div>
						<div class="tmc_info">
							国内领先、最全的智慧消防物联网云产品
						</div>
					</div>
				</div>
			</div>
			<!--TMC-->
			<div class="solut_box">
				<ul class="solu_ban">
					<li class="active"><img src="temp/bj1.png" /></li>
					<li><img src="temp/bj2.png" /></li>
					<li><img src="temp/bj3.png" /></li>
					<li><img src="temp/bj4.png" /></li>
					<li><img src="temp/bj5.png" /></li>
					<li><img src="temp/bj6.png" /></li>
					<li><img src="temp/bj1.png" /></li>
					<li><img src="temp/bj2.png" /></li>
					<li><img src="temp/bj3.png" /></li>
				</ul>
				<!--背景图-->
				<div class="plan_box clearfloat">
					<div class="sidebar">
						<div class="prev ">
							<img src="images/prev.png" />
						</div>
						<div class="slide_ban">
							<ul>
								<li class="active">
									<a href="javascript:void(0);">
										<h2>火灾自动报警系统</h2>
										<div class="slide_way">
											解决方案
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<h2>电气火灾监控系统</h2>
										<div class="slide_way">
											解决方案
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<h2>可燃气体监控系统</h2>
										<div class="slide_way">
											解决方案
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<h2>消防给水监测系统</h2>
										<div class="slide_way">
											解决方案
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<h2>气体灭火控制系统</h2>
										<div class="slide_way">
											解决方案
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<h2>防火门监控系统</h2>
										<div class="slide_way">
											解决方案
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<h2>消防视频监控系统</h2>
										<div class="slide_way">
											解决方案
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<h2>消防巡检系统</h2>
										<div class="slide_way">
											解决方案
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<h2>应急疏散系统</h2>
										<div class="slide_way">
											解决方案
										</div>
									</a>
								</li>
							</ul>
						</div>
						<div class="next active">
							<img src="images/next.png" />
						</div>
					</div>
					<!--左侧banner-->
					<div class="blur_box">
						<div class="blut_top">
							<h2>解决方案</h2>
							<div class="blur_info">
								九大消防子系统构建的城市智慧感知网络，实现烟、温、水、电、火、视频等传感数据采集
							</div>
						</div>

						<div class="blut_ban">
							<ul>
								<li class="active">
									<div class="blut_name">
										火灾自动报警系统解决方案
									</div>
									<div class="blur_text">
										电气火灾监控系统通过对电器线路漏电（剩余电流）、线路或连接点温度的监测，准确监控电气线路的故障和异常状态，能有效地预防常见的因漏电导致接地电弧、线路或连接点温度过高所引起的建筑物电气火灾事故。
									</div>
									<div class="blur_more">
										<a href="">查看详情</a>
									</div>
									<div class="point_tit">
										功能特点
									</div>
									<div class="point clearfloat">
										<div class="char">
											<p>
												<span>零建设成本租用式服务</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>语音、短信、APP</span>
												<span>三种通知模式</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>24小时联网监测</span>
												<span>多方联动</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>大数据分析火灾</span>
												<span>智能研判</span>
											</p>
										</div>
									</div>
									<div class="point_tit">
										典型案例
									</div>
									<div class="typi">
										<a href=""><img src="temp/typi1.png" /></a>
										<a href=""><img src="temp/typi2.png" /></a>
									</div>
								</li>
								<li>
									<div class="blut_name">
										电气火灾监控系统解决方案
									</div>
									<div class="blur_text">
										电气火灾监控系统通过对电器线路漏电（剩余电流）、线路或连接点温度的监测，准确监控电气线路的故障和异常状态，能有效地预防常见的因漏电导致接地电弧、线路或连接点温度过高所引起的建筑物电气火灾事故。
									</div>
									<div class="blur_more">
										<a href="">查看详情</a>
									</div>
									<div class="point_tit">
										功能特点
									</div>
									<div class="point clearfloat">
										<div class="char">
											<p>
												<span>零建设成本租用式服务</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>语音、短信、APP</span>
												<span>三种通知模式</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>24小时联网监测</span>
												<span>多方联动</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>大数据分析火灾</span>
												<span>智能研判</span>
											</p>
										</div>
									</div>
									<div class="point_tit">
										典型案例
									</div>
									<div class="typi">
										<a href=""><img src="temp/typi1.png" /></a>
										<a href=""><img src="temp/typi2.png" /></a>
									</div>
								</li>
								<li>
									<div class="blut_name">
										可燃气体监控系统解决方案
									</div>
									<div class="blur_text">
										电气火灾监控系统通过对电器线路漏电（剩余电流）、线路或连接点温度的监测，准确监控电气线路的故障和异常状态，能有效地预防常见的因漏电导致接地电弧、线路或连接点温度过高所引起的建筑物电气火灾事故。
									</div>
									<div class="blur_more">
										<a href="">查看详情</a>
									</div>
									<div class="point_tit">
										功能特点
									</div>
									<div class="point clearfloat">
										<div class="char">
											<p>
												<span>零建设成本租用式服务</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>语音、短信、APP</span>
												<span>三种通知模式</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>24小时联网监测</span>
												<span>多方联动</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>大数据分析火灾</span>
												<span>智能研判</span>
											</p>
										</div>
									</div>
									<div class="point_tit">
										典型案例
									</div>
									<div class="typi">
										<a href=""><img src="temp/typi1.png" /></a>
										<a href=""><img src="temp/typi2.png" /></a>
									</div>
								</li>
								<li>
									<div class="blut_name">
										消防给水监测系统解决方案
									</div>
									<div class="blur_text">
										电气火灾监控系统通过对电器线路漏电（剩余电流）、线路或连接点温度的监测，准确监控电气线路的故障和异常状态，能有效地预防常见的因漏电导致接地电弧、线路或连接点温度过高所引起的建筑物电气火灾事故。
									</div>
									<div class="blur_more">
										<a href="">查看详情</a>
									</div>
									<div class="point_tit">
										功能特点
									</div>
									<div class="point clearfloat">
										<div class="char">
											<p>
												<span>零建设成本租用式服务</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>语音、短信、APP</span>
												<span>三种通知模式</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>24小时联网监测</span>
												<span>多方联动</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>大数据分析火灾</span>
												<span>智能研判</span>
											</p>
										</div>
									</div>
									<div class="point_tit">
										典型案例
									</div>
									<div class="typi">
										<a href=""><img src="temp/typi1.png" /></a>
										<a href=""><img src="temp/typi2.png" /></a>
									</div>
								</li>
								<li>
									<div class="blut_name">
										气体灭火控制系统解决方案
									</div>
									<div class="blur_text">
										电气火灾监控系统通过对电器线路漏电（剩余电流）、线路或连接点温度的监测，准确监控电气线路的故障和异常状态，能有效地预防常见的因漏电导致接地电弧、线路或连接点温度过高所引起的建筑物电气火灾事故。
									</div>
									<div class="blur_more">
										<a href="">查看详情</a>
									</div>
									<div class="point_tit">
										功能特点
									</div>
									<div class="point clearfloat">
										<div class="char">
											<p>
												<span>零建设成本租用式服务</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>语音、短信、APP</span>
												<span>三种通知模式</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>24小时联网监测</span>
												<span>多方联动</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>大数据分析火灾</span>
												<span>智能研判</span>
											</p>
										</div>
									</div>
									<div class="point_tit">
										典型案例
									</div>
									<div class="typi">
										<a href=""><img src="temp/typi1.png" /></a>
										<a href=""><img src="temp/typi2.png" /></a>
									</div>
								</li>
								<li>
									<div class="blut_name">
										防火门监控系统解决方案
									</div>
									<div class="blur_text">
										电气火灾监控系统通过对电器线路漏电（剩余电流）、线路或连接点温度的监测，准确监控电气线路的故障和异常状态，能有效地预防常见的因漏电导致接地电弧、线路或连接点温度过高所引起的建筑物电气火灾事故。
									</div>
									<div class="blur_more">
										<a href="">查看详情</a>
									</div>
									<div class="point_tit">
										功能特点
									</div>
									<div class="point clearfloat">
										<div class="char">
											<p>
												<span>零建设成本租用式服务</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>语音、短信、APP</span>
												<span>三种通知模式</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>24小时联网监测</span>
												<span>多方联动</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>大数据分析火灾</span>
												<span>智能研判</span>
											</p>
										</div>
									</div>
									<div class="point_tit">
										典型案例
									</div>
									<div class="typi">
										<a href=""><img src="temp/typi1.png" /></a>
										<a href=""><img src="temp/typi2.png" /></a>
									</div>
								</li>
								<li>
									<div class="blut_name">
										消防视频监控系统解决方案
									</div>
									<div class="blur_text">
										电气火灾监控系统通过对电器线路漏电（剩余电流）、线路或连接点温度的监测，准确监控电气线路的故障和异常状态，能有效地预防常见的因漏电导致接地电弧、线路或连接点温度过高所引起的建筑物电气火灾事故。
									</div>
									<div class="blur_more">
										<a href="">查看详情</a>
									</div>
									<div class="point_tit">
										功能特点
									</div>
									<div class="point clearfloat">
										<div class="char">
											<p>
												<span>零建设成本租用式服务</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>语音、短信、APP</span>
												<span>三种通知模式</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>24小时联网监测</span>
												<span>多方联动</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>大数据分析火灾</span>
												<span>智能研判</span>
											</p>
										</div>
									</div>
									<div class="point_tit">
										典型案例
									</div>
									<div class="typi">
										<a href=""><img src="temp/typi1.png" /></a>
										<a href=""><img src="temp/typi2.png" /></a>
									</div>
								</li>
								<li>
									<div class="blut_name">
										消防巡检系统解决方案
									</div>
									<div class="blur_text">
										电气火灾监控系统通过对电器线路漏电（剩余电流）、线路或连接点温度的监测，准确监控电气线路的故障和异常状态，能有效地预防常见的因漏电导致接地电弧、线路或连接点温度过高所引起的建筑物电气火灾事故。
									</div>
									<div class="blur_more">
										<a href="">查看详情</a>
									</div>
									<div class="point_tit">
										功能特点
									</div>
									<div class="point clearfloat">
										<div class="char">
											<p>
												<span>零建设成本租用式服务</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>语音、短信、APP</span>
												<span>三种通知模式</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>24小时联网监测</span>
												<span>多方联动</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>大数据分析火灾</span>
												<span>智能研判</span>
											</p>
										</div>
									</div>
									<div class="point_tit">
										典型案例
									</div>
									<div class="typi">
										<a href=""><img src="temp/typi1.png" /></a>
										<a href=""><img src="temp/typi2.png" /></a>
									</div>
								</li>
								<li>
									<div class="blut_name">
										应急疏散系统解决方案
									</div>
									<div class="blur_text">
										电气火灾监控系统通过对电器线路漏电（剩余电流）、线路或连接点温度的监测，准确监控电气线路的故障和异常状态，能有效地预防常见的因漏电导致接地电弧、线路或连接点温度过高所引起的建筑物电气火灾事故。
									</div>
									<div class="blur_more">
										<a href="">查看详情</a>
									</div>
									<div class="point_tit">
										功能特点
									</div>
									<div class="point clearfloat">
										<div class="char">
											<p>
												<span>零建设成本租用式服务</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>语音、短信、APP</span>
												<span>三种通知模式</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>24小时联网监测</span>
												<span>多方联动</span>
											</p>
										</div>
										<div class="char">
											<p>
												<span>大数据分析火灾</span>
												<span>智能研判</span>
											</p>
										</div>
									</div>
									<div class="point_tit">
										典型案例
									</div>
									<div class="typi">
										<a href=""><img src="temp/typi1.png" /></a>
										<a href=""><img src="temp/typi2.png" /></a>
									</div>
								</li>

							</ul>
						</div>
						<!--解决方案bannaer-->

					</div>
					<!--方案-->
				</div>

			</div>
			<!--解决方案-->
			<div class="apply_box">
				<div class="apply_tit">
					应用案例
				</div>
				<div class="apply_list">
					<ul class="clearfloat">
						<li>
							<a href="">
								<div class="apply_pic">
									<img src="temp/apply1.png" />
								</div>
								<h1 class="app_name">武汉黄鹤楼</h1>
								<div class="apptext">
									黄鹤楼位于湖北省武汉市长江南岸的武昌蛇山之巅，濒临万里长江，是国家5A级旅游景区。楼高5层，总高度51.4米，建筑面积3219平方米。楼内建筑多为木质材料，为消防安全考虑，XX为黄鹤楼内各区域安装战马智能烟雾报警器。
								</div>
							</a>
						</li>
						<li class="active">
							<a href="">
								<div class="apply_pic">
									<img src="temp/apply2.png" />
								</div>
								<h1 class="app_name">盐城城南新区新河街道</h1>
								<div class="apptext">
									新河街道环境比较复杂，火灾隐患较大，新河商业街最近几年就发生了多起火灾。城南新区新河街道联合盐城市消防支队，在整个街道重点商户、群租房、养老院、新河街道本部安装XXNB-IoT智慧烟感。并在此次展示会上，向省总队领导介绍了XX...
								</div>
							</a>
						</li>
						<li>
							<a href="" class="clearfloat">
								<div class="apply_pic clearfloat">
									<img src="temp/apply3.png" />
								</div>
								<h1 class="app_name">无锡恒隆广场</h1>
								<div class="apptext">
									无锡恒隆广场（一期）的面积达262,720平方米，包括购物商场及甲级办公楼群。为保障消防安全，XX为恒楼广场设计消防安装部署方案并派工程队前往安装。
								</div>
							</a>
						</li>
					</ul>
				</div>

			</div>
			<!--应用案例-->
			<div class="friendbox">
				<div class="fr_tit">
					合作伙伴
				</div>

				<div class="friend">
					<ul class="clearfloat">
						<li>
							<a href=""><img src="temp/friend1.png" /></a>
						</li>
						<li>
							<a href=""><img src="temp/friend2.png" /></a>
						</li>
						<li>
							<a href=""><img src="temp/friend3.png" /></a>
						</li>
						<li>
							<a href=""><img src="temp/friend4.png" /></a>
						</li>
						<li>
							<a href=""><img src="temp/friend5.png" /></a>
						</li>
						<li>
							<a href=""><img src="temp/friend6.png" /></a>
						</li>
						<li>
							<a href=""><img src="temp/friend7.png" /></a>
						</li>
						<li>
							<a href=""><img src="temp/friend8.png" /></a>
						</li>
					</ul>
				</div>
			</div>
			<!--合作伙伴-->
			<div class="footerbox">
				<div class="footer clearfloat">
					<div class="hot_line">
						<div class="hot_tit">
							<span>售前咨询热线</span>
						</div>
						<div class="call">
							400-888-8888
						</div>
						<div class="qqin">
							QQ咨询
						</div>
					</div>
					<div class="fast_nav">
						<div class="fast_tit">
							快速导航
						</div>
						<div class="fast_list">
							<p><a href="tmc1.html">产品中心</a></p>
							<p><a href="solve.html">解决方案</a></p>
							<p><a href="case.html">应用案例</a></p>
							<p><a href="agent.html">招商代理</a></p>
							<p><a href="about.html">关于我们</a></p>
						</div>
					</div>
					<div class="contus">
						<div class="fast_tit">
							联系我们
						</div>
						<div class="fast_list">
							<p>武汉XX科技有限公司</p>
							<p>地址：湖北省武汉市洪山区光谷XX大厦</p>
							<p>邮箱：admin@axycloud.com</p>
							<p>电话：400-888-8888</p>
						</div>
					</div>
					<div class="code">
						<div class="code_pic">
							<img src="temp/code.png" />
						</div>
						<div class="code_text">
							微信公众号
						</div>
					</div>
				</div>
				<div class="copy">
					&copy; <script>document.write(new Date().getFullYear());</script> XX公司&nbsp;&nbsp;ICP备XXXXXXXX号&nbsp;&nbsp;友情链接：<a style="color:#fff;" href="https://www.axycloud.com/" title="智慧消防" target="_blank">智慧消防（www.axycloud.com）</a>
				</div>
			</div>

			<div class="contact">
				<div class="callbox">
					<span>&#xe606;</span>
					<div class="call_num">
						400-888-8888
					</div>
				</div>
				<div class="wxbox">
					<span></span>
					<div class="wxpic">
						<img src="temp/weixin.png" />
					</div>
				</div>
				<div class="return">
					<span></span>
					<!--<img src="images/return.png"/>-->
				</div>
			</div>
		</div>
		<!--右侧返回顶部-->

	</body>

	<script>var banner = function() {
			(function(obj) {
				obj.win = {
					loopFun: function(el, val, bg, color, textColor, fontSize, size, r, time, easing) {
						var si = r + size / 2;
						var xy = r + size;
						if (val < 0 || val > 100) {
							return alert('请输入0~100之间的数')
						}
						var paper = Raphael(el, (r + size) * 2, (r + size) * 2);
						paper.circle(xy, xy, r).attr({
							'stroke-width': size,
							stroke: bg
						});
						paper.customAttributes.arc = function(val) {
							var v = 360 * val / 100,
								s = -180,
								e = s + v,
								x = xy,
								y = xy,
								rad = Math.PI / 180,
								x1 = x + r * Math.sin(-s * rad),
								y1 = y + r * Math.cos(-s * rad),
								x2 = x + r * Math.sin(-e * rad),
								y2 = y + r * Math.cos(-e * rad),
								path = [
									['M', x1, y1],
									['A', r, r, 0, +(e - s > 180), 1, x2, y2]
								];
							return {
								path: path
							};
						};
						var an = paper.path().attr({
							'stroke-width': size,
							stroke: color,
							arc: 0.01
						});
						an.animate({
							stroke: color,
							arc: val
						}, time, easing);
						setTimeout(function() {
							if (val == 100) {
								paper.circle(xy, xy, r).attr({
									'stroke-width': size,
									stroke: color
								});
							}
						}, time);
						paper.customAttributes.txt = function(val) {
							return {
								text: Math.floor(val * 100) / 100 + '%'
							}
						};
						var l = paper.text(xy, xy).attr({
							txt: 0,
							'fill': textColor,
							'font-size': fontSize,
							'font-weight': 700
						});
						l.animate({
							txt: val
						}, time);
					},
					stripFun: function(el, val, bg, color, textColor, fontSize, lenght, size, time, easing) {
						var s = size / 2;
						if (val < 0 || val > 100) {
							return alert('请输入0~100之间的数')
						}
						var paper = Raphael(el, lenght, size);
						paper.path('M 0,' + s + ' L' + lenght + ',' + s).attr({
							'stroke-width': size,
							stroke: bg
						});
						var strip = paper.path('M 0,' + s + ' L0,' + s).attr({
							'stroke-width': size,
							stroke: color
						});
						strip.animate({
							path: 'M 0,' + s + ' L' + lenght / 100 * val + ',' + s
						}, time, easing);
						paper.customAttributes.arc = function(val) {
							return {
								text: Math.floor(val * 100) / 100 + '%'
							}
						};
						var l = paper.text(lenght / 2, s).attr({
							arc: 0,
							'fill': textColor,
							'font-size': fontSize
						});
						l.animate({
							arc: val
						}, time);
					}
				};
			})(window);
			win.loopFun($('.num li.active')[0], 100, '#808080', '#ffffff', 'none', '2px', 2, 7, 5000, 'linear');
			var widths = $(".banner").width();
			var lengths = $('.bannerul li').length;
			$('.bannerul').append($('.bannerul li').first().clone());
			var sid = null;
			var index = 0;
			$('.bannerul li').width(widths)

			function play() {
				index++;
				if (index == $('.bannerul li').length) {
					index = 1;
					$('.bannerul').stop().animate({
						'margin-left': 0
					}, 0)
				}
				if (index == $('.bannerul li').length - 1) {
					$(' .num li').eq(0).addClass('active').siblings().removeClass('active');
					$(' .num li').eq(0).siblings("li").removeClass('active');
				}
				core(index);
			}
			sid = setInterval(play, 5000);
			$(' .banner').hover(function() {
				clearInterval(sid)
			}, function() {
				sid = setInterval(play, 5000);
			})
			$(".num li").click(function() {
				index = $(this).index();
				core(index);
			})

			function core(num) {
				$('.bannerul').stop().animate({
					'margin-left': -($('.bannerul li').eq(0).innerWidth() * num)
				}, 1000);
				$(' .num li').eq(num).addClass('active').siblings().removeClass('active');
				win.loopFun($('.num li.active')[0], 100, '#808080', '#ffffff', 'none', '2px', 2, 7, 5000, 'linear');
				$(' .num li').eq(num).siblings("li").find("svg").remove()
					//          console.log(num)
			}
		}
		banner();
	</script>

</html>

 

​
posted @ 2024-12-13 10:01  骑着乌龟奔跑的蜗牛  阅读(53)  评论(0)    收藏  举报