From d97a2226375a28a737ae76ac4cb736704989c131 Mon Sep 17 00:00:00 2001 From: qsh <> Date: Tue, 3 Feb 2026 20:21:06 +0800 Subject: [PATCH] sc --- src/api/distribution/distributor.js | 54 ++ src/api/distribution/index.js | 9 + src/pages.json | 48 -- src/pages/distribution/profit-rule.vue | 508 +++++++++--------- src/pages/distributor/add.vue | 133 ++--- src/pages/distributor/edit.vue | 282 ++++------ src/pages/distributor/index.vue | 245 +++------ src/pages/distributor/rule.vue | 596 -------------------- src/pages/member/setting-form.vue | 2 +- src/pages/member/setting.vue | 2 +- src/pages/mine/avatar/index.vue | 716 ------------------------- src/pages/mine/help/index.vue | 198 ------- src/pages/mine/info/edit.vue | 292 ---------- src/pages/mine/info/index.vue | 146 ----- src/pages/mine/personal-info.vue | 11 - src/pages/mine/pwd/index.vue | 211 -------- src/pages/mine/setting/index.vue | 218 -------- src/static/scss/global.css | 241 +++++++++ src/static/scss/global.min.css | 1 + src/static/scss/global.scss | 322 ++++++++--- 20 files changed, 1049 insertions(+), 3186 deletions(-) create mode 100644 src/api/distribution/distributor.js create mode 100644 src/api/distribution/index.js delete mode 100644 src/pages/distributor/rule.vue delete mode 100644 src/pages/mine/avatar/index.vue delete mode 100644 src/pages/mine/help/index.vue delete mode 100644 src/pages/mine/info/edit.vue delete mode 100644 src/pages/mine/info/index.vue delete mode 100644 src/pages/mine/pwd/index.vue delete mode 100644 src/pages/mine/setting/index.vue create mode 100644 src/static/scss/global.css create mode 100644 src/static/scss/global.min.css diff --git a/src/api/distribution/distributor.js b/src/api/distribution/distributor.js new file mode 100644 index 0000000..af49d57 --- /dev/null +++ b/src/api/distribution/distributor.js @@ -0,0 +1,54 @@ +import request from '@/utils/request'; + +// 查询分页 +export const getDistributorPage = params => { + return request({ + url: '/applet/xunjia/distributor/page', + method: 'get', + params + }); +}; + +// 新增 +export const addDistributor = data => { + return request({ + url: '/applet/xunjia/distributor/create', + method: 'post', + data + }); +}; + +// 修改 +export const updateDistributor = data => { + return request({ + url: '/applet/xunjia/distributor/update', + method: 'put', + data + }); +}; + +// 删除 +export const deleteDistributor = id => { + return request({ + url: '/applet/xunjia/distributor/delete', + method: 'delete', + params: { id } + }); +}; + +// 修改状态 +export const updateDistributorStatus = data => { + return request({ + url: '/applet/xunjia/distributor/tatus/update', + method: 'put', + data + }); +}; + +// 获取详情 +export const getDistributorDetail = id => { + return request({ + url: '/applet/xunjia/distributor/get/' + id, + method: 'get' + }); +}; diff --git a/src/api/distribution/index.js b/src/api/distribution/index.js new file mode 100644 index 0000000..adff662 --- /dev/null +++ b/src/api/distribution/index.js @@ -0,0 +1,9 @@ +import request from '@/utils/request'; + +export const getRulesInfo = params => { + return request({ + url: '/applet/xunjia/tenant/get', + method: 'get', + params + }); +}; diff --git a/src/pages.json b/src/pages.json index d9afd67..7e05e64 100644 --- a/src/pages.json +++ b/src/pages.json @@ -30,48 +30,6 @@ "navigationStyle": "custom" } }, - { - "path": "pages/mine/avatar/index", - "style": { - "navigationStyle": "custom" - } - }, - { - "path": "pages/mine/info/index", - "style": { - "navigationStyle": "custom" - } - }, - { - "path": "pages/mine/info/edit", - "style": { - "navigationStyle": "custom" - } - }, - { - "path": "pages/mine/pwd/index", - "style": { - "navigationStyle": "custom" - } - }, - { - "path": "pages/mine/setting/index", - "style": { - "navigationStyle": "custom" - } - }, - { - "path": "pages/mine/help/index", - "style": { - "navigationStyle": "custom" - } - }, - { - "path": "pages/mine/about/index", - "style": { - "navigationStyle": "custom" - } - }, { "path": "pages/common/webview/index", "style": { @@ -102,12 +60,6 @@ "navigationStyle": "custom" } }, - { - "path": "pages/distributor/rule", - "style": { - "navigationStyle": "custom" - } - }, { "path": "pages/distribution/data", "style": { diff --git a/src/pages/distribution/profit-rule.vue b/src/pages/distribution/profit-rule.vue index 9db84d4..aaa43fb 100644 --- a/src/pages/distribution/profit-rule.vue +++ b/src/pages/distribution/profit-rule.vue @@ -16,35 +16,48 @@ 规则说明 • 分润规则适用于所有分销员 - • 扫码注册分润：学员通过推广码扫码注册后，分销员可获得的分润 - • 购买会员分润：学员通过推广码购买会员后，分销员可获得的分润 - • 分润比例：按会员价格的百分比计算，最高不超过50% + • 注册分润：学员通过推广码扫码注册后，分销员可获得的分润 + • 消费分润：学员通过推广码购买会员后，分销员可获得的分润 + • 分润比例：按会员价格的百分比计算 分润规则配置 + + • 固定金额：直接设置具体金额 + • 比例分润：按预设基准金额的百分比计算 + - - + + - 扫码注册分润 + + {{ rule.type === 'register' ? '注册分润' : '消费分润' }} + + + 删除 + + + - + + + + + - - + + 分润金额 元 - - • 固定金额分润，学员扫码注册后立即发放 - • 建议设置为5-20元 - - - - - - - - 购买会员分润 - - - - - - + 分润比例 % - - 会员类型 + + + + 选择会员类型 - - {{ memberTypes[memberTypeIndex] }} - + + + - - • 按会员价格的百分比计算分润 - • 最高分润比例为50% - • 建议设置为10%-30% - + + + + + 新增消费分润规则 + - - - 会员价格设置 - - - 月度会员价格 - - - 元 - - - - 季度会员价格 - - - 元 - - - - 年度会员价格 - - - 元 - - - - - - - - 分润预览 - - - 月度会员分润 - {{ calculatePreview('monthly') }} - - - 季度会员分润 - {{ calculatePreview('quarterly') }} - - - 年度会员分润 - {{ calculatePreview('yearly') }} - - - @@ -306,6 +281,7 @@ height: 120rpx; background-color: #fff; padding: 0 32rpx; + margin-bottom: 16rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } @@ -317,6 +293,11 @@ font-size: 40rpx; color: #303133; cursor: pointer; + transition: color 0.3s ease; + } + + .back-icon:hover { + color: #409eff; } .header-title { @@ -335,18 +316,29 @@ 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); } /* 通用部分样式 */ .rule-info-section, - .rule-config-section, - .price-section, - .preview-section { + .rule-config-section { padding: 32rpx; background-color: #fff; margin: 0 16rpx 16rpx; border-radius: 16rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + } + + .rule-info-section:hover, + .rule-config-section:hover { + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } .section-title { @@ -364,6 +356,7 @@ background-color: #f9f9f9; border-radius: 12rpx; padding: 24rpx; + border: 1rpx solid #e4e7ed; } .info-item { @@ -384,6 +377,13 @@ background-color: #f9f9f9; border-radius: 12rpx; padding: 24rpx; + border: 1rpx solid #e4e7ed; + transition: all 0.3s ease; + } + + .rule-item:hover { + background-color: #f0f2f5; + border-color: #dcdfe6; } .rule-header { @@ -399,6 +399,41 @@ color: #303133; } + .rule-actions { + display: flex; + align-items: center; + gap: 16rpx; + } + + .delete-btn { + margin-top: 8rpx; + padding: 8rpx 16rpx; + border-radius: 8rpx; + background-color: rgba(245, 108, 108, 0.1); + cursor: pointer; + transition: all 0.3s ease; + } + + .delete-btn:hover { + background-color: rgba(245, 108, 108, 0.2); + } + + .add-rule-btn { + margin-top: 24rpx; + padding: 20rpx; + background-color: #ecf5ff; + border: 1rpx dashed #409eff; + border-radius: 12rpx; + text-align: center; + cursor: pointer; + transition: all 0.3s ease; + } + + .add-rule-btn:hover { + background-color: #ebefff; + border-color: #66b1ff; + } + .rule-content { display: flex; flex-direction: column; @@ -419,7 +454,25 @@ .rule-control { display: flex; align-items: center; - gap: 8rpx; + gap: 24rpx; + } + + .radio-item { + display: flex; + align-items: center; + cursor: pointer; + transition: color 0.3s ease; + margin-bottom: 8rpx; + } + + .radio-item:hover .radio-label { + color: #409eff; + } + + .radio-label { + margin-left: 8rpx; + font-size: 24rpx; + color: #303133; } .rule-input { @@ -431,6 +484,13 @@ padding: 0 16rpx; text-align: center; font-size: 24rpx; + transition: all 0.3s ease; + } + + .rule-input:focus { + outline: none; + border-color: #409eff; + box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2); } .rule-unit { @@ -445,89 +505,59 @@ line-height: 1.4; } - .picker { + /* VIP列表样式 */ + .vip-list { + display: flex; + flex-wrap: wrap; + gap: 16rpx; + } + + .vip-item { + width: 100%; display: flex; - justify-content: space-between; align-items: center; background-color: #fff; border: 1rpx solid #dcdfe6; border-radius: 8rpx; - padding: 16rpx; - min-width: 200rpx; + padding: 12rpx 16rpx; + cursor: pointer; + transition: all 0.3s ease; } - .picker-text { - font-size: 24rpx; + .vip-item:hover { + border-color: #409eff; + box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1); + } + + .vip-label { + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 15rpx; + font-size: 20rpx; color: #303133; + white-space: nowrap; } - /* 会员价格设置 */ - .price-card { - display: flex; - flex-direction: column; - gap: 16rpx; + /* 禁用状态样式 */ + .checkbox-label.disabled { + color: #c0c4cc !important; + opacity: 0.5 !important; } - .price-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 24rpx; - background-color: #f9f9f9; - border-radius: 12rpx; + /* 禁用的checkbox样式 */ + checkbox[disabled] { + opacity: 0.5 !important; } - .price-label { - font-size: 24rpx; - color: #606266; + checkbox[disabled] .uni-checkbox-input { + border-color: #dcdfe6 !important; + background-color: #f5f7fa !important; } - .price-control { - display: flex; - align-items: center; - gap: 8rpx; - } - - .price-input { - width: 160rpx; - height: 60rpx; - background-color: #fff; - border: 1rpx solid #dcdfe6; - border-radius: 8rpx; - padding: 0 16rpx; - text-align: center; - font-size: 24rpx; - } - - .price-unit { - font-size: 24rpx; - color: #606266; - } - - /* 分润预览 */ - .preview-card { - display: flex; - flex-direction: column; - gap: 16rpx; - } - - .preview-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 24rpx; - background-color: #f9f9f9; - border-radius: 12rpx; - } - - .preview-label { - font-size: 24rpx; - color: #606266; - } - - .preview-value { - font-size: 28rpx; - font-weight: bold; - color: #f56c6c; + checkbox[disabled] .uni-checkbox-input.uni-checkbox-input-checked { + border-color: #dcdfe6 !important; + background-color: #dcdfe6 !important; } \ No newline at end of file diff --git a/src/pages/distributor/add.vue b/src/pages/distributor/add.vue index a8d4c8d..c455047 100644 --- a/src/pages/distributor/add.vue +++ b/src/pages/distributor/add.vue @@ -41,26 +41,16 @@ 状态 - - {{ statusOptions[statusIndex] }} - - - - - 备注 - - - {{ distributorForm.remark.length }}/200 + + + @@ -70,22 +60,20 @@ @@ -328,68 +317,24 @@ color: #909399; } - /* 平板和大屏响应式 */ - @media screen and (min-width: 768px) { - .distributor-add-container { - max-width: 900px; - margin: 0 auto; - width: 100%; - } - - .form-section { - margin: 0 32rpx 24rpx; - padding: 40rpx; - } - - .section-title { - font-size: 36rpx; - margin-bottom: 32rpx; - } - - .form-card { - padding: 32rpx; - } - - .form-row { - margin-bottom: 32rpx; - } - - .form-label { - font-size: 26rpx; - } - - .form-input, - .picker { - padding: 24rpx 28rpx; - font-size: 26rpx; - border-radius: 14rpx; - } - - .picker-text { - font-size: 26rpx; - } - - .form-textarea { - height: 200rpx; - padding: 24rpx 28rpx; - font-size: 26rpx; - border-radius: 14rpx; - } - - .form-input::placeholder, - .form-textarea::placeholder { - font-size: 24rpx; - } - - .textarea-count { - font-size: 20rpx; - } - - .save-btn { - font-size: 28rpx; - } + /* Radio样式 */ + radio-group { + display: flex; + gap: 32rpx; } + .radio-item { + display: flex; + align-items: center; + gap: 8rpx; + } + + .radio-label { + font-size: 24rpx; + color: #303133; + } + + /* 大屏设备响应式 */ @media screen and (min-width: 1024px) { .distributor-add-container { diff --git a/src/pages/distributor/edit.vue b/src/pages/distributor/edit.vue index b3e7ded..8ee7cc1 100644 --- a/src/pages/distributor/edit.vue +++ b/src/pages/distributor/edit.vue @@ -1,11 +1,11 @@ @@ -192,7 +168,7 @@ } /* #endif */ - .distributor-edit-container { + .distributor-add-container { flex: 1; display: flex; flex-direction: column; @@ -241,7 +217,7 @@ .form-section { padding: 32rpx; background-color: #fff; - margin: 0 16rpx 16rpx; + margin: 16rpx; border-radius: 16rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); } @@ -284,22 +260,47 @@ .form-input { width: 100%; + height: 70rpx; background-color: #fff; border: 1rpx solid #dcdfe6; - border-radius: 8rpx; - padding: 16rpx; + border-radius: 12rpx; + padding: 20rpx 24rpx; font-size: 24rpx; color: #303133; + transition: all 0.3s ease; + box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.02); + } + + .form-input:focus { + border-color: #409eff; + box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1); + outline: none; + } + + .form-input::placeholder { + color: #909399; + font-size: 22rpx; } .picker { background-color: #fff; border: 1rpx solid #dcdfe6; - border-radius: 8rpx; - padding: 16rpx; + border-radius: 12rpx; + padding: 20rpx 24rpx; display: flex; justify-content: space-between; align-items: center; + transition: all 0.3s ease; + cursor: pointer; + } + + .picker:hover { + border-color: #c6e2ff; + box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1); + } + + .picker:active { + background-color: #f5faff; } .picker-text { @@ -312,11 +313,24 @@ height: 160rpx; background-color: #fff; border: 1rpx solid #dcdfe6; - border-radius: 8rpx; - padding: 16rpx; + border-radius: 12rpx; + padding: 20rpx 24rpx; font-size: 24rpx; color: #303133; resize: none; + transition: all 0.3s ease; + box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.02); + } + + .form-textarea:focus { + border-color: #409eff; + box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1); + outline: none; + } + + .form-textarea::placeholder { + color: #909399; + font-size: 22rpx; } .textarea-count { @@ -327,94 +341,27 @@ color: #909399; } - /* 操作按钮 */ - .action-section { - padding: 32rpx; - background-color: #fff; - margin: 0 16rpx 16rpx; - border-radius: 16rpx; - box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + /* Radio样式 */ + radio-group { + display: flex; + gap: 32rpx; } - .action-btn { - width: 100%; - text-align: center; - padding: 20rpx; - border-radius: 8rpx; + .radio-item { + display: flex; + align-items: center; + gap: 8rpx; + } + + .radio-label { font-size: 24rpx; - font-weight: 600; - cursor: pointer; + color: #303133; } - .delete-btn { - background-color: #fef0f0; - color: #f56c6c; - } - - /* 平板和大屏响应式 */ - @media screen and (min-width: 768px) { - .distributor-edit-container { - max-width: 900px; - margin: 0 auto; - width: 100%; - } - - .form-section, - .action-section { - margin: 0 32rpx 24rpx; - padding: 40rpx; - } - - .section-title { - font-size: 36rpx; - margin-bottom: 32rpx; - } - - .form-card { - padding: 32rpx; - } - - .form-row { - margin-bottom: 32rpx; - } - - .form-label { - font-size: 26rpx; - } - - .form-input, - .picker { - padding: 20rpx; - font-size: 26rpx; - } - - .picker-text { - font-size: 26rpx; - } - - .form-textarea { - height: 200rpx; - padding: 20rpx; - font-size: 26rpx; - } - - .textarea-count { - font-size: 20rpx; - } - - .save-btn { - font-size: 28rpx; - } - - .action-btn { - font-size: 26rpx; - padding: 24rpx; - } - } /* 大屏设备响应式 */ @media screen and (min-width: 1024px) { - .distributor-edit-container { + .distributor-add-container { max-width: 1000px; } @@ -428,7 +375,9 @@ .form-input, .picker { + padding: 28rpx 32rpx; font-size: 28rpx; + border-radius: 16rpx; } .picker-text { @@ -436,11 +385,14 @@ } .form-textarea { + padding: 28rpx 32rpx; font-size: 28rpx; + border-radius: 16rpx; } - .action-btn { - font-size: 28rpx; + .form-input::placeholder, + .form-textarea::placeholder { + font-size: 26rpx; } } \ No newline at end of file diff --git a/src/pages/distributor/index.vue b/src/pages/distributor/index.vue index 846edb5..02f8dea 100644 --- a/src/pages/distributor/index.vue +++ b/src/pages/distributor/index.vue @@ -15,25 +15,23 @@ - 状态 + 姓名 - - {{ statusOptions[statusIndex] }} - + - 搜索 + 手机号 @@ -57,15 +55,22 @@ {{ distributor.name }} {{ distributor.phone }} - {{ distributor.status }} + {{ statusOptions[distributor.status] }} - - 编辑 + + + 编辑 + + + 删除 + - - 删除 + + + 分销规则 + @@ -104,37 +109,19 @@ - - \ No newline at end of file diff --git a/src/pages/member/setting-form.vue b/src/pages/member/setting-form.vue index 9000a6c..d007838 100644 --- a/src/pages/member/setting-form.vue +++ b/src/pages/member/setting-form.vue @@ -149,7 +149,7 @@ const unitIndex = ref(0) // 包含权益 - const rights = ref(useTenantStore().tenantInfo?.memberBenefits || []) + const rights = ref(useTenantStore().tenantInfo?.memberBenefitList || []) const loading = ref(false) // 编辑模式 diff --git a/src/pages/member/setting.vue b/src/pages/member/setting.vue index 10f5f0c..e6f8105 100644 --- a/src/pages/member/setting.vue +++ b/src/pages/member/setting.vue @@ -113,7 +113,7 @@ { value: '1002', label: '摩托车' } ] - const rights = useTenantStore().tenantInfo?.memberBenefits || [] + const rights = useTenantStore().tenantInfo?.memberBenefitList || [] // 生命周期 onShow(() => { getMemberList() diff --git a/src/pages/mine/avatar/index.vue b/src/pages/mine/avatar/index.vue deleted file mode 100644 index 60a05cc..0000000 --- a/src/pages/mine/avatar/index.vue +++ /dev/null @@ -1,716 +0,0 @@ - - - - - diff --git a/src/pages/mine/help/index.vue b/src/pages/mine/help/index.vue deleted file mode 100644 index ab5314e..0000000 --- a/src/pages/mine/help/index.vue +++ /dev/null @@ -1,198 +0,0 @@ - - - - - diff --git a/src/pages/mine/info/edit.vue b/src/pages/mine/info/edit.vue deleted file mode 100644 index 4c1642b..0000000 --- a/src/pages/mine/info/edit.vue +++ /dev/null @@ -1,292 +0,0 @@ - - - - - diff --git a/src/pages/mine/info/index.vue b/src/pages/mine/info/index.vue deleted file mode 100644 index f1fdd05..0000000 --- a/src/pages/mine/info/index.vue +++ /dev/null @@ -1,146 +0,0 @@ - - - - - diff --git a/src/pages/mine/personal-info.vue b/src/pages/mine/personal-info.vue index e9acedd..8304b38 100644 --- a/src/pages/mine/personal-info.vue +++ b/src/pages/mine/personal-info.vue @@ -105,17 +105,6 @@ uni.navigateBack({ delta: 1 }) } - // 获取性别索引 - function getGenderIndex() { - return genders.indexOf(userInfo.value.gender) - } - - // 处理性别变更 - function onGenderChange(e) { - const index = e.detail.value - userInfo.value.gender = genders[index] - } - // 选择头像 function chooseAvatar() { uni.chooseImage({ diff --git a/src/pages/mine/pwd/index.vue b/src/pages/mine/pwd/index.vue deleted file mode 100644 index 741071d..0000000 --- a/src/pages/mine/pwd/index.vue +++ /dev/null @@ -1,211 +0,0 @@ - - - - - diff --git a/src/pages/mine/setting/index.vue b/src/pages/mine/setting/index.vue deleted file mode 100644 index 6b7eb01..0000000 --- a/src/pages/mine/setting/index.vue +++ /dev/null @@ -1,218 +0,0 @@ - - - - - diff --git a/src/static/scss/global.css b/src/static/scss/global.css new file mode 100644 index 0000000..019c03b --- /dev/null +++ b/src/static/scss/global.css @@ -0,0 +1,241 @@ +@charset "UTF-8"; +.list-cell-arrow::before { + content: ' '; + height: 10px; + width: 10px; + border-width: 2px 2px 0 0; + border-color: #c0c0c0; + border-style: solid; + -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); + transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); + position: absolute; + top: 50%; + margin-top: -6px; + right: 30rpx; +} + +.list-cell { + position: relative; + width: 100%; + box-sizing: border-box; + background-color: #fff; + color: #333; + padding: 26rpx 30rpx; +} + +.list-cell:first-child { + border-radius: 8rpx 8rpx 0 0; +} + +.list-cell:last-child { + border-radius: 0 0 8rpx 8rpx; +} + +.list-cell::after { + content: ''; + position: absolute; + border-bottom: 1px solid #eaeef1; + -webkit-transform: scaleY(0.5) translateZ(0); + transform: scaleY(0.5) translateZ(0); + transform-origin: 0 100%; + bottom: 0; + right: 0; + left: 0; + pointer-events: none; +} + +.menu-list { + margin: 15px 15px; +} + +.menu-list .menu-item-box { + width: 100%; + display: flex; + align-items: center; +} + +.menu-list .menu-item-box .menu-icon { + color: #007aff; + font-size: 16px; + margin-right: 5px; +} + +.menu-list .menu-item-box .text-right { + margin-left: auto; + margin-right: 34rpx; + color: #999; +} + +/* 全局Radio样式美化 */ +radio { + transform: scale(0.8); +} + +radio[checked] .wx-radio-input { + border-color: #409eff !important; + background-color: #409eff !important; +} + +/* 全局Checkbox样式美化 */ +/* 基础样式重置 */ +checkbox { + width: 40rpx !important; + height: 40rpx !important; + margin: 0 !important; + padding: 0 !important; +} + +/* Uni-app核心样式覆盖 */ +.uni-checkbox-input { + width: 40rpx !important; + height: 40rpx !important; + border: 2rpx solid #dcdfe6 !important; + border-radius: 8rpx !important; + background-color: #ffffff !important; + transition: all 0.3s ease-in-out !important; + position: relative !important; + overflow: hidden !important; +} + +.uni-checkbox-input:hover { + border-color: #409eff !important; + box-shadow: 0 0 12rpx rgba(64, 158, 255, 0.2) !important; +} + +/* 选中状态 */ +.uni-checkbox-input.uni-checkbox-input-checked { + border-color: #409eff !important; + background-color: #409eff !important; + animation: checkboxPulse 0.3s ease-in-out !important; +} + +/* 选中状态的对勾 - 使用SVG路径实现 */ +.uni-checkbox-input.uni-checkbox-input-checked::after { + content: '' !important; + position: absolute !important; + top: 8rpx !important; + left: 13rpx !important; + width: 12rpx !important; + height: 20rpx !important; + border: 3rpx solid #ffffff !important; + border-top: none !important; + border-left: none !important; + transform: rotate(45deg) !important; + transform-origin: center !important; + animation: checkboxTick 0.3s ease-in-out !important; +} + +/* 清除默认对勾 */ +.uni-checkbox-input.uni-checkbox-input-checked::before { + display: none !important; + content: none !important; +} + +/* 微信小程序兼容 */ +checkbox .wx-checkbox-input { + width: 40rpx !important; + height: 40rpx !important; + border: 2rpx solid #dcdfe6 !important; + border-radius: 8rpx !important; + background-color: #ffffff !important; +} + +checkbox[checked] .wx-checkbox-input { + border-color: #409eff !important; + background-color: #409eff !important; +} + +checkbox[checked] .wx-checkbox-input::before { + display: none !important; +} + +/* 禁用状态样式 */ +checkbox[disabled] { + opacity: 0.5 !important; +} + +checkbox[disabled] .uni-checkbox-input { + border-color: #dcdfe6 !important; + background-color: #f5f7fa !important; + cursor: not-allowed !important; +} + +checkbox[disabled] .uni-checkbox-input:hover { + border-color: #dcdfe6 !important; + box-shadow: none !important; +} + +checkbox[disabled] .uni-checkbox-input.uni-checkbox-input-checked { + border-color: #dcdfe6 !important; + background-color: #dcdfe6 !important; +} + +/* 微信小程序禁用状态 */ +checkbox[disabled] .wx-checkbox-input { + border-color: #dcdfe6 !important; + background-color: #f5f7fa !important; +} + +checkbox[disabled][checked] .wx-checkbox-input { + border-color: #dcdfe6 !important; + background-color: #dcdfe6 !important; +} + +checkbox[checked] .wx-checkbox-input::after { + content: '' !important; + position: absolute !important; + top: 8rpx !important; + left: 13rpx !important; + width: 12rpx !important; + height: 20rpx !important; + border: 3rpx solid #ffffff !important; + border-top: none !important; + border-left: none !important; + transform: rotate(45deg) !important; +} + +/* 动画效果 */ +@keyframes checkboxPulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +@keyframes checkboxTick { + 0% { + transform: rotate(45deg) scale(0); + opacity: 0; + } + 100% { + transform: rotate(45deg) scale(1); + opacity: 1; + } +} + +/* 通用选择器样式 */ +.radio-item, +.checkbox-item { + display: flex; + align-items: center; + cursor: pointer; + transition: color 0.3s ease; +} + +.radio-item:hover .radio-label, +.checkbox-item:hover .checkbox-label { + color: #409eff; +} + +.radio-label, +.checkbox-label { + margin-left: 8rpx; + font-size: 24rpx; + color: #303133; + transition: color 0.3s ease; +} diff --git a/src/static/scss/global.min.css b/src/static/scss/global.min.css new file mode 100644 index 0000000..6ca92fa --- /dev/null +++ b/src/static/scss/global.min.css @@ -0,0 +1 @@ +.list-cell-arrow::before{content:' ';height:10px;width:10px;border-width:2px 2px 0 0;border-color:#c0c0c0;border-style:solid;-webkit-transform:matrix(0.5, 0.5, -0.5, 0.5, 0, 0);transform:matrix(0.5, 0.5, -0.5, 0.5, 0, 0);position:absolute;top:50%;margin-top:-6px;right:30rpx}.list-cell{position:relative;width:100%;box-sizing:border-box;background-color:#fff;color:#333;padding:26rpx 30rpx}.list-cell:first-child{border-radius:8rpx 8rpx 0 0}.list-cell:last-child{border-radius:0 0 8rpx 8rpx}.list-cell::after{content:'';position:absolute;border-bottom:1px solid #eaeef1;-webkit-transform:scaleY(0.5) translateZ(0);transform:scaleY(0.5) translateZ(0);transform-origin:0 100%;bottom:0;right:0;left:0;pointer-events:none}.menu-list{margin:15px 15px}.menu-list .menu-item-box{width:100%;display:flex;align-items:center}.menu-list .menu-item-box .menu-icon{color:#007aff;font-size:16px;margin-right:5px}.menu-list .menu-item-box .text-right{margin-left:auto;margin-right:34rpx;color:#999}radio{transform:scale(0.8)}radio[checked] .wx-radio-input{border-color:#409eff !important;background-color:#409eff !important}checkbox{width:40rpx !important;height:40rpx !important;margin:0 !important;padding:0 !important}.uni-checkbox-input{width:40rpx !important;height:40rpx !important;border:2rpx solid #dcdfe6 !important;border-radius:8rpx !important;background-color:#ffffff !important;transition:all 0.3s ease-in-out !important;position:relative !important;overflow:hidden !important}.uni-checkbox-input:hover{border-color:#409eff !important;box-shadow:0 0 12rpx rgba(64,158,255,0.2) !important}.uni-checkbox-input.uni-checkbox-input-checked{border-color:#409eff !important;background-color:#409eff !important;animation:checkboxPulse 0.3s ease-in-out !important}.uni-checkbox-input.uni-checkbox-input-checked::after{content:'' !important;position:absolute !important;top:8rpx !important;left:13rpx !important;width:12rpx !important;height:20rpx !important;border:3rpx solid #ffffff !important;border-top:none !important;border-left:none !important;transform:rotate(45deg) !important;transform-origin:center !important;animation:checkboxTick 0.3s ease-in-out !important}.uni-checkbox-input.uni-checkbox-input-checked::before{display:none !important;content:none !important}checkbox .wx-checkbox-input{width:40rpx !important;height:40rpx !important;border:2rpx solid #dcdfe6 !important;border-radius:8rpx !important;background-color:#ffffff !important}checkbox[checked] .wx-checkbox-input{border-color:#409eff !important;background-color:#409eff !important}checkbox[checked] .wx-checkbox-input::before{display:none !important}checkbox[disabled]{opacity:0.5 !important}checkbox[disabled] .uni-checkbox-input{border-color:#dcdfe6 !important;background-color:#f5f7fa !important;cursor:not-allowed !important}checkbox[disabled] .uni-checkbox-input:hover{border-color:#dcdfe6 !important;box-shadow:none !important}checkbox[disabled] .uni-checkbox-input.uni-checkbox-input-checked{border-color:#dcdfe6 !important;background-color:#dcdfe6 !important}checkbox[disabled] .wx-checkbox-input{border-color:#dcdfe6 !important;background-color:#f5f7fa !important}checkbox[disabled][checked] .wx-checkbox-input{border-color:#dcdfe6 !important;background-color:#dcdfe6 !important}checkbox[checked] .wx-checkbox-input::after{content:'' !important;position:absolute !important;top:8rpx !important;left:13rpx !important;width:12rpx !important;height:20rpx !important;border:3rpx solid #ffffff !important;border-top:none !important;border-left:none !important;transform:rotate(45deg) !important}@keyframes checkboxPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes checkboxTick{0%{transform:rotate(45deg) scale(0);opacity:0}100%{transform:rotate(45deg) scale(1);opacity:1}}.radio-item,.checkbox-item{display:flex;align-items:center;cursor:pointer;transition:color 0.3s ease}.radio-item:hover .radio-label,.checkbox-item:hover .checkbox-label{color:#409eff}.radio-label,.checkbox-label{margin-left:8rpx;font-size:24rpx;color:#303133;transition:color 0.3s ease} diff --git a/src/static/scss/global.scss b/src/static/scss/global.scss index ac636bd..2a90b54 100644 --- a/src/static/scss/global.scss +++ b/src/static/scss/global.scss @@ -1,90 +1,240 @@ -.text-center { - text-align: center; -} - -.font-13 { - font-size: 13px; -} - -.font-12 { - font-size: 12px; -} - -.font-11 { - font-size: 11px; -} - -.text-grey1 { - color: #888; -} -.text-grey2 { - color: #aaa; -} - .list-cell-arrow::before { - content: ' '; - height: 10px; - width: 10px; - border-width: 2px 2px 0 0; - border-color: #c0c0c0; - border-style: solid; - -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); - transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); - position: absolute; - top: 50%; - margin-top: -6px; - right: 30rpx; - } - - .list-cell { - position: relative; + content: ' '; + height: 10px; + width: 10px; + border-width: 2px 2px 0 0; + border-color: #c0c0c0; + border-style: solid; + -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); + transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); + position: absolute; + top: 50%; + margin-top: -6px; + right: 30rpx; +} + +.list-cell { + position: relative; + width: 100%; + box-sizing: border-box; + background-color: #fff; + color: #333; + padding: 26rpx 30rpx; +} + +.list-cell:first-child { + border-radius: 8rpx 8rpx 0 0; +} + +.list-cell:last-child { + border-radius: 0 0 8rpx 8rpx; +} + +.list-cell::after { + content: ''; + position: absolute; + border-bottom: 1px solid #eaeef1; + -webkit-transform: scaleY(0.5) translateZ(0); + transform: scaleY(0.5) translateZ(0); + transform-origin: 0 100%; + bottom: 0; + right: 0; + left: 0; + pointer-events: none; +} + +.menu-list { + margin: 15px 15px; + + .menu-item-box { width: 100%; - box-sizing: border-box; - background-color: #fff; - color: #333; - padding: 26rpx 30rpx; - } - - .list-cell:first-child { - border-radius: 8rpx 8rpx 0 0; - } - - .list-cell:last-child { - border-radius: 0 0 8rpx 8rpx; - } - - .list-cell::after { - content: ''; - position: absolute; - border-bottom: 1px solid #eaeef1; - -webkit-transform: scaleY(0.5) translateZ(0); - transform: scaleY(0.5) translateZ(0); - transform-origin: 0 100%; - bottom: 0; - right: 0; - left: 0; - pointer-events: none; - } - - - .menu-list { - margin: 15px 15px; - - .menu-item-box { - width: 100%; - display: flex; - align-items: center; - - .menu-icon { - color: #007AFF; - font-size: 16px; - margin-right: 5px; - } - - .text-right { - margin-left: auto; - margin-right: 34rpx; - color: #999; - } + display: flex; + align-items: center; + + .menu-icon { + color: #007aff; + font-size: 16px; + margin-right: 5px; + } + + .text-right { + margin-left: auto; + margin-right: 34rpx; + color: #999; } } +} + +/* 全局Radio样式美化 */ +radio { + transform: scale(0.8); +} + +radio[checked] .wx-radio-input { + border-color: #409eff !important; + background-color: #409eff !important; +} + +/* 全局Checkbox样式美化 */ +/* 基础样式重置 */ +checkbox { + width: 40rpx !important; + height: 40rpx !important; + margin: 0 !important; + padding: 0 !important; +} + +/* Uni-app核心样式覆盖 */ +.uni-checkbox-input { + width: 40rpx !important; + height: 40rpx !important; + border: 2rpx solid #dcdfe6 !important; + border-radius: 8rpx !important; + background-color: #ffffff !important; + transition: all 0.3s ease-in-out !important; + position: relative !important; + overflow: hidden !important; +} + +.uni-checkbox-input:hover { + border-color: #409eff !important; + box-shadow: 0 0 12rpx rgba(64, 158, 255, 0.2) !important; +} + +/* 选中状态 */ +.uni-checkbox-input.uni-checkbox-input-checked { + border-color: #409eff !important; + background-color: #409eff !important; + animation: checkboxPulse 0.3s ease-in-out !important; +} + +/* 选中状态的对勾 - 使用SVG路径实现 */ +.uni-checkbox-input.uni-checkbox-input-checked::after { + content: '' !important; + position: absolute !important; + top: 8rpx !important; + left: 13rpx !important; + width: 12rpx !important; + height: 20rpx !important; + border: 3rpx solid #ffffff !important; + border-top: none !important; + border-left: none !important; + transform: rotate(45deg) !important; + transform-origin: center !important; + animation: checkboxTick 0.3s ease-in-out !important; +} + +/* 清除默认对勾 */ +.uni-checkbox-input.uni-checkbox-input-checked::before { + display: none !important; + content: none !important; +} + +/* 微信小程序兼容 */ +checkbox .wx-checkbox-input { + width: 40rpx !important; + height: 40rpx !important; + border: 2rpx solid #dcdfe6 !important; + border-radius: 8rpx !important; + background-color: #ffffff !important; +} + +checkbox[checked] .wx-checkbox-input { + border-color: #409eff !important; + background-color: #409eff !important; +} + +checkbox[checked] .wx-checkbox-input::before { + display: none !important; +} + +/* 禁用状态样式 */ +checkbox[disabled] { + opacity: 0.5 !important; +} + +checkbox[disabled] .uni-checkbox-input { + border-color: #dcdfe6 !important; + background-color: #f5f7fa !important; + cursor: not-allowed !important; +} + +checkbox[disabled] .uni-checkbox-input:hover { + border-color: #dcdfe6 !important; + box-shadow: none !important; +} + +checkbox[disabled] .uni-checkbox-input.uni-checkbox-input-checked { + border-color: #dcdfe6 !important; + background-color: #dcdfe6 !important; +} + +/* 微信小程序禁用状态 */ +checkbox[disabled] .wx-checkbox-input { + border-color: #dcdfe6 !important; + background-color: #f5f7fa !important; +} + +checkbox[disabled][checked] .wx-checkbox-input { + border-color: #dcdfe6 !important; + background-color: #dcdfe6 !important; +} + +checkbox[checked] .wx-checkbox-input::after { + content: '' !important; + position: absolute !important; + top: 8rpx !important; + left: 13rpx !important; + width: 12rpx !important; + height: 20rpx !important; + border: 3rpx solid #ffffff !important; + border-top: none !important; + border-left: none !important; + transform: rotate(45deg) !important; +} + +/* 动画效果 */ +@keyframes checkboxPulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +@keyframes checkboxTick { + 0% { + transform: rotate(45deg) scale(0); + opacity: 0; + } + 100% { + transform: rotate(45deg) scale(1); + opacity: 1; + } +} + +/* 通用选择器样式 */ +.radio-item, +.checkbox-item { + display: flex; + align-items: center; + cursor: pointer; + transition: color 0.3s ease; +} + +.radio-item:hover .radio-label, +.checkbox-item:hover .checkbox-label { + color: #409eff; +} + +.radio-label, +.checkbox-label { + margin-left: 8rpx; + font-size: 24rpx; + color: #303133; + transition: color 0.3s ease; +}