更新：首页和导航菜单样式调整
parent
13cdf6be3b
commit
bddec3f2a6
File diff suppressed because one or more lines are too long
|
|
@ -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})
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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){
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 425 B |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 483 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 628 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
|
|
@ -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;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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="between-center w90">
|
||||
<a href=""><img src="__IMG__/logo.png" class="logo" alt=""></a>
|
||||
<div class="fr between-center">
|
||||
<div class="head_menu">
|
||||
{:getMenus($menus, 1, $currentFirstId, $categoryId)}
|
||||
<div class="head-box w-100">
|
||||
<div class="w-1500">
|
||||
<div class="center-block w-100 between-center">
|
||||
<div class="logo center-center">
|
||||
<a href="{:url('/')}"><img src="__IMG__/logo.png"></a>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue