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.
120 lines
2.5 KiB
120 lines
2.5 KiB
<template>
|
|
<div class="header_wrap">
|
|
<div v-for="(item, index) in data" :key="index" class="header_item">
|
|
<img :src="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"></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: "/src/assets/images/taskCount.png",
|
|
title: "任务总数",
|
|
count: 6399,
|
|
},
|
|
{
|
|
link: "/src/assets/images/nocheck.png",
|
|
title: "待审批",
|
|
count: 6290,
|
|
},
|
|
{
|
|
link: "/src/assets/images/check.png",
|
|
title: "已审批",
|
|
count: 109,
|
|
},
|
|
{
|
|
link: "/src/assets/images/status.png",
|
|
title: "通过",
|
|
count: 3290,
|
|
color: "#03c984",
|
|
},
|
|
{
|
|
link: "/src/assets/images/status.png",
|
|
title: "不通过",
|
|
count: 3000,
|
|
color: "#ff8b8b",
|
|
},
|
|
{
|
|
link: "/src/assets/images/pic.png",
|
|
title: "图片重复数",
|
|
count: 230,
|
|
},
|
|
{
|
|
link: "/src/assets/images/xiaojie.png",
|
|
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 3.125rem;
|
|
background: #fff;
|
|
margin-bottom: 1rem;
|
|
|
|
.header_item {
|
|
width: 10%;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
width: 3.125rem;
|
|
height: 3.125rem;
|
|
}
|
|
.data_wrap {
|
|
.data_title {
|
|
font-size: 1.25rem;
|
|
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
|
|
font-weight: Bold;
|
|
text-align: left;
|
|
color: #202020;
|
|
line-height: 1.4375rem;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
.data_content {
|
|
opacity: 0.6;
|
|
font-size: .875rem;
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
font-weight: Regular;
|
|
text-align: center;
|
|
color: #202020;
|
|
line-height: 1rem;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|