Browse Source

问答分享H5留言样式

luyanan 7 years ago
parent
commit
3c79709d53
5 changed files with 50 additions and 17 deletions
  1. 16 5
      css/share.css
  2. 6 1
      e/da.html
  3. 6 2
      e/wen.html
  4. 17 8
      js/public/shareLeaveWord.js
  5. 5 1
      js/qa-show.js

+ 16 - 5
css/share.css

@ -125,13 +125,19 @@ ul.tagList>li .h2Font{font-size: 14px;color: #666;line-height: 16px;}
125 125
.thumbBlock .stepBtn{display:inline-block;position:relative;padding:10px;padding-left:30px;font-size:16px;color:#666;background:url(../images/h5_img/g_article_icon_cai_nor.png) no-repeat 10px center;background-size:16px 16px;cursor: pointer;}
126 126
.thumbBlock .stepBtn.stepedBtn{opacity: .6;}
127 127
/*留言*/
128
.madiaBlock .commentBlock li{padding:4px 0;}
129 128
.commentBlock .flexCenter{min-height:38px;}
130
.commentBlock .commenttime{margin-right:18px;}
129
.commentBlock .operateSpan .spanitem{margin-right:18px;}
130
.commentBlock .operateSpan .spanitem>em{font-style: normal;}
131 131
.commentBlock .madiaHead.useHead{width: 40px;height:40px;margin-top:-20px;}/*小图像*/
132 132
.commentBlock .madiaInfo{padding-left:52px;width: auto;}
133 133
.commentBlock .operateSpan{margin:8px 0 0;color:#9d9ea8;font-size: 13px;color: #999;cursor: pointer;}
134 134
.commentBlock .madiaInfo .h2Font{ -webkit-user-select:text;word-break\n:break-word;}
135
.leaveWord .madiaInfo .h1Font{font-size:14px} 
136
.leaveWord .madiaInfo .h2Font{font-size:14px} 
137
.madiaBlock ul.mui-table-view.commentBlock{margin:4px 0 10px}
138
.madiaBlock ul.mui-table-view.noactiveTab>li.leaveWord{padding:6px 0;}
139
.hold-icon{position:relative;top:3px;display:inline-block;width:15px;height:15px;background-size: 100% auto;background-repeat: no-repeat;}
140
.icon-zan{background-image:url(../images/qa-icon-zan.png);background-position:0 -14px;}
135 141
/*资源轮播图片样式*/
136 142
#index-container {height:300px;background: #f0f0f0;position: relative;overflow: hidden;z-index: 1;}
137 143
#index-container .swiper-wrapper { position: relative;z-index: 1;
@ -405,10 +411,10 @@ ul.mui-table-view>li:last-child:after{background: none;}
405 411
.searchTab .qa-owner{min-height:40px;}
406 412
.qa-owner .owner-head{position:absolute;top:50%;background-position: center;background-size: cover;}
407 413
.qa-owner .owner-head.useHead{width:32px;height:32px;margin-top:-16px;background-image: url(../images/default-photo.jpg);border-radius: 50%;}
408
.qa-owner .owner-info{padding-left:38px;width:100%;}
414
.qa-owner .owner-info{padding-left:38px;width: 100%;overflow: hidden;height:30px;}
409 415
.owner-name{float: left;}
410 416
.owner-name .h1Font{font-size:16px;line-height: 30px;}
411
.owner-tit{margin-left:10px;float: left;max-width:70%;color:#888888;font-size: 14px;}
417
.owner-tit{padding-left:10px;color:#888888;font-size: 14px;}
412 418
.qa-con{font-size:14px;line-height: 22px;color:#666;}
413 419
.mui-table-view.partLine{background: none;}
414 420
.mui-table-view.partLine>.mui-table-view-cell{margin-bottom: 10px;background: #fff; padding: 11px 15px;}
@ -416,7 +422,11 @@ ul.mui-table-view>li:last-child:after{background: none;}
416 422
.qa-btnlink{margin-bottom: 10px;background:#fff;}
417 423
.qa-btnlink .mui-media-object.btnLinkIcon{width:22px; height:22px;margin-top:-11px;left: 8px;}
418 424
.qa-btnlink .madiaBlock{overflow: hidden;}
419
.qa-top{border-bottom: 1px solid #e5e5e5;}
425
.qa-top{border-bottom: 1px solid #e5e5e5;position: relative;}
426
.qa-top em{font-style: normal;position:absolute;right:24px;top:12%;}
427
.qa-top em:before{border: solid transparent;border-left-color:#ccc;border-width: 7px;content: " ";position: absolute;left: 100%;top: 12px;}
428
.qa-top em:after{border: solid transparent;border-left-color:#fff;border-width: 5px;content: " ";position: absolute;left: 100%;top: 14px;}
429
420 430
.qa-top .flexCenter{padding:0 15px;min-height:68px;}
421 431
.qa-top .unlogin{font-size:14px;color:#ff9900;line-height:68px;text-align: center;}
422 432
.qa-top .onlogin{position: relative;}
@ -447,6 +457,7 @@ ul.mui-table-view>li:last-child:after{background: none;}
447 457
.item_detail .h1Font{font-weight:normal;font-size:18px;line-height:24px;color:#000}
448 458
.item_detail .list_con{font-size: 15px;color: #333;line-height: 24px;margin: 6px 0;text-align:justify}
449 459
.list-main .list_image{display: none;}
460
.item_info .h3Font{font-size: 14px;color:#888}
450 461
.item-btn{overflow: hidden;}
451 462
.list_image li,.item-btn li{display: inline-block;float:left; width: 33.3%; -webkit-box-sizing: border-box;box-sizing: border-box;position: relative;}
452 463
.list_image li>.imgspan{display: block;width: 98%;height:90px;background-size: cover;background-position: center;}

+ 6 - 1
e/da.html

@ -23,6 +23,7 @@
23 23
			<div class="showDetail">
24 24
				<div class="qa-top flexCenter">
25 25
					<div class="h1Font hWeight flex-pright" id="questTit"></div>
26
					<em></em>
26 27
				</div>
27 28
28 29
				<div class="madiaBlock">
@ -130,6 +131,10 @@
130 131
									}
131 132
								}
132 133
							}
134
							var styStr='<em class="authiconNew ' + userType.sty + '" title="' + userType.title + '"></em>'
135
							if(userType.sty=="e"){
136
								styStr=""
137
							}
133 138
							var str = '<div class="madiaHead useHead" style="background-image:url(' + baImg + ')"></div>' +
134 139
								'<div class="madiaInfo">' +
135 140
								'<p><span class="h1Font">' + dataStr.name + '</span><em class="authicon ' + userType.sty + ' title="' + userType.title + '"></em></p>' +
@ -166,7 +171,7 @@
166 171
167 172
				var this_ = "../html/qa-answer-show.html?anid=" + answerId;
168 173
				wcFresh(this_);
169
				$("body").on("click", ".goSpan,.collectBtn,.thumbBtn,.stepBtn", function() {
174
				$("body").on("click", ".goSpan,.collectBtn,.thumbBtn,.stepBtn,.plusbtn,.replyLew", function() {
170 175
					isInstalled(this_, true);
171 176
					$(this).addClass("activeThis");
172 177
				})

+ 6 - 2
e/wen.html

@ -238,7 +238,7 @@
238 238
						}, "get", function(data) {
239 239
							if(data.success) {
240 240
								if(data.data > 0) {
241
									$str.find(".leaveMsgCount").html(data.data + "留言");
241
									$str.find(".leaveMsgCount").html(data.data + " 留言");
242 242
								}
243 243
							}
244 244
						})
@ -271,9 +271,13 @@
271 271
									}
272 272
								}
273 273
							}
274
							var styStr='<em class="authiconNew ' + userType.sty + '" title="' + userType.title + '"></em>'
275
							if(userType.sty=="e"){
276
								styStr=""
277
							}
274 278
							var str = '<div class="owner-head useHead" style="background-image:url(' + baImg + ')"></div>' +
275 279
								'<div class="owner-info">' +
276
								'<div class="owner-name"><span class="h1Font">' + dataStr.name + '</span><em class="authicon ' + userType.sty + '" title="' + userType.title + '"></em></div>' +
280
								'<div class="owner-name"><span class="h1Font">' + dataStr.name + '</span>'+styStr+'</div>' +
277 281
								'<div class="owner-tit ellipsisSty h2Font">' + os + '</div>' +
278 282
								'</div>'
279 283

+ 17 - 8
js/public/shareLeaveWord.js

@ -49,19 +49,24 @@
49 49
			for(var i = 0; i < data.length; i++) {
50 50
				var oText = "",
51 51
					reply = "",
52
					re = '<span class="replyLew" style="margin-right:10px;" data-id="' + data[i].id + '">回复</span>' + '<span class="mui-icon iconfont plusbtn icon-appreciate"style="padding-left:10px;margin-right:10px;font-size:14px;" data-id="' + data[i].id + '" data-num="' + data[i].agreeCount + '"></span><span  class="zan"style="display:' + (data[i].agreeCount ? "inline-block" : "none") + '">' + data[i].agreeCount + ' </span>';
52
					re ='<span class="spanitem plusbtn"><em class="hold-icon icon-zan" data-id="' + data[i].id + '" data-num="' + data[i].agreeCount + '"></em><em style="margin-left:3px;font-size: 14px;display:' + (data[i].agreeCount ? "inline-block" : "none") + '">' + data[i].agreeCount + ' </em></span>'+
53
						'<span class="spanitem replyLew" data-id="' + data[i].id + '">回复</span>';
53 54
				if(data[i].reciver) {
54
					reply = " 回复 " + "<span class='reply2'></span>"
55
					reply = '<em style="font-style:normal;padding:0 6px;">回复</em>' +  '<span class="h1Font reply2"></span>'
55 56
				}
56 57
				var baImg = "../images/default-photo.jpg";
57 58
				var li = document.createElement("li");
58
				li.innerHTML = '<div class="flexCenter clearfix">' +
59
					'<div class="madiaHead useHead useHeadMsg" style="background-image:url(' + baImg + ')" data-id="' + data[i].sender+ '"></div>' +
59
				li.className = "mui-table-view-cell leaveWord";
60
				li.innerHTML = '<div class="flexCenter mui-clearfix">' +
61
					'<div class="madiaHead useHead" style="background-image:url(' + baImg + ')" data-id="' + data[i].sender + '"></div>' +
60 62
					'<div class="madiaInfo">' +
61
					'<p><span class="replay1"></span>' + reply + '</p>'+
62
					'<p class="h2Font">' + data[i].cnt + '</p>' +
63
					'<p class="h2Font"><span class="h1Font replay1"></span>' + reply + '</p>' +
64
					'</div>' +
65
					'</div>' +
66
					'<div class="madiaInfo">' +
67
					'<p class="h1Font">' + data[i].cnt + '</p>' +
63 68
					'<p class="operateSpan">' +
64
					'<span class="commenttime">' + commenTime(data[i].createTime) + '</span>' +
69
					'<span class="spanitem commenttime">' + commenTime(data[i].createTime) + '</span>' + re + oText +
65 70
					'</p>' +
66 71
					'</div>'
67 72
				document.getElementsByClassName("commentBlock")[0].appendChild(li);
@ -83,7 +88,11 @@
83 88
				}
84 89
			}
85 90
			var userType = autho($data.authType, $data.orgAuth, $data.authStatus);
86
			var str = '<span class="h1Font" >' + $data.name + '</span><em class="authiconNew ' + userType.sty + '" title="科袖认证专家"></em>'
91
			var styStr='<em class="authiconNew ' + userType.sty + '" title="'+userType.title+'"></em>'
92
			if(userType.sty=="e"){
93
				styStr=""
94
			}
95
			var str = '<span class="h1Font" >' + $data.name + '</span>'+styStr
87 96
			if(parNum == 1) {
88 97
				li.getElementsByClassName("replay1")[0].innerHTML = str;
89 98
			} else {

+ 5 - 1
js/qa-show.js

@ -26,7 +26,11 @@ $(function() {
26 26
	
27 27
	module.lWord;
28 28
	if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
29
	 	location.href="http://" + hurl + "/e/wen.html?id="+questionId;
29
		if(topAnswerId){
30
			location.href="http://" + hurl + "/e/da.html?id="+topAnswerId;
31
		}else{
32
			location.href="http://" + hurl + "/e/wen.html?id="+questionId;
33
		}
30 34
	}
31 35
	var rows = 10,
32 36
		dataO = {