更新：首页和导航菜单样式调整

public/static/common/bdMap.js

@@ -0,0 +1,144 @@
+//先要加载接口，要在函数外，保证先加载
+document.write('<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=O4aFVMSLVl1aiTX2sF40aVfC"></script>');
+
+//显示地图
+//参数：显示容器ID，属性(city,addr,title,lawfirm,tel,user,mapx,pic,ismove,piobj,zoom)
+function ShowMap(objname,options){
+	if(options){
+		this._city = options.city ? options.city : ""; //城市
+		this._addr = options.addr ? options.addr : ""; //地址
+		this._title = options.title ? options.title : ""; //信息窗口标题
+		this._lawfirm = options.lawfirm ? options.lawfirm : ""; //律所
+		this._tel = options.tel ? options.tel : ""; //电话
+		this._user = options.user ? options.user : ""; //主任
+		this._mapx = options.mapx ? options.mapx : ""; //地图坐标
+		this._pic = options.pic ? options.pic : ""; //图片
+		this._ismove = options.ismove ? options.ismove : "0"; //是否拖动，1为拖动为设置标注，0为显示。默认0
+		this._piobj = options.piobj ? options.piobj : ""; //接收拖动坐标的表单ID
+		this._zoom = options.zoom ? options.zoom : "14"; //放大级别，默认14
+	}
+	//设定初始坐标
+	var point=new BMap.Point(113.63156,34.83794);
+	//范围为3-18级
+	var zoom=this._zoom;
+
+	//创建地图
+	var map = new BMap.Map(objname);
+	//map.enableScrollWheelZoom();
+	var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM};
+	map.addControl(new BMap.NavigationControl(opts));
+	map.centerAndZoom(point, zoom);//设初始化地图。
+
+	//设置版权控件位置
+	var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_LEFT});
+	map.addControl(cr); //添加版权控件
+	var bs = map.getBounds(); //返回地图可视区域
+
+	//坐标不为空时按坐标显示
+	if (this._mapx != ""){
+		var mx=this._mapx.substr(0,this._mapx.indexOf(","));
+		var my=this._mapx.substr(this._mapx.indexOf(",")+1);
+		point=new BMap.Point(mx,my);
+		map.centerAndZoom(point, zoom); //重新调整位置
+	}
+	//否则按地址显示
+	else if (this._addr != ""){
+		//创建地址解析器实例   
+		var myGeo = new BMap.Geocoder();    
+		//将地址解析结果显示在地图上，并调整地图视野。此过程为异步，所以要重设标注 
+		myGeo.getPoint(this._addr, function(poi){
+			map.centerAndZoom(poi, zoom);
+			marker.setPosition(poi); //重调标注位置
+		}, this._city);
+	}
+	//否则按城市显示
+	else if (this._city != ""){
+		map.setCenter(this._city); //设置地图中心点。
+		//此定位无具体坐标，所以显示模式时要清除标注。要延时处理
+		if (this._ismove=="0"){setTimeout(function(){map.clearOverlays();}, 1000);}
+	}
+	//都为空按IP定位
+	else{
+		//创建一个获取本地城市位置的实例
+		var myCity = new BMap.LocalCity();
+		//获取城市
+		myCity.get(function(result){map.setCenter(result.name);});
+		if (this._ismove=="0"){setTimeout(function(){map.clearOverlays();}, 1000);}
+	}
+	
+	var icosize = 50;
+	var myIcon = new BMap.Icon("image/icomap.png", new BMap.Size(icosize,icosize));
+
+	//创建标注
+	var marker = new BMap.Marker(point,{icon:myIcon});
+	//var marker = new BMap.Marker(point);
+	map.addOverlay(marker); // 将标注添加到地图中
+	
+	//设置标注时
+	if (this._ismove=="1"){
+		marker.enableDragging(); //可拖拽
+		var label = new BMap.Label("拖拽到您的位置",{offset:new BMap.Size(20,-15)});
+		label.setStyle({ backgroundColor:"red", color:"white", fontSize : "12px" });
+		marker.setLabel(label);
+
+		var poj=this._piobj; //过程里不支持this，要传给变量
+		
+		//拖拽设置位置
+		marker.addEventListener("dragend", function(e){
+			try{document.getElementById(poj).value = e.point.lng + "," + e.point.lat;}catch (ex) {}
+		});
+		//点击设置位置
+		map.addEventListener("click", function(e){
+			marker.setPosition(e.point); //重调标注位置
+			try{document.getElementById(poj).value = e.point.lng + "," + e.point.lat;}catch (ex) {}
+		});
+	}
+
+	//显示标注时
+	if (this._ismove=="0"){
+		//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
+		
+		//显示窗口设置
+		var opts = {width:250,height:110,title : "<font color=green size=3>" + this._title + "</font>"} //窗口标题
+		var infotxt="<table border='0'><tr><td valign='top'>"; //窗口内容
+		if (this._pic != ""){infotxt += "<img src='"+this._pic+"' id='picid' style='float:left;margin-right:5px;padding-top:8px;' width=50>";}
+		infotxt += "</td><td><p style='font-size:12px;line-height:16px;padding-top:8px;'>";
+		if (this._lawfirm !=""){infotxt += "<b>公司：</b>" + this._lawfirm + "<br/>";};
+		if (this._addr !=""){infotxt += "<b>地址：</b>" + this._addr + "<br/>";};
+		if (this._tel !=""){infotxt += "<b>电话：</b>" + this._tel + "<br/>";};
+		if (this._user !=""){infotxt += "<b>联系人：</b>" + this._user + "<br/>";};
+		infotxt += "</p></td></tr></table>";
+		
+		//显示文本标题
+		var label2 = new BMap.Label(this._title,{offset:new BMap.Size(20,-15)});
+		label2.setStyle({ backgroundColor:"red", color:"white", fontSize : "12px" });
+		//marker.setLabel(label2);
+
+		//创建信息窗口
+		var infoWindow = new BMap.InfoWindow(infotxt,opts);
+//		marker.addEventListener("mouseover", function(){
+//			this.openInfoWindow(infoWindow);
+//			//图片加载完毕重绘infowindow。防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
+//			document.getElementById('picid').onload = function (){infoWindow.redraw();}
+//		});
+	}
+}
+
+
+//获取地理位置,间隔符
+//百度查询接口为异步，所以这里要用异步回调方式
+function getBDAddress(callBackFun,spStr){
+	if (!spStr){spStr="";} //分隔符，默认空
+	var geolocation = new BMap.Geolocation();
+	geolocation.getCurrentPosition(function(r){
+		if(this.getStatus() == BMAP_STATUS_SUCCESS){
+			var point = new BMap.Point(r.point.lng,r.point.lat);
+			var gc = new BMap.Geocoder();    
+			gc.getLocation(point, function(rs){
+				var addComp = rs.addressComponents;
+				var addVal = addComp.province + spStr + addComp.city + spStr + addComp.district + spStr + addComp.street + spStr + addComp.streetNumber;
+				callBackFun(addVal);
+			});
+		}
+	},{enableHighAccuracy: true})
+}

