userLP4.html 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  5. <meta charset="utf-8">
  6. <meta name="renderer" content="webkit">
  7. <meta name="apple-mobile-web-app-capable" content="yes" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  9. <title></title>
  10. <style type="text/css">
  11. div{
  12. -webkit-box-sizing: border-box;
  13. -moz-box-sizing: border-box;
  14. -o-box-sizing: border-box;
  15. box-sizing: border-box;
  16. }
  17. body{padding: 0px;margin: 0px;}
  18. *{font-family: "Open Sans",Arial,Helvetica,sans-serif!important;}
  19. ul,li{list-style: none;padding: 0;margin: 0;}
  20. #pop{
  21. width:100%;
  22. height: auto;
  23. margin: 0 auto;
  24. position: relative;
  25. border-radius: 5px;
  26. overflow: hidden;
  27. }
  28. #pop .banner_content{
  29. text-align: center;
  30. padding: 10px;
  31. color: #222;
  32. background-color: #fff;
  33. background: url(<%=public_path%>img/man/userLP4-1/mbg.jpg) repeat-x bottom center;
  34. }
  35. #pop .banner_content img{
  36. width: 100%;
  37. height: auto;
  38. display: block;
  39. }
  40. #pop .close_btn{
  41. display: block;
  42. border-radius: 25px;
  43. width: 22px;
  44. height: 22px;
  45. position: absolute;
  46. top: 0px;
  47. right: 0px;
  48. margin-left: -20px;
  49. line-height: 40px;
  50. text-align: center;
  51. color: #fff;
  52. font-size: 30px;
  53. font-family: 'Arial';
  54. background: url(<%=public_path%>img/man/userLP4-1/clase_btn.png) no-repeat center center;
  55. background-size: 50% 50%;
  56. z-index: 10;
  57. }
  58. #pop .banner_img{
  59. background:url(<%=public_path%>img/man/userLP4-1/banner_bg.jpg) no-repeat center center;
  60. background-size: cover;
  61. width: 100%;
  62. position: relative;
  63. text-align: center;
  64. color: #fff;
  65. overflow: hidden;
  66. border-radius: 5px 5px 0px 0px;
  67. }
  68. #pop .banner_img img{
  69. width: 100%;
  70. height: auto;
  71. border:0;
  72. display: block;
  73. }
  74. #pop .banner_btn{
  75. font-size: 16px;
  76. font-weight: bold;
  77. color: #fff;
  78. margin-top: 24px;
  79. margin-bottom:4px;
  80. text-transform: uppercase;
  81. overflow: hidden;
  82. text-decoration: none;
  83. line-height: 2.8;
  84. display: inline-block;
  85. max-width: 260px;
  86. min-width: 230px;
  87. width: 66%;
  88. border-radius: 22px;
  89. text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  90. background-color: #3ca0f8;
  91. background-image: -moz-linear-gradient( 90deg, rgb(239,128,25) 0%, rgb(237,106,26) 0%, rgb(235,89,25) 0%, rgb(239,120,25) 45%, rgb(243,151,24) 55%);
  92. background-image: -webkit-linear-gradient( 90deg, rgb(239,128,25) 0%, rgb(237,106,26) 0%, rgb(235,89,25) 0%, rgb(239,120,25) 45%, rgb(243,151,24) 55%);
  93. background-image: -ms-linear-gradient( 90deg, rgb(239,128,25) 0%, rgb(237,106,26) 0%, rgb(235,89,25) 0%, rgb(239,120,25) 45%, rgb(243,151,24) 55%);
  94. box-shadow: 0px 4px 9px 0px rgba(4, 0, 0, 0.35);
  95. }
  96. /*ticket list*/
  97. #pop .ticket_box {
  98. width: 100%;
  99. height: auto;
  100. }
  101. #pop .ticket_box .ticket_list{
  102. width: 310px;
  103. height: auto;
  104. background-size: contain;
  105. position: relative;
  106. margin: 0 auto;
  107. margin-top: 18px;
  108. width: 100%;
  109. max-width: 310px;
  110. }
  111. #pop .ticket_box .ticket_list .t_left{
  112. width: 40%;
  113. height: 100%;
  114. float: left;
  115. position: absolute;
  116. top: 0px;
  117. left: 0px;
  118. }
  119. #pop .ticket_box .ticket_list .t_left .nicname{
  120. color: #fff;
  121. position: absolute;
  122. left: 12px;
  123. bottom: 6px;
  124. z-index: 12;
  125. font-size: 12px;
  126. font-weight: bold;
  127. max-width: 100px;
  128. -o-text-overflow: ellipsis;
  129. text-overflow: ellipsis;
  130. white-space: nowrap;
  131. word-break: break-all;
  132. overflow: hidden;
  133. }
  134. #pop .ticket_box .ticket_list .t_left .lady_cover{
  135. position: absolute;
  136. right: 0px;
  137. top: 0px;
  138. width: 80%;
  139. height: 100%;
  140. overflow: hidden;
  141. z-index: 2;
  142. background-repeat: no-repeat;
  143. background-position: top center;
  144. background-size: auto 100%;
  145. }
  146. #pop .ticket_box .ticket_list .t_left .lady_cover img{
  147. height: 100%;
  148. }
  149. #pop .ticket_box .ticket_list .t_left .lady_avatar img{
  150. width: 100%;
  151. height: auto;
  152. margin-top: 0px;
  153. }
  154. #pop .ticket_box .ticket_list .t_left .h_mask{
  155. width: 100%;
  156. height: 100%;
  157. background: url(<%=public_path%>img/man/userLP4-1/h_mask.png?v=1.2) no-repeat 0px 0px;
  158. background-size: cover;
  159. overflow: hidden;
  160. z-index: 10;
  161. position: absolute;
  162. top: 0px;
  163. left: 0px;
  164. }
  165. #pop .ticket_box .ticket_list .t_left .h_mask1{
  166. width: 100%;
  167. height: 100%;
  168. background: url(<%=public_path%>img/man/userLP4-1/h_mask1.png?v=1.2) no-repeat 0px 0px;
  169. background-size: cover;
  170. overflow: hidden;
  171. z-index: 10;
  172. position: absolute;
  173. top: 0px;
  174. left: 5px;
  175. }
  176. #pop .ticket_box .ticket_list .t_left .h_mask2{
  177. width: 100%;
  178. height: 100%;
  179. background: url(<%=public_path%>img/man/userLP4-1/h_mask2.png?v=1.2) no-repeat 0px 0px;
  180. background-size: cover;
  181. overflow: hidden;
  182. z-index: 10;
  183. position: absolute;
  184. top: 0px;
  185. left: 5px;
  186. }
  187. #pop .ticket_box .ticket_list .t_mid{
  188. width: 54%;
  189. float: left;
  190. padding: 14px 0px 0px;
  191. position: absolute;
  192. top: 0px;
  193. right: 0px;
  194. }
  195. #pop .ticket_box .ticket_list .t_mid .t_title{
  196. color: #297af3;
  197. font-size: 14px;
  198. font-weight: bold;
  199. text-align: left;
  200. width: 100%;
  201. padding-right: 8px;
  202. -o-text-overflow: ellipsis;
  203. text-overflow: ellipsis;
  204. white-space: nowrap;
  205. word-break: break-all;
  206. overflow: hidden;
  207. }
  208. #pop .ticket_box .ticket_list .t_mid .t_desc{
  209. font-size: 12px;
  210. line-height: 1.2;
  211. color: #666666;
  212. text-align: left;
  213. padding-top: 8px;
  214. width: 100%;
  215. height: 42px;
  216. overflow: hidden;
  217. }
  218. #pop .ticket_box .ticket_list .t_mid ._time .t-n{
  219. font-weight: normal;
  220. font-size: 12px;
  221. color: #8dbbfe;
  222. margin: 0;
  223. line-height: 1;
  224. }
  225. #pop .ticket_box .ticket_list .t_mid ._time .n-t{
  226. font-weight: bold;
  227. font-size: 12px;
  228. color: #666;
  229. margin-top: 0px;
  230. display: inline-block;
  231. }
  232. #pop .ticket_time{
  233. width: 100%;
  234. height: auto;
  235. text-align: left;
  236. margin-top: 12px;
  237. }
  238. #pop .ticket_time ._time{
  239. width: 45%;
  240. height: auto;
  241. display: inline-block;
  242. line-height: 1;
  243. }
  244. /*ticket list*/
  245. </style>
  246. </head>
  247. <body>
  248. <div id="pop" class="pop">
  249. <a class="close_btn" href="qpidnetwork://app/closewindow"></a>
  250. <div class="banner_img">
  251. <img src="<%=public_path%>img/man/userLP4-1/title_bg.jpg?v=1.2" />
  252. </div>
  253. <div class="banner_content">
  254. <div class="ticket_box">
  255. <% let i=1; for(let data of showListByAnchor){
  256. if(showListByAnchor.length == 1){
  257. i=2;
  258. }
  259. %>
  260. <div class="ticket_list">
  261. <a href="qpidnetwork://app/open?service=live&module=main&listtype=3">
  262. <img src="<%=public_path%>img/man/userLP4-1/list_bg.png" />
  263. <div class="t_left">
  264. <div class="nicname"><%=data.anchor_nickname%></div>
  265. <div class="h_mask"></div>
  266. <div class="h_mask<%=i%>"></div>
  267. <div class="lady_cover lady_avatar">
  268. <img src="<%=data.anchor_avatar%>">
  269. </div>
  270. </div>
  271. <div class="t_mid">
  272. <div class="t_title"><%=data.show_title%></div>
  273. <div class="ticket_time">
  274. <div class="_time">
  275. <h3 class="t-n">Date(GMT)</h3>
  276. <span class="n-t"><%=data.TimeDay%></span>
  277. </div>
  278. <div class="_time">
  279. <h3 class="t-n">Time(GMT)</h3>
  280. <span class="n-t"><%=data.TimeHour%></span>
  281. </div>
  282. </div>
  283. </div>
  284. </a>
  285. </div>
  286. <% i++;}%>
  287. </div>
  288. <a class="banner_btn" href="qpidnetwork://app/open?service=live&module=main&listtype=3">View Full Calendar </a>
  289. </div>
  290. </div>
  291. </body>
  292. </html>