<template>
|
<div class="data-board-table">
|
<div class="data-board-table-item title">
|
<div class="data-board-table-item-icon">排名</div>
|
<div class="data-board-table-item-content">企业名</div>
|
<div class="data-board-table-item-num">{{ customerName }}</div>
|
</div>
|
<div
|
v-for="(item, index) in props.tableData"
|
:key="index"
|
class="data-board-table-item"
|
:class="{ isOdd: index % 2 === 0 }"
|
>
|
<div class="data-board-table-item-icon">
|
<img
|
class="data-board-table-item-icon-img"
|
v-if="index < 3"
|
:src="iconList[index]"
|
alt=""
|
/>
|
<span class="data-board-table-item-icon-index" v-else>{{ index + 1 }}</span>
|
</div>
|
<div class="data-board-table-item-content ellipsis">{{ item.name }}</div>
|
<div class="data-board-table-item-num">
|
{{ `${isMoney ? toThousand(item.value) : item.value}${unit}` }}
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import DataBoardTableIcon1 from '@/assets/dataBoard/data-board-table-icon1.png';
|
import DataBoardTableIcon2 from '@/assets/dataBoard/data-board-table-icon2.png';
|
import DataBoardTableIcon3 from '@/assets/dataBoard/data-board-table-icon3.png';
|
import { toThousand } from '@/utils';
|
|
defineOptions({
|
name: 'DataBoardTableView',
|
});
|
|
type Props = {
|
tableData?: any[];
|
unit: string;
|
isMoney?: boolean;
|
customerName: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
isMoney: false,
|
});
|
|
const iconList = [DataBoardTableIcon1, DataBoardTableIcon2, DataBoardTableIcon3];
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.data-board-table {
|
display: flex;
|
padding: 0 14px 11px;
|
flex-direction: column;
|
min-height: 270px;
|
|
.data-board-table-item {
|
display: grid;
|
align-items: center;
|
height: 37px;
|
font-size: 14px;
|
color: #ffffff;
|
background-position: bottom center;
|
background-repeat: no-repeat;
|
background-size: 100% 2px;
|
grid-template-columns: 60px 3fr 2fr;
|
background-image: linear-gradient(
|
to right,
|
rgba(150, 150, 150, 0),
|
rgb(121, 121, 121),
|
rgba(150, 150, 150, 0)
|
);
|
|
&.title {
|
font-size: 14px;
|
color: #9d9d9d;
|
}
|
|
&.isOdd {
|
background-color: #141c2f;
|
}
|
|
.data-board-table-item-icon {
|
display: flex;
|
justify-content: center;
|
|
.data-board-table-item-icon-img {
|
width: 24px;
|
height: 28px;
|
}
|
|
.data-board-table-item-icon-index {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 34px;
|
height: 16px;
|
font-size: 14px;
|
font-family: YouSheBiaoTiHei Regular;
|
color: #ffffff;
|
background-color: #3e4b68;
|
transform: skewX(-30deg);
|
}
|
}
|
|
.data-board-table-item-num {
|
text-align: right;
|
}
|
}
|
}
|
</style>
|
