|
|
@@ -1,311 +1,340 @@
|
|
|
<template>
|
|
|
- <el-container>
|
|
|
- <el-header height="220">
|
|
|
- <el-card class="box-card" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <div v-if="albumInfo !== null" slot="header" class="clearfix">
|
|
|
- <el-image
|
|
|
- lazy
|
|
|
- fit="cover"
|
|
|
- class="coverImg"
|
|
|
- :src="albumInfo.coverUrl"
|
|
|
- />
|
|
|
- <el-row>
|
|
|
- <span>当前播放列表</span>
|
|
|
- <el-select
|
|
|
- v-model="queryInfo.albumId"
|
|
|
- clearable
|
|
|
- placeholder="播放列表"
|
|
|
- style="margin-left: 5px"
|
|
|
- @change="onSelectChange"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in allAlbums"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- <span style="padding-left: 20px">
|
|
|
- <span style="color: blue">{{ albumInfo.total }}</span> 个稿件
|
|
|
- <span style="color: red">{{ albumInfo.scopeStr }}</span>
|
|
|
- </span>
|
|
|
- <el-button style="float: right; padding: 10px" type="text" @click="onPlayAlbum">播放全部</el-button>
|
|
|
- </el-row>
|
|
|
+ <div class="album-page-container">
|
|
|
+ <header class="album-header-card">
|
|
|
+ <div v-if="albumInfo" class="album-info-wrapper">
|
|
|
+ <div class="album-cover-box">
|
|
|
+ <el-image lazy fit="cover" class="header-cover-img" :src="albumInfo.coverUrl" />
|
|
|
</div>
|
|
|
- <div class="text item" />
|
|
|
- </el-card>
|
|
|
- </el-header>
|
|
|
- <el-main>
|
|
|
- <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <el-col :md="24">
|
|
|
- <div v-if="dataList.length === 0" align="center">
|
|
|
- <img src="@/assets/img/not-result.png">
|
|
|
- <div>还没有收藏呢~</div>
|
|
|
+
|
|
|
+ <div class="album-detail-content">
|
|
|
+ <div class="top-row">
|
|
|
+ <h2 class="album-title">{{ albumInfo.title || '播放列表' }}</h2>
|
|
|
+ <el-button type="primary" size="small" icon="el-icon-video-play" class="play-all-btn" @click="onPlayAlbum">播放全部</el-button>
|
|
|
</div>
|
|
|
- <div v-if="dataList.length !== 0">
|
|
|
- <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.title">
|
|
|
- <router-link target="_blank" :to="`/video/${item.videoId}`">
|
|
|
- <el-image
|
|
|
- lazy
|
|
|
- fit="cover"
|
|
|
- class="coverImg"
|
|
|
- :src="item.coverUrl"
|
|
|
- />
|
|
|
- <span style="position: absolute; top: 0; left: 60%; color:white"> {{ item.duration }} </span>
|
|
|
- <span style="position: absolute; bottom: 0; left: 0; color:white">
|
|
|
- <i v-if="item.horizontal" class="el-icon-monitor" />
|
|
|
- <i v-else class="el-icon-mobile-phone" />
|
|
|
- </span>
|
|
|
- </router-link>
|
|
|
- </div>
|
|
|
- <div style="padding: 14px">
|
|
|
- <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${item.videoId}`">
|
|
|
- <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
|
|
|
- </router-link>
|
|
|
- </div>
|
|
|
- <div style="padding: 14px">
|
|
|
- <span style="left: 0;margin-bottom: 0px;color: black;">
|
|
|
- <router-link target="_blank" :to="`/user/${item.user.userId}`">
|
|
|
- <i class="el-icon-user"> {{ item.user.screenName | ellipsisUsername }} </i></router-link> • {{ item.pubDateStr }}
|
|
|
+
|
|
|
+ <div class="filter-row">
|
|
|
+ <div class="select-group">
|
|
|
+ <span class="label hidden-xs-only">切换列表：</span>
|
|
|
+ <el-select
|
|
|
+ v-model="queryInfo.albumId"
|
|
|
+ size="small"
|
|
|
+ class="album-select"
|
|
|
+ @change="onSelectChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in allAlbums"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="stats-tags">
|
|
|
+ <el-tag size="mini" effect="plain" type="info">{{ albumInfo.total }} 个稿件</el-tag>
|
|
|
+ <el-tag size="mini" effect="plain" type="success" class="mgl-8">{{ albumInfo.scopeStr }}</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <main class="album-main-content">
|
|
|
+ <div v-if="dataList.length === 0" class="empty-status">
|
|
|
+ <el-empty description="暂无收藏内容" :image-size="150"></el-empty>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-row :gutter="20" class="video-grid">
|
|
|
+ <el-col
|
|
|
+ v-for="(item, index) in dataList"
|
|
|
+ :key="index"
|
|
|
+ :xs="12" :sm="8" :md="6" :lg="4" :xl="4"
|
|
|
+ class="video-col"
|
|
|
+ >
|
|
|
+ <el-card :body-style="{ padding: '0px' }" class="video-card" shadow="hover">
|
|
|
+ <div class="card-image-box">
|
|
|
+ <router-link :to="`/video/${item.videoId}`" target="_blank">
|
|
|
+ <el-image lazy fit="cover" class="card-cover" :src="item.coverUrl" />
|
|
|
+ <div class="card-badges">
|
|
|
+ <span class="duration">{{ item.duration }}</span>
|
|
|
+ <span class="device-icon">
|
|
|
+ <i :class="item.horizontal ? 'el-icon-monitor' : 'el-icon-mobile-phone'" />
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div style="padding: 14px;">
|
|
|
- <el-tooltip class="item" effect="dark" content="删除收藏" placement="top-end">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="danger"
|
|
|
- class="el-icon-delete"
|
|
|
- @click="onDeleteItem(item)"
|
|
|
- />
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-info">
|
|
|
+ <router-link :to="`/video/${item.videoId}`" target="_blank" class="video-title-link">
|
|
|
+ <h4 class="video-title">{{ item.title }}</h4>
|
|
|
+ </router-link>
|
|
|
+
|
|
|
+ <div class="video-meta">
|
|
|
+ <router-link :to="`/user/${item.user.userId}`" target="_blank" class="user-link">
|
|
|
+ <i class="el-icon-user" /> {{ item.user.screenName }}
|
|
|
+ </router-link>
|
|
|
+ <span class="pub-date">{{ item.pubDateStr }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-btns">
|
|
|
+ <el-button-group class="full-width-btns">
|
|
|
+ <el-tooltip content="设为封面" placement="top" :disabled="screenWidth < 768">
|
|
|
+ <el-button size="mini" icon="el-icon-picture-outline" @click="onSetCover(item)"></el-button>
|
|
|
</el-tooltip>
|
|
|
- <el-tooltip class="item" effect="dark" content="设为封面" placement="top-end">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="warning"
|
|
|
- class="el-icon-picture-outline"
|
|
|
- @click="onSetCover(item)"
|
|
|
- />
|
|
|
+ <el-tooltip content="删除收藏" placement="top" :disabled="screenWidth < 768">
|
|
|
+ <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="onDeleteItem(item)"></el-button>
|
|
|
</el-tooltip>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </div>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-pagination
|
|
|
- hide-on-single-page
|
|
|
- :small="screenWidth <= 768"
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="pageSize"
|
|
|
- :current-page="currentPage"
|
|
|
- :total="totalSize"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- @prev-click="handleCurrentChange"
|
|
|
- @next-click="handleCurrentChange"
|
|
|
- />
|
|
|
- </el-main>
|
|
|
-
|
|
|
- <!-- 创建相册对话框 -->
|
|
|
- <el-dialog
|
|
|
- append-to-body
|
|
|
- :visible.sync="createAlbumDiaglog"
|
|
|
- width="30%"
|
|
|
- center
|
|
|
- />
|
|
|
- </el-container>
|
|
|
+
|
|
|
+ <div class="pagination-wrapper">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :small="screenWidth < 768"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :total="totalSize"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <el-backtop target=".admin-main"></el-backtop>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- collectItem,
|
|
|
- getAlbumItems,
|
|
|
- getUserAlbumSelectList
|
|
|
-} from '@/api/collect'
|
|
|
+import { collectItem, getAlbumItems, getUserAlbumSelectList } from '@/api/collect'
|
|
|
|
|
|
export default {
|
|
|
name: 'AlbumPost',
|
|
|
- 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
|
|
|
- }
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
- allAlbums: [
|
|
|
- { label: '全部', value: 1 }
|
|
|
- ],
|
|
|
- queryInfo: {
|
|
|
- albumId: null,
|
|
|
- pn: 1
|
|
|
- },
|
|
|
- // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ allAlbums: [],
|
|
|
+ queryInfo: { albumId: null, pn: 1 },
|
|
|
screenWidth: document.body.clientWidth,
|
|
|
currentPage: 1,
|
|
|
pageSize: 12,
|
|
|
totalSize: 0,
|
|
|
dataList: [],
|
|
|
- albumInfo: null,
|
|
|
- // **********************************************************************
|
|
|
- createAlbumDiaglog: false
|
|
|
+ albumInfo: null
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getSelectList()
|
|
|
- const albumId = this.$route.query.albumId
|
|
|
- if (albumId !== undefined) {
|
|
|
- this.queryInfo.albumId = albumId
|
|
|
- }
|
|
|
-
|
|
|
- const pn = this.$route.query.pn
|
|
|
- if (albumId !== undefined) {
|
|
|
- this.queryInfo.pn = pn
|
|
|
- this.currentPage = pn
|
|
|
+ const { albumId, pn } = this.$route.query
|
|
|
+ if (albumId) this.queryInfo.albumId = albumId
|
|
|
+ if (pn) {
|
|
|
+ this.queryInfo.pn = parseInt(pn)
|
|
|
+ this.currentPage = parseInt(pn)
|
|
|
}
|
|
|
-
|
|
|
this.getData()
|
|
|
- document.title = '我的播放列表'
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.addEventListener('resize', this.handleResize)
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener('resize', this.handleResize)
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleResize() {
|
|
|
+ this.screenWidth = document.body.clientWidth
|
|
|
+ },
|
|
|
onSelectChange() {
|
|
|
this.queryInfo.pn = 1
|
|
|
this.currentPage = 1
|
|
|
- this.getData()
|
|
|
- this.$router.push({
|
|
|
- path: '/bg/my/album',
|
|
|
- query: this.queryInfo
|
|
|
- })
|
|
|
+ this.updateRouteAndData()
|
|
|
},
|
|
|
- handleCurrentChange(pageNumber) {
|
|
|
- this.currentPage = pageNumber
|
|
|
- this.queryInfo.pn = pageNumber
|
|
|
- // this.getData()
|
|
|
- this.$router.push({
|
|
|
- path: '/bg/my/album',
|
|
|
- query: this.queryInfo
|
|
|
- })
|
|
|
- // 回到顶部
|
|
|
- scrollTo(0, 0)
|
|
|
+ handleCurrentChange(page) {
|
|
|
+ this.currentPage = page
|
|
|
+ this.queryInfo.pn = page
|
|
|
+ this.updateRouteAndData()
|
|
|
+ const container = document.querySelector('.admin-main')
|
|
|
+ if (container) container.scrollTo({ top: 0, behavior: 'smooth' })
|
|
|
+ },
|
|
|
+ updateRouteAndData() {
|
|
|
+ this.$router.push({ path: '/bg/my/album', query: this.queryInfo })
|
|
|
this.getData()
|
|
|
},
|
|
|
getData() {
|
|
|
getAlbumItems(this.queryInfo).then(resp => {
|
|
|
if (resp.code === 0) {
|
|
|
- const respData = resp.data
|
|
|
- this.dataList = respData.pageList.list
|
|
|
- this.totalSize = respData.pageList.totalSize
|
|
|
- this.albumInfo = respData.albumInfo
|
|
|
+ this.dataList = resp.data.pageList.list
|
|
|
+ this.totalSize = resp.data.pageList.totalSize
|
|
|
+ this.albumInfo = resp.data.albumInfo
|
|
|
this.queryInfo.albumId = this.albumInfo.albumId
|
|
|
}
|
|
|
- }).catch(error => {
|
|
|
- this.$message({
|
|
|
- message: error.message,
|
|
|
- type: 'error',
|
|
|
- duration: 1000
|
|
|
- })
|
|
|
})
|
|
|
},
|
|
|
getSelectList() {
|
|
|
getUserAlbumSelectList().then(resp => {
|
|
|
- if (resp.code === 0) {
|
|
|
- this.allAlbums = resp.data
|
|
|
- }
|
|
|
+ if (resp.code === 0) this.allAlbums = resp.data
|
|
|
})
|
|
|
},
|
|
|
- // 设为封面
|
|
|
onSetCover(item) {
|
|
|
- const jsonData = {}
|
|
|
- jsonData.albumId = this.albumInfo.albumId
|
|
|
- jsonData.postId = item.videoId
|
|
|
- jsonData.action = 3
|
|
|
- collectItem(jsonData).then(res => {
|
|
|
+ collectItem({ albumId: this.albumInfo.albumId, postId: item.videoId, action: 3 }).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '封面已更新!'
|
|
|
- })
|
|
|
+ this.$message.success('已更新封面')
|
|
|
+ this.getData()
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- // 移除收藏
|
|
|
onDeleteItem(item) {
|
|
|
- this.$confirm('确认删除本收藏？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- const jsonData = {}
|
|
|
- jsonData.albumId = this.albumInfo.albumId
|
|
|
- jsonData.postId = item.videoId
|
|
|
- jsonData.action = 2
|
|
|
- collectItem(jsonData).then(res => {
|
|
|
+ this.$confirm('确定移除该收藏吗？', '提示', { type: 'warning' }).then(() => {
|
|
|
+ collectItem({ albumId: this.albumInfo.albumId, postId: item.videoId, action: 2 }).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- this.$router.go(0)
|
|
|
+ this.$message.success('已移除')
|
|
|
+ this.getData()
|
|
|
}
|
|
|
})
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '已取消'
|
|
|
- })
|
|
|
- })
|
|
|
+ }).catch(() => {})
|
|
|
},
|
|
|
- onPlayAlbum() {
|
|
|
- this.$message.info('暂未实现')
|
|
|
- }
|
|
|
+ onPlayAlbum() { this.$message.info('播放列表功能建设中') }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-/*处于手机屏幕时*/
|
|
|
-@media screen and (max-width: 768px) {
|
|
|
- .tit {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 12px;
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
- .time {
|
|
|
- font-size: 10px;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- .num {
|
|
|
- font-size: 9px;
|
|
|
- padding-top: 3px;
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- margin-top: 2px;
|
|
|
- line-height: 7px;
|
|
|
- }
|
|
|
- .coverImg {
|
|
|
- height: 120px !important;
|
|
|
- }
|
|
|
+<style scoped>
|
|
|
+/* 1. 基础容器与布局修复 */
|
|
|
+.album-page-container {
|
|
|
+ padding: 0;
|
|
|
+ max-width: 1400px; /* 限制 PC 端最大宽度，防止卡片过稀疏 */
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
-.coverImg {
|
|
|
+.album-header-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 24px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0,0,0,0.04);
|
|
|
+}
|
|
|
+
|
|
|
+.album-info-wrapper {
|
|
|
+ display: flex;
|
|
|
+ gap: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.album-cover-box {
|
|
|
+ width: 180px;
|
|
|
+ height: 110px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.header-cover-img { width: 100%; height: 100%; }
|
|
|
+
|
|
|
+.album-detail-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
|
|
|
+
|
|
|
+.top-row { display: flex; justify-content: space-between; align-items: flex-start; }
|
|
|
+
|
|
|
+.album-title { margin: 0; font-size: 20px; color: #303133; font-weight: 600; }
|
|
|
+
|
|
|
+.filter-row { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
|
|
|
+
|
|
|
+.select-group { display: flex; align-items: center; }
|
|
|
+
|
|
|
+.album-select { width: 200px; }
|
|
|
+
|
|
|
+.mgl-8 { margin-left: 8px; }
|
|
|
+
|
|
|
+/* 2. 视频卡片 PC 端优化 */
|
|
|
+.video-grid { margin: 0 -10px; } /* 抵消 col 的 padding */
|
|
|
+
|
|
|
+.video-card {
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.card-image-box {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
- height: 90px;
|
|
|
- display: block;
|
|
|
+ padding-top: 56.25%; /* 16:9 比例锁定 */
|
|
|
+}
|
|
|
+
|
|
|
+.card-cover {
|
|
|
+ position: absolute;
|
|
|
+ top: 0; left: 0;
|
|
|
+ width: 100%; height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.card-badges {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 6px; left: 0; right: 0;
|
|
|
+ padding: 0 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: linear-gradient(transparent, rgba(0,0,0,0.6));
|
|
|
+ color: #fff; font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-info { padding: 12px; }
|
|
|
+
|
|
|
+.video-title {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 40px; /* 两行高度固定 */
|
|
|
+ line-height: 20px;
|
|
|
+ color: #303133;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.video-meta {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-link { color: #606266; text-decoration: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+.user-link:hover { color: #409EFF; }
|
|
|
+
|
|
|
+/* 按钮组 */
|
|
|
+.full-width-btns { display: flex; width: 100%; }
|
|
|
+.full-width-btns .el-button { flex: 1; }
|
|
|
+
|
|
|
+.pagination-wrapper { padding: 40px 0; display: flex; justify-content: center; }
|
|
|
+
|
|
|
+/* 3. 移动端专项适配修复溢出 */
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .album-header-card { padding: 15px; margin-bottom: 15px; }
|
|
|
+
|
|
|
+ .album-info-wrapper { flex-direction: column; gap: 12px; align-items: center; text-align: center; }
|
|
|
+
|
|
|
+ .album-cover-box { width: 140px; height: 85px; }
|
|
|
+
|
|
|
+ .top-row { flex-direction: column; align-items: center; gap: 10px; }
|
|
|
+
|
|
|
+ .album-title { font-size: 16px; }
|
|
|
+
|
|
|
+ .filter-row { flex-direction: column; gap: 10px; align-items: stretch; }
|
|
|
+
|
|
|
+ .album-select { width: 100%; }
|
|
|
+
|
|
|
+ .video-grid { margin: 0 -5px; }
|
|
|
+
|
|
|
+ .video-col { padding: 0 5px !important; }
|
|
|
+
|
|
|
+ .video-title { font-size: 13px; height: 36px; line-height: 18px; margin-bottom: 6px; }
|
|
|
+
|
|
|
+ .video-meta { flex-direction: column; gap: 4px; margin-bottom: 8px; }
|
|
|
+
|
|
|
+ .card-info { padding: 8px; }
|
|
|
+}
|
|
|
+
|
|
|
+/* 隐藏辅助类 */
|
|
|
+@media screen and (max-width: 767px) {
|
|
|
+ .hidden-xs-only { display: none !important; }
|
|
|
}
|
|
|
</style>
|
