anchorLP4.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  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. </head>
  11. <body>
  12. <div id="ticket_popup" class="ticket_popup">
  13. <div class="ticket_title">Meet our stunning broadcasters and get intimate with them now!</div>
  14. <!-- has ticket -->
  15. <%if(showListByAnchor.length > 0){%>
  16. <div class="banner_content">
  17. <div class="ticket_box">
  18. <% let i=1; for(let data of showListByAnchor){
  19. if(showListByAnchor.length == 1){
  20. i=2;
  21. }
  22. %>
  23. <div class="ticket_list">
  24. <a href="/page/list.html#/showorder/schs" target="_blank">
  25. <div class="t_left">
  26. <div class="nicname"><%=data.anchor_nickname%></div>
  27. <div class="h_mask"></div>
  28. <div class="h_mask<%=i%>"></div>
  29. <div class="lady_cover lady_avatar">
  30. <img src="<%=data.anchor_avatar%>">
  31. </div>
  32. </div>
  33. <div class="t_mid">
  34. <div class="t_title"><%=data.show_title%></div>
  35. <div class="t_desc"><%=data.show_introduce%></div>
  36. <div class="ticket_time">
  37. <div class="_time">
  38. <h3 class="t-n">Date(GMT)</h3>
  39. <span class="n-t"><%=data.TimeDay%></span>
  40. </div>
  41. <div class="_time">
  42. <h3 class="t-n">Time(GMT)</h3>
  43. <span class="n-t"><%=data.TimeHour%></span>
  44. </div>
  45. <div class="_time">
  46. <h3 class="t-n">Duration</h3>
  47. <span class="n-t"><%=data.duration%> minutes</span>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="t_right">
  52. <a class="t_btn" href="/page/list.html#/showorder/schs" target="_blank">Get Ticket</a>
  53. </div>
  54. </a>
  55. </div>
  56. <% i++;}%>
  57. </div>
  58. <a class="button" href="/page/list.html#/showorder/schs" target="_blank">
  59. <img src="<%=public_path%>img/man/userLP4/pop_button_1.png" alt="View Full Calendar" />
  60. </a>
  61. </div>
  62. <%}else if(indexPageAnchorList.length > 0){%>
  63. <!-- has ticket -->
  64. <!-- no ticket -->
  65. <div class="banner_content">
  66. <div class="live_online">
  67. <ul>
  68. <%for(let data of indexPageAnchorList){%>
  69. <li>
  70. <%if((data.room_type == 1 || data.room_type == 3) && data.online_status == 1){%>
  71. <div class="live_icon"><img src="<%=public_path%>img/man/userLP4/live.gif">Live</div>
  72. <%}else if(data.online){%>
  73. <div class="live_icon online">Online</div>
  74. <%}%>
  75. <%if(data.room_type == 3){%>
  76. <div class="vipPublic">Premium Public</div>
  77. <%}%>
  78. <%if(data.room_type == 3){%>
  79. <a class="link" href="/page/list.html?anchorid=<%=data.userid%>" target="_blank">
  80. <img class="lady_img" src="<%=data.room_photourl%>">
  81. </a>
  82. <%}else{%>
  83. <a class="link" href="/page/list.html?anchorid=<%=data.userid%>" target="_blank">
  84. <img class="lady_img" src="<%=data.room_photourl%>">
  85. </a>
  86. <%}%>
  87. <div class="lady_info" <%if(!data.online){%>style="padding-top: 60px;"<%}%>>
  88. <h5 class="name"><a href="/page/list.html?anchorid=<%=data.userid%>" target="_blank"><%=data.nickname%></a></h5>
  89. <%if(data.room_type == 3 && data.online){%>
  90. <a class="lady_btn" target="_blank" href="/page/list.html?anchorid=<%=data.userid%>">
  91. <%if(userCanUseCouponPublic){%>
  92. <i class="i_free"></i>
  93. <%}%>
  94. View Now
  95. </a>
  96. <%}else if(data.online){%>
  97. <a class="lady_btn blue" target="_blank" href="/page/list.html?anchorid=<%=data.userid%>">
  98. <%if(userCanUseCouponPrivate){%>
  99. <i class="i_free"></i>
  100. <%}%>
  101. Start One-on-One
  102. </a>
  103. <%}%>
  104. </div>
  105. </li>
  106. <%}%>
  107. </ul>
  108. <div style="clear:both"></div>
  109. </div>
  110. <a class="button" href="/page/list.html" target="_blank">
  111. <img src="<%=public_path%>img/man/userLP4/pop_button_2.png" alt="View Full Calendar" />
  112. </a>
  113. </div>
  114. <%}%>
  115. <!-- no ticket -->
  116. </div>
  117. </body>
  118. </html>
  119. <style type="text/css">
  120. html,body{padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif;}
  121. img{display: block;border:0; }
  122. #ticket_popup img{border:0;display: inline-block;}
  123. #ticket_popup a{text-decoration: none;}
  124. #ticket_popup{
  125. width: 700px;
  126. border-radius: 8px;
  127. height: 565px;
  128. }
  129. #ticket_popup .hd{display:none;}
  130. #ticket_popup a{color: #ffffff;}
  131. #ticket_popup .ticket_title {
  132. font-size: 26px;
  133. text-align: center;
  134. line-height: 1.2;
  135. color: #fff;
  136. height: 113px;
  137. width: 100%;
  138. border-radius: 8px 8px 0px 0px;
  139. background: url(<%=public_path%>img/man/userLP4/title_bg.jpg) no-repeat top center;
  140. text-indent: -9999!important;
  141. text-indent: -888em;
  142. }
  143. #ticket_popup .banner_content{
  144. width: 100%;
  145. border-radius: 0px 0px 8px 8px;
  146. background: url(<%=public_path%>img/man/userLP4/banner_bg.jpg) repeat-x bottom center;
  147. position: relative;
  148. }
  149. #ticket_popup .button {
  150. width: auto;
  151. height:auto;
  152. transition: 0.2s;
  153. -webkit-transition: 0.2s;
  154. margin: 0 auto;
  155. display: inline-block;
  156. margin: 0px;
  157. transform: scale(0.98,0.98);
  158. -webkit-transform: scale(0.98,0.986);
  159. display: block;
  160. text-align: center;
  161. padding-bottom: 6px;
  162. }
  163. #ticket_popup .button:hover {
  164. transform: scale(1,1);
  165. -webkit-transform: scale(1,1);
  166. }
  167. /*ticket list*/
  168. #ticket_popup .ticket_box {
  169. width: 100%;
  170. /*height: 352px;*/
  171. padding-top: 28px;
  172. }
  173. #ticket_popup .ticket_box .ticket_list{
  174. width: 100%;
  175. height: 172px;
  176. background: url(<%=public_path%>img/man/userLP4/list_bg.png?v=1.2) no-repeat top center;
  177. }
  178. #ticket_popup .ticket_box .ticket_list .t_left{
  179. width: 261px;
  180. height: 100%;
  181. float: left;
  182. position: relative;
  183. }
  184. #ticket_popup .ticket_box .ticket_list .t_left .nicname{
  185. color: #fff;
  186. position: absolute;
  187. left: 68px;
  188. bottom: 32px;
  189. z-index: 12;
  190. font-size: 16px;
  191. font-weight: bold;
  192. width: 180px;
  193. -o-text-overflow: ellipsis;
  194. text-overflow: ellipsis;
  195. white-space: nowrap;
  196. word-break: break-all;
  197. overflow: hidden;
  198. }
  199. #ticket_popup .ticket_box .ticket_list .t_left .lady_cover{
  200. position: absolute;
  201. right: 0px;
  202. top: 0px;
  203. width: 170px;
  204. height: 148px;
  205. overflow: hidden;
  206. z-index: 2;
  207. margin-top: 1px;
  208. background-repeat: no-repeat;
  209. background-position: top center;
  210. background-size: auto 100%;
  211. }
  212. #ticket_popup .ticket_box .ticket_list .t_left .lady_cover img{
  213. height: 100%;
  214. margin-left: -60px;
  215. }
  216. #ticket_popup .ticket_box .ticket_list .t_left .lady_avatar img{
  217. width: 100%;
  218. height: auto;
  219. margin-left: 0px;
  220. margin-top: 1px;
  221. }
  222. #ticket_popup .ticket_box .ticket_list .t_left .h_mask{
  223. width: 100%;
  224. height: 100%;
  225. background: url(<%=public_path%>img/man/userLP4/h_mask.png?v=1.2) no-repeat 40px 0px;
  226. overflow: hidden;
  227. z-index: 10;
  228. position: absolute;
  229. top: 0px;
  230. left: 0px;
  231. }
  232. #ticket_popup .ticket_box .ticket_list .t_left .h_mask1{
  233. width: 100%;
  234. height: 100%;
  235. background: url(<%=public_path%>img/man/userLP4/h_mask1.png?v=1.2) no-repeat 40px 0px;
  236. overflow: hidden;
  237. z-index: 10;
  238. position: absolute;
  239. top: 0px;
  240. left: 9px;
  241. }
  242. #ticket_popup .ticket_box .ticket_list .t_left .h_mask2{
  243. width: 100%;
  244. height: 100%;
  245. background: url(<%=public_path%>img/man/userLP4/h_mask2.png?v=1.2) no-repeat 40px 0px;
  246. overflow: hidden;
  247. z-index: 10;
  248. position: absolute;
  249. top: 0px;
  250. left: 9px;
  251. }
  252. #ticket_popup .ticket_box .ticket_list .t_mid{
  253. width: 270px;
  254. float: left;
  255. padding: 20px 0px 0px 16px;
  256. }
  257. #ticket_popup .ticket_box .ticket_list .t_mid .t_title{
  258. color: #297af3;
  259. font-size: 18px;
  260. font-weight: bold;
  261. height: 24px;
  262. -o-text-overflow: ellipsis;
  263. text-overflow: ellipsis;
  264. white-space: nowrap;
  265. overflow: hidden;
  266. }
  267. #ticket_popup .ticket_box .ticket_list .t_mid .t_desc{
  268. font-size: 12px;
  269. line-height: 1.2;
  270. color: #666666;
  271. text-align: left;
  272. padding-top: 8px;
  273. width: 100%;
  274. height: 42px;
  275. -o-text-overflow: ellipsis;
  276. text-overflow: ellipsis;
  277. word-break: break-all;
  278. overflow: hidden;
  279. display: -webkit-box;
  280. -webkit-line-clamp: 3;
  281. -webkit-box-orient: vertical;
  282. }
  283. #ticket_popup .ticket_box .ticket_list .t_mid ._time .t-n{
  284. font-weight: normal;
  285. font-size: 12px;
  286. color: #8dbbfe;
  287. margin: 0;
  288. }
  289. #ticket_popup .ticket_box .ticket_list .t_mid ._time .n-t{
  290. font-weight: bold;
  291. font-size: 12px;
  292. color: #666;
  293. margin-top: 2px;
  294. display: inline-block;
  295. }
  296. #ticket_popup .ticket_box .ticket_list .t_right{
  297. width: 80px;
  298. height: 100%;
  299. float: left;
  300. }
  301. #ticket_popup .ticket_box .ticket_list .t_right .t_btn{
  302. display: block;
  303. width: 100%;
  304. height: 100%;
  305. text-indent: -888em;
  306. text-indent: -9999!important;
  307. }
  308. #ticket_popup .ticket_time{
  309. width: 100%;
  310. height: auto;
  311. text-align: left;
  312. margin-top: 12px;
  313. }
  314. #ticket_popup .ticket_time ._time{
  315. width: 30%;
  316. height: auto;
  317. display: inline-block;
  318. *float: left;
  319. }
  320. /*ticket list*/
  321. /*lady list*/
  322. #ticket_popup .live_online {
  323. padding: 26px 0px 20px;
  324. text-align: center;
  325. font-size: 0;
  326. }
  327. #ticket_popup .live_online ul {
  328. margin: 0;
  329. padding: 0;
  330. list-style: none;
  331. width: 100%;
  332. }
  333. #ticket_popup .live_online ul li {
  334. /*width: 256px;
  335. height: 350px;*/
  336. width: 230px;
  337. height: 320px;
  338. color: #FFF;
  339. text-align: center;
  340. font-size: 14px;
  341. margin: 0px 12px;
  342. padding: 0px;
  343. display: inline-block;
  344. position: relative;
  345. overflow: hidden;
  346. border-radius: 8px;
  347. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
  348. *display: inline;
  349. zoom:1;
  350. }
  351. #ticket_popup .live_online .live_icon {
  352. width: 66px;
  353. height: 22px;
  354. line-height: 22px;
  355. top: 10px;
  356. left: 6px;
  357. position: absolute;
  358. background: url(<%=public_path%>img/man/userLP4/live_bg.png) no-repeat center;
  359. z-index: 10;
  360. }
  361. #ticket_popup .live_online .vipPublic{
  362. width: 95px;
  363. height: 17px;
  364. right: 0;
  365. top: 12px;
  366. left: auto;
  367. position: absolute;
  368. line-height: 25px;
  369. z-index: 9;
  370. text-indent: -888em;
  371. background: transparent url(<%=public_path%>img/man/userLP4/s-public-icon.png) no-repeat 100% 0 scroll;
  372. }
  373. #ticket_popup .live_online .link{
  374. position: absolute;
  375. display: block;
  376. width: 100%;
  377. height: 100%;
  378. top: 0px;
  379. left: 0px;
  380. }
  381. #ticket_popup .live_online ul li .live_lady {
  382. width: 100%;
  383. height: 100%;
  384. position: absolute;
  385. top: 0px;
  386. left: 0px;
  387. background-repeat: no-repeat;
  388. background-size: cover;
  389. background-size: 100% 100%;
  390. }
  391. #ticket_popup .live_online ul li .lady_img {
  392. width: 100%;
  393. height: 100%;
  394. margin: 0px;
  395. border: 0;
  396. transition: 0.6s;
  397. -webkit-transition: 0.6s;
  398. transform: scale(1,1);
  399. -webkit-transform: scale(1,1);
  400. }
  401. #ticket_popup .live_online .link:hover .lady_img{
  402. transform: scale(1.06,1.06);
  403. -webkit-transform: scale(1.06,1.06);
  404. }
  405. #ticket_popup .live_online .live_icon.online {
  406. background: url(<%=public_path%>img/man/userLP4/onlive_bg.png) no-repeat center;
  407. }
  408. #ticket_popup .live_online .lady_info {
  409. position: absolute;
  410. left: 0;
  411. bottom: 0;
  412. width: 100%;
  413. padding-bottom: 16px;
  414. background: url(<%=public_path%>img/man/userLP4/ladies_list_mask.png) repeat-x bottom;
  415. }
  416. #ticket_popup .live_online .lady_info .name{
  417. font-size: 18px;
  418. margin: 0;
  419. padding-top: 8px;
  420. font-weight: 400;
  421. width: 88%;
  422. display: inline-block;
  423. -o-text-overflow: ellipsis;
  424. text-overflow: ellipsis;
  425. white-space: nowrap;
  426. word-break: break-all;
  427. overflow: hidden;
  428. }
  429. #ticket_popup .live_online .lady_info .lady_btn{
  430. display: inline-block;
  431. width: 168px;
  432. height: 32px;
  433. line-height: 32px;
  434. border-radius: 15px;
  435. font-size: 12px;
  436. font-weight: 700;
  437. margin-top:14px;
  438. position: relative;
  439. background: url(<%=public_path%>img/man/userLP4/view_btn.png) repeat-x bottom;
  440. transition: 0.2s;
  441. -webkit-transition: 0.2s;
  442. transform: scale(1,1);
  443. -webkit-transform: scale(1,1);
  444. }
  445. #ticket_popup .live_online .lady_info .lady_btn.blue{
  446. background: url(<%=public_path%>img/man/userLP4/blue_btn.png) repeat-x bottom;
  447. }
  448. #ticket_popup .live_online .lady_info .lady_btn:hover{
  449. transform: scale(1.02,1.02);
  450. -webkit-transform: scale(1.02,1.02);
  451. }
  452. #ticket_popup .live_online .lady_info .lady_btn .i_free{
  453. position: absolute;
  454. top: -10px;
  455. right: 8px;
  456. width: 36px;
  457. height: 20px;
  458. background: url(<%=public_path%>img/man/userLP4/free.png) no-repeat;
  459. }
  460. #ticket_popup .live_online ul li img {
  461. margin-right: 4px;
  462. }
  463. /*lady list*/
  464. </style>