1
This commit is contained in:
Leo
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=yes, viewport-fit=cover">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= webpackConfig.name %></title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
|
||||
@@ -89,4 +89,448 @@
|
||||
> .el-submenu__title
|
||||
.el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 移动端 Element UI 组件优化
|
||||
@media (max-width: 768px) {
|
||||
// 表格优化
|
||||
.el-table {
|
||||
font-size: 12px;
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 8px 5px !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding: 8px 5px !important;
|
||||
}
|
||||
|
||||
// 操作列按钮优化
|
||||
.el-button {
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
margin: 2px;
|
||||
|
||||
&.el-button--mini {
|
||||
padding: 4px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格工具栏优化
|
||||
.el-table__header-wrapper {
|
||||
.el-table__header {
|
||||
th {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单优化
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 5px;
|
||||
width: 100% !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
// 表单项内联优化
|
||||
.el-form-item--mini,
|
||||
.el-form-item--small {
|
||||
.el-form-item__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框优化
|
||||
.el-input {
|
||||
.el-input__inner {
|
||||
font-size: 16px; // 防止iOS自动缩放
|
||||
height: 44px; // 增大触摸目标
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择器优化
|
||||
.el-select {
|
||||
width: 100%;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 16px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// 日期选择器优化
|
||||
.el-date-editor {
|
||||
width: 100% !important;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 16px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮优化
|
||||
.el-button {
|
||||
min-height: 44px; // 增大触摸目标
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
|
||||
&.el-button--mini {
|
||||
min-height: 36px;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.el-button--small {
|
||||
min-height: 40px;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框优化
|
||||
.el-dialog {
|
||||
width: 95% !important;
|
||||
margin: 5vh auto !important;
|
||||
border-radius: 8px;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 15px;
|
||||
max-height: calc(90vh - 120px);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px 15px;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 消息框优化
|
||||
.el-message-box {
|
||||
width: 90% !important;
|
||||
|
||||
.el-message-box__content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.el-message-box__btns {
|
||||
.el-button {
|
||||
width: 48%;
|
||||
margin: 0 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉优化
|
||||
.el-drawer {
|
||||
width: 85% !important;
|
||||
|
||||
.el-drawer__header {
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页优化
|
||||
.el-pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 10px 0;
|
||||
|
||||
.el-pagination__sizes,
|
||||
.el-pagination__total,
|
||||
.el-pagination__jump {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-prev,
|
||||
.btn-next,
|
||||
.el-pager li {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// 标签页优化
|
||||
.el-tabs {
|
||||
.el-tabs__header {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
&::after {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片优化
|
||||
.el-card {
|
||||
margin-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
|
||||
.el-card__header {
|
||||
padding: 12px 15px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// 步骤条优化
|
||||
.el-steps {
|
||||
.el-step__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// 上传组件优化
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 标签优化
|
||||
.el-tag {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
// 开关优化
|
||||
.el-switch {
|
||||
.el-switch__core {
|
||||
min-width: 44px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// 单选框组优化
|
||||
.el-radio-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
.el-radio {
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 复选框组优化
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
.el-checkbox {
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 级联选择器优化
|
||||
.el-cascader {
|
||||
width: 100%;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 16px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// 时间选择器优化
|
||||
.el-time-picker {
|
||||
width: 100%;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 16px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// 数字输入框优化
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 16px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// 滑块优化
|
||||
.el-slider {
|
||||
margin: 15px 0;
|
||||
|
||||
.el-slider__button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 评分优化
|
||||
.el-rate {
|
||||
.el-rate__item {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 颜色选择器优化
|
||||
.el-color-picker {
|
||||
.el-color-picker__trigger {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// 穿梭框优化
|
||||
.el-transfer {
|
||||
.el-transfer-panel {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
// 树形控件优化
|
||||
.el-tree {
|
||||
.el-tree-node__content {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// 折叠面板优化
|
||||
.el-collapse {
|
||||
.el-collapse-item__header {
|
||||
font-size: 14px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// 时间线优化
|
||||
.el-timeline {
|
||||
.el-timeline-item__content {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// 描述列表优化
|
||||
.el-descriptions {
|
||||
.el-descriptions__label {
|
||||
font-size: 13px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.el-descriptions__content {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态优化
|
||||
.el-empty {
|
||||
padding: 20px;
|
||||
|
||||
.el-empty__description {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏优化
|
||||
.el-skeleton {
|
||||
.el-skeleton__item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 结果页优化
|
||||
.el-result {
|
||||
padding: 20px;
|
||||
|
||||
.el-result__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-result__subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
@import './element-ui.scss';
|
||||
@import './sidebar.scss';
|
||||
@import './btn.scss';
|
||||
@import './mobile.scss';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
@@ -122,6 +123,10 @@ aside {
|
||||
//main-container全局样式
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.components-container {
|
||||
@@ -176,3 +181,214 @@ aside {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端响应式优化
|
||||
@media (max-width: 768px) {
|
||||
// 全局容器优化
|
||||
.app-container {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
margin: 15px 10px !important;
|
||||
}
|
||||
|
||||
// 表单优化
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
font-size: 14px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-select,
|
||||
.el-date-picker {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组优化
|
||||
.el-button-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.el-button {
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框优化
|
||||
.el-dialog {
|
||||
width: 95% !important;
|
||||
margin: 5vh auto !important;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 15px;
|
||||
max-height: calc(90vh - 120px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉优化
|
||||
.el-drawer {
|
||||
width: 85% !important;
|
||||
}
|
||||
|
||||
// 分页优化
|
||||
.pagination-container {
|
||||
padding: 10px 0;
|
||||
|
||||
.el-pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
|
||||
.el-pagination__sizes,
|
||||
.el-pagination__total,
|
||||
.el-pagination__jump {
|
||||
display: none; // 移动端隐藏部分分页信息
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片优化
|
||||
.el-card {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.el-card__header {
|
||||
padding: 12px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// 标签页优化
|
||||
.el-tabs {
|
||||
.el-tabs__header {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格容器优化
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.el-table {
|
||||
min-width: 600px; // 保持最小宽度，允许横向滚动
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索表单优化
|
||||
.search-form {
|
||||
.el-form-item {
|
||||
width: 100% !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 操作按钮区域优化
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.el-button {
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// 文本溢出处理
|
||||
.text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 触摸优化
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// 移动端卡片列表优化
|
||||
.mobile-card-list {
|
||||
background: #f5f7fa;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
// 移动端搜索表单优化
|
||||
.mobile-search-form {
|
||||
.search-bar {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端按钮组优化
|
||||
.mobile-button-group {
|
||||
.mobile-buttons {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端表格容器优化
|
||||
.table-container {
|
||||
@media (max-width: 768px) {
|
||||
.el-table {
|
||||
display: none; // 移动端隐藏表格，使用卡片视图
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框优化（防止iOS自动缩放）
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
textarea,
|
||||
select {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
// 禁用文本选择（移动端长按优化）
|
||||
.no-select {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 平板设备优化
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.app-container {
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
margin: 20px 30px !important;
|
||||
}
|
||||
}
|
||||
394
src/assets/styles/mobile.scss
Normal file
394
src/assets/styles/mobile.scss
Normal file
@@ -0,0 +1,394 @@
|
||||
/**
|
||||
* 移动端专用样式
|
||||
*/
|
||||
|
||||
// 移动端全局优化
|
||||
@media (max-width: 768px) {
|
||||
// 页面容器
|
||||
.app-container {
|
||||
padding: 12px !important;
|
||||
background: #f5f7fa;
|
||||
min-height: calc(100vh - 48px - 60px); // 减去头部和底部导航
|
||||
}
|
||||
|
||||
// 卡片样式
|
||||
.el-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 12px;
|
||||
border: none;
|
||||
|
||||
.el-card__header {
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 列表项优化
|
||||
.el-list-item {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 分割线优化
|
||||
.el-divider {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
// 标签优化
|
||||
.el-tag {
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
// 徽章优化
|
||||
.el-badge {
|
||||
.el-badge__content {
|
||||
font-size: 10px;
|
||||
padding: 0 4px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 步骤条优化
|
||||
.el-steps {
|
||||
.el-step__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// 时间线优化
|
||||
.el-timeline {
|
||||
padding-left: 20px;
|
||||
|
||||
.el-timeline-item__node {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.el-timeline-item__content {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// 描述列表优化
|
||||
.el-descriptions {
|
||||
.el-descriptions__label {
|
||||
width: 35%;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.el-descriptions__content {
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态优化
|
||||
.el-empty {
|
||||
padding: 40px 20px;
|
||||
|
||||
.el-empty__image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.el-empty__description {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏优化
|
||||
.el-skeleton {
|
||||
padding: 16px;
|
||||
|
||||
.el-skeleton__item {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 结果页优化
|
||||
.el-result {
|
||||
padding: 30px 20px;
|
||||
|
||||
.el-result__icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.el-result__title {
|
||||
font-size: 18px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.el-result__subtitle {
|
||||
font-size: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载优化
|
||||
.el-loading-mask {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// 消息提示优化
|
||||
.el-message {
|
||||
min-width: auto;
|
||||
width: 90%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
|
||||
.el-message__content {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 通知优化
|
||||
.el-notification {
|
||||
width: 90%;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
|
||||
.el-notification__title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.el-notification__content {
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 弹出层优化
|
||||
.el-popover {
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
// 工具提示优化
|
||||
.el-tooltip__popper {
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
// 下拉菜单优化
|
||||
.el-dropdown-menu {
|
||||
border-radius: 8px;
|
||||
padding: 8px 0;
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择器下拉优化
|
||||
.el-select-dropdown {
|
||||
border-radius: 8px;
|
||||
|
||||
.el-select-dropdown__item {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 日期选择器优化
|
||||
.el-picker-panel {
|
||||
width: 95%;
|
||||
left: 2.5% !important;
|
||||
border-radius: 8px;
|
||||
|
||||
.el-date-picker__header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.el-picker-panel__content {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 级联选择器优化
|
||||
.el-cascader-menus {
|
||||
border-radius: 8px;
|
||||
|
||||
.el-cascader-menu {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
// 穿梭框优化
|
||||
.el-transfer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.el-transfer-panel {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 树形控件优化
|
||||
.el-tree {
|
||||
.el-tree-node__content {
|
||||
height: 44px;
|
||||
padding: 0 12px;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 折叠面板优化
|
||||
.el-collapse {
|
||||
border: none;
|
||||
|
||||
.el-collapse-item {
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-collapse-item__header {
|
||||
padding: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条优化
|
||||
.el-progress {
|
||||
.el-progress__text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 滑块优化
|
||||
.el-slider {
|
||||
margin: 20px 0;
|
||||
|
||||
.el-slider__button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
// 评分优化
|
||||
.el-rate {
|
||||
.el-rate__item {
|
||||
font-size: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 颜色选择器优化
|
||||
.el-color-picker {
|
||||
.el-color-picker__trigger {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 上传组件优化
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片预览优化
|
||||
.el-image-viewer__wrapper {
|
||||
.el-image-viewer__canvas {
|
||||
img {
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉优化
|
||||
.el-drawer {
|
||||
.el-drawer__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
.el-drawer__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 固定定位元素优化（适配安全区域）
|
||||
.fixed-bottom {
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.fixed-top {
|
||||
top: env(safe-area-inset-top);
|
||||
}
|
||||
}
|
||||
|
||||
// 平板设备优化
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.app-container {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -137,6 +137,68 @@
|
||||
.pagination-container .el-pagination > .el-pagination__sizes {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 表格移动端优化
|
||||
.el-table {
|
||||
font-size: 12px;
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 8px 5px !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding: 8px 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单移动端优化
|
||||
.form-header {
|
||||
font-size: 14px;
|
||||
margin: 5px 5px 15px 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
// 卡片移动端优化
|
||||
.el-card__header {
|
||||
padding: 10px 12px 5px !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 12px 15px 15px 15px !important;
|
||||
}
|
||||
|
||||
// 按钮组移动端优化
|
||||
.top-right-btn {
|
||||
float: none;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 工具类移动端优化
|
||||
.mb20, .mt20, .mr20, .ml20 {
|
||||
margin: 10px !important;
|
||||
}
|
||||
|
||||
.mb10, .mt10, .mr10, .ml10 {
|
||||
margin: 8px !important;
|
||||
}
|
||||
|
||||
.mb5, .mt5, .mr5, .ml5 {
|
||||
margin: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table .fixed-width .el-button--mini {
|
||||
|
||||
174
src/components/MobileBottomNav/index.vue
Normal file
174
src/components/MobileBottomNav/index.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="mobile-bottom-nav" v-if="isMobile && show">
|
||||
<div
|
||||
v-for="item in navItems"
|
||||
:key="item.path"
|
||||
class="nav-item"
|
||||
:class="{ 'active': isActive(item.path) }"
|
||||
@click="handleNavClick(item)"
|
||||
>
|
||||
<div class="nav-icon">
|
||||
<i :class="item.icon" v-if="item.icon"></i>
|
||||
<svg-icon :icon-class="item.iconClass" v-else-if="item.iconClass" />
|
||||
<el-badge :value="item.badge" :hidden="!item.badge" v-if="item.badge">
|
||||
<div class="icon-placeholder"></div>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div class="nav-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileBottomNav',
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['device']),
|
||||
isMobile() {
|
||||
return this.device === 'mobile' || window.innerWidth < 768
|
||||
},
|
||||
navItems() {
|
||||
if (this.items && this.items.length > 0) {
|
||||
return this.items
|
||||
}
|
||||
// 默认导航项 - 从路由中获取
|
||||
const routes = this.$store?.state?.permission?.routes || []
|
||||
const mainRoutes = routes.filter(route => route.meta && route.meta.title && !route.hidden)
|
||||
|
||||
if (mainRoutes.length > 0) {
|
||||
return mainRoutes.slice(0, 5).map(route => ({
|
||||
path: route.path,
|
||||
label: route.meta.title,
|
||||
icon: route.meta.icon || 'el-icon-menu',
|
||||
iconClass: route.meta.icon
|
||||
}))
|
||||
}
|
||||
|
||||
// 如果没有路由，返回默认导航
|
||||
return [
|
||||
{
|
||||
path: '/index',
|
||||
label: '首页',
|
||||
icon: 'el-icon-s-home'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isActive(path) {
|
||||
return this.$route.path.startsWith(path)
|
||||
},
|
||||
handleNavClick(item) {
|
||||
if (item.handler) {
|
||||
item.handler()
|
||||
} else if (item.path) {
|
||||
this.$router.push(item.path)
|
||||
}
|
||||
this.$emit('nav-click', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
.nav-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
position: relative;
|
||||
|
||||
i, .svg-icon {
|
||||
font-size: 22px;
|
||||
color: #909399;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-icon {
|
||||
i, .svg-icon {
|
||||
color: #409eff;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 桌面端隐藏
|
||||
@media (min-width: 769px) {
|
||||
.mobile-bottom-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 为底部导航预留空间
|
||||
@media (max-width: 768px) {
|
||||
.app-main {
|
||||
padding-bottom: 60px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
188
src/components/MobileButtonGroup/index.vue
Normal file
188
src/components/MobileButtonGroup/index.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="mobile-button-group" :class="{ 'sticky': sticky }">
|
||||
<!-- 移动端按钮组 -->
|
||||
<div v-if="isMobile" class="mobile-buttons">
|
||||
<!-- 主要操作按钮 -->
|
||||
<div class="primary-actions" v-if="primaryButtons.length > 0">
|
||||
<el-button
|
||||
v-for="btn in primaryButtons"
|
||||
:key="btn.key || btn.label"
|
||||
:type="btn.type || 'primary'"
|
||||
:size="btn.size || 'medium'"
|
||||
:icon="btn.icon"
|
||||
:disabled="btn.disabled"
|
||||
:loading="btn.loading"
|
||||
@click="handleClick(btn)"
|
||||
class="action-btn"
|
||||
>
|
||||
{{ btn.label }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 更多操作下拉菜单 -->
|
||||
<el-dropdown
|
||||
v-if="moreButtons.length > 0"
|
||||
trigger="click"
|
||||
placement="top-end"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<el-button
|
||||
type="default"
|
||||
size="medium"
|
||||
icon="el-icon-more"
|
||||
class="more-btn"
|
||||
>
|
||||
更多
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="btn in moreButtons"
|
||||
:key="btn.key || btn.label"
|
||||
:command="btn.key || btn.label"
|
||||
:disabled="btn.disabled"
|
||||
:divided="btn.divided"
|
||||
>
|
||||
<i :class="btn.icon" v-if="btn.icon"></i>
|
||||
{{ btn.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- 桌面端按钮组 -->
|
||||
<div v-else class="desktop-buttons">
|
||||
<slot>
|
||||
<el-button
|
||||
v-for="btn in allButtons"
|
||||
:key="btn.key || btn.label"
|
||||
:type="btn.type || 'default'"
|
||||
:size="btn.size || 'mini'"
|
||||
:icon="btn.icon"
|
||||
:disabled="btn.disabled"
|
||||
:loading="btn.loading"
|
||||
:plain="btn.plain"
|
||||
@click="handleClick(btn)"
|
||||
>
|
||||
{{ btn.label }}
|
||||
</el-button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileButtonGroup',
|
||||
props: {
|
||||
buttons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
primaryCount: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
sticky: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['device']),
|
||||
isMobile() {
|
||||
return this.device === 'mobile' || window.innerWidth < 768
|
||||
},
|
||||
allButtons() {
|
||||
return this.buttons || []
|
||||
},
|
||||
primaryButtons() {
|
||||
return this.allButtons.slice(0, this.primaryCount).filter(btn => !btn.hide)
|
||||
},
|
||||
moreButtons() {
|
||||
return this.allButtons.slice(this.primaryCount).filter(btn => !btn.hide)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(btn) {
|
||||
if (btn.handler) {
|
||||
btn.handler()
|
||||
}
|
||||
this.$emit('button-click', btn)
|
||||
},
|
||||
handleCommand(command) {
|
||||
const btn = this.moreButtons.find(b => (b.key || b.label) === command)
|
||||
if (btn) {
|
||||
this.handleClick(btn)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-button-group {
|
||||
width: 100%;
|
||||
|
||||
&.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
margin: -12px -12px 12px -12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
.primary-actions {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// 桌面端隐藏移动端组件
|
||||
@media (min-width: 769px) {
|
||||
.mobile-buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端隐藏桌面端组件
|
||||
@media (max-width: 768px) {
|
||||
.desktop-buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
259
src/components/MobileSearchForm/index.vue
Normal file
259
src/components/MobileSearchForm/index.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div class="mobile-search-form" :class="{ 'expanded': expanded }">
|
||||
<!-- 移动端折叠搜索 -->
|
||||
<div v-if="isMobile" class="mobile-search-wrapper">
|
||||
<!-- 搜索按钮栏 -->
|
||||
<div class="search-bar" v-if="!expanded">
|
||||
<el-input
|
||||
v-model="quickSearch"
|
||||
placeholder="快速搜索..."
|
||||
clearable
|
||||
@keyup.enter.native="handleQuickSearch"
|
||||
@clear="handleQuickSearch"
|
||||
>
|
||||
<el-button slot="append" icon="el-icon-search" @click="handleQuickSearch"></el-button>
|
||||
</el-input>
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-setting"
|
||||
class="filter-btn"
|
||||
@click="expanded = true"
|
||||
>
|
||||
筛选
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 展开的搜索表单 -->
|
||||
<div class="expanded-form" v-if="expanded">
|
||||
<div class="form-header">
|
||||
<span class="form-title">筛选条件</span>
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
@click="expanded = false"
|
||||
class="close-btn"
|
||||
></el-button>
|
||||
</div>
|
||||
|
||||
<div class="form-content">
|
||||
<slot name="form" :expanded="expanded">
|
||||
<el-form
|
||||
:model="formData"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
>
|
||||
<slot></slot>
|
||||
</el-form>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 桌面端正常显示 -->
|
||||
<div v-else class="desktop-search-wrapper">
|
||||
<slot name="form" :expanded="true">
|
||||
<el-form
|
||||
:model="formData"
|
||||
:inline="inline"
|
||||
:label-width="labelWidth"
|
||||
>
|
||||
<slot></slot>
|
||||
</el-form>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileSearchForm',
|
||||
props: {
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '68px'
|
||||
},
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expanded: false,
|
||||
quickSearch: '',
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['device']),
|
||||
isMobile() {
|
||||
return this.device === 'mobile' || window.innerWidth < 768
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
model: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.formData = { ...val }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleQuickSearch() {
|
||||
this.$emit('quick-search', this.quickSearch)
|
||||
},
|
||||
handleSearch() {
|
||||
this.$emit('search', this.formData)
|
||||
this.expanded = false
|
||||
},
|
||||
handleReset() {
|
||||
this.$emit('reset')
|
||||
this.formData = {}
|
||||
this.quickSearch = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-search-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-search-wrapper {
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
.el-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-form {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideUp 0.3s ease;
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
background: #fff;
|
||||
|
||||
.form-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 20px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.form-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item__label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-select,
|
||||
.el-date-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
background: #fff;
|
||||
|
||||
.el-button {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-search-wrapper {
|
||||
::v-deep .el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 桌面端隐藏移动端组件
|
||||
@media (min-width: 769px) {
|
||||
.mobile-search-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端隐藏桌面端组件
|
||||
@media (max-width: 768px) {
|
||||
.desktop-search-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
403
src/components/MobileTable/index.vue
Normal file
403
src/components/MobileTable/index.vue
Normal file
@@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<div class="mobile-table-container">
|
||||
<!-- 移动端卡片式列表 -->
|
||||
<div v-if="isMobile" class="mobile-card-list">
|
||||
<div
|
||||
v-for="(row, index) in data"
|
||||
:key="getRowKey(row, index)"
|
||||
class="mobile-card-item"
|
||||
:class="{ 'selected': isSelected(row) }"
|
||||
@click="handleCardClick(row, index)"
|
||||
>
|
||||
<!-- 卡片头部 -->
|
||||
<div class="card-header" v-if="showHeader">
|
||||
<div class="card-title">
|
||||
<slot name="header" :row="row" :index="index">
|
||||
{{ getHeaderText(row) }}
|
||||
</slot>
|
||||
</div>
|
||||
<div class="card-actions" v-if="showSelection || showActions">
|
||||
<el-checkbox
|
||||
v-if="showSelection"
|
||||
:value="isSelected(row)"
|
||||
@click.stop="handleSelect(row)"
|
||||
@change="handleSelectChange(row, $event)"
|
||||
/>
|
||||
<el-dropdown
|
||||
v-if="showActions"
|
||||
trigger="click"
|
||||
@command="(cmd) => handleAction(cmd, row)"
|
||||
@click.stop
|
||||
>
|
||||
<span class="action-btn" @click.stop>
|
||||
<i class="el-icon-more"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<slot name="actions" :row="row" :index="index">
|
||||
<el-dropdown-item
|
||||
v-for="action in actions"
|
||||
:key="action.key"
|
||||
:command="action.key"
|
||||
:disabled="action.disabled && action.disabled(row)"
|
||||
>
|
||||
<i :class="action.icon" v-if="action.icon"></i>
|
||||
{{ action.label }}
|
||||
</el-dropdown-item>
|
||||
</slot>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片内容 -->
|
||||
<div class="card-content">
|
||||
<slot name="content" :row="row" :index="index">
|
||||
<div
|
||||
v-for="column in columns"
|
||||
:key="column.prop || column.key"
|
||||
class="card-field"
|
||||
v-if="column.visible !== false"
|
||||
>
|
||||
<div class="field-label">{{ column.label }}</div>
|
||||
<div class="field-value">
|
||||
<slot
|
||||
:name="`column-${column.prop || column.key}`"
|
||||
:row="row"
|
||||
:column="column"
|
||||
:value="getFieldValue(row, column)"
|
||||
>
|
||||
<dict-tag
|
||||
v-if="column.dictType"
|
||||
:options="getDictOptions(column.dictType)"
|
||||
:value="getFieldValue(row, column)"
|
||||
/>
|
||||
<span v-else-if="column.type === 'switch'">
|
||||
<el-switch
|
||||
:value="getFieldValue(row, column)"
|
||||
:active-value="column.activeValue"
|
||||
:inactive-value="column.inactiveValue"
|
||||
@change="(val) => handleSwitchChange(row, column, val)"
|
||||
disabled
|
||||
/>
|
||||
</span>
|
||||
<span v-else>{{ formatValue(getFieldValue(row, column), column) }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 卡片底部操作 -->
|
||||
<div class="card-footer" v-if="showFooter">
|
||||
<slot name="footer" :row="row" :index="index">
|
||||
<el-button
|
||||
v-for="btn in footerButtons"
|
||||
:key="btn.key"
|
||||
:type="btn.type || 'text'"
|
||||
:size="btn.size || 'small'"
|
||||
:icon="btn.icon"
|
||||
:disabled="btn.disabled && btn.disabled(row)"
|
||||
@click.stop="handleButtonClick(btn, row)"
|
||||
>
|
||||
{{ btn.label }}
|
||||
</el-button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty
|
||||
v-if="!data || data.length === 0"
|
||||
description="暂无数据"
|
||||
:image-size="100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 桌面端表格 -->
|
||||
<el-table
|
||||
v-else
|
||||
v-bind="$attrs"
|
||||
:data="data"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot></slot>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileTable',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
rowKey: {
|
||||
type: [String, Function],
|
||||
default: 'id'
|
||||
},
|
||||
showSelection: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showActions: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
footerButtons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
selectedRows: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
headerField: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['device']),
|
||||
isMobile() {
|
||||
return this.device === 'mobile' || window.innerWidth < 768
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRowKey(row, index) {
|
||||
if (typeof this.rowKey === 'function') {
|
||||
return this.rowKey(row, index)
|
||||
}
|
||||
return row[this.rowKey] || index
|
||||
},
|
||||
isSelected(row) {
|
||||
if (!this.showSelection || !this.selectedRows) return false
|
||||
const key = this.getRowKey(row)
|
||||
return this.selectedRows.some(r => this.getRowKey(r) === key)
|
||||
},
|
||||
handleSelect(row) {
|
||||
this.$emit('select', row)
|
||||
},
|
||||
handleSelectChange(row, selected) {
|
||||
this.$emit('selection-change', row, selected)
|
||||
},
|
||||
handleCardClick(row, index) {
|
||||
this.$emit('row-click', row, index)
|
||||
},
|
||||
handleAction(command, row) {
|
||||
this.$emit('action', command, row)
|
||||
},
|
||||
handleButtonClick(btn, row) {
|
||||
if (btn.handler) {
|
||||
btn.handler(row)
|
||||
}
|
||||
this.$emit('button-click', btn.key, row)
|
||||
},
|
||||
getFieldValue(row, column) {
|
||||
if (column.formatter) {
|
||||
return column.formatter(row, column, row[column.prop], index)
|
||||
}
|
||||
if (typeof column.prop === 'function') {
|
||||
return column.prop(row)
|
||||
}
|
||||
return column.prop ? this.getNestedValue(row, column.prop) : ''
|
||||
},
|
||||
getNestedValue(obj, path) {
|
||||
return path.split('.').reduce((o, p) => o && o[p], obj)
|
||||
},
|
||||
formatValue(value, column) {
|
||||
if (value === null || value === undefined) return '-'
|
||||
if (column.formatter) {
|
||||
return column.formatter(null, column, value)
|
||||
}
|
||||
return value
|
||||
},
|
||||
getHeaderText(row) {
|
||||
if (this.headerField) {
|
||||
return this.getNestedValue(row, this.headerField) || '未命名'
|
||||
}
|
||||
return row.name || row.title || '未命名'
|
||||
},
|
||||
getDictOptions(dictType) {
|
||||
// 这里需要根据实际的字典获取方式来实现
|
||||
// 可以通过 this.$store 或 this.$parent 获取字典数据
|
||||
try {
|
||||
const dictData = this.$store?.state?.dict?.dict || {}
|
||||
return dictData[dictType] || []
|
||||
} catch (e) {
|
||||
return []
|
||||
}
|
||||
},
|
||||
handleSwitchChange(row, column, value) {
|
||||
this.$emit('switch-change', row, column, value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-table-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-card-list {
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.mobile-card-item {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 2px solid #409eff;
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.card-title {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
background: #e4e7ed;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
.card-field {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
min-width: 80px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
|
||||
::v-deep .el-tag {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
::v-deep .el-button {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 桌面端隐藏
|
||||
@media (min-width: 769px) {
|
||||
.mobile-card-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端隐藏表格
|
||||
@media (max-width: 768px) {
|
||||
::v-deep .el-table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,7 +42,7 @@ export default {
|
||||
// 移动端页码按钮的数量端默认值5
|
||||
pagerCount: {
|
||||
type: Number,
|
||||
default: document.body.clientWidth < 992 ? 5 : 7
|
||||
default: 7
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
@@ -63,8 +63,19 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMobile: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMobile = window.innerWidth < 768
|
||||
if (this.isMobile && this.layout === 'total, sizes, prev, pager, next, jumper') {
|
||||
this.$emit('update:layout', 'prev, pager, next')
|
||||
}
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
computed: {
|
||||
currentPage: {
|
||||
get() {
|
||||
@@ -84,6 +95,13 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
const wasMobile = this.isMobile
|
||||
this.isMobile = window.innerWidth < 768
|
||||
if (wasMobile !== this.isMobile) {
|
||||
this.$forceUpdate()
|
||||
}
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
if (this.currentPage * val > this.total) {
|
||||
this.currentPage = 1
|
||||
@@ -106,6 +124,33 @@ export default {
|
||||
<style scoped>
|
||||
.pagination-container {
|
||||
background: #fff;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px 0;
|
||||
|
||||
::v-deep .el-pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.el-pagination__sizes,
|
||||
.el-pagination__total,
|
||||
.el-pagination__jump {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-prev,
|
||||
.btn-next,
|
||||
.el-pager li {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
display: none;
|
||||
|
||||
@@ -151,4 +151,39 @@ export default {
|
||||
background-color: #ccc;
|
||||
margin: 3px auto;
|
||||
}
|
||||
|
||||
// 移动端优化
|
||||
@media (max-width: 768px) {
|
||||
.top-right-btn {
|
||||
float: none;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.el-button {
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
|
||||
&.el-button--mini {
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
width: 95% !important;
|
||||
margin: 5vh auto !important;
|
||||
|
||||
.el-transfer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -51,24 +51,47 @@ export default {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: calc(100vh - 48px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main:has(.copyright) {
|
||||
padding-bottom: 36px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 50px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.hasTagsView {
|
||||
.app-main {
|
||||
/* 84 = navbar + tags-view = 50 + 34 */
|
||||
min-height: calc(100vh - 84px);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: calc(100vh - 48px);
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 84px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -110,6 +110,12 @@ export default {
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
|
||||
// 移动端优化
|
||||
@media (max-width: 768px) {
|
||||
height: 48px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
@@ -117,19 +123,41 @@ export default {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
padding: 0 12px;
|
||||
min-width: 44px; // 增大触摸目标
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
line-height: 48px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(0, 0, 0, .05)
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none; // 移动端隐藏面包屑
|
||||
}
|
||||
}
|
||||
|
||||
.topmenu-container {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
left: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.errLog-container {
|
||||
@@ -141,19 +169,36 @@ export default {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
line-height: 48px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
min-width: 44px; // 增大触摸目标
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 6px;
|
||||
font-size: 16px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
@@ -161,6 +206,10 @@ export default {
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(0, 0, 0, .05)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -168,33 +217,71 @@ export default {
|
||||
margin-right: 0px;
|
||||
padding-right: 0px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
min-height: 44px; // 增大触摸目标
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 8px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-nickname{
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 13px;
|
||||
max-width: 60px;
|
||||
display: none; // 移动端隐藏昵称
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting {
|
||||
@media (max-width: 768px) {
|
||||
display: none; // 移动端隐藏设置按钮
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -65,6 +65,12 @@ export default {
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
// 移动端优化
|
||||
@media (max-width: 768px) {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
& .sidebar-logo-link {
|
||||
height: 100%;
|
||||
@@ -73,6 +79,10 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
& .logo-icon {
|
||||
display: flex;
|
||||
@@ -86,11 +96,21 @@ export default {
|
||||
margin-right: 15px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -99,6 +119,10 @@ export default {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
@@ -110,6 +134,10 @@ export default {
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -244,6 +244,14 @@ export default {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #d8dce5;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||
|
||||
// 移动端优化
|
||||
@media (max-width: 768px) {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
display: none; // 移动端隐藏标签页
|
||||
}
|
||||
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
@@ -258,11 +266,30 @@ export default {
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: 120px;
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: 15px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: #42b983;
|
||||
@@ -298,13 +325,39 @@ export default {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
|
||||
min-width: 120px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
min-width: 140px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px 16px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,23 @@
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
|
||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
|
||||
<sidebar v-if="!sidebar.hide && device !== 'mobile'" class="sidebar-container"/>
|
||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide, 'mobile-layout': device === 'mobile'}" class="main-container">
|
||||
<div :class="{'fixed-header':fixedHeader}">
|
||||
<navbar @setLayout="setLayout"/>
|
||||
<tags-view v-if="needTagsView"/>
|
||||
<tags-view v-if="needTagsView && device !== 'mobile'"/>
|
||||
</div>
|
||||
<app-main/>
|
||||
<settings ref="settingRef"/>
|
||||
</div>
|
||||
<!-- 移动端底部导航 -->
|
||||
<mobile-bottom-nav v-if="device === 'mobile'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import MobileBottomNav from '@/components/MobileBottomNav'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
import variables from '@/assets/styles/variables.scss'
|
||||
@@ -26,7 +29,8 @@ export default {
|
||||
Navbar,
|
||||
Settings,
|
||||
Sidebar,
|
||||
TagsView
|
||||
TagsView,
|
||||
MobileBottomNav
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
computed: {
|
||||
@@ -107,4 +111,40 @@ export default {
|
||||
.mobile .fixed-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 移动端优化
|
||||
@media (max-width: 768px) {
|
||||
.app-wrapper {
|
||||
&.mobile {
|
||||
.sidebar-container {
|
||||
display: none; // 移动端完全隐藏侧边栏，使用底部导航
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-bg {
|
||||
display: none; // 移动端不需要遮罩
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 0 !important;
|
||||
width: 100%;
|
||||
|
||||
&.mobile-layout {
|
||||
padding-bottom: 60px; // 为底部导航预留空间
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
width: 100% !important;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// 移动端隐藏标签页
|
||||
.hasTagsView {
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 48px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import store from '@/store'
|
||||
|
||||
const { body } = document
|
||||
const WIDTH = 992 // refer to Bootstrap's responsive design
|
||||
const WIDTH = 768 // 移动端断点调整为 768px，更符合移动设备标准
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
|
||||
14
src/main.js
14
src/main.js
@@ -16,6 +16,7 @@ import { download } from '@/utils/request'
|
||||
|
||||
import './assets/icons' // icon
|
||||
import './permission' // permission control
|
||||
import { initMobile } from '@/utils/mobile' // 移动端初始化
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { getConfigKey } from "@/api/system/config"
|
||||
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi"
|
||||
@@ -35,6 +36,11 @@ import ImagePreview from "@/components/ImagePreview"
|
||||
import DictTag from '@/components/DictTag'
|
||||
// 字典数据组件
|
||||
import DictData from '@/components/DictData'
|
||||
// 移动端组件
|
||||
import MobileTable from '@/components/MobileTable'
|
||||
import MobileSearchForm from '@/components/MobileSearchForm'
|
||||
import MobileButtonGroup from '@/components/MobileButtonGroup'
|
||||
import MobileBottomNav from '@/components/MobileBottomNav'
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
@@ -55,6 +61,11 @@ Vue.component('Editor', Editor)
|
||||
Vue.component('FileUpload', FileUpload)
|
||||
Vue.component('ImageUpload', ImageUpload)
|
||||
Vue.component('ImagePreview', ImagePreview)
|
||||
// 移动端组件
|
||||
Vue.component('MobileTable', MobileTable)
|
||||
Vue.component('MobileSearchForm', MobileSearchForm)
|
||||
Vue.component('MobileButtonGroup', MobileButtonGroup)
|
||||
Vue.component('MobileBottomNav', MobileBottomNav)
|
||||
|
||||
Vue.use(directive)
|
||||
Vue.use(plugins)
|
||||
@@ -75,6 +86,9 @@ Vue.use(Element, {
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// 初始化移动端优化
|
||||
initMobile()
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
|
||||
91
src/mixins/mobile.js
Normal file
91
src/mixins/mobile.js
Normal file
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* 移动端混入
|
||||
*/
|
||||
import { mapGetters } from 'vuex'
|
||||
import { isMobile, isIOS, isAndroid, getDeviceType } from '@/utils/mobile'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['device']),
|
||||
$isMobile() {
|
||||
return this.device === 'mobile' || isMobile()
|
||||
},
|
||||
$isIOS() {
|
||||
return isIOS()
|
||||
},
|
||||
$isAndroid() {
|
||||
return isAndroid()
|
||||
},
|
||||
$deviceType() {
|
||||
return getDeviceType()
|
||||
},
|
||||
$isTablet() {
|
||||
return window.innerWidth >= 768 && window.innerWidth < 1024
|
||||
},
|
||||
$isPhone() {
|
||||
return window.innerWidth < 768
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 移动端提示
|
||||
*/
|
||||
$mobileToast(message, type = 'info') {
|
||||
if (this.$isMobile) {
|
||||
this.$message({
|
||||
message,
|
||||
type,
|
||||
duration: 2000,
|
||||
showClose: false
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 移动端确认对话框
|
||||
*/
|
||||
$mobileConfirm(message, title = '提示', options = {}) {
|
||||
return this.$confirm(message, title, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
...options
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 移动端表格列过滤
|
||||
*/
|
||||
$filterMobileColumns(columns) {
|
||||
if (this.$isMobile) {
|
||||
// 移动端只显示重要列
|
||||
return columns.filter(col => {
|
||||
if (col.mobile === false) return false
|
||||
if (col.mobile === true) return true
|
||||
// 默认显示前5列
|
||||
return columns.indexOf(col) < 5
|
||||
})
|
||||
}
|
||||
return columns
|
||||
},
|
||||
/**
|
||||
* 格式化移动端显示值
|
||||
*/
|
||||
$formatMobileValue(value, column) {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '-'
|
||||
}
|
||||
if (column && column.formatter) {
|
||||
return column.formatter(null, column, value)
|
||||
}
|
||||
if (typeof value === 'object') {
|
||||
return JSON.stringify(value)
|
||||
}
|
||||
return String(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
230
src/utils/mobile.js
Normal file
230
src/utils/mobile.js
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* 移动端工具函数
|
||||
*/
|
||||
|
||||
/**
|
||||
* 检测是否为移动设备
|
||||
*/
|
||||
export function isMobile() {
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
|
||||
window.innerWidth < 768
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测是否为iOS设备
|
||||
*/
|
||||
export function isIOS() {
|
||||
return /iPad|iPhone|iPod/.test(navigator.userAgent)
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测是否为Android设备
|
||||
*/
|
||||
export function isAndroid() {
|
||||
return /Android/.test(navigator.userAgent)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取设备类型
|
||||
*/
|
||||
export function getDeviceType() {
|
||||
if (isMobile()) {
|
||||
if (isIOS()) return 'ios'
|
||||
if (isAndroid()) return 'android'
|
||||
return 'mobile'
|
||||
}
|
||||
return 'desktop'
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置移动端视口
|
||||
*/
|
||||
export function setMobileViewport() {
|
||||
if (isMobile()) {
|
||||
const viewport = document.querySelector('meta[name="viewport"]')
|
||||
if (viewport) {
|
||||
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=yes, viewport-fit=cover')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 防止iOS双击缩放
|
||||
*/
|
||||
export function preventDoubleTapZoom() {
|
||||
if (isIOS()) {
|
||||
let lastTouchEnd = 0
|
||||
document.addEventListener('touchend', (event) => {
|
||||
const now = Date.now()
|
||||
if (now - lastTouchEnd <= 300) {
|
||||
event.preventDefault()
|
||||
}
|
||||
lastTouchEnd = now
|
||||
}, false)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 优化移动端滚动
|
||||
*/
|
||||
export function optimizeMobileScroll() {
|
||||
if (isMobile()) {
|
||||
// 添加平滑滚动
|
||||
document.documentElement.style.scrollBehavior = 'smooth'
|
||||
|
||||
// 优化触摸滚动
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
* {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置安全区域适配（iOS刘海屏）
|
||||
*/
|
||||
export function setSafeArea() {
|
||||
if (isIOS()) {
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
.safe-area-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.safe-area-left {
|
||||
padding-left: env(safe-area-inset-left);
|
||||
}
|
||||
.safe-area-right {
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动端初始化
|
||||
*/
|
||||
export function initMobile() {
|
||||
setMobileViewport()
|
||||
preventDoubleTapZoom()
|
||||
optimizeMobileScroll()
|
||||
setSafeArea()
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化移动端表格数据为卡片数据
|
||||
*/
|
||||
export function formatTableToCards(tableData, columns) {
|
||||
return tableData.map(row => {
|
||||
const card = {}
|
||||
columns.forEach(column => {
|
||||
if (column.visible !== false) {
|
||||
const value = column.prop ? getNestedValue(row, column.prop) : ''
|
||||
card[column.prop || column.key] = {
|
||||
label: column.label,
|
||||
value: column.formatter ? column.formatter(row, column, value) : value,
|
||||
type: column.type || 'text'
|
||||
}
|
||||
}
|
||||
})
|
||||
return {
|
||||
...row,
|
||||
_cardData: card
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取嵌套对象值
|
||||
*/
|
||||
function getNestedValue(obj, path) {
|
||||
return path.split('.').reduce((o, p) => o && o[p], obj)
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动端表格列配置
|
||||
*/
|
||||
export function getMobileTableColumns(columns) {
|
||||
return columns
|
||||
.filter(col => col.visible !== false)
|
||||
.map(col => ({
|
||||
...col,
|
||||
label: col.label || col.prop,
|
||||
prop: col.prop || col.key
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* 防抖函数
|
||||
*/
|
||||
export function debounce(func, wait) {
|
||||
let timeout
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout)
|
||||
func(...args)
|
||||
}
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(later, wait)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 节流函数
|
||||
*/
|
||||
export function throttle(func, limit) {
|
||||
let inThrottle
|
||||
return function(...args) {
|
||||
if (!inThrottle) {
|
||||
func.apply(this, args)
|
||||
inThrottle = true
|
||||
setTimeout(() => inThrottle = false, limit)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动端图片懒加载
|
||||
*/
|
||||
export function lazyLoadImages() {
|
||||
if ('IntersectionObserver' in window) {
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target
|
||||
img.src = img.dataset.src
|
||||
img.classList.remove('lazy')
|
||||
imageObserver.unobserve(img)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll('img.lazy').forEach(img => {
|
||||
imageObserver.observe(img)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
isMobile,
|
||||
isIOS,
|
||||
isAndroid,
|
||||
getDeviceType,
|
||||
setMobileViewport,
|
||||
preventDoubleTapZoom,
|
||||
optimizeMobileScroll,
|
||||
setSafeArea,
|
||||
initMobile,
|
||||
formatTableToCards,
|
||||
getMobileTableColumns,
|
||||
debounce,
|
||||
throttle,
|
||||
lazyLoadImages
|
||||
}
|
||||
|
||||
@@ -24,17 +24,19 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnabled">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
auto-complete="off"
|
||||
placeholder="验证码"
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
||||
<div style="display: flex; gap: 10px; align-items: center;">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
auto-complete="off"
|
||||
placeholder="验证码"
|
||||
style="flex: 1"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||
@@ -167,11 +169,26 @@ export default {
|
||||
height: 100%;
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 20px;
|
||||
|
||||
// 移动端优化
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px;
|
||||
align-items: flex-start;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
font-size: 24px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
margin: 0px auto 20px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
@@ -180,10 +197,26 @@ export default {
|
||||
width: 400px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
z-index: 1;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// 移动端优化
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 20px 15px 5px 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
height: 38px;
|
||||
font-size: 14px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 16px; // 防止iOS自动缩放
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
@@ -191,6 +224,27 @@ export default {
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
@media (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
@media (max-width: 768px) {
|
||||
height: 44px; // 增大触摸目标
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
@@ -201,9 +255,22 @@ export default {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 35%;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
@@ -217,8 +284,18 @@ export default {
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 11px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
294
移动端适配说明.md
Normal file
294
移动端适配说明.md
Normal file
@@ -0,0 +1,294 @@
|
||||
# 移动端适配说明
|
||||
|
||||
## 概述
|
||||
|
||||
本项目已全面适配移动端，提供了完整的移动端体验优化，包括：
|
||||
|
||||
1. **移动端专用组件**：卡片式列表、折叠搜索表单、底部导航等
|
||||
2. **响应式布局**：自动适配不同屏幕尺寸
|
||||
3. **触摸优化**：符合移动端交互规范
|
||||
4. **性能优化**：流畅的滚动和动画效果
|
||||
|
||||
## 核心组件
|
||||
|
||||
### 1. MobileTable - 移动端表格组件
|
||||
|
||||
移动端自动显示为卡片式列表，桌面端显示为表格。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<mobile-table
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:show-selection="true"
|
||||
:show-actions="true"
|
||||
:selected-rows="selectedRows"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
@action="handleAction"
|
||||
>
|
||||
<!-- 自定义卡片头部 -->
|
||||
<template #header="{ row }">
|
||||
{{ row.name }}
|
||||
</template>
|
||||
|
||||
<!-- 自定义列内容 -->
|
||||
<template #column-status="{ row, value }">
|
||||
<el-tag :type="value === '0' ? 'success' : 'danger'">
|
||||
{{ value === '0' ? '正常' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<!-- 自定义操作按钮 -->
|
||||
<template #actions="{ row }">
|
||||
<el-dropdown-item command="edit" icon="el-icon-edit">编辑</el-dropdown-item>
|
||||
<el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
|
||||
</template>
|
||||
</mobile-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
columns: [
|
||||
{ prop: 'name', label: '名称', mobile: true },
|
||||
{ prop: 'status', label: '状态', dictType: 'sys_normal_disable' },
|
||||
{ prop: 'createTime', label: '创建时间', formatter: this.parseTime }
|
||||
],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(row, selected) {
|
||||
// 处理选择变化
|
||||
},
|
||||
handleRowClick(row) {
|
||||
// 处理行点击
|
||||
},
|
||||
handleAction(command, row) {
|
||||
// 处理操作
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 2. MobileSearchForm - 移动端搜索表单
|
||||
|
||||
移动端自动折叠为快速搜索，点击筛选按钮展开完整表单。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<mobile-search-form
|
||||
:model="queryParams"
|
||||
@search="handleSearch"
|
||||
@reset="handleReset"
|
||||
@quick-search="handleQuickSearch"
|
||||
>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择">
|
||||
<el-option label="正常" value="0" />
|
||||
<el-option label="停用" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</mobile-search-form>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 3. MobileButtonGroup - 移动端按钮组
|
||||
|
||||
移动端自动将按钮分组，主要按钮显示，其他按钮放入"更多"菜单。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<mobile-button-group
|
||||
:buttons="buttons"
|
||||
:primary-count="2"
|
||||
:sticky="true"
|
||||
@button-click="handleButtonClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
buttons: [
|
||||
{ key: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus', handler: this.handleAdd },
|
||||
{ key: 'edit', label: '修改', type: 'success', icon: 'el-icon-edit', handler: this.handleEdit },
|
||||
{ key: 'delete', label: '删除', type: 'danger', icon: 'el-icon-delete', handler: this.handleDelete },
|
||||
{ key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: this.handleExport }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 4. MobileBottomNav - 移动端底部导航
|
||||
|
||||
在移动端显示底部导航栏，方便快速切换页面。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<mobile-bottom-nav
|
||||
:items="navItems"
|
||||
:show="true"
|
||||
@nav-click="handleNavClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navItems: [
|
||||
{ path: '/index', label: '首页', icon: 'el-icon-s-home' },
|
||||
{ path: '/system/user', label: '用户', icon: 'el-icon-user' },
|
||||
{ path: '/system/menu', label: '菜单', icon: 'el-icon-menu' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 工具函数
|
||||
|
||||
### mobile.js
|
||||
|
||||
提供移动端检测和优化工具函数：
|
||||
|
||||
```javascript
|
||||
import { isMobile, isIOS, initMobile } from '@/utils/mobile'
|
||||
|
||||
// 检测是否为移动端
|
||||
if (isMobile()) {
|
||||
// 移动端逻辑
|
||||
}
|
||||
|
||||
// 初始化移动端优化
|
||||
initMobile()
|
||||
```
|
||||
|
||||
## 混入
|
||||
|
||||
### mobile.js mixin
|
||||
|
||||
提供移动端相关的计算属性和方法：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import mobileMixin from '@/mixins/mobile'
|
||||
|
||||
export default {
|
||||
mixins: [mobileMixin],
|
||||
methods: {
|
||||
someMethod() {
|
||||
// 使用移动端检测
|
||||
if (this.$isMobile) {
|
||||
// 移动端逻辑
|
||||
}
|
||||
|
||||
// 使用移动端提示
|
||||
this.$mobileToast('操作成功', 'success')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 样式优化
|
||||
|
||||
### 响应式断点
|
||||
|
||||
- **移动端**：`max-width: 768px`
|
||||
- **平板**：`769px - 1024px`
|
||||
- **桌面端**：`min-width: 1025px`
|
||||
|
||||
### 主要优化
|
||||
|
||||
1. **触摸目标**：所有可点击元素最小 44px × 44px
|
||||
2. **字体大小**：输入框字体 16px 防止 iOS 自动缩放
|
||||
3. **间距优化**：移动端使用更紧凑的间距
|
||||
4. **圆角优化**：使用更大的圆角值（8px-12px）
|
||||
5. **阴影优化**：使用更柔和的阴影效果
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 完整列表页面示例
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索表单 -->
|
||||
<mobile-search-form
|
||||
:model="queryParams"
|
||||
@search="getList"
|
||||
@reset="resetQuery"
|
||||
>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" />
|
||||
</el-form-item>
|
||||
</mobile-search-form>
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<mobile-button-group
|
||||
:buttons="buttons"
|
||||
:primary-count="2"
|
||||
/>
|
||||
|
||||
<!-- 表格/卡片列表 -->
|
||||
<mobile-table
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:show-selection="true"
|
||||
:selected-rows="selectedRows"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<template #column-status="{ value }">
|
||||
<dict-tag :options="dict.type.sys_normal_disable" :value="value" />
|
||||
</template>
|
||||
</mobile-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **组件注册**：移动端组件需要在使用前注册或导入
|
||||
2. **字典数据**：MobileTable 组件需要字典数据支持，确保字典已加载
|
||||
3. **路由配置**：底部导航需要配置正确的路由路径
|
||||
4. **性能优化**：大数据量时建议使用虚拟滚动或分页加载
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
- iOS Safari 12+
|
||||
- Android Chrome 70+
|
||||
- 微信内置浏览器
|
||||
- 其他现代移动浏览器
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v1.0.0
|
||||
- 初始版本
|
||||
- 支持移动端卡片式列表
|
||||
- 支持移动端折叠搜索
|
||||
- 支持移动端底部导航
|
||||
- 完整的响应式适配
|
||||
|
||||
Reference in New Issue
Block a user