diff --git a/plugins/op_waf/index.html b/plugins/op_waf/index.html
index 344df25aa..28e84949e 100755
--- a/plugins/op_waf/index.html
+++ b/plugins/op_waf/index.html
@@ -1,9 +1,238 @@
+<style>
+/*waf*/
+.lib-con-title {
+    height: 26px;
+    border-bottom: #ccc 1px solid;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.lib-con-title span {
+    font-weight: bold;
+    float: left;
+}
+
+.lib-con-title .ssh-item {
+    margin-top: 0;
+    padding: 0;
+}
+
+.lib-con {
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.waftable .ssh-item {
+    display: inline-block;
+    padding-top: 0;
+}
+
+.waftable .ssh-item .btswitch + .btswitch-btn, .lib-con-title .ssh-item .btswitch + .btswitch-btn {
+    width: 2.0em;
+    height: 1.2em;
+    margin-bottom: 0
+}
+
+.rule_btn button {
+    margin: 10px;
+}
+
+.table .gztr td, #LogDayCon td {
+    word-break: break-all;
+}
+
+.wavbox {
+    width: 232px;
+    float: left;
+    height: 60px;
+    line-height: 52px;
+    text-align: center;
+    margin-bottom: 10px;
+    margin-top: 5px;
+    padding: 0;
+}
+
+.wavbox span {
+    font-size: 18px;
+    margin: 0 6px;
+    font-weight: bold;
+}
+
+.line {
+    width: 33.333%;
+    text-align: center;
+    height: 70px;
+    float: left;
+    margin: 6px 0;
+}
+
+.line:nth-of-type(3n-1) {
+    margin-right: 0;
+}
+
+.line .name {
+    width: auto;
+    display: block;
+    text-align: center;
+    margin: 5px 0 8px;
+    color: #666;
+}
+
+.line .val {
+    font-size: 18px;
+    display: block;
+    text-align: center;
+    font-weight: bold
+}
+
+.wafview-head {
+    height: 30px;
+    border-bottom: #ccc 1px solid;
+    margin-bottom: 10px;
+}
+
+.waf-switch {
+    margin-left: 20px;
+    margin-top: -3px;
+}
+
+.wafinfo {
+    line-height: 18px;
+    margin-right: 10px;
+}
+
+.wafinfo .safetotal {
+    margin: 0 6px;
+    font-size: 16px;
+}
+
+.gjcs {
+    background-color: #fafafa;
+    border: #ddd 1px solid;
+    padding: 0;
+    float: left;
+    border-radius: 4px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    width: 480px;
+}
+
+.table .sitename, .filtertext {
+    width: 100px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.td3txt {
+    max-width: 200px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tdhide {
+    display: none
+}
+
+.divpre {
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #333;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #f6f6f6;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    max-height: 100px;
+    overflow: auto
+}
+
+.lib-con .table > tbody > tr.active td {
+    background-color: #E4EEE0;
+}
+
+.table_head_fix {
+    position: relative;
+}
+
+.tipsval {
+    margin-left: 2px;
+    color: #fc6d26;
+    padding: 0 2px;
+    height: 14px;
+    line-height: 14px;
+    border-radius: 3px;
+    font-family: arial;
+    vertical-align: 2px;
+    font-weight: 700
+}
+
+.tipsvalnull {
+    color: #ccc;
+    font-weight: normal
+}
+
+.dot {
+    position: relative;
+}
+
+.dot:after {
+    content: "";
+    height: 4px;
+    width: 4px;
+    border-radius: 2px;
+    background: #fc6d26;
+    position: absolute;
+    left: -7px;
+    top: 5px;
+}
+
+.soft-man-con .CodeMirror {
+    height: 250px;
+}
+.tab_list{
+    width: 100%;
+}
+.tab_list .tab_block{
+    width: 50%;
+    height: 45px;
+    line-height: 45px;
+    display: inline-block;
+    text-align: center;
+    border:1px solid #cfcfcfcf;
+    border-top:0;
+    background: #ececec;
+    cursor: pointer;
+}
+.tab_list .tab_block.active{
+    background: #fff;
+    border: 0;
+}
+.table_fix{
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.help-info-text {
+    margin-top: 0px;
+}
+</style>
 <div class="bt-form">
 	<div class="bt-w-main">
 		<div class="bt-w-menu">
 			<p class="bgw" onclick="pluginService('op_waf');">服务</p>
-			<p onclick="pluginConfig('op_waf');">信息</p>
+			<p onclick="wafScreen();">防火墙首页</p>
+			<p onclick="wafGloabl();">全局配置</p>
+			<p onclick="wafSite();">站点配置</p>
 		</div>
+		<!-- lib-con  -->
 		<div class="bt-w-con pd15">
 			<div class="soft-man-con"></div>
 		</div>
@@ -11,7 +240,7 @@
 
 </div>
 <script type="text/javascript">
-$.getScript( "/plugins/file?name=openrop_firewallesty&f=js/op_waf.js", function(){
+$.getScript( "/plugins/file?name=op_waf&f=js/op_waf.js", function(){
 	pluginService('op_waf');
 });
 </script>
\ No newline at end of file
diff --git a/plugins/op_waf/js/op_waf.js b/plugins/op_waf/js/op_waf.js
index e0cba5f83..2d42556d0 100755
--- a/plugins/op_waf/js/op_waf.js
+++ b/plugins/op_waf/js/op_waf.js
@@ -14,3 +14,63 @@ function owPost(method, args, callback){
     },'json'); 
 }
 
+
+
+function wafScreen(){
+
+    var con = '<div class="wavbox alert alert-success" style="margin-right:16px">总拦截<span>0</span>次</div>';
+    con += '<div class="wavbox alert alert-info" style="margin-right:16px">安全防护<span>0</span>天</div>';
+
+    con += '<div class="gjcs">\
+        <div class="line"><span class="name">POST渗透</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">GET渗透</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">CC攻击</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">恶意User-Agent</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">Cookie渗透</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">恶意扫描</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">恶意HEAD请求</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">URI自定义拦截</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">URI保护</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">恶意文件上传</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">禁止的扩展名</span><span class="val">0</span></div>\
+        <div class="line"><span class="name">禁止PHP脚本</span><span class="val">0</span></div>\
+        </div>';
+
+    con += '<div style="width:480px;"><ul class="help-info-text c7">\
+        <li>在此处关闭防火墙后,所有站点将失去保护</li>\
+        <li>网站防火墙会使nginx有一定的性能损失(&lt;5% 10C静态并发测试结果)</li>\
+        <li>网站防火墙仅主要针对网站渗透攻击,暂时不具备系统加固功能</li>\
+        </ul></div>';
+
+    $(".soft-man-con").html(con);
+}
+
+
+function wafGloabl(){
+    var con = '<div class="divtable">\
+        <table class="table table-hover waftable" style="color:#fff;">\
+            <thead><tr><th width="18%">名称</th>\
+            <th width="44%">描述</th>\
+            <th width="10%">响应</th>\
+            <th style="text-align: center;" width="10%">状态</th>\
+            <th style="text-align: right;">操作</th></tr>\
+            </thead>\
+        </table>\
+        </div>';
+    $(".soft-man-con").html(con);
+}
+
+
+function wafSite(){
+    var con = '<div class="divtable">\
+        <table class="table table-hover waftable" style="color:#fff;">\
+            <thead><tr><th width="18%">名称</th>\
+            <th width="44%">描述</th>\
+            <th width="10%">响应</th>\
+            <th style="text-align: center;" width="10%">状态</th>\
+            <th style="text-align: right;">操作</th></tr>\
+            </thead>\
+        </table>\
+        </div>';
+    $(".soft-man-con").html(con);
+}