116 lines
4.5 KiB
Vue
116 lines
4.5 KiB
Vue
|
<template>
|
||
|
|
<div class="w-full mx-auto">
|
||
|
|
<div class="block lg:grid lg:grid-cols-4 lg:gap-1">
|
||
|
|
<a-card
|
||
|
|
style="height: 65px"
|
||
|
|
class="rounded-sm mt-3"
|
||
|
|
:body-style="{ padding: 0, height: '65px' }"
|
||
|
|
:bordered="false"
|
||
|
|
hoverable
|
||
|
|
>
|
||
|
|
<div class="flex justify-between h-full">
|
||
|
|
<div class="en-title bg-blue-600">NU</div>
|
||
|
|
<div class="w-full ml-3.5 flex justify-between items-center">
|
||
|
|
用户统计
|
||
|
|
<a-space size="large" class="mr-3">
|
||
|
|
<div class="text-right">
|
||
|
|
<div>总数</div>
|
||
|
|
<div>2</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<div>新增</div>
|
||
|
|
<div><icon-caret-up class="text-green-600" /> 15</div>
|
||
|
|
</div>
|
||
|
|
</a-space>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a-card>
|
||
|
|
<a-card
|
||
|
|
style="height: 65px"
|
||
|
|
class="rounded-sm mt-3 lg:ml-2"
|
||
|
|
:body-style="{ padding: 0, height: '65px' }"
|
||
|
|
:bordered="false"
|
||
|
|
hoverable
|
||
|
|
>
|
||
|
|
<div class="flex justify-between h-full">
|
||
|
|
<div class="en-title bg-red-600">NA</div>
|
||
|
|
<div class="w-full ml-3.5 flex justify-between items-center">
|
||
|
|
进行项目统计
|
||
|
|
<a-space size="large" class="mr-3">
|
||
|
|
<div class="text-right">
|
||
|
|
<div>总数</div>
|
||
|
|
<div>23</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<div>减少</div>
|
||
|
|
<div><icon-caret-down class="text-red-600" /> 2</div>
|
||
|
|
</div>
|
||
|
|
</a-space>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a-card>
|
||
|
|
<a-card
|
||
|
|
style="height: 65px"
|
||
|
|
class="rounded-sm mt-3 lg:ml-2"
|
||
|
|
:body-style="{ padding: 0, height: '65px' }"
|
||
|
|
:bordered="false"
|
||
|
|
hoverable
|
||
|
|
>
|
||
|
|
<div class="flex justify-between h-full">
|
||
|
|
<div class="en-title bg-pink-600">LC</div>
|
||
|
|
<div class="w-full ml-3.5 flex justify-between items-center">
|
||
|
|
项目总数
|
||
|
|
<a-space size="large" class="mr-3">
|
||
|
|
<div class="text-right">
|
||
|
|
<div>总数</div>
|
||
|
|
<div>234</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<div>新增</div>
|
||
|
|
<div><icon-caret-down class="text-red-600" /> 3</div>
|
||
|
|
</div>
|
||
|
|
</a-space>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a-card>
|
||
|
|
<a-card
|
||
|
|
style="height: 65px"
|
||
|
|
class="rounded-sm mt-3 lg:ml-2"
|
||
|
|
:body-style="{ padding: 0, height: '65px' }"
|
||
|
|
:bordered="false"
|
||
|
|
hoverable
|
||
|
|
>
|
||
|
|
<div class="flex justify-between h-full">
|
||
|
|
<div class="en-title bg-green-600">OC</div>
|
||
|
|
<div class="w-full ml-3.5 flex justify-between items-center">
|
||
|
|
提交项目总数
|
||
|
|
<a-space size="large" class="mr-3">
|
||
|
|
<div class="text-right">
|
||
|
|
<div>总数</div>
|
||
|
|
<div>45</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<div>新增</div>
|
||
|
|
<div><icon-caret-up class="text-green-600" /> 2</div>
|
||
|
|
</div>
|
||
|
|
</a-space>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.en-title {
|
||
|
|
width: 75px;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 65px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 1.3em;
|
||
|
|
|
||
|
|
border-radius: 2px 0 0 2px;
|
||
|
|
}
|
||
|
|
</style>
|