jacknudt
/
socialforge
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

主页界面设计

This commit is contained in:
nieguanghui 2013-11-27 15:37:43 +08:00
parent 16c218ccae
commit f0b17a1a10
2 changed files with 512 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

388
app/views/welcome/index.html.erb
View File

@ -101,43 +101,403 @@
<!-- info display block -->
<%= stylesheet_link_tag 'welcome' %>
<div class="body_resize">
<div class="right">
<!-- <div class="right">
<div class="home"><%= l :label_hot_project%></div>
<% find_all_hot_project.map do |project| break if(project == find_all_hot_project[5]) %>
<div class="project">
<%=link_to( project.name, project_path(project.project_id), :class => "nowrap" )%>
<p><%= project.description %></p>
<!-- span class="grey"><strong><em> </em></strong></span -->
</div>
<% end %>
</div>
<!-- p class="grey">Fusce vehicula dignissim ligula. Vestibulum sit amet neque eu neque suscipit consequat quis vel risus. </p>
<p><strong>Vestibulum vehicula purus nec dui accumsan fermentum.</strong> Suspendisse potenti. Ut dapibus est id odio pretium blandit in eget leo. Aliquam erat volutpat. Curabitur blandit </p>
<p class="grey">&nbsp;</p -->
</div>
<div class="left">
<div class="home" ><%= l :label_newbie_faq %><!-- 新手指引 &amp; 问答 --></div>
<div class="home" ><%= l :label_newbie_faq %></div>
<% newbieTopicStickyList.each do |topic| break if(topic == newbieTopicStickyList[6])%>
<div class="project">
<%=link_to( topic.subject, board_message_path(find_board_by_topic(topic),topic), :class => "nowrap" )%>
<span class="grey"><strong><em>[ <%=find_project_by_topic(topic) %> ]</em></strong></span>
</div>
<% end %>
<!-- div class="project"> <a href="#" ><span >新手入门指引帖 && FAQ bala...</span></a> <span class="grey"><strong><em>[ Trustie ]</em></strong></span></div -->
</div> -->
</div>
<div class="left" style="float: left; height: 445px;">
<ul class="welcome-message-list" style="width: 90%;">
<h3 style="">论坛热帖</h3>
<div class="welcome-box-list">
<li class="message-brief-intro">
<span style="color:gray">新建DIV测试项目对于本项目的作用</span> <span style="margin-left: 10px; color: green">yanpc</span><span style="margin-left:10px; color:blue">1分钟前</span>
</li>
<li class="message-brief-intro">
<span style="color:gray">热烈祝贺论坛新版本上线，欢迎大家提交bug</span><span style="margin-left: 10px; color: green">yanpc</span><span style="margin-left:10px; color:blue">5分钟前</span>
</li>
<li class="message-brief-intro">
<span style="color:gray">论坛全新改版，增加许多功能啦，欢迎大家提交bug</span><span style="margin-left: 10px; color: green">yanpc</span><span style="margin-left:10px; color:blue">半小时前</span>
</li>
<li class="message-brief-intro">
<span style="color:gray">网站主页改版，欢迎大家提交意见和建议</span><span style="margin-left: 10px; color: green">yanpc</span><span style="margin-left:10px; color:blue">2013-11-12</span>
</li>
<li class="message-brief-intro">
<span style="color:gray">网站持续更新中，以期给大家带来更好的用户体验</span><span style="margin-left: 10px; color: green">yanpc</span><span style="margin-left:10px; color:blue">2013-11-9</span>
</li>
<li class="message-brief-intro">
<span style="color:gray">网站上线第一次发帖，欢迎大家来盖楼</span><span style="margin-left: 10px; color: green">yanpc</span><span style="margin-left:10px; color:blue">2013-11-9</span>
</li>
</div>
</ul>
</div>
<div class="right" style="float: right; margin-right: -80px; height: 445px;">
<ul class="user-welcome-message-list" style="width: 80%; margin-top: 80px;">
<h3 style="margin-left: -5px;">用户动态</h3>
<div class="user-message-box-list">
<li style="display: block;height:60px;">
<div class="inner-right" style="float: left; height: 100%;">
<img class="avatar-3" style="width: 40px; height: 40px; margin-top:10px;" src="/images/avatars/User/4861?1385345302"></img>
</div>
<div class="inner-right" style="float: right; width:88%; height: 100%;">
<span style="color: green;">yanpc</span>&nbsp;发表了评论：<span style="color: blue;">热烈庆祝OW2圆满结束，让我们一起期待下一届的OW2比赛吧！</span>
<p><span>1分钟前</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>评论(4)</span></p>
</div>
</li>
<li style="display: block;height:60px;">
<div class="inner-right" style="float: left; height: 100%;">
<img class="avatar-3" style="width: 40px; height: 40px; margin-top:10px;" src="/images/avatars/User/4861?1385345302"></img>
</div>
<div class="inner-right" style="float: right; width:88%; height: 100%;">
<span style="color: green;">yanpc</span>&nbsp;发表了评论：<span style="color: blue;">热烈庆祝OW2圆满结束，让我们一起期待下一届的OW2比赛吧！</span>
<p><span>1分钟前</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>评论(4)</span></p>
</div>
</li>
<li style="display: block;height:60px;">
<div class="inner-right" style="float: left; height: 100%;">
<img class="avatar-3" style="width: 40px; height: 40px; margin-top:10px;" src="/images/avatars/User/4861?1385345302"></img>
</div>
<div class="inner-right" style="float: right; width:88%; height: 100%;">
<span style="color: green;">yanpc</span>&nbsp;发表了评论：<span style="color: blue;">热烈庆祝OW2圆满结束，让我们一起期待下一届的OW2比赛吧！</span>
<p><span>1分钟前</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>评论(4)</span></p>
</div>
</li>
<li style="display: block;height:60px;">
<div class="inner-right" style="float: left; height: 100%;">
<img class="avatar-3" style="width: 40px; height: 40px; margin-top:10px;" src="/images/avatars/User/4861?1385345302"></img>
</div>
<div class="inner-right" style="float: right; width:88%; height: 100%;">
<span style="color: green;">yanpc</span>&nbsp;发表了评论：<span style="color: blue;">热烈庆祝OW2圆满结束，让我们一起期待下一届的OW2比赛吧！</span>
<p><span>1分钟前</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>评论(4)</span></p>
</div>
</li>
<li style="display: block;height:60px;">
<div class="inner-right" style="float: left; height: 100%;">
<img class="avatar-3" style="width: 40px; height: 40px; margin-top:10px;" src="/images/avatars/User/4861?1385345302"></img>
</div>
<div class="inner-right" style="float: right; width:88%; height: 100%;">
<span style="color: green;">yanpc</span>&nbsp;发表了评论：<span style="color: blue;">热烈庆祝OW2圆满结束，让我们一起期待下一届的OW2比赛吧！</span>
<p><span>1分钟前</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>评论(4)</span></p>
</div>
</li>
</div>
</ul>
</div>
<div id="J_Slide" class="d-p-index-box d-p-index-hotproject">
<h2>热门项目</h2>
<!-- <ul class="d-p-index-hdright d-p-project-bytime ks-switchable-nav">
<li class="current">
<a class="" href="javascript:void(0);">今日</a>
</li>
<li>
<a class="" href="javascript:void(0);">本周</a>
</li>
<li>
<a class="" href="javascript:void(0);">本月</a>
</li>
</ul> -->
<div class="d-p-projectlist-box">
<ul class="d-p-projectlist">
<li style="background-image:none;">
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/tfs/" title="tfs">DIV布局测试</a>
</p>
<p class="layout-1" >
<span class="d-p-project-intro">给大家一个版本库，路径为trustie2@10.0.47.245:/home/trustie2密码是http://10.0.47.245/trustie21234</span>
</p>
<!-- <span>更新于</span><span style="color: blue">5天前</span> -->
</li>
<li>
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/javatwx/" title="javatwx">javatwx</a>
</p>
<p class="layout-1">
<span class="d-p-project-intro">javamall</span>
</p>
</li>
<li>
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/sz_digital_ocean/" title="sz_digital_ocean">sz_digital_ocean</a>
</p>
<p class="layout-1">
<span class="d-p-project-intro">sz_digital_ocean</span>
</p>
</li>
<li>
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/android_1/" title="android_1">android_1</a>
</p>
<p class="layout-1">
<span class="d-p-project-intro">android study</span>
</p>
</li>
<li>
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/tair/" title="tair">tair</a>
</p>
<p class="layout-1">
<span class="d-p-project-intro">Tair is a distributed, high performance key/value storage sy...</span>
</p>
</li>
</ul>
</div>
</div>
<div id="J_Slide" class="d-p-index-box d-p-index-hotproject" style="float: right;">
<h2>热门竞赛</h2>
<!-- <ul class="d-p-index-hdright d-p-project-bytime ks-switchable-nav">
<li class="current">
<a class="" href="javascript:void(0);">今日</a>
</li>
<li>
<a class="" href="javascript:void(0);">本周</a>
</li>
<li>
<a class="" href="javascript:void(0);">本月</a>
</li>
</ul> -->
<div class="d-p-projectlist-box">
<ul class="d-p-projectlist">
<li style="background-image:none;" >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/tfs/" title="tfs">tfs</a>
</p>
<p class="layout">
<span class="d-p-project-intro">TFS（Taobao FileSystem）是一个高可扩展、高可用、高性能、面向互联网服务的分布式文件系统，其设计目标是...</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/javatwx/" title="javatwx">javatwx</a>
</p>
<p class="layout">
<span class="d-p-project-intro">javamall</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/sz_digital_ocean/" title="sz_digital_ocean">sz_digital_ocean</a>
</p>
<p class="layout">
<span class="d-p-project-intro">sz_digital_ocean</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/android_1/" title="android_1">android_1</a>
</p>
<p class="layout">
<span class="d-p-project-intro">android study</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/tair/" title="tair">tair</a>
</p>
<p class="layout">
<span class="d-p-project-intro">Tair is a distributed, high performance key/value storage sy...</span>
</p>
</li>
</ul>
</div>
</div>
<div id="J_Slide" class="d-p-index-box d-p-index-hotproject" >
<h2>最新众包</h2>
<!-- <ul class="d-p-index-hdright d-p-project-bytime ks-switchable-nav">
<li class="current">
<a class="" href="javascript:void(0);">今日</a>
</li>
<li>
<a class="" href="javascript:void(0);">本周</a>
</li>
<li>
<a class="" href="javascript:void(0);">本月</a>
</li>
</ul> -->
<div class="d-p-projectlist-box">
<ul class="d-p-projectlist">
<li style="background-image:none;" >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/tfs/" title="tfs">tfs</a>
</p>
<p class="layout">
<span class="d-p-project-intro">TFS（Taobao FileSystem）是一个高可扩展、高可用、高性能、面向互联网服务的分布式文件系统，其设计目标是...</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/javatwx/" title="javatwx">javatwx</a>
</p>
<p class="layout">
<span class="d-p-project-intro">javamall</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/sz_digital_ocean/" title="sz_digital_ocean">sz_digital_ocean</a>
</p>
<p class="layout">
<span class="d-p-project-intro">sz_digital_ocean</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/android_1/" title="android_1">android_1</a>
</p>
<p class="layout">
<span class="d-p-project-intro">android study</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/tair/" title="tair">tair</a>
</p>
<p class="layout">
<span class="d-p-project-intro">Tair is a distributed, high performance key/value storage sy...</span>
</p>
</li>
</ul>
</div>
</div>
<div id="J_Slide" class="d-p-index-box d-p-index-hotproject" style="float: right;">
<h2>热门课程</h2>
<!-- <ul class="d-p-index-hdright d-p-project-bytime ks-switchable-nav">
<li class="current">
<a class="" href="javascript:void(0);">今日</a>
</li>
<li>
<a class="" href="javascript:void(0);">本周</a>
</li>
<li>
<a class="" href="javascript:void(0);">本月</a>
</li>
</ul> -->
<div class="d-p-projectlist-box">
<ul class="d-p-projectlist">
<li style="background-image:none;" >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/tfs/" title="tfs">tfs</a>
</p>
<p class="layout">
<span class="d-p-project-intro">TFS（Taobao FileSystem）是一个高可扩展、高可用、高性能、面向互联网服务的分布式文件系统，其设计目标是...</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/javatwx/" title="javatwx">javatwx</a>
</p>
<p class="layout">
<span class="d-p-project-intro">javamall</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/sz_digital_ocean/" title="sz_digital_ocean">sz_digital_ocean</a>
</p>
<p class="layout">
<span class="d-p-project-intro">sz_digital_ocean</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/android_1/" title="android_1">android_1</a>
</p>
<p class="layout">
<span class="d-p-project-intro">android study</span>
</p>
</li>
<li >
<p class="layout">
<a target="_blank" class="d-g-blue d-p-project-name" href="/p/tair/" title="tair">tair</a>
</p>
<p class="layout">
<span class="d-p-project-intro">Tair is a distributed, high performance key/value storage sy...</span>
</p>
</li>
</ul>
</div>
</div>
<div class="clr"></div>
</div>
<!-- end -->
<br/><br/><br/><br/><br/><br/><br/>
<!-- end -->
<div>
<!-- <div>
<table width="700" border="0" align="center" style="padding-top: 0px">
<tr>
<td colspan="5" align="center" style="padding-bottom: 10px; font-size: 18px; font-color: #5c5c5c ; font-family: 微软雅黑"><%= l(:label_welcome_leave_message) %> <strong><%= toggle_link l(:label_welcome_click_me), 'put-bid-form', {:focus => 'new_form_project_message'} %></strong>
@ -172,7 +532,7 @@
</td>
</tr>
</table>
</div>
</div> -->

