xzzn/emsfront
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提取公共的card样式

Browse Source
This commit is contained in:
白菜
2025-06-17 00:46:20 +08:00
parent da100a4fa7
commit 9174e8b6aa
8 changed files with 40 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/styles/common.scss
View File

@ -18,3 +18,25 @@
.ems-content-container-padding{
padding: 24px;
}
//card通用样式 标题、body
.common-card-container{
.el-card__header{
padding:14px;
border-bottom: none;
font-size: 12px;
background: #F1F5FB ;
.card-title{
font-weight: 500;
color:#333333;
}
.el-button--text{
color: #666666;
}
}
}
.common-card-container-body-no-padding{
.el-card__body{
padding:0;
}
}

5
src/components/Ems/ZdBaseInfo/index.vue
View File

@ -2,7 +2,7 @@
<!--首页、地图站点页面顶部信息方块-->
<template>
<el-row type="flex" >
<el-card shadow="hover" class="card" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
<el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
<div class="info">{{ item.title }}</div>
<div class="num">{{item.num}}</div>
</el-card>
@ -46,9 +46,6 @@ export default {
margin-right: 27px;
border-bottom: 4px solid transparent;
text-align: center;
::v-deep .el-card__body{
padding:0;
}
.info{
color: #666666;
line-height: 14px;

27
src/views/ems/home/DlzbChart.vue
View File

@ -1,36 +1,15 @@
<template>
<el-card shadow="always" class="chart-card-container">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="chart-title">电量指标</span>
<span class="card-title">电量指标</span>
<el-button style="float: right; padding: 3px 0" type="text" size="small">按年</el-button>
</div>
<div style="height: 360px" id="dlzbChart"/>
</el-card>
</template>
<style scoped lang="scss">
.chart-card-container{
::v-deep {
.el-card__header{
padding:14px;
border-bottom: none;
font-size: 12px;
background: #F1F5FB ;
.chart-title{
font-weight: 500;
color:#333333;
}
.el-button--text{
color: #666666;
}
}
.el-card__body{
padding:0;
}
}
}
</style>
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

27
src/views/ems/home/GjdjfbChart.vue
View File

@ -1,35 +1,14 @@
<template>
<el-card shadow="always" class="chart-card-container">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="chart-title">告警等级分布</span>
<span class="card-title">告警等级分布</span>
</div>
<div style="height: 360px" id="gjdjfbChart"/>
</el-card>
</template>
<style scoped lang="scss">
.chart-card-container{
::v-deep {
.el-card__header{
padding:14px;
border-bottom: none;
font-size: 12px;
background: #F1F5FB ;
.chart-title{
font-weight: 500;
color:#333333;
}
.el-button--text{
color: #666666;
}
}
.el-card__body{
padding:0;
}
}
}
</style>
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

27
src/views/ems/home/GjqsChart.vue
View File

@ -1,35 +1,14 @@
<template>
<el-card shadow="always" class="chart-card-container">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="chart-title">告警趋势</span>
<span class="card-title">告警趋势</span>
</div>
<div style="height: 360px" id="gjqsChart"/>
</el-card>
</template>
<style scoped lang="scss">
.chart-card-container{
::v-deep {
.el-card__header{
padding:14px;
border-bottom: none;
font-size: 12px;
background: #F1F5FB ;
.chart-title{
font-weight: 500;
color:#333333;
}
.el-button--text{
color: #666666;
}
}
.el-card__body{
padding:0;
}
}
}
</style>
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

27
src/views/ems/home/SbgjzbChart.vue
View File

@ -1,35 +1,14 @@
<template>
<el-card shadow="always" class="chart-card-container">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="chart-title">设备告警占比</span>
<span class="card-title">设备告警占比</span>
</div>
<div style="height: 360px" id="sbgjzbChart"/>
</el-card>
</template>
<style scoped lang="scss">
.chart-card-container{
::v-deep {
.el-card__header{
padding:14px;
border-bottom: none;
font-size: 12px;
background: #F1F5FB ;
.chart-title{
font-weight: 500;
color:#333333;
}
.el-button--text{
color: #666666;
}
}
.el-card__body{
padding:0;
}
}
}
</style>
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

27
src/views/ems/home/XtxlChart.vue
View File

@ -1,35 +1,14 @@
<template>
<el-card shadow="always" class="chart-card-container">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="chart-title">系统效率</span>
<span class="card-title">系统效率</span>
</div>
<div style="height: 360px" id="xtxlChart"/>
</el-card>
</template>
<style scoped lang="scss">
.chart-card-container{
::v-deep {
.el-card__header{
padding:14px;
border-bottom: none;
font-size: 12px;
background: #F1F5FB ;
.chart-title{
font-weight: 500;
color:#333333;
}
.el-button--text{
color: #666666;
}
}
.el-card__body{
padding:0;
}
}
}
</style>
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

11
src/views/ems/zddt/index.vue
View File

@ -6,9 +6,9 @@
<div class="zd-msg-container">
<div class="zd-msg-top">
<zd-select></zd-select>
<el-card class="single-zd-detail-container">
<el-card class="common-card-container">
<div slot="header">
<span class="header-title">基本信息</span>
<span class="card-title">基本信息</span>
<el-button style="float: right; padding: 3px 0" type="text" size="small">查看详情</el-button>
</div>
<div class="single-zd-name">上海电动工具所站</div>
@ -92,13 +92,6 @@ export default {
.zd-msg-container{
width: 500px;
padding: 24px;
::v-deep .el-card__header{
background: #F1F5FB;
border-bottom: none;
.header-title{
font-weight: 500;
}
}
.single-zd-name{
font-weight: 500;
line-height: 23px;