头部区
<!-- 头部 -->
<div class="header flex_space">
<!-- LOGO -->
<div class="logo t_center">
<a href="{SITE_URL}" title="{SITE_NAME}">
<img src="{HOME_THEME_PATH}mysite/images/logo.png" class="logo_1" alt="{SITE_NAME}"/>
<img src="{HOME_THEME_PATH}mysite/images/logo_h.png" class="logo_2" alt="{SITE_NAME}"/>
<img src="{HOME_THEME_PATH}mysite/images/logo_m.png" class="logo_m" alt="{SITE_NAME}"/>
</a>
</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="nav">
<li class="{if $indexc}curr{/if}">
<a href="{SITE_URL}"><div class="txt">首 页</div></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}><div class="txt">{$t.name}</div></a>
{if $t.child}
<div class="subNavbox">
{category module=share pid=$t.id order=displayorder_asc return=t2}
<p><a href="{$t2.url}" {if $t2.tid==2} target="_blank"{/if}>{$t2.name}</a></p>
{/category}
</div>
{/if}
</li>
{/category}
</ul>
</div>
<!--导航结束-->
<!--serch-->
<div class="top_serch">
<a href="javaScript:void(0);" class="btn t_center" name="t1">
<svg t="1668235919825" class="icon" viewBox="0 0 1032 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2936"><path d="M969.975 905.855L842.142 796.532a39.382 39.382 0 1 0-55.686 55.686L914.29 961.54a39.382 39.382 0 1 0 55.686-55.686z" p-id="2937"></path><path d="M468.41 841.112a381.135 381.135 0 1 0 0-762.27 381.135 381.135 0 0 0 0 762.27z m0 78.763a459.898 459.898 0 1 1 0-919.796 459.898 459.898 0 0 1 0 919.796z" p-id="2938"></path></svg>
</a>
</div>
<div class="tc" name="t1">
<div class="tc-box">
<form class="search-form" action="{SITE_URL}index.php" method="get">
<input type="hidden" name="s" value="news">
<input type="hidden" name="c" value="search">
<font class="tc_fdj"></font>
<input type="text" name="keyword" id="keyword" value="" placeholder="请输入搜索关键字..." autocomplete="off">
<input type="submit" value="搜索" class="btn_submit" onclick="javascript:var ele = document.getElementById('keyword').value;if(ele==''){document.getElementById('keyword').focus();return false}">
</form>
</div>
<div class="tc-bg"></div>
</div>
<!--end serch-->
<!--电话-->
<div class="tel">
{dr_site_value('dianhua')}
</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}">
<a href="{$t.url}" {if $t.tid==2} target="_blank"{/if}>{$t.name}</a>{if $t.child}<i class="bi bi-chevron-down">{/if}</i>
</div>
{if $t.child}
<ul>
{category module=share pid=$t.id order=displayorder_asc return=t2}
<li>
<a href="{$t2.url}" {if $t2.tid==2} target="_blank"{/if}>
<div class="item">
{$t2.name}{if $t2.child}<i class="bi bi-chevron-down">{/if}</i>
</div></a>
{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>/*头部*/
.header{height:1rem; z-index: 100;width: 100%; position:fixed; transition:0.5s all;}
.header:before{ content:""; position:absolute; bottom:-1px; left:0; width:0; height:1px; background:rgba(255,255,255,0.1); transition:2s}
.header.on:before{ width:100%}
.header .logo{height:1rem; transition:0.5s all; margin-left:2%; position:relative;}
.header img.logo_1{height:60px; display:block; transition:0.5s all; /*filter: grayscale(100%) brightness(1000%);*/ opacity:1;}
.header img.logo_2{height:60px; display:block; transition:0.5s all;opacity:0; position:absolute; left:0; top:50%; transform:translate(0,-50%); }
.header_scroll img.logo_1{ height:52px; opacity:0;}
.header_scroll img.logo_2{ height:52px; opacity:1;}
.header_right{margin-right:2%;}
.m_tc_box,.m_header_right,.header img.logo_m{ display:none;}
/*下拉菜单*/
.navBox { height:1rem; transition:0.5s all;}
.navBox .nav{display:flex; height:100%;}
.navBox .nav li {padding: 0 .2rem; position: relative;}
.navBox .nav li>a {display: block;position: relative; height:100%; display:flex; justify-content:center;align-items:center;}
.navBox .nav li>a .txt {position: relative;z-index: 2;font-size:16px; color:#fff; transition:0.5s all;}
.navBox .nav li>a:hover .txt{color:#fff;}
.header_scroll .navBox .nav li>a .txt {color:#333;}
.header_scroll .navBox .nav li>a:hover .txt {color:var(--main_color);}
/*.navBox .nav li.curr a .txt{color:#FF7F27;}*/
.subNavbox{white-space: nowrap; min-width:100%; position:absolute; top:100%;left:50%;background:rgba(255,255,255,.99); -webkit-transform:translate(-50%,10px);-ms-transform:translate(-50%,20px);transform:translate(-50%,20px); border-radius:5px;padding:15px 15px;opacity:0; pointer-events:none; transition:all .3s;box-shadow:0 5px 40px rgba(0,0,0,.15);}
.subNavbox:after{content:"";position:absolute;bottom:100%;left:50%;border-style:solid;margin-left:-7px;border-width:7px;border-color:transparent transparent #fff;}
.subNavbox p:not(:last-of-type){border-bottom:1px solid #ddd}
.subNavbox a{display:block;position:relative;font-size:15px;padding:15px 0; -webkit-transition:color .3s cubic-bezier(.645,.045,.355,1);-ms-transition:color .3s cubic-bezier(.645,.045,.355,1);transition:color .3s cubic-bezier(.645,.045,.355,1); text-align: center; }
.subNavbox a:before{content:"";position:absolute;top:7px;bottom:7px;left:-15px;width:3px;background:var(--main_color);-webkit-transform:scaleY(0);-ms-transform:scaleY(0);transform:scaleY(0);-webkit-transition:-webkit-transform .3s cubic-bezier(.162,.85,.45,1);transition:transform .3s cubic-bezier(.162,.85,.45,1);}
.subNavbox a.active,.subNavbox a:hover{color:var(--main_color);}
.subNavbox a.active:before,.subNavbox a:hover:before{-ms-transform-origin:top;-webkit-transform-origin:top;transform-origin:top;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.subNavbox.active{pointer-events:all;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);-webkit-transition-delay:.1s;-ms-transition-delay:.1s;transition-delay:.1s;opacity:1; }
/*======================搜索======================*/
.header .top_serch{width:.6rem; transition:0.5s all; position:relative; margin-right:15px;}
.header .top_serch a{height:100%;}
.header .top_serch a svg{width:18px; fill:#fff; transition:0.5s all;}
.header .top_serch a:hover svg{transform:scale(1.2);}
.header .top_serch:after{ content: ""; width:1px; height:14px; background:#ccc; display:block;position: absolute;right: 0;top: 50%;transform: translate(0,-50%);transition: 0.5s all;}
.header .tc{transition:all ease 300ms;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 9999999999; display:flex; flex-direction:column; justify-content:center;align-items:center;}
.header .tc{ pointer-events: none; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0;transform:scale(1.1);}
.header .tc.act{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; pointer-events: auto;transform:scale(1);}
.header .tc-bg {width: 100%;height: 100%;background: rgba(0,0,0,.85);position: absolute;top: 0;left: 0;z-index: 0;}
.header .tc-box {width: 700px;max-width: 90%;margin: 0 auto;box-sizing: border-box; /* background:#fff; */display: block;position: relative;z-index: 1;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
overflow: hidden;
}
.header .tc.act .tc-box {-webkit-animation-name: anim-open-2;animation-name: anim-open-2;transform: scale(1);}
/*搜索弹窗内容样式*/
.header .tc-box form {position: relative;}
.header .tc-box .tc_fdj {position: absolute;left: 20px;display: block;height:.75rem;width: 25px;background: url(../images/icon-sq2.png) center no-repeat;}
.header .tc-box #keyword {width: 80%;height:.75rem;padding: 0 15px;padding-left:55px;font-size:.18rem;color: #999;box-shadow: none;-webkit-appearance: none;border:0; box-sizing:border-box;outline:none; float:left;}
.header .tc-box .btn_submit {width: 20%; height:.75rem; line-height:.75rem;background:var(--main_color);font-size:.2rem;color: #fff;cursor: pointer;text-transform: uppercase;border:0; outline:none;}
.header .tel{ color:#fff; font-size:17px; font-weight:600; display:flex; justify-content:center;align-items:center; transition:0.5s all;}
/*导航下拉*/
.header_scroll {background:#fff; height:.8rem; box-shadow: 0 1px 5px rgba(0,0,0,0.1);}
.header_scroll.on:before{width:0px;transition: 0.01s all;}
.header_scroll .logo,.header_scroll .navBox,.header_scroll .top_blank{height:.8rem;}
.header_scroll .top_serch a svg{ fill:#333; }
.header_scroll .top_serch:after{ color:#ccc;}
.header_scroll .tel{ color:var(--main_color);}
/*======================手机菜单按钮======================*/
.m_nav_btn{width: 30px;height: 30px;transition: 0.3s;cursor: pointer;border:none;padding: 0;outline: none;background:none; margin-top:15px; 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; background:#fff; box-shadow: 0 1px 5px rgba(0,0,0,0.1);}
.header .logo{height:60px; margin-left:10px;}
.header img.logo_1,.header img.logo_2 { display:none;}
.header img.logo_m { display:flex; height:40px;}
.header_right{display:none;}
.m_header_right{display:block; margin-right:15px;}
.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_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;}
}