142 lines
3.1 KiB
Vue
142 lines
3.1 KiB
Vue
<template>
|
|
<div class="target-box">
|
|
<div class="box-title">
|
|
<div>第三板指标</div>
|
|
</div>
|
|
<a-divider :margin="16" />
|
|
<a-row>
|
|
<a-col :xs="24" :sm="12" :lg="8" :xl="4" class="target-grade" :class="'animated-fade-up-0'">
|
|
<div class="target-grade-innerbox">
|
|
<div class="grade-value">{{ targetData.all.value }}</div>
|
|
<div class="target-title">{{ targetData.all.title }}</div>
|
|
</div>
|
|
</a-col>
|
|
<a-col
|
|
:xs="24"
|
|
:sm="12"
|
|
:lg="8"
|
|
:xl="4"
|
|
v-for="(item, index) in targetData.list"
|
|
:key="index"
|
|
class="target-other"
|
|
:class="'animated-fade-up-' + index"
|
|
>
|
|
<div class="target-other-innerbox">
|
|
<div>
|
|
<span class="other-value">{{ item.value }}</span>
|
|
<span>
|
|
<icon-play-arrow-fill class="target-up" v-if="item.type === 'up'" />
|
|
<icon-play-arrow-fill class="target-down" v-else />
|
|
</span>
|
|
</div>
|
|
<div class="target-title">{{ item.title }}</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const targetData = reactive({
|
|
all: {
|
|
title: "综合评分",
|
|
value: 9.9
|
|
},
|
|
list: [
|
|
{
|
|
title: "资产负债率",
|
|
value: "78%",
|
|
type: "up"
|
|
},
|
|
{
|
|
title: "毛利率",
|
|
value: "88%",
|
|
type: "down"
|
|
},
|
|
{
|
|
title: "营业收入增长率",
|
|
value: "58%",
|
|
type: "up"
|
|
},
|
|
{
|
|
title: "净利润增长率",
|
|
value: "76%",
|
|
type: "up"
|
|
},
|
|
{
|
|
title: "净资产收益率",
|
|
value: "76%",
|
|
type: "down"
|
|
}
|
|
]
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.target-box {
|
|
margin-top: $padding;
|
|
.target-grade {
|
|
width: 180px;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
&::before {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
content: "";
|
|
height: 30px;
|
|
width: 1px;
|
|
background: $color-border-2;
|
|
}
|
|
.target-grade-innerbox {
|
|
text-align: center;
|
|
.grade-value {
|
|
font-family: "AliFangYuanTi";
|
|
font-size: $font-size-title-2;
|
|
font-weight: bold;
|
|
color: $color-danger;
|
|
}
|
|
}
|
|
}
|
|
.target-other {
|
|
width: 180px;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.target-other-innerbox {
|
|
width: 100px;
|
|
}
|
|
.other-value {
|
|
font-family: "AliFangYuanTi";
|
|
font-weight: bold;
|
|
margin-right: $margin-text;
|
|
}
|
|
.target-up {
|
|
transform: rotate(-90deg);
|
|
color: $color-danger;
|
|
}
|
|
.target-down {
|
|
transform: rotate(90deg);
|
|
color: $color-success;
|
|
}
|
|
}
|
|
.target-title {
|
|
margin-top: $margin-text;
|
|
color: $color-text-3;
|
|
}
|
|
}
|
|
|
|
.box-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: $font-size-body-3;
|
|
color: $color-text-1;
|
|
}
|
|
</style>
|