public/static/css/style.css

@@ -0,0 +1,337 @@
+@charset "utf-8";
+/* CSS Document */
+/*公用代码*/
+body,html{background:none repeat scroll 0 0;font:100% arial,verdana;}
+body{overflow-x:hidden;color:#333;}
+blockquote,body,button,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;text-shadow:none;}
+label input{vertical-align:middle;text-shadow:none;}
+*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
+a{-webkit-transition:all .5s;-moz-transition:all .5s;transition:all .5s;}
+a:hover{ color: #578df3;}
+:hover,a:active,a:focus,a:hover,a:link,a:visited{text-decoration:none;text-shadow:none;}
+img{max-width:100%;border:0;}
+i{ font-style: initial;}
+table{border-collapse:collapse;}
+ul li{list-style:none outside none;}
+input,select,textarea{outline:medium none; resize: none;}
+.f-l{float:left;}
+.f-l,.f-r{display:inline-block;}
+.f-r{float:right;}
+.t-l{text-align:left;}
+.t-c{text-align:center;}
+.t-r{text-align:right;}
+.top10{margin-top:10px;}
+.top20{margin-top:20px;}
+.top30,.top40{margin-top:30px;}
+.top50{margin-top:50px;}
+.top60{margin-top:60px;}
+.top70{margin-top:70px;}
+.top80{margin-top:80px;}
+.bg-w{background:#fff;}
+.w-100{width:100%; float: left;}
+.w-1200{margin:auto;width:1200px;}
+.w-1500{margin: auto; width: 1500px;}
+
+
+/* 布局样式 */
+.between-top{ display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; }
+.between-center{ display: flex; display: -webkit-flex; justify-content: space-between; align-items: center; -webkit-justify-content: space-between; -webkit-align-items: center; }
+.between-bottom{ display: flex; display: -webkit-flex; justify-content: space-between; align-items: flex-end; -webkit-justify-content: space-between; -webkit-align-items: flex-end; }
+.center-center{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
+.around-center{ display: flex; display: -webkit-flex; justify-content: space-around; align-items: center; -webkit-justify-content: space-around; -webkit-align-items: center; }
+.column-between{ display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: space-between; -webkit-justify-content: space-between; }
+.column-around{ display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: space-around; -webkit-justify-content: space-around; }
+
+/* 文字超出隐藏省略号 */
+.text-one-hide{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
+.text-two-hide{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
+.text-three-hide{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
+
+/*nav*/
+/**/
+.nav ul li{ float: left; position: relative; margin-left: 20px; transition: all .6s;}
+.nav ul li span a{ float: left; font-size: 1.125rem; line-height: 5.9375rem; padding: 0 16px; position: relative; text-decoration: none; color: #fff;}
+.nav ul li span a::before{ content: ''; width: 0; height: 4px; position: absolute; left: 0; bottom: 0; background: #F9BE3E; transition: all .6s; opacity: 0;}
+.nav ul li:hover span a{ color: #fff !important;}
+.nav ul li:hover span a::before{ opacity: 1; width: 100%;}
+/*二级控制*/
+.nav ul li .nav-second{ width: 100%; position: absolute; left: 50%; top: 100%; background: #00418f; opacity: 0; transform: translate(-50%,0); transition: all .6s;}
+.nav ul li .nav-second a{ width: 100%; float: left; color: #fff; text-align: center; height: 0; font-size: 1rem;}
+.nav ul li .nav-second a:hover{ color: #F9BE3E;}
+/*三级级控制*/
+.nav ul li .nav-second .nav-three{ width: 100%; position: relative; display: block; float: left;}
+.nav ul li .nav-second .nav-three:hover p a{ background: #fff; color: #0c253b;}
+.nav ul li .nav-second .nav-three div{ position: absolute; left: 100%; top: -10px; background: #f75c9a; padding: 10px 0; display: none;}
+.nav ul li .nav-second .nav-three div::before{ content: ''; width: 10px; height: 50px; position: absolute; left: -10px; top: 0;}
+.nav ul li .nav-second .nav-three div a{ display: block; white-space: nowrap;}
+.nav ul li .nav-second .nav-three:hover div{ display: block;}
+/*hover*/
+.nav ul li:hover .nav-second{ padding: 0.625rem; opacity: 1;}
+.nav ul li:hover .nav-second a{ height: 2.5rem; line-height: 2.5rem;}
+.nav ul li.active span a::before{ width: 100%; opacity: 1;}
+/*icon*/
+.nav_btn{ width: 24px; float: right; position: relative; cursor: pointer; display: none; margin-top: 5px;}
+.nav_btn i{ display: block; width: 100%; height: 2px; float: left; background-color: #fff; border-radius: 50px;
+	transition: all .5s ease 0s;
+	-webkit-transition: all .5s ease 0s;
+	-moz-transition: all .5s ease 0s;
+}
+.nav_btn i.bar-top{ margin-top: 0;}
+.nav_btn i.bar-cen{ margin-top: 6px;}
+.nav_btn i.bar-bom{ margin-top: 6px;}
+.nav_btn.cur i.bar-cen{ opacity: 0;}
+.nav_btn.cur i.bar-top{ -webkit-transform:rotate(45deg) translate(6px, 6px);transform:rotate(45deg) translate(6px, 6px);}
+.nav_btn.cur i.bar-bom{ -webkit-transform: rotate(-45deg) translate(5.5px, -5px);transform: rotate(-45deg) translate(5.5px, -5px);}
+/*隐藏*/
+.overHide{ overflow: hidden;}
+
+
+.all-center-box{ width: 100%; float: left;}
+
+.head-box{ position: absolute; left: 0; top: 4rem; z-index: 99; color: #fff; transition: all .6s;}
+.head-box .center-block{ background: #00418f; box-shadow: 0 0 0.625rem rgba(0,0,0,0.1);}
+.head-box .center-block .logo{ width: 14.375rem; height: 5.9375rem; text-align: center; background: #fff;}
+.head-box .center-block .logo img{ height: 3.625rem;}
+.head-box .center-block .language{ font-size: 1.125rem; padding:0 2.5rem;}
+.head-box .center-block .language a{ color: #fff;}
+.head-box .center-block .language a.active{ font-weight: bold;}
+.head-box .center-block .language a:hover{ color: #F9BE3E;}
+.head-box.active{ top: 2rem;}
+
+
+.banner-box{ height: 100vh;}
+.banner-box .swiper-container{ height: 100%;}
+.banner-box .swiper-container .swiper-slide{ background-position: center; background-size: cover; background-color: #ccc;}
+.banner-box .swiper-container .swiper-slide .pull-left{ color: #fff;}
+.banner-box .swiper-container .swiper-slide .pull-left p{ font-size: 4.375rem; transform: translate(3.125rem,0); opacity: 0; transition: all .6s;}
+.banner-box .swiper-container .swiper-slide .pull-left i{ font-size: 1.25rem; line-height: 1.6; display: block; margin-top: 1.25rem; transform: translate(3.125rem,0); opacity: 0; transition: all .6s ease .1s;}
+.banner-box .swiper-container .swiper-slide .w-1500.active .pull-left p{ opacity: 1; transform: translate(0,0);}
+.banner-box .swiper-container .swiper-slide .w-1500.active .pull-left i{ opacity: 1; transform: translate(0,0);}
+.banner-box .swiper-container .swiper-slide .w-1500.active .pull-left a{ opacity: 1; transform: translate(0,0);}
+
+.banner-box .swiper-page{ width: 100%; position: absolute; left: 0; bottom: 4rem;}
+.banner-box .swiper-container .swiper-pagination{ position: relative; float: left;}
+.banner-box .swiper-container .swiper-pagination .swiper-pagination-bullet{ width: 10px; height: 10px; outline: none; margin-right: 1.25rem;}
+.banner-box .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #fff;}
+
+.all-title-box1{ font-weight: 100;}
+.all-title-box1 span{ display: block; font-size: 2.25rem;}
+.all-title-box1 p{ font-size: 1.25rem; text-transform: uppercase; margin-top: 0.3125rem;}
+
+.home-box1{ background: #f5f5f5; padding: 4.0625rem 0;}
+.home-box1 .center-block ul{ margin: 1.875rem -8px 0;}
+.home-box1 .center-block li{ width: 16.666%; float: left; padding: 0 8px; transition: all .6s;}
+.home-box1 .center-block .box-info{ width: 100%; height: 65vh; position: relative; background-position: center; background-size: cover; overflow: hidden;}
+.home-box1 .center-block .box-info::after{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; transition: all .6s;}
+.home-box1 .center-block .box-info::before{ content: ''; width: 2px; height: 56px; background: #ACACAC; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;}
+.home-box1 .center-block .box-info .box1{ width: 100%; position: absolute; left: 0; top: 8vh; z-index: 3; text-align: center; color: #444;}
+.home-box1 .center-block .box-info .box1 span{ display: block; font-size: 1.625rem;}
+.home-box1 .center-block .box-info .box1 p{ font-size: 1.375rem; margin-top: 0.5rem;}
+.home-box1 .center-block .box-info .box2{ width: 100%; position: absolute; left: 0; bottom: 6vh; z-index: 3; padding: 0 2.5rem;}
+.home-box1 .center-block .box-info .box2 a{ position: absolute; left: 2.5rem; bottom: 0; opacity: 0; color: #fff;}
+.home-box1 .center-block .box-info .box2 i{ width: 100%; float: right; display: block; font-size: 2.1875rem; line-height: 2.1875rem; transition: all .6s; text-align: center; color: #444;}
+
+.home-box1 .center-block li.active{ width: 50%;}
+.home-box1 .center-block li.active .box-info::after{ opacity: 0;}
+.home-box1 .center-block li.active .box-info::before{ opacity: 0;}
+.home-box1 .center-block li.active .box-info .box1{ text-align: left; color: #fff; padding: 0 2.5rem;}
+.home-box1 .center-block li.active .box-info .box2 a{ opacity: 1;}
+.home-box1 .center-block li.active .box-info .box2 i{ width: 0; margin-right: 2.5rem; color: #fff;}
+
+.home-box2{ height: 100vh; background: url(../image/ho2_bg.jpg) center #00418f; background-size: cover;}
+.home-box2 .pull-left{ height: 100vh; padding: 6.25rem 0; color: #fff;}
+.home-box2 .pull-left a{ color: #fff;}
+
+.home-box3{ padding: 3.4375rem 0;}
+.home-box3 .top-box .between-bottom{ float: left;}
+.home-box3 .top-box span{ font-size: 2.25rem;}
+.home-box3 .top-box i{ font-size: 1.5rem; margin-left: 0.875rem;}
+.home-box3 .lower-box ul{ width: 38%; float: left; margin-top: 2.8125rem;}
+.home-box3 .lower-box ul:nth-child(2n){ float: right;}
+.home-box3 .lower-box ul p{ width: 100%; float: left; font-size: 1.5rem; border-bottom: 1px solid #888; margin-bottom: 0.625rem; padding-bottom: 0.9375rem;}
+.home-box3 .lower-box ul li{ width: 100%; float: left;}
+.home-box3 .lower-box ul li a{ width: 100%; float: left; line-height: 2.8125rem;}
+.home-box3 .lower-box ul li a span{ width: 70%; float: left;}
+.home-box3 .lower-box ul li a i{ float: right;}
+
+.foot-box{ background: #00418f; padding: 3.75rem 0; color: #fff;}
+.foot-box a{ color: #fff;}
+.foot-box .top-box .fl img{ height: 67px;}
+.foot-box .top-box .fr a{ float: left; margin-left: 3.125rem; font-size: 1.125rem;}
+.foot-box .lower-box{ display: flex; justify-content: space-between; margin-top: 3.75rem; font-size: 1rem; line-height: 1.6;}
+.foot-box .lower-box .column-between p i{ font-size: 0.75rem; line-height: 1.4; display: inline-block;}
+.foot-box .lower-box .column-between p span{ font-size: 0.875rem;}
+.foot-box .lower-box .ewm{ text-align: center;}
+.foot-box .lower-box .ewm img{ width: 134px;}
+
+.page-banner{ height: 40.625rem; position: relative; background-position: center; background-size: cover; position: relative; z-index: 2;}
+.page-banner .info{ width: 100%; position: absolute; left: 0; bottom: 2.5rem; color: #fff; padding-bottom: ;}
+.page-banner .info strong{ font-size: 3.125rem; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
+.page-banner .info p{ font-size: 1.875rem; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
+.page-banner .info .w-1200{ position: relative;}
+.page-banner .info .w-1200::after{ content: ''; width: 5rem; height: 6.5625rem; background: url(../image/icon_jt2.png) no-repeat center #fff; background-size: 2.125rem; box-shadow: 0 0 5px rgba(0,0,0,0.3); position: absolute; left: 0; top: 100%; margin-top: 0.9375rem;}
+
+.all-title-box2 span{ display: block; font-size: 2.7rem;}
+.all-title-box2 p{ font-size: 1.125rem; color: #666; margin-top: 0.1875rem;}
+
+.about-box1{ height: 100vh; position: relative;}
+.about-box1::after{ content: ''; width: 100%; height: 30vh; background: url(../image/ab1_bg.jpg) no-repeat center; position: absolute; left: 0; bottom: 0; z-index: -1;}
+.about-box1 .pull-left{ width: 42%;}
+.about-box1 .pull-right{ width: 55%;}
+.about-box1 .pull-right .box-info{ font-size: 0.875rem; color: #999; line-height: 1.6; margin-top: 1.25rem;}
+
+.about-box2{ padding: 5rem 0;}
+.about-box2 .top-box .all-title-box2{ padding-right: 1.25rem;}
+.about-box2 .top-box .all-title-box2 span{ white-space: nowrap;}
+.about-box2 .top-box .fr{ width: 100%; text-align: right; border-bottom: 2px solid #cbcbcb;}
+.about-box2 .top-box .fr span{ display: inline-block; margin-left: 6.25rem; font-size: 1.5625rem; font-weight: bold; color: #555; cursor: pointer; line-height: 3.75rem; border-bottom: 3px solid #fff; transition: all .6s;}
+.about-box2 .top-box .fr span.active,.about-box2 .top-box .fr span:hover{ border-color: #f8bc38;}
+.about-box2 .lower-box{ padding-left: 12.1875rem; background: url(../image/ab2_bg.jpg) no-repeat left; background-size: 7.9375rem; margin-top: 3.75rem; position: relative; min-height: 41.875rem;}
+.about-box2 .lower-box .pull-left{ width: 50%;}
+.about-box2 .lower-box .pull-left ul li{ width: 100%; padding: 2.5rem; box-shadow: 0.3125rem 0.3125rem 0.625rem rgba(0,0,0,0.3);}
+.about-box2 .lower-box .pull-left ul li img{ width: 100%;}
+.about-box2 .lower-box .pull-right{ width: 38%; height: 41.875rem; overflow: auto; position: absolute; right: 0; top: 0;}
+.about-box2 .lower-box .pull-right ul li{ width: 100%; float: left; font-size: 16px; color: #888; margin-bottom: 25px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; transition: all .6s;}
+.about-box2 .lower-box .pull-right ul li::after{ content: ''; width: 0; height: 1px; background: #003486; position: absolute; left: 0; top: 50%; transition: all .6s;}
+.about-box2 .lower-box .pull-right ul li:hover,.about-box2 .lower-box .pull-right ul li.active{ padding-left: 2.9rem; color: #003486;}
+.about-box2 .lower-box .pull-right ul li:hover::after,.about-box2 .lower-box .pull-right ul li.active::after{ width: 2.625rem;}
+
+.about-box3{ padding: 3.75rem 0; background: #F5F5F5;}
+.about-box3 .box-info{ margin-top: -5rem;}
+
+.about-box4{ padding: 3.75rem 0;}
+
+
+
+
+
+
+
+
+
+
+
+
+/* 小于等于多少高度的样式 */
+@media screen and (max-height:880px){
+}
+@media screen and (max-height:600px){
+}
+/* 小于等于多少宽度的样式 */
+@media screen and (max-width:1660px){
+    html,body{ font-size: 94%;}
+    .w-1500{ width: 94%;}
+}
+@media screen and (max-width:1440px){
+    html,body{ font-size: 80%;}
+    .w-1500{ width: 1200px;}
+}
+@media screen and (max-width:1366px){
+}
+@media screen and (max-width:1200px){
+    .w-1200{ width: 94%;}
+    .w-1500{ width: 94%;}
+}
+@media screen and (max-width:1100px){
+    
+}
+@media screen and (max-width:1024px){
+    html,body{ font-size: 70%;}
+	/*nav*/
+    .nav_btn{ display: block; margin:0 3% 0 0;}
+    .nav_btn.cur i{ background: #00418f;}
+    .nav{ width: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.9); padding: 10vh 0 10px; height: 100vh; transition: all .6s; transform: translate(100%,0); display: block;}
+    .nav ul li{ width: 100%; margin-left: 0;}
+    .nav ul li span{ width: 100%; float: left; text-align: center;}
+    .nav ul li span a{ display: inline-block; line-height: 35px; float: none; margin: auto; font-size: 14px; padding: 0; color: #333;}
+    .nav ul li span a::before{ display: none;}
+    .nav ul li span.active a::after{ content: ''; width: 13px; height: 97%; background: url(../image/icon_jt1.png) no-repeat center; background-size: 100%; position: absolute; right: -20px; top: 1px; pointer-events: none;}
+    .nav ul li .nav-second{ position: relative; top: 0; width: 100%; overflow: initial; display: block; float: left;}
+    .nav ul li .nav-second a{ min-width: 100%; margin: 0; font-size: 12px;}
+    .nav ul li:hover span a{ color: #00418f !important;}
+    .nav ul li:hover span a::after{}
+    .nav ul li:hover .nav-second a{ height: 2.0625rem; line-height: 2.0625rem;}
+    .nav ul li:hover .nav-second{ padding: 10px 10px;}
+    .nav.active{ transform: translate(0,0);}
+	/*nav end*/
+    
+    .head-box{ position: fixed;}
+    .head-box,.head-box.active{ top: 0;}
+    .head-box .w-1500{ width: 100%;}
+    .head-box .center-block .logo{ width: 35%; height: 50px;}
+    .head-box .center-block .logo img{ height: 2.5rem;}
+    
+    .banner-box .swiper-container .swiper-slide .w-1500 .pull-left p{ font-size: 1.5rem;}
+    .banner-box .swiper-container .swiper-slide .w-1500 .pull-left i{ font-size: 0.75rem; line-height: 1.4; margin-top: 0.9375rem;}
+    .banner-box .swiper-page{ bottom: 1rem;}
+    
+    .home-box1{ padding: 1.5625rem 0;}
+    .home-box1 .center-block{ margin-top: 1.5625rem;}
+    .home-box1 .center-block ul{ margin: auto;}
+    .home-box1 .center-block li{ width: 100% !important; padding: 0;}
+    .home-box1 .center-block .box-info{ height: 20rem;}
+    .home-box1 .center-block .box-info::before{ top: 60%;}
+    .home-box1 .center-block .box-info .box1{ top: 1.5625rem;}
+    .home-box1 .center-block .box-info .box2{ bottom: 1.5625rem;}
+    
+    .home-box2{ height: 19.75rem;}
+    .home-box2 .pull-left{ padding: 1.5625rem 0; height: 19.75rem;}
+    
+    .home-box3{ padding: 1.5625rem 0;}
+    .home-box3 .lower-box ul{ width: 100%; margin-top: 1.125rem;}
+    
+    .foot-box{ padding: 1.5625rem 0;}
+    .foot-box .top-box .fl img{ height: 3.5rem;}
+    .foot-box .top-box .fr{ display: none;}
+    .foot-box .lower-box{ display: block; margin-top: 0.5rem;}
+    .foot-box .lower-box>div{ margin-top: 0.8rem;}
+    .foot-box .lower-box .ewm{ display: none;}
+    
+    .page-banner{ height: 20rem;}
+    .page-banner .info .w-1200::after{ display: none;}
+    .page-banner .info strong{ font-size: 2.5rem;}
+    .page-banner .info p{ font-size: 1.5rem; margin-top: 0.625rem;}
+    
+    .all-title-box2 span{ font-size: 2.2rem;}
+    
+    .about-box1{ height: auto; padding: 1.875rem 0;}
+    .about-box1 .pull-left,.about-box1 .pull-right{ width: 100%;}
+    .about-box1 .pull-right{ margin-top: 1.25rem;}
+    .about-box1::after{ background-size: 94%; background-position: bottom; bottom: 1.25rem;}
+    
+    .about-box2{ padding: 1.5625rem 0;}
+    .about-box2 .top-box .fr span{ margin-left: 1rem;}
+    .about-box2 .lower-box{ padding: 0; margin-top: 1.5625rem; background: none;}
+    .about-box2 .lower-box .pull-left{ width: 100%;}
+    .about-box2 .lower-box .pull-left ul li{ padding: 1.25rem;}
+    .about-box2 .lower-box .pull-right{ width: 100%; position: relative; height: 12.5rem; margin-top: 1.5625rem;}
+    .about-box2 .lower-box .pull-right ul li{ margin-bottom: 0.9375rem;}
+    
+    .about-box3{ padding: 1.5625rem 0;}
+    .about-box3 .box-info{ margin-top: 1.25rem;}
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+}
+@media screen and (max-width:768px){
+}
+@media screen and (max-width:480px){
+}
+@media screen and (max-width:365px){
+}

public/static/js/script.js

@@ -0,0 +1,90 @@
+window.onload;
+$(window).resize(wah);
+
+function wah() {
+
+}
+
+$(window).scroll(function(event) {
+    // if ($(window).scrollTop() > 0) {
+    //     $('.head-box').addClass('active');
+    // } else {
+    //     $('.head-box').removeClass('active');
+    // }
+    if ($(window).scrollTop() > 400) {
+        $('.gotop').fadeIn();
+    } else {
+        $('.gotop').fadeOut();
+    }
+})
+
+$(window).on("load", function() {
+    setTimeout(function() {
+        $('.loading').fadeOut();
+    }, 4000)
+})
+
+$(function() {
+
+    $('.nav_btn').click(function() {
+        if ($('.nav_btn').attr('class') == 'nav_btn cur') {
+            $('.nav_btn').removeClass('cur');
+            $('.nav').removeClass('active');
+            $('body').css('overflow', 'inherit');
+        } else {
+            $('.nav_btn').addClass('cur');
+            $('.nav').addClass('active');
+            $('body').css('overflow', 'hidden');
+        }
+    });
+    
+    $('.home-box1 .center-block li').hover(function(){
+        if($(this).attr('class') != 'active'){
+            $('.home-box1 .center-block li').removeClass('active').eq($(this).index()).addClass('active')
+        }
+    })
+    
+    $('.about-box2 .top-box .fr span').removeClass('active').eq(0).addClass('active')
+    $('.about-box2 .lower-box').hide().eq(0).show();
+    $('.about-box2 .top-box .fr span').click(function(){
+        if($(this).attr('class') != 'active'){
+            $('.about-box2 .top-box .fr span').removeClass('active').eq($(this).index()).addClass('active')
+            $('.about-box2 .lower-box').hide().eq($(this).index()).show();
+        }
+    })
+    $('.about-box2 .lower-box').each(function(){
+        var that = $(this)
+        that.find('.pull-right ul li').removeClass('active').eq(0).addClass('active')
+        that.find('.pull-left ul li').hide().eq(0).show();
+        that.find('.pull-right ul li').click(function(){
+            if($(this).attr('class') != 'active'){
+                that.find('.pull-right ul li').removeClass('active').eq($(this).index()).addClass('active')
+                that.find('.pull-left ul li').hide().eq($(this).index()).show();
+            }
+        })
+    })
+    
+
+
+    $('.ewm_tc').click(function() {
+        $(this).fadeOut();
+    })
+
+    if ($(window).width() <= 768) {
+        $('.home-box1 .center-block li').addClass('active')
+    } else {
+
+    }
+
+
+    $(".gotop").click(function() {
+        var anh = $("body").offset().top;
+        $("html,body").stop().animate({
+            scrollTop: anh
+        }, 1000);
+        scrollAnh = 0;
+        scrollNum = 0;
+    });
+    
+    
+});

view/index/index.html

@@ -1,3 +1,223 @@
 {layout name="layout" /}
 
-首页
+<div class="banner-box w-100">
+    <div class="swiper-container">
+        <div class="swiper-wrapper">
+            <div class="swiper-slide center-center" style="background-image: url(__IMG__/ban_1.jpg);">
+                <div class="w-1500">
+                    <div class="pull-left">
+                        <p>致力于将无穷的光明和动力<br>传输到祖国的大江南北</p>
+                        <i>Great Rivers North and South Committed to <br>Transmitting Infinite Light and Power to the Motherland</i>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide center-center" style="background-image: url(__IMG__/ban_1.jpg);">
+                <div class="w-1500">
+                    <div class="pull-left">
+                        <p>致力于将无穷的光明和动力<br>传输到祖国的大江南北</p>
+                        <i>Great Rivers North and South Committed to <br>Transmitting Infinite Light and Power to the Motherland</i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="swiper-page"><div class="w-1500"><div class="swiper-pagination"></div></div></div>
+    </div>
+</div>
+<div class="all-center-box">
+    <div class="home-box1 w-100">
+        <div class="w-1500">
+            <div class="all-title-box1 w-100"><span>产品中心</span><p>product center</p></div>
+            <div class="center-block w-100">
+                <ul>
+                    <li class="active">
+                        <div class="box-info" style="background-image: url(__IMG__/img_1.jpg);">
+                            <div class="box1">
+                                <span>高压成套设备</span>
+                                <p>High-voltage<br>complete equipment</p>
+                            </div>
+                            <div class="box2">
+                                <a href="">了解详情+</a>
+                                <i>01</i>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="box-info" style="background-image: url(__IMG__/img_1.jpg);">
+                            <div class="box1">
+                                <span>高压成套设备</span>
+                                <p>High-voltage<br>complete equipment</p>
+                            </div>
+                            <div class="box2">
+                                <a href="">了解详情+</a>
+                                <i>02</i>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="box-info" style="background-image: url(__IMG__/img_1.jpg);">
+                            <div class="box1">
+                                <span>高压成套设备</span>
+                                <p>High-voltage<br>complete equipment</p>
+                            </div>
+                            <div class="box2">
+                                <a href="">了解详情+</a>
+                                <i>03</i>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="box-info" style="background-image: url(__IMG__/img_1.jpg);">
+                            <div class="box1">
+                                <span>高压成套设备</span>
+                                <p>High-voltage<br>complete equipment</p>
+                            </div>
+                            <div class="box2">
+                                <a href="">了解详情+</a>
+                                <i>04</i>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="home-box2 w-100">
+        <div class="w-1500">
+            <div class="pull-left column-between">
+                <div class="all-title-box1 w-100"><span>网络营销</span><p>MARKETING NETWORK</p></div>
+                <a href="">了解详情+</a>
+            </div>
+        </div>
+    </div>
+    <div class="home-box3 w-100">
+        <div class="w-1200">
+            <div class="top-box w-100"><div class="between-bottom"><span>新闻动态</span><i>NEWS</i></div></div>
+            <div class="lower-box w-100">
+                <ul>
+                    <p>企业新闻</p>
+                    <li>
+                        <a href="">
+                            <span>超宇助推中国化工企业加速数字化转型</span>
+                            <i>2020-10-10</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <span>超宇助推中国化工企业加速数字化转型</span>
+                            <i>2020-10-10</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <span>超宇助推中国化工企业加速数字化转型</span>
+                            <i>2020-10-10</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <span>超宇助推中国化工企业加速数字化转型</span>
+                            <i>2020-10-10</i>
+                        </a>
+                    </li>
+                </ul>
+                <ul>
+                    <p>行业资讯</p>
+                    <li>
+                        <a href="">
+                            <span>超宇助推中国化工企业加速数字化转型</span>
+                            <i>2020-10-10</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <span>超宇助推中国化工企业加速数字化转型</span>
+                            <i>2020-10-10</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <span>超宇助推中国化工企业加速数字化转型</span>
+                            <i>2020-10-10</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <span>超宇助推中国化工企业加速数字化转型</span>
+                            <i>2020-10-10</i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="foot-box w-100 center-center">
+    <div class="w-1200">
+        <div class="top-box w-100 between-top">
+            <div class="fl"><img src="__IMG__/logo2.png" ></div>
+            <div class="fr">
+                <a href="">首页</a>
+                <a href="">走进超宇</a>
+                <a href="">产品中心</a>
+                <a href="">品质与服务</a>
+                <a href="">营销网络</a>
+                <a href="">新闻动态</a>
+                <a href="">联系我们</a>
+            </div>
+        </div>
+        <div class="lower-box w-100">
+            <div class="column-between">
+                <p>
+                    四川超宇科技有限公司<br>
+                    Sichuan Chaoyu<br>
+                    Technology Co., Ltd.
+                </p>
+                <p><i>Copyright C2020蜀ICP备14003714号-1</i></p>
+            </div>
+            <div class="column-between">
+                <p><span>电话/Tel: 028-8561 6928</span></p>
+                <p><span>邮箱/E-mail: 1825981925@qq.com</span></p>
+                <p>
+                    地址/Add:成都市双流区蛟龙工业港南河路318号<br>
+                    <i>No.318 Nanhe Road, Jiaolong Industrial Area <br>Shuangliu District, Chengdu ,Sichuan Province</i>
+                </p>
+            </div>
+            <div class="ewm"><img src="__IMG__/ewm_1.jpg" ><p>微信二维码/Wechant</p></div>
+        </div>
+    </div>
+</div>
+
+<script>
+    var swiper = new Swiper('.banner-box .swiper-container', {
+        loop: true,
+        speed: 1000,
+        autoplay: {
+            delay: 6000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.banner-box .swiper-button-next',
+            prevEl: '.banner-box .swiper-button-prev',
+        },
+        pagination :{
+            el: '.banner-box .swiper-pagination',
+            clickable :true,
+        },
+        on:{
+            init: function(){
+
+            },
+            transitionEnd: function(){
+                $('.banner-box .swiper-container .swiper-slide .w-1500').eq(this.activeIndex).addClass('active')
+            },
+            transitionStart: function(){
+                $('.banner-box .swiper-container .swiper-slide .w-1500').removeClass('active')
+            },
+        }
+    });
+</script>
+<script>
+    layui.use(['layer', 'form', 'element'], function(){
+      var layer = layui.layer,form = layui.form,element = layui.element;
+    });
+</script>

view/layout.html

@@ -15,16 +15,21 @@
         <meta name="renderer" content="webkit|ie-comp|ie-stand">
         <meta name="Keywords" content="{$seoKeywords??''}">
         <meta name="description" content="{$seoDescription??''}">
-        <link rel="shortcut icon" type="image/ico" href="/favicon.ico">
+        <link rel="shortcut icon" type="image/ico" href="/favicon.ico" >
 
+        <link rel="stylesheet" type="text/css" href="__CSS__/bootstrap.min.css" />
+        <link rel="stylesheet" type="text/css" href="__CSS__/swiper.min.css" />
+        <link rel="stylesheet" type="text/css" href="__MANAGER__/layui/css/layui.css"/>
         <link rel="stylesheet" type="text/css" href="__CSS__/style.css?v={$system.css_version}" />
 
         <script src="__COMMON__/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
+        <script src="__COMMON__/swiper.min.js" type="text/javascript" charset="utf-8"></script>
+        <script src="__MANAGER__/layui/layui.js" type="text/javascript" charset="utf-8"></script>
     </head>
     <body>
         {:widget('menu/index', ['categoryId' => $categoryId])}
         {__CONTENT__}
         {include file="public/footer"}
-    </body>
         <script src="__JS__/script.js?v={$system.js_version}" type="text/javascript" charset="utf-8"></script>
+    </body>
 </html>

view/public/menu.html

@@ -1,17 +1,19 @@
 {php}
 function getMenus($menus, $level = 1, $currentFirstId, $categoryId) {
     $menuHtml = '';
+    $levelList = ['nav-first','nav-second','nav-third'];
+    $navClass = $levelList[$level - 1] ?? '';
     if (count($menus) > 0) {
-        $menuHtml .= '<ul class="menu-level-'.$level.'">';
+        $menuHtml .= '';
+        if($level > 1) {
+            $menuHtml .= '<div class="'.$navClass.'" >';
+        }
         foreach ($menus as $menu) {
             $activeClass = '';
-            if ($currentFirstId == $menu['id']) {
-                $activeClass = ' menu-active';
-            } elseif ($categoryId == $menu['id']) {
-                $activeClass = ' menu-item-active';
-            }
-            $menuHtml .= '<li class="menu-item-level-'.$level.$activeClass.'" >';
             $aHref = 'javascript:;';
+            if ($currentFirstId == $menu['id'] || $categoryId == $menu['id'] || ($currentFirstId == 0 && $menu['is_index'])) {
+                $activeClass = ' active';
+            }
             if (!empty($menu['url'])) {
                 $aHref = $menu['url'];
             } elseif ($menu['is_index']) {
@@ -19,26 +21,45 @@ function getMenus($menus, $level = 1, $currentFirstId, $categoryId) {
             } elseif (!empty($menu['template'])) {
                 $aHref = url('/'.$menu['template'].'/'.$menu['id']);
             }
+            if($level == 1) {
+                $menuHtml .= '<li class="'.$activeClass.'" >';
                 $menuHtml .= '<span><a href="'.$aHref.'" target="'.$menu['style'].'">'.$menu['title'].'</a></span>';
                 if (isset($menu['children']) && count($menu['children']) > 0) {
                     $menuHtml .= getMenus($menu['children'], $level + 1, $currentFirstId, $categoryId);
                 }
                 $menuHtml .= '</li>';
+            } else {
+                $menuHtml .= '<a href="'.$aHref.'" target="'.$menu['style'].'" class="'.$activeClass.'">';
+                $menuHtml .= '<span>'.$menu['title'].'</span>';
+                if (isset($menu['children']) && count($menu['children']) > 0) {
+                    $menuHtml .= getMenus($menu['children'], $level + 1, $currentFirstId, $categoryId);
+                }
+                $menuHtml .= '</a>';
+            }
+        }
+        if($level > 1) {
+            $menuHtml .= '</div>';
         }
-        $menuHtml .= '</ul>';
     }
     return $menuHtml;
 }
 {/php}
 
-<div class="head_box wf100">
+<div class="head-box w-100">
-    <div class="between-center w90">
+    <div class="w-1500">
-        <a href=""><img src="__IMG__/logo.png" class="logo" alt=""></a>
+        <div class="center-block w-100 between-center">
-        <div class="fr between-center">
+            <div class="logo center-center">
-            <div class="head_menu">
+                <a href="{:url('/')}"><img src="__IMG__/logo.png"></a>
-                {:getMenus($menus, 1, $currentFirstId, $categoryId)}
             </div>
-            <div class="head_btn">
+            <div class="nav">
+                <ul>
+                    {:getMenus($menus, 1, $currentFirstId, $categoryId)}
+                </ul>
+            </div>
+            <div class="language">
+                <a href="" class="active">中文</a> / <a href="">English</a>
+            </div>
+            <div class="nav_btn">
                 <i class="bar-top"></i>
                 <i class="bar-cen"></i>
                 <i class="bar-bom"></i>