大屏页面2

This commit is contained in:
zzyuan 2025-05-16 10:54:15 +08:00
parent cf134263a1
commit 64b41c7f15
1 changed files with 18 additions and 49 deletions

View File

@ -2,15 +2,13 @@
<el-row :gutter="36" class="panel-group"> <el-row :gutter="36" class="panel-group">
<el-col :span="4" class="card-panel-col"> <el-col :span="4" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<!-- <div class="card-panel-icon-wrapper">
</div> -->
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
今日食堂营业额 今日食堂营业额
</div> </div>
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" /> <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
</div> </div>
</div> </div>
</el-col> </el-col>
@ -54,65 +52,36 @@ export default {
border-color: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05);
padding: 20px; padding: 20px;
&:hover { // &:hover {
// .card-panel-icon-wrapper { // .icon-message {
// color: #fff; // background: #36a3f7;
// } // }
// }
// .icon-message {
// background: #36a3f7;
// }
// .icon-money {
// background: #f4516c;
// }
// .icon-shopping {
// background: #34bfa3
// }
}
// .icon-message { // .icon-message {
// color: #36a3f7; // color: #36a3f7;
// } // }
// .icon-money {
// color: #f4516c;
// }
// .icon-shopping {
// color: #34bfa3
// }
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description { .card-panel-description {
font-weight: bold; font-weight: bold;
margin: 26px; margin: 0px;
margin-left: 0px; margin-left: 0px;
.card-panel-text { .card-panel-text {
line-height: 18px; line-height: 18px;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.5);
font-size: 16px; font-size: 16px;
margin-bottom: 12px; margin-bottom: 15px;
} }
.card-panel-num { .card-panel-num {
font-size: 20px; font-size: 24px;
color: #000;
} }
} }
} }
} }
</style> </style>