bt-source/panel/BTPanel/templates/default/error3.html

{% extends "layout.html" %}
{% block content %}
<style>
  .control-item {
    display: inline-block;
    height: 45px;
    min-width: 100px;
    padding: 0 20px;
    line-height: 45px;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    text-align: center;
  }
  .control-item.active {
    color: #20a53a;
    background: #20a53a10;
  }
  .daily-thumbnail{
    width: 1200px;
    margin: 80px auto;
  }
  .thumbnail-box{
    position: relative;
    display: flex;
    justify-content: center;
  }

  .thumbnail-introduce{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
  }
  .thumbnail-introduce span{
    font-size: 20px;
    font-weight: bold;
  }
  .thumbnail-introduce ul {
    display: flex;
    font-size: 16px;
    line-height: 30px;
    margin: 20px 0;
    list-style-type: square;
  }
  .thumbnail-introduce ul li + li {
      margin-left: 40px;
  }
  .pluginTipsGg{
    position: relative;
    width: 950px;
    height: 720px;
    background-color: #f1f1f1;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    border-radius: 4px;
  }
  /*.pluginTipsGg:hover::before{*/
  /*  display: inline-block;*/
  /*}*/
  .pluginTipsGg::before {
    content: '点击预览';
    display: none;
    background: #000;
    opacity: 0.2;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 621px;
    font-size: 18px;
    vertical-align: bottom;
    text-align: center;
    border-radius: 4px;
    transition: all 1s;
  }
  .tab-list .tabs-item.active:after {
    content: '';
    width: 20px;
    height: 2px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    background: red;
    margin-left: -10px;
    background: #20a53a;
  }
  .thumbnail-box .thumbnail-tab {
    margin-right: 40px;
    width: 130px;
    border-right: 1px solid #def2e2;
  }
  .thumbnail-tab li {
    padding: 0 20px;
    line-height: 46px;
    width: 130px;
    cursor: pointer;
    font-size: 14px;
  }
  .thumbnail-tab li.on {
    border-right: 2px solid #20a53a;
    color: #20a53a;
    font-size: 14px;
  }
  .thumbnail-item {
    display: none;
  }
  .thumbnail-item.show {
    display: block;
  }
  .thumbnail-introduce-new{
     display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}
 .thumbnail-introduce-title-new{
    display: flex;
    align-items: flex-start;
    width: 92%;
    justify-content: flex-start;
 }
 .thumbnail-title-left-new{
       display: flex;
    align-items: center;
 }
 .thumbnail-title-left-new img{
     width: 88px;
     flex-shrink: 0;
     margin-right: 14px;
 }
 .thumbnail-introduce-ul-new{
     width: 90%;
 }
 .thumbnail-introduce-ul-new ul{
     display: flex;
     align-items: center;
     font-size: 14px;
     justify-content: space-evenly;
 }
 .thumbnail-title-text-new p{
     color: #666;

 }
 .thumbnail-title-text-new p:first-child{
     font-weight: bold;
     font-size: 24px;
     margin-bottom: 12px;
 }
  .thumbnail-title-text-new p:last-child{
     font-size: 14px;
     line-height:24px;
     width: 70%;
 }
 .thumbnail-title-button-new{
     display: flex;
     align-items: center;
 }
 .thumbnail-title-button-new a{
     padding: 10px 16px;
 }
 .li-icon{
    height: 9px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMuMjc0NzgwIiBoZWlnaHQ9IjkuMTI2NTg3IiB2aWV3Qm94PSIwIDAgMTMuMjc0OCA5LjEyNjU5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KCTxkZXNjPgoJCQlDcmVhdGVkIHdpdGggUGl4c28uCgk8L2Rlc2M+Cgk8cGF0aCBpZD0i55+i6YePIDEwNTEiIGQ9Ik0wLjcxMzUxNiA0LjAyOTExTDQuMzc5NDMgNy43NjI0NUwxMi42Mjc3IDAuNzYyNDUxIiBzdHJva2U9IiMyMEE1M0EiIHN0cm9rZS13aWR0aD0iMi4wMDAwMDAiLz4KCTxkZWZzLz4KPC9zdmc+Cg==');
    background-size: 100%;
    width: 13px;
    display: inline-block;
    margin-right: 8px;
 }
 .thumbnail-introduce-hr{
     width: 92%;
     height: 1px;
     margin: 36px 0;
     border: 1px dashed #e1e1e185;
 }
