wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移动端适配

Browse Source
This commit is contained in:
wangys
2025-12-09 16:04:36 +08:00
parent 242a263daa
commit a063e9ce32
14 changed files with 811 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
schoolNewsWeb/src/components/base/FloatingSidebar.vue
View File

@@ -210,10 +210,95 @@ function handleClick(menu: SysMenu) {
}
}
/* 响应式设计 */
/* 移动端响应式设计 - 水平标签栏 */
@media (max-width: 768px) {
.floating-sidebar {
width: 160px;
width: 100%;
height: auto;
flex-direction: row;
border-radius: 0 0 8px 8px; // 顶部圆角移除，与main-content连接
}
.sidebar-content {
width: 100%;
flex-direction: row;
}
.sidebar-nav {
flex-direction: row;
padding: 10px 0;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
/* 水平滚动条样式 */
&::-webkit-scrollbar {
height: 4px;
width: auto;
}
}
.sidebar-item {
flex: 1;
min-width: 60px;
height: 44px;
justify-content: center;
&::before {
display: none; // 移动端隐藏左侧指示条
}
&.active::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 3px;
background: #C62828;
border-radius: 2px;
}
// Resource theme 在移动端的特殊样式
&.theme-resource {
padding: 0 5px;
margin: 0;
&.active {
background: transparent;
border-radius: 0;
margin: 0;
height: 44px;
&::after {
right: auto;
top: auto;
width: 20px;
height: 3px;
background: #C62828;
opacity: 1;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.sidebar-link {
color: #C62828;
}
}
}
}
.sidebar-link {
padding: 0 8px;
font-size: 14px;
justify-content: center;
.theme-resource & {
margin-left: 0; // 移动端取消左边距
}
}
}
</style>

4
schoolNewsWeb/src/components/base/TopNavigation.vue
View File

