|
@@ -17,46 +17,47 @@
|
|
|
<!-- <a-image height="100%" :src="unknownFile" :preview="false" />-->
|
|
<!-- <a-image height="100%" :src="unknownFile" :preview="false" />-->
|
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
- <div class="video-info" style="width: 850px">
|
|
|
|
|
|
|
+ <div class="video-info" style="width: 1206px">
|
|
|
<div
|
|
<div
|
|
|
v-if="['jpg', 'bmp', 'png', 'jpeg'].includes(videoFormat)"
|
|
v-if="['jpg', 'bmp', 'png', 'jpeg'].includes(videoFormat)"
|
|
|
- style="width: 850px; height: 350px"
|
|
|
|
|
|
|
+ class="tallList"
|
|
|
>
|
|
>
|
|
|
<!-- <img :src="imgs + itemData.coverImagePath" style="width: 100%; height: 100%" /> -->
|
|
<!-- <img :src="imgs + itemData.coverImagePath" style="width: 100%; height: 100%" /> -->
|
|
|
<!-- <img :v-lazy="imagess" style="width: 100%; height: 100%" /> -->
|
|
<!-- <img :v-lazy="imagess" style="width: 100%; height: 100%" /> -->
|
|
|
- <a-image width="850px" height="350px" :src="fileSrc(resSrc)" :preview="true"/>
|
|
|
|
|
|
|
+ <a-image width="100%" height="570px" :src="fileSrc(resSrc)" :preview="true"/>
|
|
|
<!-- <image :src="resSrc" style="object-fit: cover" /> -->
|
|
<!-- <image :src="resSrc" style="object-fit: cover" /> -->
|
|
|
</div>
|
|
</div>
|
|
|
<!-- "wmv","avi","flv","mpeg","mpg","rmvb","mov","mkv" -->
|
|
<!-- "wmv","avi","flv","mpeg","mpg","rmvb","mov","mkv" -->
|
|
|
<div
|
|
<div
|
|
|
v-else-if="['mkv', 'mp4', 'wmv', 'avi', 'flv', 'mpeg', 'mpg', 'rmvb', 'mov'].includes(videoFormat)"
|
|
v-else-if="['mkv', 'mp4', 'wmv', 'avi', 'flv', 'mpeg', 'mpg', 'rmvb', 'mov'].includes(videoFormat)"
|
|
|
- style="width: 850px; height: 350px"
|
|
|
|
|
|
|
+ class="tallList"
|
|
|
>
|
|
>
|
|
|
- <video :src="fileSrc(resSrc)" controls style="width: 100%; height: 100%"/>
|
|
|
|
|
|
|
+ <video :src="fileSrc(resSrc)" controls style="width: 100%; height: 570px"/>
|
|
|
</div>
|
|
</div>
|
|
|
<!-- "doc","docx","ppt","pptx","xls","xlsx" -->
|
|
<!-- "doc","docx","ppt","pptx","xls","xlsx" -->
|
|
|
<div
|
|
<div
|
|
|
v-else-if="['docx', 'doc', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf'].includes(videoFormat)"
|
|
v-else-if="['docx', 'doc', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf'].includes(videoFormat)"
|
|
|
- style="width: 850px; height: 350px"
|
|
|
|
|
|
|
+ class="tallList"
|
|
|
>
|
|
>
|
|
|
<!-- <PDF :src="resSrc" :width="850" :height="350" /> -->
|
|
<!-- <PDF :src="resSrc" :width="850" :height="350" /> -->
|
|
|
- <FilePreviewer :fileUrl="fileSrc(resSrc)" :fileName="resName" :fileType="fileType"/>
|
|
|
|
|
|
|
+ <FilePreviewer :fileUrl="fileSrc(resSrc)" :fileName="resName" :fileType="fileType" style="width: 100%; height: 570px"/>
|
|
|
<!-- <a-image width="200px" height="220px" :src="pdfRes" :preview="false" @click="handleDownload(resSrc)" /> -->
|
|
<!-- <a-image width="200px" height="220px" :src="pdfRes" :preview="false" @click="handleDownload(resSrc)" /> -->
|
|
|
<!-- <a-button type="primary" @click="handleDownload(resSrc)">去预览</a-button> -->
|
|
<!-- <a-button type="primary" @click="handleDownload(resSrc)">去预览</a-button> -->
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
<div
|
|
|
v-else
|
|
v-else
|
|
|
- style="width: 850px; height: 350px; border: 1px solid #dfe2e5; display: flex; justify-content: center; align-items: center"
|
|
|
|
|
|
|
+ class="tallList"
|
|
|
|
|
+ style="height: 570px; border: 1px solid #dfe2e5; display: flex; justify-content: center; align-items: center"
|
|
|
>
|
|
>
|
|
|
<span style="display: block">本资源格式不可预览</span>
|
|
<span style="display: block">本资源格式不可预览</span>
|
|
|
<!-- <PDF :src="resSrc" :width="850" :height="350" /> -->
|
|
<!-- <PDF :src="resSrc" :width="850" :height="350" /> -->
|
|
|
<!-- <a-image width="200px" height="220px" :src="pdfRes" :preview="false" @click="handleDownload(resSrc)" /> -->
|
|
<!-- <a-image width="200px" height="220px" :src="pdfRes" :preview="false" @click="handleDownload(resSrc)" /> -->
|
|
|
<!-- <a-button type="primary" @click="handleDownload(resSrc)">去预览</a-button> -->
|
|
<!-- <a-button type="primary" @click="handleDownload(resSrc)">去预览</a-button> -->
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="imgBox" v-if="itemData.id && unknownFile">
|
|
|
|
|
- <a-image height="100%" :src="unknownFile" :preview="false"/>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+<!-- <div class="imgBox" v-if="itemData.id && unknownFile">-->
|
|
|
|
|
+<!-- <a-image height="100%" :src="unknownFile" :preview="false"/>-->
|
|
|
|
|
+<!-- </div>-->
|
|
|
<div style="height: 20px"></div>
|
|
<div style="height: 20px"></div>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -98,13 +99,16 @@
|
|
|
<div style="width: 10px"></div>
|
|
<div style="width: 10px"></div>
|
|
|
<button class="share-btn">分享资源</button>
|
|
<button class="share-btn">分享资源</button>
|
|
|
</div>
|
|
</div>
|
|
|
- <div style="display: flex; align-items: center; cursor: pointer"
|
|
|
|
|
|
|
+ <div style="display: flex; align-items: center; cursor: pointer; margin-right:10px;"
|
|
|
@click="handlerCollection">
|
|
@click="handlerCollection">
|
|
|
<StarOutlined v-if="starTag == false"/>
|
|
<StarOutlined v-if="starTag == false"/>
|
|
|
<StarFilled v-if="starTag == true"/>
|
|
<StarFilled v-if="starTag == true"/>
|
|
|
<div style="width: 10px"></div>
|
|
<div style="width: 10px"></div>
|
|
|
<button class="favorite-btn">收藏资源</button>
|
|
<button class="favorite-btn">收藏资源</button>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div style="display: flex; align-items: center; cursor: pointer" @click="handlerDown">
|
|
|
|
|
+ <a-button type="primary">下载</a-button>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -213,6 +217,10 @@ const handlerShareDialog = () => {
|
|
|
.catch((err) => {
|
|
.catch((err) => {
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
+const handlerDown = () => {
|
|
|
|
|
+ console.log('去下载', itemData.value)
|
|
|
|
|
+ window.open(sysConfig.FILE_URL + itemData.value.fileUrl)
|
|
|
|
|
+}
|
|
|
const handlerCollection = async () => {
|
|
const handlerCollection = async () => {
|
|
|
const id = route.query.id
|
|
const id = route.query.id
|
|
|
if (id != undefined && id != '') {
|
|
if (id != undefined && id != '') {
|
|
@@ -263,7 +271,7 @@ const getData = (item) => {
|
|
|
|
|
|
|
|
releaseTime.value = itemData.value.uploadTime
|
|
releaseTime.value = itemData.value.uploadTime
|
|
|
|
|
|
|
|
- videoSize.value = itemData.value.FILESIZE ? itemData.value.FILESIZE + 'b' : ''
|
|
|
|
|
|
|
+ videoSize.value = bytesToMB(itemData.value.FILESIZE)
|
|
|
|
|
|
|
|
tags.value = []
|
|
tags.value = []
|
|
|
itemData.value.keywordList.forEach((item) => {
|
|
itemData.value.keywordList.forEach((item) => {
|
|
@@ -297,7 +305,11 @@ const getData = (item) => {
|
|
|
.catch((err) => {
|
|
.catch((err) => {
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+const bytesToMB = (bytes) => {
|
|
|
|
|
+ if (!bytes || isNaN(bytes)) return '0.00 MB'
|
|
|
|
|
+ const mb = bytes / (1024 * 1024)
|
|
|
|
|
+ return `${mb.toFixed(2)} MB`
|
|
|
|
|
+}
|
|
|
const upDataList = (item) => {
|
|
const upDataList = (item) => {
|
|
|
resourcecentreDetail({id: item.id})
|
|
resourcecentreDetail({id: item.id})
|
|
|
.then((res) => {
|
|
.then((res) => {
|
|
@@ -365,6 +377,12 @@ EventBus.on('openResourceDetailsInner', openResourceDetailsInner)
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
|
|
+.tallList {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ width: 1206px;
|
|
|
|
|
+}
|
|
|
.tab-switcher {
|
|
.tab-switcher {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
@@ -513,15 +531,6 @@ h1 {
|
|
|
margin-right: 5px;
|
|
margin-right: 5px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.tallList {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 200px;
|
|
|
|
|
- border: 1px solid #dfe2e5;
|
|
|
|
|
- padding: 20px;
|
|
|
|
|
- margin-top: 10px;
|
|
|
|
|
-}
|
|
|
|
|
|
|
|
|
|
.tallListInfo {
|
|
.tallListInfo {
|
|
|
color: rgba(0, 0, 0, 0.116);
|
|
color: rgba(0, 0, 0, 0.116);
|