|
|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
<div class="user-home-container">
|
|
|
<div class="user-header-wrapper">
|
|
|
- <el-card v-if="user" class="user-info-card" :body-style="{ padding: '20px' }">
|
|
|
+ <el-card v-if="user" class="user-info-card" :body-style="{ padding: isMobile ? '15px' : '20px' }">
|
|
|
<div class="info-content-top">
|
|
|
<div class="avatar-section">
|
|
|
- <el-avatar :size="90" :src="user.avatarUrl" class="user-avatar-main" />
|
|
|
+ <el-avatar :size="isMobile ? 70 : 90" :src="user.avatarUrl" class="user-avatar-main" />
|
|
|
<el-tag
|
|
|
v-if="user.vip"
|
|
|
size="mini"
|
|
|
@@ -20,15 +20,22 @@
|
|
|
<el-button
|
|
|
:type="followButton.text === '已关注' ? 'info' : 'danger'"
|
|
|
round
|
|
|
- size="medium"
|
|
|
+ :size="isMobile ? 'small' : 'medium'"
|
|
|
:icon="followButton.icon"
|
|
|
@click="followUser(user.userId)"
|
|
|
+ class="action-btn-item"
|
|
|
>
|
|
|
{{ followButton.text }}
|
|
|
</el-button>
|
|
|
- <el-button icon="el-icon-message" round size="medium" @click="sendMessage(user.userId)">发消息</el-button>
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-message"
|
|
|
+ round
|
|
|
+ :size="isMobile ? 'small' : 'medium'"
|
|
|
+ @click="sendMessage(user.userId)"
|
|
|
+ class="action-btn-item"
|
|
|
+ >发消息</el-button>
|
|
|
|
|
|
- <el-dropdown trigger="click" class="more-btn">
|
|
|
+ <el-dropdown trigger="click" class="more-btn" v-if="!isMobile">
|
|
|
<el-button icon="el-icon-more" circle plain size="medium"></el-button>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item v-if="user.biliUserId">
|
|
|
@@ -64,10 +71,10 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="user-content-section">
|
|
|
- <el-tabs v-if="userContentData" v-model="activeName" class="custom-tabs" @tab-click="tabClick">
|
|
|
+ <el-tabs v-if="userContentData" v-model="activeName" class="custom-tabs" @tab-click="tabClick" :stretch="isMobile">
|
|
|
<el-tab-pane name="video">
|
|
|
<span slot="label">视频 <span class="tab-count">{{ userContentData.videoCount }}</span></span>
|
|
|
- <el-row :gutter="15" class="grid-container" v-loading="loading">
|
|
|
+ <el-row :gutter="isMobile ? 10 : 15" class="grid-container" v-loading="loading">
|
|
|
<el-col v-for="(video, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
|
|
|
<video-card :video="video" class="content-card-hover" />
|
|
|
</el-col>
|
|
|
@@ -76,7 +83,7 @@
|
|
|
|
|
|
<el-tab-pane name="image">
|
|
|
<span slot="label">图片 <span class="tab-count">{{ userContentData.imageCount }}</span></span>
|
|
|
- <el-row :gutter="15" class="grid-container" v-loading="loading">
|
|
|
+ <el-row :gutter="isMobile ? 10 : 15" class="grid-container" v-loading="loading">
|
|
|
<el-col v-for="(album, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
|
|
|
<image-album-card :image-album="album" class="content-card-hover" />
|
|
|
</el-col>
|
|
|
@@ -85,7 +92,7 @@
|
|
|
|
|
|
<el-tab-pane name="album">
|
|
|
<span slot="label">收藏夹 <span class="tab-count">{{ userContentData.albumCount }}</span></span>
|
|
|
- <el-row :gutter="15" class="grid-container" v-loading="loading">
|
|
|
+ <el-row :gutter="isMobile ? 10 : 15" class="grid-container" v-loading="loading">
|
|
|
<el-col v-for="(item, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
|
|
|
<el-card :body-style="{ padding: '0px' }" class="playlist-card content-card-hover">
|
|
|
<router-link :to="`/playlist/${item.albumId}`" class="no-link-style">
|
|
|
@@ -105,15 +112,16 @@
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
|
|
|
- <el-empty v-if="showEmpty && !loading" :image-size="200" description="该分类下空空如也" />
|
|
|
+ <el-empty v-if="showEmpty && !loading" :image-size="isMobile ? 120 : 200" description="该分类下空空如也" />
|
|
|
|
|
|
<div class="pagination-wrapper" v-if="totalSize > pageSize">
|
|
|
<el-pagination
|
|
|
background
|
|
|
- layout="prev, pager, next"
|
|
|
+ :layout="isMobile ? 'prev, pager, next' : 'prev, pager, next'"
|
|
|
:current-page="currentPage"
|
|
|
:page-size="pageSize"
|
|
|
:total="totalSize"
|
|
|
+ :pager-count="isMobile ? 5 : 7"
|
|
|
@current-change="handleCurrentChange"
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -144,20 +152,20 @@ export default {
|
|
|
dataList: [],
|
|
|
userContentData: null,
|
|
|
loading: false,
|
|
|
- showEmpty: false
|
|
|
+ showEmpty: false,
|
|
|
+ isMobile: false // 标记是否为移动端
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- // 1. 监听路由参数中的 ID 变化 (核心修复)
|
|
|
'$route.params.id': {
|
|
|
handler(newId) {
|
|
|
if (newId) {
|
|
|
this.userId = newId;
|
|
|
- this.resetPageState(); // 切换用户时，重置页码和列表
|
|
|
- this.initUserContext(); // 重新加载用户资料和关系
|
|
|
+ this.resetPageState();
|
|
|
+ this.initUserContext();
|
|
|
}
|
|
|
},
|
|
|
- immediate: true // 确保组件创建时也能触发
|
|
|
+ immediate: true
|
|
|
},
|
|
|
'$route.query': {
|
|
|
handler() {
|
|
|
@@ -169,9 +177,18 @@ export default {
|
|
|
created() {
|
|
|
this.userId = this.$route.params.id;
|
|
|
this.initUserContext();
|
|
|
+ this.checkMobile();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.addEventListener('resize', this.checkMobile);
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ window.removeEventListener('resize', this.checkMobile);
|
|
|
},
|
|
|
methods: {
|
|
|
- // 新增：切换用户时重置状态，防止数据残留
|
|
|
+ checkMobile() {
|
|
|
+ this.isMobile = window.innerWidth <= 768;
|
|
|
+ },
|
|
|
resetPageState() {
|
|
|
this.dataList = [];
|
|
|
this.currentPage = 1;
|
|
|
@@ -298,7 +315,6 @@ export default {
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
-/* 会员 Tag 覆盖在头像上的样式 */
|
|
|
.vip-tag-overlay {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
@@ -332,6 +348,7 @@ export default {
|
|
|
color: #9499a0;
|
|
|
font-size: 14px;
|
|
|
margin-bottom: 20px;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.user-stats {
|
|
|
@@ -369,8 +386,8 @@ export default {
|
|
|
.content-card-hover:hover { transform: translateY(-5px); }
|
|
|
.no-link-style { text-decoration: none; color: inherit; }
|
|
|
|
|
|
-.playlist-card { border-radius: 8px; overflow: hidden; }
|
|
|
-.playlist-cover-wrapper { position: relative; aspect-ratio: 16/9; }
|
|
|
+.playlist-card { border-radius: 8px; overflow: hidden; height: 100%; }
|
|
|
+.playlist-cover-wrapper { position: relative; aspect-ratio: 16/9; width: 100%; overflow: hidden; }
|
|
|
.playlist-img { width: 100%; height: 100%; }
|
|
|
.playlist-mask { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; padding: 2px 8px; font-size: 12px; border-top-left-radius: 8px; }
|
|
|
.playlist-info { padding: 10px; text-align: left; }
|
|
|
@@ -378,11 +395,42 @@ export default {
|
|
|
.pagination-wrapper { margin-top: 30px; display: flex; justify-content: center; }
|
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
- .user-home-container { padding-top: 10px; }
|
|
|
- .user-avatar-main { width: 70px !important; height: 70px !important; }
|
|
|
- .user-name { font-size: 20px; }
|
|
|
- .vip-tag-overlay { right: -5px; bottom: -2px; }
|
|
|
- .action-section .el-button { padding: 8px 12px; font-size: 12px; }
|
|
|
- .more-btn { display: none; }
|
|
|
+ .user-home-container { padding: 10px 0 30px 0; }
|
|
|
+ .user-header-wrapper { padding: 0 10px; }
|
|
|
+ .user-content-section { padding: 0 10px; }
|
|
|
+
|
|
|
+ .info-content-top {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-section {
|
|
|
+ width: 100%;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-btn-item {
|
|
|
+ flex: 1; /* 按钮在移动端平分宽度 */
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-name { font-size: 18px; flex-wrap: wrap; }
|
|
|
+ .user-stats { gap: 20px; }
|
|
|
+ .user-signature { font-size: 13px; margin-bottom: 15px; }
|
|
|
+
|
|
|
+ .custom-tabs /deep/ .el-tabs__header {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-container {
|
|
|
+ margin-left: -5px !important;
|
|
|
+ margin-right: -5px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-container .el-col {
|
|
|
+ padding-left: 5px !important;
|
|
|
+ padding-right: 5px !important;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
