投屏

1

src/router/index.js

@@ -29,7 +29,15 @@ let defaultRouter = [
     meta: {
       descrition: '页面查看',
       weight: 1 // 页面权重
-    }}
+    }},
+    {
+      path: '/guide',
+      name: 'guide',
+      component: () => import(/* webpackChunkName:'CallNames'*/'@/views/rules/guide'),
+      meta: {
+        descrition: '投屏引导',
+        weight: 1 // 页面权重
+      }}
 ]
 
 defaultRouter = defaultRouter.concat(TeacherRouter)

src/views/rules/components/androidGuide.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="wrap">
+    <div class="topTitle">
+      <div class="dot"></div>
+      <h2>
+        通过镜像方式显示手机或平板上的内容
+        <div class="little"></div>
+      </h2>
+    </div>
+    <section>
+      <p>1.将您的手机或平板连接到您智能电视机所在的同一无线局域网。</p>
+      <p>2.打开“设置”页面，点击“更多连接”按钮：</p>
+      <img
+        v-if="brand == 'xiaomi'"
+        class="img"
+        src="../../../assets/images/guide/7.png"
+        width="100%"
+        alt=""
+      />
+      <img
+        v-else-if="brand == 'meizu'"
+        class="img"
+        src="../../../assets/images/guide/4.png"
+        width="100%"
+        alt=""
+      />
+      <img
+        v-else
+        class="img"
+        src="../../../assets/images/guide/1.png"
+        width="100%"
+        alt=""
+      />
+      <p>3.点击“手机投屏”：</p>
+      <img
+        v-if="brand == 'xiaomi'"
+        class="img"
+        src="../../../assets/images/guide/8.png"
+        width="100%"
+        alt=""
+      />
+      <img
+        v-else-if="brand == 'meizu'"
+        class="img"
+        src="../../../assets/images/guide/5.png"
+        width="100%"
+        alt=""
+      />
+      <img
+        v-else
+        class="img"
+        src="../../../assets/images/guide/2.png"
+        width="100%"
+        alt=""
+      />
+      <p>
+        4.打开“无线投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。
+      </p>
+      <img
+        v-if="brand == 'xiaomi'"
+        class="img"
+        src="../../../assets/images/guide/9.png"
+        width="100%"
+        alt=""
+      />
+      <img
+        v-else-if="brand == 'meizu'"
+        class="img"
+        src="../../../assets/images/guide/6.png"
+        width="100%"
+        alt=""
+      />
+      <img
+        v-else
+        class="img"
+        src="../../../assets/images/guide/3.png"
+        width="100%"
+        alt=""
+      />
+    </section>
+    <section>
+      <p class="blod">如果音乐意外停止：</p>
+      <p>
+       如果在这台设备上使用语音助手或进行其他任务，则可能会导致所有音频设备停止播放音乐
+      </p>
+      <p class="blod">如果您看到视频但听不到声音：</p>
+      <p>
+     如果您听不到任何声音，则请确保手机设备和电视机/听筒的音量都已调高，而且没有静音。 
+      </p>
+      <p>
+        请检查响铃/静音开关。如果开关设为静音，您会看到一条橙色的线。切换开关以开启响铃。
+      </p>
+      <p class="blod">如果内容中断或网络卡顿:</p>
+      <p>
+        如果 Wi-Fi
+        信号欠佳或受到附近设备（例如，微波炉或婴儿监视器）的干扰尝试完成以下步骤：
+      </p>
+      <p>移开或关闭其他可能造成干扰的设备。</p>
+      <p>
+        如果您正尝试使用“隔空播放”将内容流化到智能电视，请尝试使用以太网线缆（而不是通过
+        Wi-Fi）将智能电视直接连接到路由器。
+      </p>
+      <p class="blod red">
+        *当您锁定设备、将其置于睡眠模式或切换到其他应用时，“隔空播放”连接可能会中断。
+      </p>
+    </section>
+    <section>
+      <p class="blod">如果“隔空播放”或屏幕镜像在您的设备上无法使用：</p>
+      <p>1.确保您的设备都已开机且彼此距离较近。</p>
+      <p>2.请重新启动您要与“隔空播放”或屏幕镜像配合使用的设备。</p>
+      <p>3.以上方式尝试了仍无法搜到要使用的智能电视:</p>
+      <p class="blod red">将您的设备连接到同一个 Wi-Fi 网络</p>
+      <p>
+        首先需要确认电视与手机是否连接了同一个Wi-Fi
+        ，电视可以插网线，但必须是同一个路由器的，如果不确认，就把电视网线拔了改为连接Wi-Fi
+        。
+      </p>
+      <p class="blod">如果同一个Wi-Fi 也无法搜索到需要投屏的设备：</p>
+      <p>
+        原因1·可能电视本身没有投屏功能（如果以前投屏过，也是可以判断为电视是支持投屏的。）
+      </p>
+      <p>A.是不是智能电视？</p>
+      <p>B.能不能自己安装软件？</p>
+      <p>C.是不是安卓系统？</p>
+      <p>D.能不能连接WiFi？</p>
+      <p>请确认以上四点。一般16年以后买的电视，99%都已经是智能电视了</p>
+    </section>
+    <section>
+      <p class="blod">如果是智能电视或者智能投影仪，但是没有投屏功能怎么办？</p>
+      <p>
+        解决办法：自己安装一个投屏软件进去（幕享、傲软投屏、乐播投屏......）。相当于更新了电视投屏功能。也能解决这个问题。
+      </p>
+      <p>如果是老电视，老投影仪，老机顶盒怎么办？</p>
+      <p>这个也不是没有办法，电视最值钱的就是屏幕了。</p>
+      <p>
+        所以屏幕我们不要浪费了，继续使用，此时我们通过互联网机顶盒，从机顶盒应用商店安装投屏软件，也同样可以
+        进行投屏。
+      </p>
+      <p>a.是不是智能机顶盒？</p>
+      <p>b.能不能自己安装软件？</p>
+      <p>
+        c.是不是安卓系统？买回来之后利用HDMI线连接老电视，再从机顶盒应用商店下载投屏软件，就可以使用投屏了。
+      </p>
+    </section>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      brand: "",
+    };
+  },
+  mounted() {
+    var ua = navigator.userAgent.split("(")[1].split(")")[0];
+    console.log(ua);
+    this.brand = "";
+    var phone = [/MZ/gi, /mi/gi];
+    if (phone[0].test(ua)) {
+      this.brand = "meizu";
+    } else if (phone[1].test(ua)) {
+      brand = "xiaomi";
+    } else {
+      this.brand = "huawei";
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.wrap {
+  box-sizing: border-box;
+  padding: 0.5rem 0.22rem 0.41rem;
+  background-color: #fff;
+  .topTitle {
+    position: relative;
+    h2 {
+      font-weight: bold;
+      color: #00201c;
+      line-height: 0.18rem;
+      font-size: 0.16rem;
+      padding-left: 0.06rem;
+      color: #00201c;
+    }
+  }
+  section {
+    margin-top: 0.3rem;
+    margin-bottom: 0.5rem;
+    p {
+      font-size: 0.13rem;
+      line-height: 0.2rem;
+      margin-bottom: 0.2rem;
+    }
+  }
+  .blod {
+    font-weight: bold;
+  }
+  .red {
+    color: #ff0000;
+  }
+}
+
+.dot {
+  position: absolute;
+  width: 0.1rem;
+  height: 0.17rem;
+  background: #00c2b5;
+  opacity: 0.53;
+  border-radius: 0.01rem;
+  top: -0.07rem;
+  left: 0.001rem;
+}
+.little {
+  display: inline-block;
+  width: 0.04rem;
+  height: 0.04rem;
+  background: #00c2b5;
+  opacity: 0.53;
+  right: 0;
+}
+.img {
+  margin-bottom: 0.2rem;
+}
+</style>

src/views/rules/components/iosGuide.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="wrap">
+    <div class="topTitle">
+      <div class="dot"></div>
+      <h2>
+        通过镜像方式显示 iPhone或iPad上的内容
+        <div class="little"></div>
+      </h2>
+    </div>
+    <section>
+      <p>
+        1.通过镜像方式显示 iPhone或iPad上的内容将您的 iPhone或iPad 连接到您的
+        Apple TV 或兼容“隔空播放 2”的智能电视机所在的同一无线局域网。
+      </p>
+      <p>
+        2.打开“控制中心”：<br />
+        在 iPhone X 或更新机型或者装有 iPadOS 13 或更高版本的 iPad
+        上：从屏幕右上角向下轻扫。<br />
+        在 iPhone 8 或更早机型或者 iOS 11 或更低版本上：从屏幕底部边缘向上轻扫。
+      </p>
+      <p>3.轻点 “屏幕镜像”。（iOS 11 之前版本：AirPlay 镜像）</p>
+      <p>4.从列表中选择您的 Apple TV 或兼容“隔空播放 2”的智能电视机</p>
+      <p>
+        5.如果电视机屏幕上出现“隔空播放”密码，请在 iOS 或 iPadOS
+        设备上输入这个密码。
+      </p>
+      <p>
+        6.要停止镜像您的 iOS 或 iPadOS
+        设备，请打开“控制中心”，轻点“屏幕镜像”，然后轻点“停止镜像”。
+      </p>
+    </section>
+    <div class="topTitle">
+      <h2>iOS 10控制中心图片：</h2>
+    </div>
+    <section>
+      <img src="../../../assets/images/guide/11.png" width="100%" alt="" />
+    </section>
+    <div class="topTitle">
+      <h2>iOS 10之后版本控制中心图片：</h2>
+    </div>
+    <section>
+      <img src="../../../assets/images/guide/10.png" width="100%" alt="" />
+    </section>
+    <section>
+      <p class="blod">如果音乐意外停止：</p>
+      <p>
+        如果在这台设备上使用 Siri
+        或进行其他任务，则可能会导致所有音频设备停止播放音乐
+      </p>
+      <p class="blod">如果您看到视频但听不到声音：</p>
+      <p>
+        如果您听不到任何声音，则请确保 iOS
+        设备和电视机/听筒的音量都已调高，而且没有静音。
+      </p>
+      <p>
+        请检查响铃/静音开关。如果开关设为静音，您会看到一条橙色的线。切换开关以开启响铃。
+      </p>
+      <p class="blod">如果内容中断或网络卡顿:</p>
+      <p>
+        如果 Wi-Fi
+        信号欠佳或受到附近设备（例如，微波炉或婴儿监视器）的干扰尝试完成以下步骤：
+      </p>
+      <p>移开或关闭其他可能造成干扰的设备。</p>
+      <p>
+        如果您正尝试使用“隔空播放”将内容流化到智能电视，请尝试使用以太网线缆（而不是通过
+        Wi-Fi）将智能电视直接连接到路由器。
+      </p>
+      <p class="blod red">
+        *当您锁定设备、将其置于睡眠模式或切换到其他应用时，“隔空播放”连接可能会中断。
+      </p>
+    </section>
+    <section>
+      <p class="blod">如果“隔空播放”或屏幕镜像在您的设备上无法使用：</p>
+      <p>1.确保您的设备都已开机且彼此距离较近。</p>
+      <p>2.请重新启动您要与“隔空播放”或屏幕镜像配合使用的设备。</p>
+      <p>3.以上方式尝试了仍无法搜到要使用的智能电视:</p>
+      <p class="blod red">将您的设备连接到同一个 Wi-Fi 网络</p>
+      <p>
+        首先需要确认电视与手机是否连接了同一个Wi-Fi
+        ，电视可以插网线，但必须是同一个路由器的，如果不确认，就把电视网线拔了改为连接Wi-Fi
+        。
+      </p>
+      <p class="blod">如果同一个Wi-Fi 也无法搜索到需要投屏的设备：</p>
+      <p>
+        原因1·可能电视本身没有投屏功能（如果以前投屏过，也是可以判断为电视是支持投屏的。）
+      </p>
+      <p>A.是不是智能电视？</p>
+      <p>B.能不能自己安装软件？</p>
+      <p>C.是不是安卓系统？</p>
+      <p>D.能不能连接WiFi？</p>
+      <p>请确认以上四点。一般16年以后买的电视，99%都已经是智能电视了</p>
+    </section>
+    <section>
+      <p class="blod">如果是智能电视或者智能投影仪，但是没有投屏功能怎么办？</p>
+      <p>
+        解决办法：自己安装一个投屏软件进去（幕享、傲软投屏、乐播投屏......）。相当于更新了电视投屏功能。也能解决这个问题。
+      </p>
+      <p>如果是老电视，老投影仪，老机顶盒怎么办？</p>
+      <p>这个也不是没有办法，电视最值钱的就是屏幕了。</p>
+      <p>
+        所以屏幕我们不要浪费了，继续使用，此时我们通过互联网机顶盒，从机顶盒应用商店安装投屏软件，也同样可以
+        进行投屏。
+      </p>
+      <p>a.是不是智能机顶盒？</p>
+      <p>b.能不能自己安装软件？</p>
+      <p>
+        c.是不是安卓系统？买回来之后利用HDMI线连接老电视，再从机顶盒应用商店下载投屏软件，就可以使用投屏了。
+      </p>
+    </section>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.wrap {
+  box-sizing: border-box;
+  padding: 0.5rem 0.22rem 0.41rem;
+  background-color: #fff;
+  .topTitle {
+    position: relative;
+    h2 {
+      font-weight: bold;
+      color: #00201c;
+      line-height: 0.18rem;
+      font-size: 0.16rem;
+      padding-left: 0.06rem;
+      color: #00201c;
+    }
+  }
+  section {
+    margin-top: 0.3rem;
+    margin-bottom: 0.5rem;
+    p {
+      font-size: 0.13rem;
+      line-height: 0.2rem;
+      margin-bottom: 0.2rem;
+    }
+  }
+  .blod {
+    font-weight: bold;
+  }
+  .red {
+    color: #ff0000;
+  }
+}
+
+.dot {
+  position: absolute;
+  width: 0.1rem;
+  height: 0.17rem;
+  background: #00c2b5;
+  opacity: 0.53;
+  border-radius: 0.01rem;
+  top: -0.07rem;
+  left: 0.001rem;
+}
+.little {
+    display: inline-block;
+  width: .04rem;
+  height: .04rem;
+  background: #00c2b5;
+  opacity: 0.53;
+  right: 0;
+}
+</style>

src/views/rules/guide.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <androidGuide v-if="client == 'android'"/>
+         <iosGuide v-if="client == 'ios'"/>
+    </div>
+</template>
+<script>
+import { browser }  from '@/common/common'
+import androidGuide from './components/androidGuide.vue'
+import iosGuide from './components/iosGuide.vue'
+export default {
+    components:{
+        androidGuide,iosGuide
+    },
+    data(){
+        return{
+            client:'android'
+        }
+    },
+    mounted(){
+        document.title = '投屏引导'
+        // if(browser().android){
+        //     this.client = 'android'
+        // }else if(browser().iPhone){
+        //      this.client = 'ios'
+        // }else{
+        //     this.client = 'web'
+        // }
+
+        // browser().android || browser().iPhone
+    }
+}
+</script>
+<style lang="less">
+    
+</style>