<!--
|
* @Author: zxq
|
* @Date: 2022-01-20 16:48:10
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-05-25 09:21:08
|
* @Description: Description
|
* @FilePath: \qyp-plat\src\components\fl-cardData.vue
|
-->
|
<template>
|
<div class="operational_indicator">
|
<div class='operational_indicator_box'>
|
<div class="grid-content bg-purple" v-for="item in dataList" :key='item.id' >
|
<div :class="{'svniconclass':true,'svniconclass_shadow':isShadow,'svniconclass_border':!isShadow}">
|
<svg
|
class="icon"
|
aria-hidden="true"
|
:style="item.style"
|
>
|
<use :xlink:href="'#icon-'+item.icon"></use>
|
</svg>
|
</div>
|
<div class="operational_indicator_data">
|
<div>
|
{{item.title}}
|
</div>
|
<div>
|
<span> {{item.num}} </span>
|
<svg
|
class="icon"
|
v-if='item.status==1'
|
aria-hidden="true"
|
style="width:16px;height:16px;"
|
>
|
<!-- 优异 -->
|
<use xlink:href="#icon-youyi"></use>
|
<!-- 预警 -->
|
</svg>
|
<svg
|
v-else-if="item.status==2"
|
class="icon"
|
aria-hidden="true"
|
style="width:16px;height:16px;"
|
>
|
<use xlink:href="#icon-zhengchang"></use>
|
</svg>
|
<svg
|
v-else-if="item.status==3"
|
class="icon"
|
aria-hidden="true"
|
style="width:16px;height:16px;"
|
>
|
<use xlink:href="#icon-yujing"></use>
|
</svg>
|
<svg
|
v-else-if="item.status==4"
|
class="icon"
|
aria-hidden="true"
|
style="width:16px;height:16px;"
|
>
|
<use xlink:href="#icon-fengxian"></use>
|
</svg>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props:{
|
dataList:{
|
type:Array,
|
default:()=>{
|
return []
|
}
|
},
|
isShadow:{
|
type:Boolean,
|
default:true
|
}
|
},
|
data() {
|
return {};
|
},
|
created() {},
|
mounted() {},
|
methods: {}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.operational_indicator{
|
.operational_indicator_box{
|
display: flex;
|
justify-content:space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
>div{
|
width: 24%;
|
}
|
}
|
.svniconclass{
|
width: 56px;
|
height: 56px;
|
background: #FFFFFF;
|
border-radius: 8px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-right: 20px;
|
}
|
.svniconclass_shadow{
|
box-shadow: 0px 6px 16px 0px rgba(0, 5, 224, 0.08);
|
}
|
.svniconclass_border{
|
border: 1px solid #E6E6E6;
|
}
|
.operational_indicator_data{
|
>div{
|
&:first-child{
|
font-size: 12px;
|
font-weight: 400;
|
color: #24508C;
|
opacity: 0.65;
|
margin-bottom: 10px;
|
|
}
|
&:last-child{
|
font-size: 24px;
|
font-weight: bold;
|
color: #0B2C5F;
|
display: flex;
|
align-items: center;
|
span{
|
display: inline-block;
|
margin-right: 8px;
|
}
|
}
|
}
|
}
|
.grid-content{
|
//width: 24%;
|
// flex: 1;
|
padding: 22px 0;
|
background: #FFFFFF;
|
border-radius: 16px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-bottom: 20px;
|
&:not(:nth-child(4n)){
|
// margin-right: 20px;
|
}
|
}
|
}
|
</style>
|
