投屏

src/components/o-guide/guide/components/andoird-guide.module.less

@@ -0,0 +1,79 @@
+.topTitle {
+  position: relative;
+  h2 {
+    font-weight: bold;
+    color: #fff;
+    line-height: 18px;
+    font-size: 17px;
+    padding-left: 22px;
+    color: #fff;
+    position: relative;
+    z-index: 20;
+  }
+}
+.wrap {
+  box-sizing: border-box;
+  padding: 37px 0;
+  background-color: transparent;
+  color: #fff;
+
+  .wrapInfo {
+    padding: 0 22px;
+    section {
+      margin-top: 30px;
+      margin-bottom: 50px;
+      .bigP {
+        font-weight: bold;
+        color: #fff;
+        font-size: 16px;
+        line-height: 20px;
+      }
+      p {
+        font-size: 13px;
+        line-height: 20px;
+        margin-bottom: 20px;
+      }
+    }
+    h3 {
+      font-weight: bold;
+      color: #fff;
+      font-size: 16px;
+      line-height: 20px;
+    }
+    .blod {
+      font-weight: bold;
+    }
+    .red {
+      color: #ff0000;
+    }
+  }
+}
+
+.dot {
+  position: absolute;
+  width: 10px;
+  height: 17px;
+  background: #00c2b5;
+  opacity: 0.53;
+  border-radius: 1px;
+  top: -7px;
+  left: 0;
+}
+.little {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  background: #00c2b5;
+  opacity: 0.53;
+  right: 0;
+}
+.imgWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  .img {
+    margin-bottom: 20px;
+    width: 190px;
+  }
+}

src/components/o-guide/guide/components/android-guide.tsx

