消息列表

This commit is contained in:
caishi 2019-10-18 11:25:35 +08:00
parent 0dcc931aee
commit 610d82d550
3 changed files with 184 additions and 8 deletions

View File

@ -0,0 +1,96 @@
<div class="mt20">
<div class="df middlePanel">
<div class="fl pagePanel_left">
<div class="mb15 l_headPhoto">
<div class="l_img">
<% if User.current.logged? && User.current == @user %>
<%= link_to image_tag(url_to_avatar(@user),width:"238", height: "238", :id => 'nh_source_tx'),
my_clear_user_avatar_temp_path, :remote => true %>
<% else %>
<%=image_tag(url_to_avatar(@user),width:"238", height: "238", :id=>'nh_source_tx') %>
<% end %>
</div>
<p><%= link_to @user.show_name, user_path(@user), :class => "f22 color-grey3" %></p>
<p>
<% if @user.user_extensions && @user.user_extensions.identity %>
<span class="f18"><%= get_user_roll @user %></span>
<% end%>
</p>
</div>
<div class="l_InfoNav mb20">
<li class="clearfix active">
<a href="javascript:void(0)" class="ml30">消息</a>
<span class="readingNum">20</span>
</li>
<li class="clearfix">
<a href="javascript:void(0)" class="ml30">私信</a>
</li>
</div>
</div>
<div class="fl pagePanel_right mb20">
<div class="r_infos_menu">
<li class="active"><a href="javascript:void(0)">全部</a></li>
<li><a href="javascript:void(0)">课堂提醒</a></li>
<li><a href="javascript:void(0)">项目提醒</a></li>
<li><a href="javascript:void(0)">互动提醒</a></li>
<li><a href="javascript:void(0)">审核</a></li>
<li><a href="javascript:void(0)">通知</a></li>
</div>
<ul class="p_list_ul">
<li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div>
<p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span><span class="infoTips tips_high ml15">高</span></p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div>
</li>
<li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div>
<p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span>
<span class="infoTips tips_rightNow ml15">立刻</span></p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div>
</li>
<li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div>
<p class="lh25 mb10">
<span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span>
<span class="infoTips tips_normal ml15">正常</span>
</p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div>
</li>
<li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div>
<p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span>
<span class="infoTips tips_urgent ml15">紧急</span></p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div>
</li>
<li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div>
<p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span><span class="infoTips tips_low ml15">低</span></p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script>
$(function () {
$(".l_InfoNav").on("click","li",function () {
$(".l_InfoNav li").removeClass("active");
$(this).addClass("active");
})
$(".r_infos_menu").on("click","li",function () {
$(".r_infos_menu li").removeClass("active");
$(this).addClass("active");
})
})
</script>

View File

@ -38,40 +38,45 @@
<li><a href="javascript:void(0)">我收到的issue</a></li> <li><a href="javascript:void(0)">我收到的issue</a></li>
</div> </div>
</div> </div>
<div class="fl pagePanel_right"> <div class="fl pagePanel_right mb20">
<ul class="p_list_ul"> <ul class="p_list_ul">
<li> <li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" /> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div> <div>
<p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span></p> <p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span><span class="infoTips tips_high ml15">高</span></p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p> <p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div> </div>
</li> </li>
<li> <li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" /> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div> <div>
<p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span></p> <p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span>
<span class="infoTips tips_rightNow ml15">立刻</span></p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p> <p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div> </div>
</li> </li>
<li> <li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" /> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div> <div>
<p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span></p> <p class="lh25 mb10">
<span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span>
<span class="infoTips tips_normal ml15">正常</span>
</p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p> <p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div> </div>
</li> </li>
<li> <li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" /> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div> <div>
<p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span></p> <p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span>
<span class="infoTips tips_urgent ml15">紧急</span></p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p> <p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div> </div>
</li> </li>
<li> <li>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" /> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3276179142,1686381254&fm=26&gp=0.jpg" class="r_list_img" />
<div> <div>
<p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span></p> <p class="lh25 mb10"><span class="mr20 f16 color-grey3">阿黄</span><span class="fontGrey4 f12">1个月前</span><span class="infoTips tips_low ml15">低</span></p>
<p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p> <p class="c_grey02 f14">更新了issue: 首次创建实训后没有默认脚本</p>
</div> </div>
</li> </li>

View File

@ -867,6 +867,20 @@ a.user_editinfo{border-top:1px solid #e5e5e5; height:30px; line-height:30px; tex
.pagePanel_right li > div{ .pagePanel_right li > div{
flex: 1; flex: 1;
} }
/*右侧标签*/
.infoTips{
display: inline-block;
height: 20px;
line-height: 20px;
padding:0px 6px;
color: white;
border-radius:2px;
}
.tips_normal{background: #60B25E}
.tips_urgent{background:#E74C3B }
.tips_high{background:#E67E23 }
.tips_low{background:#1ABC9C }
.tips_rightNow{background:#E74C3B }
/*---------------------------------------项目主页改版-cs--20191016*/ /*---------------------------------------项目主页改版-cs--20191016*/
.t_project_banner{ .t_project_banner{
@ -965,8 +979,69 @@ a.user_editinfo{border-top:1px solid #e5e5e5; height:30px; line-height:30px; tex
border-radius:4px; border-radius:4px;
border:1px solid rgba(219,219,219,1); border:1px solid rgba(219,219,219,1);
} }
/*-----------------------消息主页----------------------*/
.l_InfoNav{
background: #fff;
border:1px solid rgba(214,214,214,1);
}
.l_InfoNav li{
height: 60px;
line-height: 60px;
position: relative;
font-size: 16px;
cursor: pointer;
}
.l_InfoNav li.active{
background:#F7F8F9 ;
}
.l_InfoNav li.active >a{
color: #2A79FF!important;
}
.l_InfoNav li.active:before{
content: '';
position: absolute;
top:15px;
width: 4px;
height: 30px;
background: #2A79FF;
}
.readingNum{
background: #E96E1A;
padding:0px 4px;
height: 20px;
line-height: 20px;
font-size: 11px;
color: #fff;
border-radius: 50%;
float: right;
margin:20px 30px 20px 10px;
}
/*右侧菜单栏*/
.r_infos_menu{
display: flex;
border:1px solid rgba(224,224,224,1);
height: 68px;
line-height: 68px;
padding:0px 20px;
}
.r_infos_menu li{
margin:0px 20px;
font-size: 16px;
color: #333;
position: relative;
}
.r_infos_menu li.active a{
color: #2A79FF;
}
.r_infos_menu li.active:after{
width: 100%;
content: '';
background: #2A79FF;
height: 2px;
position: absolute;
left: 0px;
bottom: 0px;
}