|
|
@@ -90,8 +90,34 @@
|
|
|
播放列表<el-badge :value="userContentData.albumCount" :max="9999" class="item" type="warning" />
|
|
|
</span>
|
|
|
<div v-if="activeName === 'album'">
|
|
|
- <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
|
|
|
- <span>{{ item.albumName }}</span>
|
|
|
+ <el-col
|
|
|
+ v-for="(item, index) in dataList"
|
|
|
+ :key="index"
|
|
|
+ :md="6"
|
|
|
+ :sm="12"
|
|
|
+ :xs="12"
|
|
|
+ style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px"
|
|
|
+ >
|
|
|
+ <el-card :body-style="{ padding: '0px' }" class="card">
|
|
|
+ <div class="imgs" style="cursor: pointer" :title="item.albumName">
|
|
|
+ <router-link style="text-decoration-line: none" target="_blank" :to="`/playlist/${item.albumId}`">
|
|
|
+ <el-image
|
|
|
+ lazy
|
|
|
+ fit="cover"
|
|
|
+ class="coverImg"
|
|
|
+ :src="item.coverUrl"
|
|
|
+ />
|
|
|
+ <span class="el-icon-files" style="position: absolute; bottom: 0; right: 10%; color:red">
|
|
|
+ {{ item.total }}
|
|
|
+ </span>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ <div style="padding: 14px">
|
|
|
+ <router-link style="text-decoration-line: none" target="_blank" :to="`/playlist/${item.albumId}`">
|
|
|
+ <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.albumName | ellipsis }}</span>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
@@ -129,10 +155,28 @@ import ImageAlbumCard from '@/components/card/ImageAlbumCard'
|
|
|
import { getUserInfo, checkRelation, followUser, unfollowUser } from '@/api/user'
|
|
|
import { getUserContentData, getUserVideos } from '@/api/video'
|
|
|
import { getAlbumImage1 } from '@/api/image'
|
|
|
-import { getPostAlbums, getUserPlaylist } from '@/api/collect'
|
|
|
+import { getUserPlaylist } from '@/api/collect'
|
|
|
|
|
|
export default {
|
|
|
name: 'Home',
|
|
|
+ filters: {
|
|
|
+ ellipsis(value) {
|
|
|
+ if (!value) return ''
|
|
|
+ const max = 15
|
|
|
+ if (value.length > max) {
|
|
|
+ return value.slice(0, max) + '...'
|
|
|
+ }
|
|
|
+ return value
|
|
|
+ },
|
|
|
+ ellipsisUsername(value) {
|
|
|
+ if (!value) return ''
|
|
|
+ const max = 10
|
|
|
+ if (value.length > max) {
|
|
|
+ return value.slice(0, max) + '...'
|
|
|
+ }
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ },
|
|
|
components: { StampBadge, VideoCard, ImageAlbumCard },
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -311,6 +355,9 @@ export default {
|
|
|
padding-left: 0.5%;
|
|
|
padding-right: 0.5%;
|
|
|
}
|
|
|
+ .coverImg {
|
|
|
+ height: 120px !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.not-result {
|
|
|
@@ -323,4 +370,14 @@ export default {
|
|
|
margin-top: 10px;
|
|
|
margin-right: 40px;
|
|
|
}
|
|
|
+
|
|
|
+.coverImg {
|
|
|
+ width: 100%;
|
|
|
+ height: 90px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.imgs {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
</style>
|