refactor(frontend): Rework home layout and user interactions
This commit is contained in:
@@ -1,276 +1,673 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<section class="hero-panel">
|
||||
<div class="hero-copy">
|
||||
<span class="hero-tag">热门精选</span>
|
||||
<h1>发现值得反复观看的优质内容</h1>
|
||||
<p>围绕技术分享、知识学习与生活记录构建内容分发首页，提供推荐、热门与分类浏览体验。</p>
|
||||
<section class="channel-panel page-shell">
|
||||
<div
|
||||
class="channel-main"
|
||||
@mouseenter="categoryExpanded = true"
|
||||
@mouseleave="categoryExpanded = false"
|
||||
>
|
||||
<div class="quick-entry-group">
|
||||
<button
|
||||
v-for="entry in quickEntries"
|
||||
:key="entry.label"
|
||||
class="quick-entry"
|
||||
@click="entry.action()"
|
||||
>
|
||||
<span class="quick-icon">{{ entry.short }}</span>
|
||||
<span>{{ entry.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="channel-grid">
|
||||
<button
|
||||
v-for="entry in visibleCategoryEntries"
|
||||
:key="entry.label"
|
||||
class="channel-pill"
|
||||
@click="entry.action()"
|
||||
>
|
||||
{{ entry.label }}
|
||||
</button>
|
||||
<button
|
||||
v-if="hiddenCategoryEntries.length"
|
||||
class="channel-pill more-pill"
|
||||
@mouseenter="categoryExpanded = true"
|
||||
>
|
||||
更多
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<transition name="expand-fade">
|
||||
<div
|
||||
v-if="categoryExpanded && hiddenCategoryEntries.length"
|
||||
class="channel-expand"
|
||||
>
|
||||
<button
|
||||
v-for="entry in hiddenCategoryEntries"
|
||||
:key="`extra-${entry.label}`"
|
||||
class="channel-pill"
|
||||
@click="entry.action()"
|
||||
>
|
||||
{{ entry.label }}
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="hero-metrics">
|
||||
<div class="metric"><strong>{{ videos.length || 12 }}</strong><span>精选视频</span></div>
|
||||
<div class="metric"><strong>{{ categories.length || 5 }}</strong><span>内容分区</span></div>
|
||||
<div class="metric"><strong>24h</strong><span>热度更新</span></div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="top-feed page-shell">
|
||||
<div class="top-feed-main">
|
||||
<van-swipe
|
||||
class="banner-swipe"
|
||||
:autoplay="4000"
|
||||
indicator-color="#ffffff"
|
||||
>
|
||||
<van-swipe-item
|
||||
v-for="item in bannerVideos"
|
||||
:key="item.id"
|
||||
>
|
||||
<button
|
||||
class="banner-card"
|
||||
@click="goToVideo(item.id)"
|
||||
>
|
||||
<van-image
|
||||
:src="getCoverUrl(item.coverUrl)"
|
||||
fit="cover"
|
||||
class="banner-image"
|
||||
/>
|
||||
<div class="banner-overlay">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<span>{{ item.userNickname || '匿名用户' }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
|
||||
<div class="top-feed-side">
|
||||
<button
|
||||
v-for="item in topSideVideos"
|
||||
:key="item.id"
|
||||
class="top-video-card"
|
||||
@click="goToVideo(item.id)"
|
||||
>
|
||||
<div class="top-video-cover">
|
||||
<van-image
|
||||
:src="getCoverUrl(item.coverUrl)"
|
||||
fit="cover"
|
||||
class="top-video-image"
|
||||
/>
|
||||
<div class="top-video-mask">
|
||||
<span>{{ formatPlayCount(item.viewCount) }}</span>
|
||||
<span>{{ formatDuration(item.duration) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-video-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 分类导航 -->
|
||||
<div class="category-nav">
|
||||
<van-tabs v-model:active="activeCategory" sticky shrink @change="onCategoryChange">
|
||||
<van-tab title="推荐" name="recommend" />
|
||||
<van-tab title="热门" name="hot" />
|
||||
<van-tab v-for="cat in categories" :key="cat.id" :title="cat.name" :name="cat.id" />
|
||||
</van-tabs>
|
||||
</div>
|
||||
<section class="content-section page-shell">
|
||||
<div class="content-main">
|
||||
<div
|
||||
v-for="row in categoryRows"
|
||||
:key="row.id"
|
||||
class="content-row"
|
||||
>
|
||||
<div class="row-head">
|
||||
<div class="row-title">
|
||||
<span class="row-dot" />
|
||||
<strong>{{ row.name }}</strong>
|
||||
</div>
|
||||
<button
|
||||
class="row-more"
|
||||
@click="router.push(`/category/${row.id}`)"
|
||||
>
|
||||
更多
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 视频列表 -->
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="loadMore"
|
||||
class="video-list"
|
||||
>
|
||||
<div class="video-grid">
|
||||
<VideoCard
|
||||
v-for="video in videos"
|
||||
:key="video.id"
|
||||
:video="video"
|
||||
@click="goToVideo(video.id)"
|
||||
/>
|
||||
<div class="row-grid">
|
||||
<VideoCard
|
||||
v-for="video in row.videos"
|
||||
:key="`${row.id}-${video.id}`"
|
||||
:video="video"
|
||||
@click="goToVideo(video.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<AppTabbar />
|
||||
<div
|
||||
v-if="!categoryRows.length"
|
||||
class="content-row"
|
||||
>
|
||||
<div class="row-head">
|
||||
<div class="row-title">
|
||||
<span class="row-dot" />
|
||||
<strong>最新发布</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-grid">
|
||||
<VideoCard
|
||||
v-for="video in fallbackContentVideos"
|
||||
:key="`fallback-${video.id}`"
|
||||
:video="video"
|
||||
@click="goToVideo(video.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="content-side">
|
||||
<div class="side-card">
|
||||
<div class="side-head">
|
||||
<strong>热门排行</strong>
|
||||
<button
|
||||
class="side-link"
|
||||
@click="router.push('/search?keyword=热门')"
|
||||
>
|
||||
更多
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-for="(video, index) in hotVideos.slice(0, 10)"
|
||||
:key="video.id"
|
||||
class="rank-item"
|
||||
@click="goToVideo(video.id)"
|
||||
>
|
||||
<span class="rank-index">{{ index + 1 }}</span>
|
||||
<div class="rank-copy">
|
||||
<strong>{{ video.title }}</strong>
|
||||
<span>{{ formatPlayCount(video.viewCount) }} 播放</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import VideoCard from '@/components/video/VideoCard.vue'
|
||||
import AppTabbar from '@/components/layout/AppTabbar.vue'
|
||||
import { videoApi } from '@/api/video.ts'
|
||||
import { categoryApi, type Category } from '@/api/category.ts'
|
||||
import { recommendApi } from '@/api/recommend.ts'
|
||||
import { videoApi } from '@/api/video.ts'
|
||||
import type { VideoInfo } from '@/types'
|
||||
import { formatDuration, formatPlayCount } from '@/utils'
|
||||
import { resolveMediaUrl } from '@/utils/media'
|
||||
import VideoCard from '@/components/video/VideoCard.vue'
|
||||
|
||||
interface CategoryRow {
|
||||
id: number
|
||||
name: string
|
||||
videos: VideoInfo[]
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 分类
|
||||
const categories = ref<Category[]>([])
|
||||
const activeCategory = ref<string | number>('recommend')
|
||||
const featuredVideos = ref<VideoInfo[]>([])
|
||||
const hotVideos = ref<VideoInfo[]>([])
|
||||
const categoryRows = ref<CategoryRow[]>([])
|
||||
const fallbackVideos = ref<VideoInfo[]>([])
|
||||
const categoryExpanded = ref(false)
|
||||
|
||||
// 视频列表
|
||||
const videos = ref<VideoInfo[]>([])
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
const refreshing = ref(false)
|
||||
const currentPage = ref(1)
|
||||
const pageSize = 20
|
||||
const defaultCover =
|
||||
'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180"%3E%3Crect width="320" height="180" fill="%23edf2f7"/%3E%3Ctext x="50%25" y="50%25" dy=".3em" text-anchor="middle" fill="%239499a0"%3EHAOVP%3C/text%3E%3C/svg%3E'
|
||||
|
||||
// 加载分类
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
const res = await categoryApi.getCategoryList()
|
||||
categories.value = res
|
||||
} catch (error) {
|
||||
console.error('加载分类失败:', error)
|
||||
const getCoverUrl = (coverUrl?: string) => resolveMediaUrl(coverUrl) || defaultCover
|
||||
|
||||
const quickEntries = computed(() => [{ label: '热门', short: '热', action: () => router.push('/search?keyword=热门') }])
|
||||
|
||||
const categoryEntries = computed(() =>
|
||||
categories.value.map((category) => ({
|
||||
label: category.name,
|
||||
action: () => router.push(`/category/${category.id}`)
|
||||
}))
|
||||
)
|
||||
|
||||
const visibleCategoryEntries = computed(() => categoryEntries.value.slice(0, 16))
|
||||
const hiddenCategoryEntries = computed(() => categoryEntries.value.slice(16))
|
||||
|
||||
const allTopVideos = computed(() => {
|
||||
const merged = [...featuredVideos.value, ...hotVideos.value, ...fallbackVideos.value]
|
||||
const deduplicated: VideoInfo[] = []
|
||||
const seen = new Set<number>()
|
||||
for (const item of merged) {
|
||||
if (!item?.id || seen.has(item.id)) continue
|
||||
seen.add(item.id)
|
||||
deduplicated.push(item)
|
||||
}
|
||||
}
|
||||
return deduplicated
|
||||
})
|
||||
|
||||
// 加载视频列表
|
||||
const loadVideos = async (isRefresh = false) => {
|
||||
if (isRefresh) {
|
||||
currentPage.value = 1
|
||||
videos.value = []
|
||||
finished.value = false
|
||||
const bannerVideos = computed(() => allTopVideos.value.slice(0, 4))
|
||||
const topSideVideos = computed(() => {
|
||||
return allTopVideos.value.slice(4, 10)
|
||||
})
|
||||
const fallbackContentVideos = computed(() => allTopVideos.value.slice(0, 8))
|
||||
|
||||
const loadHomeData = async () => {
|
||||
const [categoryList, recommendList, hotList, publicList] = await Promise.all([
|
||||
categoryApi.getCategoryList(),
|
||||
recommendApi.getHomeRecommend(1, 12).catch(() => []),
|
||||
recommendApi.getHotRecommend(1, 12).catch(() => []),
|
||||
videoApi.getVideoPublicList({ pageNum: 1, pageSize: 80 }).catch(() => ({
|
||||
records: [],
|
||||
total: 0,
|
||||
size: 80,
|
||||
current: 1,
|
||||
pages: 0
|
||||
}))
|
||||
])
|
||||
|
||||
categories.value = categoryList
|
||||
hotVideos.value = hotList
|
||||
featuredVideos.value = recommendList
|
||||
fallbackVideos.value = publicList.records
|
||||
|
||||
if (!featuredVideos.value.length) {
|
||||
featuredVideos.value = publicList.records.slice(0, 12)
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
let res
|
||||
if (!hotVideos.value.length) {
|
||||
hotVideos.value = publicList.records.slice(0, 12)
|
||||
}
|
||||
|
||||
if (activeCategory.value === 'recommend') {
|
||||
// 首页推荐返回列表
|
||||
const list = await recommendApi.getHomeRecommend(currentPage.value, pageSize)
|
||||
res = { records: list, total: list.length }
|
||||
// 推荐接口数据较少时标记完成
|
||||
if (list.length < pageSize) {
|
||||
finished.value = true
|
||||
}
|
||||
} else if (activeCategory.value === 'hot') {
|
||||
// 热门推荐返回列表，periodType: 1-日榜
|
||||
const list = await recommendApi.getHotRecommend(1, pageSize)
|
||||
res = { records: list, total: list.length }
|
||||
finished.value = true // 热门榜只加载一次
|
||||
} else {
|
||||
// 分类视频返回分页对象，参数名为 pageNum 和 pageSize
|
||||
res = await videoApi.getVideoPublicList({
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize,
|
||||
categoryId: activeCategory.value as number
|
||||
})
|
||||
const categoryMap = new Map(categoryList.map((category) => [category.id, category]))
|
||||
const groupedRows = new Map<number, VideoInfo[]>()
|
||||
for (const video of publicList.records) {
|
||||
if (!video.categoryId || !categoryMap.has(video.categoryId)) continue
|
||||
const current = groupedRows.get(video.categoryId) || []
|
||||
if (current.length < 8) {
|
||||
current.push(video)
|
||||
groupedRows.set(video.categoryId, current)
|
||||
}
|
||||
|
||||
if (isRefresh) {
|
||||
videos.value = res.records
|
||||
} else {
|
||||
videos.value.push(...res.records)
|
||||
}
|
||||
|
||||
// 判断是否还有更多
|
||||
if (videos.value.length >= res.total || res.records.length < pageSize) {
|
||||
finished.value = true
|
||||
}
|
||||
|
||||
currentPage.value++
|
||||
} catch (error: any) {
|
||||
showToast(error.message || '加载失败')
|
||||
finished.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
refreshing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const loadMore = () => {
|
||||
if (!finished.value) {
|
||||
loadVideos()
|
||||
const groupedResult = [...groupedRows.entries()]
|
||||
.map(([categoryId, videos]) => ({
|
||||
id: categoryId,
|
||||
name: categoryMap.get(categoryId)?.name || '分类',
|
||||
videos
|
||||
}))
|
||||
.filter((row) => row.videos.length > 0)
|
||||
.slice(0, 6)
|
||||
|
||||
// If category distribution is too sparse, fall back to a few curated sections
|
||||
// so the homepage still looks populated with current data.
|
||||
if (groupedResult.length >= 2) {
|
||||
categoryRows.value = groupedResult
|
||||
return
|
||||
}
|
||||
|
||||
const fallbackRows: CategoryRow[] = []
|
||||
const appendRow = (id: number, name: string, videos: VideoInfo[]) => {
|
||||
const normalized = videos.filter((video, index, arr) => video?.id && arr.findIndex((item) => item.id === video.id) === index).slice(0, 8)
|
||||
if (normalized.length) {
|
||||
fallbackRows.push({ id, name, videos: normalized })
|
||||
}
|
||||
}
|
||||
|
||||
appendRow(-1, '推荐内容', featuredVideos.value)
|
||||
appendRow(-2, '热门内容', hotVideos.value)
|
||||
appendRow(-3, '最新发布', publicList.records)
|
||||
|
||||
categoryRows.value = fallbackRows
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const onRefresh = () => {
|
||||
loadVideos(true)
|
||||
}
|
||||
|
||||
// 分类切换
|
||||
const onCategoryChange = () => {
|
||||
loadVideos(true)
|
||||
}
|
||||
|
||||
// 跳转视频详情
|
||||
const goToVideo = (id: number) => {
|
||||
if (!id) return
|
||||
router.push(`/video/${id}`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadCategories()
|
||||
loadVideos()
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await loadHomeData()
|
||||
} catch (error) {
|
||||
console.error('首页加载失败:', error)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-page {
|
||||
min-height: 100vh;
|
||||
background: #f6f7fb;
|
||||
padding-bottom: 60px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
background: #f4f5f7;
|
||||
padding: 16px 0 36px;
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
margin: 20px auto 12px;
|
||||
padding: 30px 28px;
|
||||
border-radius: 24px;
|
||||
color: #fff;
|
||||
max-width: 1380px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 24%),
|
||||
linear-gradient(135deg, #fb7299 0%, #ff85ad 32%, #3da5ff 100%);
|
||||
box-shadow: 0 24px 52px rgba(251, 114, 153, 0.18);
|
||||
|
||||
.hero-copy h1 {
|
||||
margin: 10px 0;
|
||||
font-size: 28px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
margin: 0;
|
||||
max-width: 760px;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-tag {
|
||||
display: inline-flex;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.channel-panel,
|
||||
.content-row,
|
||||
.side-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.hero-metrics {
|
||||
.channel-panel {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.channel-main {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 82px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.quick-entry-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.metric {
|
||||
min-width: 92px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.quick-entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 82px;
|
||||
padding: 8px 0;
|
||||
flex: 0 0 82px;
|
||||
}
|
||||
|
||||
.quick-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #4cb4e7, #fb7299);
|
||||
}
|
||||
|
||||
.channel-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.channel-expand {
|
||||
position: absolute;
|
||||
left: 98px;
|
||||
right: 0;
|
||||
top: calc(100% + 12px);
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.channel-pill {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
padding: 0 8px;
|
||||
border-radius: 8px;
|
||||
background: #f6f7f8;
|
||||
color: #505965;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more-pill {
|
||||
color: var(--link-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.top-feed {
|
||||
margin-top: 14px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.banner-swipe,
|
||||
.banner-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
aspect-ratio: 16 / 9;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
padding: 54px 18px 18px;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82));
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.category-nav {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
position: sticky;
|
||||
top: var(--header-height);
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
margin-bottom: 6px;
|
||||
|
||||
:deep(.van-tabs__nav) {
|
||||
padding: 0 12px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.van-tab) {
|
||||
padding: 0 16px;
|
||||
font-size: 15px;
|
||||
color: #61666d;
|
||||
}
|
||||
|
||||
:deep(.van-tabs__line) {
|
||||
background: #fb7299;
|
||||
}
|
||||
}
|
||||
|
||||
.video-list {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 12px 20px;
|
||||
}
|
||||
|
||||
.video-grid {
|
||||
.top-feed-side {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 18px 16px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.top-video-card {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.top-video-cover {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
aspect-ratio: 16 / 10;
|
||||
background: #edf2f7;
|
||||
}
|
||||
|
||||
.top-video-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-video-mask {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 8px 6px;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-video-title {
|
||||
margin-top: 8px;
|
||||
color: #18191c;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin-top: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.row-head,
|
||||
.side-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.row-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
strong {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.row-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--link-color);
|
||||
}
|
||||
|
||||
.row-more,
|
||||
.side-link {
|
||||
color: var(--link-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.row-grid {
|
||||
margin-top: 14px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.side-card {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 12px 0;
|
||||
text-align: left;
|
||||
|
||||
& + .rank-item {
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-index {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
background: #00a1d6;
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rank-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
|
||||
strong {
|
||||
color: #18191c;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.content-section,
|
||||
.top-feed {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.row-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.channel-main,
|
||||
.channel-grid,
|
||||
.top-feed-side,
|
||||
.row-grid,
|
||||
.channel-expand {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.quick-entry-group {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.channel-expand {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.expand-fade-enter-active,
|
||||
.expand-fade-leave-active {
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.expand-fade-enter-from,
|
||||
.expand-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user