@@ -61,7 +61,7 @@
<!-- 搜索框 -->
<Search @search="handleSearch" />
<Notice />
<UserDropdown :user="userInfo" @logout="handleLogout" />
<UserDropdown :userinfo="userInfo" @logout="handleLogout" />
</div>
</div>
</nav>
@@ -88,7 +88,7 @@ const specialTags = ref<Tag[]>([]); // 特殊标签：专题报告和思政案
// 获取所有菜单
const allMenus = computed(() => store.getters['auth/menuTree']);
const userInfo = computed(() => store.getters['auth/user']);
const userInfo = computed(() => store.getters['auth/userinfo']);
// 加载特殊标签
onMounted(async () => {

22
schoolNewsWeb/src/components/base/UserDropdown.vue
View File

@@ -3,8 +3,8 @@
ref="dropdownRef"
class="user-dropdown"
@click="toggleDropdown"
@mouseenter="openDropdown"
@mouseleave="closeDropdown"
@mouseenter="props.disableHover ? undefined : openDropdown"
@mouseleave="props.disableHover ? undefined : closeDropdown"
v-click-outside="forceCloseDropdown"
>
<!-- 未登录状态 -->
@@ -23,10 +23,9 @@
<span class="avatar-placeholder" v-else>{{ avatarText }}</span>
</div>
<div class="user-details" v-if="!collapsed">
<div class="user-name">{{ user?.fullName || user?.username }}</div>
<div class="user-name">{{ user?.username }}</div>
<div class="user-role">{{ primaryRole }}</div>
</div>
<i class="dropdown-icon" :class="{ 'open': dropdownVisible }"></i>
</div>
<!-- 下拉菜单 -->
@@ -36,8 +35,8 @@
:class="{ 'show': dropdownVisible }"
:style="dropdownStyle"
v-if="dropdownVisible"
@mouseenter="openDropdown"
@mouseleave="closeDropdown"
@mouseenter="props.disableHover ? undefined : openDropdown"
@mouseleave="props.disableHover ? undefined : closeDropdown"
>
<!-- 未登录时的菜单 -->
<template v-if="!isLoggedIn">
@@ -65,7 +64,7 @@
</div>
<div class="dropdown-divider" v-if="userMenus.length > 0"></div>
<div class="dropdown-footer">
<div class="dropdown-item info" v-if="isAdmin">
<div class="dropdown-item info" v-if="!props.hideAdmin && isAdmin">
<img class="item-icon icon-logout" src="@/assets/imgs/admin-home.svg" alt="切换页面">
<ChangeHome />
</div>
@@ -95,11 +94,14 @@ const routes = router.getRoutes();
// Props
interface Props {
user?: UserVO | null;
userinfo?: UserVO | null;
collapsed?: boolean;
hideAdmin?: boolean; // 新增：隐藏管理端相关功能
disableHover?: boolean; // 新增：禁用hover事件，用于移动端
}
const props = defineProps<Props>();
const user = computed(() => store.getters['auth/user']);
// Emits
const emit = defineEmits<{
@@ -121,11 +123,11 @@ const isLoggedIn = computed(() => {
});
const userAvatar = computed(() => {
return props.user?.avatar ? FILE_DOWNLOAD_URL + props.user?.avatar : '';
return props.userinfo?.avatar ? FILE_DOWNLOAD_URL + props.userinfo?.avatar : '';
});
const avatarText = computed(() => {
const name = props.user?.fullName || props.user?.username || '';
const name = props.userinfo?.fullName || props.userinfo?.username || '';
return name.charAt(0).toUpperCase();
});

2
schoolNewsWeb/src/layouts/BasicLayout.vue
View File

@@ -13,7 +13,7 @@
<div class="header-right">
<!-- 用户信息 -->
<UserDropdown :user="userInfo" @logout="handleLogout" />
<UserDropdown :userinfo="userInfo" @logout="handleLogout" />
</div>
</header>
<!-- 主内容区域 -->

75
schoolNewsWeb/src/layouts/MobileLayout.vue
View File

@@ -44,11 +44,15 @@
</div>
</button>
<!-- 用户头像 -->
<div class="user-avatar-section" @click="handleUserClick">
<el-avatar :size="32" :src="userInfo.avatar" class="user-avatar">
<el-icon><User /></el-icon>
</el-avatar>
<!-- 用户下拉菜单 -->
<div class="user-dropdown-section">
<UserDropdown
:userinfo="userStore"
:hideAdmin="true"
:disableHover="true"
@logout="handleLogout"
class="mobile-user-dropdown"
/>
</div>
</div>
</header>
@@ -104,7 +108,7 @@ import {
Setting
} from '@element-plus/icons-vue';
import { FILE_DOWNLOAD_URL } from '@/config';
import { MobileNavItem } from '@/components/base';
import { MobileNavItem, UserDropdown } from '@/components/base';
import { AIAgentMobile } from '@/views/public/ai';
const route = useRoute();
const router = useRouter();
@@ -126,6 +130,10 @@ const showMore = computed(() => route.meta?.showMore as boolean || false);
const showTabBar = computed(() => route.meta?.showTabBar !== false);
// 从store获取用户信息
const userStore = computed(() => {
return store.getters['auth/userinfo'];
});
const userInfo = computed(() => {
const userDetail = store.getters['auth/userinfo'];
const user = store.getters['auth/user'];
@@ -224,9 +232,11 @@ const performSearch = () => {
}
};
// 用户头像点击处理
const handleUserClick = () => {
router.push('/user-center');
// 用户退出登录处理
const handleLogout = () => {
store.dispatch('auth/logout').then(() => {
router.push('/login');
});
};
// 处理导航菜单点击
@@ -428,16 +438,43 @@ onMounted(async () => {
}
}
.user-avatar-section {
cursor: pointer;
transition: opacity 0.2s;
&:hover {
opacity: 0.8;
}
.user-avatar {
border: 1px solid #e5e5e5;
.user-dropdown-section {
.mobile-user-dropdown {
:deep(.user-info) {
padding: 4px 8px;
background: transparent;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
color: #333;
}
}
:deep(.user-avatar) {
width: 32px;
height: 32px;
border: 1px solid #e5e5e5;
}
:deep(.user-details) {
display: none;
}
:deep(.dropdown-icon) {
display: none;
}
// 移动端下拉菜单样式调整
:deep(.dropdown-menu) {
right: 16px;
left: auto;
min-width: 140px;
// 隐藏管理端相关选项
.dropdown-item.info {
display: none;
}
}
}
}
}

266
schoolNewsWeb/src/views/user/user-center/LearningRecordsView.vue
View File

@@ -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>

171
schoolNewsWeb/src/views/user/user-center/MyAchievementsView.vue
View File

@@ -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>

137
schoolNewsWeb/src/views/user/user-center/MyFavoritesView.vue
View File

@@ -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>

39
schoolNewsWeb/src/views/user/user-center/UserCenterLayout.vue
View File

@@ -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>

43
schoolNewsWeb/src/views/user/user-center/components/UserCard.vue
View File

@@ -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 {