socialforge/app/views/stores/index.html.erb

<style type="text/css">
	#main *{
		/*border: 1px solid #eeeeee;*/
	}
	#content {
		max-width: 100%;
	}
	#top_field {
		max-width: 100%;
		margin: 20px auto;
	}
	.line_block{
		display: inline-block;
		width: 49%;
		margin: 10px auto;
		vertical-align: top;
		padding: 0px 2%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-box-sizing: border-box;
	}
	.resource_sum{
		height: auto;
	}
	.line_block p{
		margin: 1em 0px auto;
		/*background: linear-gradient(#ffffff, #e5e5e5) repeat scroll 0% 0% transparent;*/
		border-bottom: 1px solid rgb(226,226,226);
		border-top-left-radius : 6px;
		border-top-right-radius : 6px;
		box-shadow: 0px 1px 0px white, 0px, -1px 0px rgb(245,245,245);
		height: 39px;
		font-size: 15px;
		line-height: 26px;
		height: 30px;
		font-size: 1.5em;
		padding-left: 4%;
		border-bottom: 1px solid rgb(21, 165, 200);
	}
	.resource_sum, .line_blo{
		border: 1px solid #eeeeee;
	}
	.line_block table{
		border: 1px solid #eeeeee;
	}
	.line_block table thead tr{
		/*background-color: #d1d1d1;*/
		text-align: center;
	}
	.line_block table td{
		height: 2em;
	}
	.filename {
		 
		overflow: hidden; 
		white-space: nowrap; 
		text-overflow: ellipsis;
		max-width: 247px;
	}
	/*.filename a:after {
		content: "...";
	}*/
	.blueinputbar{
		-o-transform-origin: 138px 46.5px;
		-o-transition: background 0.2s cubic-bezier(0, 0, 1, 1);
		-webkit-border-bottom-left-radius: 3px;
		-webkit-border-bottom-right-radius: 3px;
		-webkit-border-radius: 3px;
		-webkit-border-top-left-radius: 3px;
		-webkit-border-top-right-radius: 3px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.047) 0px 1px 3px 0px inset, rgba(82, 168, 236, 0.600) 0px 0px 8px 0px;
		-webkit-transform-origin: 138px 46.5px;
		-webkit-transition: background 0.2s cubic-bezier(0, 0, 1, 1);
		-webkit-transition-delay: 0;
		-webkit-transition-duration: 0.2s;
		-webkit-transition-property: background;
		-webkit-transition-timing-function: cubic-bezier(0, 0, 1, 1);
		align-content: stretch;
		align-items: stretch;
		align-self: stretch;
		background: #FFFFFF;
		border-bottom: 1px solid #56B4EF;
		border-left: 1px solid #56B4EF;
		border-radius: 3px;
		border-right: 1px solid #56B4EF;
		border-top: 1px solid #56B4EF;
		color: #333333;
		justify-content: flex-start;
		margin: 0px;
		order: 0;
		outline: #333333 0px;
		overflow-wrap: break-word;
		resize: none;
		text-shadow: none;
		transform-origin: 138px 46.5px;
		transition: background 0.2s cubic-bezier(0, 0, 1, 1);
		unicode-bidi: embed;
		vertical-align: top;
		word-wrap: break-word;
	}
	input.blueinputbar:focus {
		box-shadow: rgba(0, 0, 0, 0.047) 0px 1px 3px 0px inset, rgba(82, 168, 236, 0.600) 0px 0px 5px 0px;
		border-bottom: 1px solid #56B4EF;
		border-left: 1px solid #56B4EF;
		border-radius: 3px;
		border-right: 1px solid #56B4EF;
		border-top: 1px solid #56B4EF;
	}
</style>

<% content_for :top_field do%>
	<div style="margin: 10px 5%;vertical-align: bottom;">
		<%= form_tag( search_stores_path, method: 'get') do %>
		<%= text_field_tag 'name', nil, size:"100", placeholder:'请输入要搜索的关键字', :class => 'blueinputbar' %>
		<%= submit_tag l(:label_search), class:"whiteButton", style: "padding: 0px 10px;"%>
		<% end %>
	</div>
<% end %>

<div class="resource_sum">
<% @attach_array.each do |k|%>
	<div class="line_block">
		<p>
			<%= @str_arr.shift %>
		</p>
		<table style="width: 100%">
			<thead>
				<tr>
					<td><%=l(:label_attachment)%></td>
					<td><%=l(:field_downloads)%></td>
					<td><%=l(:button_download)%></td>
				</tr>
			</thead>
			<tbody>
			<% k.each do |c1|%>
				<tr class="<%= cycle 'odd', 'even' %>">
					<td class="filename" style="width:62%;"><%= link_to c1.filename, (attachFromUrl c1), {:title => c1.filename, :target => "_blank"} %> </td>
					<td style="width:19%; text-align: center;"><%= c1.downloads %> </td>
					<td class="filename" style="width:19%; text-align: center;"><%= link_to_attachment c1, {:text => "下载"}%></td>
				</tr>
			<% end %>
			</tbody>
		</table>
	</div>
<% reset_cycle; end %>
</div>