@@ -0,0 +1,153 @@
+import { defineComponent } from 'vue'
+import { getImage } from '../images'
+import styles from './andoird-guide.module.less'
+
+export const getAssetsHomeFile = getImage
+
+const infoMsg = {
+  meizu: {
+    img1: getAssetsHomeFile('4.png'),
+    img2: getAssetsHomeFile('5.png'),
+    img3: getAssetsHomeFile('6.png'),
+    title1: '打开“设置”页面，点击“更多连接方式”按钮：',
+    title2: '点击“投射屏幕”',
+    title3: '打开“投射屏幕”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
+  },
+  xiaomi: {
+    img1: getAssetsHomeFile('7.png'),
+    img2: getAssetsHomeFile('8.png'),
+    img3: getAssetsHomeFile('9.png'),
+    title1: '打开“设置”页面，点击“连接与共享”按钮：',
+    title2: '点击“投屏”：',
+    title3: '打开“打开投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
+  },
+  vivo: {
+    img1: getAssetsHomeFile('12.png'),
+    img2: getAssetsHomeFile('13.png'),
+    img3: getAssetsHomeFile('14.png'),
+    title1: '打开“设置”页面，点击“其他网络与连接”按钮：',
+    title2: '点击“手机投屏”：',
+    title3: '打开“手机投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
+  },
+  huawei: {
+    img1: getAssetsHomeFile('1.png'),
+    img2: getAssetsHomeFile('2.png'),
+    img3: getAssetsHomeFile('3.png'),
+    title1: '打开“设置”页面，点击“更多连接”按钮：',
+    title2: '点击“手机投屏”：',
+    title3: '打开“无线投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
+  }
+}
+export default defineComponent({
+  name: 'adnroid-guide',
+  data() {
+    return {
+      brand: 'huawei'
+    }
+  },
+  mounted() {
+    var ua = navigator.userAgent.split('(')[1].split(')')[0]
+    this.brand = ''
+    var phone = [/MZ/gi, /mi/gi, /vivo/gi]
+    if (phone[0].test(ua)) {
+      this.brand = 'meizu'
+    } else if (phone[1].test(ua)) {
+      this.brand = 'xiaomi'
+    } else if (phone[2].test(ua)) {
+      this.brand = 'vivo'
+    } else {
+      this.brand = 'huawei'
+    }
+  },
+  render() {
+    return (
+      <div class={styles.wrap}>
+        <div class={styles.topTitle}>
+          <h2>通过镜像方式显示手机或平板上的内容</h2>
+        </div>
+        <div class={styles.wrapInfo}>
+          <section>
+            <img style={{ width: '100%', marginBottom: '20px' }} src={getAssetsHomeFile('guide.png')} />
+            <h3>第1步</h3>
+            <p>将您的手机或平板连接到您智能电视机所在的同一无线局域网。</p>
+            <h3>第2步</h3>
+            <p>{infoMsg[this.brand]['title1']}</p>
+            <div class={styles.imgWrap}>
+              <img class={styles.img} src={infoMsg[this.brand]['img1']} alt="" />
+            </div>
+
+            <h3>第3步</h3>
+            <p>{infoMsg[this.brand]['title2']}</p>
+            <div class={styles.imgWrap}>
+              <img class={styles.img} src={infoMsg[this.brand]['img2']} alt="" />
+            </div>
+
+            <h3>第4步</h3>
+            <p>{infoMsg[this.brand]['title3']}</p>
+            <div class={styles.imgWrap}>
+              <img class={styles.img} src={infoMsg[this.brand]['img3']} alt="" />
+            </div>
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>如果音乐意外停止：</p>
+            <p>如果在这台设备上使用语音助手或进行其他任务，则可能会导致所有音频设备停止播放音乐</p>
+            <p class={[styles.blod, styles.bigP]}>如果您看到视频但听不到声音：</p>
+            <p>如果您听不到任何声音，则请确保手机设备和电视机/听筒的音量都已调高，而且没有静音。</p>
+            <p>请检查响铃/静音开关。如果开关设为静音，您会看到一条橙色的线。切换开关以开启响铃。</p>
+            <p class={[styles.blod, styles.bigP]}>如果内容中断或网络卡顿:</p>
+            <p>
+              如果 Wi-Fi 信号欠佳或受到附近设备（例如，微波炉或婴儿监视器）的干扰尝试完成以下步骤：
+            </p>
+            <p>移开或关闭其他可能造成干扰的设备。</p>
+            <p>
+              如果您正尝试使用“隔空播放”将内容流化到智能电视，请尝试使用以太网线缆（而不是通过
+              Wi-Fi）将智能电视直接连接到路由器。
+            </p>
+            <p class={(styles.blod, styles.red)}>
+              *当您锁定设备、将其置于睡眠模式或切换到其他应用时，“隔空播放”连接可能会中断。
+            </p>
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>如果“隔空播放”或屏幕镜像在您的设备上无法使用：</p>
+            <p>1.确保您的设备都已开机且彼此距离较近。</p>
+            <p>2.请重新启动您要与“隔空播放”或屏幕镜像配合使用的设备。</p>
+            <p>3.以上方式尝试了仍无法搜到要使用的智能电视:</p>
+            <p class={(styles.blod, styles.red)}>将您的设备连接到同一个 Wi-Fi 网络</p>
+            <p>
+              首先需要确认电视与手机是否连接了同一个Wi-Fi
+              ，电视可以插网线，但必须是同一个路由器的，如果不确认，就把电视网线拔了改为连接Wi-Fi 。
+            </p>
+            <p class={[styles.blod, styles.bigP]}>如果同一个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={[styles.blod, styles.bigP]}>
+              如果是智能电视或者智能投影仪，但是没有投屏功能怎么办？
+            </p>
+            <p>
+              解决办法：自己安装一个投屏软件进去（幕享、傲软投屏、乐播投屏......）。相当于更新了电视投屏功能。也能解决这个问题。
+            </p>
+            <p>如果是老电视，老投影仪，老机顶盒怎么办？</p>
+            <p>这个也不是没有办法，电视最值钱的就是屏幕了。</p>
+            <p>
+              所以屏幕我们不要浪费了，继续使用，此时我们通过互联网机顶盒，从机顶盒应用商店安装投屏软件，也同样可以
+              进行投屏。
+            </p>
+            <p>a.是不是智能机顶盒？</p>
+            <p>b.能不能自己安装软件？</p>
+            <p>
+              c.是不是安卓系统？买回来之后利用HDMI线连接老电视，再从机顶盒应用商店下载投屏软件，就可以使用投屏了。
+            </p>
+          </section>
+        </div>
+      </div>
+    )
+  }
+})

