123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563 |
- <!DOCTYPE html>
- <html style="font-size: 600px;">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- <!-- <meta name="viewport" content="width=640, user-scalable=no"> -->
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="Cache-Control" content="no-cache">
- <meta http-equiv="Expires" content="0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <meta name="apple-mobile-web-app-title" content="">
- <title>试玩</title>
- <script src="./rem.js"></script>
- <style>
- body {
- margin: 0
- }
- #app {
- margin: 50px auto;
- width: 660px;
- height: 450px
- }
- #app>div>span {
- display: inline-block
- }
- html,
- body,
- div,
- span,
- object,
- iframe,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- p,
- blockquote,
- pre,
- abbr,
- address,
- cite,
- code,
- del,
- dfn,
- em,
- img,
- ins,
- kbd,
- q,
- samp,
- small,
- strong,
- sub,
- sup,
- var,
- b,
- i,
- dl,
- dt,
- dd,
- ol,
- ul,
- li,
- fieldset,
- form,
- label,
- legend,
- table,
- caption,
- tbody,
- tfoot,
- thead,
- tr,
- th,
- td,
- article,
- aside,
- canvas,
- details,
- figcaption,
- figure,
- footer,
- header,
- hgroup,
- menu,
- nav,
- section,
- summary,
- time,
- mark,
- audio,
- video {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- list-style: none;
- }
- body {
- min-height: 100%;
- font-family: 'Microsoft YaHei', 'Myriad Set Pro', 'Lucida Grande', 'Hiragino Sans GB', 'Helvetica', 'Arial', 'sans-serif';
- color: #333;
- background: #fff;
- -webkit-text-size-adjust: 100%;
- -webkit-font-smoothing: antialiased;
- -webkit-user-select: none;
- -webkit-tap-highlight-color: transparent;
- tap-highlight-color: transparent;
- font-size: 0.026rem;
- }
- article,
- section {
- display: block;
- }
- img {
- vertical-align: middle;
- border: none;
- }
- input,
- button,
- select,
- textarea {
- outline: none;
- }
- textarea {
- resize: none;
- }
- .cmp-main {
- width: 3.6rem;
- font-size: 0.1rem;
- -webkit-transition: opacity 0.5s, padding-bottom 0.4s;
- transition: opacity 0.5s, padding-bottom 0.4s;
- }
- .cmp-main .wrap-dialog {
- -webkit-tap-highlight-color: transparent;
- min-height: 100vh;
- background-color: #ebe6e0;
- background-size: cover;
- -webkit-transition: -webkit-transform 0.5s;
- transition: -webkit-transform 0.5s;
- transition: transform 0.5s;
- transition: transform 0.5s, -webkit-transform 0.5s;
- }
- .cmp-main .list-dialog {
- width: 3.2rem;
- margin: auto;
- padding: 20px 0 25vh;
- }
- .cmp-main .list-dialog li {
- padding-bottom: 0.3rem;
- }
- .cmp-main .list-dialog li:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: '';
- clear: both;
- height: 0;
- }
- .cmp-main .list-dialog li:first-child {
- display: block;
- opacity: 1;
- }
- .cmp-main .list-dialog li:last-child {
- -webkit-animation: ani-opacity 600ms ease-out 1 both;
- }
- .cmp-main .list-dialog .left .avatar {
- float: left;
- width: 0.5rem;
- height: 0.5rem;
- margin-top: 0.05rem;
- background-image: url("./video/left.png");
- background-position: center;
- background-size: cover;
- border-radius: 100%;
- overflow: hidden;
- border: 1px #184879 solid;
- border-radius: 50%;
- }
- .cmp-main .list-dialog .left .content-box {
- max-width: 2.5rem;
- margin-left: 0.6rem;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- }
- .cmp-main .list-dialog .left .content-box .name {
- margin: 0 0 5px 5px;
- font-size: 0.15rem;
- color: #666;
- }
- .cmp-main .list-dialog .left .content-box .content {
- position: relative;
- display: inline-block;
- min-width: 0.5rem;
- padding: 0.05rem 0.08rem;
- font-size: 0.16rem;
- word-break: break-all;
- background: #fff;
- border-radius: 6px;
- -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
- }
- .cmp-main .list-dialog .left .content-box .content em {
- display: block;
- position: absolute;
- top: 25%;
- left: -0.16rem;
- width: 0;
- height: 0;
- border: 0.08rem solid transparent;
- border-right: 0.08rem solid #fff;
- }
- .cmp-main .list-dialog .right .avatar {
- float: right;
- width: 0.5rem;
- height: 0.5rem;
- margin-top: 0.05rem;
- background-image: url("./video/right.png");
- background-position: center;
- background-size: cover;
- border-radius: 100%;
- overflow: hidden;
- border: 1px rgb(188, 15, 19) solid;
- border-radius: 50%;
- }
- .cmp-main .list-dialog .right .content-box {
- float: right;
- width: 2.3rem;
- margin-right: 0.05rem;
- text-align: right;
- }
- .cmp-main .list-dialog .right .content-box .name {
- margin: 0 0 5px 5px;
- font-size: 0.15rem;
- color: #666;
- }
- .cmp-main .list-dialog .right .content-box .content {
- position: relative;
- display: inline-block;
- min-width: 0.5rem;
- padding: 0.05rem 0.08rem;
- text-align: left;
- color: #fff;
- font-size: 0.16rem;
- word-break: break-all;
- background: rgb(188, 15, 19);
- border-radius: 6px;
- -webkit-box-shadow: 0 2px 5px rgba(188, 15, 19);
- box-shadow: 0 2px 5px rgba(188, 15, 19);
- }
- .cmp-main .list-dialog .right .content-box .content em {
- display: block;
- position: absolute;
- top: 25%;
- right: -0.16rem;
- width: 0;
- height: 0;
- border: 0.08rem solid transparent;
- border-left: 0.08rem solid rgb(188, 15, 19);
- }
- .cmp-main .list-dialog .item-scence-tips {
- text-align: center;
- }
- .cmp-main .list-dialog .item-scence-tips div {
- display: inline-block;
- padding: 0.05rem 0.08rem;
- font-size: 0.16rem;
- text-align: justify;
- background: rgba(24, 72, 121, 0.2);
- border-radius: 6px;
- }
- .cmp-main .list-dialog .item-scence-img {
- text-align: center;
- }
- .cmp-main .list-dialog .item-scence-img img {
- width: 3.2rem;
- border-radius: 6px;
- }
- #shouTime {
- animation: arrowBig .5s infinite;
- /*Safari and Chrome*/
- animation-direction: alternate;
- /*轮流反向播放动画。*/
- animation-timing-function: ease-in-out;
- /*动画的速度曲线*/
- /* Safari 和 Chrome */
- -webkit-animation: arrowBig .5s infinite;
- -webkit-animation-direction: alternate;
- /*轮流反向播放动画。*/
- -webkit-animation-timing-function: ease-in-out;
- /*动画的速度曲线*/
- }
- @-webkit-keyframes arrowBig {
- 0% {
- -webkit-transform: translate(0, 0);
- -webkit-transform: scale(0.9);
- }
- 100% {
- -webkit-transform: translate(15%, 15%);
- -webkit-transform: scale(1);
- }
- }
- @keyframes arrowBig {
- 0% {
- transform: translate(0, 0);
- transform: scale(0.9);
- }
- 100% {
- transform: translate(15%, 15%);
- transform: scale(1);
- }
- }
- .audio-rotate {
- -webkit-animation: rotating 1.2s linear infinite;
- -moz-animation: rotating 1.2s linear infinite;
- -o-animation: rotating 1.2s linear infinite;
- animation: rotating 1.2s linear infinite;
- transform-origin: 50% 50%;
- -webkit-transform-origin: 50% 50%;
- -moz-transform-origin: 50% 50%;
- -o-transform-origin: 50% 50%;
- }
- @-webkit-keyframes rotating {
- from {
- -webkit-transform: rotate(0)
- }
- to {
- -webkit-transform: rotate(360deg)
- }
- }
- @keyframes rotating {
- from {
- transform: rotate(0)
- }
- to {
- transform: rotate(360deg)
- }
- }
- @-moz-keyframes rotating {
- from {
- -moz-transform: rotate(0)
- }
- to {
- -moz-transform: rotate(360deg)
- }
- }
- </style>
- </head>
- <body onload="videoPlay()">
- <div>
- <div id="audio-btn" class="audio-rotate"
- style="width:40px;height:40px;position: fixed;right:20px;top:20px;z-index: 100;background:black;border: 1px solid white;border-radius: 50%">
- <img src="./video/yinyue.png" style="width: 100%;height: 100%" alt="">
- <audio loop muted src="./video/bg.mp3" id="mediaId" autoplay="autoplay" preload=""></audio>
- </div>
- <div class="main" id="show">
- <div data-reactroot="">
- <div class="broccoli_cmp_app">
- <div class="cmp-main">
- <div class="wrap-dialog" id="parent">
- <img src="./video/main_bg.png" alt=""
- style="position:fixed;top:0;left:0;width:100%;height:100%;z-index: 0">
- <div style="position: fixed;bottom: 1.2rem;left: 1.3rem;width:1rem;text-align: center"
- id="shou">
- <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;
- justify-content: center;
- align-items: center;">
- <div
- style="border:0.01rem solid grey;width: 0.3rem ;height :0.3rem;border-radius: 50%;">
- </div>
- </div>
- <img src="./video/shou.png" alt="" id="shouTime"
- style="width: 0.5rem;position: relative;z-index:1">
- <p style="text-align:center;font-size: 0.14rem;margin-top: 10px">点屏幕出现剧情</p>
- </div>
- <ul class="list-dialog" style="position:relative;z-index:1">
- <!-- <li class="item-scence-tips">
- <div style="background-color: rgba(24, 72, 121, 0.2); color: rgb(51, 51, 51);">金銮殿中
- </div>
- </li> -->
- <li class="item-scence-img">
- <div><img src="./video/top.png"></div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="share"
- style="width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;top: 0;z-index: 10;display:none">
- <img src="./video/tanchuang.png" alt="" style="width:100%">
- <div style="width: 2rem;
- height: 0.5rem;
- position: absolute;
- top: 5rem;
- left: 0.8rem;z-index:10" id="btn"></div>
- </div>
- </div>
- <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
- <script type="text/javascript" src="./jquery.min.js"></script>
- <script src="./list.json"></script>
- <script type="text/javascript">
- var viewHeight = document.documentElement.clientHeight;
- var check = true
- var count = 0
- function videoPlay() {
- document.getElementById("mediaId").play()
- document.getElementById("mediaId").muted = false
- }
- var x = document.getElementById("mediaId");
- $(function () {
- $("body").on("click", "#audio-btn", function () {
- $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
- $(this).toggleClass("audio-rotate");
- //控制背景音乐 播放或暂停
- if ($(this).hasClass("rotate")) {
- x.pause();
- } else {
- x.play();
- x.muted = false
- }
- })
- });
- if (check) {
- $("#show").on("touchend", function () {
- var list, name
- list = listJson.list
- name = listJson.name
- // check = false
- var $li1
- // var name = {
- // left: "陆浩成",
- // right: '姜蓝欣'
- // }
- $('#shou').hide()
- for (var key in list[count]) {
- if (key == 'left') {
- $li1 = $(` <li class="left">
- <div class="avatar" style="background-image: url(./video/left.png);">
- </div>
- <div class="content-box">
- <p class="name">${name['left']}</p>
- <p class="content"
- style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"><em
- style="border-right-color: rgb(255, 255, 255);"></em>
- ${list[count][key]}
- </p>
- </div>
- </li>`)
- } else if (key == 'right') {
- $li1 = $(` <li class="right">
- <div class="avatar" style="background-image: url(./video/right.png);">
- </div>
- <div class="content-box">
- <p class="name">${name['right']}</p>
- <p class="content"
- style="background-color: rgba(188,15,19); color: rgb(255, 255, 255);"><em
- style="border-left-color: rgba(188,15,19);"></em>
- ${list[count][key]}
- </p>
- </div>
- </li> `)
- }
- }
- $("ul").append($li1);
- if (
- viewHeight - $('ul').height() < 200) {
- $('html,body').animate({
- scrollTop: Math.abs(viewHeight - $('ul').height()) + 300
- }, 300);
- }
- count++
- if (count == list.length + 1) {
- $('#share').show()
- return
- }
- })
- }
- setTimeout(function () {
- check = true
- }, 1000);
- $('#btn').on('touchstart', function (e) {
- e.preventDefault()
- e.stopPropagation()
- window.playableSDK.sendEvent('clickDownloadBar', {
- section: 'section2',
- area: 'area3'
- });
- window.playableSDK.openAppStore()
- })
- </script>
- </body>
- </html>
|