66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="container flex items-center justify-start">
|
||
|
|
<img class="icon" src="@/assets/polygon40@3x.png" alt="" />
|
||
|
|
<div class="title text-white">项目总数</div>
|
||
|
|
<div class="counting-board flex justify-between">
|
||
|
|
<div class="num">1</div>
|
||
|
|
<div class="num">0</div>
|
||
|
|
<div class="num">0</div>
|
||
|
|
<div class="num">0</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup></script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.container {
|
||
|
|
width: 465px;
|
||
|
|
height: 90px;
|
||
|
|
background-image: linear-gradient(
|
||
|
|
180deg,
|
||
|
|
rgba(4, 53, 99, 0.6) 0%,
|
||
|
|
rgba(4, 53, 99, 0.19) 100%
|
||
|
|
);
|
||
|
|
.icon {
|
||
|
|
margin-left: 16px;
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
margin-left: 10px;
|
||
|
|
font-family: PingFangSC-Regular;
|
||
|
|
font-size: 20px;
|
||
|
|
color: #ffffff;
|
||
|
|
letter-spacing: 0;
|
||
|
|
line-height: 30px;
|
||
|
|
text-shadow: 0 0 9px #158eff;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.counting-board {
|
||
|
|
margin-left: 30px;
|
||
|
|
.num {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 48px;
|
||
|
|
height: 56px;
|
||
|
|
opacity: 0.72;
|
||
|
|
background-image: linear-gradient(
|
||
|
|
180deg,
|
||
|
|
rgba(26, 101, 171, 0.88) 0%,
|
||
|
|
rgba(26, 101, 171, 0.48) 47%,
|
||
|
|
#1a65ab 100%
|
||
|
|
);
|
||
|
|
font-family: Impact;
|
||
|
|
font-size: 38px;
|
||
|
|
color: #f2f6fa;
|
||
|
|
letter-spacing: 0;
|
||
|
|
line-height: 30px;
|
||
|
|
font-weight: 900;
|
||
|
|
&:not(:last-child) {
|
||
|
|
margin-right: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|