</style>
<div class="main-content pb55" style="min-height: 525px;">
  <div class="container-fluid">
    {% if 'error_msg' in data %}
      <div class="pos-box bgw mtb15">
        <div class="control-nav">
          <div class="control-item active" name="control">防火墙</div>
        </div>
      </div>
      <div class="mtb15 pd15 bgw daily-view">
        <div class="info-title-tips">
          <p><span class="glyphicon glyphicon-alert" style="color: #f39c12; margin-right: 10px;"></span>提示：此页面可在面板设置中关闭</p>
        </div>
        <div class="daily-thumbnail">
       <!--   <div class="thumbnail-introduce">-->
       <!--     <span>Nginx防火墙功能介绍111</span>-->
       <!--     <ul>-->
       <!--       <li>仅支持Nginx</li>-->
       <!--       <li>抵御CC攻击</li>-->
       <!--       <li>关键词拦截</li>-->
       <!--       <li>拦截恶意扫描</li>-->
       <!--       <li>阻止黑客入侵</li>-->
       <!--     </ul>-->
       <!--     <div class="daily-product-buy">-->
       <!--       <a class="btn btn-default mr10" title="产品预览" href="https://www.bt.cn/new/product_nginx_firewall.html" target="_blank">产品预览</a>-->
							<!--<a title="购买专业/企业版" href="javascript:;" class="btn btn-success va0 ml15 payPlugin">立即购买</a>-->
       <!--     </div>-->
       <!--   </div>-->
       <div class="thumbnail-introduce-new">
              <div class="thumbnail-introduce-title-new" style="display: block;">
                  <div class="thumbnail-title-left-new">
                      <img src="/static/img/soft_ico/ico-btwaf.png" alt="" />
                      <div class="thumbnail-title-text-new">
                          <p>Nginx防火墙-功能介绍</p>
                          <p style="width: 100%;">Nginx防火墙是保护Web应用程序免受各种网络攻击，检测过滤恶意请求限制访问频率，增强应用程序的安全，易于配置和使用，是保护Web应用程序安全的重要工具之一</p>
                      </div>
                  </div>
                   <div class="thumbnail-title-button-new daily-product-buy" style="margin: 16px 102px;">
                      <a class="btn btn-default mr10" style="color:#666" title="产品预览" href="https://www.bt.cn/new/product_nginx_firewall.html" target="_blank">产品预览</a>
                      <a title="购买专业/企业版" href="javascript:;" class="btn btn-success va0 ml15 payPlugin">立即购买</a>
                  </div>
              </div>
              <div class="thumbnail-introduce-hr"></div>
              <div class="thumbnail-introduce-ul-new">
            <ul>
                      <li><span class="li-icon"></span>仅支持Nginx</li>
                      <li><span class="li-icon"></span>抵御CC攻击</li>
                      <li><span class="li-icon"></span>关键词拦截</li>
                      <li><span class="li-icon"></span>拦截恶意扫描</li>
                      <li><span class="li-icon"></span>阻止黑客入侵</li>
            </ul>
            </div>
          </div>
          <div class="thumbnail-box">
            <ul class="thumbnail-tab">
              <li class="on">概览</li>
              <li>攻击地图</li>
              <li>攻击报表</li>
              <li>全局设置</li>
              <li>站点设置</li>
              <li>封锁记录</li>
              <li>操作日志</li>
            </ul>
            <div class="thumbnail-item show">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_1.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_2.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_3.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_4.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_5.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_6.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_7.png);"></div>
            </div>
          </div>
        </div>
      </div>
    {% else %}
      <div class="pos-box bgw mtb15">
        <div class="control-nav">
          <div class="control-item active" name="control">防火墙</div>
        </div>
      </div>
      <div class="mtb15 pd15 bgw daily-view">
        <div class="info-title-tips">
          <p><span class="glyphicon glyphicon-alert" style="color: #f39c12; margin-right: 10px;"></span>提示：此页面可在面板设置中关闭</p>
        </div>
        <div class="daily-thumbnail">
          <!--<div class="thumbnail-introduce">-->
          <!--  <span>Nginx防火墙功能介绍222</span>-->
          <!--  <ul>-->
          <!--    <li>仅支持Nginx</li>-->
          <!--    <li>抵御CC攻击</li>-->
          <!--    <li>关键词拦截</li>-->
          <!--    <li>拦截恶意扫描</li>-->
          <!--    <li>阻止黑客入侵</li>-->
          <!--  </ul>-->
          <!--  <div class="daily-product-buy">-->
          <!--    <a class="btn btn-default mr10" title="产品预览" href="https://www.bt.cn/new/product_nginx_firewall.html" target="_blank">产品预览</a>-->
          <!--    <a title="购买专业/企业版" href="javascript:;" class="btn btn-success va0 ml15 payPlugin">立即购买</a>-->
          <!--  </div>-->
          <!--</div>-->
          <div class="thumbnail-introduce-new">
              <div class="thumbnail-introduce-title-new" style="display: block;">
                  <div class="thumbnail-title-left-new">
                      <img src="/static/img/soft_ico/ico-btwaf.png" alt="" />
                      <div class="thumbnail-title-text-new">
                          <p>Nginx防火墙-功能介绍</p>
                        <p style="width: 100%;">Nginx防火墙是保护Web应用程序免受各种网络攻击，检测过滤恶意请求限制访问频率，增强应用程序的安全，易于配置和使用，是保护Web应用程序安全的重要工具之一</p>
                      </div>
                  </div>
                   <div class="thumbnail-title-button-new daily-product-buy" style="margin: 16px 102px;">
                      <a class="btn btn-default mr10" style="color:#666" title="产品预览" href="https://www.bt.cn/new/product_nginx_firewall.html" target="_blank">产品预览</a>
                      <a title="购买专业/企业版" href="javascript:;" class="btn btn-success va0 ml15 payPlugin">立即购买</a>
                  </div>
              </div>
              <div class="thumbnail-introduce-hr"></div>
              <div class="thumbnail-introduce-ul-new">
            <ul>
                      <li><span class="li-icon"></span>仅支持Nginx</li>
                      <li><span class="li-icon"></span>抵御CC攻击</li>
                      <li><span class="li-icon"></span>关键词拦截</li>
                      <li><span class="li-icon"></span>拦截恶意扫描</li>
                      <li><span class="li-icon"></span>阻止黑客入侵</li>
            </ul>
            </div>
          </div>
          <div class="thumbnail-box">
            <ul class="thumbnail-tab">
              <li class="on">概览</li>
              <li>攻击地图</li>
              <li>攻击报表</li>
              <li>全局设置</li>
              <li>站点设置</li>
              <li>封锁记录</li>
              <li>操作日志</li>
            </ul>
            <div class="thumbnail-item show">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_1.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_2.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_3.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_4.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_5.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_6.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(https://www.bt.cn/Public/new/plugin/introduce/waf/nginx_firewall_7.png);"></div>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
	window.plugin_view = {
		isDev: function () {
			return false;
		},
		getToken: function () {
			return '';
		},
	};
	window.vite_public_request_token = '{{session[g.get_csrf_html_token_key]}}'; // csrf_token，用于请求
</script>
<script src="{{g.cdn_url}}/js/jquery-2.2.4.min.js"></script>
<script src="{{g.cdn_url}}/layer/layer.js"></script>
<script src="{{g.cdn_url}}/js/utils.min.js"></script>
  <script type="text/javascript">
		bt_tools.send({url:'/plugin?action=get_soft_find',data:{sName: 'btwaf'}}, function (res) {
        if (res.endtime >= 0) {
            $('.payPlugin').after('<a href="javascript:;" class="btn btn-success va0 ml15 installWaf">立即安装</a>');
            $('.payPlugin').remove();
        }
    });

    $('.daily-product-buy').on('click', '.installWaf', function(){
      bt.soft.install('btwaf')
    });

    $('.payPlugin').on('click',function(){
      bt.soft.get_soft_find('btwaf',function(rdata){
        window.parent.pay({ disablePro: true, sourceId: 25, plugin: true, pluginInfo:rdata})
      });
    })
    $('.thumbnail-tab li').click(function () {
      var index = $(this).index();
      $(this).addClass('on').siblings('.on').removeClass('on');
      $('.thumbnail-item').eq(index).addClass('show').siblings('.show').removeClass('show');
    })
    // $('.thumbnail-box').on('click',function(){
    //   layer.open({
    //     title:false,
    //     btn:false,
    //     shadeClose:true,
    //     closeBtn: 2,
    //     area:['950px','725px'],
    //     content:'<div class="pd10"><img src="/static/img/btwaf-nginx.png" style="width:100%"/></div>'
    //   })
    // })
  </script>
{% endblock %}