头部区
<!-- 顶部 -->
<div class="head_top ">
<div class="main flex_space">
<span>您好！欢迎访问安徽诚科自动化设备有限公司官网</span>
<div class="top_right">
<a href="javascript:void(0)" rel="nofollow" class="ico01"><i></i>{dr_site_value('dianhua')}</a>
<a href="javascript:void(0)" rel="nofollow" class="ico02"><i></i>{dr_site_value('youxiang')}</a>
</div>
</div>
</div>
<!-- 头部 -->
<div class="header">
<div class="main flex_space">
<div class="logo t_left_center">
<h3>安徽诚科自动化设备有限公司</h3>
<p>气密检漏设备 | 真空检漏设备 | 气密定制设备</p>
</div>
<!-- 移动端 -->
<div class="m_header_right">
<button class="m_nav_btn">
<span class="line"></span>
</button>
</div>
<div class="header_right flex_space">
<!--导航开始-->
<div class="navBox">
<ul class="nav1 flex_space">
<li class="{if $indexc}curr{/if}"><a href="{SITE_URL}"><span class="bg"></span>首 页</a></li>
{category module=share pid=0 order=displayorder_asc}
<li class="{if IS_SHARE && $catid && dr_in_array($catid, $t.catids)}curr{/if}">
<a href="{$t.url}" {if $t.tid==2} target="_blank"{/if}><span class="bg"></span>{$t.name}</a>
{if $t.child}
<ul class="nav2">
{category module=share pid=$t.id order=displayorder_asc return=t2}
<li><a href="{$t2.url}" {if $t2.tid==2} target="_blank"{/if}>{$t2.name}</a>
{if $t2.child}
<i class="bi bi-chevron-right"></i>
<ul class="nav3">
{category module=share pid=$t2.id order=displayorder_asc return=t3}
<li><a href="{$t3.url}" {if $t3.tid==2} target="_blank"{/if}>{$t3.name}</a></li>
{/category}
</ul>
{/if}
</li>
{/category}
</ul>
{/if}
</li>
{/category}
</ul>
</div>
<!--导航结束-->
<script>
$(function(){
$(".nav2>li").hover(function(){
$(this).find(".nav3").stop(true,true).fadeIn();
},function(){
$(this).find(".nav3").stop(true,true).fadeOut();
})
})
</script>
</div>
</div>
</div>
<!-- 手机弹出菜单 -->
<div class="m_top_blank"></div>
<div id="m_tc_box" class="m_tc_box">
<div class="wrapper">
<div class="m_search_box">
<form class="search-form" action="{SITE_MURL}index.php" method="get">
<input type="hidden" name="s" value="news">
<input type="hidden" name="c" value="search">
<input type="text" name="keyword" id="keyword" value="" placeholder="查询关键词...">
<div class="search-btn t_center">
<input type="submit" value="" onclick="">
</div>
</form>
</div>
<!--导航开始-->
<div class="m_menu">
<ul class="nav1">
<li class="item {if $indexc}curr{/if}"><a href="{SITE_URL}">首 页</a></li>
{category module=share pid=0 order=displayorder_asc}
<li>
<div class="item {if IS_SHARE && $catid && dr_in_array($catid, $t.catids)}curr{/if} {if !$t.child}no_child{/if}">
<a href="{$t.url}" {if $t.tid==2} target="_blank"{/if}>{$t.name}</a>{if $t.child}<i class="bi bi-chevron-down"></i>{/if}
</div>
{if $t.child}
<ul>
{category module=share pid=$t.id order=displayorder_asc return=t2}
<li>
<div class="item {if !$t2.child}no_child{/if}">
<a href="{$t2.url}" {if $t2.tid==2} target="_blank"{/if}>{$t2.name}</a>{if $t2.child}<i class="bi bi-chevron-down"></i>{/if}
</div>
{if $t2.child}
<ul>
{category module=share pid=$t2.id order=displayorder_asc return=t3}
<div class="item"><a href="{$t3.url}" {if $t3.tid==2} target="_blank"{/if}>{$t3.name}</a></div>
{/category}
</ul>
{/if}
</li>
{/category}
</ul>
{/if}
</li>
{/category}
</ul>
</div>
<!--导航结束-->
<a href="tel:{dr_site_value('dianhua')}"><div class="m_tel"><i class="bi bi-telephone-inbound"></i> {dr_site_value('dianhua')}</div></a>
</div>
</div>/*顶部*/
.head_top{height: 35px;line-height: 35px;font-size: 12px;background:var(--main_color); color:rgba(255,255,255,0.7); }
.head_top .top_right a{margin-left:20px; color:rgba(255,255,255,0.7);font-size:13px;}
.head_top .top_right a.ico01 i{ background: url(../images/ico-h-1.png) left center no-repeat; padding-left:25px;}
.head_top .top_right a.ico02 i{ background: url(../images/ico-h-2.png) left center no-repeat; padding-left:25px;}
/*头部*/
.header{width: 100%; background:#fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.header .logo h3{font-size:26px;color:var(--main_color_dark); }
.header .logo p{font-size:15px;color:#999;margin-top:13px;letter-spacing:1.6px;}
.header .logo img{ display:block; transition:0.5s all;}
.m_tc_box,.m_header_right{ display:none;}
/*****一级导航*****/
.navBox {height:100px; position:relative; z-index:999;}
.navBox a{height:100%; display:flex; justify-content:center;align-items:center; transition:0.5s all;}
.navBox .nav1 {height:100%;}
.navBox .nav1>li{height:100%; position:relative;}
.navBox .nav1>li>a {font-size:16px; padding:0 .25rem; font-weight:520;}
.navBox .nav1>li>a:hover,.navBox .nav1>li.active>a{color:#fff;}
.navBox .nav1>li.curr>a .bg {background: var(--second_color);position: absolute;left: 50%; margin-left:-9px; border-radius:20px; bottom:25px;width:18px;display: block;height:4px;transition: 0.5s;}
.navBox .nav1>li>a:after{ content:''; display:block; z-index:-1; width:100%; height:0; position:absolute; left:0; bottom:0; background:var(--second_color); transition:0.5s all;}
.navBox .nav1>li:hover>a:after{height:100%; left:0; bottom:0;}
/*****二级导航*****/
.navBox .nav2 {white-space: nowrap; min-width:150%; border-radius:5px; position:absolute; top:100%;left:50%;background:rgba(255,255,255,.99);transform:translate(-50%,20px); padding:.1rem 0;opacity:0; pointer-events:none; transition:0.3s all; box-shadow:0 5px 20px rgba(0,0,0,.15);}
.navBox .nav2.active{pointer-events:all; transform:translate(-50%); opacity:1; }
.navBox .nav2:after{content:"";position:absolute;bottom:100%;left:50%;border-style:solid;margin-left:-7px;border-width:7px;border-color:transparent transparent #fff;}
.navBox .nav2>li {height:.56rem; position:relative; font-size:15px; padding:0 25px;}
.navBox .nav2>li i{position:absolute; right:.25rem; top:50%; transform:translate(0,-50%); font-size:14px; color:#999; transition:0.5s all;}
.navBox .nav2>li.active i{ color:var(--second_color);}
.navBox .nav2>li:not(:last-of-type) a{ border-bottom:1px solid #ddd}
.navBox .nav2>li:before{content:"";position:absolute;top:7px;bottom:7px;left:0;width:3px;background:var(--second_color); transform:scaleY(0); transition:transform .3s cubic-bezier(.162,.85,.45,1);}
.navBox .nav2>li.active:before{transform-origin:top; transform:scale(1);}
/****三级导航****/
.navBox .nav3 {display:none; white-space: nowrap; min-width:100%; border-radius:5px; overflow:hidden; position:absolute; left:100%; top:0; background:#fff;box-shadow:0 5px 20px rgba(0,0,0,.15);}
.navBox .nav3>li { height:.56rem; }
.navBox .nav3>li:not(:last-of-type) a{ border-bottom:1px solid #ddd}
.navBox .nav3>li a:hover{background:var(--second_color); color:#fff;}
/*======================手机菜单按钮======================*/
.m_nav_btn{width: 30px;height: 30px;transition: 0.3s;cursor: pointer;border:none;padding: 0;outline: none;background:none; margin-top:13px; display:block;}
.m_nav_btn .line{position: relative;display: block;width: 25px;height: 3px;margin: 0px auto 0;background:var(--main_color);border-radius:3px;}
.m_nav_btn .line:before,.m_nav_btn .line:after{content: '';width: 100%;height: 3px;left: 0;position: absolute;background:var(--main_color);border-radius:3px;transition-duration: 0.3s,0.3s;transition-delay: 0.1s,0s;}
.m_nav_btn .line:before{transition-property: bottom,transform;bottom: 8px;}
.m_nav_btn .line:after{transition-property: top,transform;top: 8px;}
.m_nav_btn_active .line {background: transparent;-webkit-transition-delay: 0s,0s;-moz-transition-delay: 0s,0s;-ms-transition-delay: 0s,0s;-o-transition-delay: 0s,0s;transition-delay: 0s,0s}
.m_nav_btn_active .line:after,.m_nav_btn_active .line:before {-webkit-transition-delay: 0s,.1s;-moz-transition-delay: 0s,.1s; -ms-transition-delay: 0s,.1s; -o-transition-delay: 0s,.1s; transition-delay: 0s,.1s}
.m_nav_btn_active .line:before {bottom: 0px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)}
.m_nav_btn_active .line:after {top:0px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
@media screen and (max-width:768px) {
.header{ height:60px; position: fixed; z-index: 200;}
.header .logo{height:60px; }
.header .logo h3{ font-size:18px; letter-spacing:normal;}
.header .logo p{font-size:12px;letter-spacing:normal;margin-top:5px;}
.head_top,.header_right{display:none;}
.m_header_right{display:block; margin-right:-5px;}
.m_top_blank{height:60px;}
/*手机中英文*/
.header .m_lag{ margin:22px 20px 0 0;}
.header .m_lag a {font-size: 15px;color: rgba(255,255,255,0.7);}
/*======================手机弹出菜单======================*/
.m_tc_box{position: fixed;top:50px;left: 0;bottom: 0;right: 0;background: #fff;z-index: 102; display:none;}
.m_tc_box .wrapper {position: absolute;left: 0;right: 0;height: 100%;padding:15px; box-sizing:border-box;overflow-x: hidden;overflow-y: auto;z-index: 110;}
/*搜索表单*/
.m_search_box {width:100%; position: relative;border: 1px solid #e1e6f0; overflow:hidden; border-radius:3px; margin-bottom:15px; margin-top:25px;}
.m_search_box .search-btn {position: absolute;top:0px;right:0px;width:50px ;height:100%;}
.m_search_box form {height:46px;}
.m_search_box form input[type="text"] {width: 100%;height: 100%;background:rgba(255,255,255,0.8); box-sizing: border-box;padding: 0 50px 0 15px;border: none; font-size:15px;}
.m_search_box form input[type="submit"]{display: inline-block;width:30px;height:30px; background: url('../images/zoom.png') no-repeat center; border:none; background-size:23px auto;}
/*手机下拉菜单*/
.m_menu{overflow-x: hidden;overflow-y: auto;}
.m_menu .nav1 ul{ padding:0 0 0 30px; display:none; background-color:#fff;}
.m_menu .item{border-bottom: 1px solid #efefef; padding:16px 10px; font-size:16px;}
.m_menu .item i{float:right; color:#ccc; transition:0.3s all;}
.m_menu .item.active> i{ -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.m_menu .item.curr a,.m_menu .item a:hover{color:var(--main_color);}
.m_menu .item.no_child a{ display: block;}
/*电话*/
.m_tel{text-align:center; margin-top:35px; font-size:20px; font-family:din; color:#fff; background:var(--main_color); padding:15px; border-radius:5px; letter-spacing:1px;}
.m_tel i{ font-size:18px; margin-right:5px;}
}