|
@@ -1,253 +1,253 @@
|
|
|
<template>
|
|
|
<div class="hiteachNote-content">
|
|
|
<br />
|
|
|
- <EventBasicInfo from="hiteach" />
|
|
|
- <div class="title-rect-group">
|
|
|
- <div class="title-rect" />
|
|
|
- <h2 class="title-rect-name">{{$t('studentWeb.hiteachNote.material')}}</h2>
|
|
|
- </div>
|
|
|
- <vuescroll ref="pagewrap">
|
|
|
- <div :class="moStatus ? 'class-content mouse-over-status':'class-content'" @mousemove="moStatus = true" @mouseleave="moStatus = false">
|
|
|
- <div class="courseware-wrap">
|
|
|
- <DrawHTEX :mapJson="mapJson"></DrawHTEX>
|
|
|
- <div class="page-wrap">
|
|
|
- <Page :total="120" size="small" :current.sync="curPage" show-elevator show-total @on-change="getCurHTEX">
|
|
|
- <span>{{curPage}}/12</span>
|
|
|
- </Page>
|
|
|
- <Icon type="md-qr-scanner" class="full-screen-icon" @click="viewHtex" />
|
|
|
- </div>
|
|
|
- <span class="cur-page-tag">{{curPage}}</span>
|
|
|
- </div>
|
|
|
- <video-player2 class="video-player-box" :markers="markers"
|
|
|
- ref="videoPlayer"
|
|
|
- :options="playerOptions"
|
|
|
- :playsinline="true"
|
|
|
- @getCurPage="getCurPage">
|
|
|
- </video-player2>
|
|
|
- </div>
|
|
|
+ <EventBasicInfo from="hiteach" />
|
|
|
<div class="title-rect-group">
|
|
|
<div class="title-rect" />
|
|
|
- <h2 class="title-rect-name">
|
|
|
- {{$t('studentWeb.hiteachNote.classInteractionRecord')}}
|
|
|
- <span class="feedbackNum">10</span>
|
|
|
- </h2>
|
|
|
+ <h2 class="title-rect-name">{{$t('studentWeb.hiteachNote.material')}}</h2>
|
|
|
</div>
|
|
|
+ <div ref="pagewrap">
|
|
|
|
|
|
|
|
|
- <div class="dec">
|
|
|
- <ul class="message-filter">
|
|
|
- <li @click="showdoc()">
|
|
|
- <Icon :class="{ 'select-filter': onlyShowdoc == true }" type="md-document" title="文件" />
|
|
|
- </li>
|
|
|
- <li @click="showImg()">
|
|
|
- <Icon :class="{ 'select-filter': onlyShowImg == true }" type="ios-image" title="图片" />
|
|
|
- </li>
|
|
|
- <li @click="showShareLink()">
|
|
|
- <Icon :class="{ 'select-filter': onlyShowShareLink == true }" type="ios-link" title="超链接" />
|
|
|
- </li>
|
|
|
- <li @click="showQa()">
|
|
|
- <span :class="{ 'select-filter': onlyShowQA == true}" style="font-size:32px;line-height:30px;" title="即问即答">Q</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <Row :gutter="0">
|
|
|
- <i-col :xs="24" :sm="24" :md="24" :lg="24">
|
|
|
- <vuescroll ref="datawrap">
|
|
|
- <div class="message-area">
|
|
|
- <div v-if="openImageViewer == true" class="image-viewer">
|
|
|
- <Icon type="md-close" class="close-icon" @click="closeViewer()" />
|
|
|
+ <div :class="moStatus ? 'class-content mouse-over-status':'class-content'" @mousemove="moStatus = true" @mouseleave="moStatus = false">
|
|
|
+ <div class="courseware-wrap">
|
|
|
+ <DrawHTEX :mapJson="mapJson"></DrawHTEX>
|
|
|
+ <div class="page-wrap">
|
|
|
+ <Page :total="120" size="small" :current.sync="curPage" show-elevator show-total @on-change="getCurHTEX">
|
|
|
+ <span>{{curPage}}/12</span>
|
|
|
+ </Page>
|
|
|
+ <Icon type="md-qr-scanner" class="full-screen-icon" @click="viewHtex" />
|
|
|
+ </div>
|
|
|
+ <span class="cur-page-tag">{{curPage}}</span>
|
|
|
+ </div>
|
|
|
+ <video-player2 class="video-player-box" :markers="markers"
|
|
|
+ ref="videoPlayer"
|
|
|
+ :options="playerOptions"
|
|
|
+ :playsinline="true"
|
|
|
+ @getCurPage="getCurPage">
|
|
|
+ </video-player2>
|
|
|
+ </div>
|
|
|
+ <div class="title-rect-group">
|
|
|
+ <div class="title-rect" />
|
|
|
+ <h2 class="title-rect-name">
|
|
|
+ {{$t('studentWeb.hiteachNote.classInteractionRecord')}}
|
|
|
+ <span class="feedbackNum">10</span>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="dec">
|
|
|
+ <ul class="message-filter">
|
|
|
+ <li @click="showdoc()">
|
|
|
+ <Icon :class="{ 'select-filter': onlyShowdoc == true }" type="md-document" title="文件" />
|
|
|
+ </li>
|
|
|
+ <li @click="showImg()">
|
|
|
+ <Icon :class="{ 'select-filter': onlyShowImg == true }" type="ios-image" title="图片" />
|
|
|
+ </li>
|
|
|
+ <li @click="showShareLink()">
|
|
|
+ <Icon :class="{ 'select-filter': onlyShowShareLink == true }" type="ios-link" title="超链接" />
|
|
|
+ </li>
|
|
|
+ <li @click="showQa()">
|
|
|
+ <span :class="{ 'select-filter': onlyShowQA == true}" style="font-size:32px;line-height:30px;" title="即问即答">Q</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <Row :gutter="0">
|
|
|
+ <i-col :xs="24" :sm="24" :md="24" :lg="24">
|
|
|
+ <vuescroll ref="datawrap">
|
|
|
+ <div class="message-area">
|
|
|
+ <div v-if="openImageViewer == true" class="image-viewer">
|
|
|
+ <Icon type="md-close" class="close-icon" @click="closeViewer()" />
|
|
|
|
|
|
- <img :src="`https://source.unsplash.com/random/?water${item}`" />
|
|
|
- </div>
|
|
|
- <div class="message-item" v-if="isSelected('Qa')|| showAll()">
|
|
|
- <img class="message-avatar"
|
|
|
- src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
+ <img :src="`https://source.unsplash.com/random/?water${item}`" />
|
|
|
+ </div>
|
|
|
+ <div class="message-item" v-if="isSelected('Qa')|| showAll()">
|
|
|
+ <img class="message-avatar"
|
|
|
+ src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
|
|
|
- <div class="message-content">
|
|
|
- <div class="messagetoPPT-tag" @click="toVideo(3,$event)">PDF第3頁</div>
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Nancy Chen</p>
|
|
|
- <p class="message-text">
|
|
|
- 即問即答(多選):
|
|
|
- <br />
|
|
|
- <span class="answer-text wrong-ans">
|
|
|
- ABC
|
|
|
- <div class="divide-line" />
|
|
|
- </span>
|
|
|
- 參考答案:
|
|
|
- <br />
|
|
|
- <span class="answer-text">BD</span>
|
|
|
- </p>
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="messagetoPPT-tag" @click="toVideo(3,$event)">PDF第3頁</div>
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Nancy Chen</p>
|
|
|
+ <p class="message-text">
|
|
|
+ 即問即答(多選):
|
|
|
+ <br />
|
|
|
+ <span class="answer-text wrong-ans">
|
|
|
+ ABC
|
|
|
+ <div class="divide-line" />
|
|
|
+ </span>
|
|
|
+ 參考答案:
|
|
|
+ <br />
|
|
|
+ <span class="answer-text">BD</span>
|
|
|
+ </p>
|
|
|
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="teacher-item" v-if="isSelected('Nomal')|| showAll()">
|
|
|
- <div class="message-content">
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Mary Wu (Teacher)</p>
|
|
|
- <p class="message-text">詳見課本Page31</p>
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
+ <div class="teacher-item" v-if="isSelected('Nomal')|| showAll()">
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Mary Wu (Teacher)</p>
|
|
|
+ <p class="message-text">詳見課本Page31</p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
+ <img class="message-avatar"
|
|
|
+ src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
|
|
|
</div>
|
|
|
- <img class="message-avatar"
|
|
|
- src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
|
|
|
- </div>
|
|
|
- <div class="message-item" v-if="isSelected('Qa')|| showAll()">
|
|
|
- <img class="message-avatar"
|
|
|
- src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
- <div class="message-content">
|
|
|
- <div class="messagetoPPT-tag" @click="toVideo(8,$event)">PDF第8頁</div>
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Nancy Chen</p>
|
|
|
- <p class="message-text">
|
|
|
- 即問即答(多選):
|
|
|
- <br />
|
|
|
- <span class="answer-text">
|
|
|
- BCD<div class="divide-line" />
|
|
|
- ✔︎ 答案正確!
|
|
|
+ <div class="message-item" v-if="isSelected('Qa')|| showAll()">
|
|
|
+ <img class="message-avatar"
|
|
|
+ src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="messagetoPPT-tag" @click="toVideo(8,$event)">PDF第8頁</div>
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Nancy Chen</p>
|
|
|
+ <p class="message-text">
|
|
|
+ 即問即答(多選):
|
|
|
<br />
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
+ <span class="answer-text">
|
|
|
+ BCD<div class="divide-line" />
|
|
|
+ ✔︎ 答案正確!
|
|
|
+ <br />
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="teacher-item" v-if="isSelected('doc')|| showAll()">
|
|
|
- <div class="message-content">
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Mary Wu (Teacher)</p>
|
|
|
- <p class="message-text">
|
|
|
- <span class="message-link">
|
|
|
- <svg-icon class="link-icon" icon-class="doc2" />teacher_shared.pdf
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
+ <div class="teacher-item" v-if="isSelected('doc')|| showAll()">
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Mary Wu (Teacher)</p>
|
|
|
+ <p class="message-text">
|
|
|
+ <span class="message-link">
|
|
|
+ <svg-icon class="link-icon" icon-class="doc2" />teacher_shared.pdf
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
+ <img class="message-avatar"
|
|
|
+ src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
|
|
|
</div>
|
|
|
- <img class="message-avatar"
|
|
|
- src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
|
|
|
- </div>
|
|
|
- <div class="message-item" v-if="isSelected('Img')||isSelected('Qa')|| showAll()">
|
|
|
- <img class="message-avatar"
|
|
|
- src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
+ <div class="message-item" v-if="isSelected('Img')||isSelected('Qa')|| showAll()">
|
|
|
+ <img class="message-avatar"
|
|
|
+ src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
|
|
|
- <div class="message-content">
|
|
|
- <div class="messagetoPPT-tag" @click="toVideo(11,$event)">PDF第11頁</div>
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Nancy Chen</p>
|
|
|
- <p class="message-text">
|
|
|
- 即問即答:
|
|
|
- <br />
|
|
|
- <img @click="openViewer(item)"
|
|
|
- src="https://source.unsplash.com/random/320x200/?water" />
|
|
|
- <span class='answer-text'>
|
|
|
- <div class="divide-line" />
|
|
|
- ✔︎ 答案正確!
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="messagetoPPT-tag" @click="toVideo(11,$event)">PDF第11頁</div>
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Nancy Chen</p>
|
|
|
+ <p class="message-text">
|
|
|
+ 即問即答:
|
|
|
+ <br />
|
|
|
+ <img @click="openViewer(item)"
|
|
|
+ src="https://source.unsplash.com/random/320x200/?water" />
|
|
|
+ <span class='answer-text'>
|
|
|
+ <div class="divide-line" />
|
|
|
+ ✔︎ 答案正確!
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="teacher-item" v-if="isSelected('Link')|| showAll()">
|
|
|
- <div class="message-content">
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Mary Wu (Teacher)</p>
|
|
|
- <div class="message-text">
|
|
|
- <a class="message-link"
|
|
|
- href="https://www.habook.com/zh-tw"
|
|
|
- target="_blank">https://www.habook.com/zh-tw</a>
|
|
|
+ <div class="teacher-item" v-if="isSelected('Link')|| showAll()">
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Mary Wu (Teacher)</p>
|
|
|
+ <div class="message-text">
|
|
|
+ <a class="message-link"
|
|
|
+ href="https://www.habook.com/zh-tw"
|
|
|
+ target="_blank">https://www.habook.com/zh-tw</a>
|
|
|
|
|
|
- <div class="link-item">
|
|
|
- <ul class="link-content">
|
|
|
- <li>
|
|
|
- <img class="link-img" :src="`https://source.unsplash.com/random/300x200/?water${item}`" />
|
|
|
- </li>
|
|
|
- <li class="link-text">
|
|
|
- <a href="https://www.habook.com/zh-tw" target="_blank">
|
|
|
- <p class="title">分享連結 {{ item }}</p>
|
|
|
- <p>https://www.habook.com/zh-tw</p>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <div class="link-item">
|
|
|
+ <ul class="link-content">
|
|
|
+ <li>
|
|
|
+ <img class="link-img" :src="`https://source.unsplash.com/random/300x200/?water${item}`" />
|
|
|
+ </li>
|
|
|
+ <li class="link-text">
|
|
|
+ <a href="https://www.habook.com/zh-tw" target="_blank">
|
|
|
+ <p class="title">分享連結 {{ item }}</p>
|
|
|
+ <p>https://www.habook.com/zh-tw</p>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
+ <img class="message-avatar"
|
|
|
+ src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
|
|
|
</div>
|
|
|
- <img class="message-avatar"
|
|
|
- src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
|
|
|
- </div>
|
|
|
- <div class="message-item" v-if="isSelected('Qa')|| showAll()">
|
|
|
- <img class="message-avatar"
|
|
|
- src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
+ <div class="message-item" v-if="isSelected('Qa')|| showAll()">
|
|
|
+ <img class="message-avatar"
|
|
|
+ src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
|
|
|
- <div class="message-content">
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Nancy Chen</p>
|
|
|
- <p class="message-text">
|
|
|
- 即問即答(多選):
|
|
|
- <br />
|
|
|
- <span class="answer-text">
|
|
|
- AD
|
|
|
- <div class="divide-line" />
|
|
|
- ✔︎ 答案正確!
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="teacher-item" v-if="isSelected('Img')|| showAll()">
|
|
|
- <div class="message-content">
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Mary Wu (Teacher)</p>
|
|
|
- <p class="message-text">
|
|
|
- 教師從Hiteach推送了一張圖:
|
|
|
- <br />
|
|
|
- <img @click="openViewer(item)"
|
|
|
- src="https://source.unsplash.com/random/320x200/?line" />
|
|
|
- </p>
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Nancy Chen</p>
|
|
|
+ <p class="message-text">
|
|
|
+ 即問即答(多選):
|
|
|
+ <br />
|
|
|
+ <span class="answer-text">
|
|
|
+ AD
|
|
|
+ <div class="divide-line" />
|
|
|
+ ✔︎ 答案正確!
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <img class="message-avatar"
|
|
|
- src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
|
|
|
- </div>
|
|
|
- <div class="message-item group-item" v-if="isSelected('Qa')|| showAll()">
|
|
|
- <div class="group-avatar">
|
|
|
- <svg-icon icon-class="group" class="group-icon" />
|
|
|
+ <div class="teacher-item" v-if="isSelected('Img')|| showAll()">
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Mary Wu (Teacher)</p>
|
|
|
+ <p class="message-text">
|
|
|
+ 教師從Hiteach推送了一張圖:
|
|
|
+ <br />
|
|
|
+ <img @click="openViewer(item)"
|
|
|
+ src="https://source.unsplash.com/random/320x200/?line" />
|
|
|
+ </p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
+ <img class="message-avatar"
|
|
|
+ src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
|
|
|
</div>
|
|
|
+ <div class="message-item group-item" v-if="isSelected('Qa')|| showAll()">
|
|
|
+ <div class="group-avatar">
|
|
|
+ <svg-icon icon-class="group" class="group-icon" />
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="message-content">
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Group 5</p>
|
|
|
- <p class="message-text">
|
|
|
- 分組即問即答(多選):
|
|
|
- <br />
|
|
|
- <span class="answer-text">
|
|
|
- ADE
|
|
|
- <div class="divide-line" />
|
|
|
- ✔︎ 答案正確!
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Group 5</p>
|
|
|
+ <p class="message-text">
|
|
|
+ 分組即問即答(多選):
|
|
|
+ <br />
|
|
|
+ <span class="answer-text">
|
|
|
+ ADE
|
|
|
+ <div class="divide-line" />
|
|
|
+ ✔︎ 答案正確!
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="message-item" v-if="isSelected('Nomal')|| showAll()">
|
|
|
- <img class="message-avatar"
|
|
|
- src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
+ <div class="message-item" v-if="isSelected('Nomal')|| showAll()">
|
|
|
+ <img class="message-avatar"
|
|
|
+ src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
|
|
|
|
|
|
- <div class="message-content">
|
|
|
- <div class="triangle"></div>
|
|
|
- <p class="user-name">Nancy Chen</p>
|
|
|
- <p class="message-text">
|
|
|
- 問題討論第28題答案有誤?
|
|
|
- <br />
|
|
|
- </p>
|
|
|
- <p class="message-time">00:20:58</p>
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <p class="user-name">Nancy Chen</p>
|
|
|
+ <p class="message-text">
|
|
|
+ 問題討論第28題答案有誤?
|
|
|
+ <br />
|
|
|
+ </p>
|
|
|
+ <p class="message-time">00:20:58</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </vuescroll>
|
|
|
- </i-col>
|
|
|
- </Row>
|
|
|
+ </vuescroll>
|
|
|
+ </i-col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </vuescroll>
|
|
|
<div v-if="openHtexViewer" class="image-viewer htex-viewer">
|
|
|
<Icon type="md-close" class="close-icon" @click="openHtexViewer = false" />
|
|
|
<DrawHTEX :mapJson="mapJson" class="animated fadeIn" :height="800" @click.stop></DrawHTEX>
|
|
@@ -257,7 +257,8 @@
|
|
|
</Page>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+</div>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -315,7 +316,6 @@
|
|
|
notSupportedMessage: '此视频暂无法播放,请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
},
|
|
|
//新增数据
|
|
|
-
|
|
|
currentfilterType: "",
|
|
|
onlyShowdoc: false,
|
|
|
onlyShowImg: false,
|
|
@@ -325,17 +325,7 @@
|
|
|
onlyShowQAWrong: false,
|
|
|
openImageViewer: false,
|
|
|
pageNow: 0,
|
|
|
- item: "",
|
|
|
- videoOptions: {
|
|
|
- poster: "https://source.unsplash.com/random/?water", //影片的封面
|
|
|
- preload: "auto",
|
|
|
- height: "400px",
|
|
|
- autoplay: false,
|
|
|
- controls: true,
|
|
|
- sources: [
|
|
|
- { src: "http://vjs.zencdn.net/v/oceans.mp4", type: "video/mp4" },
|
|
|
- ],
|
|
|
- },
|
|
|
+ item: ""
|
|
|
};
|
|
|
},
|
|
|
watch: {},
|
|
@@ -352,30 +342,31 @@
|
|
|
methods: {
|
|
|
toVideo(page, e) {
|
|
|
//页面滚动
|
|
|
- let dataLoacation = this.$refs["datawrap"].getPosition()
|
|
|
- let pageLocaltion = this.$refs["pagewrap"].getPosition()
|
|
|
- let y = e.pageY - 665 + pageLocaltion.scrollTop + dataLoacation.scrollTop
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs["pagewrap"].scrollTo(
|
|
|
- {
|
|
|
- x: 0,
|
|
|
- y: 0
|
|
|
- }
|
|
|
- )
|
|
|
- this.$refs["datawrap"].scrollTo(
|
|
|
- {
|
|
|
- x: 0,
|
|
|
- y: y
|
|
|
- }
|
|
|
- )
|
|
|
- })
|
|
|
- //视频时间定位
|
|
|
- let pageInfo = this.markers.filter(item => {
|
|
|
- return item.page == page
|
|
|
- })
|
|
|
- this.$refs.videoPlayer.player.currentTime(pageInfo[0].time)
|
|
|
- //课件页面定位
|
|
|
- this.mapJson = require('./data/' + page + '.json')
|
|
|
+ console.log(this.$refs)
|
|
|
+ //let dataLoacation = this.$refs["datawrap"].getPosition()
|
|
|
+ //let pageLocaltion = this.$refs["pagewrap"].getPosition()
|
|
|
+ //let y = e.pageY - 665 + pageLocaltion.scrollTop + dataLoacation.scrollTop
|
|
|
+ //this.$nextTick(() => {
|
|
|
+ // this.$refs["pagewrap"].scrollTo(
|
|
|
+ // {
|
|
|
+ // x: 0,
|
|
|
+ // y: 0
|
|
|
+ // }
|
|
|
+ // )
|
|
|
+ // this.$refs["datawrap"].scrollTo(
|
|
|
+ // {
|
|
|
+ // x: 0,
|
|
|
+ // y: y
|
|
|
+ // }
|
|
|
+ // )
|
|
|
+ //})
|
|
|
+ ////视频时间定位
|
|
|
+ //let pageInfo = this.markers.filter(item => {
|
|
|
+ // return item.page == page
|
|
|
+ //})
|
|
|
+ //this.$refs.videoPlayer.player.currentTime(pageInfo[0].time)
|
|
|
+ ////课件页面定位
|
|
|
+ //this.mapJson = require('./data/' + page + '.json')
|
|
|
},
|
|
|
//点击视频切片
|
|
|
getCurPage(page) {
|
|
@@ -409,8 +400,7 @@
|
|
|
* 获取blob授权信息
|
|
|
* */
|
|
|
async getSasStr() {
|
|
|
- console.log('231231321321231321')
|
|
|
- console.log(this.$tools.getSchoolSas())
|
|
|
+ console.log(this.$store.state)
|
|
|
let sasRes1 = await this.$tools.getSchoolSas()
|
|
|
let sasRes2 = await this.$tools.getPrivateSas()
|
|
|
console.log(sasRes1, sasRes2)
|
|
@@ -426,10 +416,7 @@
|
|
|
this.$Message.error('获取Blob授权失败')
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
//新增功能
|
|
|
-
|
|
|
-
|
|
|
isSelected(type) {
|
|
|
if (type == this.currentfilterType) {
|
|
|
//console.log(type);
|