From c0ac349a0fa09b68e3a6e7f0df59810af7a5fc08 Mon Sep 17 00:00:00 2001 From: qweasdzxclm <2795631299@qq.com> Date: Mon, 19 Jan 2026 18:02:08 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - postcss.config.js | 12 +--- src/main.ts | 4 -- src/utils/index.ts | 3 - src/utils/rem.ts | 65 ------------------- src/views/DashEntry/DashEntry.vue | 46 +++++++------ src/views/Dashboard/Index.vue | 28 ++++---- .../components/ConsumptionRecords/Index.vue | 34 +++++----- .../Dashboard/components/InfoCard/Index.vue | 30 ++++----- .../RecentRewardsPunishments/Index.vue | 29 +++++---- .../components/ScoreAssessment/Index.vue | 22 +++---- 11 files changed, 95 insertions(+), 179 deletions(-) delete mode 100644 src/utils/rem.ts diff --git a/package.json b/package.json index 95c9f20b..1a12256e 100644 --- a/package.json +++ b/package.json @@ -114,7 +114,6 @@ "lint-staged": "^15.2.2", "postcss": "^8.4.35", "postcss-html": "^1.6.0", - "postcss-pxtorem": "^6.1.0", "postcss-scss": "^4.0.9", "prettier": "^3.2.5", "prettier-eslint": "^16.3.0", diff --git a/postcss.config.js b/postcss.config.js index f3111fc1..961986e2 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,15 +1,5 @@ module.exports = { plugins: { - autoprefixer: {}, - 'postcss-pxtorem': { - rootValue: 16, // 设计稿基准值，1rem = 16px - unitPrecision: 5, // rem 的小数位数 - propList: ['*'], // 需要转换的属性，* 表示所有属性 - selectorBlackList: [], // 忽略的选择器，可以使用正则表达式 - replace: true, // 是否替换而不是添加 - mediaQuery: false, // 是否在媒体查询中转换 px - minPixelValue: 0, // 设置要替换的最小像素值，0 表示所有值都转换 - exclude: /node_modules/i // 排除 node_modules 目录 - } + autoprefixer: {} } } diff --git a/src/main.ts b/src/main.ts index 46e3a545..fcfd7809 100644 --- a/src/main.ts +++ b/src/main.ts @@ -25,10 +25,6 @@ import '@/styles/index.scss' // 引入动画 import '@/plugins/animate.css' -// 初始化 rem 移动端适配 -import { initRem } from '@/utils/rem' -initRem() - // 路由 import router, { setupRouter } from '@/router' diff --git a/src/utils/index.ts b/src/utils/index.ts index 2b2713d6..0bcedb43 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -535,6 +535,3 @@ export const subString = (str: string, start: number, end: number) => { } return str } - -// rem 移动端适配 -export { initRem, getRem } from './rem' diff --git a/src/utils/rem.ts b/src/utils/rem.ts deleted file mode 100644 index b0a63372..00000000 --- a/src/utils/rem.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * rem 移动端适配工具 - * 根据屏幕宽度动态设置根元素字体大小 - */ - -// 设计稿基准宽度（根据你的设计稿调整，常见值：375、750） -const DESIGN_WIDTH = 375 -// 基准字体大小（与 postcss.config.js 中的 rootValue 保持一致） -const BASE_FONT_SIZE = 16 - -/** - * 设置 rem 基准值 - */ -function setRem() { - const docEl = document.documentElement - const width = docEl.clientWidth || window.innerWidth - - // 计算根字体大小：屏幕宽度 / 设计稿宽度 * 基准字体大小 - const rem = (width / DESIGN_WIDTH) * BASE_FONT_SIZE - - // 设置根元素字体大小 - docEl.style.fontSize = `${rem}px` - - // 限制最大和最小字体大小（可选） - const maxRem = BASE_FONT_SIZE * 1.5 // 最大 24px - const minRem = BASE_FONT_SIZE * 0.8 // 最小 12.8px - - if (rem > maxRem) { - docEl.style.fontSize = `${maxRem}px` - } else if (rem < minRem) { - docEl.style.fontSize = `${minRem}px` - } -} - -/** - * 初始化 rem 适配 - */ -export function initRem() { - // 初始设置 - setRem() - - // 监听窗口大小变化 - window.addEventListener('resize', setRem) - - // 监听屏幕方向变化（移动端横竖屏切换） - window.addEventListener('orientationchange', () => { - setTimeout(setRem, 100) - }) - - // 监听页面显示（处理浏览器标签页切换） - document.addEventListener('visibilitychange', () => { - if (!document.hidden) { - setRem() - } - }) -} - -/** - * 获取当前 rem 基准值 - */ -export function getRem(): number { - const docEl = document.documentElement - const fontSize = window.getComputedStyle(docEl).fontSize - return parseFloat(fontSize) -} diff --git a/src/views/DashEntry/DashEntry.vue b/src/views/DashEntry/DashEntry.vue index cf596c61..796fddf5 100644 --- a/src/views/DashEntry/DashEntry.vue +++ b/src/views/DashEntry/DashEntry.vue @@ -4,7 +4,7 @@
- +
{{ card.title }}
@@ -25,7 +25,7 @@
风险等级分布
- +
@@ -33,7 +33,7 @@
风险趋势图
- +
@@ -165,7 +165,7 @@ const riskDistributionOptions = computed(() => ({ emphasis: { label: { show: true, - fontSize: 14, + fontSize: 12, fontWeight: 'bold' } }, @@ -185,7 +185,7 @@ const riskTrendOptions = computed(() => ({ }, legend: { data: ['高危', '预警', '普通'], - bottom: 10 + bottom: 0 }, grid: { left: '3%', @@ -320,7 +320,7 @@ const handleView = (row: any) => { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; - margin-bottom: 20px; + margin-bottom: 15px; width: 100%; box-sizing: border-box; } @@ -347,14 +347,13 @@ const handleView = (row: any) => { position: absolute; top: 10px; right: 0; - width: 20px; - height: 20px; + width: 32px; + height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16px; - font-size: 28px; &.icon-all { background: #e6f4ff; @@ -384,26 +383,26 @@ const handleView = (row: any) => { } .stat-card-title { - font-size: 9px; + font-size: 14px; color: #666; - margin-bottom: 8px; + margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-card-value { - font-size: 10px; + font-size: 16px; font-weight: bold; color: #333; - margin-bottom: 8px; + margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-card-subtitle { - font-size: 8px; + font-size: 14px; color: #999; white-space: nowrap; overflow: hidden; @@ -426,25 +425,25 @@ const handleView = (row: any) => { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; - margin-bottom: 20px; + margin-bottom: 15px; } .chart-card { background: #ffffff; border-radius: 8px; - padding: 20px; + padding: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .chart-title { - font-size: 11px; + font-size: 15px; font-weight: bold; color: #333; margin-bottom: 16px; } .chart-content { - height: 250px; + height: 200px; } // 表格区域 @@ -456,14 +455,14 @@ const handleView = (row: any) => { } .table-title { - font-size: 11px; + font-size: 15px; font-weight: bold; color: #333; margin-bottom: 16px; } :deep(.name-column) { - padding-left: 20px; + padding-left: 32px; } .new-tag { @@ -472,12 +471,11 @@ const handleView = (row: any) => { top: 50%; transform: translateY(-50%); left: 0; - padding: 1px 3px; + padding: 2px 8px; background: #1890ff; color: #ffffff; - font-size: 9px; - border-radius: 2px; - margin-right: 8px; + font-size: 13px; + border-radius: 4px; } .risk-level { diff --git a/src/views/Dashboard/Index.vue b/src/views/Dashboard/Index.vue index 81e4ee7d..eb132b53 100644 --- a/src/views/Dashboard/Index.vue +++ b/src/views/Dashboard/Index.vue @@ -272,23 +272,23 @@ onUnmounted(() => { .prison-name { position: fixed; - top: 12px; + top: 18px; left: 50%; - transform: translateX(-48%); + transform: translateX(-50%); color: white; text-align: center; width: 100%; z-index: 1000; - font-size: 20px; + font-size: 26px; font-weight: bold; } .current-time { position: fixed; top: 12px; - right: 32px; + right: 50px; color: white; - font-size: 12px; + font-size: 16px; z-index: 1000; font-weight: 500; } @@ -349,14 +349,14 @@ onUnmounted(() => { background: #2d3d5f; border: 1px solid rgba(56, 102, 141, 0.5); display: flex; - padding-left: 10px; + padding-left: 18px; justify-content: start; align-items: center; } .list-card-item-icon { - width: 18px; - height: 18px; + width: 26px; + height: 26px; margin-right: 10px; } .icon-location { @@ -376,7 +376,7 @@ onUnmounted(() => { background-size: 100% 100%; } .list-card-item-value { - font-size: 10px; + font-size: 14px; font-weight: bold; color: #ffffff; } @@ -403,7 +403,7 @@ onUnmounted(() => { // 信息卡片通用样式 .info-card-item { border-radius: 2px; - padding: 5px 10px; + padding: 18px 20px; box-shadow: inset 0 0 15px 0 #2b4183; border: 1px solid #2b4183; display: flex; @@ -421,16 +421,16 @@ onUnmounted(() => { } .card-number { - font-size: 10px; + font-size: 14px; font-weight: bold; color: #ffffff; line-height: 1.3; - margin-bottom: 6px; + margin-bottom: 10px; white-space: nowrap; } .card-label { - font-size: 7px; + font-size: 10px; color: rgba(255, 255, 255, 0.65); line-height: 1.3; white-space: nowrap; @@ -476,7 +476,7 @@ onUnmounted(() => { justify-content: center; align-items: center; .dashboard-content-bottom-right-title { - font-size: 12px; + font-size: 14px; font-weight: bold; color: #ffffff; margin-bottom: 12px; diff --git a/src/views/Dashboard/components/ConsumptionRecords/Index.vue b/src/views/Dashboard/components/ConsumptionRecords/Index.vue index b28b1727..bfdc6e1c 100644 --- a/src/views/Dashboard/components/ConsumptionRecords/Index.vue +++ b/src/views/Dashboard/components/ConsumptionRecords/Index.vue @@ -260,16 +260,16 @@ if (props.remitData && props.remitData.length > 0) { height: 100%; display: flex; flex-direction: column; - gap: 10px; + gap: 14px; overflow: hidden; border-radius: 8px; - padding: 12px 8px; + padding: 20px 16px; border: 1px solid rgba(56, 102, 141, 0.3); } .consumption-records-title { text-align: center; - font-size: 10px; + font-size: 14px; font-weight: bold; color: #ffffff; } @@ -278,7 +278,7 @@ if (props.remitData && props.remitData.length > 0) { width: 100%; flex: 1; display: flex; - gap: 16px; + gap: 20px; overflow: hidden; } .consumption-records { @@ -292,15 +292,15 @@ if (props.remitData && props.remitData.length > 0) { // 标题栏 .records-header { flex-shrink: 0; - padding: 8px; + padding: 14px; background: #2c3d7e; - border-radius: 10px 10px 0 0; + border-radius: 14px 14px 0 0; display: flex; align-items: center; } .header-title { - font-size: 9px; + font-size: 13px; font-weight: bold; color: #ffffff; } @@ -322,7 +322,7 @@ if (props.remitData && props.remitData.length > 0) { .record-item { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr 0.8fr; - padding: 2px 8px; + padding: 4px 10px; border-bottom: 1px solid rgba(56, 102, 141, 0.15); align-items: center; @@ -332,12 +332,12 @@ if (props.remitData && props.remitData.length > 0) { } .record-date { - font-size: 7px; + font-size: 11px; color: rgba(255, 255, 255, 0.9); } .record-name { - font-size: 7px; + font-size: 11px; font-weight: 500; &.name-purple { @@ -366,12 +366,12 @@ if (props.remitData && props.remitData.length > 0) { } .record-category { - font-size: 7px; + font-size: 11px; color: rgba(255, 255, 255, 0.9); } .record-amount { - font-size: 7px; + font-size: 11px; font-weight: 500; color: white; text-align: right; @@ -382,7 +382,7 @@ if (props.remitData && props.remitData.length > 0) { } .relationship-item { background: #422b1f; - padding: 4px 8px; + padding: 6px 10px; border-radius: 4px; display: flex; align-items: center; @@ -410,8 +410,8 @@ if (props.remitData && props.remitData.length > 0) { flex-shrink: 0; margin-top: 1.5px; svg { - width: 8px; - height: 9px; + width: 12px; + height: 13px; } &.icon-orange { color: #ffa500; @@ -428,9 +428,9 @@ if (props.remitData && props.remitData.length > 0) { } .relationship-name { - font-size: 7px; + font-size: 11px; } .relationship-relate { - font-size: 7px; + font-size: 11px; } diff --git a/src/views/Dashboard/components/InfoCard/Index.vue b/src/views/Dashboard/components/InfoCard/Index.vue index eeceac3e..16b84042 100644 --- a/src/views/Dashboard/components/InfoCard/Index.vue +++ b/src/views/Dashboard/components/InfoCard/Index.vue @@ -146,7 +146,7 @@ const props = withDefaults( height: 100%; background: rgba(13, 30, 50, 0.9); border-radius: 10px; - padding: 4px 8px; + padding: 10px 16px; gap: 24px; border: 1px solid rgba(56, 102, 141, 0.3); } @@ -164,18 +164,18 @@ const props = withDefaults( .section-header { display: flex; align-items: center; - margin-bottom: 12px; + margin-bottom: 18px; } .header-title { - font-size: 8px; + font-size: 14px; margin-right: 2px; color: white; } .header-icon { - width: 12px; - height: 12px; + width: 18px; + height: 18px; background: url('@/assets/imgs/dashboard/pie.svg') no-repeat center center; background-size: 100% 100%; } @@ -193,7 +193,7 @@ const props = withDefaults( background: #3f6973; border: 1px solid rgba(56, 102, 141, 0.5); border-radius: 2px; - font-size: 5px; + font-size: 9px; color: #d8f0ff; white-space: nowrap; } @@ -201,11 +201,11 @@ const props = withDefaults( .info-detail { display: flex; gap: 2px; - margin-top: 8px; + margin-top: 18px; } .records-content-title { - font-size: 6px; + font-size: 10px; color: #d8f0ff; } @@ -218,7 +218,7 @@ const props = withDefaults( .info-item { display: flex; align-items: center; - font-size: 6px; + font-size: 10px; color: white; } @@ -237,7 +237,7 @@ const props = withDefaults( display: flex; flex-direction: column; gap: 2px; - height: 105px; + height: 150px; overflow-y: auto; &::-webkit-scrollbar { display: none; @@ -251,8 +251,8 @@ const props = withDefaults( } .record-bullet { - width: 5px; - height: 5px; + width: 8px; + height: 8px; border-radius: 50%; background: #10a0f2; flex-shrink: 0; @@ -266,7 +266,7 @@ const props = withDefaults( left: 50%; transform: translateX(-50%); width: 2px; - height: calc(100% + 4px); + height: calc(100% + 14px); background: rgba(56, 102, 141, 0.5); } } @@ -281,14 +281,14 @@ const props = withDefaults( } .record-date { - font-size: 6px; + font-size: 10px; font-weight: 600; color: white; margin-bottom: 1px; } .record-text { - font-size: 6px; + font-size: 10px; color: #d8f0ff; } diff --git a/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue b/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue index 964588b2..58a81b1a 100644 --- a/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue +++ b/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue @@ -119,7 +119,7 @@ if (props.data && props.data.length > 0) { overflow: hidden; border: 1px solid rgba(56, 102, 141, 0.5); border-radius: 8px; - padding: 12px; + padding: 20px; } // 标题栏 @@ -128,11 +128,11 @@ if (props.data && props.data.length > 0) { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 12px; + margin-bottom: 14px; } .header-title { - font-size: 10px; + font-size: 14px; font-weight: bold; color: #ffffff; } @@ -143,8 +143,8 @@ if (props.data && props.data.length > 0) { } .filter-tab { - padding: 2px 4px; - font-size: 7px; + padding: 4px 6px; + font-size: 11px; color: rgba(255, 255, 255, 0.85); background: rgba(56, 102, 141, 0.2); border-radius: 2px; @@ -160,7 +160,7 @@ if (props.data && props.data.length > 0) { flex: 1 1 0; min-height: 0; overflow-y: auto; - padding-left: 6px; + padding-left: 10px; &::-webkit-scrollbar { width: 0px; @@ -178,12 +178,13 @@ if (props.data && props.data.length > 0) { left: -2px; top: 0; bottom: 0; - width: 1px; + width: 2px; background: #5e7fef; } .timeline-items { position: relative; + margin-left: 2px; } // 时间线项 @@ -191,17 +192,17 @@ if (props.data && props.data.length > 0) { position: relative; display: flex; align-items: flex-start; - margin-bottom: 4px; + margin-bottom: 10px; } // 时间线标记点 .timeline-dot { position: absolute; - left: -5px; + left: -8px; top: 50%; transform: translateY(-50%); - width: 7px; - height: 7px; + width: 11px; + height: 11px; border-radius: 50%; border: 2px solid rgba(13, 30, 50, 0.8); background: rgba(13, 30, 50, 0.8); @@ -224,11 +225,11 @@ if (props.data && props.data.length > 0) { background: rgba(56, 102, 141, 0.15); border: 1px solid rgba(56, 102, 141, 0.3); border-radius: 2px; - padding: 4px 8px; + padding: 6px 14px; } .card-type { - font-size: 7px; + font-size: 11px; font-weight: 500; margin-bottom: 2px; color: rgba(255, 255, 255, 0.9); @@ -243,7 +244,7 @@ if (props.data && props.data.length > 0) { } .card-description { - font-size: 5px; + font-size: 8px; color: rgba(255, 255, 255, 0.7); line-height: 1.4; } diff --git a/src/views/Dashboard/components/ScoreAssessment/Index.vue b/src/views/Dashboard/components/ScoreAssessment/Index.vue index 6e68f273..ecdfd2b3 100644 --- a/src/views/Dashboard/components/ScoreAssessment/Index.vue +++ b/src/views/Dashboard/components/ScoreAssessment/Index.vue @@ -192,14 +192,14 @@ if (props.data && props.data.length > 0) { } .header-title { - font-size: 8px; + font-size: 14px; margin-right: 2px; color: white; } .header-icon { - width: 12px; - height: 12px; + width: 18px; + height: 18px; background: url('@/assets/imgs/dashboard/pie.svg') no-repeat center center; background-size: 100% 100%; } @@ -218,11 +218,11 @@ if (props.data && props.data.length > 0) { flex: 0 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; - padding: 4px 2px; + padding: 10px 12px; } .header-cell { - font-size: 6px; + font-size: 11px; color: rgba(255, 255, 255, 0.85); font-weight: 500; display: flex; @@ -232,8 +232,8 @@ if (props.data && props.data.length > 0) { .required-star { background: url('@/assets/imgs/dashboard/icon-require.svg') no-repeat center center; background-size: 100% 100%; - width: 7px; - height: 7px; + width: 10px; + height: 10px; margin-right: 2px; } @@ -251,19 +251,19 @@ if (props.data && props.data.length > 0) { .score-table-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; - padding: 2px; + padding: 4px 12px; } .row-icon { background: url('@/assets/imgs/dashboard/icon-arrow.svg') no-repeat center center; background-size: 100% 100%; - width: 7px; - height: 7px; + width: 10px; + height: 10px; margin-right: 2px; } .row-cell { - font-size: 6px; + font-size: 11px; color: #ffffff; display: flex; align-items: center;