153 lines
4.1 KiB
Vue
153 lines
4.1 KiB
Vue
<template>
|
|
<div class="header__item">
|
|
<header>
|
|
<div class="icon">
|
|
<img src="@/assets/icons/order.svg">
|
|
</div>
|
|
<p class="title">今日新增订单</p>
|
|
</header>
|
|
<footer>
|
|
<p class="count">15单</p>
|
|
<p class="compare__text">
|
|
<span style="color:#f40">10%↑</span>
|
|
<!-- <span style="color:#0da777">↓</span> -->
|
|
<span>相较于昨日</span>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
<div class="header__item">
|
|
<header>
|
|
<div class="icon">
|
|
<img src="@/assets/icons/order.svg">
|
|
</div>
|
|
<p class="title">今日新增陪玩</p>
|
|
</header>
|
|
<footer>
|
|
<p class="count">12人</p>
|
|
<p class="compare__text">
|
|
<span style="color:#f40">2%↑</span>
|
|
<!-- <span style="color:#0da777">↓</span> -->
|
|
<span>相较于昨日</span>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
<div class="header__item">
|
|
<header>
|
|
<div class="icon">
|
|
<img src="@/assets/icons/money.svg">
|
|
</div>
|
|
<p class="title">今日订单金额</p>
|
|
</header>
|
|
<footer>
|
|
<p class="count">￥1,238</p>
|
|
<p class="compare__text">
|
|
<span style="color:#f40">10%↑</span>
|
|
<!-- <span style="color:#0da777">↓</span> -->
|
|
<span>相较于昨日</span>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
<div class="header__item">
|
|
<header>
|
|
<div class="icon">
|
|
<img src="@/assets/icons/order.svg">
|
|
</div>
|
|
<p class="title">今日活跃代理数</p>
|
|
</header>
|
|
<footer>
|
|
<p class="count">8人</p>
|
|
<p class="compare__text">
|
|
<!-- <span style="color:#f40">10%↑</span> -->
|
|
<span style="color:#0da777">5%↓</span>
|
|
<span>相较于昨日</span>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
<div class="header__item">
|
|
<header>
|
|
<div class="icon">
|
|
<img src="@/assets/icons/order.svg">
|
|
</div>
|
|
<p class="title">本月订单总数</p>
|
|
</header>
|
|
<footer>
|
|
<p class="count">1,558单</p>
|
|
<p class="compare__text">
|
|
<span style="color:#f40">2%↑</span>
|
|
<!-- <span style="color:#0da777">↓</span> -->
|
|
<span>相较于上月</span>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
</script>
|
|
<style scoped lang='scss'>
|
|
$colors: #00b882, #4d76eb, #db4c4d, #dc6333, #897dd7;
|
|
.header__item {
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
height: 100px;
|
|
padding: 0 12px;
|
|
|
|
// Loop through each item and apply colors
|
|
@for $i from 1 through 5 {
|
|
&:nth-child(#{$i}) {
|
|
border-right: 3px solid nth($colors, $i);
|
|
|
|
header .icon {
|
|
background: nth($colors, $i);
|
|
// Create a lighter version of the color for box-shadow
|
|
box-shadow: 0 2px 8px rgba(nth($colors, $i), 0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
header {
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border-bottom: 1px solid $dashLineColor;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $titleTextColor;
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
width: 25px;
|
|
height: 25px;
|
|
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.count {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.compare__text {
|
|
font-size: 11px;
|
|
color: #a7a5a6;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
</style> |