contest image show

app/views/softapplications/show.html.erb

@@ -1,12 +1,4 @@
 <%= render :partial => 'layouts/base_softapplication_top_content' %>
-<style>
-  .softapplication-img  .soft-application {
-  	float: left;
-  	width: 25%;
-  	height: 200px;
-  }
-</style>
-
 
 <p id="notice"><%= notice %></p>
 
@@ -53,8 +45,6 @@
             <% end %>
           </td>
         </tr>
-
-	
       </table>
     </td>
   </tr>
@@ -62,7 +52,10 @@
 <div class="underline-contests_one"></div>
 
 <div style="height: auto; padding-bottom: 10px">
-	<strong><div style="font-size: 15px;">作品简介：</div></strong>
+  <strong>
+    <div style="font-size: 15px;">作品简介：</div>
+  </strong>
+
   <div style="padding-top: 5px"><%= @softapplication.description %></div>
 </div>
 <div class="underline-contests_one"></div>
@@ -78,7 +71,7 @@
             <div data-kls="Softapplication" data-id="2" data-dimension="quality" data-average="3.25" class="rateable div_inline jDisabled" style="height: 20px; width: 115px; overflow: hidden; z-index: 1; position: relative;">
               <div class="jRatingColor" style="width: <%=star%>%;"></div>
               <div class="jRatingAverage" style="width: 0px; top: -20px;"></div>
-						<div class="jStar" style="width: 115px; height: 20px; top: -40px; background: url(&quot;/images/seems_rateable/stars.png&quot;) repeat-x scroll 0% 0% transparent;">
+              <div class="jStar" style="width: 115px; height: 20px; top: -40px; background: url(/images/seems_rateable/stars.png) repeat-x scroll 0% 0% transparent;">
               </div>
             </div>
             <%= @stars_status_map["star#{(star/20).to_s}".to_sym] %>
@@ -88,43 +81,44 @@
     </div>
     <div style="float: left; padding-left: 100px; padding-top:35px " align="center">
       <div>最终得分</div>
-			<div style="padding-top: 1px; font-size: 15px; color: blue"><%=@softapplication.average(:quality).try(:avg).try(:round, 2).to_i.to_s%>分</div>
+      <div style="padding-top: 1px; font-size: 15px; color: blue"><%= @softapplication.average(:quality).try(:avg).try(:round, 2).to_i.to_s %>
+        分
+      </div>
       <div><%= rating_for @softapplication, :static => true, dimension: :quality, class: 'rateable div_inline' %></div>
     </div>
     <div style="float: left; padding-left: 100px; padding-top:35px;" align="center">
       <div>打分总人数</div>
-			<div style="padding-top: 1px; font-size: 25px; color: blue; alignment-baseline: "><strong><%= @softapplication.raters(:quality).count%></strong></div>
+      <div style="padding-top: 1px; font-size: 25px; color: blue;">
+        <strong><%= @softapplication.raters(:quality).count %></strong></div>
     </div>
   </div>
 </div>
 <div class="underline-contests_one"></div>
 
 <div style="height: auto; padding-bottom: 10px">
-	<strong><div style="font-size: 15px">作品截图：</div></strong>
+  <strong>
-	<div class="softapplication-img" style="padding-top: 5px">
+    <div style="font-size: 15px">作品截图：</div>
+  </strong>
+
+  <div class="softapplication-img" >
+  	<ul>
   		<% @image_results.take(4).each do |attachment| %>
+  		<li>
+  			<div class="title"><a href="#"><%= attachment.filename.to_s -%></a></div>
   			<%= link_to_attachment_img attachment, :class => "soft-application", :download => "true"%>
+  		</li>
   	<% end %>
+  	</ul>
   </div>
   <div style='clear :left;'></div>
 </div>
 
 <div class="underline-contests_one"></div>
-<!-- <div style="margin-left: 22%;">
+
-<% 100.step(20,-20) do |star|  %>
-<div data-kls="Softapplication" data-id="2" data-dimension="quality" data-average="3.25" class="rateable div_inline jDisabled" style="height: 20px; width: 115px; overflow: hidden; z-index: 1; position: relative;">
-	<div class="jRatingColor" style="width: <%=star%>%;"></div>
-	<div class="jRatingAverage" style="width: 0px; top: -20px;"></div>
-	<div class="jStar" style="width: 115px; height: 20px; top: -40px; background: url(&quot;/images/seems_rateable/stars.png&quot;) repeat-x scroll 0% 0% transparent;">
-	</div>
-</div>
-<%= @stars_status_map["star#{(star/20).to_s}".to_sym] %>
-<br>
-<% end %>
-</div> -->
 <div style="height: 50px">
   <div style="font-size: 15px"><strong>作品评论：</strong></div>
-	<div style="padding-left: 210px">评分: <%= rating_for @softapplication, dimension: :quality, class: 'rateable div_inline' %><span style="font-size: 11px">(您可以重新打分，打分结果以最后一次打分为主！)</span></div>
+  <div style="padding-left: 210px">评分: <%= rating_for @softapplication, dimension: :quality, class: 'rateable div_inline' %>
+    <span style="font-size: 11px">(您可以重新打分，打分结果以最后一次打分为主！)</span></div>
 
 </div>
 
@@ -142,5 +136,4 @@
 
 
 <div>
-<%#= link_to '返回竞赛页面', show_softapplication_contest_path(@softapplication.contest) %>
 </div>

public/stylesheets/nyan.css

@@ -218,7 +218,6 @@ body {
     border-style: solid;
     border-width: 1px;
     color: #222222;
-    font-family: "Helvetica Neue";
     font-size: 1.2em;
     outline: medium none;
     padding: 8px;
@@ -1140,3 +1139,54 @@ div.pagination {
 .all_browse_div table td{
   vertical-align: middle;
 }
+
+/* softapplication show
+*******************************************************************************/
+.softapplication-img {
+    margin: 0;
+    padding: 0;
+}
+.softapplication-img {
+    margin: 5px auto;
+    width: 860px;
+    max-height: 640px;
+    overflow: hidden;
+    box-shadow: 5px 5px 20px 5px #ccc;
+    border-radius: 5px;
+}
+.soft-application {
+    width: 326px;
+    height: 580px;
+}
+.softapplication-img .title{
+    width: 326px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+.softapplication-img .title a{
+    display: block;
+    text-decoration: none;
+    color: #fff;
+    font-size: 20px;
+    padding: 20px;
+    background: rgba(0,0,0,0.5);
+}
+.softapplication-img li{
+    list-style-type: none;
+    position: relative;
+    float: left;
+    width: 205px;
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    -o-transition: all 0.5s;
+    transition: all 0.5s;
+    box-shadow: -1px 0 3px 1px rgba(0,0,0,0.3);
+}
+.softapplication-img ul:hover li{
+    width: 160px;
+}
+.softapplication-img ul li:hover{
+    width: 326px;
+}