palying_default.jsp
3.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name='apple-itunes-app' content='app-id=1141232775'>
<title>蜜家直播</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<link href="css/fbh.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/emoji/emoji.js"></script>
</head>
<body>
<div class="container">
<div class="top">
<img src="${live.thumbnail}" class="img-responsive" id="people" />
<div class="top-content">
<img src="img/logo.png" width="45" height="45" class="pull-left" />
<span class="top-title">蜜家直播</span>
<div class="download pull-right">
<a href="#">立即下载</a>
</div>
</div>
</div>
<div class="mask">
<div class="mask-content">
<img src="img/play.png" id="liveUrl" onclick="javasript:window.location.href='${pageContext.request.contextPath}/live?liveId=${live.id}';"/>
</div>
</div>
<div class="content">
<div class="title">
<img src="${user.avatar}" width="50" height="50" />
<div class="message">
<div>
<span class="name pull-left" id="username">${user.emoName}</span>
<img src="img/${user.sex == 'female'?user.sex:'male'}.png" class="icon pull-left" />
<span class="glyphicon glyphicon-star-empty pull-left"><span style="padding-left: 3px;position: relative;top: -1px;">${user.level}</span></span>
<div class="clear"></div>
</div>
<div class="mijia">蜜家号：${user.id}</div>
</div>
<a href="#" class="follow">+关注</a>
<div class="clear"></div>
</div>
<div class="pic-list">
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#mijiahot" data-toggle="tab">蜜家热门</a>
</li>
<li><a href="#marvellous" data-toggle="tab">${user.sex == 'female'?'她':'他'}的精彩回放</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="mijiahot">
<c:forEach var="hot" items="${hotLive}">
<div class="img-content">
<div class="img-detail">
<img src="${hot['avatar']}" class="img-responsive" />
</div>
<div class="img-title">${hot.audienceNowNum}观看中</div>
<div class="play-name">${hot.name}</div>
</div>
</c:forEach>
<div class="clear"></div>
</div>
<div class="tab-pane fade" id="marvellous">
<c:forEach var="record" items="${recordList}">
<div class="img-content">
<div class="img-detail">
<img src="${record.avatar }" class="img-responsive" />
</div>
<div class="img-title">${record.audienceNowNum}人观看中</div>
<div class="play-name">${record.name}</div>
</div>
</c:forEach>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var imgHeight = $("#people").height();
if(imgHeight<=0)
imgHeight=460;
$(".top").css("min-height",imgHeight);
$(".tab-pane>.img-content:odd").addClass('odd');
$(".tab-pane>.img-content:even").addClass('even');
});
$(function () {
$('#myTab li:eq(0) a').tab('show');
});
$('#username').emoji();
</script>
</body>
</html>