头部区
<!-- 头部 -->
<div class="header flex_space">
<div class="logo"><a href="{SITE_URL}" title="{SITE_NAME}"><img src="{HOME_THEME_PATH}mysite/images/logo.png?v=1.1" alt="{SITE_NAME}"/></a></div>
<div class="flex_space">
<!--导航开始-->
<div class="navBox">
<ul class="nav">
<li class="{if $indexc}curr{/if}">
<a href="{SITE_URL}"><span class="bg"></span><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}><span class="bg"></span><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" fill="#999"></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" fill="#999"></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-->
<!--弹出菜单-->
<button class="nav_btn">
<span class="line"></span>
</button>
<div class="menu_tc">
<div class="menu_box">
{category module=share pid=0 order=displayorder_asc}
<div class="item">
<h3><a href="{$t.url}" {if $t.tid==2} target="_blank"{/if}>{$t.name}</a></h3>
{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}>{$t2.name}</a></li>
{/category}
</ul>
{/if}
</div>
{/category}
</div>
</div>
<!--弹出菜单结束-->
</div>
</div>
<div class="top_blank"></div>/*头部*/
.header{ width: 100%; min-width:1200px; position:fixed; z-index:999; transition:0.5s all;background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,0.15);}
.header .logo{margin-left:2%; display:flex; align-items:center; transition:0.5s all; z-index:999;}
.header .logo img{height:66px; display:block;}
/*======================菜单按钮======================*/
.nav_btn{width: 90px;height: 90px;transition: 0.5s;cursor: pointer;border:none;padding: 0;outline: none;background:#c41218; position:relative; z-index:999;}
.nav_btn .line{position: relative;display: block;width: 25px;height: 3px;margin: 0px auto 0;background:#fff;border-radius:3px;}
.nav_btn .line:before,.nav_btn .line:after{content: '';width: 100%;height: 3px;right: 0;position: absolute;background:#fff;border-radius:3px;transition-duration: 0.3s,0.3s;transition-delay: 0.1s,0s;}
.nav_btn .line:before{transition-property: bottom,transform;bottom: 10px;}
.nav_btn .line:after{transition-property: top,transform;top:10px;}
.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}
.nav_btn_active .line:after,.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}
.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)}
.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);}
/*弹出菜单*/
.menu_tc {overflow-y:auto; height:100%; position:fixed; top:0; right:0;transform: translateX(100%); width:100%;z-index: 998; background:url(../images/bg.jpg) no-repeat center bottom #fff; -webkit-overflow-scrolling: touch; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden;transition: all .8s ease;}
.menu_tc::-webkit-scrollbar {width: 6px;}
.menu_tc::-webkit-scrollbar-thumb {background: #c41218;}
.menu_tc::-webkit-scrollbar-track {background: #f1f1f1;}
.menu_tc{scrollbar-color:#c41218 #f1f1f1;scrollbar-width:thin;}
.menu_tc{scrollbar-face-color: #c41218;scrollbar-shadow-color: #c41218;scrollbar-arrow-color: #000;scrollbar-track-color: #f1f1f1;}
.menu_tc.active{transform: translateX(0);}
.menu_tc .menu_box{display: flex; width:100%; padding:150px 0 0 2%; box-sizing:border-box;}
.menu_tc .item{flex: 1; margin-right:2%;overflow: hidden; box-sizing:border-box;}
.menu_tc .item h3{height:50px; font-size:.22rem; margin-bottom:20px; position:relative; border-bottom:solid 1px #e8e8e8;}
.menu_tc .item h3:after {width: .25rem;height: 2px;position: absolute;left: 0;bottom: -1px;content: '';background:#c41218;}
.menu_tc .item ul{}
.menu_tc .item li{font-size:.18rem; line-height:2.6;}
/*======================搜索======================*/
.header .top_serch{ width:.8rem; background:#fff; transition:0.5s all; position:relative;}
.header .top_serch a{height:100%;}
.header .top_serch a svg{width:23px; transition:0.3s all;}
.header .top_serch a:hover svg{transform:scale(1.2);}
.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 .2rem;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: #c41218;font-size:.2rem;color: #fff;cursor: pointer;text-transform: uppercase;border:0; outline:none;}
/*下拉菜单*/
.navBox { height:90px; position:relative; transition:0.5s all;}
.navBox .nav{display:flex; height:100%;}
.navBox .nav li { position: relative;}
.navBox .nav li>a {padding: 0 .2rem;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:#222; transition:0.5s all;}
.navBox .nav li.curr>a .txt{color:#c41218;}
.navBox .nav li.curr>a .bg {background: #c41218;position: absolute;left: 50%; margin-left:-9px; border-radius:20px; bottom:22px;width:18px;display: block;height:4px;transition: 0.5s;}
.navBox .nav li>a:hover .txt{color:#fff;}
.navBox .nav li.active a .txt{color:#fff;}
.navBox .nav li>a:after{ content:''; display:block; z-index:-1; width:100%; height:0; position:absolute; left:0; bottom:0; background:#c41218; transition:0.5s all;}
.navBox .nav li:hover>a:after{height:100%; left:0; bottom:0;}
.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 .5s;box-shadow:0 5px 20px rgba(196,18,24,.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: #c41218;-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:#c41218}
.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; }