针对OSP社区的新需求的界面展示：

1.开源项目社区(OSP)index界面增加[软件安全漏洞]展示
2.osp项目主页增加[项目安全态势]、[技术创新趋势] 展示

ps.此次为不负责任的提交~

app/views/open_source_projects/index.html.erb

@@ -1,4 +1,4 @@
-<div class="top-content">
+<div class="top-content" >
 	<%= form_tag(:controller => 'open_source_projects', :action => "search", :method => :get) do %>
 	<table width="940px">
 		<tr>
@@ -18,15 +18,16 @@
 	</table>
 	<% end %>
 </div>
+
 <style type="text/css">
 .tb-navigation {
 	position: relative;
 	z-index: 400;
 }
-blockquote, body, button, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
+/*blockquote, body, button, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
 	margin: 0;
 	padding: 0;
-}
+}*/
 
 .navigation {
 	color: #666;
@@ -128,9 +129,190 @@ li {
 .nav-search-con{
 	padding-top: 7px;
 }
+
+
 </style>
+<%= javascript_include_tag "ichart.1.2.min" %>
+<%= stylesheet_link_tag  "buglist-div-use.css" %>
+<%= stylesheet_link_tag  "buglist-ichart.css" %>
+<%= stylesheet_link_tag  "buglist.css" %>
+
+  <div class="mask">
+    <div class="header2"></div>
+    <div class="colleft">
+      <div class="col1" >
+        <h1>安全态势分析 </h1>
+        <div id='canvasDiv' style="border-style:none"></div>
+      </div>
+
+      <div class="col2">
+      <div> <span> <h1 style="fontsize:19px">软件安全漏洞 </h1></span><span  style="margin-top: -30px; margin-right:70px;float: right; display: block;"><a href="#" hover="text-decoration: underline;" >More >></span></a></div>
+        <div class="fixed"></div>
+        <div class="li_list" style="margin-top:10px;margin-left:10px">
+          <ul style="list-style-type: square;">
+            <li><span class="li_time">[DDoS漏洞]</span><a href="/vuldb/ssvid-62261" title="Cobbler 2.4.x - 2.6.x 本地文件包含">Cobbler 2.4.x - 2.6.x 本地文件包含</a></li>
+
+            <li><span class="li_time">[OpenSSL漏洞]</span><a href="/vuldb/ssvid-62260" title="Ruby OpenSSL CA私钥伪造漏洞">Ruby OpenSSL CA私钥伪造漏洞</a></li>
+
+            <li style="color: red"><span class="li_time">[远程溢出漏洞]</span><a href="/vuldb/ssvid-62259" title="Adobe Flash Player 整数堆栈下溢远程命令执行">Adobe Flash Player 整数堆栈下溢远程命令执行</a></li>
+
+           <!--  <li><span class="li_time">14-05-07</span><a href="/vuldb/ssvid-62258" title="PHPDISK phpdisk_del_process.php SQL注入漏洞">PHPDISK phpdisk_del_process.php SQL注入漏洞</a></li> -->
+
+      <!--       <li><span class="li_time">[OpenSSL漏洞]</span><a href="/vuldb/ssvid-62257" title="BEESCMS 3.4 order_save.php SQL注入漏洞">BEESCMS 3.4 order_save.php SQL注入漏洞</a></li> -->
+
+            <li ><span class="li_time">[SQL注入漏洞]</span><a href="/vuldb/ssvid-62256" title="Apache/NGINX 下 PHP-FPM 或者 PHP-CGI 拒绝服务漏洞">Apache/NGINX 下 PHP-FPM 拒绝服务漏洞</a></li>
+
+            <li><span class="li_time">[SQL注入漏洞]</span><a href="/vuldb/ssvid-62250" title="AlienVault OSSIM SQL注入以及远程代码执行">AlienVault OSSIM SQL注入以及远程代码执行</a></li>
+
+            <li><span class="li_time">[DDoS漏洞]</span><a href="/vuldb/ssvid-62248" title="Eucalyptus Web Services拒绝服务漏洞">Eucalyptus Web Services拒绝服务漏洞</a></li>
+
+            <li ><span class="li_time">[OpenSSL漏洞]</span><a href="/vuldb/ssvid-62245" title="Watchguard Fireware XTM OpenSSL TLS心跳信息泄漏漏洞">Watchguard Fireware XTM OpenSSL TLS心跳...</a></li>
+
+            <li style="color: red"><span class="li_time">[OpenSSL漏洞]</span><a href="/vuldb/ssvid-62244" title="SAP Sybase SQL Anywhere OpenSSL TLS泄漏漏洞">SAP Sybase SQL Anywhere OpenSSL TLS</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="clear:both; margin:0 0 10 0"></div>
+ <script type="text/javascript">
+                        $(function(){
+                                var flow=[];
+                                for(var i=0;i<35;i++){
+                                        flow.push(Math.floor(Math.random()*(30+((i%12)*5)))+10);
+                                        // t.push(Math.floor(Math.random()*(30+((i%12)*5)))+10);
+                                }
+                                
+                                var data = [
+                                                {
+                                                        name : 'commit',
+                                                        value:flow,
+                                                        color:'#0d8ecf',
+                                                        line_width:2
+                                                }
+
+                                         ];
+                         
+                                var labels = ["","2010","2011","2012","2013","2014"];
+                                
+                                var line = new iChart.LineBasic2D({
+                                        render : 'canvasDiv',
+                                        data: data,
+                                        align:'center',
+                                        title : '',
+                                        subtitle : '',
+                                        footnote : '',
+                                        width : 430, // 面板大小
+                                        height : 210,
+                                        shadow:true,
+							//shadow_color : '#20262f',
+							shadow_blur : 1,
+							shadow_offsetx : 0,
+							shadow_offsety : 2, 
+							//background_color:null //'#383e46'设置透明背景
+
+                                        tip:{
+                                                enable:true,
+                                                shadow:true,
+                                                move_duration:400,
+                                                border:{
+										enable:true,
+										radius : 5,
+										width:2,
+										color:'#3f8695'
+										},  	
+                                        },   
+
+                                        legend : {
+								enable : true,
+								row:1,//设置在一行上显示，与column配合使用
+								column : 'max',
+								valign:'top',
+								sign:'bar',
+								background_color:null,//设置透明背景
+								offsetx:-80,//设置x轴偏移，满足位置需要
+								border : true
+							},
+							  crosshair:{
+                                                enable:true, //十字交叉线
+                                                line_color:'#62bce9'
+                                        },
+                                        sub_option : {
+                                        	     label:false, //是否显示数值
+                                        	     // hollow_inside:false,
+                                                smooth : true,//平滑曲线
+                                                point_size:2, // 焦点大小
+                                                // point_hollow : true,
+                                                
+                                                
+                                        },                                    
+                                         coordinate:{
+                                                width:370, // 图表大小
+                                                //valid_width:330,
+                                                height:150,
+                                                axis:{
+                                                        // color:'#9f9f9f',
+                                                        color:'#dcdcdc',
+                                                        width:[0,0,2,2]
+                                                },
+                                                grids:{
+                                                        vertical:{
+                                                                way:'share_alike',
+                                                                value:1  
+                                                                // 改垂直线
+                                                        }
+                                                },
+                                                scale:[{ 
+                                                     position:'left',       
+                                                     start_scale:0,
+                                                     scale_space:50,
+                                                     end_scale:70, 
+                                                     scale_color:'#9f9f9f',
+                                                    // label : {color:'#ffffff',fontsize:11},
+
+                                                },{
+                                                         position:'bottom',     
+                                                         labels:labels
+                                                }]
+                                        }
+                                });
+                        //开始画图
+
+                         /**
+*自定义组件,画平均线。
+*/
+line.plugin(new iChart.Custom({
+drawFn:function(){
+/**
+*计算平均值的高度(坐标Y值)
+*计算高度还不会！ 会划线了！
+*/
+// var avg = line.total/5,
+// coo = line.getCoordinate(),
+// x = coo.get('originx'),
+// W = coo.width,
+// S = coo.getScale('left'),
+// H = coo.height,
+// h = (avg - S.start) * H / S.distance,
+// y = line.y + H - h;
+line.target.line(28,97,400,97,2,'#b32c0d')
+.textAlign('start')
+.textBaseline('middle')
+.textFont('600 12px Verdana');
+}
+})); 
+                        line.draw();
+                });
+                                
+  //]]>
+  </script>
+
+
+
+
+
 <%#======================================================================box before%>
-<div class="tb-navigation" data-spm="a230r.1.3">
+<div class="tb-navigation" data-spm="a230r.1.3"  style="margin-top:20px">
 	<div class="navigation">
 		<div class="nav-switch">
 				<a href="javascript:(function (){$('.nav-content').toggle();})();">

public/stylesheets/buglist-div-use.css

@@ -0,0 +1,41 @@
+  .mask{
+   position: relative;
+   overflow: hidden;
+   margin: 0px 0 0 0;
+   width: 970px;
+
+  }
+  .header2{
+   float: left;
+   width: 100%;
+   background-color: #f4f4f4
+  }
+  .colleft{
+   position: relative;
+   width: 100%;
+   right: 50%;
+   background-color: #000000
+  }
+  .col1{
+   position: relative;
+   overflow: hidden;
+   float: left;
+   width: 470px;
+   left: 100%;
+
+  }
+  .col2{
+   position: relative;
+   overflow: hidden;
+   float: left;
+   width: 470px;
+   left: 3%;
+  }
+
+a:hover, a:active {
+color: #c61a1a;
+text-decoration: underline;
+}
+
+
+

public/stylesheets/buglist-ichart.css

@@ -0,0 +1,74 @@
+@CHARSET "utf-8";
+/*body {
+	padding:0px;
+	margin:0px;
+	margin-top:10px;
+	text-align: left;
+	font-family:'微软雅黑',Trebuchet MS,Verdana,Helvetica,Arial,sans-serif;
+}*/
+.ichartjs_btn{
+	padding:2px 5px;
+	line-height:25px;
+	color:#0b2946;
+	cursor: pointer;
+	text-align:center;
+	font-size:12px;
+	/*border:1px solid #98adc1;*/
+	-webkit-box-shadow:0px 0px 2px #375073;
+	-moz-box-shadow:0px 0px 2px #375073;
+	box-shadow:0px 0px 2px #375073;
+	/*-moz-border-radius:5px;*/
+	/*-webkit-border-radius:5px;*/
+	/*-khtml-border-radius:5px;*/
+	/*border-radius:0px*/
+}
+.ichartjs_author{
+	position: absolute;
+	font-size:12px;
+	right: 20px;
+	top: 0px;
+}
+.ichartjs_author a{
+	color:#113659;
+}
+
+.ichartjs_info{
+	position:relative;
+	margin:10px;
+	padding:5px;
+	color:#1b4267;
+}
+.ichartjs_sm{
+	margin:10px 0px;
+	font-size: 13px;
+	font-weight: 60;
+}
+.ichartjs_details{
+	padding:0px;
+	text-indent:2em;
+	font-size: 12px;
+	line-height:20px;
+}
+#ichartjs_code{
+	display:none;
+}
+#ichartjs_result{
+	position: absolute;
+	left: 20px;
+	bottom: 20px;
+	padding:8px;
+	color:#fefefe;
+	font-size:20px;
+	font-weight:600;
+	background-color:#6d869f;
+	cursor: pointer;
+	text-align:center;
+	/*border:1px solid #6a869d;*/
+	-webkit-box-shadow:0px 0px 2px #375073;
+	-moz-box-shadow:0px 0px 2px #375073;
+	box-shadow:0px 0px 2px #375073;
+	/*-moz-border-radius:10px;*/
+	/*-webkit-border-radius:10px;*/
+	/*-khtml-border-radius:0px;*/
+	/*border-radius:10px*/
+}

public/stylesheets/sec-analysis.css

@@ -0,0 +1,41 @@
+  .mask{
+   position: relative;
+   overflow: hidden;
+   margin: 0px 0 0 0;
+   width: 690px;
+
+  }
+  .header2{
+   float: left;
+   width: 100%;
+   background-color: #f4f4f4
+  }
+  .colleft{
+   position: relative;
+   width: 100%;
+   right: 50%;
+   background-color: #000000
+  }
+  .col1{
+   position: relative;
+   overflow: hidden;
+   float: left;
+   width: 50%;
+   left: 100%;
+
+  }
+  .col2{
+   position: relative;
+   overflow: hidden;
+   float: left;
+   width: 50%;
+   left: 1%;
+  }
+
+a:hover, a:active {
+color: #c61a1a;
+text-decoration: underline;
+}
+
+
+