|
@@ -1,7 +1,13 @@
|
|
<script>
|
|
<script>
|
|
import {requireImg} from "@/utils/requireImg";
|
|
import {requireImg} from "@/utils/requireImg";
|
|
|
|
+import IsNumeric from "ant-design-vue/lib/_util/isNumeric";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
|
+ computed: {
|
|
|
|
+ IsNumeric() {
|
|
|
|
+ return IsNumeric
|
|
|
|
+ }
|
|
|
|
+ },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
itemWidth: 150,
|
|
itemWidth: 150,
|
|
@@ -48,17 +54,23 @@ export default {
|
|
>
|
|
>
|
|
<div class="coreData-item-title">
|
|
<div class="coreData-item-title">
|
|
<span>{{ ele.title }}</span>
|
|
<span>{{ ele.title }}</span>
|
|
- <div v-if="ele.type === 1 || ele.showStar" style="display: inline-block;background-color: transparent;float: right;margin-right: 2%">
|
|
|
|
|
|
+ <div v-if="ele.showStar" style="display: inline-block;background-color: transparent;float: right;margin-right: 5%">
|
|
<a-avatar :size="28" :src="requireImg('common/star.png')"></a-avatar>
|
|
<a-avatar :size="28" :src="requireImg('common/star.png')"></a-avatar>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-if="ele.type === 1">
|
|
<template v-if="ele.type === 1">
|
|
<div class="coreData-high-content">
|
|
<div class="coreData-high-content">
|
|
- <span>{{ ele.content }}</span>
|
|
|
|
|
|
+ <span :class="IsNumeric(ele.content)?'coreData-item-num':''">{{ ele.content }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<template v-else>
|
|
- <div class="coreData-item-num" v-html="ele.num"></div>
|
|
|
|
|
|
+ <div class="coreData-item-num" >
|
|
|
|
+ <span>{{ Math.abs(ele.num) }}</span>
|
|
|
|
+ <span class="anticon" v-if="ele.showTrendIcon" style="font-size: 14px;display: inline-block;margin-left: 3px">
|
|
|
|
+ <i-icon-park-outline-trending-up style="color: #FF2A00" v-if="Number(ele.num)>0" />
|
|
|
|
+ <i-icon-park-outline-trending-down style="color: #39E681" v-if="Number(ele.num)<0" />
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
<div class="coreData-item-unit" v-html="ele.unit"></div>
|
|
<div class="coreData-item-unit" v-html="ele.unit"></div>
|
|
<div class="coreData-item-history">
|
|
<div class="coreData-item-history">
|
|
<div class="coreData-item-historyDesc">
|
|
<div class="coreData-item-historyDesc">
|
|
@@ -72,8 +84,17 @@ export default {
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="coreData-item-historyNum" v-if="!isNaN(ele.historyNum)">
|
|
<div class="coreData-item-historyNum" v-if="!isNaN(ele.historyNum)">
|
|
- <span :style="{color: ele.historyNum>0?'red':ele.historyNum<0?'#39E681':''}">{{ Math.abs(ele.historyNum) }}%</span>
|
|
|
|
|
|
+ <span :style="{color: ele.historyNum>0?'red':ele.historyNum<0?'#39E681':''}">
|
|
|
|
+ {{ Math.abs(ele.historyNum) }}%
|
|
|
|
+ </span>
|
|
</div>
|
|
</div>
|
|
|
|
+ <span class="anticon"
|
|
|
|
+ v-if="!ele.hideTrendDesc"
|
|
|
|
+ :style="{color: ele.historyNum>0?'red':ele.historyNum<0?'#39E681':''}"
|
|
|
|
+ style="vertical-align: middle;font-size: 12px">
|
|
|
|
+ <a-icon type="caret-up" v-if="ele.historyNum > 0" />
|
|
|
|
+ <a-icon type="caret-down" v-if="ele.historyNum < 0" />
|
|
|
|
+ </span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
@@ -100,7 +121,7 @@ export default {
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
max-height: 60px;
|
|
max-height: 60px;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
- font-weight: bold;
|
|
|
|
|
|
+ font-family: PingFangSC-Bold,serif;
|
|
letter-spacing: 1px;
|
|
letter-spacing: 1px;
|
|
word-wrap:break-word;
|
|
word-wrap:break-word;
|
|
word-break:break-all;
|
|
word-break:break-all;
|
|
@@ -111,9 +132,11 @@ export default {
|
|
}
|
|
}
|
|
.coreData-item-num {
|
|
.coreData-item-num {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- font-size: 30px;
|
|
|
|
- font-weight: bolder;
|
|
|
|
- height: 50%;
|
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ color: #4D4D4D;
|
|
|
|
+ padding-top: 4%;
|
|
|
|
+ font-family: PingFangSC-Bold,serif;
|
|
|
|
+ height: 46%;
|
|
}
|
|
}
|
|
.coreData-item-unit {
|
|
.coreData-item-unit {
|
|
display: inline-block;
|
|
display: inline-block;
|