|
|
@@ -1,21 +1,28 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <h1>{{ resName }}</h1>
|
|
|
+
|
|
|
<div style="height: 25px"></div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <h1 style="display: block">{{ resName }}</h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="user-info-container">
|
|
|
- <div class="video-info" style="width: 850px">
|
|
|
- <div
|
|
|
- v-if="videoFormat == 'jpg' || videoFormat == 'bmp' || videoFormat == 'png' || videoFormat == 'jpeg'"
|
|
|
- style="width: 850px; height: 350px"
|
|
|
- >
|
|
|
- <!-- <img :src="imgs + itemData.coverImagePath" style="width: 100%; height: 100%" /> -->
|
|
|
- <!-- <img :v-lazy="imagess" style="width: 100%; height: 100%" /> -->
|
|
|
- <a-image width="850px" height="350px" :src="resSrc" :preview="true" />
|
|
|
- <!-- <image :src="resSrc" style="object-fit: cover" /> -->
|
|
|
- </div>
|
|
|
- <!-- "wmv","avi","flv","mpeg","mpg","rmvb","mov","mkv" -->
|
|
|
- <div
|
|
|
- v-if="
|
|
|
+
|
|
|
+
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
+ <div class="video-info" style="width: 850px">
|
|
|
+ <div
|
|
|
+ v-if="videoFormat == 'jpg' || videoFormat == 'bmp' || videoFormat == 'png' || videoFormat == 'jpeg'"
|
|
|
+ style="width: 850px; height: 350px"
|
|
|
+ >
|
|
|
+ <!-- <img :src="imgs + itemData.coverImagePath" style="width: 100%; height: 100%" /> -->
|
|
|
+ <!-- <img :v-lazy="imagess" style="width: 100%; height: 100%" /> -->
|
|
|
+ <a-image width="850px" height="350px" :src="resSrc" :preview="true" />
|
|
|
+ <!-- <image :src="resSrc" style="object-fit: cover" /> -->
|
|
|
+ </div>
|
|
|
+ <!-- "wmv","avi","flv","mpeg","mpg","rmvb","mov","mkv" -->
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
videoFormat == 'mkv' ||
|
|
|
videoFormat == 'mp4' ||
|
|
|
videoFormat == 'wmv' ||
|
|
|
@@ -26,13 +33,13 @@
|
|
|
videoFormat == 'rmvb' ||
|
|
|
videoFormat == 'mov'
|
|
|
"
|
|
|
- style="width: 850px; height: 350px"
|
|
|
- >
|
|
|
- <video :src="resSrc" controls style="width: 100%; height: 100%" />
|
|
|
- </div>
|
|
|
- <!-- "doc","docx","ppt","pptx","xls","xlsx" -->
|
|
|
- <div
|
|
|
- v-if="
|
|
|
+ style="width: 850px; height: 350px"
|
|
|
+ >
|
|
|
+ <video :src="resSrc" controls style="width: 100%; height: 100%" />
|
|
|
+ </div>
|
|
|
+ <!-- "doc","docx","ppt","pptx","xls","xlsx" -->
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
videoFormat == 'docx' ||
|
|
|
videoFormat == 'doc' ||
|
|
|
videoFormat == 'ppt' ||
|
|
|
@@ -41,120 +48,122 @@
|
|
|
videoFormat == 'xlsx' ||
|
|
|
videoFormat == 'pdf'
|
|
|
"
|
|
|
- style="width: 850px; height: 350px"
|
|
|
- >
|
|
|
- <!-- <PDF :src="resSrc" :width="850" :height="350" /> -->
|
|
|
- <FilePreviewer :fileUrl="resSrc" :fileName="resName" :fileType="fileType" />
|
|
|
- <!-- <a-image width="200px" height="220px" :src="pdfRes" :preview="false" @click="handleDownload(resSrc)" /> -->
|
|
|
- <!-- <a-button type="primary" @click="handleDownload(resSrc)">去预览</a-button> -->
|
|
|
- </div>
|
|
|
- <div style="height: 20px"></div>
|
|
|
- <!-- 用户信息部分 -->
|
|
|
- <div class="user-info" style="display: flex; flex-direction: column">
|
|
|
- <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <div class="user-avatar"></div>
|
|
|
- <div class="user-details">
|
|
|
- <div class="user-name">{{ itemData.resourceCreaterUserName }}</div>
|
|
|
- <div class="publish-time">{{ itemData.uploadTime }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="display: flex; align-items: center" v-if="!isState">
|
|
|
- <div class="metrics">
|
|
|
- <div class="metric-item">
|
|
|
- <span>{{ itemData.viewCount }}</span>
|
|
|
- <span>播放量</span>
|
|
|
- </div>
|
|
|
- <div class="liene"></div>
|
|
|
- <div class="metric-item">
|
|
|
- <span>{{ talkNum }}</span>
|
|
|
- <span>评论</span>
|
|
|
- </div>
|
|
|
- <div class="liene"></div>
|
|
|
- <div class="metric-item">
|
|
|
- <span>{{ collectNum }}</span>
|
|
|
- <span>收藏</span>
|
|
|
+ style="width: 850px; height: 350px"
|
|
|
+ >
|
|
|
+ <!-- <PDF :src="resSrc" :width="850" :height="350" /> -->
|
|
|
+ <FilePreviewer :fileUrl="resSrc" :fileName="resName" :fileType="fileType" />
|
|
|
+ <!-- <a-image width="200px" height="220px" :src="pdfRes" :preview="false" @click="handleDownload(resSrc)" /> -->
|
|
|
+ <!-- <a-button type="primary" @click="handleDownload(resSrc)">去预览</a-button> -->
|
|
|
+ </div>
|
|
|
+ <div style="height: 20px"></div>
|
|
|
+ <!-- 用户信息部分 -->
|
|
|
+ <div class="user-info" style="display: flex; flex-direction: column">
|
|
|
+ <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <div class="user-avatar"></div>
|
|
|
+ <div class="user-details">
|
|
|
+ <div class="user-name">{{ itemData.resourceCreaterUserName }}</div>
|
|
|
+ <div class="publish-time">{{ itemData.uploadTime }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="width: 10px"></div>
|
|
|
- <div class="actions">
|
|
|
- <div
|
|
|
- style="display: flex; align-items: center; cursor: pointer; margin-right: 5px"
|
|
|
- @click="handlerShareDialog"
|
|
|
- >
|
|
|
- <ExportOutlined />
|
|
|
- <div style="width: 10px"></div>
|
|
|
- <button class="share-btn">分享资源</button>
|
|
|
+
|
|
|
+ <div style="display: flex; align-items: center" v-if="!isState">
|
|
|
+ <div class="metrics">
|
|
|
+ <div class="metric-item">
|
|
|
+ <span>{{ itemData.viewCount }}</span>
|
|
|
+ <span>播放量</span>
|
|
|
+ </div>
|
|
|
+ <div class="liene"></div>
|
|
|
+ <div class="metric-item">
|
|
|
+ <span>{{ talkNum }}</span>
|
|
|
+ <span>评论</span>
|
|
|
+ </div>
|
|
|
+ <div class="liene"></div>
|
|
|
+ <div class="metric-item">
|
|
|
+ <span>{{ collectNum }}</span>
|
|
|
+ <span>收藏</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div style="display: flex; align-items: center; cursor: pointer" @click="handlerCollection">
|
|
|
- <StarOutlined v-if="starTag == false" />
|
|
|
- <StarFilled v-if="starTag == true" />
|
|
|
- <div style="width: 10px"></div>
|
|
|
- <button class="favorite-btn">收藏资源</button>
|
|
|
+ <div style="width: 10px"></div>
|
|
|
+ <div class="actions">
|
|
|
+ <div
|
|
|
+ style="display: flex; align-items: center; cursor: pointer; margin-right: 5px"
|
|
|
+ @click="handlerShareDialog"
|
|
|
+ >
|
|
|
+ <ExportOutlined />
|
|
|
+ <div style="width: 10px"></div>
|
|
|
+ <button class="share-btn">分享资源</button>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; align-items: center; cursor: pointer" @click="handlerCollection">
|
|
|
+ <StarOutlined v-if="starTag == false" />
|
|
|
+ <StarFilled v-if="starTag == true" />
|
|
|
+ <div style="width: 10px"></div>
|
|
|
+ <button class="favorite-btn">收藏资源</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 课程信息部分 -->
|
|
|
- <div class="course-info">
|
|
|
+ <!-- 课程信息部分 -->
|
|
|
+ <div class="course-info">
|
|
|
<span>
|
|
|
{{ itemData.resourceDesc }}
|
|
|
</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="resInfo">
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <div class="resInfoTitile"></div>
|
|
|
- <span style="display: block; font-weight: bold">资源信息</span>
|
|
|
- </div>
|
|
|
- <div style="display: flex; justify-content: center; align-items: center; height: 40px">
|
|
|
- <span style="display: block; font-weight: bold">{{ resName }}</span>
|
|
|
- </div>
|
|
|
- <!-- <div style="display: flex; align-items: center">
|
|
|
- <span style="font-weight: bold; margin-right: 10px">授课老师: </span>
|
|
|
- <span style="display: block">{{ teacherName }}</span>
|
|
|
- </div> -->
|
|
|
- <div style="display: flex">
|
|
|
- <span style="font-weight: bold; margin-right: 10px">所属院系: </span>
|
|
|
- <span style="display: block; width: 200px">{{ department }}</span>
|
|
|
- </div>
|
|
|
- <!-- <div style="display: flex; align-items: center">
|
|
|
- <span style="font-weight: bold; margin-right: 10px">所属专业: </span>
|
|
|
- <span style="display: block">{{ major }}</span>
|
|
|
- </div> -->
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <span style="font-weight: bold; margin-right: 10px">资源类型: </span>
|
|
|
- <span style="display: block; width: 200px">{{ courseType }}</span>
|
|
|
- </div>
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <span style="font-weight: bold; margin-right: 10px">资源格式: </span>
|
|
|
- <span style="display: block; width: 200px">{{ videoFormat }}</span>
|
|
|
- </div>
|
|
|
- <!-- <div style="display: flex; align-items: center" v-if="videoFormat != 'jpg'">
|
|
|
- <span style="font-weight: bold; margin-right: 10px">视频时长: </span>
|
|
|
- <span style="display: block">{{ videoDuration }}</span>
|
|
|
- </div> -->
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <span style="font-weight: bold; margin-right: 10px">容量大小: </span>
|
|
|
- <span style="display: block; width: 200px">{{ videoSize }}</span>
|
|
|
- </div>
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <span style="font-weight: bold; margin-right: 10px">发布时间: </span>
|
|
|
- <span style="display: block; width: 200px">{{ releaseTime }}</span>
|
|
|
- </div>
|
|
|
- <!-- <div style="display: flex; flex-direction: column">
|
|
|
- <span style="font-weight: bold; margin-right: 10px">课程介绍: </span>
|
|
|
+ <div class="resInfo">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <div class="resInfoTitile"></div>
|
|
|
+ <span style="display: block; font-weight: bold">资源信息</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; justify-content: center; align-items: center; height: 40px">
|
|
|
+ <span style="display: block; font-weight: bold">{{ resName }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="display: flex; align-items: center">
|
|
|
+ <span style="font-weight: bold; margin-right: 10px">授课老师: </span>
|
|
|
+ <span style="display: block">{{ teacherName }}</span>
|
|
|
+ </div> -->
|
|
|
+ <div style="display: flex">
|
|
|
+ <span style="font-weight: bold; margin-right: 10px">所属院系: </span>
|
|
|
+ <span style="display: block; width: 200px">{{ department }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="display: flex; align-items: center">
|
|
|
+ <span style="font-weight: bold; margin-right: 10px">所属专业: </span>
|
|
|
+ <span style="display: block">{{ major }}</span>
|
|
|
+ </div> -->
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <span style="font-weight: bold; margin-right: 10px">资源类型: </span>
|
|
|
+ <span style="display: block; width: 200px">{{ courseType }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <span style="font-weight: bold; margin-right: 10px">资源格式: </span>
|
|
|
+ <span style="display: block; width: 200px">{{ videoFormat }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="display: flex; align-items: center" v-if="videoFormat != 'jpg'">
|
|
|
+ <span style="font-weight: bold; margin-right: 10px">视频时长: </span>
|
|
|
+ <span style="display: block">{{ videoDuration }}</span>
|
|
|
+ </div> -->
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <span style="font-weight: bold; margin-right: 10px">容量大小: </span>
|
|
|
+ <span style="display: block; width: 200px">{{ videoSize }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <span style="font-weight: bold; margin-right: 10px">发布时间: </span>
|
|
|
+ <span style="display: block; width: 200px">{{ releaseTime }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="display: flex; flex-direction: column">
|
|
|
+ <span style="font-weight: bold; margin-right: 10px">课程介绍: </span>
|
|
|
+ <br />
|
|
|
+ <span style="display: block">{{ courseDescription }}</span>
|
|
|
+ </div> -->
|
|
|
<br />
|
|
|
- <span style="display: block">{{ courseDescription }}</span>
|
|
|
- </div> -->
|
|
|
- <br />
|
|
|
- <span>资源标签</span>
|
|
|
- <div style="display: flex; width: 100%; flex-wrap: wrap">
|
|
|
- <a-tag style="margin-top: 5px" v-for="tag in tags" :key="tag">{{ tag }}</a-tag>
|
|
|
+ <span>资源标签</span>
|
|
|
+ <div style="display: flex; width: 100%; flex-wrap: wrap">
|
|
|
+ <a-tag style="margin-top: 5px" v-for="tag in tags" :key="tag">{{ tag }}</a-tag>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
<ShareDialog ref="ShareDialogRef"></ShareDialog>
|
|
|
</div>
|
|
|
@@ -522,6 +531,7 @@
|
|
|
|
|
|
.user-info-container {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.resInfoTitile {
|