src/components/o-guide/guide/components/ios-guide.module.less

@@ -0,0 +1,84 @@
+.marginB33 {
+  margin-bottom: 33px;
+  h2 {
+    padding-left: 0 !important;
+  }
+}
+.wrap {
+  box-sizing: border-box;
+  padding: 37px 0;
+  background-color: transparent;
+  color: #fff;
+  .topTitle {
+    position: relative;
+    h2 {
+      font-weight: bold;
+      color: #fff;
+      line-height: 18px;
+      font-size: 17px;
+      padding-left: 22px;
+      color: #fff;
+      position: relative;
+      z-index: 20;
+    }
+  }
+  .wrapInfo {
+    padding: 0 22px;
+    section {
+      // margin-top: 0.3rem;
+      margin-bottom: 45px;
+      .bigP {
+        font-weight: bold;
+        color: #fff;
+        font-size: 16px;
+        line-height: 20px;
+      }
+      p {
+        font-size: 13px;
+        line-height: 20px;
+        margin-bottom: 20px;
+      }
+    }
+    h3 {
+      font-weight: bold;
+      color: #fff;
+      font-size: 16px;
+      line-height: 20px;
+    }
+    .blod {
+      font-weight: bold;
+    }
+    .red {
+      color: #ff0000;
+    }
+  }
+}
+
+.dot {
+  position: absolute;
+  width: 10px;
+  height: 17px;
+  background: #00c2b5;
+  opacity: 0.53;
+  border-radius: 1px;
+  top: -7px;
+  left: 0;
+}
+.little {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  background: #00c2b5;
+  opacity: 0.53;
+  right: 0;
+}
+.imgWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  .img {
+    margin-bottom: 20px;
+    width: 190px;
+  }
+}

src/components/o-guide/guide/components/ios-guide.tsx

