tangweijie/xlcp-frontend
1
0
Fork 0
Code Issues 6 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

样式 #10

Merged
tangweijie merged 3 commits from lm/fix/databoard into master 2026-01-22 21:13:32 +08:00
Conversation 0 Commits 3 Files Changed 6 +40 -35
6 changed files with 40 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/Dashboard/Index.vue
View File

@ -17,11 +17,11 @@
</div> </div>
<!-- 左侧第二个卡片 --> <!-- 左侧第二个卡片 -->
<div class="card-row"> <div class="card-row">
<div class="info-card-item"> <div class="info-card-item center-right-card-item">
<div class="card-number">{{ centerLeftData.middle.left.value }}</div> <div class="card-number">{{ centerLeftData.middle.left.value }}</div>
<div class="card-label">{{ centerLeftData.middle.left.label }}</div> <div class="card-label">{{ centerLeftData.middle.left.label }}</div>
</div> </div>
<div class="info-card-item"> <div class="info-card-item center-right-card-item">
<div class="card-number">{{ centerLeftData.middle.right.value }}</div> <div class="card-number">{{ centerLeftData.middle.right.value }}</div>
<div class="card-label">{{ centerLeftData.middle.right.label }}</div> <div class="card-label">{{ centerLeftData.middle.right.label }}</div>
</div> </div>
@ -38,11 +38,11 @@
</div> </div>
<!-- 右侧第二个卡片 --> <!-- 右侧第二个卡片 -->
<div class="card-row"> <div class="card-row">
<div class="info-card-item"> <div class="info-card-item center-right-card-item">
<div class="card-number">{{ centerRightData.middle.left.value }}</div> <div class="card-number">{{ centerRightData.middle.left.value }}</div>
<div class="card-label">{{ centerRightData.middle.left.label }}</div> <div class="card-label">{{ centerRightData.middle.left.label }}</div>
</div> </div>
<div class="info-card-item"> <div class="info-card-item center-right-card-item">
<div class="card-number">{{ centerRightData.middle.right.value }}</div> <div class="card-number">{{ centerRightData.middle.right.value }}</div>
<div class="card-label">{{ centerRightData.middle.right.label }}</div> <div class="card-label">{{ centerRightData.middle.right.label }}</div>
</div> </div>
@ -545,14 +545,14 @@ onUnmounted(() => {
width: 30%; width: 30%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 20px;
padding: 16px 0 10px; padding: 16px 0 10px;
justify-content: space-between; justify-content: space-between;
} }
.dashboard-content-top-center-center { .dashboard-content-top-center-center {
width: 40%; width: 40%;
height: 100%; height: 220px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -563,8 +563,9 @@ onUnmounted(() => {
// 信息卡片通用样式 // 信息卡片通用样式
.info-card-item { .info-card-item {
width: 100%;
height: 50%;
border-radius: 4px; border-radius: 4px;
padding: 12px 16px;
box-shadow: inset 0 0 15px 0 #2b4183; box-shadow: inset 0 0 15px 0 #2b4183;
border: 1px solid #2b4183; border: 1px solid #2b4183;
display: flex; display: flex;
@ -572,6 +573,9 @@ onUnmounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
&.center-right-card-item {
height: 100%;
}
} }
.card-row { .card-row {
@ -579,6 +583,7 @@ onUnmounted(() => {
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
width: 100%; width: 100%;
height: 50%;
} }
.card-number { .card-number {
@ -637,10 +642,10 @@ onUnmounted(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.dashboard-content-bottom-right-title { .dashboard-content-bottom-right-title {
font-size: 18px; font-size: 2vh;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
margin-bottom: 10px; margin-bottom: 1.5vh;
} }
} }
</style> </style>

4
src/views/Dashboard/components/BarChart.vue
View File

@ -280,14 +280,14 @@ watch(
min-width: 100px; min-width: 100px;
.card-value { .card-value {
font-size: 14px; font-size: 1.6vh;
font-weight: bold; font-weight: bold;
color: #00d4ff; color: #00d4ff;
margin-bottom: 4px; margin-bottom: 4px;
} }
.card-label { .card-label {
font-size: 10px; font-size: 1.5vh;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
} }

12
src/views/Dashboard/components/ConsumptionRecords/Index.vue
View File

@ -155,7 +155,7 @@ watch(
.consumption-records-title { .consumption-records-title {
text-align: center; text-align: center;
font-size: 14px; font-size: 2vh;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
@ -186,7 +186,7 @@ watch(
} }
.header-title { .header-title {
font-size: 14px; font-size: 1.95vh;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
@ -218,12 +218,12 @@ watch(
} }
.record-date { .record-date {
font-size: 10px; font-size: 1.4vh;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
.record-name { .record-name {
font-size: 10px; font-size: 1.4vh;
font-weight: 500; font-weight: 500;
color: #a855f7; color: #a855f7;
@ -253,12 +253,12 @@ watch(
} }
.record-category { .record-category {
font-size: 10px; font-size: 1.4vh;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
.record-amount { .record-amount {
font-size: 10px; font-size: 1.4vh;
font-weight: 500; font-weight: 500;
color: white; color: white;
text-align: right; text-align: right;

20
src/views/Dashboard/components/InfoCard/Index.vue
View File

@ -168,15 +168,15 @@ const props = withDefaults(
} }
.header-title { .header-title {
font-size: 14px; font-size: 2vh;
margin-right: 6px; margin-right: 6px;
color: white; color: white;
font-weight: bold; font-weight: bold;
} }
.header-icon { .header-icon {
width: 18px; width: 3vh;
height: 18px; height: 3vh;
background: url('@/assets/imgs/dashboard/pie.svg') no-repeat center center; background: url('@/assets/imgs/dashboard/pie.svg') no-repeat center center;
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -194,7 +194,7 @@ const props = withDefaults(
background: #3f6973; background: #3f6973;
border: 1px solid rgba(56, 102, 141, 0.5); border: 1px solid rgba(56, 102, 141, 0.5);
border-radius: 4px; border-radius: 4px;
font-size: 10px; font-size: 1.5vh;
color: #d8f0ff; color: #d8f0ff;
white-space: nowrap; white-space: nowrap;
} }
@ -206,7 +206,7 @@ const props = withDefaults(
} }
.records-content-title { .records-content-title {
font-size: 10px; font-size: 1.5vh;
color: #d8f0ff; color: #d8f0ff;
font-weight: bold; font-weight: bold;
} }
@ -214,13 +214,13 @@ const props = withDefaults(
.info-list { .info-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 0.8vh;
} }
.info-item { .info-item {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 10px; font-size: 1.5vh;
color: white; color: white;
} }
@ -239,7 +239,7 @@ const props = withDefaults(
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
height: 162px; height: 25.5vh;
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
@ -283,14 +283,14 @@ const props = withDefaults(
} }
.record-date { .record-date {
font-size: 10px; font-size: 1.5vh;
font-weight: 600; font-weight: 600;
color: white; color: white;
margin-bottom: 2px; margin-bottom: 2px;
} }
.record-text { .record-text {
font-size: 10px; font-size: 1.5vh;
color: #d8f0ff; color: #d8f0ff;
line-height: 1.5; line-height: 1.5;
} }

6
src/views/Dashboard/components/RecentRewardsPunishments/Index.vue
View File

@ -113,7 +113,7 @@ watch(
} }
.header-title { .header-title {
font-size: 16px; font-size: 2vh;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
@ -210,7 +210,7 @@ watch(
} }
.card-type { .card-type {
font-size: 13px; font-size: 1.8vh;
font-weight: 500; font-weight: 500;
margin-bottom: 4px; margin-bottom: 4px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
@ -225,7 +225,7 @@ watch(
} }
.card-description { .card-description {
font-size: 10px; font-size: 1.4vh;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
line-height: 1.5; line-height: 1.5;
} }

10
src/views/Dashboard/components/ScoreAssessment/Index.vue
View File

@ -107,15 +107,15 @@ watch(
} }
.header-title { .header-title {
font-size: 14px; font-size: 2vh;
margin-right: 6px; margin-right: 6px;
color: white; color: white;
font-weight: bold; font-weight: bold;
} }
.header-icon { .header-icon {
width: 18px; width: 3vh;
height: 18px; height: 3vh;
background: url('@/assets/imgs/dashboard/pie.svg') no-repeat center center; background: url('@/assets/imgs/dashboard/pie.svg') no-repeat center center;
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -138,7 +138,7 @@ watch(
} }
.header-cell { .header-cell {
font-size: 11px; font-size: 1.5vh;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
font-weight: 500; font-weight: 500;
display: flex; display: flex;
@ -179,7 +179,7 @@ watch(
} }
.row-cell { .row-cell {
font-size: 11px; font-size: 1.5vh;
color: #ffffff; color: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;