index.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  1. <!DOCTYPE html>
  2. <html style="font-size: 600px;">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <!-- <meta name="viewport" content="width=640, user-scalable=no"> -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  8. <meta http-equiv="pragma" content="no-cache">
  9. <meta http-equiv="Cache-Control" content="no-cache">
  10. <meta http-equiv="Expires" content="0">
  11. <meta name="apple-mobile-web-app-capable" content="yes">
  12. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  13. <meta name="format-detection" content="telephone=no">
  14. <meta name="apple-mobile-web-app-title" content="">
  15. <title>试玩</title>
  16. <script src="./rem.js"></script>
  17. <style>
  18. body {
  19. margin: 0
  20. }
  21. #app {
  22. margin: 50px auto;
  23. width: 660px;
  24. height: 450px
  25. }
  26. #app>div>span {
  27. display: inline-block
  28. }
  29. html,
  30. body,
  31. div,
  32. span,
  33. object,
  34. iframe,
  35. h1,
  36. h2,
  37. h3,
  38. h4,
  39. h5,
  40. h6,
  41. p,
  42. blockquote,
  43. pre,
  44. abbr,
  45. address,
  46. cite,
  47. code,
  48. del,
  49. dfn,
  50. em,
  51. img,
  52. ins,
  53. kbd,
  54. q,
  55. samp,
  56. small,
  57. strong,
  58. sub,
  59. sup,
  60. var,
  61. b,
  62. i,
  63. dl,
  64. dt,
  65. dd,
  66. ol,
  67. ul,
  68. li,
  69. fieldset,
  70. form,
  71. label,
  72. legend,
  73. table,
  74. caption,
  75. tbody,
  76. tfoot,
  77. thead,
  78. tr,
  79. th,
  80. td,
  81. article,
  82. aside,
  83. canvas,
  84. details,
  85. figcaption,
  86. figure,
  87. footer,
  88. header,
  89. hgroup,
  90. menu,
  91. nav,
  92. section,
  93. summary,
  94. time,
  95. mark,
  96. audio,
  97. video {
  98. margin: 0;
  99. padding: 0;
  100. border: 0;
  101. outline: 0;
  102. list-style: none;
  103. }
  104. body {
  105. min-height: 100%;
  106. font-family: 'Microsoft YaHei', 'Myriad Set Pro', 'Lucida Grande', 'Hiragino Sans GB', 'Helvetica', 'Arial', 'sans-serif';
  107. color: #333;
  108. background: #fff;
  109. -webkit-text-size-adjust: 100%;
  110. -webkit-font-smoothing: antialiased;
  111. -webkit-user-select: none;
  112. -webkit-tap-highlight-color: transparent;
  113. tap-highlight-color: transparent;
  114. font-size: 0.026rem;
  115. }
  116. article,
  117. section {
  118. display: block;
  119. }
  120. img {
  121. vertical-align: middle;
  122. border: none;
  123. }
  124. input,
  125. button,
  126. select,
  127. textarea {
  128. outline: none;
  129. }
  130. textarea {
  131. resize: none;
  132. }
  133. .cmp-main {
  134. width: 3.6rem;
  135. font-size: 0.1rem;
  136. -webkit-transition: opacity 0.5s, padding-bottom 0.4s;
  137. transition: opacity 0.5s, padding-bottom 0.4s;
  138. }
  139. .cmp-main .wrap-dialog {
  140. -webkit-tap-highlight-color: transparent;
  141. min-height: 100vh;
  142. background-color: #ebe6e0;
  143. background-size: cover;
  144. -webkit-transition: -webkit-transform 0.5s;
  145. transition: -webkit-transform 0.5s;
  146. transition: transform 0.5s;
  147. transition: transform 0.5s, -webkit-transform 0.5s;
  148. }
  149. .cmp-main .list-dialog {
  150. width: 3.2rem;
  151. margin: auto;
  152. padding: 20px 0 25vh;
  153. }
  154. .cmp-main .list-dialog li {
  155. padding-bottom: 0.3rem;
  156. }
  157. .cmp-main .list-dialog li:after {
  158. visibility: hidden;
  159. display: block;
  160. font-size: 0;
  161. content: '';
  162. clear: both;
  163. height: 0;
  164. }
  165. .cmp-main .list-dialog li:first-child {
  166. display: block;
  167. opacity: 1;
  168. }
  169. .cmp-main .list-dialog li:last-child {
  170. -webkit-animation: ani-opacity 600ms ease-out 1 both;
  171. }
  172. .cmp-main .list-dialog .left .avatar {
  173. float: left;
  174. width: 0.5rem;
  175. height: 0.5rem;
  176. margin-top: 0.05rem;
  177. background-image: url("./video/left.png");
  178. background-position: center;
  179. background-size: cover;
  180. border-radius: 100%;
  181. overflow: hidden;
  182. border: 1px #184879 solid;
  183. }
  184. .cmp-main .list-dialog .left .content-box {
  185. max-width: 2.5rem;
  186. margin-left: 0.6rem;
  187. -webkit-box-flex: 1;
  188. -ms-flex: 1 1 auto;
  189. flex: 1 1 auto;
  190. }
  191. .cmp-main .list-dialog .left .content-box .name {
  192. margin: 0 0 5px 5px;
  193. font-size: 0.15rem;
  194. color: #666;
  195. }
  196. .cmp-main .list-dialog .left .content-box .content {
  197. position: relative;
  198. display: inline-block;
  199. min-width: 0.5rem;
  200. padding: 0.05rem 0.08rem;
  201. font-size: 0.16rem;
  202. word-break: break-all;
  203. background: #fff;
  204. border-radius: 6px;
  205. -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  206. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  207. }
  208. .cmp-main .list-dialog .left .content-box .content em {
  209. display: block;
  210. position: absolute;
  211. top: 25%;
  212. left: -0.16rem;
  213. width: 0;
  214. height: 0;
  215. border: 0.08rem solid transparent;
  216. border-right: 0.08rem solid #fff;
  217. }
  218. .cmp-main .list-dialog .right .avatar {
  219. float: right;
  220. width: 0.5rem;
  221. height: 0.5rem;
  222. margin-top: 0.05rem;
  223. background-image: url("./video/right.png");
  224. background-position: center;
  225. background-size: cover;
  226. border-radius: 100%;
  227. overflow: hidden;
  228. /* border: 1px rgb(188, 15, 19) solid; */
  229. }
  230. .cmp-main .list-dialog .right .content-box {
  231. float: right;
  232. width: 2.3rem;
  233. margin-right: 0.05rem;
  234. text-align: right;
  235. }
  236. .cmp-main .list-dialog .right .content-box .name {
  237. margin: 0 0 5px 5px;
  238. font-size: 0.15rem;
  239. color: #666;
  240. }
  241. .cmp-main .list-dialog .right .content-box .content {
  242. position: relative;
  243. display: inline-block;
  244. min-width: 0.5rem;
  245. padding: 0.05rem 0.08rem;
  246. text-align: left;
  247. color: #fff;
  248. font-size: 0.16rem;
  249. word-break: break-all;
  250. background: rgb(43,162,70);
  251. border-radius: 6px;
  252. -webkit-box-shadow: 0 2px 5px rgba(43,162,70);
  253. box-shadow: 0 2px 5px rgba(43,162,70);
  254. }
  255. .cmp-main .list-dialog .right .content-box .content em {
  256. display: block;
  257. position: absolute;
  258. top: 25%;
  259. right: -0.16rem;
  260. width: 0;
  261. height: 0;
  262. border: 0.08rem solid transparent;
  263. border-left: 0.08rem solid rgb(43,162,70);
  264. }
  265. .cmp-main .list-dialog .item-scence-tips {
  266. text-align: center;
  267. }
  268. .cmp-main .list-dialog .item-scence-tips div {
  269. display: inline-block;
  270. padding: 0.05rem 0.08rem;
  271. font-size: 0.16rem;
  272. text-align: justify;
  273. background: rgba(24, 72, 121, 0.2);
  274. border-radius: 6px;
  275. }
  276. .cmp-main .list-dialog .item-scence-img {
  277. text-align: center;
  278. }
  279. .cmp-main .list-dialog .item-scence-img img {
  280. width: 3.2rem;
  281. border-radius: 6px;
  282. }
  283. #shouTime {
  284. animation: arrowBig .5s infinite;
  285. /*Safari and Chrome*/
  286. animation-direction: alternate;
  287. /*轮流反向播放动画。*/
  288. animation-timing-function: ease-in-out;
  289. /*动画的速度曲线*/
  290. /* Safari 和 Chrome */
  291. -webkit-animation: arrowBig .5s infinite;
  292. -webkit-animation-direction: alternate;
  293. /*轮流反向播放动画。*/
  294. -webkit-animation-timing-function: ease-in-out;
  295. /*动画的速度曲线*/
  296. }
  297. @-webkit-keyframes arrowBig {
  298. 0% {
  299. -webkit-transform: translate(0, 0);
  300. -webkit-transform: scale(0.9);
  301. }
  302. 100% {
  303. -webkit-transform: translate(15%, 15%);
  304. -webkit-transform: scale(1);
  305. }
  306. }
  307. @keyframes arrowBig {
  308. 0% {
  309. transform: translate(0, 0);
  310. transform: scale(0.9);
  311. }
  312. 100% {
  313. transform: translate(15%, 15%);
  314. transform: scale(1);
  315. }
  316. }
  317. .audio-rotate {
  318. -webkit-animation: rotating 1.2s linear infinite;
  319. -moz-animation: rotating 1.2s linear infinite;
  320. -o-animation: rotating 1.2s linear infinite;
  321. animation: rotating 1.2s linear infinite;
  322. transform-origin: 50% 50%;
  323. -webkit-transform-origin: 50% 50%;
  324. -moz-transform-origin: 50% 50%;
  325. -o-transform-origin: 50% 50%;
  326. }
  327. @-webkit-keyframes rotating {
  328. from {
  329. -webkit-transform: rotate(0)
  330. }
  331. to {
  332. -webkit-transform: rotate(360deg)
  333. }
  334. }
  335. @keyframes rotating {
  336. from {
  337. transform: rotate(0)
  338. }
  339. to {
  340. transform: rotate(360deg)
  341. }
  342. }
  343. @-moz-keyframes rotating {
  344. from {
  345. -moz-transform: rotate(0)
  346. }
  347. to {
  348. -moz-transform: rotate(360deg)
  349. }
  350. }
  351. </style>
  352. </head>
  353. <body onload="videoPlay()">
  354. <div>
  355. <div id="audio-btn" class="audio-rotate"
  356. style="width:40px;height:40px;position: fixed;right:20px;top:20px;z-index: 100;background:black;border: 1px solid white;border-radius: 50%">
  357. <img src="./video/yinyue.png" style="width: 100%;height: 100%" alt="">
  358. <audio loop muted src="./video/bg.mp3" id="mediaId" autoplay="autoplay" preload=""></audio>
  359. </div>
  360. <div class="main" id="show">
  361. <div data-reactroot="">
  362. <div class="broccoli_cmp_app">
  363. <div class="cmp-main">
  364. <div class="wrap-dialog" id="parent">
  365. <img src="./video/main_bg.jpg" alt=""
  366. style="position:fixed;top:0;left:0;width:100%;height:100%;z-index: 0">
  367. <div style="position: fixed;bottom: 1.2rem;left: 1.3rem;width:1rem;text-align: center"
  368. id="shou">
  369. <div id="quan" style="border:0.01rem solid gray;width: 0.6rem ;height :0.6rem;border-radius: 50%;position: absolute;top: -0.25rem;left: 0.25rem;display: flex;
  370. justify-content: center;
  371. align-items: center;">
  372. <div
  373. style="border:0.01rem solid grey;width: 0.3rem ;height :0.3rem;border-radius: 50%;">
  374. </div>
  375. </div>
  376. <img src="./video/shou.png" alt="" id="shouTime"
  377. style="width: 0.5rem;position: relative;z-index:1">
  378. <p style="text-align:center;font-size: 0.14rem;margin-top: 10px">点屏幕出现剧情</p>
  379. </div>
  380. <ul class="list-dialog" style="position:relative;z-index:1">
  381. <li class="item-scence-img">
  382. <div><img src="./video/top.png"></div>
  383. </li>
  384. </ul>
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. </div>
  390. <div id="share"
  391. style="width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;top: 0;z-index: 10;display:none">
  392. <img src="./video/tanchuang.png" alt="" style="width:100%;margin-top: 0.27rem;">
  393. <div style="width: 2rem;
  394. height: 0.5rem;
  395. position: absolute;
  396. top: 4rem;
  397. left: 0.8rem;z-index:10;" id="btn"></div>
  398. </div>
  399. </div>
  400. <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
  401. <script type="text/javascript" src="./jquery.min.js"></script>
  402. <script src="./list.json"></script>
  403. <script type="text/javascript">
  404. var viewHeight = document.documentElement.clientHeight;
  405. var check = true
  406. var count = 0
  407. function videoPlay() {
  408. document.getElementById("mediaId").play()
  409. document.getElementById("mediaId").muted = false
  410. }
  411. var x = document.getElementById("mediaId");
  412. $(function () {
  413. $("body").on("click", "#audio-btn", function () {
  414. $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
  415. $(this).toggleClass("audio-rotate");
  416. //控制背景音乐 播放或暂停
  417. if ($(this).hasClass("rotate")) {
  418. x.pause();
  419. } else {
  420. x.play();
  421. x.muted = false
  422. }
  423. })
  424. });
  425. if (check) {
  426. $("#show").on("touchend", function () {
  427. var list, name
  428. list = listJson.list
  429. name = listJson.name
  430. // check = false
  431. var $li1
  432. // var name = {
  433. // left: "陆浩成",
  434. // right: '姜蓝欣'
  435. // }
  436. $('#shou').hide()
  437. for (var key in list[count]) {
  438. if (key == 'left') {
  439. $li1 = $(` <li class="left">
  440. <div class="avatar" style="background-image: url(./video/${list[count][key][2]}.png);">
  441. </div>
  442. <div class="content-box">
  443. <p class="name">${list[count][key][1]}</p>
  444. <p class="content"
  445. style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"><em
  446. style="border-right-color: rgb(255, 255, 255);"></em>
  447. ${list[count][key][0]}
  448. </p>
  449. </div>
  450. </li>`)
  451. } else if (key == 'right') {
  452. $li1 = $(` <li class="right">
  453. <div class="avatar" style="background-image: url(./video/${name['right'][1]}.png);">
  454. </div>
  455. <div class="content-box">
  456. <p class="name">${name['right'][0]}</p>
  457. <p class="content"
  458. style="background-color: rgba(43,162,70); color: rgb(255, 255, 255);"><em
  459. style="border-left-color: rgba(43,162,70);"></em>
  460. ${list[count][key]}
  461. </p>
  462. </div>
  463. </li> `)
  464. } else if (key == 'content') {
  465. $li1 = $(` <li class = "item-scence-tips" > <div style = "background-color: rgba(24, 72, 121, 0.2); color: rgb(51, 51, 51);" >
  466. ${list[count][key]} </div> </li>`)
  467. }
  468. }
  469. $("ul").append($li1);
  470. if (
  471. viewHeight - $('ul').height() < 200) {
  472. $('html,body').animate({
  473. scrollTop: Math.abs(viewHeight - $('ul').height()) + 300
  474. }, 300);
  475. }
  476. count++
  477. if (count == list.length + 1) {
  478. $('#share').show()
  479. return
  480. }
  481. })
  482. }
  483. setTimeout(function () {
  484. check = true
  485. }, 1000);
  486. $('#btn').on('touchstart', function (e) {
  487. e.preventDefault()
  488. e.stopPropagation()
  489. window.playableSDK.sendEvent('clickDownloadBar', {
  490. section: 'section2',
  491. area: 'area3'
  492. });
  493. window.playableSDK.openAppStore()
  494. })
  495. </script>
  496. </body>
  497. </html>