@@ -0,0 +1,119 @@
+import { defineComponent } from 'vue'
+import { getImage } from '../images'
+import styles from './ios-guide.module.less'
+
+export const getAssetsHomeFile = getImage
+
+export default defineComponent({
+  name: 'ios-guide',
+  render() {
+    return (
+      <div class={styles.wrap}>
+        <div class={styles.topTitle}>
+          <h2>通过镜像方式显示 iPhone或iPad上的内容</h2>
+        </div>
+
+        <div class={styles.wrapInfo}>
+          <img style={{ width: '100%', margin: '20px 0' }} src={getAssetsHomeFile('guide.png')} />
+          <section>
+            <h3>第1步</h3>
+            <p>
+              通过镜像方式显示 iPhone或iPad上的内容将您的 iPhone或iPad 连接到您的 Apple TV
+              或兼容“隔空播放 2”的智能电视机所在的同一无线局域网。
+            </p>
+            <h3>第2步</h3>
+            <p>
+              打开“控制中心”：
+              <br />
+              在 iPhone X 或更新机型或者装有 iPadOS 13 或更高版本的 iPad 上：从屏幕右上角向下轻扫。
+              <br />在 iPhone 8 或更早机型或者 iOS 11 或更低版本上：从屏幕底部边缘向上轻扫。
+            </p>
+            <h3>第3步</h3>
+            <p>轻点 “屏幕镜像”。（iOS 11 之前版本：AirPlay 镜像）</p>
+            <h3>第4步</h3>
+            <p>从列表中选择您的 Apple TV 或兼容“隔空播放 2”的智能电视机</p>
+            <h3>第5步</h3>
+            <p>如果电视机屏幕上出现“隔空播放”密码，请在 iOS 或 iPadOS 设备上输入这个密码。</p>
+            <h3>第6步</h3>
+            <p>
+              要停止镜像您的 iOS 或 iPadOS
+              设备，请打开“控制中心”，轻点“屏幕镜像”，然后轻点“停止镜像”。
+            </p>
+          </section>
+          <div class={[styles.topTitle, styles.marginB33]}>
+            <h2>iOS 10控制中心图片：</h2>
+          </div>
+          <section>
+            <img src={getAssetsHomeFile('11.png')} style={{ width: '100%' }} alt="" />
+          </section>
+          <div class={[styles.topTitle, styles.marginB33]}>
+            <h2>iOS 10之后版本控制中心图片：</h2>
+          </div>
+          <section>
+            <img src={getAssetsHomeFile('10.png')} style={{ width: '100%' }} alt="" />
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>如果音乐意外停止：</p>
+            <p>如果在这台设备上使用 Siri 或进行其他任务，则可能会导致所有音频设备停止播放音乐</p>
+            <p class={[styles.blod, styles.bigP]}>如果您看到视频但听不到声音：</p>
+            <p>
+              如果您听不到任何声音，则请确保 iOS 设备和电视机/听筒的音量都已调高，而且没有静音。
+            </p>
+            <p>请检查响铃/静音开关。如果开关设为静音，您会看到一条橙色的线。切换开关以开启响铃。</p>
+            <p class={[styles.blod, styles.bigP]}>如果内容中断或网络卡顿:</p>
+            <p>
+              如果 Wi-Fi 信号欠佳或受到附近设备（例如，微波炉或婴儿监视器）的干扰尝试完成以下步骤：
+            </p>
+            <p>移开或关闭其他可能造成干扰的设备。</p>
+            <p>
+              如果您正尝试使用“隔空播放”将内容流化到智能电视，请尝试使用以太网线缆（而不是通过
+              Wi-Fi）将智能电视直接连接到路由器。
+            </p>
+            <p class={[styles.blod, styles.red]}>
+              *当您锁定设备、将其置于睡眠模式或切换到其他应用时，“隔空播放”连接可能会中断。
+            </p>
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>如果“隔空播放”或屏幕镜像在您的设备上无法使用：</p>
+            <p>1.确保您的设备都已开机且彼此距离较近。</p>
+            <p>2.请重新启动您要与“隔空播放”或屏幕镜像配合使用的设备。</p>
+            <p>3.以上方式尝试了仍无法搜到要使用的智能电视:</p>
+            <p class={[styles.blod, styles.red]}>将您的设备连接到同一个 Wi-Fi 网络</p>
+            <p>
+              首先需要确认电视与手机是否连接了同一个Wi-Fi
+              ，电视可以插网线，但必须是同一个路由器的，如果不确认，就把电视网线拔了改为连接Wi-Fi 。
+            </p>
+            <p class={[styles.blod, styles.bigP]}>如果同一个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={[styles.blod, styles.bigP]}>
+              如果是智能电视或者智能投影仪，但是没有投屏功能怎么办？
+            </p>
+            <p>
+              解决办法：自己安装一个投屏软件进去（幕享、傲软投屏、乐播投屏......）。相当于更新了电视投屏功能。也能解决这个问题。
+            </p>
+            <p>如果是老电视，老投影仪，老机顶盒怎么办？</p>
+            <p>这个也不是没有办法，电视最值钱的就是屏幕了。</p>
+            <p>
+              所以屏幕我们不要浪费了，继续使用，此时我们通过互联网机顶盒，从机顶盒应用商店安装投屏软件，也同样可以
+              进行投屏。
+            </p>
+            <p>a.是不是智能机顶盒？</p>
+            <p>b.能不能自己安装软件？</p>
+            <p>
+              c.是不是安卓系统？买回来之后利用HDMI线连接老电视，再从机顶盒应用商店下载投屏软件，就可以使用投屏了。
+            </p>
+          </section>
+        </div>
+      </div>
+    )
+  }
+})

src/components/o-guide/guide/guide.tsx

