feat: 移动端适配（响应式优化）
This commit is contained in:
zhangjf
parent
c7904a9f8b
commit
0eae7f2aaf
178
fund-admin/src/components/MobileSidebar/index.vue
Normal file
178
fund-admin/src/components/MobileSidebar/index.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="mobile-sidebar-wrapper">
|
||||
<!-- 遮罩层 -->
|
||||
<div
|
||||
class="mobile-sidebar-mask"
|
||||
:class="{ show: modelValue }"
|
||||
@click="handleClose"
|
||||
/>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<div
|
||||
class="mobile-sidebar"
|
||||
:class="{ open: modelValue }"
|
||||
>
|
||||
<div class="mobile-sidebar-header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/logo.png" alt="logo" v-if="false">
|
||||
<span>资金服务平台</span>
|
||||
</div>
|
||||
<el-button link @click="handleClose">
|
||||
<el-icon><Close /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="mobile-sidebar-content">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="false"
|
||||
:collapse-transition="false"
|
||||
router
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="route in routes"
|
||||
:key="route.path"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Close } from '@element-plus/icons-vue'
|
||||
import SidebarItem from '@/layout/components/Sidebar/SidebarItem.vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
// 当前激活的菜单
|
||||
const activeMenu = computed(() => {
|
||||
const { meta, path } = route
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu
|
||||
}
|
||||
return path
|
||||
})
|
||||
|
||||
// 路由列表
|
||||
const routes = computed(() => {
|
||||
// 从路由配置中获取菜单
|
||||
const allRoutes = route.matched[0]?.children || []
|
||||
return allRoutes.filter(item => !item.hidden)
|
||||
})
|
||||
|
||||
// 关闭侧边栏
|
||||
const handleClose = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mobile-sidebar-wrapper {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-sidebar-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 260px;
|
||||
background: #304156;
|
||||
z-index: 1000;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&-header {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
background: #2b3a4d;
|
||||
|
||||
.logo {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(.el-menu) {
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: #bfcbd9;
|
||||
|
||||
&:hover {
|
||||
background: #263445;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: #409eff;
|
||||
background: #263445;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
209
fund-admin/src/composables/useMobile.js
Normal file
209
fund-admin/src/composables/useMobile.js
Normal file
@ -0,0 +1,209 @@
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
// 断点定义
|
||||
const BREAKPOINTS = {
|
||||
xs: 768, // 手机
|
||||
sm: 992, // 平板
|
||||
md: 1200, // 小桌面
|
||||
lg: 1920 // 大桌面
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动端检测组合式函数
|
||||
*/
|
||||
export function useMobile() {
|
||||
// 视口宽度
|
||||
const width = ref(window.innerWidth)
|
||||
const height = ref(window.innerHeight)
|
||||
|
||||
// 是否移动端（< 768px）
|
||||
const isMobile = computed(() => width.value < BREAKPOINTS.xs)
|
||||
|
||||
// 是否平板（768px - 992px）
|
||||
const isTablet = computed(() => width.value >= BREAKPOINTS.xs && width.value < BREAKPOINTS.sm)
|
||||
|
||||
// 是否桌面（>= 992px）
|
||||
const isDesktop = computed(() => width.value >= BREAKPOINTS.sm)
|
||||
|
||||
// 是否小屏幕（< 992px）
|
||||
const isSmallScreen = computed(() => width.value < BREAKPOINTS.sm)
|
||||
|
||||
// 当前断点
|
||||
const breakpoint = computed(() => {
|
||||
if (width.value < BREAKPOINTS.xs) return 'xs'
|
||||
if (width.value < BREAKPOINTS.sm) return 'sm'
|
||||
if (width.value < BREAKPOINTS.md) return 'md'
|
||||
if (width.value < BREAKPOINTS.lg) return 'lg'
|
||||
return 'xl'
|
||||
})
|
||||
|
||||
// 侧边栏是否折叠
|
||||
const sidebarCollapsed = ref(false)
|
||||
|
||||
// 移动端侧边栏是否打开
|
||||
const mobileSidebarOpen = ref(false)
|
||||
|
||||
// 切换侧边栏
|
||||
const toggleSidebar = () => {
|
||||
if (isMobile.value) {
|
||||
mobileSidebarOpen.value = !mobileSidebarOpen.value
|
||||
} else {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭移动端侧边栏
|
||||
const closeMobileSidebar = () => {
|
||||
mobileSidebarOpen.value = false
|
||||
}
|
||||
|
||||
// 打开移动端侧边栏
|
||||
const openMobileSidebar = () => {
|
||||
mobileSidebarOpen.value = true
|
||||
}
|
||||
|
||||
// 监听窗口大小变化
|
||||
const handleResize = () => {
|
||||
width.value = window.innerWidth
|
||||
height.value = window.innerHeight
|
||||
|
||||
// 切换到桌面端时关闭移动端侧边栏
|
||||
if (!isMobile.value) {
|
||||
mobileSidebarOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize)
|
||||
handleResize()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
isMobile,
|
||||
isTablet,
|
||||
isDesktop,
|
||||
isSmallScreen,
|
||||
breakpoint,
|
||||
sidebarCollapsed,
|
||||
mobileSidebarOpen,
|
||||
toggleSidebar,
|
||||
closeMobileSidebar,
|
||||
openMobileSidebar
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 响应式表格组合式函数
|
||||
*/
|
||||
export function useResponsiveTable() {
|
||||
const { isMobile } = useMobile()
|
||||
|
||||
// 表格高度
|
||||
const tableHeight = computed(() => {
|
||||
if (isMobile.value) {
|
||||
return 'auto'
|
||||
}
|
||||
// 桌面端：视口高度 - 头部(50) - 搜索区域(80) - 分页(50) - 边距(40)
|
||||
return window.innerHeight - 220
|
||||
})
|
||||
|
||||
// 分页大小选项
|
||||
const pageSizeOptions = computed(() => {
|
||||
return isMobile.value ? [10, 20] : [10, 20, 50, 100]
|
||||
})
|
||||
|
||||
// 默认分页大小
|
||||
const defaultPageSize = computed(() => {
|
||||
return isMobile.value ? 10 : 20
|
||||
})
|
||||
|
||||
return {
|
||||
isMobile,
|
||||
tableHeight,
|
||||
pageSizeOptions,
|
||||
defaultPageSize
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 触摸手势支持
|
||||
*/
|
||||
export function useTouchGesture() {
|
||||
const touchStartX = ref(0)
|
||||
const touchEndX = ref(0)
|
||||
const touchStartY = ref(0)
|
||||
const touchEndY = ref(0)
|
||||
|
||||
// 最小滑动距离
|
||||
const MIN_SWIPE_DISTANCE = 50
|
||||
|
||||
// 处理触摸开始
|
||||
const handleTouchStart = (e) => {
|
||||
touchStartX.value = e.touches[0].clientX
|
||||
touchStartY.value = e.touches[0].clientY
|
||||
}
|
||||
|
||||
// 处理触摸结束
|
||||
const handleTouchEnd = (e) => {
|
||||
touchEndX.value = e.changedTouches[0].clientX
|
||||
touchEndY.value = e.changedTouches[0].clientY
|
||||
|
||||
return {
|
||||
direction: getSwipeDirection(),
|
||||
distance: Math.abs(touchEndX.value - touchStartX.value)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取滑动方向
|
||||
const getSwipeDirection = () => {
|
||||
const diffX = touchEndX.value - touchStartX.value
|
||||
const diffY = touchEndY.value - touchStartY.value
|
||||
|
||||
// 判断是水平滑动还是垂直滑动
|
||||
if (Math.abs(diffX) > Math.abs(diffY)) {
|
||||
if (Math.abs(diffX) < MIN_SWIPE_DISTANCE) return null
|
||||
return diffX > 0 ? 'right' : 'left'
|
||||
} else {
|
||||
if (Math.abs(diffY) < MIN_SWIPE_DISTANCE) return null
|
||||
return diffY > 0 ? 'down' : 'up'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
handleTouchStart,
|
||||
handleTouchEnd,
|
||||
getSwipeDirection
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 虚拟键盘检测
|
||||
*/
|
||||
export function useVirtualKeyboard() {
|
||||
const isKeyboardOpen = ref(false)
|
||||
const windowHeight = ref(window.innerHeight)
|
||||
|
||||
const handleResize = () => {
|
||||
const currentHeight = window.innerHeight
|
||||
// 如果窗口高度变小超过150px，认为是虚拟键盘打开
|
||||
isKeyboardOpen.value = windowHeight.value - currentHeight > 150
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
return {
|
||||
isKeyboardOpen
|
||||
}
|
||||
}
|
||||
296
fund-admin/src/styles/mobile.scss
Normal file
296
fund-admin/src/styles/mobile.scss
Normal file
@ -0,0 +1,296 @@
|
||||
// 移动端适配样式
|
||||
// 断点定义：xs < 768px < sm < 992px < md < 1200px < lg
|
||||
|
||||
// 移动端基础样式
|
||||
@media screen and (max-width: 768px) {
|
||||
// 隐藏侧边栏
|
||||
.sidebar-container {
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
|
||||
&.mobile-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 主内容区域全宽
|
||||
.main-container {
|
||||
margin-left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
// 顶部导航栏适配
|
||||
.navbar {
|
||||
.hamburger-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
.right-menu-item {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索表单改为垂直布局
|
||||
.search-form {
|
||||
.el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格操作按钮
|
||||
.el-table {
|
||||
.el-button--link {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页器适配
|
||||
.el-pagination {
|
||||
.el-pagination__sizes,
|
||||
.el-pagination__jump {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
min-width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框全屏
|
||||
.el-dialog {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
height: 100vh;
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉全屏
|
||||
.el-drawer {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
// 表单单行显示
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.el-form-item__label {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片内边距减小
|
||||
.el-card {
|
||||
.el-card__header {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// 统计卡片
|
||||
.dashboard-card {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.card-icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部固定按钮
|
||||
.fixed-bottom-buttons {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px 15px;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.el-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部留白（避免被固定按钮遮挡）
|
||||
.has-fixed-bottom {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
// 平板适配
|
||||
@media screen and (min-width: 769px) and (max-width: 992px) {
|
||||
.sidebar-container {
|
||||
width: 54px !important;
|
||||
|
||||
.el-menu {
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
padding: 0 15px !important;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 54px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端菜单按钮
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端遮罩层
|
||||
.mobile-sidebar-mask {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式工具类
|
||||
.hide-on-mobile {
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.show-on-mobile {
|
||||
display: none !important;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式表格
|
||||
.responsive-table {
|
||||
@media screen and (max-width: 768px) {
|
||||
.el-table {
|
||||
&__header-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__body-wrapper {
|
||||
.el-table__row {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
td {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: none;
|
||||
padding: 8px 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: attr(data-label);
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 触摸优化
|
||||
@media (hover: none) {
|
||||
.el-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.el-table__row:hover > td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user