1 <div class="navbar navbar-fixed-top"> 2 <div class="container"> 3 <!-- 针对移动端的导航样式 --> 4 <div class="navbar-header"> 5 <!-- 6 汉堡包按钮 7 * HTML 元素 8 * button 元素提供按钮样式 9 * span 元素提供汉堡包样式 10 * 动态交互 11 data-toggle="collapse" 12 * 绑定导航条组件(内容) 13 data-target=桌面端容器元素的ID 14 --> 15 <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_ddos"> 16 <span class="icon-bar"></span> 17 <span class="icon-bar"></span> 18 <span class="icon-bar"></span> 19 </button> 20 </div> 21 <a class="navbar-brand" href="/portal" title=""></a> 22 <!-- 针对桌面端的导航内容 --> 23 <div id="nav_ddos" class="collapse navbar-collapse"> 24 <ul class="nav navbar-nav navbar-left"> 25 <li class="" @mouseenter="show(1)" @mouseleave="hide"> 26 <a href="javascript:void(0);" class="">产品服务</a> 27 <transition name="slide-fade"> 28 <div class="first" v-show="index == 1"> 29 <ul class="secondMenu second"> 30 <li><span>安全防护</span><span>安全检测</span></li> 31 <li><a href="/portal/product/cdn">DDoS云防护</a><a href="/portal/product/loophole">漏洞扫描</a></li> 32 <li><a href="/portal/product/waf">云WAF</a><a href="/portal/product/permeate">渗透测试</a></li> 33 <li><a href="https://www.dns.com/" target="_blank">高防DNS</a><a href=""></a></li> 34 </ul> 35 </div> 36 </transition> 37 </li> 38 <li @mouseenter="show(2)" @mouseleave="hide"> 39 <a href="javascript:void(0);" class="">解决方案</a> 40 <transition name="slide-fade"> 41 <div class="first" v-show="index == 2"> 42 <ul class="secondMenu second"> 43 <li>行业方案</li> 44 <li><a href="/portal/solution/game">游戏行业</a><a href="/portal/solution/commerce">电商行业</a></li> 45 <li><a href="/portal/solution/banking">金融行业</a><a href="/portal/solution/company">企业网站</a></li> 46 <li><a href="/portal/solution/government">政府机关</a><a href="/portal/solution/custom">定制服务</a></li> 47 </ul> 48 </div> 49 </transition> 50 </li> 51 <li @mouseenter="show(3)" @mouseleave="hide"> 52 <a href="javascript:void(0);">服务购买</a> 53 <transition name="slide-fade"> 54 <div class="second" v-show="index == 3"> 55 <ul class="secondMenu"> 56 <li>服务选择</li> 57 <li><a href="/portal/buy/product?type=1#CDNproduct=cdn&order_type=0" class="skip_pc skip_pc_buy">DDoS云防护</a></li> 58 <li><a href="/portal/buy/product?type=3#DNSproduct=dns" class="skip_pc skip_pc_buy">漏洞扫描</a></li> 59 <li><a href="https://www.dns.com/service" target="_blank">高防DNS</a></li> 60 </ul> 61 </div> 62 </transition> 63 </li> 64 <li @mouseenter="show(4)" @mouseleave="hide"> 65 <a href="javascript:void(0);" class="">帮助文档</a> 66 <transition name="slide-fade"> 67 <div v-show="index == 4"> 68 <ul class="secondMenu"> 69 <li>技术帮助</li> 70 <li><a href="https://www.ddos.com/article/parentMenu?id=57">产品文档</a></li> 71 72 73 <li><a href="https://www.ddos.com/article/parentMenu?id=78">备案指引</a></li> 74 <li><a href="/portal/clause/service">服务条款</a></li> 75 76 <!--<li><a href="/" title="售后服务">售后服务</a></li>--> 77 </ul> 78 </div> 79 </transition> 80 </li> 81 <li id="nav_about" @mouseenter="show(5)" @mouseleave="hide"> 82 <a href="javascript:void(0);" class="a_comment"> 83 关于我们</a> 84 <transition name="slide-fade"> 85 <div class="first" v-show="index == 5"> 86 <ul class="secondMenu second"> 87 <li><span>关于网堤</span><span>新闻动 88 态</span></li> 89 <li><a href="https://www.ddos.com/portal/about/combo">公司介绍</a><a href="https://www.ddos.com/article/about?id=50">公司动态</a></li> 90 <li><a 91 href="https://www.ddos.com/portal/about/combo?0#contact1">联系我们</a><a href="https://www.ddos.com/article/about?id=51">行业资讯</a></li> 92 <li><a href="javascript:void(0);"></a><a 93 href="https://www.ddos.com/article/about? 94 id=77">安全月刊</a></li> 95 96 </ul> 97 </div> 98 </transition> 99 </li> 100 </ul> 101 <ul class="nav navbar-nav navbar-right"> 102 <li class="change"> 103 <a href="/login" class="usercenter skip_pc 104 skip_pc_login">登录</a> 105 </li> 106 <li class="special change"> 107 <a href="/register" class="usercenter skip_pc 108 skip_pc_register">注册</a> 109 </li> 110 <li class="console"> 111 <a href="/console" class="skip_pc 112 skip_pc_login">管理中心</a> 113 </li> 114 </ul> 115 </div> 116 117 </div> 118 <!--} 导航条 end --> 119 </div>