@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue'
+import IosGuide from './components/ios-guide'
+import AndroidGuide from './components/android-guide'
+import { browser } from '@/helpers/utils'
+
+export default defineComponent({
+  name: 'guide',
+  data() {
+    return {
+      client: 'ios'
+    }
+  },
+  render() {
+    const browserInfo = browser()
+    return <>{!browserInfo.ios ? <IosGuide /> : <AndroidGuide />}</>
+  }
+})

src/components/o-guide/guide/images/index.ts

@@ -0,0 +1,5 @@
+const modules = import.meta.globEager(`../images/**`)
+export const getImage = (name: string) => {
+    // console.log("🚀 ~ modules", modules[`../images/${name}`]?.default)
+    return modules[`../images/${name}`]?.default || ''
+}

src/components/o-guide/index.module.less

@@ -0,0 +1,43 @@
+.guideWrap {
+  width: 40vw;
+  height: 100vh;
+  :global {
+    .van-tabs__nav {
+      background-color: transparent;
+      .van-tab {
+        color: #fff;
+        font-size: 16px;
+      }
+    }
+    .van-tab__panel {
+      height: calc(100vh - var(--van-tabs-line-height));
+      overflow: hidden;
+      overflow-y: auto;
+      box-sizing: border-box;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      & > div {
+        // background-color: transparent;
+      }
+    }
+  }
+  .content {
+    padding: 24px 24px 0 24px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 20px;
+    box-sizing: border-box;
+
+    img {
+      width: 100%;
+    }
+    .item {
+      margin-bottom: 24px;
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+}

src/components/o-guide/index.tsx

@@ -0,0 +1,58 @@
+import { Tab, Tabs } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import icon1 from './image/1.png'
+import icon2 from './image/2.png'
+import icon3 from './image/3.png'
+import Guide from './guide/guide'
+
+export default defineComponent({
+  name: 'OGuide',
+  setup(props, ctx) {
+    return () => (
+      <div class={styles.guideWrap}>
+        <Tabs animated swipeable>
+          <Tab title="电视投屏" name="tv">
+            <Guide class={styles.tv} />
+          </Tab>
+          <Tab title="电脑投屏" name="computer">
+            <div class={styles.content}>
+              <div style={{ fontSize: '16px', whiteSpace: 'nowrap', marginBottom: '20px' }}>
+                通过爱思投屏助手将手机投屏至电脑
+              </div>
+              <div class={styles.item}>
+                <div class={styles.title}>第1步</div>
+                <div>在需要投屏的电脑上打开以下链接</div>
+                <div style={{ color: '#33BDFF' }}>http://pc.i4.cn/pro_screen.html</div>
+              </div>
+
+              <div class={styles.item}>
+                <div class={styles.title}>第2步</div>
+                <div>下载并安装【爱思投屏助手】</div>
+                <div style={{ padding: '20px 0', textAlign: 'center' }}>
+                  <img src={icon1} />
+                </div>
+              </div>
+
+              <div class={styles.item}>
+                <div class={styles.title}>第3步</div>
+                <div>打开【爱思投屏助手】</div>
+                <div style={{ padding: '20px 0', textAlign: 'center' }}>
+                  <img src={icon2} />
+                </div>
+              </div>
+
+              <div class={styles.item}>
+                <div class={styles.title}>第4步</div>
+                <div>使用数据线将手机与电脑连接，出现投屏准备就绪提示后，点击【开始投屏】</div>
+                <div style={{ padding: '20px 0', textAlign: 'center' }}>
+                  <img style={{ width: '50%' }} src={icon3} />
+                </div>
+              </div>
+            </div>
+          </Tab>
+        </Tabs>
+      </div>
+    )
+  }
+})

src/views/coursewarePlay/index.module.less

@@ -96,20 +96,33 @@
     object-fit: contain;
   }
 }
