|
|
@@ -1,139 +1,137 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<h1>{{ resName }}</h1>
|
|
|
- <div style="height: 25px"></div>
|
|
|
<div class="user-info-container">
|
|
|
- <div class="video-info">
|
|
|
- <div
|
|
|
- v-if="videoFormat == 'jpg' || videoFormat == 'bmp' || videoFormat == 'png' || videoFormat == 'jpeg'"
|
|
|
- style="width: 100%; height: 600px"
|
|
|
- >
|
|
|
- <a-image width="100%" height="600px" :src="fileSrc(resSrc)" :preview="true" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-if="
|
|
|
- videoFormat == 'mkv' ||
|
|
|
- videoFormat == 'mp4' ||
|
|
|
- videoFormat == 'wmv' ||
|
|
|
- videoFormat == 'avi' ||
|
|
|
- videoFormat == 'flv' ||
|
|
|
- videoFormat == 'mpeg' ||
|
|
|
- videoFormat == 'mpg' ||
|
|
|
- videoFormat == 'rmvb' ||
|
|
|
- videoFormat == 'mov'
|
|
|
- "
|
|
|
- style="width: 100%; height: 600px"
|
|
|
- >
|
|
|
- <video :src="fileSrc(resSrc)" controls style="width: 100%; height: 100%" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-if="
|
|
|
- videoFormat == 'docx' ||
|
|
|
- videoFormat == 'doc' ||
|
|
|
- videoFormat == 'ppt' ||
|
|
|
- videoFormat == 'pptx' ||
|
|
|
- videoFormat == 'xls' ||
|
|
|
- videoFormat == 'xlsx' ||
|
|
|
- videoFormat == 'pdf'
|
|
|
- "
|
|
|
- style="width: 100%; height: 600px"
|
|
|
- >
|
|
|
- <FilePreviewer v-if="resSrc" :fileUrl="fileSrc(resSrc)" :fileName="resName" :fileType="fileType" />
|
|
|
- <div v-if="!resSrc">暂无数据</div>
|
|
|
- </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>
|
|
|
+ <a-card :bordered="false" class="boxShadow cardBox mr-3 flex-3">
|
|
|
+ <div class="video-info">
|
|
|
+ <div
|
|
|
+ v-if="videoFormat == 'jpg' || videoFormat == 'bmp' || videoFormat == 'png' || videoFormat == 'jpeg'"
|
|
|
+ style="width: 100%; height: 600px"
|
|
|
+ >
|
|
|
+ <a-image width="100%" height="600px" :src="fileSrc(resSrc)" :preview="true" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ videoFormat == 'mkv' ||
|
|
|
+ videoFormat == 'mp4' ||
|
|
|
+ videoFormat == 'wmv' ||
|
|
|
+ videoFormat == 'avi' ||
|
|
|
+ videoFormat == 'flv' ||
|
|
|
+ videoFormat == 'mpeg' ||
|
|
|
+ videoFormat == 'mpg' ||
|
|
|
+ videoFormat == 'rmvb' ||
|
|
|
+ videoFormat == 'mov'
|
|
|
+ "
|
|
|
+ style="width: 100%; height: 600px"
|
|
|
+ >
|
|
|
+ <video :src="fileSrc(resSrc)" controls style="width: 100%; height: 100%" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ videoFormat == 'docx' ||
|
|
|
+ videoFormat == 'doc' ||
|
|
|
+ videoFormat == 'ppt' ||
|
|
|
+ videoFormat == 'pptx' ||
|
|
|
+ videoFormat == 'xls' ||
|
|
|
+ videoFormat == 'xlsx' ||
|
|
|
+ videoFormat == 'pdf'
|
|
|
+ "
|
|
|
+ style="width: 100%; height: 600px"
|
|
|
+ >
|
|
|
+ <FilePreviewer v-if="resSrc" :fileUrl="fileSrc(resSrc)" :fileName="resName" :fileType="fileType" />
|
|
|
+ <div v-if="!resSrc">暂无数据</div>
|
|
|
+ </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>
|
|
|
- </div>
|
|
|
- <div class="resInfo">
|
|
|
- <div class="titleBox">
|
|
|
- <div class="resInfoTitile"></div>
|
|
|
- <span style="display: block; font-weight: bold;font-size: 20px;">资源信息</span>
|
|
|
- </div>
|
|
|
- <div class="lableBox">
|
|
|
- <span style="display: block; font-weight: bold;font-size: 18px;">{{ resName }}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="lableBox">
|
|
|
- <span class="lableName">所属院系: </span>
|
|
|
- <span class="lableVal">{{ department }}</span>
|
|
|
</div>
|
|
|
+ </a-card>
|
|
|
+ <a-card class="flex-1">
|
|
|
+ <div class="resInfo">
|
|
|
+ <div class="titleBox">
|
|
|
+ <span style="display: block; font-weight: bold; font-size: 20px">资源信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="lableBox">
|
|
|
+ <span style="display: block; font-weight: bold; font-size: 18px">{{ resName }}</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="lableBox">
|
|
|
- <span class="lableName">资源类型: </span>
|
|
|
- <span class="lableVal">{{ courseType }}</span>
|
|
|
- </div>
|
|
|
- <div class="lableBox">
|
|
|
- <span class="lableName">资源格式: </span>
|
|
|
- <span class="lableVal">{{ videoFormat }}</span>
|
|
|
- </div>
|
|
|
+ <div class="lableBox">
|
|
|
+ <span class="lableName">所属院系: </span>
|
|
|
+ <span class="lableVal">{{ department }}</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="lableBox">
|
|
|
- <span class="lableName">容量大小: </span>
|
|
|
- <span class="lableVal">{{ videoSize }}</span>
|
|
|
- </div>
|
|
|
- <div class="lableBox">
|
|
|
- <span class="lableName">发布时间: </span>
|
|
|
- <span class="lableVal">{{ releaseTime }}</span>
|
|
|
- </div>
|
|
|
- <div class="lableBox">
|
|
|
- <span class="lableName">资源描述: </span>
|
|
|
- <span class="lableVal">{{ itemData.resourceDesc }}</span>
|
|
|
- </div>
|
|
|
+ <div class="lableBox">
|
|
|
+ <span class="lableName">资源类型: </span>
|
|
|
+ <span class="lableVal">{{ courseType }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="lableBox">
|
|
|
+ <span class="lableName">资源格式: </span>
|
|
|
+ <span class="lableVal">{{ videoFormat }}</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>
|
|
|
+ <div class="lableBox">
|
|
|
+ <span class="lableName">容量大小: </span>
|
|
|
+ <span class="lableVal">{{ videoSize }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="lableBox">
|
|
|
+ <span class="lableName">发布时间: </span>
|
|
|
+ <span class="lableVal">{{ releaseTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="lableBox">
|
|
|
+ <span class="lableName">资源描述: </span>
|
|
|
+ <span class="lableVal">{{ itemData.resourceDesc }}</span>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
+ </a-card>
|
|
|
</div>
|
|
|
<ShareDialog ref="ShareDialogRef"></ShareDialog>
|
|
|
</div>
|
|
|
@@ -344,8 +342,6 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
- height: 90px;
|
|
|
- border: 1px solid #dfe2e5;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
@@ -457,16 +453,10 @@
|
|
|
height: 100%; /* 确保填满容器高度 */
|
|
|
flex: 1;
|
|
|
}
|
|
|
- .resInfo {
|
|
|
- margin-left: 10px;
|
|
|
- width: 300px;
|
|
|
- height: 710px;
|
|
|
- border: 1px solid #dfe2e5;
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
|
|
|
.user-info-container {
|
|
|
display: flex;
|
|
|
+ align-items: stretch;
|
|
|
}
|
|
|
|
|
|
.resInfoTitile {
|
|
|
@@ -508,4 +498,17 @@
|
|
|
width: 200px;
|
|
|
margin-left: 6px;
|
|
|
}
|
|
|
+ .boxShadow {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.04);
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ :deep(.cardBox .ant-card-body) {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .flex-3 {
|
|
|
+ flex: 3;
|
|
|
+ }
|
|
|
+ .flex-1 {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
</style>
|