From 648b9cc23203af9cae138f9112dbcadbf084eb71 Mon Sep 17 00:00:00 2001 From: qsh <> Date: Wed, 25 Feb 2026 16:10:19 +0800 Subject: [PATCH] sc --- .env.production | 4 +- src/pages/account/accountForm.vue | 204 ++++++++++++- src/pages/account/manage.vue | 188 +++++++++++- src/pages/account/quota.vue | 2 +- src/pages/distribution/profit-rule.vue | 179 +++++++++++ src/pages/distribution/qrcode.vue | 152 +++++++++- src/pages/distributor/add.vue | 147 ++++++++- src/pages/distributor/edit.vue | 147 ++++++++- src/pages/distributor/index.vue | 103 ++++++- src/pages/login.vue | 42 +++ src/pages/member/gift.vue | 164 +++++++++- src/pages/member/order.vue | 180 ++++++++++- src/pages/member/setting-form.vue | 319 +++++++++++++++---- src/pages/member/setting.vue | 365 ++++++++++++++++------ src/pages/mine/about-us.vue | 405 +++++++++++++++++++------ src/pages/mine/help-center.vue | 250 ++++++++++++--- src/pages/mine/index.vue | 118 ++++++- src/pages/mine/password-change.vue | 2 +- src/pages/mine/personal-info.vue | 131 +++++++- src/pages/mine/school-info.vue | 150 +++++++-- src/pages/student/list.vue | 207 ++++++++++--- src/pages/student/remind.vue | 2 +- src/pages/work/index.vue | 151 +++++++-- src/utils/request.js | 2 +- 24 files changed, 3118 insertions(+), 496 deletions(-) diff --git a/.env.production b/.env.production index 91c461f..6846ce1 100644 --- a/.env.production +++ b/.env.production @@ -11,8 +11,8 @@ VITE_APP_PHONE = 18056811878 VITE_APP_ENV = 'production' #开发环境 -VITE_APP_BASE_API = 'https://cloud.ahxunjia.cn/' -# VITE_APP_BASE_API = 'https://cloud.ahduima.com/' +# VITE_APP_BASE_API = 'https://cloud.ahxunjia.cn/' +VITE_APP_BASE_API = 'https://cloud.ahduima.com/' # VITE_WEB_BASE_URL = 'https://xj.ahduima.com' diff --git a/src/pages/account/accountForm.vue b/src/pages/account/accountForm.vue index c38b4a2..9211b71 100644 --- a/src/pages/account/accountForm.vue +++ b/src/pages/account/accountForm.vue @@ -236,6 +236,11 @@ font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -245,7 +250,7 @@ } .header-right { - width: 100rpx; + width: 150rpx; text-align: right; } @@ -254,6 +259,13 @@ color: #409eff; font-weight: 600; cursor: pointer; + transition: all 0.3s ease; + padding: 8rpx 16rpx; + border-radius: 8rpx; + } + + .save-btn:hover { + background-color: rgba(64, 158, 255, 0.1); } /* 表单内容 */ @@ -265,10 +277,15 @@ /* 表单 section */ .form-section { background-color: #fff; - border-radius: 16rpx; + border-radius: 12rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .form-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .section-title { @@ -393,4 +410,187 @@ font-size: 20rpx; color: #909399; } + + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { + .account-form-container { + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .save-btn { + font-size: 32rpx; + padding: 12rpx 24rpx; + } + + .form-content { + padding: 32rpx; + } + + .form-section { + margin-bottom: 32rpx; + padding: 40rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .form-item { + margin-bottom: 32rpx; + } + + .form-label { + width: 160rpx; + font-size: 28rpx; + } + + .form-control { + padding: 20rpx 24rpx; + } + + .form-input { + font-size: 28rpx; + } + + .status-text { + font-size: 28rpx; + } + + .switch { + width: 100rpx; + height: 50rpx; + border-radius: 25rpx; + } + + .switch-button { + width: 46rpx; + height: 46rpx; + top: 2rpx; + left: 2rpx; + } + + .switch.active .switch-button { + left: 52rpx; + } + + .data-scope-item { + padding: 24rpx; + margin-bottom: 24rpx; + } + + .scope-name { + font-size: 28rpx; + margin-bottom: 8rpx; + } + + .scope-desc { + font-size: 24rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .account-form-container { + max-width: 1000px; + } + + .page-header { + height: 160rpx; + padding: 0 64rpx; + } + + .header-title { + font-size: 40rpx; + } + + .back-icon { + font-size: 56rpx; + } + + .save-btn { + font-size: 36rpx; + padding: 16rpx 32rpx; + } + + .form-content { + padding: 40rpx; + } + + .form-section { + padding: 48rpx; + } + + .section-title { + font-size: 40rpx; + margin-bottom: 40rpx; + } + + .form-item { + margin-bottom: 40rpx; + } + + .form-label { + width: 180rpx; + font-size: 32rpx; + } + + .form-control { + padding: 24rpx 28rpx; + } + + .form-input { + font-size: 32rpx; + } + + .status-text { + font-size: 32rpx; + } + + .switch { + width: 120rpx; + height: 60rpx; + border-radius: 30rpx; + } + + .switch-button { + width: 56rpx; + height: 56rpx; + top: 2rpx; + left: 2rpx; + } + + .switch.active .switch-button { + left: 62rpx; + } + + .data-scope-item { + padding: 32rpx; + margin-bottom: 32rpx; + } + + .scope-name { + font-size: 32rpx; + margin-bottom: 12rpx; + } + + .scope-desc { + font-size: 28rpx; + } + } \ No newline at end of file diff --git a/src/pages/account/manage.vue b/src/pages/account/manage.vue index 745586a..4b62927 100644 --- a/src/pages/account/manage.vue +++ b/src/pages/account/manage.vue @@ -229,6 +229,11 @@ font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -238,7 +243,7 @@ } .header-right { - width: 100rpx; + width: 150rpx; text-align: right; } @@ -247,6 +252,13 @@ color: #409eff; font-weight: 600; cursor: pointer; + transition: all 0.3s ease; + padding: 8rpx 16rpx; + border-radius: 8rpx; + } + + .add-btn:hover { + background-color: rgba(64, 158, 255, 0.1); } /* 筛选条件 */ @@ -254,8 +266,13 @@ padding: 24rpx 32rpx; background-color: #fff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .filter-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .filter-row { @@ -309,10 +326,21 @@ align-items: center; justify-content: space-between; background-color: #fff; - border-radius: 16rpx; + border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + } + + .account-item:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); + transform: translateY(-2rpx); + } + + .account-item:active { + transform: translateY(2rpx); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .account-info { @@ -358,6 +386,7 @@ font-size: 20rpx; font-weight: 600; cursor: pointer; + transition: all 0.3s ease; } .edit-btn { @@ -365,11 +394,21 @@ color: #409eff; } + .edit-btn:hover { + background-color: #ebefff; + color: #66b1ff; + } + .delete-btn { background-color: #fef0f0; color: #f56c6c; } + .delete-btn:hover { + background-color: #fde2e2; + color: #f78989; + } + /* 空状态 */ .empty-state { flex: 1; @@ -442,14 +481,44 @@ color: #303133; } - /* 大屏设备响应式 */ - @media screen and (min-width: 1024px) { + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { .account-manage-container { - max-width: 1200px; + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .add-btn { + font-size: 32rpx; + padding: 12rpx 24rpx; + } + + .filter-section { + margin: 16rpx 32rpx; + padding: 32rpx 40rpx; } .filter-label { font-size: 28rpx; + margin-bottom: 12rpx; + } + + .filter-control { + padding: 20rpx 24rpx; } .picker-text, @@ -457,8 +526,18 @@ font-size: 28rpx; } + .account-list { + padding: 0 32rpx; + } + + .account-item { + padding: 32rpx; + margin-bottom: 24rpx; + } + .account-name { - font-size: 34rpx; + font-size: 32rpx; + margin-bottom: 12rpx; } .meta-item { @@ -466,7 +545,102 @@ } .action-btn { + padding: 12rpx 24rpx; + font-size: 24rpx; + } + + .pagination-info { + padding: 24rpx 40rpx; + } + + .info-text { + font-size: 24rpx; + } + + .page-btn { + padding: 12rpx 24rpx; + font-size: 24rpx; + } + + .page-info { font-size: 24rpx; } } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .account-manage-container { + max-width: 1000px; + } + + .page-header { + height: 160rpx; + padding: 0 64rpx; + } + + .header-title { + font-size: 40rpx; + } + + .back-icon { + font-size: 56rpx; + } + + .add-btn { + font-size: 36rpx; + padding: 16rpx 32rpx; + } + + .filter-section { + padding: 36rpx 48rpx; + } + + .filter-label { + font-size: 32rpx; + } + + .filter-control { + padding: 24rpx 28rpx; + } + + .picker-text, + .search-input { + font-size: 32rpx; + } + + .account-item { + padding: 40rpx; + } + + .account-name { + font-size: 36rpx; + margin-bottom: 16rpx; + } + + .meta-item { + font-size: 28rpx; + } + + .action-btn { + padding: 16rpx 32rpx; + font-size: 28rpx; + } + + .pagination-info { + padding: 28rpx 48rpx; + } + + .info-text { + font-size: 28rpx; + } + + .page-btn { + padding: 16rpx 32rpx; + font-size: 28rpx; + } + + .page-info { + font-size: 28rpx; + } + } \ No newline at end of file diff --git a/src/pages/account/quota.vue b/src/pages/account/quota.vue index e2aa4c7..364b53c 100644 --- a/src/pages/account/quota.vue +++ b/src/pages/account/quota.vue @@ -455,7 +455,7 @@ } .filter-section { - margin: 0 32rpx 24rpx; + margin: 32rpx 24rpx; padding: 32rpx; } diff --git a/src/pages/distribution/profit-rule.vue b/src/pages/distribution/profit-rule.vue index fa4602b..60e6781 100644 --- a/src/pages/distribution/profit-rule.vue +++ b/src/pages/distribution/profit-rule.vue @@ -623,4 +623,183 @@ color: #67c23a !important; font-weight: 500; } + + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { + .profit-rule-container { + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .save-btn { + font-size: 32rpx; + padding: 12rpx 24rpx; + } + + .rule-info-section, + .rule-config-section { + margin: 0 32rpx 24rpx; + padding: 40rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .info-card { + padding: 32rpx; + } + + .info-item { + font-size: 24rpx; + margin-bottom: 12rpx; + } + + .rule-item { + padding: 32rpx; + } + + .rule-title { + font-size: 28rpx; + } + + .rule-content { + gap: 24rpx; + } + + .rule-label { + font-size: 24rpx; + } + + .radio-label { + font-size: 28rpx; + } + + .rule-input { + width: 160rpx; + height: 80rpx; + font-size: 28rpx; + padding: 0 24rpx; + } + + .rule-unit { + font-size: 28rpx; + } + + .vip-item { + padding: 16rpx 24rpx; + } + + .checkbox-label { + font-size: 24rpx; + } + + .car-tag { + padding: 4rpx 12rpx; + font-size: 20rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .profit-rule-container { + max-width: 1000px; + } + + .page-header { + height: 160rpx; + padding: 0 64rpx; + } + + .header-title { + font-size: 40rpx; + } + + .back-icon { + font-size: 56rpx; + } + + .save-btn { + font-size: 36rpx; + padding: 16rpx 32rpx; + } + + .rule-info-section, + .rule-config-section { + padding: 48rpx; + } + + .section-title { + font-size: 40rpx; + margin-bottom: 40rpx; + } + + .info-card { + padding: 40rpx; + } + + .info-item { + font-size: 28rpx; + margin-bottom: 16rpx; + } + + .rule-item { + padding: 36rpx; + } + + .rule-title { + font-size: 32rpx; + } + + .rule-content { + gap: 32rpx; + } + + .rule-label { + font-size: 28rpx; + } + + .radio-label { + font-size: 32rpx; + } + + .rule-input { + width: 180rpx; + height: 90rpx; + font-size: 32rpx; + padding: 0 28rpx; + } + + .rule-unit { + font-size: 32rpx; + } + + .vip-item { + padding: 20rpx 28rpx; + } + + .checkbox-label { + font-size: 28rpx; + } + + .car-tag { + padding: 6rpx 16rpx; + font-size: 22rpx; + } + } \ No newline at end of file diff --git a/src/pages/distribution/qrcode.vue b/src/pages/distribution/qrcode.vue index 6314ae0..43c7906 100644 --- a/src/pages/distribution/qrcode.vue +++ b/src/pages/distribution/qrcode.vue @@ -58,7 +58,7 @@ - + @@ -350,8 +350,13 @@ .qrcode-item { background-color: #fff; - border-radius: 16rpx; - box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + border-radius: 12rpx; + transition: all 0.3s ease; + } + + .qrcode-item:active { + transform: translateY(2rpx); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .qrcode-card { @@ -449,9 +454,9 @@ } .action-btn { - padding: 8rpx 16rpx; + padding: 12rpx 24rpx; border-radius: 8rpx; - font-size: 16rpx; + font-size: 24rpx; font-weight: 600; cursor: pointer; } @@ -531,4 +536,141 @@ color: #909399; cursor: not-allowed; } + + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { + .qrcode-manage-container { + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .filter-section { + margin: 32rpx 24rpx; + padding: 32rpx; + } + + .qrcode-list-section { + padding: 0 32rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .filter-label { + font-size: 26rpx; + } + + .picker-text, + .search-input { + font-size: 26rpx; + } + + .filter-control { + padding: 20rpx; + } + + .qrcode-grid { + grid-template-columns: repeat(auto-fill, minmax(350rpx, 1fr)); + gap: 24rpx; + } + + .qrcode-card { + padding: 32rpx; + } + + .qrcode-code { + font-size: 24rpx; + } + + .qrcode-status { + font-size: 20rpx; + padding: 6rpx 16rpx; + } + + .info-item { + font-size: 22rpx; + } + + .info-label { + width: 140rpx; + } + + .action-btn { + padding: 16rpx 28rpx; + font-size: 22rpx; + } + + .mock-qrcode { + width: 240rpx; + height: 240rpx; + } + + .qrcode-pattern { + width: 190rpx; + height: 190rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .qrcode-manage-container { + max-width: 1000px; + } + + .section-title { + font-size: 40rpx; + } + + .filter-label { + font-size: 28rpx; + } + + .picker-text, + .search-input { + font-size: 28rpx; + } + + .qrcode-grid { + grid-template-columns: repeat(auto-fill, minmax(500rpx, 1fr)); + } + + .qrcode-card { + padding: 36rpx; + } + + .qrcode-code { + font-size: 28rpx; + } + + .qrcode-status { + font-size: 22rpx; + padding: 8rpx 20rpx; + } + + .info-item { + font-size: 24rpx; + } + + .info-label { + width: 150rpx; + } + + .action-btn { + padding: 18rpx 32rpx; + font-size: 24rpx; + } + + .mock-qrcode { + width: 280rpx; + height: 280rpx; + } + + .qrcode-pattern { + width: 220rpx; + height: 220rpx; + } + } \ No newline at end of file diff --git a/src/pages/distributor/add.vue b/src/pages/distributor/add.vue index c455047..4b9dcdc 100644 --- a/src/pages/distributor/add.vue +++ b/src/pages/distributor/add.vue @@ -169,6 +169,11 @@ font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -178,7 +183,7 @@ } .header-right { - width: 60rpx; + width: 150rpx; text-align: right; } @@ -187,15 +192,27 @@ color: #409eff; font-weight: 600; cursor: pointer; + transition: all 0.3s ease; + padding: 8rpx 16rpx; + border-radius: 8rpx; + } + + .save-btn:hover { + background-color: rgba(64, 158, 255, 0.1); } /* 表单内容 */ .form-section { - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #fff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .form-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .section-title { @@ -335,25 +352,59 @@ } - /* 大屏设备响应式 */ - @media screen and (min-width: 1024px) { + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { .distributor-add-container { - max-width: 1000px; + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .save-btn { + font-size: 28rpx; + padding: 12rpx 20rpx; + } + + .form-section { + margin: 16rpx 32rpx; + padding: 32rpx 40rpx; } .section-title { - font-size: 40rpx; + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .form-card { + padding: 32rpx; + } + + .form-row { + margin-bottom: 32rpx; } .form-label { font-size: 28rpx; + margin-bottom: 12rpx; } .form-input, .picker { - padding: 28rpx 32rpx; + padding: 24rpx 28rpx; font-size: 28rpx; - border-radius: 16rpx; } .picker-text { @@ -361,14 +412,88 @@ } .form-textarea { - padding: 28rpx 32rpx; + padding: 24rpx 28rpx; font-size: 28rpx; - border-radius: 16rpx; } .form-input::placeholder, .form-textarea::placeholder { font-size: 26rpx; } + + .radio-label { + font-size: 28rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .distributor-add-container { + max-width: 1000px; + } + + .page-header { + height: 160rpx; + padding: 0 64rpx; + } + + .header-title { + font-size: 40rpx; + } + + .back-icon { + font-size: 56rpx; + } + + .save-btn { + font-size: 32rpx; + padding: 16rpx 24rpx; + } + + .form-section { + padding: 36rpx 48rpx; + } + + .section-title { + font-size: 40rpx; + margin-bottom: 40rpx; + } + + .form-card { + padding: 40rpx; + } + + .form-row { + margin-bottom: 40rpx; + } + + .form-label { + font-size: 32rpx; + margin-bottom: 16rpx; + } + + .form-input, + .picker { + padding: 28rpx 32rpx; + font-size: 32rpx; + } + + .picker-text { + font-size: 32rpx; + } + + .form-textarea { + padding: 28rpx 32rpx; + font-size: 32rpx; + } + + .form-input::placeholder, + .form-textarea::placeholder { + font-size: 30rpx; + } + + .radio-label { + font-size: 32rpx; + } } \ No newline at end of file diff --git a/src/pages/distributor/edit.vue b/src/pages/distributor/edit.vue index 8ee7cc1..b1e9e80 100644 --- a/src/pages/distributor/edit.vue +++ b/src/pages/distributor/edit.vue @@ -193,6 +193,11 @@ font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -202,7 +207,7 @@ } .header-right { - width: 60rpx; + width: 150rpx; text-align: right; } @@ -211,15 +216,27 @@ color: #409eff; font-weight: 600; cursor: pointer; + transition: all 0.3s ease; + padding: 8rpx 16rpx; + border-radius: 8rpx; + } + + .save-btn:hover { + background-color: rgba(64, 158, 255, 0.1); } /* 表单内容 */ .form-section { - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #fff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .form-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .section-title { @@ -260,7 +277,7 @@ .form-input { width: 100%; - height: 70rpx; + height: 80rpx; background-color: #fff; border: 1rpx solid #dcdfe6; border-radius: 12rpx; @@ -359,25 +376,58 @@ } - /* 大屏设备响应式 */ - @media screen and (min-width: 1024px) { + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { .distributor-add-container { - max-width: 1000px; + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .save-btn { + font-size: 28rpx; + padding: 12rpx 20rpx; + } + + .form-section { + margin: 16rpx 32rpx; + padding: 32rpx 40rpx; } .section-title { - font-size: 40rpx; + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .form-card { + padding: 32rpx; + } + + .form-row { + margin-bottom: 32rpx; } .form-label { font-size: 28rpx; + margin-bottom: 12rpx; } .form-input, .picker { - padding: 28rpx 32rpx; font-size: 28rpx; - border-radius: 16rpx; } .picker-text { @@ -385,14 +435,87 @@ } .form-textarea { - padding: 28rpx 32rpx; + padding: 24rpx 28rpx; font-size: 28rpx; - border-radius: 16rpx; } .form-input::placeholder, .form-textarea::placeholder { font-size: 26rpx; } + + .radio-label { + font-size: 28rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .distributor-add-container { + max-width: 1000px; + } + + .page-header { + height: 160rpx; + padding: 0 64rpx; + } + + .header-title { + font-size: 40rpx; + } + + .back-icon { + font-size: 56rpx; + } + + .save-btn { + font-size: 32rpx; + padding: 16rpx 24rpx; + } + + .form-section { + padding: 36rpx 48rpx; + } + + .section-title { + font-size: 40rpx; + margin-bottom: 40rpx; + } + + .form-card { + padding: 40rpx; + } + + .form-row { + margin-bottom: 40rpx; + } + + .form-label { + font-size: 32rpx; + margin-bottom: 16rpx; + } + + .form-input, + .picker { + font-size: 32rpx; + } + + .picker-text { + font-size: 32rpx; + } + + .form-textarea { + padding: 28rpx 32rpx; + font-size: 32rpx; + } + + .form-input::placeholder, + .form-textarea::placeholder { + font-size: 30rpx; + } + + .radio-label { + font-size: 32rpx; + } } \ No newline at end of file diff --git a/src/pages/distributor/index.vue b/src/pages/distributor/index.vue index 2f7bf15..1557390 100644 --- a/src/pages/distributor/index.vue +++ b/src/pages/distributor/index.vue @@ -277,7 +277,7 @@ const loadDistributorList = async () => { } .add-btn { - font-size: 24rpx; + font-size: 28rpx; color: #409eff; font-weight: 600; cursor: pointer; @@ -346,10 +346,15 @@ const loadDistributorList = async () => { .distributor-item { display: flex; align-items: center; - background-color: #fff; - border-radius: 16rpx; + background-color: #f9f9f9; + border-radius: 12rpx; padding: 24rpx; - box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + } + + .distributor-item:active { + transform: translateY(2rpx); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .distributor-avatar { @@ -493,27 +498,100 @@ const loadDistributorList = async () => { } - /* 大屏设备响应式 */ - @media screen and (min-width: 1024px) { + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { .distributor-list-container { - max-width: 1200px; + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .filter-section { + margin: 32rpx 24rpx; + padding: 32rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 32rpx; } .filter-label { - font-size: 28rpx; + font-size: 26rpx; } - .picker-text, .search-input { - font-size: 28rpx; + font-size: 26rpx; + } + + .filter-control { + padding: 20rpx; + } + + .distributor-item { + padding: 32rpx; + } + + .distributor-avatar { + width: 100rpx; + height: 100rpx; + } + + .avatar-placeholder { + font-size: 40rpx; + } + + .distributor-name { + font-size: 32rpx; + } + + .meta-item { + font-size: 22rpx; + } + + .action-btn { + padding: 16rpx 28rpx; + font-size: 22rpx; + } + + .distributor-list { + gap: 24rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .distributor-list-container { + max-width: 1000px; } .section-title { font-size: 40rpx; } + .filter-label { + font-size: 28rpx; + } + + .search-input { + font-size: 28rpx; + } + + .distributor-item { + padding: 36rpx; + } + + .distributor-avatar { + width: 120rpx; + height: 120rpx; + } + + .avatar-placeholder { + font-size: 48rpx; + } + .distributor-name { - font-size: 34rpx; + font-size: 36rpx; } .meta-item { @@ -521,7 +599,8 @@ const loadDistributorList = async () => { } .action-btn { - font-size: 20rpx; + padding: 18rpx 32rpx; + font-size: 24rpx; } } \ No newline at end of file diff --git a/src/pages/login.vue b/src/pages/login.vue index 3400418..19415ad 100644 --- a/src/pages/login.vue +++ b/src/pages/login.vue @@ -572,4 +572,46 @@ font-size: 34rpx; } } + + @media screen and (min-width: 1024px) { + .login-card { + max-width: 800rpx; + padding: 180rpx 80rpx; + } + + .app-title { + font-size: 44rpx; + } + + .app-subtitle { + font-size: 28rpx; + } + + .input-wrapper { + height: 110rpx; + padding: 0 32rpx; + } + + .form-input { + font-size: 32rpx; + } + + .icon { + font-size: 36rpx; + } + + .login-btn { + height: 116rpx; + line-height: 116rpx; + font-size: 36rpx; + } + + .checkbox-label { + font-size: 28rpx; + } + + .register-text { + font-size: 26rpx; + } + } \ No newline at end of file diff --git a/src/pages/member/gift.vue b/src/pages/member/gift.vue index 9a579ae..906d1b7 100644 --- a/src/pages/member/gift.vue +++ b/src/pages/member/gift.vue @@ -19,12 +19,12 @@ - {{ memberTypeOptions[memberTypeIndex]?.memberName || '请选择' }} + {{ memberTypeOptions[memberTypeIndex]?.displayName || '请选择' }} @@ -60,7 +60,10 @@ > {{ code.code }} - {{ getStatusText(code) }} + + + 复制 + @@ -76,19 +79,25 @@ 使用时间： {{ new Date(code.writeOffTime).toLocaleString() }} + + 使用状态： + + {{ getStatusText(code) }} + + 使用人： {{ code.writeOffUser }} - + @@ -153,7 +162,11 @@ onMounted(() => { getVipTypeList().then(res => { if (res.code == 0) { - memberTypeOptions.value = res.data.list + // 将 carName 和 memberName 合并到一个新字段中 + memberTypeOptions.value = res.data.list.map(item => ({ + ...item, + displayName: `${item.carName || ''} - ${item.memberName || ''}` + })) } }) loadCodeList() @@ -281,7 +294,7 @@ // 根据memberId获取会员类型名称 function getMemberName(memberId) { const memberType = memberTypeOptions.value.find(item => item.memberId == memberId) - return memberType?.memberName || '未知' + return memberType?.displayName || '未知' } @@ -463,6 +476,7 @@ } .code-status { + display: inline-block; font-size: 20rpx; font-weight: 600; padding: 4rpx 12rpx; @@ -491,7 +505,7 @@ .code-info { display: flex; flex-direction: column; - gap: 8rpx; + gap: 12rpx; } .info-item { @@ -584,4 +598,138 @@ color: #909399; cursor: not-allowed; } + + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { + .gift-member-container { + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .generate-section, + .code-list-section { + margin: 0 32rpx 24rpx; + padding: 40rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .generate-card { + padding: 32rpx; + } + + .generate-label { + font-size: 26rpx; + } + + .generate-control { + padding: 20rpx; + } + + .picker-text, + .count-input, + .period-input { + font-size: 26rpx; + } + + .action-btn { + padding: 20rpx; + font-size: 26rpx; + } + + .code-item { + padding: 32rpx; + } + + .code-value { + font-size: 28rpx; + } + + .code-status { + font-size: 22rpx; + padding: 6rpx 16rpx; + } + + .info-item { + font-size: 24rpx; + } + + .info-label { + width: 160rpx; + } + + .pagination { + margin: 0 32rpx 32rpx; + padding: 32rpx; + } + + .page-info { + font-size: 22rpx; + } + + .page-btn { + padding: 12rpx 20rpx; + font-size: 22rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .gift-member-container { + max-width: 1000px; + } + + .section-title { + font-size: 40rpx; + } + + .generate-label { + font-size: 28rpx; + } + + .picker-text, + .count-input, + .period-input { + font-size: 28rpx; + } + + .action-btn { + padding: 24rpx; + font-size: 28rpx; + } + + .code-item { + padding: 36rpx; + } + + .code-value { + font-size: 32rpx; + } + + .code-status { + font-size: 24rpx; + padding: 8rpx 20rpx; + } + + .info-item { + font-size: 26rpx; + } + + .info-label { + width: 180rpx; + } + + .page-info { + font-size: 24rpx; + } + + .page-btn { + padding: 16rpx 24rpx; + font-size: 24rpx; + } + } \ No newline at end of file diff --git a/src/pages/member/order.vue b/src/pages/member/order.vue index bfc289e..bffac47 100644 --- a/src/pages/member/order.vue +++ b/src/pages/member/order.vue @@ -160,8 +160,8 @@ // 分页信息 const currentPage = ref(1) - const totalOrders = ref(100) - const pageSize = ref(10) + const totalOrders = ref(0) + const pageSize = ref(5) // 计算总页数 const totalPages = computed(() => { @@ -425,12 +425,16 @@ .order-item { background-color: #fff; - border-radius: 16rpx; + border-radius: 12rpx; padding: 28rpx; - box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } + .order-item:active { + transform: translateY(2rpx); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); + } + .order-item:hover { box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12); transform: translateY(-2rpx); @@ -579,14 +583,39 @@ cursor: not-allowed; } - /* 大屏设备响应式 */ - @media screen and (min-width: 1024px) { + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { .member-order-container { - max-width: 1000px; + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .filter-section { + margin: 16rpx 32rpx; + padding: 32rpx 40rpx; } .filter-label { font-size: 28rpx; + margin-bottom: 12rpx; + } + + .filter-control { + padding: 20rpx 24rpx; } .picker-text, @@ -594,28 +623,147 @@ font-size: 28rpx; } + .order-list-section { + padding: 0 32rpx; + margin-top: 24rpx; + } + .section-title { - font-size: 40rpx; + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .order-list { + gap: 24rpx; + } + + .order-item { + padding: 32rpx; + } + + .order-header { + margin-bottom: 28rpx; + padding-bottom: 24rpx; } .order-code { font-size: 32rpx; } - .order-status { + .distributor-name { font-size: 24rpx; - } - - .info-item { - font-size: 26rpx; + padding: 8rpx 20rpx; } .info-label { - width: 180rpx; + font-size: 28rpx; } - .action-btn { - font-size: 20rpx; + .info-value { + font-size: 28rpx; + } + + .info-value.price { + font-size: 26rpx; + } + + .pagination { + margin: 24rpx 32rpx; + padding: 28rpx 32rpx; + } + + .page-info { + font-size: 24rpx; + } + + .page-btn { + padding: 12rpx 24rpx; + font-size: 24rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .member-order-container { + max-width: 1000px; + } + + .page-header { + height: 160rpx; + padding: 0 64rpx; + } + + .header-title { + font-size: 40rpx; + } + + .back-icon { + font-size: 56rpx; + } + + .filter-section { + padding: 36rpx 48rpx; + } + + .filter-label { + font-size: 32rpx; + } + + .filter-control { + padding: 24rpx 28rpx; + } + + .picker-text, + .search-input { + font-size: 32rpx; + } + + .section-title { + font-size: 40rpx; + margin-bottom: 40rpx; + } + + .order-item { + padding: 40rpx; + } + + .order-header { + margin-bottom: 32rpx; + padding-bottom: 28rpx; + } + + .order-code { + font-size: 36rpx; + } + + .distributor-name { + font-size: 28rpx; + padding: 12rpx 24rpx; + } + + .info-label { + font-size: 32rpx; + } + + .info-value { + font-size: 32rpx; + } + + .info-value.price { + font-size: 30rpx; + } + + .pagination { + padding: 32rpx 40rpx; + } + + .page-info { + font-size: 28rpx; + } + + .page-btn { + padding: 16rpx 32rpx; + font-size: 28rpx; } } \ No newline at end of file diff --git a/src/pages/member/setting-form.vue b/src/pages/member/setting-form.vue index d007838..7675482 100644 --- a/src/pages/member/setting-form.vue +++ b/src/pages/member/setting-form.vue @@ -255,50 +255,62 @@ \ No newline at end of file diff --git a/src/pages/member/setting.vue b/src/pages/member/setting.vue index e6f8105..b335026 100644 --- a/src/pages/member/setting.vue +++ b/src/pages/member/setting.vue @@ -189,23 +189,30 @@ display: flex; align-items: center; justify-content: space-between; - height: 44px; + height: 120rpx; background-color: #fff; - padding: 0 16px; - border-bottom: 1px solid #e5e5e5; + padding: 0 32rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } /* 筛选区域样式 */ .filter-container { background-color: #fff; - padding: 12px 16px; - border-bottom: 1px solid #e5e5e5; + padding: 24rpx 32rpx; + margin: 16rpx; + border-radius: 12rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .filter-container:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .filter-row { display: flex; align-items: center; - gap: 12px; + gap: 24rpx; justify-content: flex-start; } @@ -214,34 +221,35 @@ display: flex; align-items: center; background-color: #f8f9fa; - border-radius: 8px; - padding: 4px; - gap: 2px; + border-radius: 12rpx; + padding: 8rpx; + gap: 4rpx; + flex: 1; } .filter-option { - padding: 8px 16px; + padding: 16rpx 32rpx; background-color: transparent; border: none; - border-radius: 6px; - font-size: 14px; + border-radius: 10rpx; + font-size: 24rpx; color: #666; cursor: pointer; - transition: all 0.2s ease; + transition: all 0.3s ease; white-space: nowrap; flex: 1; text-align: center; } .filter-option:hover { - color: #007aff; - background-color: rgba(0, 122, 255, 0.05); + color: #409eff; + background-color: rgba(64, 158, 255, 0.05); } .filter-option.active { - background-color: #007aff; + background-color: #409eff; color: #fff; - box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2); + box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3); } /* 筛选选择器样式 */ @@ -311,21 +319,26 @@ } .back-btn { - width: 44px; - height: 44px; + width: 60rpx; display: flex; align-items: center; } .back-btn text { - font-size: 24px; - color: #333; + font-size: 40rpx; + color: #303133; + cursor: pointer; + transition: color 0.3s ease; + } + + .back-btn text:hover { + color: #409eff; } .title { - font-size: 16px; - font-weight: 500; - color: #333; + font-size: 32rpx; + font-weight: bold; + color: #303133; } .right-btn { @@ -335,25 +348,32 @@ } .add-btn { - padding: 6px 16px; - color: #007aff; - border-radius: 16px; + padding: 12rpx 24rpx; + color: #409eff; + border-radius: 12rpx; + transition: all 0.3s ease; + cursor: pointer; + } + + .add-btn:hover { + background-color: rgba(64, 158, 255, 0.1); } .add-btn text { - font-size: 14px; + font-size: 24rpx; font-weight: 500; } /* 列表视图样式 */ .list-container { flex: 1; + padding: 0 16rpx; } .loading { text-align: center; - color: #999; - padding: 40px 0; + color: #909399; + padding: 100rpx 0; } .empty-list { @@ -361,68 +381,80 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 60px 0; + padding: 100rpx 0; } .empty-icon { - font-size: 48px; - margin-bottom: 16px; + font-size: 80rpx; + margin-bottom: 24rpx; } .empty-text { - font-size: 14px; - color: #999; - margin-bottom: 24px; + font-size: 24rpx; + color: #909399; + margin-bottom: 32rpx; } .empty-btn { - padding: 10px 24px; - background-color: #007aff; - border-radius: 20px; + padding: 16rpx 32rpx; + background-color: #409eff; + border-radius: 12rpx; + transition: all 0.3s ease; + cursor: pointer; + } + + .empty-btn:hover { + background-color: #66b1ff; + box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3); } .member-list { - padding: 10px; + padding: 0 16rpx; display: flex; flex-direction: column; - gap: 12px; + gap: 16rpx; } .member-item { background-color: #fff; - border-radius: 12px; - padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + border-radius: 12rpx; + padding: 24rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .member-item:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); - transform: translateY(-2px); + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); + transform: translateY(-2rpx); + } + + .member-item:active { + transform: translateY(2rpx); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .member-info { - margin-bottom: 16px; + margin-bottom: 24rpx; } .member-name { - font-size: 18px; + font-size: 28rpx; font-weight: 600; - color: #333; + color: #303133; } .member-details { - margin-top: 8px; - font-size: 14px; - color: #666; + margin-top: 16rpx; + font-size: 24rpx; + color: #606266; display: flex; flex-direction: column; - gap: 12px; + gap: 16rpx; } .detail-row { display: flex; - gap: 24px; + gap: 24rpx; flex-wrap: wrap; } @@ -430,23 +462,23 @@ margin-bottom: 0; display: flex; align-items: center; - gap: 8px; + gap: 12rpx; line-height: 1.4; flex: 1; - min-width: 200px; + min-width: 200rpx; } .detail-item::before { content: "•"; - color: #007aff; - font-size: 16px; + color: #409eff; + font-size: 24rpx; font-weight: bold; flex-shrink: 0; } .detail-row .detail-item { flex: 0 0 auto; - min-width: 120px; + min-width: 120rpx; } /* 价格样式 */ @@ -460,15 +492,15 @@ .discount-price { color: #ff4d4f; - font-size: 16px; + font-size: 28rpx; font-weight: 600; - margin-right: 8px; + margin-right: 12rpx; } .original-price { - color: #999; + color: #909399; text-decoration: line-through; - font-size: 12px; + font-size: 20rpx; } /* 详情标签样式 */ @@ -479,60 +511,60 @@ /* 使用方式标签 */ .use-type-tags { display: flex; - gap: 8px; + gap: 12rpx; flex-wrap: wrap; align-items: center; } .use-type-tag { - padding: 4px 12px; + padding: 8rpx 16rpx; background-color: #e6f7ff; - color: #007aff; - border-radius: 12px; - font-size: 12px; + color: #409eff; + border-radius: 12rpx; + font-size: 20rpx; font-weight: 500; } /* 权益标签 */ .rights-tags { display: flex; - gap: 8px; + gap: 12rpx; flex-wrap: wrap; align-items: center; } .right-tag { - padding: 4px 12px; + padding: 8rpx 16rpx; background-color: #f6ffed; color: #52c41a; - border-radius: 12px; - font-size: 12px; + border-radius: 12rpx; + font-size: 20rpx; font-weight: 500; - border: 1px solid #d9f7be; + border: 1rpx solid #d9f7be; } .member-actions { display: flex; align-items: center; + gap: 16rpx; } .action-btn { - padding: 8px 10px; - font-size: 14px; + padding: 8rpx 16rpx; + font-size: 24rpx; font-weight: 500; - transition: all 0.2s ease; + transition: all 0.3s ease; cursor: pointer; + border-radius: 8rpx; } .edit-btn { - color: #333; + color: #303133; } .edit-btn:hover { - background-color: #e9ecef; - border-color: #007aff; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + background-color: rgba(64, 158, 255, 0.1); + color: #409eff; } .delete-btn { @@ -540,29 +572,178 @@ } .delete-btn:hover { - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(255, 77, 79, 0.1); + background-color: rgba(255, 77, 79, 0.1); } .btn-text { - font-size: 16px; + font-size: 24rpx; color: #fff; font-weight: 500; } - /* 响应式调整 */ - @media (max-width: 480px) { + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { + .container { + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .header { + height: 140rpx; + padding: 0 48rpx; + } + + .title { + font-size: 36rpx; + } + + .back-btn text { + font-size: 48rpx; + } + + .add-btn { + padding: 16rpx 32rpx; + } + + .add-btn text { + font-size: 28rpx; + } + + .filter-container { + margin: 16rpx 32rpx; + padding: 32rpx 40rpx; + } + + .filter-option { + padding: 20rpx 36rpx; + font-size: 28rpx; + } + + .list-container { + padding: 0 32rpx; + } + + .member-list { + padding: 0 32rpx; + gap: 24rpx; + } + + .member-item { + padding: 32rpx; + } + + .member-name { + font-size: 32rpx; + } + + .member-details { + font-size: 28rpx; + gap: 20rpx; + } + .detail-row { - flex-direction: column; - gap: 12px; + gap: 32rpx; } - .detail-row .detail-item { - min-width: 100%; + .discount-price { + font-size: 32rpx; } - .detail-item { - min-width: 100%; + .original-price { + font-size: 24rpx; + } + + .use-type-tag { + padding: 12rpx 20rpx; + font-size: 24rpx; + } + + .right-tag { + padding: 12rpx 20rpx; + font-size: 24rpx; + } + + .action-btn { + padding: 12rpx 20rpx; + font-size: 28rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .container { + max-width: 1000px; + } + + .header { + height: 160rpx; + padding: 0 64rpx; + } + + .title { + font-size: 40rpx; + } + + .back-btn text { + font-size: 56rpx; + } + + .add-btn { + padding: 20rpx 36rpx; + } + + .add-btn text { + font-size: 32rpx; + } + + .filter-container { + padding: 36rpx 48rpx; + } + + .filter-option { + padding: 24rpx 40rpx; + font-size: 32rpx; + } + + .member-item { + padding: 40rpx; + } + + .member-name { + font-size: 36rpx; + } + + .member-details { + font-size: 32rpx; + gap: 24rpx; + } + + .detail-row { + gap: 40rpx; + } + + .discount-price { + font-size: 36rpx; + } + + .original-price { + font-size: 28rpx; + } + + .use-type-tag { + padding: 16rpx 24rpx; + font-size: 28rpx; + } + + .right-tag { + padding: 16rpx 24rpx; + font-size: 28rpx; + } + + .action-btn { + padding: 16rpx 24rpx; + font-size: 32rpx; } } \ No newline at end of file diff --git a/src/pages/mine/about-us.vue b/src/pages/mine/about-us.vue index 9c70fce..d14535d 100644 --- a/src/pages/mine/about-us.vue +++ b/src/pages/mine/about-us.vue @@ -192,6 +192,11 @@ font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -210,56 +215,71 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 60rpx 32rpx; + padding: 48rpx 32rpx; background-color: #fff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .company-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .company-logo { - width: 160rpx; - height: 160rpx; - border-radius: 80rpx; + width: 120rpx; + height: 120rpx; + border-radius: 60rpx; background-color: #409eff; display: flex; align-items: center; justify-content: center; - margin-bottom: 32rpx; + margin-bottom: 24rpx; + transition: transform 0.3s ease; + } + + .company-section:hover .company-logo { + transform: scale(1.05); } .logo-icon { - font-size: 80rpx; + font-size: 60rpx; } .company-name { - font-size: 36rpx; + font-size: 32rpx; font-weight: bold; color: #303133; - margin-bottom: 16rpx; + margin-bottom: 12rpx; text-align: center; } .company-slogan { - font-size: 24rpx; + font-size: 20rpx; color: #606266; } /* 版本信息 */ .version-section { - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #fff; margin: 0 16rpx 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .version-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .version-item { display: flex; justify-content: space-between; align-items: center; - padding: 20rpx 0; - border-bottom: 1rpx solid #e4e7ed; + padding: 16rpx 0; + border-bottom: 1rpx solid #f0f0f0; } .version-item:last-child { @@ -267,12 +287,12 @@ } .version-label { - font-size: 28rpx; + font-size: 24rpx; color: #606266; } .version-value { - font-size: 28rpx; + font-size: 24rpx; font-weight: 600; color: #303133; display: flex; @@ -285,26 +305,47 @@ border-radius: 6rpx; background-color: #67c23a; margin-right: 8rpx; + animation: pulse 2s infinite; } .status-text { color: #67c23a; } + @keyframes pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.2); + opacity: 0.8; + } + 100% { + transform: scale(1); + opacity: 1; + } + } + /* 功能介绍 */ .features-section { - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #fff; margin: 0 16rpx 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .features-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .section-title { - font-size: 32rpx; + font-size: 28rpx; font-weight: bold; color: #303133; - margin-bottom: 32rpx; + margin-bottom: 24rpx; padding-left: 12rpx; border-left: 8rpx solid #409eff; line-height: 1.2; @@ -312,21 +353,28 @@ .features-list { display: grid; - grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr)); - gap: 24rpx; + grid-template-columns: repeat(auto-fill, minmax(240rpx, 1fr)); + gap: 16rpx; } .feature-item { display: flex; align-items: flex-start; - padding: 24rpx; - border: 1rpx solid #e4e7ed; + padding: 20rpx; + border: 1rpx solid #dcdfe6; border-radius: 12rpx; background-color: #f9f9f9; + transition: all 0.3s ease; + } + + .feature-item:hover { + transform: translateY(-2rpx); + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); + border-color: #409eff; } .feature-icon { - font-size: 40rpx; + font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; } @@ -336,7 +384,7 @@ } .feature-title { - font-size: 28rpx; + font-size: 24rpx; font-weight: 600; color: #303133; margin-bottom: 8rpx; @@ -344,38 +392,49 @@ } .feature-desc { - font-size: 24rpx; + font-size: 20rpx; color: #606266; line-height: 1.4; } /* 联系信息 */ .contact-section { - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #fff; margin: 0 16rpx 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .contact-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .contact-list { display: flex; flex-direction: column; - gap: 24rpx; + gap: 16rpx; } .contact-item { display: flex; align-items: center; - padding: 24rpx; - border: 1rpx solid #e4e7ed; + padding: 20rpx; + border: 1rpx solid #dcdfe6; border-radius: 12rpx; background-color: #f9f9f9; + transition: all 0.3s ease; + } + + .contact-item:hover { + border-color: #409eff; + box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1); } .contact-icon { - font-size: 40rpx; - margin-right: 24rpx; + font-size: 36rpx; + margin-right: 20rpx; flex-shrink: 0; } @@ -384,13 +443,13 @@ } .contact-label { - font-size: 24rpx; + font-size: 20rpx; color: #606266; margin-bottom: 4rpx; } .contact-value { - font-size: 28rpx; + font-size: 24rpx; font-weight: 600; color: #303133; } @@ -401,42 +460,194 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 40rpx 32rpx; - background-color: #f0f2f5; + padding: 32rpx; + background-color: #f5f7fa; margin-top: auto; } .copyright-text { - font-size: 28rpx; + font-size: 24rpx; font-weight: 600; color: #303133; margin-bottom: 8rpx; } .copyright-desc { - font-size: 24rpx; + font-size: 20rpx; color: #606266; - margin-bottom: 24rpx; + margin-bottom: 16rpx; } .copyright-policy { display: flex; align-items: center; - gap: 24rpx; + gap: 16rpx; } .policy-item { - font-size: 24rpx; + font-size: 20rpx; color: #409eff; cursor: pointer; + transition: color 0.3s ease; + } + + .policy-item:hover { + color: #66b1ff; + text-decoration: underline; } .policy-divider { - font-size: 24rpx; + font-size: 20rpx; color: #909399; } + /* 平板设备响应式 */ + @media screen and (min-width: 768px) { + .about-us-container { + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .company-section { + margin: 16rpx 32rpx; + padding: 64rpx 48rpx; + } + + .company-logo { + width: 160rpx; + height: 160rpx; + border-radius: 80rpx; + margin-bottom: 32rpx; + } + + .logo-icon { + font-size: 80rpx; + } + + .company-name { + font-size: 36rpx; + margin-bottom: 16rpx; + } + + .company-slogan { + font-size: 24rpx; + } + + .version-section { + margin: 0 32rpx 16rpx; + padding: 32rpx 40rpx; + } + + .version-item { + padding: 20rpx 0; + } + + .version-label { + font-size: 28rpx; + } + + .version-value { + font-size: 28rpx; + } + + .features-section { + margin: 0 32rpx 16rpx; + padding: 32rpx 40rpx; + } + + .section-title { + font-size: 32rpx; + margin-bottom: 32rpx; + } + + .features-list { + grid-template-columns: repeat(auto-fill, minmax(360rpx, 1fr)); + gap: 24rpx; + } + + .feature-item { + padding: 24rpx; + } + + .feature-icon { + font-size: 48rpx; + margin-right: 24rpx; + } + + .feature-title { + font-size: 28rpx; + margin-bottom: 12rpx; + } + + .feature-desc { + font-size: 24rpx; + } + + .contact-section { + margin: 0 32rpx 16rpx; + padding: 32rpx 40rpx; + } + + .contact-list { + gap: 24rpx; + } + + .contact-item { + padding: 24rpx; + } + + .contact-icon { + font-size: 48rpx; + margin-right: 24rpx; + } + + .contact-label { + font-size: 24rpx; + margin-bottom: 8rpx; + } + + .contact-value { + font-size: 28rpx; + } + + .copyright-section { + padding: 48rpx; + } + + .copyright-text { + font-size: 28rpx; + margin-bottom: 12rpx; + } + + .copyright-desc { + font-size: 24rpx; + margin-bottom: 24rpx; + } + + .policy-item { + font-size: 24rpx; + } + + .policy-divider { + font-size: 24rpx; + } + } + /* 大屏设备响应式 */ @media screen and (min-width: 1024px) { .about-us-container { @@ -457,62 +668,61 @@ } .company-section { - padding: 100rpx 50rpx; + padding: 80rpx 48rpx; } .company-logo { - width: 200rpx; - height: 200rpx; - border-radius: 100rpx; - margin-bottom: 48rpx; + width: 180rpx; + height: 180rpx; + border-radius: 90rpx; + margin-bottom: 32rpx; } .logo-icon { - font-size: 100rpx; + font-size: 96rpx; } .company-name { - font-size: 48rpx; - margin-bottom: 24rpx; + font-size: 40rpx; + margin-bottom: 16rpx; } .company-slogan { - font-size: 32rpx; + font-size: 28rpx; } .version-section { - padding: 48rpx; + padding: 32rpx 48rpx; } .version-item { - padding: 28rpx 0; + padding: 24rpx 0; } .version-label { - font-size: 36rpx; + font-size: 32rpx; } .version-value { - font-size: 36rpx; + font-size: 32rpx; } .features-section { - padding: 48rpx; + padding: 32rpx 48rpx; } .section-title { - font-size: 40rpx; - margin-bottom: 48rpx; + font-size: 36rpx; + margin-bottom: 36rpx; } .features-list { - grid-template-columns: repeat(auto-fill, minmax(450rpx, 1fr)); - gap: 40rpx; + grid-template-columns: repeat(auto-fill, minmax(400rpx, 1fr)); + gap: 24rpx; } .feature-item { - padding: 40rpx; - border-radius: 20rpx; + padding: 28rpx; } .feature-icon { @@ -521,61 +731,60 @@ } .feature-title { - font-size: 36rpx; - margin-bottom: 16rpx; - } - - .feature-desc { - font-size: 32rpx; - } - - .contact-section { - padding: 48rpx; - } - - .contact-list { - gap: 40rpx; - } - - .contact-item { - padding: 40rpx; - border-radius: 20rpx; - } - - .contact-icon { - font-size: 56rpx; - margin-right: 28rpx; - } - - .contact-label { font-size: 32rpx; margin-bottom: 12rpx; } + .feature-desc { + font-size: 28rpx; + } + + .contact-section { + padding: 32rpx 48rpx; + } + + .contact-list { + gap: 24rpx; + } + + .contact-item { + padding: 28rpx; + } + + .contact-icon { + font-size: 56rpx; + margin-right: 24rpx; + } + + .contact-label { + font-size: 28rpx; + margin-bottom: 8rpx; + } + .contact-value { - font-size: 36rpx; + font-size: 32rpx; } .copyright-section { - padding: 80rpx 50rpx; + padding: 64rpx; } .copyright-text { - font-size: 36rpx; + font-size: 32rpx; margin-bottom: 16rpx; } .copyright-desc { - font-size: 32rpx; - margin-bottom: 40rpx; + font-size: 28rpx; + margin-bottom: 32rpx; } .policy-item { - font-size: 32rpx; + font-size: 28rpx; } .policy-divider { - font-size: 32rpx; + font-size: 28rpx; } } \ No newline at end of file diff --git a/src/pages/mine/help-center.vue b/src/pages/mine/help-center.vue index 2e7445f..0841b66 100644 --- a/src/pages/mine/help-center.vue +++ b/src/pages/mine/help-center.vue @@ -132,7 +132,7 @@ { id: 4, question: '如何给学员赠送会员？', - answer: '在工作页面的"会员维护"模块中，点击"赠送会员操作"，输入学员信息和赠送时长，即可生成赠送会员的核验码，学员使用核验码即可激活会员。' + answer: '在工作页面的"会员维护"模块中，点击"赠送会员操作"，点击生成赠送会员的核验码，学员使用核验码即可激活会员。' }, { id: 5, @@ -292,6 +292,11 @@ font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -307,22 +312,27 @@ /* 常见问题 */ .faq-section { flex: 1; - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #fff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .faq-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .section-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 32rpx; + margin-bottom: 24rpx; } .section-title { - font-size: 32rpx; + font-size: 28rpx; font-weight: bold; color: #303133; line-height: 1.2; @@ -333,7 +343,7 @@ } .search-input { - width: 300rpx; + width: 240rpx; height: 60rpx; padding: 0 24rpx; background-color: #f9f9f9; @@ -341,6 +351,13 @@ border-radius: 30rpx; font-size: 24rpx; color: #303133; + transition: all 0.3s ease; + } + + .search-input:focus { + border-color: #409eff; + box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1); + outline: none; } .faq-list { @@ -354,6 +371,12 @@ border-radius: 12rpx; overflow: hidden; background-color: #f9f9f9; + transition: all 0.3s ease; + } + + .faq-item:hover { + border-color: #c6e2ff; + box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1); } .faq-header { @@ -362,15 +385,16 @@ align-items: center; padding: 24rpx; cursor: pointer; + transition: all 0.3s ease; } .faq-header:hover { - background-color: #f0f0f0; + background-color: #f5faff; } .faq-question { flex: 1; - font-size: 28rpx; + font-size: 24rpx; font-weight: 600; color: #303133; line-height: 1.4; @@ -380,36 +404,42 @@ font-size: 24rpx; color: #606266; margin-left: 16rpx; + transition: transform 0.3s ease; } .faq-answer { padding: 0 24rpx 24rpx; - font-size: 26rpx; + font-size: 22rpx; color: #606266; line-height: 1.6; } /* 使用指南 */ .guide-section { - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #fff; margin: 0 16rpx 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .guide-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .guide-list { display: flex; flex-direction: column; gap: 16rpx; - margin-top: 24rpx; + margin-top: 16rpx; } .guide-item { display: flex; align-items: center; padding: 24rpx; - border: 1rpx solid #e4e7ed; + border: 1rpx solid #dcdfe6; border-radius: 12rpx; background-color: #f9f9f9; cursor: pointer; @@ -419,6 +449,7 @@ .guide-item:hover { transform: translateY(-2rpx); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); + border-color: #409eff; } .guide-icon { @@ -431,7 +462,7 @@ } .guide-title { - font-size: 28rpx; + font-size: 24rpx; font-weight: 600; color: #303133; margin-bottom: 8rpx; @@ -439,39 +470,55 @@ } .guide-desc { - font-size: 24rpx; + font-size: 20rpx; color: #606266; line-height: 1.4; } .guide-arrow { - font-size: 32rpx; + font-size: 28rpx; color: #909399; + transition: color 0.3s ease; + } + + .guide-item:hover .guide-arrow { + color: #409eff; } /* 联系客服 */ .contact-section { - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #fff; margin: 0 16rpx 32rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .contact-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .contact-info { display: flex; flex-direction: column; gap: 24rpx; - margin-top: 24rpx; + margin-top: 16rpx; } .contact-item { display: flex; align-items: center; padding: 24rpx; - border: 1rpx solid #e4e7ed; + border: 1rpx solid #dcdfe6; border-radius: 12rpx; background-color: #f9f9f9; + transition: all 0.3s ease; + } + + .contact-item:hover { + border-color: #409eff; + box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1); } .contact-icon { @@ -484,13 +531,13 @@ } .contact-label { - font-size: 24rpx; + font-size: 20rpx; color: #606266; margin-bottom: 4rpx; } .contact-value { - font-size: 28rpx; + font-size: 24rpx; font-weight: 600; color: #303133; } @@ -499,9 +546,15 @@ padding: 12rpx 24rpx; background-color: #409eff; color: #fff; - border-radius: 8rpx; + border-radius: 12rpx; font-size: 24rpx; cursor: pointer; + transition: all 0.3s ease; + } + + .contact-action:hover { + background-color: #66b1ff; + box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3); } /* 空状态 */ @@ -510,7 +563,7 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 100rpx 0; + padding: 80rpx 0; text-align: center; } @@ -520,11 +573,120 @@ } .empty-text { - font-size: 28rpx; + font-size: 24rpx; color: #909399; } + /* 平板设备响应式 */ + @media screen and (min-width: 768px) { + .help-center-container { + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .faq-section, + .guide-section, + .contact-section { + margin: 16rpx 32rpx; + padding: 32rpx 40rpx; + } + + .section-title { + font-size: 32rpx; + } + + .search-input { + width: 300rpx; + height: 70rpx; + padding: 0 32rpx; + font-size: 28rpx; + } + + .faq-header { + padding: 32rpx; + } + + .faq-question { + font-size: 28rpx; + } + + .faq-icon { + font-size: 28rpx; + } + + .faq-answer { + padding: 0 32rpx 32rpx; + font-size: 24rpx; + } + + .guide-item { + padding: 32rpx; + } + + .guide-icon { + font-size: 56rpx; + margin-right: 32rpx; + } + + .guide-title { + font-size: 28rpx; + } + + .guide-desc { + font-size: 24rpx; + } + + .guide-arrow { + font-size: 32rpx; + } + + .contact-item { + padding: 32rpx; + } + + .contact-icon { + font-size: 56rpx; + margin-right: 32rpx; + } + + .contact-label { + font-size: 24rpx; + } + + .contact-value { + font-size: 28rpx; + } + + .contact-action { + padding: 16rpx 32rpx; + font-size: 28rpx; + } + + .empty-icon { + font-size: 120rpx; + margin-bottom: 32rpx; + } + + .empty-text { + font-size: 28rpx; + } + } + /* 大屏设备响应式 */ @media screen and (min-width: 1024px) { .help-center-container { @@ -547,26 +709,26 @@ .faq-section, .guide-section, .contact-section { - padding: 48rpx; + padding: 40rpx 48rpx; } .section-title { - font-size: 40rpx; + font-size: 36rpx; } .search-input { - width: 400rpx; - height: 84rpx; + width: 360rpx; + height: 80rpx; padding: 0 36rpx; font-size: 32rpx; } .faq-header { - padding: 40rpx; + padding: 36rpx; } .faq-question { - font-size: 36rpx; + font-size: 32rpx; } .faq-icon { @@ -574,12 +736,12 @@ } .faq-answer { - padding: 0 40rpx 40rpx; - font-size: 32rpx; + padding: 0 36rpx 36rpx; + font-size: 28rpx; } .guide-item { - padding: 40rpx; + padding: 36rpx; } .guide-icon { @@ -588,19 +750,19 @@ } .guide-title { - font-size: 36rpx; - } - - .guide-desc { font-size: 32rpx; } + .guide-desc { + font-size: 28rpx; + } + .guide-arrow { - font-size: 40rpx; + font-size: 36rpx; } .contact-item { - padding: 40rpx; + padding: 36rpx; } .contact-icon { @@ -609,15 +771,15 @@ } .contact-label { - font-size: 32rpx; + font-size: 28rpx; } .contact-value { - font-size: 36rpx; + font-size: 32rpx; } .contact-action { - padding: 20rpx 40rpx; + padding: 16rpx 32rpx; font-size: 32rpx; } @@ -627,7 +789,7 @@ } .empty-text { - font-size: 36rpx; + font-size: 32rpx; } } \ No newline at end of file diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue index da7f02b..d9cacc3 100644 --- a/src/pages/mine/index.vue +++ b/src/pages/mine/index.vue @@ -356,10 +356,9 @@ .feature-card { display: flex; align-items: center; - background-color: #fff; - border-radius: 16rpx; + background-color: #f9f9f9; + border-radius: 12rpx; padding: 24rpx; - box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); transition: all 0.3s ease; cursor: pointer; } @@ -387,7 +386,7 @@ /* 图标文本样式 */ .icon-text { - font-size: 36rpx; + font-size: 40rpx; line-height: 1; text-align: center; } @@ -444,7 +443,104 @@ color: #909399; line-height: 1.4; } - + + /* 响应式设计 */ + @media screen and (min-width: 500px) { + .mine-container { + max-width: 900px; + margin: 0 auto; + padding: 30rpx; + } + + .welcome-section { + padding: 50rpx; + } + + .welcome-title { + font-size: 44rpx; + } + + .welcome-desc { + font-size: 28rpx; + } + + .section { + padding: 30rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 30rpx; + } + + .feature-card { + padding: 30rpx; + } + + .feature-icon { + width: 100rpx; + height: 100rpx; + margin-right: 24rpx; + } + + .icon-text { + font-size: 48rpx; + } + + .feature-title { + font-size: 32rpx; + } + + .feature-desc { + font-size: 24rpx; + } + } + + /* 平板响应式 */ + @media screen and (min-width: 768px) { + .mine-container { + max-width: 900px; + margin: 0 auto; + padding: 40rpx; + width: 100%; + } + + .welcome-section { + padding: 56rpx; + margin-bottom: 40rpx; + } + + .feature-section { + margin-bottom: 40rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .feature-card { + padding: 32rpx; + } + + .feature-icon { + width: 100rpx; + height: 100rpx; + margin-right: 24rpx; + } + + .icon-text { + font-size: 48rpx; + } + + .feature-title { + font-size: 32rpx; + } + + .feature-desc { + font-size: 24rpx; + } + } /* 大屏设备响应式 */ @media screen and (min-width: 1024px) { @@ -482,28 +578,22 @@ font-size: 26rpx; } - .role-tab { - padding: 32rpx; - font-size: 36rpx; - } - .section-title { font-size: 40rpx; - margin-bottom: 40rpx; + margin-bottom: 36rpx; } .feature-card { - padding: 40rpx; + padding: 36rpx; } .feature-icon { width: 120rpx; height: 120rpx; - margin-right: 32rpx; } .icon-text { - font-size: 52rpx; + font-size: 56rpx; } .feature-title { diff --git a/src/pages/mine/password-change.vue b/src/pages/mine/password-change.vue index 39851b1..778391e 100644 --- a/src/pages/mine/password-change.vue +++ b/src/pages/mine/password-change.vue @@ -284,7 +284,7 @@ } .header-right { - width: 60rpx; + width: 150rpx; text-align: right; } diff --git a/src/pages/mine/personal-info.vue b/src/pages/mine/personal-info.vue index da7f6db..4d562ab 100644 --- a/src/pages/mine/personal-info.vue +++ b/src/pages/mine/personal-info.vue @@ -199,6 +199,11 @@ const loadUserInfo = async () => { font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -208,7 +213,7 @@ const loadUserInfo = async () => { } .header-right { - width: 60rpx; + width: 150rpx; text-align: right; } @@ -217,6 +222,13 @@ const loadUserInfo = async () => { color: #409eff; font-weight: 600; cursor: pointer; + transition: all 0.3s ease; + padding: 8rpx 16rpx; + border-radius: 8rpx; + } + + .save-btn:hover { + background-color: rgba(64, 158, 255, 0.1); } /* 表单区域 */ @@ -224,8 +236,13 @@ const loadUserInfo = async () => { padding: 32rpx; background-color: #fff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .form-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } /* 头像部分 */ @@ -366,8 +383,13 @@ const loadUserInfo = async () => { padding: 32rpx; background-color: #fff; margin: 0 16rpx 32rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .account-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .section-title { @@ -410,6 +432,105 @@ const loadUserInfo = async () => { } + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { + .personal-info-container { + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .save-btn { + font-size: 32rpx; + } + + .form-section { + margin: 16rpx 32rpx; + padding: 40rpx; + } + + .avatar-section { + margin-bottom: 48rpx; + } + + .avatar-preview { + width: 240rpx; + height: 240rpx; + } + + .avatar-icon { + font-size: 96rpx; + } + + .form-group { + margin-bottom: 40rpx; + } + + .form-label { + font-size: 32rpx; + margin-bottom: 16rpx; + } + + .form-input { + height: 96rpx; + font-size: 32rpx; + padding: 0 32rpx; + } + + .form-textarea { + min-height: 200rpx; + font-size: 32rpx; + padding: 32rpx; + } + + .form-text { + height: 96rpx; + font-size: 32rpx; + padding: 0 32rpx; + } + + .picker-display { + font-size: 32rpx; + padding: 0 32rpx; + } + + .account-section { + margin: 0 32rpx 32rpx; + padding: 40rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .account-info { + gap: 24rpx; + } + + .info-item { + padding: 24rpx 0; + } + + .info-label, + .info-value { + font-size: 32rpx; + } + } + /* 大屏设备响应式 */ @media screen and (min-width: 1024px) { .personal-info-container { @@ -450,10 +571,6 @@ const loadUserInfo = async () => { font-size: 112rpx; } - .avatar-tip { - font-size: 28rpx; - } - .form-group { margin-bottom: 48rpx; } diff --git a/src/pages/mine/school-info.vue b/src/pages/mine/school-info.vue index 1b66890..99234f4 100644 --- a/src/pages/mine/school-info.vue +++ b/src/pages/mine/school-info.vue @@ -215,6 +215,11 @@ font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -224,7 +229,7 @@ } .header-right { - width: 60rpx; + width: 150rpx; text-align: right; } @@ -233,24 +238,36 @@ color: #409eff; font-weight: 600; cursor: pointer; + transition: all 0.3s ease; + padding: 8rpx 16rpx; + border-radius: 8rpx; + } + + .save-btn:hover { + background-color: rgba(64, 158, 255, 0.1); } /* 表单区域 */ .form-section { flex: 1; - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #fff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .form-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .form-group { - margin-bottom: 32rpx; + margin-bottom: 24rpx; } .form-label { - font-size: 28rpx; + font-size: 24rpx; font-weight: 600; color: #303133; margin-bottom: 12rpx; @@ -263,60 +280,63 @@ .form-input { width: 100%; - height: 80rpx; - padding: 0 24rpx; - font-size: 28rpx; + height: 70rpx; + padding: 20rpx 24rpx; + font-size: 24rpx; color: #303133; border: 1rpx solid #dcdfe6; - border-radius: 8rpx; + border-radius: 12rpx; background-color: #f9f9f9; box-sizing: border-box; + transition: all 0.3s ease; } .form-input:focus { outline: none; border-color: #409eff; - box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2); + box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1); } .form-textarea { width: 100%; min-height: 160rpx; padding: 24rpx; - font-size: 28rpx; + font-size: 24rpx; color: #303133; border: 1rpx solid #dcdfe6; - border-radius: 8rpx; + border-radius: 12rpx; background-color: #f9f9f9; box-sizing: border-box; resize: none; + transition: all 0.3s ease; } .form-textarea:focus { outline: none; border-color: #409eff; - box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2); + box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1); } /* 提示信息 */ .tips-section { - padding: 32rpx; + padding: 24rpx 32rpx; background-color: #ecf5ff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; border-left: 8rpx solid #409eff; + transition: all 0.3s ease; } .tips-title { - font-size: 28rpx; + font-size: 24rpx; font-weight: bold; color: #409eff; - margin-bottom: 16rpx; + margin-bottom: 12rpx; line-height: 1.2; } .tips-content { - font-size: 24rpx; + font-size: 20rpx; color: #606266; line-height: 1.6; } @@ -326,6 +346,76 @@ } + /* 平板设备响应式 */ + @media screen and (min-width: 768px) { + .school-info-container { + max-width: 900px; + margin: 0 auto; + width: 100%; + } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + + .header-title { + font-size: 36rpx; + } + + .back-icon { + font-size: 48rpx; + } + + .save-btn { + font-size: 32rpx; + } + + .form-section { + margin: 16rpx 32rpx; + padding: 32rpx 40rpx; + } + + .form-group { + margin-bottom: 32rpx; + } + + .form-label { + font-size: 28rpx; + margin-bottom: 16rpx; + } + + .form-input { + padding: 24rpx 28rpx; + font-size: 28rpx; + height: 80rpx; + } + + .form-textarea { + padding: 24rpx; + font-size: 28rpx; + min-height: 200rpx; + } + + .tips-section { + margin: 16rpx 32rpx; + padding: 32rpx 40rpx; + } + + .tips-title { + font-size: 28rpx; + margin-bottom: 16rpx; + } + + .tips-content { + font-size: 24rpx; + } + + .tip-item { + margin-bottom: 12rpx; + } + } + /* 大屏设备响应式 */ @media screen and (min-width: 1024px) { .school-info-container { @@ -350,41 +440,41 @@ } .form-section { - padding: 48rpx; + padding: 40rpx 48rpx; } .form-group { - margin-bottom: 48rpx; + margin-bottom: 36rpx; } .form-label { - font-size: 36rpx; + font-size: 32rpx; margin-bottom: 20rpx; } .form-input { - height: 112rpx; - font-size: 36rpx; - padding: 0 40rpx; + padding: 28rpx 32rpx; + font-size: 32rpx; + height: 90rpx; } .form-textarea { + padding: 28rpx; + font-size: 32rpx; min-height: 240rpx; - font-size: 36rpx; - padding: 40rpx; } .tips-section { - padding: 48rpx; + padding: 40rpx 48rpx; } .tips-title { - font-size: 36rpx; - margin-bottom: 28rpx; + font-size: 32rpx; + margin-bottom: 20rpx; } .tips-content { - font-size: 32rpx; + font-size: 28rpx; } .tip-item { diff --git a/src/pages/student/list.vue b/src/pages/student/list.vue index f656ecc..09a5364 100644 --- a/src/pages/student/list.vue +++ b/src/pages/student/list.vue @@ -221,6 +221,11 @@ font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -241,8 +246,13 @@ padding: 24rpx 32rpx; background-color: #fff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .filter-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .filter-row { @@ -301,9 +311,20 @@ display: flex; align-items: center; background-color: #fff; - border-radius: 16rpx; + border-radius: 12rpx; padding: 24rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + } + + .student-item:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); + transform: translateY(-2rpx); + } + + .student-item:active { + transform: translateY(2rpx); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .student-avatar { @@ -375,7 +396,7 @@ padding: 24rpx; background-color: #fff; margin: 16rpx; - border-radius: 16rpx; + border-radius: 12rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); } @@ -395,6 +416,11 @@ font-size: 20rpx; color: #409eff; cursor: pointer; + transition: all 0.3s ease; + } + + .page-btn:hover { + background-color: rgba(64, 158, 255, 0.1); } .page-btn.disabled { @@ -402,29 +428,143 @@ cursor: not-allowed; } - /* 大屏平板响应式 */ - @media screen and (min-width: 1024px) { + .page-btn.disabled:hover { + background-color: transparent; + } + + /* 平板和大屏响应式 */ + @media screen and (min-width: 768px) { .student-list-container { - max-width: 1200px; + max-width: 900px; + margin: 0 auto; + width: 100%; } + + .page-header { + height: 140rpx; + padding: 0 48rpx; + } + .header-title { + font-size: 36rpx; + } + + .back-icon { font-size: 48rpx; } - - .back-icon { - font-size: 60rpx; - } - + .filter-section { - padding: 40rpx; + margin: 16rpx 32rpx; + padding: 32rpx 40rpx; } .filter-label { - font-size: 48rpx; + font-size: 28rpx; + margin-bottom: 12rpx; + } + + .filter-control { + padding: 20rpx 24rpx; } .search-input { - font-size: 48rpx; + font-size: 28rpx; + } + + .student-list-section { + padding: 0 32rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 32rpx; + } + + .student-list { + gap: 24rpx; + } + + .student-item { + padding: 32rpx; + } + + .student-avatar { + width: 100rpx; + height: 100rpx; + border-radius: 50rpx; + margin-right: 32rpx; + } + + .avatar-placeholder { + font-size: 40rpx; + } + + .student-name { + font-size: 32rpx; + margin-bottom: 12rpx; + } + + .student-meta { + gap: 24rpx; + } + + .meta-item { + font-size: 24rpx; + } + + .pagination { + margin: 24rpx 32rpx; + padding: 28rpx 32rpx; + } + + .page-info { + font-size: 24rpx; + } + + .page-btn { + padding: 12rpx 24rpx; + font-size: 24rpx; + } + } + + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .student-list-container { + max-width: 1000px; + } + + .page-header { + height: 160rpx; + padding: 0 64rpx; + } + + .header-title { + font-size: 40rpx; + } + + .back-icon { + font-size: 56rpx; + } + + .filter-section { + padding: 36rpx 48rpx; + } + + .filter-label { + font-size: 32rpx; + } + + .filter-control { + padding: 24rpx 28rpx; + } + + .search-input { + font-size: 32rpx; + } + + .section-title { + font-size: 40rpx; + margin-bottom: 40rpx; } .student-item { @@ -432,23 +572,19 @@ } .student-avatar { - width: 200rpx; - height: 200rpx; - border-radius: 100rpx; + width: 120rpx; + height: 120rpx; + border-radius: 60rpx; margin-right: 40rpx; } .avatar-placeholder { - font-size: 80rpx; - } - - .section-title { - margin-top: 40rpx; - font-size: 60rpx; + font-size: 48rpx; } .student-name { - font-size: 56rpx; + font-size: 36rpx; + margin-bottom: 16rpx; } .student-meta { @@ -456,19 +592,20 @@ } .meta-item { - font-size: 44rpx; + font-size: 28rpx; } - + .pagination { - padding: 40rpx; - .page-info { - font-size: 44rpx; - } - .page-btn { - padding: 16rpx 32rpx; - border-radius: 16rpx; - font-size: 44rpx; - } + padding: 32rpx 40rpx; + } + + .page-info { + font-size: 28rpx; + } + + .page-btn { + padding: 16rpx 32rpx; + font-size: 28rpx; } } diff --git a/src/pages/student/remind.vue b/src/pages/student/remind.vue index ddf55cf..961a735 100644 --- a/src/pages/student/remind.vue +++ b/src/pages/student/remind.vue @@ -314,7 +314,7 @@ } .header-right { - width: 100rpx; + width: 150rpx; text-align: right; } diff --git a/src/pages/work/index.vue b/src/pages/work/index.vue index 9bc6af5..3c74a6c 100644 --- a/src/pages/work/index.vue +++ b/src/pages/work/index.vue @@ -474,18 +474,29 @@ min-height: 100vh; } + /* 统计区域 */ + .stats-section { + display: flex; + flex-direction: column; + gap: 30rpx; + } + .section { - margin-bottom: 24rpx; + background-color: #fff; + border-radius: 16rpx; + padding: 24rpx; + margin-bottom: 30rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); } /* 标题样式 */ .section-title { - font-size: 28rpx; + font-size: 32rpx; font-weight: bold; color: #303133; - margin-bottom: 20rpx; - padding-left: 10rpx; - border-left: 6rpx solid #409eff; + margin-bottom: 24rpx; + padding-left: 12rpx; + border-left: 8rpx solid #409eff; line-height: 1.2; } @@ -500,10 +511,9 @@ .feature-card { display: flex; align-items: center; - background-color: #fff; + background-color: #f9f9f9; border-radius: 12rpx; - padding: 20rpx; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); + padding: 24rpx; transition: all 0.3s ease; cursor: pointer; } @@ -515,20 +525,20 @@ /* 图标容器 */ .feature-icon { - width: 64rpx; - height: 64rpx; - border-radius: 12rpx; + width: 80rpx; + height: 80rpx; + border-radius: 16rpx; display: flex; align-items: center; justify-content: center; - margin-right: 16rpx; + margin-right: 20rpx; flex-shrink: 0; position: relative; } /* 图标文本样式 */ .icon-text { - font-size: 32rpx; + font-size: 40rpx; line-height: 1; text-align: center; } @@ -580,52 +590,98 @@ } .feature-title { - font-size: 24rpx; + font-size: 28rpx; font-weight: 600; color: #303133; - margin-bottom: 6rpx; + margin-bottom: 8rpx; line-height: 1.3; } .feature-desc { - font-size: 20rpx; + font-size: 22rpx; color: #909399; line-height: 1.4; } - /* 大屏设备响应式 */ - @media screen and (min-width: 1024px) { + /* 响应式设计 */ + @media screen and (min-width: 500px) { .work-container { - max-width: 1000px; + max-width: 900px; + margin: 0 auto; + padding: 30rpx; } .section { + padding: 30rpx; + } + + .section-title { + font-size: 36rpx; + margin-bottom: 30rpx; + } + + .feature-row { + gap: 20rpx; + } + + .feature-card { + padding: 30rpx; + } + + .feature-icon { + width: 100rpx; + height: 100rpx; + margin-right: 24rpx; + } + + .icon-text { + font-size: 48rpx; + } + + .feature-title { + font-size: 32rpx; + } + + .feature-desc { + font-size: 24rpx; + } + } + + /* 平板响应式 */ + @media screen and (min-width: 768px) { + .work-container { + max-width: 900px; + margin: 0 auto; + padding: 40rpx; + width: 100%; + } + + .section { + padding: 32rpx; margin-bottom: 40rpx; } .section-title { font-size: 36rpx; - margin-bottom: 28rpx; + margin-bottom: 32rpx; } .feature-row { - gap: 24rpx; + gap: 20rpx; } - + .feature-card { - flex: 0 0 calc(33.333% - 16rpx); - max-width: calc(33.333% - 16rpx); padding: 32rpx; } .feature-icon { - width: 96rpx; - height: 96rpx; + width: 100rpx; + height: 100rpx; margin-right: 24rpx; } .icon-text { - font-size: 44rpx; + font-size: 48rpx; } .feature-title { @@ -637,11 +693,44 @@ } } - /* 超大屏设备响应式 */ - @media screen and (min-width: 1440px) { + /* 大屏设备响应式 */ + @media screen and (min-width: 1024px) { + .work-container { + max-width: 1000px; + } + + .section { + padding: 36rpx; + } + + .section-title { + font-size: 40rpx; + margin-bottom: 36rpx; + } + + .feature-row { + gap: 24rpx; + } + .feature-card { - flex: 0 0 calc(25% - 18rpx); - max-width: calc(25% - 18rpx); + padding: 36rpx; + } + + .feature-icon { + width: 120rpx; + height: 120rpx; + } + + .icon-text { + font-size: 56rpx; + } + + .feature-title { + font-size: 36rpx; + } + + .feature-desc { + font-size: 26rpx; } } \ No newline at end of file diff --git a/src/utils/request.js b/src/utils/request.js index 27ae6c4..8fffd82 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -64,7 +64,7 @@ const request = config => { resolve(res.data); }) .catch(error => { - let { message } = error; + let message = error.errMsg || error.message; if (message === 'Network Error') { message = '后端接口连接异常'; } else if (message.includes('timeout')) {