+.fullBtn {
+  width: 38px;
+  height: 55px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  justify-content: space-evenly;
+  overflow: hidden;
+  white-space: nowrap;
+  &:active {
+    background: rgba(255, 255, 255, 0.2);
+  }
+}
 .rightFixedBtns {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 12px;
   z-index: 10;
-  .point {
-    margin-top: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  .btnsWrap {
+    background: rgba(51, 51, 51, 0.4);
+    border-radius: 6px;
+    overflow: hidden;
   }
-  .point + .fullBtn {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  .btnsBottom {
+    margin-top: 10px;
   }
 }
 .leftFixedBtns {
@@ -122,22 +135,7 @@
     margin-bottom: 8px;
   }
 }
-.fullBtn {
-  width: 38px;
-  height: 55px;
-  background: rgba(51, 51, 51, 0.4);
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #fff;
-  justify-content: space-evenly;
-  overflow: hidden;
-  white-space: nowrap;
-  &:active {
-    opacity: 0.8;
-  }
-}
+
 .bottomFixedContainer {
   position: absolute;
   left: 0;

src/views/coursewarePlay/index.tsx

@@ -30,6 +30,7 @@ import { listenerMessage, postMessage, promisefiyPostMessage } from '@/helpers/n
 import MusicScore from './component/musicScore'
 import iconMenu from './image/icon-menu.svg'
 import iconDian from './image/icon-dian.svg'
+import iconTouping from './image/icon-touping.svg'
 import iconPoint from './image/icon-point.svg'
 import iconLoop from './image/icon-loop.svg'
 import iconLoopActive from './image/icon-loop-active.svg'
@@ -52,6 +53,7 @@ import 'swiper/less/effect-fade'
 import 'swiper/less/effect-flip'
 import 'swiper/less/effect-creative'
 import { handleCheckVip } from '../hook/useFee'
+import OGuide from '@/components/o-guide'
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -302,8 +304,7 @@ export default defineComponent({
     const swiperDom = ref()
     onMounted(() => {
       const hasVip = handleCheckVip()
-      console.error("🚀 ~ hasVip", hasVip)
-      if (!hasVip) return;
+      if (!hasVip) return
       getDetail()
       getCourseSchedule()
       window.addEventListener('message', iframeHandle)
@@ -329,7 +330,8 @@ export default defineComponent({
       tabActive: '',
       tabName: '',
       itemActive: '',
-      itemName: ''
+      itemName: '',
+      guideOpen: false
     })
 
     /**停止所有的播放 */
@@ -459,13 +461,6 @@ export default defineComponent({
       // console.log(m)
       if (popupData.activeIndex != data.itemList.length - 1) {
         swiperDom.value.slideNext(800)
-
-        // setTimeout(() => {
-        // swipeRef.value?.next()
-        // ;(document.querySelector('.swiper-button-next') as any)?.click()
-        // swiperDom.value.navigation.nextEl.click()
-        // swiperDom.value.slideNext(800)
-        // }, 300)
       }
     }
 
@@ -551,24 +546,8 @@ export default defineComponent({
     const handlePreAndNext = (type: string) => {
       setTimeout(() => {
         if (type === 'up') {
-          // swiperRef.value?.allowSlidePrev()
-
-          // ;(document.querySelector('.swiper-button-prev') as any)?.click()
-          // swiperDom.value.navigation.prevEl.click()
           swiperDom.value.slidePrev(800)
         } else {
-          // swiperRef.value?.allowSlideNext()
-
-          // ;(document.querySelector('.swiper-button-next') as any)?.click()
-          // swiperDom.value.navigation.nextEl.click()
-          // const nextKonwledgeId = data.itemList[popupData.activeIndex + 1].knowledgePointId
-          // console.log(nextKonwledgeId === popupData.tabActive)
-          // if (nextKonwledgeId === popupData.tabActive) {
-          //   swiperType.value = effects[2]
-          // } else {
-          //   swiperType.value = effects[3]
-          // }
-
           swiperDom.value.slideNext(800)
         }
       }, 400)
@@ -577,16 +556,6 @@ export default defineComponent({
     return () => (
       <div class={styles.playContent}>
         <div class={styles.coursewarePlay} style={{ width: parentContainer.width }}>
-          {/* <swiper :modules="modules" :pagination="{ clickable: true }">
-    <swiper-slide>Slide 1</swiper-slide>
-    <swiper-slide>Slide 2</swiper-slide>
-    <swiper-slide>Slide 3</swiper-slide>
-  </swiper> */}
-
-          {/* 
-            知识点 翻
-            素材滑
-          */}
           <Swiper
             style={{ height: '100%' }}
             effect="creative"
@@ -596,11 +565,9 @@ export default defineComponent({
             navigation
             allowTouchMove={false}
             onSwiper={(swiper: any) => {
-              // console.log(swiper, 'index')
               swiperDom.value = swiper
             }}
             onSlideChange={(swiper: any) => {
-              // console.log(swiper, 'index')
               handleSwipeChange(swiper.activeIndex)
             }}
           >
@@ -608,8 +575,6 @@ export default defineComponent({
               return (
                 <SwiperSlide class={styles.swipeItem}>
                   <div
-                    // class={[styles.itemDiv]}
-
                     class={[styles.itemDiv]}
                     onClick={() => {
                       clearTimeout(activeData.timer)
@@ -631,7 +596,6 @@ export default defineComponent({
                           playsinline="false"
                           muted={m.muted}
                           preload="auto"
-                          // class="player"
                           data-vid={m.id}
                           src={m.content}
                           loop={m.loop}
@@ -763,20 +727,6 @@ export default defineComponent({
               )
             })}
           </Swiper>
-          {/* <Swipe
-            style={{ height: '100%' }}
-            ref={swipeRef}
-            showIndicators={false}
-            loop={false}
-            duration={0}
-            // vertical
-            lazyRender={true}
-            touchable={false}
-            initialSwipe={popupData.firstIndex}
-            onChange={handleSwipeChange}
-          >
-            
-          </Swipe> */}
           <div
             style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
             id="coursePlayHeader"
@@ -793,31 +743,37 @@ export default defineComponent({
           <Transition name="right">
             {activeData.model && (
               <div class={styles.rightFixedBtns}>
-                <div
-                  class={styles.fullBtn}
-                  onClick={() => {
-                    clearTimeout(activeData.timer)
-                    popupData.open = true
-                  }}
-                >
-                  <img src={iconMenu} />
-                  <span>知识点</span>
+                <div class={styles.btnsWrap}>
+                  <div
+                    class={[styles.fullBtn, styles.point]}
+                    onClick={() => {
+                      clearTimeout(activeData.timer)
+                      popupData.open = true
+                    }}
+                  >
+                    <img src={iconMenu} />
+                    <span>知识点</span>
+                  </div>
+                </div>
+
+                <div class={[styles.btnsWrap, styles.btnsBottom]}>
+                  <div class={styles.fullBtn} onClick={() => (popupData.guideOpen = true)}>
+                    <img src={iconTouping} />
+                    <span>投屏</span>
+                  </div>
+                  {data.isCourse && (
+                    <>
+                      <div class={styles.fullBtn} onClick={() => gotoRollCall('student_roll_call')}>
+                        <img src={iconDian} />
+                        <span>点名</span>
+                      </div>
+                      <div class={styles.fullBtn} onClick={() => gotoRollCall('sign_out')}>
+                        <img src={iconPoint} />
+                        <span>签退</span>
+                      </div>
+                    </>
+                  )}
                 </div>
-                {data.isCourse && (
-                  <>
-                    <div
-                      class={[styles.fullBtn, styles.point]}
-                      onClick={() => gotoRollCall('student_roll_call')}
-                    >
-                      <img src={iconDian} />
-                      <span>点名</span>
-                    </div>
-                    <div class={styles.fullBtn} onClick={() => gotoRollCall('sign_out')}>
-                      <img src={iconPoint} />
-                      <span>签退</span>
-                    </div>
-                  </>
-                )}
               </div>
             )}
           </Transition>
@@ -869,6 +825,16 @@ export default defineComponent({
               }}
             />
           </Popup>
+
+          <Popup
+            class={styles.popup}
+            overlayClass={styles.overlayClass}
+            position="right"
+            round
+            v-model:show={popupData.guideOpen}
+          >
+            <OGuide />
+          </Popup>
         </div>
       </div>
     )