|
|
@@ -7,47 +7,55 @@
|
|
|
<div class="shade"></div>
|
|
|
</div>
|
|
|
<HeaderOne text="123" title="教材详情" name="" />
|
|
|
- <div class="main" v-loading="loading">
|
|
|
- <div class="bookDetail" v-if="detailSHow">
|
|
|
- <div class="rightUp">
|
|
|
- <span>HOT</span>
|
|
|
- </div>
|
|
|
- <div class="img">
|
|
|
- <img :src="TextbookData.picture_url" alt="" />
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <p class="p1">{{ TextbookData.name }}</p>
|
|
|
- <p class="p2">{{ TextbookData.org_name }}</p>
|
|
|
- <p class="p2">{{ TextbookData.author }}</p>
|
|
|
- <p class="p3">
|
|
|
- {{ TextbookData.description }}
|
|
|
- </p>
|
|
|
- <div class="operation">
|
|
|
- <span class="price">
|
|
|
- ￥<span
|
|
|
- class="price_1"
|
|
|
- v-html="changePrice(TextbookData.price, 24, 16)"
|
|
|
- ></span>
|
|
|
- </span>
|
|
|
- <button @click="getPurchase" class="get">
|
|
|
- <!-- Key390-去学习 Key72-购买 -->
|
|
|
- {{ bookIsBuy == "true" ? this.$t("Key390") : this.$t("Key72") }}
|
|
|
- </button>
|
|
|
- <!-- <button class="acquired">
|
|
|
+ <template v-if="TextbookData.is_deleted == 'false'">
|
|
|
+ <template v-if="bookIsBuy == 'true' || TextbookData.publish_status == 1">
|
|
|
+ <div class="main" v-loading="loading">
|
|
|
+ <div class="bookDetail" v-if="detailSHow">
|
|
|
+ <div class="rightUp">
|
|
|
+ <span>HOT</span>
|
|
|
+ </div>
|
|
|
+ <div class="img">
|
|
|
+ <img :src="TextbookData.picture_url" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <p class="p1">{{ TextbookData.name }}</p>
|
|
|
+ <p class="p2">{{ TextbookData.org_name }}</p>
|
|
|
+ <p class="p2">{{ TextbookData.author }}</p>
|
|
|
+ <p class="p3">
|
|
|
+ {{ TextbookData.description }}
|
|
|
+ </p>
|
|
|
+ <div class="operation">
|
|
|
+ <span class="price">
|
|
|
+ ￥<span
|
|
|
+ class="price_1"
|
|
|
+ v-html="changePrice(TextbookData.price, 24, 16)"
|
|
|
+ ></span>
|
|
|
+ </span>
|
|
|
+ <button @click="getPurchase" class="get">
|
|
|
+ <!-- Key390-去学习 Key72-购买 -->
|
|
|
+ {{
|
|
|
+ bookIsBuy == "true" ? this.$t("Key390") : this.$t("Key72")
|
|
|
+ }}
|
|
|
+ </button>
|
|
|
+ <!-- <button class="acquired">
|
|
|
ACQUIRED
|
|
|
</button> -->
|
|
|
- <span class="enshrine" @click="enshrineEvent">
|
|
|
- <img
|
|
|
- v-if="enshrine == 'false'"
|
|
|
- src="../assets/textBookDetail/enshrine2.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img v-else src="../assets/textBookDetail/enshrine1.png" alt="" />
|
|
|
- </span>
|
|
|
+ <span class="enshrine" @click="enshrineEvent">
|
|
|
+ <img
|
|
|
+ v-if="enshrine == 'false'"
|
|
|
+ src="../assets/textBookDetail/enshrine2.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ src="../assets/textBookDetail/enshrine1.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="more" v-if="detailSHow">
|
|
|
+ <!-- <div class="more" v-if="detailSHow">
|
|
|
<div class="moreTitle">更多推荐</div>
|
|
|
<div class="moreList">
|
|
|
<div class="moreOne">
|
|
|
@@ -124,112 +132,153 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- <div class="cutDownOrimg" v-if="detailSHow">
|
|
|
- <div class="sele">
|
|
|
- <div
|
|
|
- @click="SelectShowEvent('1')"
|
|
|
- :class="SelectShow == '1' ? 'select' : ''"
|
|
|
- v-if="SelectFirstShow"
|
|
|
- >
|
|
|
- <!-- 目录 -->{{ $t("Key612") }}
|
|
|
+ <div class="cutDownOrimg" v-if="detailSHow">
|
|
|
+ <div class="sele">
|
|
|
+ <div
|
|
|
+ @click="SelectShowEvent('1')"
|
|
|
+ :class="SelectShow == '1' ? 'select' : ''"
|
|
|
+ v-if="SelectFirstShow"
|
|
|
+ >
|
|
|
+ <!-- 目录 -->{{ $t("Key612") }}
|
|
|
+ </div>
|
|
|
+ <!-- 资源 -->
|
|
|
+ <div
|
|
|
+ @click="SelectShowEvent('2')"
|
|
|
+ :class="SelectShow == '1' ? '' : 'select'"
|
|
|
+ v-if="
|
|
|
+ fileListVideo.length > 0 ||
|
|
|
+ fileListAudio.length > 0 ||
|
|
|
+ fileListOtheraudio.length > 0 ||
|
|
|
+ fileListDoc.length > 0
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ $t("Key613") }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- 资源 -->
|
|
|
- <div
|
|
|
- @click="SelectShowEvent('2')"
|
|
|
- :class="SelectShow == '1' ? '' : 'select'"
|
|
|
- v-if="fileListVideo.length>0||fileListAudio.length>0||fileListOtheraudio.length>0||fileListDoc.length>0"
|
|
|
- >
|
|
|
- {{ $t("Key613") }}
|
|
|
+ <div v-if="SelectShow == '1'" class="Catalogue">
|
|
|
+ <BookView
|
|
|
+ :bookId="TextBookId"
|
|
|
+ @bookdetailShow="bookdetailShow"
|
|
|
+ :bookIsBuy="bookIsBuy"
|
|
|
+ ></BookView>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="SelectShow == '1'" class="Catalogue">
|
|
|
- <BookView
|
|
|
- :bookId="TextBookId"
|
|
|
- @bookdetailShow="bookdetailShow"
|
|
|
- :bookIsBuy="bookIsBuy"
|
|
|
- ></BookView>
|
|
|
- </div>
|
|
|
- <div v-else class="Resources">
|
|
|
- <!--没有数据-->
|
|
|
- <!-- <div>
|
|
|
+ <div v-else class="Resources">
|
|
|
+ <!--没有数据-->
|
|
|
+ <!-- <div>
|
|
|
<img src="../assets/textBookDetail/fileType1.png" alt="" />
|
|
|
<span> 文件名 </span>
|
|
|
<img src="../assets/textBookDetail/upload.png" alt="" />
|
|
|
</div> -->
|
|
|
- <div class="resource-content" v-if="fileListVideo.length>0">
|
|
|
- <h2 class="video-title">视频资源</h2>
|
|
|
- <ul class="video-list">
|
|
|
- <li v-for="(item,index) in fileListVideo" :key="index" @click="handleJumpVideo(index)">
|
|
|
- <div class="video-img" :style="{'background':'url('+item.preview_image_file_url+') no-repeat','background-size':'cover'}">
|
|
|
- <img class="video" />
|
|
|
- <img src="../assets/common/play-one.png" class="play-one" />
|
|
|
- </div>
|
|
|
- <p class="video-name">{{item.file_name}}</p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="resource-content" v-if="fileListAudio.length>0||fileListOtheraudio.length>0">
|
|
|
- <h2 class="video-title">音频资源</h2>
|
|
|
- <div class="audio-content" v-if="fileListAudio.length>0">
|
|
|
- <p class="audio-type">课文资源</p>
|
|
|
- <div class="audio-line-box">
|
|
|
- <AudioLine
|
|
|
- :audioId="'fileListAudio'"
|
|
|
- :mp3List="fileListAudio"
|
|
|
- type="audioLine"
|
|
|
- ref="audioLine"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="audio-content" v-if="fileListOtheraudio.length>0">
|
|
|
- <p class="audio-type">自学音频</p>
|
|
|
- <div class="audio-line-box">
|
|
|
- <AudioLine
|
|
|
- :audioId="'fileListOtheraudio'"
|
|
|
- :mp3List="fileListOtheraudio"
|
|
|
- type="audioLine"
|
|
|
- ref="audioLine"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="audio-content">
|
|
|
- <p class="audio-type">资源下载</p>
|
|
|
- <div class="download">
|
|
|
- <div class="book-open" @click="handleDownloadAudio">
|
|
|
- <img
|
|
|
- src="../assets/common/download.png"
|
|
|
- class="book-open-img"
|
|
|
- />
|
|
|
- <span class="book-open-text">音频</span>
|
|
|
+ <div class="resource-content" v-if="fileListVideo.length > 0">
|
|
|
+ <h2 class="video-title">视频资源</h2>
|
|
|
+ <ul class="video-list">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in fileListVideo"
|
|
|
+ :key="index"
|
|
|
+ @click="handleJumpVideo(index)"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="video-img"
|
|
|
+ :style="{
|
|
|
+ background:
|
|
|
+ 'url(' + item.preview_image_file_url + ') no-repeat',
|
|
|
+ 'background-size': 'cover',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img class="video" />
|
|
|
+ <img src="../assets/common/play-one.png" class="play-one" />
|
|
|
+ </div>
|
|
|
+ <p class="video-name">{{ item.file_name }}</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <!-- <div class="book-open">
|
|
|
+ <div
|
|
|
+ class="resource-content"
|
|
|
+ v-if="fileListAudio.length > 0 || fileListOtheraudio.length > 0"
|
|
|
+ >
|
|
|
+ <h2 class="video-title">音频资源</h2>
|
|
|
+ <div class="audio-content" v-if="fileListAudio.length > 0">
|
|
|
+ <p class="audio-type">课文资源</p>
|
|
|
+ <div class="audio-line-box">
|
|
|
+ <AudioLine
|
|
|
+ :audioId="'fileListAudio'"
|
|
|
+ :mp3List="fileListAudio"
|
|
|
+ type="audioLine"
|
|
|
+ ref="audioLine"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="audio-content" v-if="fileListOtheraudio.length > 0">
|
|
|
+ <p class="audio-type">自学音频</p>
|
|
|
+ <div class="audio-line-box">
|
|
|
+ <AudioLine
|
|
|
+ :audioId="'fileListOtheraudio'"
|
|
|
+ :mp3List="fileListOtheraudio"
|
|
|
+ type="audioLine"
|
|
|
+ ref="audioLine"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="audio-content">
|
|
|
+ <p class="audio-type">资源下载</p>
|
|
|
+ <div class="download">
|
|
|
+ <div class="book-open" @click="handleDownloadAudio">
|
|
|
+ <img
|
|
|
+ src="../assets/common/download.png"
|
|
|
+ class="book-open-img"
|
|
|
+ />
|
|
|
+ <span class="book-open-text">音频</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="book-open">
|
|
|
<img
|
|
|
src="../assets/common/download.png"
|
|
|
class="book-open-img"
|
|
|
/>
|
|
|
<span class="book-open-text">互动课件</span>
|
|
|
</div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="resource-content" v-if="fileListDoc.length > 0">
|
|
|
+ <h2 class="video-title">试读PDF</h2>
|
|
|
+ <ul class="PDF-list">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in fileListDoc"
|
|
|
+ :key="index"
|
|
|
+ @click="handleJumpPdf(index)"
|
|
|
+ >
|
|
|
+ <b>{{ index + 1 }}.</b>
|
|
|
+ <p class="PDF-name">{{ item.file_name }}</p>
|
|
|
+ <span>{{ item.fileSize }}</span>
|
|
|
+ <img
|
|
|
+ src="../assets/common/download.png"
|
|
|
+ class="book-open-img"
|
|
|
+ @click="handleDownload(item.file_id)"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-if="TextbookData.is_deleted == 'true'">
|
|
|
+ <div class="noview-msg-box">
|
|
|
+ <div class="noview-msg">无法查看，教材已被删除</div>
|
|
|
</div>
|
|
|
- <div class="resource-content" v-if="fileListDoc.length>0">
|
|
|
- <h2 class="video-title">试读PDF</h2>
|
|
|
- <ul class="PDF-list">
|
|
|
- <li v-for="(item,index) in fileListDoc" :key="index" @click="handleJumpPdf(index)">
|
|
|
- <b>{{index+1}}.</b>
|
|
|
- <p class="PDF-name">{{item.file_name}}</p>
|
|
|
- <span>{{item.fileSize}}</span>
|
|
|
- <img
|
|
|
- src="../assets/common/download.png"
|
|
|
- class="book-open-img"
|
|
|
- @click="handleDownload(item.file_id)"
|
|
|
- />
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ TextbookData.is_deleted == 'false' &&
|
|
|
+ bookIsBuy == 'false' &&
|
|
|
+ TextbookData.publish_status == 0
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="noview-msg-box">
|
|
|
+ <div class="noview-msg">无法查看，教材已下架</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
<!-- 商品详情 -->
|
|
|
<el-dialog
|
|
|
class="buyWindow"
|
|
|
@@ -266,14 +315,19 @@
|
|
|
//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
import Header from "@/components/inputModules/common/Header";
|
|
|
import HeaderOne from "@/components/inputModules/common/HeaderOne";
|
|
|
-import { TextbookAPI, LearnWebSI, getContent, getContentFile } from "@/api/ajax";
|
|
|
+import {
|
|
|
+ TextbookAPI,
|
|
|
+ LearnWebSI,
|
|
|
+ getContent,
|
|
|
+ getContentFile,
|
|
|
+} from "@/api/ajax";
|
|
|
import Confirmorder from "@/components/pyment/Confirmorder";
|
|
|
import Payment from "@/components/pyment/Payment";
|
|
|
import BookView from "@/views/bookView"; // 教材预览
|
|
|
import { updateWordPack } from "@/utils/i18n";
|
|
|
import AudioLine from "@/components/inputModules/common/AudioLine";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
-import { Base64 } from 'js-base64';
|
|
|
+import { Base64 } from "js-base64";
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: {
|
|
|
@@ -437,51 +491,50 @@ export default {
|
|
|
});
|
|
|
this.handleIsBuy();
|
|
|
this.handleIsEnshrine();
|
|
|
- this.getBookSource()
|
|
|
- this.getBookStructList()
|
|
|
+ this.getBookSource();
|
|
|
+ this.getBookStructList();
|
|
|
},
|
|
|
// 教材资源
|
|
|
- getBookSource(){
|
|
|
- let MethodNames = "book-resource_manager-GetBookResourceList";
|
|
|
- let datas = {
|
|
|
- book_id: this.TextBookId,
|
|
|
- };
|
|
|
- getContent(MethodNames, datas)
|
|
|
- .then((res) => {
|
|
|
- if(res.status==1){
|
|
|
- this.fileListVideo = res.video_list
|
|
|
- this.fileListAudio = res.audio_list
|
|
|
- this.fileListOtheraudio = res.otheraudio_list
|
|
|
- this.fileListDoc = res.doc_list
|
|
|
- this.fileListDoc.forEach(item => {
|
|
|
- if(item.file_size>1024*1024){
|
|
|
- if(item.file_size/1024/1024/1024>1){
|
|
|
- item.fileSize = (item.file_size/1024/1024/1024).toFixed(2)+'GB'
|
|
|
- }else{
|
|
|
- item.fileSize = (item.file_size/1024/1024).toFixed(2)+'MB'
|
|
|
- }
|
|
|
- }else{
|
|
|
- item.fileSize = (item.file_size/1024).toFixed(2)+'KB'
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
+ getBookSource() {
|
|
|
+ let MethodNames = "book-resource_manager-GetBookResourceList";
|
|
|
+ let datas = {
|
|
|
+ book_id: this.TextBookId,
|
|
|
+ };
|
|
|
+ getContent(MethodNames, datas).then((res) => {
|
|
|
+ if (res.status == 1) {
|
|
|
+ this.fileListVideo = res.video_list;
|
|
|
+ this.fileListAudio = res.audio_list;
|
|
|
+ this.fileListOtheraudio = res.otheraudio_list;
|
|
|
+ this.fileListDoc = res.doc_list;
|
|
|
+ this.fileListDoc.forEach((item) => {
|
|
|
+ if (item.file_size > 1024 * 1024) {
|
|
|
+ if (item.file_size / 1024 / 1024 / 1024 > 1) {
|
|
|
+ item.fileSize =
|
|
|
+ (item.file_size / 1024 / 1024 / 1024).toFixed(2) + "GB";
|
|
|
+ } else {
|
|
|
+ item.fileSize =
|
|
|
+ (item.file_size / 1024 / 1024).toFixed(2) + "MB";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ item.fileSize = (item.file_size / 1024).toFixed(2) + "KB";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 章节树
|
|
|
- getBookStructList () {
|
|
|
- let MethodName = "book-book_manager-GetBookChapterStruct";
|
|
|
- let data = {
|
|
|
- 'book_id': this.TextBookId
|
|
|
- }
|
|
|
- getContent(MethodName, data).then(
|
|
|
- (res) => {
|
|
|
- this.SelectFirstShow = res.nodes?true:false
|
|
|
- this.SelectShow = res.nodes?'1':'2'
|
|
|
- }
|
|
|
- )
|
|
|
+ getBookStructList() {
|
|
|
+ let MethodName = "book-book_manager-GetBookChapterStruct";
|
|
|
+ let data = {
|
|
|
+ book_id: this.TextBookId,
|
|
|
+ };
|
|
|
+ getContent(MethodName, data).then((res) => {
|
|
|
+ this.SelectFirstShow = res.nodes ? true : false;
|
|
|
+ this.SelectShow = res.nodes ? "1" : "2";
|
|
|
+ });
|
|
|
},
|
|
|
// 打包下载全部音频
|
|
|
- handleDownloadAudio(){
|
|
|
+ handleDownloadAudio() {
|
|
|
let _this = this;
|
|
|
_this.loading = true;
|
|
|
// 拿到当前课的所有文件id
|
|
|
@@ -502,11 +555,11 @@ export default {
|
|
|
FileID,
|
|
|
};
|
|
|
let arr = [];
|
|
|
- this.fileListAudio.forEach(item => {
|
|
|
- arr.push(item.file_id)
|
|
|
+ this.fileListAudio.forEach((item) => {
|
|
|
+ arr.push(item.file_id);
|
|
|
});
|
|
|
- this.fileListOtheraudio.forEach(item => {
|
|
|
- arr.push(item.file_id)
|
|
|
+ this.fileListOtheraudio.forEach((item) => {
|
|
|
+ arr.push(item.file_id);
|
|
|
});
|
|
|
let MethodName = "file_store_manager-StartCreateFileCompressPack";
|
|
|
getContentFile(MethodName, {
|
|
|
@@ -519,7 +572,7 @@ export default {
|
|
|
file_compress_task_id: res.file_compress_task_id,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
- if (res.is_finish == 'true') {
|
|
|
+ if (res.is_finish == "true") {
|
|
|
data.FileID = res.compress_pack_file_id;
|
|
|
clearInterval(timer);
|
|
|
timer = null;
|
|
|
@@ -539,7 +592,7 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 下载单个文件
|
|
|
- handleDownload(fileId){
|
|
|
+ handleDownload(fileId) {
|
|
|
let userInfor = JSON.parse(getToken());
|
|
|
let UserCode = "",
|
|
|
UserType = "",
|
|
|
@@ -561,12 +614,30 @@ export default {
|
|
|
`/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
|
|
|
},
|
|
|
// 跳转预览PDF
|
|
|
- handleJumpPdf(index){
|
|
|
- this.$router.push("/TextbookDetailPdf?id=" + this.TextBookId+'&url='+Base64.encodeURL(this.fileListDoc[index].file_url)+'&invok_module='+this.$route.query.invok_module+'&fileId='+Base64.encodeURL(this.fileListDoc[index].file_id)+'&relativePath='+Base64.encodeURL(this.fileListDoc[index].file_relative_path));
|
|
|
+ handleJumpPdf(index) {
|
|
|
+ this.$router.push(
|
|
|
+ "/TextbookDetailPdf?id=" +
|
|
|
+ this.TextBookId +
|
|
|
+ "&url=" +
|
|
|
+ Base64.encodeURL(this.fileListDoc[index].file_url) +
|
|
|
+ "&invok_module=" +
|
|
|
+ this.$route.query.invok_module +
|
|
|
+ "&fileId=" +
|
|
|
+ Base64.encodeURL(this.fileListDoc[index].file_id) +
|
|
|
+ "&relativePath=" +
|
|
|
+ Base64.encodeURL(this.fileListDoc[index].file_relative_path)
|
|
|
+ );
|
|
|
},
|
|
|
// 跳转预览视频
|
|
|
- handleJumpVideo(index){
|
|
|
- this.$router.push("/TextbookDetailVideo?id=" + this.TextBookId+'&invok_module='+this.$route.query.invok_module+'&activeIndex='+Base64.encodeURL(index));
|
|
|
+ handleJumpVideo(index) {
|
|
|
+ this.$router.push(
|
|
|
+ "/TextbookDetailVideo?id=" +
|
|
|
+ this.TextBookId +
|
|
|
+ "&invok_module=" +
|
|
|
+ this.$route.query.invok_module +
|
|
|
+ "&activeIndex=" +
|
|
|
+ Base64.encodeURL(index)
|
|
|
+ );
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
@@ -966,8 +1037,8 @@ export default {
|
|
|
margin: 24px auto;
|
|
|
width: 1240px;
|
|
|
min-height: 710px;
|
|
|
- // background: #ffffff;
|
|
|
- // display: flex;
|
|
|
+ // background: #ffffff;
|
|
|
+ // display: flex;
|
|
|
box-sizing: border-box;
|
|
|
padding: 20px 0;
|
|
|
div {
|
|
|
@@ -988,140 +1059,160 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.resource-content {
|
|
|
- width: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 26px 24px 8px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 8px;
|
|
|
- margin-bottom: 24px;
|
|
|
- .video-title {
|
|
|
- font-size: 24px;
|
|
|
- line-height: 32px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 40px;
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- .video-list {
|
|
|
- padding: 0 36px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: flex-start;
|
|
|
- list-style: none;
|
|
|
- > li {
|
|
|
- margin: 0 12px 16px 12px;
|
|
|
- cursor: pointer;
|
|
|
- .video-img {
|
|
|
- // background: #ff9900;
|
|
|
- position: relative;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 26px 24px 8px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ .video-title {
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .video-list {
|
|
|
+ padding: 0 36px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ list-style: none;
|
|
|
+ > li {
|
|
|
+ margin: 0 12px 16px 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ .video-img {
|
|
|
+ // background: #ff9900;
|
|
|
+ position: relative;
|
|
|
+ width: 256px;
|
|
|
+ height: 144px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ .video-bg {
|
|
|
width: 256px;
|
|
|
height: 144px;
|
|
|
border-radius: 8px;
|
|
|
- margin-bottom: 8px;
|
|
|
- overflow: hidden;
|
|
|
- .video-bg {
|
|
|
- width: 256px;
|
|
|
- height: 144px;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
- .play-one {
|
|
|
- position: absolute;
|
|
|
- left: 108px;
|
|
|
- top: 52px;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- display: block;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
}
|
|
|
- .video-name {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- word-break: break-all;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
+ .play-one {
|
|
|
+ position: absolute;
|
|
|
+ left: 108px;
|
|
|
+ top: 52px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ display: block;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
}
|
|
|
+ .video-name {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
- .PDF-list{
|
|
|
- width: 1096px;
|
|
|
- margin: 0 auto;
|
|
|
- padding-bottom: 90px;
|
|
|
- li{
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8px;
|
|
|
- display: flex;
|
|
|
- padding: 8px 12px;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 8px;
|
|
|
- b{
|
|
|
- width: 24px;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- font-weight: normal;
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- p{
|
|
|
- margin: 0;
|
|
|
- width: 920px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- span{
|
|
|
- width: 80px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 16px;
|
|
|
- margin-left: 16px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .audio-content {
|
|
|
- padding: 0 28px;
|
|
|
- margin: 0 auto 24px auto;
|
|
|
- width: 1152px;
|
|
|
- .audio-type {
|
|
|
- margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .PDF-list {
|
|
|
+ width: 1096px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 90px;
|
|
|
+ li {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ padding: 8px 12px;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ b {
|
|
|
+ width: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: normal;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ width: 920px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 80px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ margin-left: 16px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- .download {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .audio-content {
|
|
|
+ padding: 0 28px;
|
|
|
+ margin: 0 auto 24px auto;
|
|
|
+ width: 1152px;
|
|
|
+ .audio-type {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .download {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .book-open {
|
|
|
+ width: fit-content;
|
|
|
+ margin-right: 16px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px 16px;
|
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
- .book-open {
|
|
|
- width: fit-content;
|
|
|
- margin-right: 16px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 8px 16px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- .book-open-text{
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
+ cursor: pointer;
|
|
|
+ .book-open-text {
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .audio-line-box {
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 7px 12px;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
}
|
|
|
+ .audio-line-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 7px 12px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .noview-msg-box {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 200px;
|
|
|
+ left: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+ .noview-msg {
|
|
|
+ width: fit-content;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 8px;
|
|
|
+ background: #fcf5f5;
|
|
|
+ border: 1px solid #e65959;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #e55959;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
natasha