123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>双子星云手机66</title>
- <link rel="stylesheet" href="./config/css/vant.css">
- <link rel="stylesheet" href="./css/WXtrialInterface.css">
- <!-- <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vConsole/3.12.1/vconsole.min.js"></script> -->
- <!-- <script>
- const vConsole = new VConsole();
- </script> -->
- </head>
- <body @touchmove.prevent>
- <div id="app" v-cloak>
- <!-- 计时卡计时 -->
- <div class="pfi flex timing" v-if="timingVisible" v-cloak>
- <div>{{countdownTime}}</div>
- <img class="wh22" src="../static/img/close.png" alt="" @click="handlecountdownTimeClose" />
- </div>
- <!-- 悬浮框 -->
- <div class="levitated-sphere" :style="levitatedSpherePositionData" v-cloak
- @click="levitatedSphereVisible = true">
- <img src="../static/img/xuanfu_icon.png" alt="" @touchmove.prevent="touchmoveLevitatedSphere"
- @touchend="touchendLevitatedSphere">
- </div>
- <div class="layout" :style="{height: height + 'px'}" v-cloak @touchmove.prevent>
- <!-- 云机位置 -->
- <div class="layout-view" v-cloak @touchmove.prevent>
- <video ref="rtcMediaPlayer" :style="rtcMediaPlayerStyle" width="100%" height="100%" autoplay
- webkit-playsinline="true" playsinline x-webkit-airplay="allow" x5-video-player-type="h5"
- x5-video-player-fullscreen="true" x5-video-orientation="portraint" id="playerVideo"
- class="videoRotate" :controls="false" @touchmove.prevent="(event) => {engine.touchClick(event, 2)}"
- @touchstart.prevent="(event) => {engine.touchClick(event, 0)}"
- @touchend.prevent="touchendRtcMediaPlayer" v-show="isShowVideo">
- 当前浏览器暂不支持、请使用谷歌浏览器或前往双子星客户端使用</video>
- </div>
- <!-- 底部按钮 -->
- <div class="layout-footer" v-cloak @touchmove.prevent>
- <template v-for="item in footerBtn">
- <img :src="item.img" alt="" @click="footerBtnFun(item.key)">
- </template>
- </div>
- <!-- 右侧弹框 -->
- <van-popup v-model="levitatedSphereVisible" position="right" class="levitated-sphere-drawer"
- overlay-class="levitated-sphere-overlay" v-cloak>
- <div class="flex-column">
- <div class="flex-column-container">
- <div>
- <div v-for="item in definitionList" :key="item.key"
- :class="['tc drawer-item mb-15', {active: definitionValue === item.value}]"
- @click.prevent="definitionFun(item.value)">
- {{item.name}}
- </div>
- <div class="tc drawer-item mb-15" @click.prevent="resolutionRatio">
- 分辨率
- </div>
- <div class="tc drawer-item mb-15" @click.prevent="volumeControl(24)">
- 音量 +
- </div>
- <div class="tc drawer-item" @click.prevent="volumeControl(25)">
- 音量 -
- </div>
- </div>
- </div>
- <div class="exit">
- <template v-for="(item, index) in exitList">
- <div :key="item.key" :class="['tc', {'mb-15': index !== exitList.length - 1}, item.key]"
- @click="exitFun(item.key)">
- <img :src="item.img" alt="">
- <div class="drawer-item">
- {{item.name}}
- </div>
- </div>
- </template>
- </div>
- </div>
- </van-popup>
- <!-- 分辨率 -->
- <van-dialog v-model="resolutionRatioVisible" :show-confirm-button="false" class="resolution-ratio-modal"
- v-cloak>
- <div>
- <div>
- <div class="flex-jub resolution-ratio-btn">
- <div @click="resolutionRatioVisible = false">取消</div>
- <div @click="confirmResolution">确定</div>
- </div>
- <div class="resolution-ratio-list">
- <div v-for="(item, index) in resolutionRatioList" :key="item"
- :class="{active: phoneSize.dpi === item.dpi}" @click="phoneSize = item">
- <div class="tc">
- {{item.width}} x {{item.height}}
- </div>
- </div>
- </div>
- </div>
- </div>
- </van-dialog>
- <!-- 粘贴板 -->
- <van-dialog v-model="pasteVersionVisible" :show-confirm-button="false" class="paste-version-modal" v-cloak>
- <template v-if="pasteVersionList.length">
- <div class="tc paste-version-title pre">
- <span class="pab">粘贴版</span>
- <span class="pab paste-version-clear" @click="deletePasteVersion()">
- 清空
- </span>
- </div>
- <div class="paste-version-list">
- <div v-for="(item,index) in pasteVersionList" :key="item"
- :class="[{'mb-5': index!==pasteVersionList.length - 1}]">
- <van-swipe-cell>
- <div :class="`copy-value-${index}, ellipsis`" @click="copyPasteVersiontext">
- {{item.content}}
- </div>
- <template #right>
- <div class="paste-version-delete" @click="deletePasteVersion(item.id)">
- 删除
- </div>
- </template>
- </van-swipe-cell>
- </div>
- </div>
- </template>
- <template v-else>
- <div class="paste-version-empty flex-center-all h100">
- <div>
- <img src="./img/jianqieban_pic@2x.png" alt="">
- <div class="tc">
- 剪贴板为空
- </div>
- </div>
- </div>
- </template>
- <img class="pab paste-version-close" src="./img/guanbi_icon@2x.png" alt=""
- @click="pasteVersionVisible = false" />
- </van-dialog>
- <!-- 增加复制粘贴板 -->
- <van-dialog v-model="copyTextVisible" class="copy-text-modal" confirm-button-text="确定" show-cancel-button
- confirm-button-color="#3cc51f" v-cloak :before-close="beforeCloseCopy">
- <div class="tc">
- 读取剪贴板失败
- </div>
- <div>
- <van-field v-model="copyTextValue" placeholder="请输入复制到剪切板的内容" />
- </div>
- </van-dialog>
- <!-- 计费规则 -->
- <van-dialog v-model="billingRulesVisible" :show-confirm-button="false" class="billing-rules-modal" v-cloak>
- <div class="tc">
- <img class="billing-rules-img" src="./img/countdown.png" />
- </div>
- <div class="tc billing-rules-title">
- 计费规则
- </div>
- <div class="tc">进入云机开始计时,点击退出并下机停止计时。点击退出云机仍处于计时状态。</div>
- <div class="tc billing-rules-tips">云机时长剩余:<span class="billing-rules-time">{{countdownTime}}</span>
- </div>
- <div class="billing-rules-btn" @click="getRecommend">我知道了</div>
- </van-dialog>
- <!-- 应用推荐 -->
- <van-dialog v-model="applyRecommendVisible" :show-confirm-button="false" class="apply-recommend-modal"
- v-cloak>
- <div>
- <div class="tc apply-recommend-title">
- 应用推荐
- </div>
- <div class="apply-recommend-list">
- <div v-for="(item, index) in recommendList" :key="item.id"
- :class="['flex w100', {'mt-16': index !== 0}]">
- <div class="left flex-align-c">
- <img :src="item.imageUrl" alt="">
- <div>
- <div class="title ellipsis">{{item.filename}}</div>
- <div class="download-num">有{{item.installNum}}个人下载</div>
- </div>
- </div>
- <div class="right flex-align-c" @click="downAndInstallApk(item)">
- <div>
- 下载
- </div>
- </div>
- </div>
- </div>
- <div class="apply-recommend-btn tc" @click="getRecommend">
- 换一批
- </div>
- </div>
- <img class="apply-recommend-close pab" src="./img/close.png" alt=""
- @click="applyRecommendVisible = false" />
- </van-dialog>
- <!-- 超过指定触碰时间的弹窗提示 -->
- <van-dialog v-model="noOperationSetTimeoutTimeVisible" title="提示" show-cancel-button
- message="由于您长时间未操作,将自动断开视频链接(不影响云手机内应用运行)" :confirm-button-text="confirmButtonText"
- confirm-button-color="#3cc51f" cancel-button-text="继续操作" @cancel="noOperationSetTimeout('cancel')"
- @confirm="noOperationSetTimeout('cancel'), exit(), noOperationSetTimeoutTimeVisible = false" v-cloak>
- </van-dialog>
- </div>
- </div>
- </body>
- <script src="./config/js/jweixin.js"></script>
- <script src="./config/js/clipboard.js"></script>
- <script type="text/javascript" src="../static/js/uni.webview.1.5.2.js"></script>
- <script src="./config/js/vue.js"></script>
- <script src="./config/js/vant.js"></script>
- <script src="./config/js/axios.js"></script>
- <script src="./config/js/rtcEngine.min.js"></script>
- <script src="../static/lib/qs.js"></script>
- <script type="module" src="./js/WXtrialInterface.js"></script>
- </html>
|