index.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  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. border-radius: 50%;
  184. }
  185. .cmp-main .list-dialog .left .content-box {
  186. max-width: 2.5rem;
  187. margin-left: 0.6rem;
  188. -webkit-box-flex: 1;
  189. -ms-flex: 1 1 auto;
  190. flex: 1 1 auto;
  191. }
  192. .cmp-main .list-dialog .left .content-box .name {
  193. margin: 0 0 5px 5px;
  194. font-size: 0.15rem;
  195. color: #666;
  196. }
  197. .cmp-main .list-dialog .left .content-box .content {
  198. position: relative;
  199. display: inline-block;
  200. min-width: 0.5rem;
  201. padding: 0.05rem 0.08rem;
  202. font-size: 0.16rem;
  203. word-break: break-all;
  204. background: #fff;
  205. border-radius: 6px;
  206. -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  207. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  208. }
  209. .cmp-main .list-dialog .left .content-box .content em {
  210. display: block;
  211. position: absolute;
  212. top: 25%;
  213. left: -0.16rem;
  214. width: 0;
  215. height: 0;
  216. border: 0.08rem solid transparent;
  217. border-right: 0.08rem solid #fff;
  218. }
  219. .cmp-main .list-dialog .right .avatar {
  220. float: right;
  221. width: 0.5rem;
  222. height: 0.5rem;
  223. margin-top: 0.05rem;
  224. background-image: url("./video/right.png");
  225. background-position: center;
  226. background-size: cover;
  227. border-radius: 100%;
  228. overflow: hidden;
  229. border: 1px rgb(188, 15, 19) solid;
  230. border-radius: 50%;
  231. }
  232. .cmp-main .list-dialog .right .content-box {
  233. float: right;
  234. width: 2.3rem;
  235. margin-right: 0.05rem;
  236. text-align: right;
  237. }
  238. .cmp-main .list-dialog .right .content-box .name {
  239. margin: 0 0 5px 5px;
  240. font-size: 0.15rem;
  241. color: #666;
  242. }
  243. .cmp-main .list-dialog .right .content-box .content {
  244. position: relative;
  245. display: inline-block;
  246. min-width: 0.5rem;
  247. padding: 0.05rem 0.08rem;
  248. text-align: left;
  249. color: #fff;
  250. font-size: 0.16rem;
  251. word-break: break-all;
  252. background: rgb(188, 15, 19);
  253. border-radius: 6px;
  254. -webkit-box-shadow: 0 2px 5px rgba(188, 15, 19);
  255. box-shadow: 0 2px 5px rgba(188, 15, 19);
  256. }
  257. .cmp-main .list-dialog .right .content-box .content em {
  258. display: block;
  259. position: absolute;
  260. top: 25%;
  261. right: -0.16rem;
  262. width: 0;
  263. height: 0;
  264. border: 0.08rem solid transparent;
  265. border-left: 0.08rem solid rgb(188, 15, 19);
  266. }
  267. .cmp-main .list-dialog .item-scence-tips {
  268. text-align: center;
  269. }
  270. .cmp-main .list-dialog .item-scence-tips div {
  271. display: inline-block;
  272. padding: 0.05rem 0.08rem;
  273. font-size: 0.16rem;
  274. text-align: justify;
  275. background: rgba(24, 72, 121, 0.2);
  276. border-radius: 6px;
  277. }
  278. .cmp-main .list-dialog .item-scence-img {
  279. text-align: center;
  280. }
  281. .cmp-main .list-dialog .item-scence-img img {
  282. width: 3.2rem;
  283. border-radius: 6px;
  284. }
  285. #shouTime {
  286. animation: arrowBig .5s infinite;
  287. /*Safari and Chrome*/
  288. animation-direction: alternate;
  289. /*轮流反向播放动画。*/
  290. animation-timing-function: ease-in-out;
  291. /*动画的速度曲线*/
  292. /* Safari 和 Chrome */
  293. -webkit-animation: arrowBig .5s infinite;
  294. -webkit-animation-direction: alternate;
  295. /*轮流反向播放动画。*/
  296. -webkit-animation-timing-function: ease-in-out;
  297. /*动画的速度曲线*/
  298. }
  299. @-webkit-keyframes arrowBig {
  300. 0% {
  301. -webkit-transform: translate(0, 0);
  302. -webkit-transform: scale(0.9);
  303. }
  304. 100% {
  305. -webkit-transform: translate(15%, 15%);
  306. -webkit-transform: scale(1);
  307. }
  308. }
  309. @keyframes arrowBig {
  310. 0% {
  311. transform: translate(0, 0);
  312. transform: scale(0.9);
  313. }
  314. 100% {
  315. transform: translate(15%, 15%);
  316. transform: scale(1);
  317. }
  318. }
  319. .audio-rotate {
  320. -webkit-animation: rotating 1.2s linear infinite;
  321. -moz-animation: rotating 1.2s linear infinite;
  322. -o-animation: rotating 1.2s linear infinite;
  323. animation: rotating 1.2s linear infinite;
  324. transform-origin: 50% 50%;
  325. -webkit-transform-origin: 50% 50%;
  326. -moz-transform-origin: 50% 50%;
  327. -o-transform-origin: 50% 50%;
  328. }
  329. @-webkit-keyframes rotating {
  330. from {
  331. -webkit-transform: rotate(0)
  332. }
  333. to {
  334. -webkit-transform: rotate(360deg)
  335. }
  336. }
  337. @keyframes rotating {
  338. from {
  339. transform: rotate(0)
  340. }
  341. to {
  342. transform: rotate(360deg)
  343. }
  344. }
  345. @-moz-keyframes rotating {
  346. from {
  347. -moz-transform: rotate(0)
  348. }
  349. to {
  350. -moz-transform: rotate(360deg)
  351. }
  352. }
  353. </style>
  354. </head>
  355. <body onload="videoPlay()">
  356. <div>
  357. <div id="audio-btn" class="audio-rotate"
  358. style="width:40px;height:40px;position: fixed;right:20px;top:20px;z-index: 100;background:black;border: 1px solid white;border-radius: 50%">
  359. <img src="./video/yinyue.png" style="width: 100%;height: 100%" alt="">
  360. <audio loop muted src="./video/bg.mp3" id="mediaId" autoplay="autoplay" preload=""></audio>
  361. </div>
  362. <div class="main" id="show">
  363. <div data-reactroot="">
  364. <div class="broccoli_cmp_app">
  365. <div class="cmp-main">
  366. <div class="wrap-dialog" id="parent">
  367. <img src="./video/main_bg.png" alt=""
  368. style="position:fixed;top:0;left:0;width:100%;height:100%;z-index: 0">
  369. <div style="position: fixed;bottom: 1.2rem;left: 1.3rem;width:1rem;text-align: center"
  370. id="shou">
  371. <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;
  372. justify-content: center;
  373. align-items: center;">
  374. <div
  375. style="border:0.01rem solid grey;width: 0.3rem ;height :0.3rem;border-radius: 50%;">
  376. </div>
  377. </div>
  378. <img src="./video/shou.png" alt="" id="shouTime"
  379. style="width: 0.5rem;position: relative;z-index:1">
  380. <p style="text-align:center;font-size: 0.14rem;margin-top: 10px">点屏幕出现剧情</p>
  381. </div>
  382. <ul class="list-dialog" style="position:relative;z-index:1">
  383. <!-- <li class="item-scence-tips">
  384. <div style="background-color: rgba(24, 72, 121, 0.2); color: rgb(51, 51, 51);">金銮殿中
  385. </div>
  386. </li> -->
  387. <li class="item-scence-img">
  388. <div><img src="./video/top.png"></div>
  389. </li>
  390. </ul>
  391. </div>
  392. </div>
  393. </div>
  394. </div>
  395. </div>
  396. <div id="share"
  397. style="width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;top: 0;z-index: 10;display:none">
  398. <img src="./video/tanchuang.png" alt="" style="width:100%">
  399. <div style="width: 2rem;
  400. height: 0.5rem;
  401. position: absolute;
  402. top: 5rem;
  403. left: 0.8rem;z-index:10" id="btn"></div>
  404. </div>
  405. </div>
  406. <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
  407. <script type="text/javascript" src="./jquery.min.js"></script>
  408. <script src="./list.json"></script>
  409. <script type="text/javascript">
  410. var viewHeight = document.documentElement.clientHeight;
  411. var check = true
  412. var count = 0
  413. function videoPlay() {
  414. document.getElementById("mediaId").play()
  415. document.getElementById("mediaId").muted = false
  416. }
  417. var x = document.getElementById("mediaId");
  418. $(function () {
  419. $("body").on("click", "#audio-btn", function () {
  420. $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
  421. $(this).toggleClass("audio-rotate");
  422. //控制背景音乐 播放或暂停
  423. if ($(this).hasClass("rotate")) {
  424. x.pause();
  425. } else {
  426. x.play();
  427. x.muted = false
  428. }
  429. })
  430. });
  431. if (check) {
  432. $("#show").on("touchend", function () {
  433. var list, name
  434. list = listJson.list
  435. name = listJson.name
  436. // check = false
  437. var $li1
  438. // var name = {
  439. // left: "陆浩成",
  440. // right: '姜蓝欣'
  441. // }
  442. $('#shou').hide()
  443. for (var key in list[count]) {
  444. if (key == 'left') {
  445. $li1 = $(` <li class="left">
  446. <div class="avatar" style="background-image: url(./video/left.png);">
  447. </div>
  448. <div class="content-box">
  449. <p class="name">${name['left']}</p>
  450. <p class="content"
  451. style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"><em
  452. style="border-right-color: rgb(255, 255, 255);"></em>
  453. ${list[count][key]}
  454. </p>
  455. </div>
  456. </li>`)
  457. } else if (key == 'right') {
  458. $li1 = $(` <li class="right">
  459. <div class="avatar" style="background-image: url(./video/right.png);">
  460. </div>
  461. <div class="content-box">
  462. <p class="name">${name['right']}</p>
  463. <p class="content"
  464. style="background-color: rgba(188,15,19); color: rgb(255, 255, 255);"><em
  465. style="border-left-color: rgba(188,15,19);"></em>
  466. ${list[count][key]}
  467. </p>
  468. </div>
  469. </li> `)
  470. }
  471. }
  472. $("ul").append($li1);
  473. if (
  474. viewHeight - $('ul').height() < 200) {
  475. $('html,body').animate({
  476. scrollTop: Math.abs(viewHeight - $('ul').height()) + 300
  477. }, 300);
  478. }
  479. count++
  480. if (count == list.length + 1) {
  481. $('#share').show()
  482. return
  483. }
  484. })
  485. }
  486. setTimeout(function () {
  487. check = true
  488. }, 1000);
  489. $('#btn').on('touchstart', function (e) {
  490. e.preventDefault()
  491. e.stopPropagation()
  492. window.playableSDK.sendEvent('clickDownloadBar', {
  493. section: 'section2',
  494. area: 'area3'
  495. });
  496. window.playableSDK.openAppStore()
  497. })
  498. </script>
  499. </body>
  500. </html>