移动端适配
This commit is contained in:
@@ -3,9 +3,19 @@
|
||||
<div class="learning-records">
|
||||
<div class="records-header">
|
||||
<h2>学习记录</h2>
|
||||
<div style="width: 40%; display: flex;">
|
||||
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" @change="handleDateChange" />
|
||||
<div class="date-picker-container">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="handleDateChange"
|
||||
:size="isMobile ? 'small' : 'default'"
|
||||
:teleported="false"
|
||||
popper-class="date-picker-popper"
|
||||
placement="bottom-start"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +28,8 @@
|
||||
<!-- 学习记录分页表格 -->
|
||||
<div class="records-table" v-loading="tableLoading">
|
||||
<h3>学习记录明细</h3>
|
||||
<el-table :data="tableData">
|
||||
<div class="table-container">
|
||||
<el-table :data="tableData">
|
||||
<el-table-column prop="resourceTitle" label="资源标题"/>
|
||||
<el-table-column prop="resourceTypeName" label="类型" />
|
||||
<el-table-column label="学习时长">
|
||||
@@ -38,8 +49,11 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 桌面端分页 -->
|
||||
<el-pagination
|
||||
v-if="!isMobile"
|
||||
class="pagination-container"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
@@ -50,6 +64,13 @@
|
||||
@current-change="handleCurrentChange"
|
||||
style="margin-top: 20px; justify-content: center"
|
||||
/>
|
||||
|
||||
<!-- 移动端加载更多 -->
|
||||
<div v-if="isMobile && hasMore && tableData.length > 0" class="mobile-loading">
|
||||
<div v-if="loadingMore" class="loading-more">
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -57,7 +78,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { ElDatePicker, ElMessage, ElTable, ElTableColumn, ElPagination, ElTag } from 'element-plus';
|
||||
import { UserCenterLayout } from '@/views/user/user-center';
|
||||
import { learningRecordApi } from '@/apis/study/learning-record';
|
||||
@@ -89,8 +110,16 @@ const tableLoading = ref(false);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const totalElements = ref(0);
|
||||
const isMobile = ref(false);
|
||||
const loadingMore = ref(false);
|
||||
const hasMore = ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
// 检查移动端
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
window.addEventListener('scroll', handleScroll); // 移动端使用页面级滚动
|
||||
|
||||
// 初始化图表
|
||||
nextTick(() => {
|
||||
if (chartRef.value) {
|
||||
@@ -101,10 +130,54 @@ onMounted(() => {
|
||||
loadTableData();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile);
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
});
|
||||
|
||||
// 检查是否为移动端
|
||||
function checkMobile() {
|
||||
isMobile.value = window.innerWidth < 768;
|
||||
if (isMobile.value) {
|
||||
pageSize.value = 20; // 移动端使用更大的页面大小
|
||||
}
|
||||
}
|
||||
|
||||
// 处理整个页面滚动事件（保留用于其他用途）
|
||||
function handleScroll() {
|
||||
if (!isMobile.value || loadingMore.value || !hasMore.value) return;
|
||||
|
||||
const scrollHeight = document.documentElement.scrollHeight;
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
|
||||
// 滚动到底部-2px时触发加载
|
||||
if (scrollHeight - scrollTop - clientHeight <= 2) {
|
||||
loadMoreData();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理表格容器滚动事件
|
||||
function handleTableScroll(event: Event) {
|
||||
if (!isMobile.value || loadingMore.value || !hasMore.value) return;
|
||||
|
||||
const target = event.target as HTMLElement;
|
||||
const scrollTop = target.scrollTop;
|
||||
const scrollHeight = target.scrollHeight;
|
||||
const clientHeight = target.clientHeight;
|
||||
|
||||
// 滚动到底部-2px时触发加载
|
||||
if (scrollHeight - scrollTop - clientHeight <= 2) {
|
||||
loadMoreData();
|
||||
}
|
||||
}
|
||||
|
||||
function handleDateChange() {
|
||||
// 日期变化时重新加载图表和表格
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
loadChartData();
|
||||
loadTableData();
|
||||
loadTableData(true); // 传入true表示刷新
|
||||
}
|
||||
|
||||
// 加载图表数据
|
||||
@@ -186,7 +259,12 @@ async function loadChartData() {
|
||||
}
|
||||
|
||||
// 加载表格数据
|
||||
async function loadTableData() {
|
||||
async function loadTableData(isRefresh = false) {
|
||||
if (isRefresh) {
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
}
|
||||
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
const pageRequest = {
|
||||
@@ -206,21 +284,68 @@ async function loadTableData() {
|
||||
const dataList = result.dataList || result.data?.dataList || [];
|
||||
// console.log('📊 表格数据:', dataList);
|
||||
|
||||
tableData.value = dataList;
|
||||
tableData.value = isRefresh ? dataList : tableData.value.concat(dataList);
|
||||
totalElements.value = result.data?.pageParam?.totalElements || result.pageParam?.totalElements || 0;
|
||||
|
||||
// 检查是否还有更多数据
|
||||
if (isMobile.value) {
|
||||
hasMore.value = tableData.value.length < totalElements.value;
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(result.message || '加载记录失败');
|
||||
tableData.value = [];
|
||||
if (isRefresh) tableData.value = [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载表格数据失败:', error);
|
||||
ElMessage.error('加载记录失败');
|
||||
tableData.value = [];
|
||||
if (isRefresh) tableData.value = [];
|
||||
} finally {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载更多数据（移动端）
|
||||
async function loadMoreData() {
|
||||
if (loadingMore.value || !hasMore.value) return;
|
||||
|
||||
loadingMore.value = true;
|
||||
const nextPage = currentPage.value + 1;
|
||||
|
||||
try {
|
||||
const pageRequest = {
|
||||
filter: {},
|
||||
pageParam: {
|
||||
pageNumber: nextPage,
|
||||
pageSize: pageSize.value
|
||||
}
|
||||
};
|
||||
|
||||
const result = await learningRecordApi.getUserRecordRangePage(pageRequest);
|
||||
|
||||
if (result.success) {
|
||||
const dataList = result.dataList || result.data?.dataList || [];
|
||||
|
||||
if (dataList.length > 0) {
|
||||
tableData.value = tableData.value.concat(dataList);
|
||||
currentPage.value = nextPage;
|
||||
totalElements.value = result.data?.pageParam?.totalElements || result.pageParam?.totalElements || 0;
|
||||
|
||||
// 检查是否还有更多数据
|
||||
hasMore.value = tableData.value.length < totalElements.value;
|
||||
} else {
|
||||
hasMore.value = false;
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('加载更多记录失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载更多数据失败:', error);
|
||||
ElMessage.error('加载更多记录失败');
|
||||
} finally {
|
||||
loadingMore.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页大小变化
|
||||
function handleSizeChange(size: number) {
|
||||
pageSize.value = size;
|
||||
@@ -280,6 +405,37 @@ function getRecordIcon(type: string) {
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-picker-container {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-date-editor) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -403,6 +559,17 @@ function getRecordIcon(type: string) {
|
||||
color: #141F38;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
padding: 16px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.records-table {
|
||||
@@ -417,5 +584,84 @@ function getRecordIcon(type: string) {
|
||||
color: #141F38;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
// 移动端使用页面级滚动，不限制容器高度
|
||||
width: 100%;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
// 让表格自然展开，配合页面级滚动
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
padding: 16px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// 表格在移动端的滚动
|
||||
:deep(.el-table) {
|
||||
font-size: 14px;
|
||||
|
||||
.el-table__cell {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端加载更多样式
|
||||
.mobile-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
|
||||
.loading-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 时间选择器弹出层样式
|
||||
:deep(.date-picker-popper) {
|
||||
z-index: 3000 !important;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: calc(100vw - 32px) !important;
|
||||
|
||||
.el-picker-panel {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.el-date-range-picker {
|
||||
width: 100% !important;
|
||||
|
||||
.el-picker-panel__body {
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
.el-date-table {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.el-picker-panel__content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -303,4 +303,175 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.my-achievements {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 12px;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.level-achieve {
|
||||
width: 100%;
|
||||
|
||||
.level {
|
||||
padding: 20px 16px;
|
||||
gap: 16px;
|
||||
|
||||
.level-icons {
|
||||
width: 140px;
|
||||
height: 90px;
|
||||
|
||||
.level-star {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.level-badge {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.level-word {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.next-tip {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.level-range {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-achieve {
|
||||
width: 100%;
|
||||
|
||||
.achievement-list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
|
||||
.achievement-item {
|
||||
padding: 10px 8px;
|
||||
gap: 6px;
|
||||
|
||||
.achv-name-wrap {
|
||||
width: 120px;
|
||||
height: 28px;
|
||||
|
||||
.achv-name {
|
||||
font-size: 11px;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.achv-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.achv-cond {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕移动端进一步适配 */
|
||||
@media (max-width: 480px) {
|
||||
.my-achievements {
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.level-achieve {
|
||||
.level {
|
||||
padding: 16px 12px;
|
||||
|
||||
.level-icons {
|
||||
width: 120px;
|
||||
height: 75px;
|
||||
|
||||
.level-badge {
|
||||
top: 25px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.level-word {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.next-tip {
|
||||
font-size: 11px;
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-achieve {
|
||||
.achievement-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
|
||||
.achievement-item {
|
||||
padding: 8px 6px;
|
||||
|
||||
.achv-name-wrap {
|
||||
width: 100px;
|
||||
height: 24px;
|
||||
|
||||
.achv-name {
|
||||
font-size: 10px;
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.achv-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.achv-cond {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElButton, ElMessage, ElMessageBox, ElIcon } from 'element-plus';
|
||||
@@ -69,6 +69,7 @@ const router = useRouter();
|
||||
const activeFilter = ref<'all' | number>('all');
|
||||
const favorites = ref<UserCollectionVO[]>([]);
|
||||
const loading = ref(false);
|
||||
const isMobile = ref(false);
|
||||
|
||||
const filters: Array<{ key: 'all' | number; label: string }> = [
|
||||
{ key: 'all', label: '全部' },
|
||||
@@ -123,9 +124,20 @@ const getTypeName = (item: UserCollectionVO): string => {
|
||||
const currentUser = computed(() => store.getters['auth/user']);
|
||||
|
||||
onMounted(() => {
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
loadFavorites();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile);
|
||||
});
|
||||
|
||||
// 检查是否为移动端
|
||||
function checkMobile() {
|
||||
isMobile.value = window.innerWidth < 768;
|
||||
}
|
||||
|
||||
// 加载收藏列表
|
||||
async function loadFavorites() {
|
||||
if (!currentUser.value?.id) {
|
||||
@@ -221,12 +233,31 @@ function formatDate(dateStr?: string): string {
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
@@ -247,12 +278,34 @@ function formatDate(dateStr?: string): string {
|
||||
background: #C62828;
|
||||
color: white;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.favorites-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr; // 单列布局
|
||||
gap: 16px;
|
||||
padding: 0; // 移除额外padding
|
||||
}
|
||||
|
||||
// 小屏平板适配
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.favorite-item {
|
||||
@@ -265,6 +318,18 @@ function formatDate(dateStr?: string): string {
|
||||
border-color: #C62828;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0; // 移除额外边距
|
||||
|
||||
&:hover {
|
||||
// 移动端减少hover效果
|
||||
transform: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-thumbnail {
|
||||
@@ -278,6 +343,11 @@ function formatDate(dateStr?: string): string {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
height: 160px; // 稍微降低高度
|
||||
}
|
||||
}
|
||||
|
||||
.item-type {
|
||||
@@ -300,6 +370,20 @@ function formatDate(dateStr?: string): string {
|
||||
color: #141F38;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
padding: 12px;
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
margin-bottom: 6px;
|
||||
// 标题截断
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-summary {
|
||||
@@ -312,6 +396,14 @@ function formatDate(dateStr?: string): string {
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
-webkit-line-clamp: 1; // 移动端只显示一行
|
||||
line-clamp: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
@@ -320,16 +412,46 @@ function formatDate(dateStr?: string): string {
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
text-align: center;
|
||||
order: 2; // 移到按钮下方
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
order: 1; // 移到日期上方
|
||||
|
||||
:deep(.el-button) {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
:deep(.el-button--small) {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-placeholder {
|
||||
@@ -360,5 +482,18 @@ function formatDate(dateStr?: string): string {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
padding: 60px 20px;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -59,7 +59,13 @@ const menus = computed(() => {
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
min-height: calc(100vh - 76px);
|
||||
// overflow-y: auto;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-wrapper {
|
||||
@@ -67,18 +73,39 @@ const menus = computed(() => {
|
||||
height: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
width: 90%;
|
||||
|
||||
height: 75%;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
// 移动端垂直布局
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
flex-shrink: 0;
|
||||
order: 1; // 桌面端显示在左侧
|
||||
|
||||
// 移动端水平标签栏
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@@ -87,5 +114,13 @@ const menus = computed(() => {
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
min-height: 60vh;
|
||||
order: 2; // 桌面端显示在右侧
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
padding: 16px;
|
||||
min-height: 50vh;
|
||||
border-radius: 8px 8px 0 0; // 底部圆角移除，为标签栏让位
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<div class="user-name-row">
|
||||
<span class="username">{{ userInfo?.username || '未设置昵称' }}</span>
|
||||
<div class="gender-tag" v-if="userInfo?.gender">
|
||||
<img :src="userInfo?.gender === 1 ? maleIcon : femaleIcon" :alt="userInfo?.gender === 1 ? '男' : '女'" class="gender-icon" />
|
||||
<img :src="userInfo?.gender === 1 ? genderIcons.maleIcon : genderIcons.femaleIcon" :alt="userInfo?.gender === 1 ? '男' : '女'" class="gender-icon" />
|
||||
<span class="gender-text">{{ userInfo?.gender === 1 ? '男' : '女' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,6 +65,12 @@ const userInfo = ref<UserVO>();
|
||||
// 默认头像
|
||||
const defaultAvatar = defaultAvatarImg;
|
||||
|
||||
// 性别图标
|
||||
const genderIcons = {
|
||||
maleIcon,
|
||||
femaleIcon
|
||||
};
|
||||
|
||||
const levelIcon = computed(() => {
|
||||
const level = userInfo.value?.level || 1;
|
||||
return getLevelWordIconUrl(level);
|
||||
@@ -94,6 +100,12 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
padding: 16px;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -145,12 +157,28 @@ onMounted(async () => {
|
||||
&:active {
|
||||
background: rgba(198, 40, 40, 0.15);
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
align-self: center;
|
||||
margin-top: 8px;
|
||||
padding: 6px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
// 移动端垂直布局
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
@@ -175,6 +203,12 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
// 移动端居中对齐
|
||||
@media (max-width: 768px) {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
@@ -209,6 +243,13 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
|
||||
// 移动端自动换行布局
|
||||
@media (max-width: 768px) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 16px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item {
|
||||
|
||||
Reference in New Issue
Block a user