140
public/stylesheets/welcome.css
View File

@ -1,4 +1,4 @@
.body_resize { width:950px; margin:0 auto; padding:0;}
/*.body_resize { width:950px; margin:0 auto; padding:0;}
.left { width:371px; float:left; margin:20px 5px 10px 5px; padding:5px;}
.right { width:527px; float:left; margin:20px 5px 10px 5px; padding:5px;}
@ -6,7 +6,7 @@
.right li { font: bold 12px Arial, Helvetica, sans-serif; color:#6f6f6f; padding:5px 20px; margin:0; background:url(images/about_ul_li.gif) left no-repeat;}
.body { background:#ebebeb; border-bottom:1px solid #fff; } /*没用到*/
.body { background:#ebebeb; border-bottom:1px solid #fff; }
.home {
font:bold 16px Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
@ -40,7 +40,6 @@ div.project a{
div.project {
overflow: hidden;
/*white-space: nowrap;*/
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
@ -58,8 +57,141 @@ span.grey {
line-height:1.8em;
padding:5px 5px;
margin:0;
}*/
.welcome-message-list li.message-brief-intro{
position: relative;
display: block;
margin-bottom: -1px;
margin-left: 0px;
padding: 8px 10px 0px;
border-bottom: 1px dashed rgb(229, 229, 229);
width: 95%;
height: auto;
}
p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li {
list-style-type: none;
}
ul {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
width: 50%;
}
ul.welcome-message-list{
margin-top: 80px;
}
.welcome-message-list h3, .user-welcome-message-list h3 {
border-bottom: 1.5px solid rgb(21, 165, 200);
padding: 2px;
margin-left: 10px;
}
/*鍚勭鍒楄〃鏄剧ず*/
.d-p-index-box{
border: 1px solid #e6e6e6;
background: #ffffff;
padding: 1px;
}
.d-p-index-hdright{
position: relative;
float: right;
margin-top: -27px;
margin-right: 10px;
color: #999999;
}
.d-p-index-box h2{
height: 35px;
line-height: 35px;
background-color: #f2f2f2;
color: #333;
text-indent: 8px;
margin: 0;
padding: 0;
display: block;
font-size: 1em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
margin-top: 0px;
}
.d-p-index-hotproject{
width: 48%;
margin-top: 30px;
float: left;
}
ul.d-p-index-hdright{
padding: 0px;
margin-top: -30px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.d-p-project-bytime li.current a{
color: #333;
font-weight: 700;
}
.d-p-project-bytime li{
float: left;
padding:0px 8px;
background: center right no-repeat;
}
.d-p-project-bytime a{
color: #999;
}
.d-p-projectlist-box{
/*width: 476px;*/
overflow: hidden;
height:auto;
margin: 0px;
padding: 0px;
}
.d-p-index-newsource li,.d-p-index-hotproject ul.d-p-projectlist li{
color: #999999;
background: center -1px no-repeat;
line-height: 20px;
padding: 0px 9px;
width: 440px;
cursor: pointer;
font: 12px/1.5 tahoma,arial,\5b8b\4f53;
float: left;
/* display:block;*/
margin-left: 0px;
margin-top: 0px;
border-bottom: 1px solid rgb(245,245,245);
}
.d-g-blue{
color: green !important;
font-weight: 700;
}
ul.d-p-projectlist{
margin-top: 0px;
}
/*
p.layout-1 {
margin-top: -8px;
}*/
/*
p.layout {
margin-top: -8px;
}
*/
.right ul li {
margin-bottom: 6px;
}
/*p.clr, .clr { clear:both; padding:0; margin:0; background:none;}*/