You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
2.5 KiB
125 lines
2.5 KiB
<template>
|
|
<div class="header_wrap">
|
|
<div v-for="(item, index) in data" :key="index" class="header_item">
|
|
<SvgIcon :name="item.link"/>
|
|
<div class="data_wrap">
|
|
<div class="data_title" :style="hasColor?`color:${item.color || ''}`:''">{{ item.count }}</div>
|
|
<div class="data_content">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
<SvgIcon size="14px" style="cursor: pointer" name="setting" class="settingSvg"></SvgIcon>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { defineProps, onMounted } from "vue";
|
|
|
|
defineProps({
|
|
hasColor: {
|
|
type: Boolean,
|
|
default: () => false,
|
|
},
|
|
});
|
|
const initRem = () => {
|
|
const designWidth = 1440;
|
|
const rempPx = 16;
|
|
const scale = window.innerWidth / designWidth;
|
|
document.documentElement.style.fontSize = scale * rempPx + "px";
|
|
};
|
|
onMounted(()=>{
|
|
initRem();
|
|
})
|
|
|
|
const data = [
|
|
{
|
|
link: "count",
|
|
title: "任务总数",
|
|
count: 6399,
|
|
},
|
|
{
|
|
link: "wait",
|
|
title: "待审批",
|
|
count: 6290,
|
|
},
|
|
{
|
|
link: "done",
|
|
title: "已审批",
|
|
count: 109,
|
|
},
|
|
{
|
|
link: "resolve",
|
|
title: "通过",
|
|
count: 3290,
|
|
color: "#03c984",
|
|
},
|
|
{
|
|
link: "reject",
|
|
title: "不通过",
|
|
count: 3000,
|
|
color: "#ff8b8b",
|
|
},
|
|
{
|
|
link: "reimg",
|
|
title: "图片重复数",
|
|
count: 230,
|
|
},
|
|
{
|
|
link: "breakcount",
|
|
title: "小结重复数",
|
|
count: 365,
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.header_wrap {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1rem 1rem 3.125rem;
|
|
background: #fff;
|
|
margin-bottom: 1rem;
|
|
|
|
.header_item {
|
|
min-width: 10%;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
svg {
|
|
width: 2.75rem !important;
|
|
height: 2.75rem !important;
|
|
}
|
|
.data_wrap {
|
|
margin-left: .8125rem;
|
|
.data_title {
|
|
font-size: 1.125rem;
|
|
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
|
|
font-weight: 900;
|
|
text-align: left;
|
|
color: #202020;
|
|
line-height: 1.4375rem;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
.data_content {
|
|
opacity: 0.6;
|
|
font-size: .75rem;
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: #202020;
|
|
line-height: 1rem;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.settingSvg{
|
|
width: 1rem !important;
|
|
height: 1rem !important;
|
|
}
|
|
</style>
|