Skip to content

W
wechat_lung
Commit ff28f201 by hanpeng
Options

-mark- 患者论坛UI（首页，详情页，回复详情页）

parent 5d540859
Showing with 916 additions and 0 deletions
medtap_bbs_lung/css/cardDetail.css 0 → 100644
body {
background: #F6F6FC;
}
#content {
width: 100%;
font-size: 0.32rem;
color: #333333;
}
.card_content {
padding: 0.4rem 0.32rem;
background: #FFFFFF;
}
.card_content_header .user_profile {
width: 0.72rem;
height: 0.72rem;
border-radius: 50%;
float: left;
}
.user_info {
float: left;
margin-left: 0.24rem;
}
.user_info .user_name {
font-family: PingFangSC;
font-weight: 600;
padding-bottom: 0.16rem;
}
.user_info .card_time {
font-size: 0.24rem;
}
.txt_gray {
color: #999999;
}
.txt_blue {
color: #1D8AEF;
}
.cardDetail {
margin-top: 0.24rem;
font-family: PingFangSC;
font-weight: 400;
line-height: 0.48rem;
}
.cardImage {
padding-top: 0.3rem;
}
.cardImage img {
width: 2.1rem;
height: 2.1rem;
float: left;
margin-right: 0.26rem;
box-sizing: border-box;
margin-bottom: 0.3rem;
}
.cardImage img:nth-child(3n+0){
margin-right:0rem;
}
.card_tools {
padding-left: 4.8rem;
}
.card_tools .tools {
float: left;
font-size: 0.28rem
}
.card_tools img {
width: 0.32rem;
height: 0.32rem;
float: left;
margin-top: 0.05rem;
}
.card_tools span {
float: left;
margin-left: 0.12rem;
margin-top: 0.03rem;
}
.card_tools .reply {
margin-left: 0.4rem;
}
.fabulous {
width: 2.8rem;
height: 0.64rem;
background: #37D488;
color: #fff;
padding: 0.08rem 0.42rem;
border-radius: 0.08rem;
line-height: 0.64rem;
margin-left: 2.02rem;
margin-top: 0.42rem;
}
.fabulous_icon {
float: left;
width: 0.48rem;
height: 0.48rem;
}
.fabulous_desc {
float: left;
margin-top: -0.06rem
}
.unFabulous {
background: #DDDDDD;
width: 2.8rem;
height: 0.64rem;
color: #fff;
padding-left: 0.9rem;
padding-top: 0.08rem;
border-radius: 0.08rem;
line-height: 0.64rem;
margin-left: 2.02rem;
margin-top: 0.42rem;
display: none;
}
.comment_warp {
width: 100%;
background: #FFFFFF;
margin-top: 0.25rem;
padding-bottom:1.04rem;
}
.comment_warp .comment_header {
height: 0.94rem;
line-height: 0.94rem;
margin-left: 0.32rem;
}
.comment_warp .comment_header .comment_header_title {
font-family: PingFangSC;
font-weight: 600;
}
.comment_warp .comment_header .comment_header_num {
color: #666666;
}
.comment_item {
margin-left: 0.32rem;
padding: 0.28rem 0.28rem 0.28rem 0rem;
border-top: 0.01rem solid #F3F3F3;
}
.comment_item .comment_item_header img {
width: 0.56rem;
height: 0.56rem;
border-radius: 50%;
float: left;
}
.comment_item .comment_item_header .comment_user_name {
font-family: PingFangSC;
font-weight: 600;
font-size: 0.36rem;
margin-left: 0.16rem;
float: left;
margin-top: 0.05rem;
}
.comment_item .comment_item_header .comment_tools_fabulous {
float: right;
margin-top: 0.05rem;
}
.comment_item .comment_item_header .comment_tools_fabulous img {
float: left;
width: 0.38rem;
height: 0.38rem;
}
.comment_item .comment_item_header .comment_tools_fabulous .fabulous_num {
color: #999999;
margin-top: 0.01rem;
float: left;
}
.comment_content {
padding-left: 0.74rem;
padding-top: 0.3rem;
color: #333;
font-family: PingFangSC;
font-weight: 400;
line-height: 0.6rem;
}
.comment_info {
padding-left: 0.74rem;
padding-top: 0.3rem;
font-size: 0.28rem;
}
.comment_reply_btn {
float: right;
font-family: PingFangSC;
font-weight: 400;
}
.comment_reply {
margin-left: 0.74rem;
margin-top: 0.3rem;
font-size: 0.28rem;
color: #666666;
line-height: 0.56rem;
background: #F9F9F9;
padding: 0.16rem 0.24rem 0.16rem 0.24rem
}
.comment_reply .comment_reply_name {
color: #1D8AEF;
}
.comment_reply .comment_reply_time {
color: #999999;
}
.comment_reply .comment_reply_more {
width: 100%;
color: #1D8AEF;
text-align: center;
margin-top: 0.2rem;
}
.footer_btn {
position: fixed;
width: 100%;
bottom: 0;
background: #F6F6FC;
padding: 0.16rem;
}
.footer_btn div {
float: left;
}
.footer_btn .btn_do_comment {
color: #DDDDDD;
background: #FFFFFF;
width: 4.38rem;
height: 0.72rem;
line-height: 0.72rem;
font-size: 0.32rem;
border-radius: 0.08rem;
padding-left: 0.24rem;
font-family: PingFangSC;
font-weight: 400;
}
.footer_btn .btn_icon img{
width:0.64rem;
height:0.64rem;
margin-left:0.24rem;
}
.footer_btn .goTop{
position:relative;
}
.footer_btn .btn_icon_commentNum{
position:absolute;
background:#F45E19;
border-radius:50%;
color:#fff;
font-size:0.18rem;
width:0.36rem;
height:0.36rem;
line-height:0.36rem;
text-align:center;
right:-0.1rem;
top:-0.05rem;
}
medtap_bbs_lung/css/index.css 0 → 100644
body {
background: #F6F6FC;
font-family: PingFangSC;
}
#content {
width: 100%;
}
#content .bg_img {
width: 100%;
}
.header_info {
position: absolute;
left: 0.52rem;
top: 0.52rem;
}
.bbs_profile {
float: left;
border-radius: 50%;
}
.bbs_profile img {
width: 1.44rem;
height: 1.44rem;
border-radius: 50%;
}
.bbs_info {
float: left;
margin-left: 0.28rem;
}
.bbs_info .bbs_title {
color: #111;
font-size: 0.36rem;
font-weight: 500;
font-family: PingFangSC;
}
.bbs_info p {
font-size: 0.28rem;
color: #333333;
padding-right: 0.4rem;
}
.p_warp {
margin-top: 0.16rem;
padding-bottom: 0.28rem
}
.p_warp p {
float: left;
}
.bbs_info .txt_orange {
color: #F45E19;
}
.bbs_info .txt_blue {
color: #1D8AEF
}
.p_warp .sec_p {
padding-left: 0.4rem;
border-left: 0.01rem solid #999;
}
.silder_tap {
background: #FFFFFF;
color: #999999;
font-size: 0.3rem;
width: 100%;
}
.silder_tap .silder_tap_item {
float: left;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
box-sizing: border-box;
/* margin-left:0.63rem;
margin-right:0.64rem; */
margin-left: 1.56rem;
margin-right: 1.56rem;
}
.on {
color: #2CBCA0;
border-bottom: 0.04rem solid #2CBCA0;
}
.list_warp {
padding: 0rem 0.16rem 0 0.16rem;
}
.list_item {
width: 7.18rem;
background: #FFFFFF;
border-radius: 0.04rem;
padding: 0.24rem 0.32rem;
margin-top: 0.3rem;
}
.user_profile {
width: 0.72rem;
height: 0.72rem;
border-radius: 50%;
margin-top: 0.32rem;
float: left;
}
.user_info {
font-size: 0.32rem;
color: #333333;
font-family: PingFangSC;
font-weight: 600;
padding-top: 0.24rem;
margin-left: 0.26rem;
float: left;
}
.user_info .txt_gray {
color: #999;
font-weight: normal;
margin-top: 0.16rem;
font-size: 0.24rem;
}
.list_item_content {
margin-top: 0.32rem;
color: #333333;
font-size: 0.24rem;
}
.list_item_content_desc {
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: 0.4rem;
font-family: PingFangSC;
}
.list_item_content_img {
margin-top: 0.3rem;
}
.list_item_content_imgMore{
margin-top:0.3rem;
}
.list_item_content_img img {
width: 100%;
height: 2.72rem;
}
.list_item_content_imgMore img{
width:2rem;
height:2rem;
float:left;
margin-right:0.25rem;
box-sizing:border-box;
margin-bottom:0.3rem;
}
.list_item_content_imgMore img:nth-child(3n+0){
margin-right:0rem;
}
.list_item_tools {
margin-top: 0.32rem;
font-size: 0.28rem;
color: #999999;
}
.list_item_tools img {
width: 0.32rem;
height: 0.32rem;
float: left;
}
.tools {
float: left;
}
.tools span {
float: Left;
margin-left: 0.08rem;
}
.reply {
margin-left: 0.32rem;
}
.like {
float: right;
}
medtap_bbs_lung/css/replyDetail.css 0 → 100644
body {
background: #F6F6FC;
font-size: 0.32rem;
color: #333333;
}
.reply_content {
width: 100%;
background: #ffffff;
padding: 0.32rem;
}
.reply_content_header img {
width: 0.72rem;
height: 0.72rem;
float: left;
border-radius: 50%;
}
.reply_content_info {
float: left;
margin-left: 0.24rem;
}
.reply_content_info .reply_content_username {
font-family: PingFangSC;
font-weight: 600;
padding-bottom: 0.1rem;
}
.reply_content_info .reply_content_time {
font-size: 0.24rem;
color: #999999;
}
.reply_content_header .reply_content_btn {
float: right;
}
.reply_content_btn img {
width: 0.38rem;
height: 0.38rem;
margin-top: 0.1rem;
}
.reply_content_btn .reply_like_num {
float: right;
margin-top: 0.1rem;
color: #999999;
padding-left: 0.05rem;
}
.reply_content_desc {
padding-top: 0.2rem;
font-family: PingFangSC;
font-weight: 400;
line-height: 0.5rem;
}
.reply_list {
background: #FFFFFF;
margin-top: 0.2rem;
}
.reply_list .reply_list_header {
height: 0.94rem;
line-height: 0.94rem;
margin-left: 0.32rem;
}
.reply_list .reply_list_header .reply_list_header_title {
font-family: PingFangSC;
font-weight: 600;
}
.reply_list .reply_list_header .reply_list_header_num {
color: #999999;
}
.reply_list_item {
margin-left: 0.32rem;
padding: 0.28rem 0.28rem 0.28rem 0rem;
border-top: 0.01rem solid #F3F3F3;
}
.reply_list_item .reply_list_item_header img {
width: 0.56rem;
height: 0.56rem;
border-radius: 50%;
float: left;
}
.reply_list_item .reply_list_item_header .reply_user_name {
font-family: PingFangSC;
font-weight: 600;
font-size: 0.36rem;
margin-left: 0.16rem;
float: left;
margin-top: 0.05rem;
}
.reply_list_item_content {
margin-top: 0.2rem;
font-family: PingFangSC;
font-weight: 400;
color:#333;
margin-left:0.8rem;
}
.reply_list_item_time{
margin-left:0.8rem;
margin-top:0.15rem;
color:#999;
}
medtap_bbs_lung/index.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="https://review-formal.iplusmed.com/Common/css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="https://review-formal.iplusmed.com/Common/javaScript/calRem.js" type="text/javascript" charset="utf-8"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<title>患友之家</title>
</head>
<body>
<div id="content">
<div class="header_bg">
<img src="images/post_title_bg@2x.png" class="bg_img">
<div class="header_info clearfix">
<div class="bbs_profile">
<img src="images/post_title_bg@2x.png" >
</div>
<div class="bbs_info">
<p class="bbs_title">肺癌患友社区</p>
<div class="p_warp clearfix">
<p>关注：<span class="txt_orange bbs_attentionNum">432</span></p>
<p class="sec_p">帖子：<span class="txt_orange bbs_cardNum">3271</span></p>
</div>
<p>我的昵称：<span class="txt_blue user_nickName">乌拉拉大魔王</span></p>
</div>
</div>
</div>
<div class="silder_tap clearfix">
<div class="silder_tap_item" id="recommend">
推荐
</div>
<div class="silder_tap_item on" id="newest">
最新
</div>
<!-- <div class="silder_tap_item" id="follow">
关注
</div>
<div class="silder_tap_item" id="activity">
活动
</div> -->
</div>
<div class="list_warp">
<div class="list_item">
<div class="list_item_header clearfix">
<img src="images/post_title_bg@2x.png" class="user_profile">
<div class="user_info">
<p class="user_name">张天问</p>
<p class="txt_gray post_card_time">07-08 11:12</p>
</div>
</div>
<div class="list_item_content">
<div class="list_item_content_desc">
大家好，我是胃癌患者，现在肺转移，上星期开始胸闷胸痛伴有咳嗽，昨天开始胸痛感觉好些，可是咳嗽和胸闷还是一样，怎么处理好？医生说等水多了抽掉一部分，然后再去医院做检查什么的
</div>
<div class="list_item_content_img">
<img src="images/post_title_bg@2x.png">
</div>
</div>
<div class="list_item_tools clearfix">
<div class="tools clearfix seen">
<img src="images/post_seen_png@2x.png" >
<span class="seenNum">246</span>
</div>
<div class="tools clearfix reply">
<img src="images/post_reply_png@2x.png" >
<span class="replyNum">12</span>
</div>
<div class="tools clearfix like">
<img src="images/post_unlike_png@2x.png" >
<span class="likeNum">12</span>
</div>
</div>
</div>
<div class="list_item">
<div class="list_item_header clearfix">
<img src="images/post_title_bg@2x.png" class="user_profile">
<div class="user_info">
<p class="user_name">张天问</p>
<p class="txt_gray post_card_time">07-08 11:12</p>
</div>
</div>
<div class="list_item_content">
<div class="list_item_content_desc">
你好
</div>
</div>
<div class="list_item_tools clearfix">
<div class="tools clearfix seen">
<img src="images/post_seen_png@2x.png" >
<span class="seenNum">246</span>
</div>
<div class="tools clearfix reply">
<img src="images/post_reply_png@2x.png" >
<span class="replyNum">12</span>
</div>
<div class="tools clearfix like">
<img src="images/post_unlike_png@2x.png" >
<span class="likeNum">12</span>
</div>
</div>
</div>
<div class="list_item">
<div class="list_item_header clearfix">
<img src="images/post_title_bg@2x.png" class="user_profile">
<div class="user_info">
<p class="user_name">张天问</p>
<p class="txt_gray post_card_time">07-08 11:12</p>
</div>
</div>
<div class="list_item_content">
<div class="list_item_content_desc">
大家好，我是胃癌患者，现在肺转移，上星期开始胸闷胸痛伴有咳嗽，昨天开始胸痛感觉好些，可是咳嗽和胸闷还是一样，怎么处理好？医生说等水多了抽掉一部分，然后再去医院做检查什么的
</div>
<div class="list_item_content_imgMore clearfix">
<img src="images/post_title_bg@2x.png">
<img src="images/post_title_bg@2x.png">
<img src="images/post_title_bg@2x.png">
</div>
<div class="list_item_tools clearfix">
<div class="tools clearfix seen">
<img src="images/post_seen_png@2x.png" >
<span class="seenNum">246</span>
</div>
<div class="tools clearfix reply">
<img src="images/post_reply_png@2x.png" >
<span class="replyNum">12</span>
</div>
<div class="tools clearfix like">
<img src="images/post_unlike_png@2x.png" >
<span class="likeNum">12</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
medtap_bbs_lung/pages/cardDetail.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="https://review-formal.iplusmed.com/Common/css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/cardDetail.css"/>
<script src="https://review-formal.iplusmed.com/Common/javaScript/calRem.js" type="text/javascript" charset="utf-8"></script>
<title>详情</title>
</head>
<body>
<div id="content">
<div class="card_content">
<div class="card_content_header clearfix">
<img src="../images/post_title_bg@2x.png" class="user_profile">
<div class="user_info">
<p class="user_name">明天天晴</p>
<p class="txt_gray card_time">07-08 11:12</p>
</div>
</div>
<div class="cardDetail">
我老婆45岁肺腺癌，查出来就晚期了，目前胸口也一直隐隐作痛，不是很想做化疗。也不是很想做手术。想问问有啥好的中药可以吃啊，效果好的发给我。非常感谢大家的帮忙，我们现在很无助，不知该怎么办。
</div>
<div class="cardImage clearfix">
<img src="../images/post_title_bg@2x.png" >
<img src="../images/post_title_bg@2x.png" >
<img src="../images/post_title_bg@2x.png" >
<img src="../images/post_title_bg@2x.png" >
</div>
<div class="card_tools clearfix">
<div class="tools clearfix seen">
<img src="../images/post_seen_png@2x.png" >
<span class="seenNum txt_gray">246</span>
</div>
<div class="tools clearfix reply">
<img src="../images/post_reply_png@2x.png" >
<span class="replyNum txt_gray">12</span>
</div>
</div>
<div class="fabulous clearfix">
<img src="../images/post_like_big_png@2x.png" class="fabulous_icon">
<span class="fabulous_desc">为TA加油</span>
</div>
<div class="unFabulous clearfix">
<img src="../images/post_like_big_png@2x.png" class="fabulous_icon">
<span class="fabulous_desc">123</span>
</div>
</div>
<div class="comment_warp">
<div class="comment_header">
<span class="comment_header_title">评论</span>
<span class="comment_header_num">97条</span>
</div>
<div class="comment_item noReply">
<div class="comment_item_header clearfix">
<img src="../images/post_title_bg@2x.png" >
<div class="comment_user_name">
文月康康
</div>
<div class="comment_tools_fabulous clearfix">
<img src="../images/post_like_png@2x.png" >
<span class="fabulous_num">78</span>
</div>
</div>
<div class="comment_content">
还是上大医院检查吧。自己找中药吃很危险的，中药不能治癌病呀。
</div>
<div class="comment_info">
<span class="comment_time txt_gray">07-08 12:41</span>
<span class="comment_reply_btn txt_blue">回复</span>
</div>
</div>
<div class="comment_item hasReply">
<div class="comment_item_header clearfix">
<img src="../images/post_title_bg@2x.png" >
<div class="comment_user_name">
文月康康
</div>
<div class="comment_tools_fabulous clearfix">
<img src="../images/post_like_png@2x.png" >
<span class="fabulous_num">78</span>
</div>
</div>
<div class="comment_content">
还是上大医院检查吧。自己找中药吃很危险的，中药不能治癌病呀。
</div>
<div class="comment_info">
<span class="comment_time txt_gray">07-08 12:41</span>
<span class="comment_reply_btn txt_blue">回复</span>
</div>
<div class="comment_reply">
<span class="comment_reply_name">佳佳：</span>
<span class="comment_reply_content">是的，找大医院认真诊断，确诊后对症下药吧。明确诊断是治疗的基础。否则就是耽误着。</span>
<span class="comment_reply_time">07-08 12:41</span>
<div class="comment_reply_more">
查看全部2条回复
</div>
</div>
</div>
</div>
<div class="footer_btn">
<div class="btn_do_comment">
写评论
</div>
<div class="btn_icon goTop">
<img src="../images/post_answered_buttn@2x.png" >
<span class="btn_icon_commentNum">87</span>
</div>
<div class="btn_icon collect">
<img src="../images/post_like_buttn@2x.png" >
</div>
<div class="btn_icon share">
<img src="../images/post_share_buttn@2x.png" >
</div>
</div>
</div>
</body>
</html>
medtap_bbs_lung/pages/replyDetail.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="https://review-formal.iplusmed.com/Common/css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/replyDetail.css"/>
<script src="https://review-formal.iplusmed.com/Common/javaScript/calRem.js" type="text/javascript" charset="utf-8"></script>
<title>详情</title>
</head>
<body>
<div id="content">
<div class="reply_content">
<div class="reply_content_header clearfix">
<img src="../images/post_title_bg@2x.png" >
<div class="reply_content_info">
<p class="reply_content_username">明天天晴</p>
<p class="reply_content_time">07-08 11:12</p>
</div>
<div class="reply_content_btn clearfix">
<img src="../images/post_unlike_png@2x.png" >
<span class="reply_like_num">14</span>
</div>
</div>
<div class="reply_content_desc">
还是上大医院再检查下吧
</div>
</div>
<div class="reply_list">
<div class="reply_list_header">
<span class="reply_list_header_title">评论</span>
<span class="reply_list_header_num">2条</span>
</div>
<div class="reply_list_item">
<div class="reply_list_item_header clearfix">
<img src="../images/post_title_bg@2x.png" >
<div class="reply_user_name">
佳佳
</div>
</div>
<div class="reply_list_item_content">
还是上大医院检查吧。自己找中药吃很危险的，中药不能治癌病呀。
</div>
<div class="reply_list_item_time">
07-08 12:04
</div>
</div>
</div>
<div class="footer_btn">
</div>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment