e
1 year ago
parent
a26d6582ee
commit
90cdd2ff63
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="iconCardWrap">
|
||||
<div class="riskLine" v-for="(line, index) in dataList" :key="index">
|
||||
<div class="riskItem" v-for="item in line" :key="item.name">
|
||||
<div class="riskItemLeft">
|
||||
<div class="icon">
|
||||
<img :src="item.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="riskItemRight">
|
||||
<div class="riskItemName">{{ item.name }}</div>
|
||||
<div class="riskItemValue">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.iconCardWrap {
|
||||
.riskLine {
|
||||
display: flex;
|
||||
.riskItem {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-right: 18px;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
height: vh(122);
|
||||
background: url("~@/assets/images/screen/error.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
.riskItemLeft {
|
||||
margin-right: 10px;
|
||||
.icon {
|
||||
width: vw(90);
|
||||
height: vh(70);
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.riskItemRight {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
.riskItemName {
|
||||
font-size: vh(18);
|
||||
color: #c4e5ff;
|
||||
line-height: vh(25);
|
||||
}
|
||||
.riskItemValue {
|
||||
font-size: vh(28);
|
||||
color: #ebf9ff;
|
||||
line-height: vh(36);
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0px 0px 9px #159aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="leftCardWrap">
|
||||
<div class="totalName">{{ dataObj.name }}</div>
|
||||
<div class="totalValue">
|
||||
<div class="item">
|
||||
<div class="value">
|
||||
{{ dataObj.value.toLocaleString() }}
|
||||
</div>
|
||||
<div class="label">个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.leftCardWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
margin-left: 3%;
|
||||
padding-left: 20px;
|
||||
flex: 1;
|
||||
height: vh(80);
|
||||
background: url("~@/assets/images/screen/zh.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.totalName {
|
||||
margin-bottom: 4px;
|
||||
font-size: vh(16);
|
||||
font-weight: 500;
|
||||
color: #d0deee;
|
||||
}
|
||||
.totalValue {
|
||||
display: flex;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-right: 20px;
|
||||
font-weight: 500;
|
||||
.label {
|
||||
font-size: vh(14);
|
||||
margin-right: 8px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.value {
|
||||
font-size: vh(22);
|
||||
margin-right: 4px;
|
||||
color: #80d9ff;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0px 0px 8px rgba(21, 154, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="rightCardWrap">
|
||||
<div class="totalName">增长趋势</div>
|
||||
<div class="totalValue">
|
||||
<div class="item">
|
||||
<div class="label">同比增长</div>
|
||||
<div class="value">{{ dataObj.tb }}%</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">环比增长</div>
|
||||
<div class="value">{{ dataObj.hb }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.rightCardWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
padding-left: 20px;
|
||||
margin-right: 5%;
|
||||
flex: 2;
|
||||
height: vh(80);
|
||||
background: url("~@/assets/images/screen/zz.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.totalName {
|
||||
margin-bottom: 4px;
|
||||
font-size: vh(16);
|
||||
font-weight: 500;
|
||||
color: #d0deee;
|
||||
}
|
||||
.totalValue {
|
||||
display: flex;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-right: 20px;
|
||||
font-weight: 500;
|
||||
.label {
|
||||
font-size: vh(14);
|
||||
margin-right: 8px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.value {
|
||||
font-size: vh(22);
|
||||
margin-right: 4px;
|
||||
color: #80fff0;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0px 0px 8px rgba(21, 154, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="riskTotalWrap">
|
||||
<div>{{ dataObj.name }}</div>
|
||||
<div class="totalText">10000</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.riskTotalWrap {
|
||||
margin-top: 46px;
|
||||
margin-left: 2%;
|
||||
width: 93%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: vh(46);
|
||||
background: url("~@/assets/images/screen/total.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: vh(18);
|
||||
font-weight: 500;
|
||||
color: #d0deee;
|
||||
.totalText {
|
||||
margin-left: 16px;
|
||||
font-size: vh(26);
|
||||
color: #ebf9ff;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 0px 0px 9px #159aff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue