|
|
@@ -0,0 +1,252 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <title>云手机</title>
|
|
|
+ <!-- 告诉 IE 浏览器使用最新的渲染引擎（Edge 模式）来渲染页面，而不是使用旧的兼容模式。这可以确保页面在 IE 浏览器中以最佳方式显示。 -->
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
+ <!-- 强制页面在移动设备上以竖屏模式显示 portrait 表示页面只能以竖屏模式显示 -->
|
|
|
+ <meta name="x5-orientation" content="portrait" />
|
|
|
+ <!-- 与 x5-orientation 类似，用于指定页面的方向 -->
|
|
|
+ <meta name="screen-orientation" content="portrait" />
|
|
|
+ <!-- 控制页面在移动设备上的视口（viewport）行为 -->
|
|
|
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover" />
|
|
|
+ <!-- 允许网页应用以全屏模式运行 当用户将网页添加到主屏幕后，点击图标打开时，页面会以全屏模式显示，隐藏浏览器的地址栏和导航栏。适用于将网页应用伪装成原生应用的场景-->
|
|
|
+ <meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
+ <!-- 控制页面在 iOS 设备上的全屏模式和状态栏颜色 -->
|
|
|
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
|
+ <!-- 禁止自动识别电话号码和邮箱地址 -->
|
|
|
+ <meta name="format-detection" content="telphone=no, email=no" />
|
|
|
+ <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
|
|
|
+ <!-- 启用360浏览器的极速模?(webkit) -->
|
|
|
+ <meta name="renderer" content="webkit" />
|
|
|
+ <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑? -->
|
|
|
+ <meta name="HandheldFriendly" content="true" />
|
|
|
+ <!-- 微软的老式浏览? -->
|
|
|
+ <meta name="MobileOptimized" content="320" />
|
|
|
+ <!-- 不能旋转，问题出在这 -->
|
|
|
+ <!-- UC强制全屏 -->
|
|
|
+ <meta name="full-screen" content="yes" />
|
|
|
+ <!-- QQ强制全屏 -->
|
|
|
+ <meta name="x5-fullscreen" content="true" />
|
|
|
+ <!-- UC应用模式 -->
|
|
|
+ <meta name="browsermode" content="application" />
|
|
|
+ <!-- QQ应用模式 -->
|
|
|
+ <meta name="x5-page-mode" content="app" />
|
|
|
+ <!-- 禁用 Windows Phone 8 及更高版本中的灰色点击高亮 -->
|
|
|
+ <meta name="msapplication-tap-highlight" content="no" />
|
|
|
+ <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 @mousemove.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="onSphere">
|
|
|
+ <img src="../static/img/xuanfu_icon.png" alt=""
|
|
|
+ @mousedown.prevent="onSphereDown"
|
|
|
+ @mouseup.prevent.stop="onSphereUp"
|
|
|
+ @touchmove.prevent="touchmoveLevitatedSphere"
|
|
|
+ @mousemove.prevent="touchmoveLevitatedSphere"
|
|
|
+ @touchend="touchendLevitatedSphere"
|
|
|
+ @mouseup="touchendLevitatedSphere"
|
|
|
+ @mouseleave="touchendLevitatedSphere">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div align="center" class="layout" :style="{height: height + 'px'}" v-cloak @touchmove.prevent @mousemove.prevent>
|
|
|
+ <!-- 云机位置 -->
|
|
|
+ <div class="layout-view" v-cloak @touchmove.prevent @mousemove.prevent ref="videoRef" id="videoRef" :style="rtcMediaPlayerStyle"></div>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <div class="layout-footer" v-cloak @touchmove.prevent @mousemove.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.prevent="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="./config/js/SDK.min.js"></script>
|
|
|
+<script src="../static/lib/qs.js"></script>
|
|
|
+<script type="module" src="./js/WXtrialInterfaceCopy.js"></script>
|
|
|
+
|
|
|
+</html>
|
t_finder