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;