CSS数据面板
Posted 嘻嘻的妙妙屋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS数据面板相关的知识，希望对你有一定的参考价值。
数据面板
效果
index.vue
<template>
<div class="container">
<div class="card">
<div class="header">
<div class="title">订单统计</div>
<div class="detail">
<el-tabs
class="mid"
v-model="currentDate"
@tab-click="dateGroupChange"
>
<el-tab-pane
v-for="item in Object.keys(dateMap)"
:key="item"
:label="dateMap[item]"
:name="item"
></el-tab-pane>
</el-tabs>
</div>
</div>
<div class="content">
<div class="list">
<div class="item">
<div class="text1">
充值订单数
<el-tooltip
class="tooltip"
effect="dark"
content="周期范围内有流向的订单数"
placement="right"
>
<i class="icon-question"></i>
</el-tooltip>
</div>
<p class="text2">
orderCount
</p>
<CompareText
:result="2"
:unit="''"
:target="dateMap[currentDate]"
/>
<p class="unit">单位：个</p>
</div>
<div class="item">
<div class="text1">
订单流向金额
<el-tooltip
class="tooltip"
effect="dark"
content="周期范围内有订单流向的消费金额"
placement="right"
>
<i class="icon-question"></i>
</el-tooltip>
</div>
<p class="text2">
flowCount
</p>
<CompareText
:result="0.5"
:unit="''"
:target="dateMap[currentDate]"
/>
<p class="unit">单位：元</p>
</div>
<div class="item">
<div class="text1">
订单消费金额占比总消费金额
<el-tooltip
class="tooltip"
effect="dark"
content="周期范围内有订单流向的消费金额在总消费金额的占比"
placement="right"
>
<i class="icon-question"></i>
</el-tooltip>
</div>
<p class="text2">
proportion + '%'
</p>
<CompareText
:result="-20"
:unit="'%'"
:target="dateMap[currentDate]"
/>
<p class="unit">单位：%</p>
</div>
<div class="item">
<div class="title">
<div class="text1">
userCountTitle[userCountIndex]
<el-tooltip
class="tooltip"
effect="dark"
:content="userType === 'user' ? '订单用户数：周期范围内有订单的用户数' : '订单管理员：周期范围内有订单消费在店中的店家数'"
placement="right"
>
<i class="icon-question"></i>
</el-tooltip>
</div>
<div class="selectOption">
<div :class="userType === 'user' ? 'user active' : 'user'" @click="changeUserType('user')">用户</div>
<div :class="userType === 'manager' ? 'manager active' : 'manager'" @click="changeUserType('manager')">管理员</div>
</div>
</div>
<p class="text2">
userCount
</p>
<CompareText
:result="1"
:unit="''"
:target="dateMap[currentDate]"
/>
<p class="unit">单位：个</p>
</div>
</div>
</div>
<div class="footer">
数据周期：
startTime
至
endTime
</div>
</div>
</div>
</template>
<style lang="scss" src="./index.scss" scoped></style>
<script src="./index.js"></script>
index.js
// 订单统计-数据面板
import CompareText from '../compareText/index.vue'
const dateMap =
week: '近7日',
halfMonth: '近15日',
wholeMonth: '近30日'
const userCountTitle =
0: '订单用户数',
1: '订单管理员数'
export default
name: 'panel',
components:
CompareText
,
data ()
return
dateMap: dateMap,
userCountTitle: userCountTitle,
userCountIndex: 0,
currentDate: 'week',
orderCount: 26,
flowCount: 51.2,
proportion: 30,
userCount: 2,
startTime: '2022-06-07',
endTime: '2022-06-14',
userType: 'user'
,
computed: ,
watch: ,
mounted () ,
methods:
// 切换数据查询时间
dateGroupChange (target)
this.currentDate = target.name
,
// 切换用户/管理员
changeUserType (val)
this.userType = val
if (this.userType === 'manager')
this.userCountIndex = 1
else
this.userCountIndex = 0
index.scss
.container
margin-bottom: 16px;
.tooltip
height: 16px;
width: 16px;
.icon-question
margin-left: 5px;
.text1
font-size: 16px;
color: rgba(17, 17, 0, 0.65);
.text2
text-align: center;
font-family: $DINGfont;
margin-top: 20px;
font-size: 48px;
color: rgba(0, 0, 0, 0.85);
.content
overflow: hidden;
.list
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.item
position: relative;
flex: 1;
min-width: 118px;
height: 180px;
padding: 16px 12px;
border-radius: 8px;
border: 0.5px solid #dcdee2;
.title
display: flex;
justify-content: space-between;
margin-bottom: -27px;
&:hover
border: 0.5px solid #e8eaec;
box-shadow: 0px 6px 16px -8px rgba(136, 161, 210, 0.08),
0px 9px 28px rgba(136, 161, 210, 0.05),
0px 12px 48px 16px rgba(136, 161, 210, 0.03);
.unit
margin-top: 10px;
font-size: 14px;
text-align: right;
color: rgba(0, 0, 0, 0.55);
.item + .item
margin-left: 15px;
.footer
color: rgba(0, 0, 0, 0.55);
display: flex;
justify-content: right;
.selectOption
display: flex;
align-items: center;
font-size: 12px;
border: 1px solid #EAEBEE;
border-radius: 6px;
width: 120px;
height: 32px;
margin-bottom: 16px;
.user, .manager
cursor: pointer;
border-radius: 6px;
width: 60px;
height: 32px;
text-align: center;
line-height: 32px;
color: #606266;
&:hover
font-weight: 400;
.user
margin-left: -1px;
.manager
margin-right: -1px;
.active
color: #ffffff;
font-weight: 400;
background-color: rgb(136, 82, 255);
border-color: rgb(136, 82, 255);
&:hover
background-color: rgba(136, 82, 255, 0.8);
compareText/index.vue
<template>
<p v-if="result > 0" class="text3 marRight10 width150">
<span class="center">较target <span class="increase">+ result | localeString unit</span><span class="up icon"></span></span>
</p>
<p v-else-if="result < 0" class="text3 marRight10 width150">
<span class="center">较target <span class="decrease">- (result * -1) | localeString unit</span><span class="down icon"></span></span>
</p>
<p v-else class="text3 marRight10 width150">
<span class="flatText center">较target持平</span>
</p>
</template>
<script>
export default
props:
result: Number,
target: String,
unit: String
</script>
<style lang='scss' scoped>
.width150
width: 100%;
.center
display: flex;
align-items: center;
.text3
display: flex;
align-items: center;
justify-content: center;
.marRight10
margin-right: 10px;
.increase
color: #00BD8D;
.decrease
color: #F76560
.up
background: url('~@/img/inline/icon/up.svg'以上是关于CSS数据面板的主要内容，如果未能解决你的问题，请参考以下文章