1501 lines
47 KiB
Vue
1501 lines
47 KiB
Vue
<template>
|
|
<div>
|
|
<div class="record_date">
|
|
<el-row>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">总用户数</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
tableData.totalUsers ? tableData.totalUsers : 0
|
|
}}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">今日新增</div>
|
|
<div class="text_color">
|
|
<span>{{ tableData.newToday ? tableData.newToday : 0 }}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">本月新增</div>
|
|
<div class="text_color">
|
|
<span>{{ tableData.newMonth ? tableData.newMonth : 0 }}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">本年新增</div>
|
|
<div class="text_color">
|
|
<span>{{ tableData.newYear ? tableData.newYear : 0 }}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">今日订单笔数</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
tableData.todayPayCount ? tableData.todayPayCount : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">今日收入</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
tableData.todayPayAmount ? tableData.todayPayAmount : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">今日提现</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
tableData.todayExtractAmount ? tableData.todayExtractAmount : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">今日提现笔数</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
tableData.todayExtractCount ? tableData.todayExtractCount : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div>
|
|
<el-select
|
|
v-model="flag"
|
|
style="width: 150px; margin-left: 10px"
|
|
@change="orderfenxi"
|
|
>
|
|
<el-option
|
|
v-for="item in flags"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option> </el-select
|
|
>
|
|
<el-date-picker
|
|
v-if="flag == 1"
|
|
style="width: 200px; margin-left: 10px"
|
|
v-model="info.stockDate"
|
|
align="right"
|
|
type="date"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择开始时间"
|
|
@change="animeOrder"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
<el-tabs
|
|
v-model="activeName"
|
|
@tab-click="handleClick"
|
|
style="margin-left: 10px"
|
|
>
|
|
<el-tab-pane label="用户分析" name="first">
|
|
<el-row>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">总人数</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
taskStat.sumUserCount ? taskStat.sumUserCount : 0
|
|
}}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">普通用户</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
taskStat.userCount ? taskStat.userCount : 0
|
|
}}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">会员人数</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
taskStat.memberCount ? taskStat.memberCount : 0
|
|
}}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">充值会员用户</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
taskStat.moneyMemberCount ? taskStat.moneyMemberCount : 0
|
|
}}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">赠送会员用户</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
taskStat.giveMemberCount ? taskStat.giveMemberCount : 0
|
|
}}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<!-- <el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">手机号用户</div>
|
|
<div class="text_color">
|
|
<span>{{taskStat.phoneUserCount ? taskStat.phoneUserCount : 0}}</span>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col> -->
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">APP用户</div>
|
|
<div class="text_color">
|
|
<span>{{ taskStat.appCount ? taskStat.appCount : 0 }}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">H5用户</div>
|
|
<div class="text_color">
|
|
<span>{{ taskStat.h5Count ? taskStat.h5Count : 0 }}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">小程序用户</div>
|
|
<div class="text_color">
|
|
<span>{{ taskStat.wxCount ? taskStat.wxCount : 0 }}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">抖音用户</div>
|
|
<div class="text_color">
|
|
<span>{{ taskStat.dyCount ? taskStat.dyCount : 0 }}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">当前在线人数</div>
|
|
<div class="text_color">
|
|
<span>{{ taskStat2 ? taskStat2 : 0 }}</span
|
|
>人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<!-- <el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">短剧观看次数</div>
|
|
<div class="text_color"><span>{{taskStat2 ? taskStat2 : 0}}</span>次</div>
|
|
</div>
|
|
</div>
|
|
</el-col> -->
|
|
</el-row>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="短剧收入分析" name="fourth">
|
|
<el-table v-loading="tableDataLoading" :data="tableData2.list">
|
|
<el-table-column prop="" label="编号" width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.$index + 1 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="coursename" label="短剧名称">
|
|
</el-table-column>
|
|
<el-table-column prop="coursemoney" label="平台收入">
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="text-align: center; margin-top: 10px; float: right">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="limit"
|
|
:current-page="page"
|
|
layout="total,sizes, prev, pager, next,jumper"
|
|
:total="tableData2.totalCount"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="订单统计" name="second">
|
|
<el-row>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">总订单</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
orderStat.sumCourseOrdersCount
|
|
? orderStat.sumCourseOrdersCount
|
|
: 0
|
|
}}</span
|
|
>单
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">待支付订单</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
orderStat.daiCourseKeOrdersCount
|
|
? orderStat.daiCourseKeOrdersCount
|
|
: 0
|
|
}}</span
|
|
>单
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">已支付订单</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
orderStat.wanCourseKeOrdersCount
|
|
? orderStat.wanCourseKeOrdersCount
|
|
: 0
|
|
}}</span
|
|
>单
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">退款订单</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
orderStat.tuiCourseOrdersCount
|
|
? orderStat.tuiCourseOrdersCount
|
|
: 0
|
|
}}</span
|
|
>单
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">短剧总金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
orderStat.sumCourseOrdersMoney
|
|
? orderStat.sumCourseOrdersMoney
|
|
: 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">待支付金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
orderStat.daiCourseOrdersMoney
|
|
? orderStat.daiCourseOrdersMoney
|
|
: 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">已支付金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
orderStat.wanCourseOrdersMoney
|
|
? orderStat.wanCourseOrdersMoney
|
|
: 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">退款金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
orderStat.tuiCourseOrdersMoney
|
|
? orderStat.tuiCourseOrdersMoney
|
|
: 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">提现次数</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
orderStat.cashCount ? orderStat.cashCount : 0
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">提现总金额</div>
|
|
<div class="text_color">
|
|
<span>{{ orderStat.cashSum ? orderStat.cashSum : 0 }}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="分销统计" name="five">
|
|
<el-row>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">分销总金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
fenxiaoStat.sumMoney ? fenxiaoStat.sumMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">一级分销金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
fenxiaoStat.oneMoney ? fenxiaoStat.oneMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">二级分销金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
fenxiaoStat.twoMoney ? fenxiaoStat.twoMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">渠道分销金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
fenxiaoStat.qdMoney ? fenxiaoStat.qdMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="收入统计" name="three">
|
|
<el-row>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">总收入</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
MoneyData.sumMoney ? MoneyData.sumMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">短剧收入</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
MoneyData.courseMoney ? MoneyData.courseMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">会员收入</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
MoneyData.vipMoney ? MoneyData.vipMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="充值统计" name="sixth">
|
|
<el-row>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">充值总金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.sumMoney ? rechgeData.sumMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">微信APP充值金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.weiXinAppMoney ? rechgeData.weiXinAppMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">微信公众号充值金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.weiXinGZHMoney ? rechgeData.weiXinGZHMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">微信小程序充值金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.weiXinXCXMoney ? rechgeData.weiXinXCXMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">支付APP充值金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.zhiFuBaoAppMoney
|
|
? rechgeData.zhiFuBaoAppMoney
|
|
: 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">小程序充值金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.weiXinXCXMoney ? rechgeData.weiXinXCXMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">支付宝H5充值金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.zhiFuBaoH5Money
|
|
? rechgeData.zhiFuBaoH5Money
|
|
: 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">抖音充值金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.dyMoney ? rechgeData.dyMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">苹果充值金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.iosMoney ? rechgeData.iosMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="cards">
|
|
<div class="box">
|
|
<div class="box_num">
|
|
<div class="box_color">快手充值金额</div>
|
|
<div class="text_color">
|
|
<span>{{
|
|
rechgeData.ksMoney ? rechgeData.ksMoney : 0
|
|
}}</span
|
|
>元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<!-- 图表 -->
|
|
<el-row type="flex" justify="space-between" style="margin-bottom: 30px">
|
|
<el-col :span="12">
|
|
<div
|
|
style="margin-left: 20px; margin-right: 5px"
|
|
class="grid-content bg-purple"
|
|
>
|
|
<el-card class="box-card" shadow="never" :body-style="bodyStyle">
|
|
<div
|
|
slot="header"
|
|
style="
|
|
height: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div style="height: 100%; display: flex; align-items: center">
|
|
订单折线图
|
|
</div>
|
|
<!-- <el-date-picker v-model="info2.stockDate" type="date" placeholder="选择年份"
|
|
@change="selectYears" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
|
|
</el-date-picker> -->
|
|
<el-date-picker
|
|
v-model="selectYear"
|
|
:picker-options="pickerOptions"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
@change="selectYears"
|
|
end-placeholder="结束日期"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
<div
|
|
id="Chart1"
|
|
class="Chart1"
|
|
v-loading="tableDataLoading1"
|
|
></div>
|
|
</el-card>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div
|
|
style="margin-right: 10px; margin-left: 15px"
|
|
class="grid-content bg-purple-light"
|
|
>
|
|
<el-card class="box-card" shadow="never" :body-style="bodyStyle">
|
|
<div
|
|
slot="header"
|
|
style="
|
|
height: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div style="height: 100%; display: flex; align-items: center">
|
|
用户增长折线图
|
|
</div>
|
|
<el-date-picker
|
|
v-model="selectDayDate"
|
|
:picker-options="pickerOptions"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
@change="selectTime"
|
|
end-placeholder="结束日期"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
<div
|
|
id="Chart2"
|
|
class="Chart1"
|
|
v-loading="tableDataLoading2"
|
|
></div>
|
|
</el-card>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
//按需加载echarts
|
|
import * as echarts from "echarts/core";
|
|
import {
|
|
ToolboxComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
} from "echarts/components";
|
|
import { LineChart } from "echarts/charts";
|
|
import { UniversalTransition } from "echarts/features";
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
export default {
|
|
data() {
|
|
return {
|
|
limit: 10,
|
|
page: 1,
|
|
tableData: [],
|
|
tableData2: [],
|
|
colonelData: [],
|
|
commodityData: [],
|
|
userjfData: [],
|
|
incomeData: [],
|
|
activeName: "first",
|
|
tableDataLoading: true,
|
|
usersumData: {},
|
|
taskStat: {},
|
|
taskStat2: 0,
|
|
data: "",
|
|
time: "",
|
|
platform: "",
|
|
type: "",
|
|
balance: -1,
|
|
flag: 1,
|
|
info: {
|
|
stockDate: this.getNowTime(), //日期
|
|
},
|
|
flags: [
|
|
{
|
|
value: 1,
|
|
label: "按天查询",
|
|
},
|
|
{
|
|
value: 2,
|
|
label: "按月查询",
|
|
},
|
|
{
|
|
value: 3,
|
|
label: "按年查询",
|
|
},
|
|
],
|
|
orderStat: {},
|
|
rechgeData: {},
|
|
fenxiaoStat: {},
|
|
MoneyData: {},
|
|
|
|
tableDataLoading1: true,
|
|
tableDataLoading2: true,
|
|
orderEcharts: {}, //订单折线图
|
|
increaseEcharts: {}, //用户增长折线图
|
|
selectDayDate: "",
|
|
pickerOptions: {
|
|
onPick: ({ maxDate, minDate }) => {
|
|
// 把选择的第一个日期赋值给一个变量。
|
|
this.choiceDate = minDate.getTime();
|
|
// 如何你选择了两个日期了，就把那个变量置空
|
|
if (maxDate) this.choiceDate = "";
|
|
},
|
|
disabledDate: (time) => {
|
|
// 如何选择了一个日期
|
|
if (this.choiceDate) {
|
|
// 7天的时间戳
|
|
const one = 6 * 24 * 3600 * 1000;
|
|
// 当前日期 - one = 7天之前
|
|
const minTime = this.choiceDate - one;
|
|
// 当前日期 + one = 7天之后
|
|
const maxTime = this.choiceDate + one;
|
|
return time.getTime() < minTime || time.getTime() > maxTime;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
},
|
|
bodyStyle: {
|
|
padding: "0",
|
|
},
|
|
selectYear: "",
|
|
qiehuan_type: 1,
|
|
lirunStat: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.colonel();
|
|
this.taskData();
|
|
this._getData(); //用户统计
|
|
// this.incomeSelect() //收入
|
|
|
|
this.getUserOrderEcharts();
|
|
this.getUserIncreaseEcharts();
|
|
},
|
|
methods: {
|
|
// 详情跳转
|
|
updates(row) {
|
|
this.$router.push({
|
|
path: "/userDetail",
|
|
query: {
|
|
userId: row.userId,
|
|
},
|
|
});
|
|
},
|
|
updates1(row) {
|
|
this.$router.push({
|
|
path: "/userDetail",
|
|
query: {
|
|
userId: row.userId1,
|
|
},
|
|
});
|
|
},
|
|
updates2(row) {
|
|
this.$router.push({
|
|
path: "/userDetail",
|
|
query: {
|
|
userId: row.userId2,
|
|
},
|
|
});
|
|
},
|
|
handleSizeChange(val) {
|
|
this.limit = val;
|
|
this.colonel();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.page = val;
|
|
this.colonel();
|
|
},
|
|
// 用户分析选择日期
|
|
animeDat() {
|
|
this._getData();
|
|
},
|
|
// 订单分析选择日期
|
|
animeOrder() {
|
|
this.taskData();
|
|
this.colonel();
|
|
this.colonelOrder();
|
|
this.fenxiaoSelect();
|
|
this.rechSelect();
|
|
this.incomeSelect();
|
|
},
|
|
// 订单分析年月日
|
|
orderfenxi(value) {
|
|
let vanumber = value;
|
|
if (vanumber === 1) {
|
|
this.flag = 1;
|
|
this.taskData();
|
|
this.colonel();
|
|
this.colonelOrder();
|
|
this.fenxiaoSelect();
|
|
this.rechSelect();
|
|
this.incomeSelect();
|
|
}
|
|
if (vanumber === 2) {
|
|
this.flag = 2;
|
|
this.taskData();
|
|
this.colonel();
|
|
this.colonelOrder();
|
|
this.fenxiaoSelect();
|
|
this.rechSelect();
|
|
this.incomeSelect();
|
|
}
|
|
if (vanumber === 3) {
|
|
this.flag = 3;
|
|
this.taskData();
|
|
this.colonel();
|
|
this.colonelOrder();
|
|
this.fenxiaoSelect();
|
|
this.rechSelect();
|
|
this.incomeSelect();
|
|
}
|
|
},
|
|
// Tabs点击事件
|
|
handleClick(tab, event) {
|
|
if (tab._props.label == "用户分析") {
|
|
this.taskData();
|
|
}
|
|
if (tab._props.label == "短剧收入分析") {
|
|
this.colonel();
|
|
}
|
|
if (tab._props.label == "订单统计") {
|
|
this.colonelOrder();
|
|
}
|
|
if (tab._props.label == "充值统计") {
|
|
this.rechSelect();
|
|
}
|
|
if (tab._props.label == "分销统计") {
|
|
this.fenxiaoSelect();
|
|
}
|
|
if (tab._props.label == "收入统计") {
|
|
this.flag = 1;
|
|
this.incomeSelect();
|
|
}
|
|
},
|
|
//处理默认选中当前日期
|
|
getNowTime() {
|
|
var now = new Date();
|
|
var year = now.getFullYear(); //得到年份
|
|
var month = now.getMonth(); //得到月份
|
|
var date = now.getDate(); //得到日期
|
|
var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
|
|
var mm =
|
|
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
|
|
var ss =
|
|
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
|
|
month = month + 1;
|
|
month = month.toString().padStart(2, "0");
|
|
date = date.toString().padStart(2, "0");
|
|
var defaultDate = `${year}-${month}-${date}`;
|
|
return defaultDate;
|
|
this.$set(this.info, "stockDate", defaultDate);
|
|
},
|
|
// 用户统计
|
|
_getData() {
|
|
this.$http({
|
|
url: this.$http.adornUrl("user/homeMessage"),
|
|
method: "get",
|
|
params: this.$http.adornParams({}),
|
|
}).then(({ data }) => {
|
|
if (data.code == 0) {
|
|
let returnData = data.data;
|
|
this.tableData = returnData;
|
|
}
|
|
console.log("this.tableData", this.tableData);
|
|
});
|
|
},
|
|
// // 收入统计
|
|
// incomeSelect() {
|
|
// this.$http({
|
|
// url: this.$http.adornUrl('statistical/income'),
|
|
// method: 'get',
|
|
// params: this.$http.adornParams({})
|
|
// }).then(({
|
|
// data
|
|
// }) => {
|
|
// if (data.code == 0) {
|
|
// let returnData = data.data;
|
|
// this.incomeData = returnData
|
|
// }
|
|
// })
|
|
// },
|
|
//用户分析
|
|
taskData() {
|
|
this.$http({
|
|
url: this.$http.adornUrl("user/userMessage"),
|
|
method: "get",
|
|
params: this.$http.adornParams({
|
|
date: this.info.stockDate,
|
|
type: this.flag,
|
|
}),
|
|
}).then(({ data }) => {
|
|
let returnData = data.data;
|
|
this.taskStat = returnData;
|
|
});
|
|
this.$http({
|
|
url: this.$http.adornUrl("user/selectUserOnLineCount"),
|
|
method: "get",
|
|
params: this.$http.adornParams({
|
|
// 'date': this.info.stockDate,
|
|
// 'type': this.flag,
|
|
}),
|
|
}).then(({ data }) => {
|
|
let returnData = data.data;
|
|
this.taskStat2 = returnData;
|
|
});
|
|
},
|
|
// 短剧收入分析
|
|
colonel() {
|
|
this.tableDataLoading = true;
|
|
this.$http({
|
|
url: this.$http.adornUrl("user/courseMessage"),
|
|
method: "get",
|
|
params: this.$http.adornParams({
|
|
page: this.page,
|
|
limit: this.limit,
|
|
date: this.info.stockDate,
|
|
type: this.flag,
|
|
}),
|
|
}).then(({ data }) => {
|
|
if (data.code == 0) {
|
|
this.tableDataLoading = false;
|
|
let returnData = data.data;
|
|
this.tableData2 = returnData;
|
|
}
|
|
});
|
|
},
|
|
// 订单统计
|
|
colonelOrder() {
|
|
this.tableDataLoading = true;
|
|
this.$http({
|
|
url: this.$http.adornUrl("order/selectOrdersCount"),
|
|
method: "get",
|
|
params: this.$http.adornParams({
|
|
page: this.page,
|
|
limit: this.limit,
|
|
time: this.info.stockDate,
|
|
flag: this.flag,
|
|
}),
|
|
}).then(({ data }) => {
|
|
this.tableDataLoading = false;
|
|
if (data.code == 0) {
|
|
let returnData = data.data;
|
|
this.orderStat = returnData;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 分销统计
|
|
fenxiaoSelect() {
|
|
this.$http({
|
|
url: this.$http.adornUrl("order/selectFenXiaoMoney"),
|
|
method: "get",
|
|
params: this.$http.adornParams({
|
|
time: this.info.stockDate,
|
|
flag: this.flag,
|
|
userId: this.userId,
|
|
sysUserId: this.sysUserId,
|
|
}),
|
|
}).then(({ data }) => {
|
|
if (data.code == 0) {
|
|
this.fenxiaoStat = data.data;
|
|
}
|
|
});
|
|
},
|
|
// 收入统计
|
|
incomeSelect() {
|
|
this.$http({
|
|
url: this.$http.adornUrl("cash/statisticsIncomeMoney"),
|
|
method: "get",
|
|
params: this.$http.adornParams({
|
|
time: this.info.stockDate,
|
|
flag: this.flag,
|
|
}),
|
|
}).then(({ data }) => {
|
|
if (data.code == 0) {
|
|
let returnData = data.data;
|
|
this.MoneyData = returnData;
|
|
}
|
|
});
|
|
},
|
|
// 充值统计
|
|
rechSelect() {
|
|
this.$http({
|
|
url: this.$http.adornUrl("cash/payMember"),
|
|
method: "get",
|
|
params: this.$http.adornParams({
|
|
time: this.info.stockDate,
|
|
flag: this.flag,
|
|
}),
|
|
}).then(({ data }) => {
|
|
if (data.code == 0) {
|
|
let returnData = data.data;
|
|
this.rechgeData = returnData;
|
|
}
|
|
});
|
|
},
|
|
|
|
//订单折线图
|
|
getUserOrderEcharts(startTime, endTime) {
|
|
this.tableDataLoading1 = true;
|
|
var times = this.info.stockDate.slice(0, 10);
|
|
if (startTime) {
|
|
var startTime = startTime;
|
|
var endTime = endTime;
|
|
} else {
|
|
// var now = Date.parse(new Date())
|
|
// var oldD = new Date(now)
|
|
// // var year = oldD.getFullYear(); //得到年份
|
|
// var year = this.info2.stockDate
|
|
// // this.selectYear = year
|
|
var now = Date.parse(new Date());
|
|
// var choiceDate = (new Date(now)).getTime() / 1000;
|
|
var choiceDate = Date.parse(new Date());
|
|
var one = 6 * 24 * 3600 * 1000;
|
|
// 当前日期 - one = 7天之前
|
|
var minTime = choiceDate - one;
|
|
var oldD = new Date(minTime);
|
|
var year = oldD.getFullYear(); //得到年份
|
|
var month = oldD.getMonth(); //得到月份
|
|
var date = oldD.getDate(); //得到日期
|
|
var hh = oldD.getHours() < 10 ? "0" + oldD.getHours() : oldD.getHours();
|
|
var mm =
|
|
oldD.getMinutes() < 10 ? "0" + oldD.getMinutes() : oldD.getMinutes();
|
|
var ss =
|
|
oldD.getSeconds() < 10 ? "0" + oldD.getSeconds() : oldD.getSeconds();
|
|
month = month + 1;
|
|
month = month.toString().padStart(2, "0");
|
|
date = date.toString().padStart(2, "0");
|
|
var defaultDate = `${year}-${month}-${date}`;
|
|
|
|
var startTime = defaultDate;
|
|
var endTime = times;
|
|
this.selectYear = [startTime, endTime];
|
|
}
|
|
|
|
this.$http({
|
|
url: this.$http.adornUrl("order/selectOrdersCountStatisticsByYear"),
|
|
method: "get",
|
|
params: this.$http.adornParams({
|
|
// 'time': year ? year : '',
|
|
startTime: startTime ? startTime : "",
|
|
endTime: endTime ? endTime : "",
|
|
}),
|
|
}).then(({ data }) => {
|
|
if (data && data.code == 0) {
|
|
this.orderEcharts = data.data;
|
|
//使用数据初始化图表
|
|
this.setEcharts();
|
|
this.tableDataLoading1 = false;
|
|
}
|
|
// this.dataInfo = data.data
|
|
});
|
|
},
|
|
//用户增长折线图
|
|
getUserIncreaseEcharts(startTime, endTime) {
|
|
this.tableDataLoading2 = true;
|
|
var times = this.info.stockDate.slice(0, 10);
|
|
console.log("times", times);
|
|
if (startTime) {
|
|
var startTime = startTime;
|
|
var endTime = endTime;
|
|
} else {
|
|
var now = Date.parse(new Date());
|
|
// var choiceDate = (new Date(now)).getTime() / 1000;
|
|
var choiceDate = Date.parse(new Date());
|
|
var one = 6 * 24 * 3600 * 1000;
|
|
// 当前日期 - one = 7天之前
|
|
var minTime = choiceDate - one;
|
|
var oldD = new Date(minTime);
|
|
var year = oldD.getFullYear(); //得到年份
|
|
var month = oldD.getMonth(); //得到月份
|
|
var date = oldD.getDate(); //得到日期
|
|
var hh = oldD.getHours() < 10 ? "0" + oldD.getHours() : oldD.getHours();
|
|
var mm =
|
|
oldD.getMinutes() < 10 ? "0" + oldD.getMinutes() : oldD.getMinutes();
|
|
var ss =
|
|
oldD.getSeconds() < 10 ? "0" + oldD.getSeconds() : oldD.getSeconds();
|
|
month = month + 1;
|
|
month = month.toString().padStart(2, "0");
|
|
date = date.toString().padStart(2, "0");
|
|
var defaultDate = `${year}-${month}-${date}`;
|
|
|
|
var startTime = defaultDate;
|
|
var endTime = times;
|
|
this.selectDayDate = [startTime, endTime];
|
|
}
|
|
this.$http({
|
|
url: this.$http.adornUrl("user/selectUserCountStatisticsByTime"),
|
|
method: "get",
|
|
params: this.$http.adornParams({
|
|
startTime: startTime ? startTime : "",
|
|
endTime: endTime ? endTime : "",
|
|
}),
|
|
}).then(({ data }) => {
|
|
if (data && data.code == 0) {
|
|
this.increaseEcharts = data.data;
|
|
//使用数据初始化图表
|
|
this.setEcharts2();
|
|
this.tableDataLoading2 = false;
|
|
}
|
|
// this.dataInfo = data.data
|
|
});
|
|
},
|
|
//使用数据初始化图表
|
|
setEcharts() {
|
|
echarts.use([
|
|
ToolboxComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
LineChart,
|
|
CanvasRenderer,
|
|
UniversalTransition,
|
|
]);
|
|
|
|
var chartDom = document.getElementById("Chart1");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: ["订单总量", "待支付单量", "已退款订单", "已支付订单"],
|
|
top: "5%",
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
toolbox: {
|
|
top: "3%",
|
|
feature: {
|
|
saveAsImage: {},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: this.orderEcharts.year,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "订单总量",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: this.orderEcharts.ordersCountList,
|
|
},
|
|
{
|
|
name: "待支付单量",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: this.orderEcharts.ordersDaiFuKuanCountList,
|
|
},
|
|
{
|
|
name: "已退款订单",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: this.orderEcharts.ordersYiTuiKuanLunCountList,
|
|
},
|
|
{
|
|
name: "已支付订单",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: this.orderEcharts.ordersYiZhiFuCountList,
|
|
},
|
|
],
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
//使用数据初始化图表
|
|
setEcharts2() {
|
|
echarts.use([
|
|
ToolboxComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
LineChart,
|
|
CanvasRenderer,
|
|
UniversalTransition,
|
|
]);
|
|
var chartDom = document.getElementById("Chart2");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: ["用户增长量"],
|
|
top: "5%",
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
toolbox: {
|
|
top: "3%",
|
|
feature: {
|
|
saveAsImage: {},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: this.increaseEcharts.year,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "用户增长量",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: this.increaseEcharts.userCountList,
|
|
},
|
|
],
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
//根据年份筛选
|
|
selectYears(e) {
|
|
console.log(e, "`````````", this.info.stockDate);
|
|
if (e == null) {
|
|
this.getUserOrderEcharts();
|
|
} else {
|
|
// var now = new Date();
|
|
// // var year = now.getFullYear(); //得到年份
|
|
// var year = this.info2.stockDate
|
|
// let startTime = (new Date(e)).getTime() / 1000;
|
|
// this.getUserOrderEcharts(year)
|
|
var now = new Date(e[0]);
|
|
var year = now.getFullYear(); //得到年份
|
|
var month = now.getMonth(); //得到月份
|
|
var date = now.getDate(); //得到日期
|
|
var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
|
|
var mm =
|
|
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
|
|
var ss =
|
|
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
|
|
month = month + 1;
|
|
month = month.toString().padStart(2, "0");
|
|
date = date.toString().padStart(2, "0");
|
|
// var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
|
|
var defaultDate = `${year}-${month}-${date}`;
|
|
|
|
var now1 = new Date(e[1]);
|
|
var year1 = now1.getFullYear(); //得到年份
|
|
var month1 = now1.getMonth(); //得到月份
|
|
var date1 = now1.getDate(); //得到日期
|
|
var hh1 =
|
|
now1.getHours() < 10 ? "0" + now1.getHours() : now1.getHours();
|
|
var mm1 =
|
|
now1.getMinutes() < 10 ? "0" + now1.getMinutes() : now1.getMinutes();
|
|
var ss1 =
|
|
now1.getSeconds() < 10 ? "0" + now1.getSeconds() : now1.getSeconds();
|
|
month1 = month + 1;
|
|
month1 = month.toString().padStart(2, "0");
|
|
date1 = date1.toString().padStart(2, "0");
|
|
var defaultDate1 = `${year1}-${month1}-${date1}`;
|
|
|
|
let startTime = defaultDate;
|
|
let endTime = defaultDate1;
|
|
console.log(startTime, "`````````", endTime);
|
|
this.getUserOrderEcharts(startTime, endTime);
|
|
}
|
|
},
|
|
//根据日期区间筛选
|
|
selectTime(e) {
|
|
console.log(e);
|
|
if (e == null) {
|
|
this.getUserIncreaseEcharts();
|
|
} else {
|
|
var now = new Date(e[0]);
|
|
var year = now.getFullYear(); //得到年份
|
|
var month = now.getMonth(); //得到月份
|
|
var date = now.getDate(); //得到日期
|
|
var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
|
|
var mm =
|
|
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
|
|
var ss =
|
|
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
|
|
month = month + 1;
|
|
month = month.toString().padStart(2, "0");
|
|
date = date.toString().padStart(2, "0");
|
|
// var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
|
|
var defaultDate = `${year}-${month}-${date}`;
|
|
|
|
var now1 = new Date(e[1]);
|
|
var year1 = now1.getFullYear(); //得到年份
|
|
var month1 = now1.getMonth(); //得到月份
|
|
var date1 = now1.getDate(); //得到日期
|
|
var hh1 =
|
|
now1.getHours() < 10 ? "0" + now1.getHours() : now1.getHours();
|
|
var mm1 =
|
|
now1.getMinutes() < 10 ? "0" + now1.getMinutes() : now1.getMinutes();
|
|
var ss1 =
|
|
now1.getSeconds() < 10 ? "0" + now1.getSeconds() : now1.getSeconds();
|
|
month1 = month + 1;
|
|
month1 = month.toString().padStart(2, "0");
|
|
date1 = date1.toString().padStart(2, "0");
|
|
var defaultDate1 = `${year1}-${month1}-${date1}`;
|
|
|
|
let startTime = defaultDate;
|
|
let endTime = defaultDate1;
|
|
|
|
// let startTime = (new Date(e[0])).getTime() / 1000;
|
|
// let endTime = (new Date(e[1])).getTime() / 1000;
|
|
this.getUserIncreaseEcharts(startTime, endTime);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.Chart1 {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
.box {
|
|
padding: 44px;
|
|
border: 1px solid #eee;
|
|
margin: 15px 10px;
|
|
}
|
|
|
|
.box_num {
|
|
font-size: 14px;
|
|
color: #66b1ff;
|
|
}
|
|
|
|
.box_num .box_color {
|
|
color: #333;
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.box_num div span {
|
|
font-size: 20px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.text_color {
|
|
color: #4f9dec;
|
|
}
|
|
|
|
.text_color span {
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|