|
|
@@ -0,0 +1,1390 @@
|
|
|
+<template>
|
|
|
+ <div class="mod-home">
|
|
|
+ <div class="search-bar">
|
|
|
+ <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList(this.page)" size="small">
|
|
|
+ <div class="input-row">
|
|
|
+ <!-- <el-form-item label="店铺">-->
|
|
|
+ <!-- <template>-->
|
|
|
+ <!-- <el-select v-model="status" clearable placeholder="请选择店铺" size="small"-->
|
|
|
+ <!-- @change="orderStatus">-->
|
|
|
+ <!-- <el-option v-for="item in options" :key="item.value" :label="item.label"-->
|
|
|
+ <!-- :value="item.value"></el-option>-->
|
|
|
+ <!-- </el-select>-->
|
|
|
+ <!-- <!– –>-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
+ <el-form-item label="日期">
|
|
|
+ <el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="—"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss" :start-placeholder="this.$i18n.t('date.start')"
|
|
|
+ :end-placeholder="this.$i18n.t('date.end')"
|
|
|
+ :default-time="['00:00:00', '23:59:59']"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="default-btn" @click="setDateRange(1)">{{
|
|
|
+ $t("date.t")
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div class="default-btn" @click="setDateRange(2)">{{
|
|
|
+ $t("date.y")
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div class="default-btn" @click="setDateRange(3)">近3天</div>
|
|
|
+ <div class="default-btn" @click="setDateRange(5)">近5天</div>
|
|
|
+ <div class="default-btn" @click="setDateRange(7)">近7天</div>
|
|
|
+ <div class="default-btn" @click="setDateRange(30)">近一个月</div>
|
|
|
+ <div class="default-btn primary-btn" @click="getPlatformStatistics()">{{ $t("order.query") }}</div>
|
|
|
+ <!-- <div class="default-btn" @click="getSoldExcel()">{{ $t("order.export") }}</div>-->
|
|
|
+ <!-- <div class="default-btn" @click="clear()">{{ $t("product.reset") }}</div>-->
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <!-- 底部流量走势图 -->
|
|
|
+ <div class="refund-plate">
|
|
|
+ <div class="ranking-box">
|
|
|
+
|
|
|
+ <!-- 热卖店铺TOP10 -->
|
|
|
+ <div class="ranking-left">
|
|
|
+ <div class="ranking-title">店铺排行
|
|
|
+ <span style="color: red;font-weight: bold; margin-left: 20px;font-size: 14px">新增人数：{{totalUserNums}}</span>
|
|
|
+ <span style="color: red;font-weight: bold; margin-left: 20px;font-size: 14px">营业额：{{totalAmount.toFixed(2)}}</span>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ highlight-current-row
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :data="hotShopList"
|
|
|
+ height="500"
|
|
|
+ border
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ label="排名">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="shopName"
|
|
|
+ label="店铺名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="userNum"
|
|
|
+ label="新增用户">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="amount"
|
|
|
+ label="营业额">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="sales"
|
|
|
+ label="销量">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!--/ 热卖店铺TOP10 end -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 交易趋势 -->
|
|
|
+ <div class="refund-chart-box">
|
|
|
+
|
|
|
+ <!-- 热卖商品TOP10-->
|
|
|
+ <div class="ranking-right">
|
|
|
+ <div class="ranking-title">{{hotShop.shopName}}热卖商品排行</div>
|
|
|
+ <el-table
|
|
|
+ :data="hotProdList"
|
|
|
+ height="500"
|
|
|
+ border
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ label="排名">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="prodName"
|
|
|
+ label="商品名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="amount"
|
|
|
+ label="实付金额">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="sales"
|
|
|
+ label="销量">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="shopName"
|
|
|
+ label="店铺名称">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!--/ 热卖商品TOP10end-->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- /底部流量走势图 -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import moment from "moment/moment";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ hotShop: {
|
|
|
+ shopName: null
|
|
|
+ },
|
|
|
+ dateRange: [],
|
|
|
+ dataForm: {
|
|
|
+ shopId: null,
|
|
|
+ startTime: null,
|
|
|
+ endTime: null,
|
|
|
+ },
|
|
|
+ hotProdList: [], // 热卖商品
|
|
|
+ hotShopList: [], // 热卖店铺
|
|
|
+ totalUserNums: 0,
|
|
|
+ totalAmount: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ dateRange() {
|
|
|
+ this.dataForm.startTime = this.dateRange === null ? null : this.dateRange[0] // 开始时间
|
|
|
+ this.dataForm.endTime = this.dateRange === null ? null : this.dateRange[1] // 结束时间
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getPlatformStatistics() // 获取首页的基本信息 今日待办 实时概况
|
|
|
+ // let erd = elementResizeDetectorMaker()
|
|
|
+ // erd.listenTo(document.getElementById('entirety-data-chart'), this.resizeFunc)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setCurrent(row) {
|
|
|
+ this.$refs.singleTable.setCurrentRow(row);
|
|
|
+ },
|
|
|
+ handleCurrentChange(e) {
|
|
|
+ this.getShopData(e)
|
|
|
+ this.hotShop.shopName = e.shopName
|
|
|
+ },
|
|
|
+ getShopData(e) {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/platform/statistics/getShopStatistics'),
|
|
|
+ params: {
|
|
|
+ shopId: e.shopId,
|
|
|
+ startTime: this.dataForm.startTime,
|
|
|
+ endTime: this.dataForm.endTime
|
|
|
+ },
|
|
|
+ method: 'GET'
|
|
|
+ }).then(({data}) => {
|
|
|
+ this.hotProdList = data.hotProdList
|
|
|
+ this.totalUserNums = data.totalUserNums
|
|
|
+ this.totalAmount = data.totalAmount
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPlatformStatistics() {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/platform/statistics/getShopStatistics'),
|
|
|
+ params: {
|
|
|
+ shopId: this.dataForm.shopId,
|
|
|
+ startTime: this.dataForm.startTime,
|
|
|
+ endTime: this.dataForm.endTime
|
|
|
+ },
|
|
|
+ method: 'GET'
|
|
|
+ }).then(({data}) => {
|
|
|
+ this.hotShopList = data.hotShopList
|
|
|
+ this.hotProdList = data.hotProdList
|
|
|
+ this.totalUserNums = data.totalUserNums
|
|
|
+ this.totalAmount = data.totalAmount
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 根据选项设置时间
|
|
|
+ * 1:今天 2:昨天 3: 近七天 4:近30天 5:近60天
|
|
|
+ */
|
|
|
+ setDateRange(val) {
|
|
|
+ var startDay = null
|
|
|
+ var endDay = null
|
|
|
+ if (val === 1) {
|
|
|
+ startDay = 0
|
|
|
+ endDay = 0
|
|
|
+ } else if (val === 2) {
|
|
|
+ startDay = -1
|
|
|
+ endDay = -1
|
|
|
+ } else if (val === 3) {
|
|
|
+ startDay = -3
|
|
|
+ endDay = -1
|
|
|
+ } else if (val === 5) {
|
|
|
+ startDay = -5
|
|
|
+ endDay = -1
|
|
|
+ } else if (val === 7) {
|
|
|
+ startDay = -7
|
|
|
+ endDay = -1
|
|
|
+ } else if (val === 30) {
|
|
|
+ startDay = -30
|
|
|
+ endDay = -1
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 开始时间
|
|
|
+ let startTime = moment().add(startDay, 'days').startOf('days').format('LL')
|
|
|
+ // 结束时间
|
|
|
+ let endTime = moment().add(endDay, 'days').endOf('days').format('LL')
|
|
|
+ this.dateRange = [startTime, endTime]
|
|
|
+ this.$nextTick(() =>{
|
|
|
+ this.getPlatformStatistics();
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // let erd = elementResizeDetectorMaker()
|
|
|
+ // erd.uninstall(this.$refs.entirety) // 这里用ref是因为vue离开页面后获取不到dom
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ // e-chart
|
|
|
+ #real-time-data-chart canvas {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 20px !important
|
|
|
+ }
|
|
|
+
|
|
|
+ .mod-home {
|
|
|
+ .search-bar {
|
|
|
+ .input-row {
|
|
|
+ .select-time-btn {
|
|
|
+ margin-right: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ color: #AAAAAA;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-time-btn.is-active {
|
|
|
+ color: #155BD4;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 店铺状态异常提示
|
|
|
+ .shop-inf-imperfect-tips {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ background: #FFF7DD;
|
|
|
+ border: 1px solid #FFD888;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .el-icon-warning {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFA900;
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // font-size: 1em;
|
|
|
+ // line-height: 2em;
|
|
|
+ // .strong {
|
|
|
+ // margin: 0;
|
|
|
+ // font-size: 17px;
|
|
|
+ // font-weight: bold;
|
|
|
+ // text-align: center;
|
|
|
+ // margin-bottom: 0.5em;
|
|
|
+ // }
|
|
|
+ // .content {
|
|
|
+ // font-size: 16px;
|
|
|
+ // padding: 0 30px;
|
|
|
+ // }
|
|
|
+ // background-color: #F5F6F9;
|
|
|
+ .grap {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 白色背景 标题样式
|
|
|
+ .white-basic {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .title-basic {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #333333;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 今日待办
|
|
|
+ .abeyance-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .order-num-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 7px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ // cursor: pointer;
|
|
|
+ .item-box {
|
|
|
+ left: 30px;
|
|
|
+
|
|
|
+ .words {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-img {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 25px;
|
|
|
+ display: block;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-num-item:first-child {
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-num-item:last-child {
|
|
|
+ margin-right: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 订单栏项
|
|
|
+ .order-all-num {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ .row-bg {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .col-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 120px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .num-item-box {
|
|
|
+ position: relative;
|
|
|
+ width: calc(20% - 20px);
|
|
|
+ flex: 1;
|
|
|
+ padding-right: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num-item-box:last-child {
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-box:first-child {
|
|
|
+ // margin-right: 20px;
|
|
|
+ .num-item-box {
|
|
|
+ padding-right: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-box:last-child {
|
|
|
+ .num-item-box:not(:last-child) {
|
|
|
+ padding-right: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 基本信息样式
|
|
|
+ .order-num-item {
|
|
|
+ // width: calc((100% - 73px) * 0.2);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ // &:hover {
|
|
|
+ // .item-img {
|
|
|
+ // img {
|
|
|
+ // position: absolute;
|
|
|
+ // top: -10px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ .item-box {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ left: 30px;
|
|
|
+
|
|
|
+ .words {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ width: 160px;
|
|
|
+ word-break: break-all;
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .ratio{
|
|
|
+ // font-size: 12px;
|
|
|
+ // font-weight: 400;
|
|
|
+ // color: #FFFFFF;
|
|
|
+ // opacity: 0.7;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .ratio{
|
|
|
+ // font-size: 12px;
|
|
|
+ // font-weight: 400;
|
|
|
+ // color: #FFFFFF;
|
|
|
+ // opacity: 0.7;
|
|
|
+ // }
|
|
|
+ .seq {
|
|
|
+ display: flex
|
|
|
+ }
|
|
|
+
|
|
|
+ .up {
|
|
|
+ color: #3DD598;
|
|
|
+ }
|
|
|
+
|
|
|
+ .up-icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 0 12px 0 4px;
|
|
|
+ background: url('~@/assets/img/home/ic-arrow-narrow-up.png')
|
|
|
+ }
|
|
|
+
|
|
|
+ .down {
|
|
|
+ color: #F0142F;
|
|
|
+ }
|
|
|
+
|
|
|
+ .down-icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 0 12px 0 4px;
|
|
|
+ background: url('~@/assets/img/home/ic-arrow-narrow-down.png')
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-img {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ // transition: .35s;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加公告
|
|
|
+ .introduce {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .router-link-active {
|
|
|
+ //点击时去掉下划线
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #111111;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-more {
|
|
|
+ float: right;
|
|
|
+ margin: 10px;
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .introduce-container {
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ background-color: #b4dff8;
|
|
|
+ margin: 20px 0 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .introduce-container .text {
|
|
|
+ width: 50%;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 栏目标题行
|
|
|
+ .title-line {
|
|
|
+ background: #f8f8f8;
|
|
|
+ padding: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue-vertical {
|
|
|
+ display: inline-block;
|
|
|
+ width: 3px;
|
|
|
+ height: 1em;
|
|
|
+ background: #155bd4;
|
|
|
+ margin-right: 0.5em;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-txt {
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 1em;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-time {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 12px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime {
|
|
|
+ // display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ 实时概况
|
|
|
+ */
|
|
|
+ .realtime-situation-box {
|
|
|
+ .real-time-content {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: -12px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 20%;
|
|
|
+ padding-left: 30px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+
|
|
|
+ .word {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 31px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime-situation {
|
|
|
+ //左边
|
|
|
+ .realtime-left {
|
|
|
+ height: 100%;
|
|
|
+ // width: calc((100% - 20px) * 0.8);
|
|
|
+ // margin-right: 20px;
|
|
|
+ // .chart-content {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 360px;
|
|
|
+ // }
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-item {
|
|
|
+ padding-right: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 标题
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .t-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .update-time {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-small-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-update-time {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-explain-item::before {
|
|
|
+ display: inline-block;
|
|
|
+ content: '';
|
|
|
+ width: 18px;
|
|
|
+ height: 8px;
|
|
|
+ background: #FF4141;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-explain-first-item {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-explain-second-item {
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-red::before {
|
|
|
+ background: #FF4141;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-dark-green::before {
|
|
|
+ background: #42B983;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-today-data::before {
|
|
|
+ background: #1890FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-yesterday-data::before {
|
|
|
+ background: #21D59B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-pay-amount {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .t-pay-item {
|
|
|
+ color: #333;
|
|
|
+ text-align: left;
|
|
|
+ margin-right: 30px;
|
|
|
+
|
|
|
+ .tt-title {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tt-num {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-today {
|
|
|
+ margin-right: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-amount-text {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-amount-num {
|
|
|
+ font-size: 24px;
|
|
|
+ min-height: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 10px 0;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-amount-tips {
|
|
|
+ color: #9b9b9b;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图表
|
|
|
+ .realtime-chart-box {
|
|
|
+ left: -10px !important;
|
|
|
+ // margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrapper__summary:nth-child(2) {
|
|
|
+ margin-top: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 右边
|
|
|
+ .realtime-right {
|
|
|
+ min-width: calc((100% - 20px) * 0.2);
|
|
|
+ min-height: 426px;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px 0px 0 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .realtime-right-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 45px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime-right-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .realtime-right-box-left, .realtime-right-box-right {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime-right-box-right {
|
|
|
+ margin-top: -30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-num-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .item-img {
|
|
|
+ margin-right: 30px;
|
|
|
+
|
|
|
+ .words {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin: 14px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ .words {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin: 14px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .seq {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .order-num-item:nth-child(even){
|
|
|
+ // margin-left: 86px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime .wrapper__summary {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime .wrapper__summary .summary__box {
|
|
|
+ display: inline-flex;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime .wrapper__summary .summary__item {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ //客户数信息
|
|
|
+ .customer-number-info {
|
|
|
+ margin-left: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-tit {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-num {
|
|
|
+ font-size: 24px;
|
|
|
+ min-height: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 15px 0;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-tips {
|
|
|
+ color: #9b9b9b;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 客户数icon
|
|
|
+ svg {
|
|
|
+ fill: currentColor;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime .wrapper__summary .summary__svg {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ 整体看板
|
|
|
+ */
|
|
|
+ .whole-plate {
|
|
|
+ margin: 20px 0 20px;
|
|
|
+ min-height: 460px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ // 标题
|
|
|
+ .title {
|
|
|
+ width: 80%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .t-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .update-time {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-small-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-update-time {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-explain-item::before {
|
|
|
+ display: inline-block;
|
|
|
+ content: '';
|
|
|
+ width: 18px;
|
|
|
+ height: 8px;
|
|
|
+ background: #FF4141;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-explain-first-item {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-explain-second-item {
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-red::before {
|
|
|
+ background: #FF4141;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-dark-green::before {
|
|
|
+ background: #42B983;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-today-data::before {
|
|
|
+ background: #1890FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-yesterday-data::before {
|
|
|
+ background: #21D59B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-pay-amount {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .t-pay-item {
|
|
|
+ color: #333;
|
|
|
+ text-align: left;
|
|
|
+ margin-right: 30px;
|
|
|
+
|
|
|
+ .tt-title {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tt-num {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-today {
|
|
|
+ margin-right: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .money {
|
|
|
+ width: 20%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .related-income-item {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .related-income {
|
|
|
+ margin: 20px 0 0 0px;
|
|
|
+ padding-right: 50px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-tit {
|
|
|
+ margin-top: 23px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-num {
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-num-price {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-num a {
|
|
|
+ color: #155bd4;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .integral-plate {
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ 退款看板
|
|
|
+ */
|
|
|
+ .refund-plate {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ // 上
|
|
|
+ .ranking-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 50%;
|
|
|
+ padding-right: 20px;
|
|
|
+
|
|
|
+ .ranking-left,
|
|
|
+ .refund-rate-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ background: #fbfbfb;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: 574px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .refund-rate-box {
|
|
|
+ height: 396px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ranking-left {
|
|
|
+ margin-top: 20px;
|
|
|
+ flex: auto
|
|
|
+ }
|
|
|
+
|
|
|
+ .ranking-title {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ width: 100%;
|
|
|
+ border: none;
|
|
|
+ background: #fbfbfb;
|
|
|
+ // border-spacing: 10px 20px;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ .table-tit {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-tit:hover {
|
|
|
+ background-color: lightgoldenrodyellow;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-tit:active {
|
|
|
+ background-color: lightblue;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ tr {
|
|
|
+ border: none;
|
|
|
+ height: 3em;
|
|
|
+ line-height: 1.5em;
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
+ border: none;
|
|
|
+ word-break: break-wrod;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gray {
|
|
|
+ background: #F7F8FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-tit-item {
|
|
|
+ color: #999;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rank {
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prod {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ref {
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ranks {
|
|
|
+ width: 10%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prods {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .refs {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prop {
|
|
|
+ width: 10%;
|
|
|
+ // text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-data {
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line-clamp-one {
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ /* autoprefixepxr: off */
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .padLeft {
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .msg-tit {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 下
|
|
|
+ .refund-chart-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 50%;
|
|
|
+
|
|
|
+ .successed-refund,
|
|
|
+ .ranking-right {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #fbfbfb;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .successed-refund {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ background: #fbfbfb;
|
|
|
+ height: 396px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ranking-right {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ranking-title {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ width: 100%;
|
|
|
+ border: none;
|
|
|
+ background: #fbfbfb;
|
|
|
+ // border-spacing: 10px 20px;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ tr {
|
|
|
+ border: none;
|
|
|
+ height: 3em;
|
|
|
+ line-height: 1.5em;
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
+ border: none;
|
|
|
+ word-break: break-wrod;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gray {
|
|
|
+ background: #F7F8FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-tit-item {
|
|
|
+ color: #999;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rank {
|
|
|
+ width: 10%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prod {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ref {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ranks {
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prods {
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .refs {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prop {
|
|
|
+ width: 10%;
|
|
|
+ // text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .msg-tit {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .padLeft {
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .msg-price {
|
|
|
+ margin: 6px 0;
|
|
|
+ line-height: 26px;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .msg-txt-p {
|
|
|
+ width: 146px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare {
|
|
|
+ color: #9b9b9b;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare-left {
|
|
|
+ margin-right: 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .integral-plate canvas {
|
|
|
+ left: -5px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money-padleft {
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .refund-tip {
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #5A607F;
|
|
|
+ }
|
|
|
+
|
|
|
+ .msg-tit-txt {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .traffictrendA, .traffictrendB {
|
|
|
+ display: inline-block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .traffictrendA {
|
|
|
+ background: #21D59B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .traffictrendB {
|
|
|
+ margin-left: 40px;
|
|
|
+ background: #0058FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty {
|
|
|
+ display: block;
|
|
|
+ height: 200px;
|
|
|
+ line-height: 200px;
|
|
|
+ text-align: center;
|
|
|
+ color: #aaa;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
