123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918 |
- <template>
- <div class="dataView-content">
- <div class="data-header">
- <dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']">
- 智享亿家投递大数据
- </dv-border-box-5>
- <dv-decoration-3 style="width:25%;height:30px;" />
- <dv-border-box-5 :color="['rgba(46, 77, 255, 0.2)', 'rgba(0,125,255,0.2)']" :reverse="true">
- <div>区域</div>
- <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
- <option value="">省</option>
- <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
- </select> -->
- <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
- <option value="">选择市</option>
- <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
- </select>
- <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
- <option value="">选择区/县</option>
- <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
- </select>
- <a-icon
- @click="isFullscreenMap"
- :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
- :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
- </dv-border-box-5>
- </div>
- <div class="data-body">
- <div class="b-left">
- <div>
- <dv-border-box-13>
- <div id="con1" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- <div>
- <dv-border-box-13>
- <div id="con2" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- </div>
- <div class="b-middle">
- <div>
- <dv-border-box-8 style="padding: 10px;">
- <div id="map" :style="{height: '100%'}"></div>
- </dv-border-box-8>
- </div>
- <div>
- <dv-border-box-12>
- <div class="total-block">
- <div>
- <dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
- <div class="total-label">用户总数</div>
- </div>
- <div>
- <dv-digital-flop :config="devTotal" style="width:100%;height:50px;" />
- <div class="total-label">设备总数</div>
- </div>
- </div>
- </dv-border-box-12>
- </div>
- </div>
- <div class="b-right">
- <div>
- <dv-border-box-13>
- <div id="con3" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- <div>
- <dv-border-box-13>
- <div id="con4" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import echarts from 'echarts'
- import {
- getUserTotal,
- getDeviceTotal,
- getMapStation
- } from '@/api/nodeMap.js'
- import {
- getNewRegister,
- getTimeSharingLog,
- getDeliveryTop,
- getHeatMapData,
- getLocationCode
- } from '@/api/borard.js'
- import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
- import moment from 'moment'
- import getDate from '@/libs/getDate.js'
- export default {
- name: 'DataBoratd',
- data () {
- return {
- queryParam: {
- provinceCode: '610000', // 省
- cityCode: '610100', // 市
- districtCode: '' // 区
- },
- addrProvinceList: [{
- code: '610000',
- id: '610000',
- isOpen: '0',
- name: '陕西省',
- parentId: '100000',
- parentIds: '100000',
- sort: 27,
- type: '2'
- }], // 省下拉
- addrCityList: [
- {
- 'id': '610100',
- 'sort': 1,
- 'parentId': '610000',
- 'parentIds': '100000,610000',
- 'isOpen': '0',
- 'name': '西安市',
- 'code': '610100'
- },
- {
- 'id': '610400',
- 'sort': 4,
- 'parentId': '610000',
- 'parentIds': '100000,610000',
- 'isOpen': '0',
- 'name': '咸阳市',
- 'code': '610400'
- }
- ], // 市下拉
- addrDistrictList: [], // 区下拉
- chart1: null,
- chart2: null,
- chart3: null,
- chart4: null,
- userTotal: {
- number: [],
- content: '{nt}',
- formatter: this.formatter
- },
- devTotal: {
- number: [],
- content: '{nt}',
- formatter: this.formatter
- },
- isMapFull: false,
- map: null, // 地图对象
- markerLayer: null, // 地图点标记对象
- infoWindow: null, // 地图信息窗口对象
- beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
- endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59') // 查询结束时间
- }
- },
- methods: {
- // 获取省列表'
- getProvinceList () {
- getProvince().then(res => {
- if (res.status == 200) {
- this.addrProvinceList = res.data || []
- } else {
- this.addrProvinceList = []
- }
- })
- },
- // 获取城市列表
- getCityList (e) {
- if (e.target.value == '') return
- this.addrCityList = []
- this.addrDistrictList = []
- this.queryParam.cityCode = ''
- this.queryParam.districtCode = ''
- this.getCityListRequest(e.target.value)
- },
- getCityListRequest (val) {
- getCityByPro({
- id: val
- }).then(res => {
- if (res.status == 200) {
- this.addrCityList = res.data || []
- } else {
- this.addrCityList = []
- }
- })
- },
- // 获取区县列表
- getAreaList (e) {
- if (e.target.value == '') return
- this.addrDistrictList = []
- this.queryParam.districtCode = ''
- this.initChart()
- this.getAreaListRequest(e.target.value)
- },
- getAreaListRequest (val) {
- getDistrictByCity({
- id: val
- }).then(res => {
- if (res.status == 200) {
- this.addrDistrictList = res.data || []
- } else {
- this.addrDistrictList = []
- }
- })
- },
- // 全屏
- fullScreen () {
- var element = document.documentElement
- if (element.requestFullscreen) {
- element.requestFullscreen()
- } else if (element.msRequestFullscreen) {
- element.msRequestFullscreen()
- } else if (element.mozRequestFullScreen) {
- element.mozRequestFullScreen()
- } else if (element.webkitRequestFullscreen) {
- element.webkitRequestFullscreen()
- }
- },
- // 退出全屏
- exitFullscreen () {
- if (document.exitFullscreen) {
- document.exitFullscreen()
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen()
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen()
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen()
- }
- },
- // 地图是否全屏展示
- isFullscreenMap () {
- this.isMapFull = !this.isMapFull
- if (this.isMapFull) {
- this.fullScreen()
- } else {
- this.exitFullscreen()
- }
- this.chart1.resize()
- this.chart2.resize()
- this.chart3.resize()
- this.chart4.resize()
- },
- formatter (number) {
- const numbers = number.toString().split('').reverse()
- const segs = []
- while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
- return segs.join(',').split('').reverse().join('')
- },
- // 获取用户总数
- getUser () {
- getUserTotal({
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }).then(res => {
- const data = res.data || 0
- const arr = []
- arr.push(data)
- this.userTotal = {
- number: arr,
- content: '{nt}',
- formatter: this.formatter
- }
- console.log(this.userTotal, data, '获取用户总数')
- })
- },
- // 获取设备总数
- getDevice () {
- getDeviceTotal({
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }).then(res => {
- const data = res.data || 0
- const arr = []
- arr.push(data)
- this.devTotal = {
- number: arr,
- content: '{nt}',
- formatter: this.formatter
- }
- })
- },
- // 获取新用户注册量
- getNewRegister () {
- const params = {
- beginRegisterTime: this.beginDate,
- endRegisterTime: this.endDate,
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }
- getNewRegister(params).then(res => {
- if (res.status == 200) {
- const xData = res.data.dateTime
- const yData = res.data.registerNum
- const arr = []
- yData.map(item => {
- arr.push(Number(item))
- })
- this.initChart1(xData, arr)
- }
- })
- },
- // 获取分时投递
- getTimeSharingLog () {
- const params = {
- 'beginDeliveryDate': this.beginDate,
- 'endDeliveryDate': this.endDate,
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }
- getTimeSharingLog(params).then(res => {
- console.log(res)
- if (res.status == 200) {
- this.initChart2(res.data)
- }
- })
- },
- // 排行榜
- getDeliveryTop () {
- const params = {
- 'beginDeliveryDate': this.beginDate,
- 'endDeliveryDate': this.endDate,
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }
- getDeliveryTop(params).then(res => {
- console.log(res)
- if (res.status == 200) {
- this.initChart3(res.data)
- }
- })
- },
- getLocationCode () {
- const cityCode = this.queryParam.cityCode
- const districtCode = this.queryParam.districtCode
- getLocationCode({
- keyword: districtCode || cityCode
- }).then(res => {
- console.log(res)
- if (res.status == 200) {
- if (this.map) {
- this.map.panTo(new TMap.LatLng(res.data.lat, res.data.lng))
- } else {
- this.initMap(res.data)
- }
- }
- })
- },
- // 初始化地图
- initMap (res) {
- // 定义地图中心点坐标 默认定位在陕西省咸阳市
- var center = new TMap.LatLng(res.lat, res.lng)
- // 定义map变量,调用 TMap.Map() 构造函数创建地图
- this.map = new TMap.Map(document.getElementById('map'), {
- center: center, // 设置地图中心点坐标
- mapStyleId: 'style3',
- zoom: 13, // 设置地图缩放级别
- pitch: 0, // 设置俯仰角
- showControl: false,
- rotation: 45 // 设置地图旋转角度
- })
- // 创建并初始化MultiMarker 点标记
- this.markerLayer = new TMap.MultiMarker({
- map: this.map, // 指定地图容器
- // 样式定义
- styles: {
- // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
- 'myStyle': new TMap.MarkerStyle({
- 'width': 16, // 点标记样式宽度(像素)
- 'height': 20, // 点标记样式高度(像素)
- 'src': '../ldt.png', // 图片路径
- // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
- 'anchor': {
- x: 8,
- y: 15
- }
- })
- },
- // 点标记数据数组
- geometries: []
- })
- // 初始化infoWindow
- this.infoWindow = new TMap.InfoWindow({
- map: this.map,
- position: new TMap.LatLng(39.984104, 116.307503),
- offset: {
- x: 0,
- y: -32
- } // 设置信息窗相对position偏移像素
- })
- this.infoWindow.close() // 初始关闭信息窗关闭
- this.markerLayer.on('mousemove', this.showMarkTitle)
- // 监听地图加载完成
- this.map.on('tilesloaded', this.getMapMark)
- },
- // 获取热力图
- getHeatMapData () {
- // 初始化热力图并添加至map图层
- const heat = new TMap.visualization.Heat({
- max: 350, // 热力最强阈值
- min: 0, // 热力最弱阈值
- height: 0, // 峰值高度
- gradientColor: { // 渐变颜色
- 0.6: '#673198',
- 0.8: '#e53390',
- 0.9: '#ffc95a'
- },
- radius: 30 // 最大辐射半径
- }).addTo(this.map)
- const params = {
- 'beginDeliveryDate': this.beginDate,
- 'endDeliveryDate': this.endDate,
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }
- getHeatMapData(params).then(res => {
- if (res.status == 200) {
- const ret = []
- for (let i = 0; i < res.data.length; i++) {
- if (res.data[i].lat <= 90) {
- ret.push({
- count: res.data[i].deliveryTimes,
- lat: res.data[i].lat,
- lng: res.data[i].lng
- })
- }
- }
- // console.log(ret)
- heat.setData(ret)// 设置数据
- }
- })
- },
- // 获取地图点坐标
- getMapMark () {
- getMapStation({
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }).then(res => {
- const list = res.data || []
- const data = []
- list.map((item, index) => {
- if (item.lat <= 85.051128 && item.lat >= -85.051128) {
- const p = {
- 'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
- 'styleId': 'myStyle', // 指定样式id
- 'position': new TMap.LatLng(Number(item.lat), Number(item
- .lng)), // 点标记坐标位置
- 'properties': { // 自定义属性
- 'title': item.name
- }
- }
- data.push(p)
- }
- })
- // 增加点标记
- this.markerLayer.add(data)
- })
- this.getHeatMapData()
- },
- // 显示地图标记点名称
- showMarkTitle (evt) {
- this.infoWindow.open() // 打开信息窗
- this.infoWindow.setPosition(evt.geometry.position) // 设置信息窗位置
- this.infoWindow.setContent(evt.geometry.properties.title) // 设置信息窗内容
- },
- // 初始化图表
- initChart () {
- // 用户总数
- this.getUser()
- // 设备总数
- this.getDevice()
- // 地图
- this.getLocationCode()
- // 新注册用户
- this.getNewRegister()
- // 分时投递
- this.getTimeSharingLog()
- // 设备分布比例
- const con3 = document.getElementById('con3')
- const chart3 = echarts.init(con3)
- const option3 = {
- color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
- title: {
- text: '设备分布比例',
- top: 20,
- left: 20,
- textStyle: {
- color: '#abd7ff'
- },
- textAlingn: 'left'
- },
- tooltip: {},
- series: [{
- type: 'pie',
- radius: ['30%', '50%'],
- startAngle: -Math.PI / 8,
- avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
- label: {
- normal: {
- formatter: params => {
- return (
- '{name|' + params.name + '}{value|' +
- params.value + '%' + '}'
- )
- },
- padding: [0, -70, 25, -70],
- rich: {
- name: {
- fontSize: 12,
- padding: [0, 10, 0, 4],
- color: '#999'
- },
- value: {
- fontSize: 12,
- color: '#999'
- }
- }
- }
- },
- labelLine: {
- normal: {
- length: 20,
- length2: 60,
- lineStyle: {
- color: '#e6e6e6'
- }
- }
- },
- data: [{
- name: '居民小区',
- value: 49
- },
- {
- name: '公共机构',
- value: 32
- },
- {
- name: '学校',
- value: 14
- },
- {
- name: '企业',
- value: 5
- }
- ],
- insideLabel: {
- show: true
- }
- }]
- }
- chart3.setOption(option3)
- this.chart3 = chart3
- this.chart3.resize()
- // 网点投递量排名
- this.getDeliveryTop()
- },
- // 排行榜
- initChart3 (res) {
- const con4 = document.getElementById('con4')
- const chart4 = echarts.init(con4)
- const option4 = {
- title: {
- text: '网点投递量排名',
- top: 20,
- left: 20,
- textStyle: {
- color: '#abd7ff'
- },
- textAlingn: 'left'
- },
- tooltip: {
- formatter: '{b0}: {c0}kg'
- },
- grid: {
- left: 15,
- right: 15,
- bottom: 20,
- top: 85,
- containLabel: true
- },
- xAxis: {
- data: res.stationName
- },
- yAxis: {
- name: 'kg',
- type: 'value'
- },
- series: [{
- data: res.deliveryWeight,
- type: 'bar',
- barWidth: 30,
- label: {
- normal: {
- show: true,
- position: 'top'
- }
- },
- itemStyle: {
- color: '#37a2da',
- shadowColor: '#246d91',
- shadowOffsetX: 10,
- shadowOffsetY: -1
- }
- }]
- }
- chart4.setOption(option4)
- this.chart4 = chart4
- this.chart4.resize()
- },
- // 分时投递记录
- initChart2 (res) {
- const con2 = document.getElementById('con2')
- const chart2 = echarts.init(con2)
- const series = []
- const arr = res.dayKey.slice(res.dayKey.length - 3)
- console.log(arr)
- for (let i = 0; i < arr.length; i++) {
- series.push({
- name: arr[i],
- data: res.value[arr[i]],
- type: 'line',
- stack: '投递量',
- smooth: true,
- barWidth: 10,
- label: {
- normal: {
- show: true,
- position: 'top'
- }
- }
- })
- }
- const option2 = {
- title: {
- text: '分时投递量',
- top: 20,
- left: 20,
- textStyle: {
- color: '#abd7ff'
- },
- textAlingn: 'left'
- },
- tooltip: {
- formatter: '{b0}时: {c0}kg'
- },
- grid: {
- left: 20,
- right: 40,
- bottom: 20,
- top: 85,
- containLabel: true
- },
- legend: {
- data: arr,
- orient: 'vertical',
- textStyle: {
- fontSize: 10
- },
- top: 15,
- left: 'right'
- },
- xAxis: {
- name: '时',
- type: 'category',
- data: res.hourKey,
- nameTextStyle: {
- color: '#666'
- },
- axisLine: {
- lineStyle: {
- color: '#666'
- }
- }
- },
- yAxis: {
- name: 'kg',
- type: 'value',
- nameTextStyle: {
- color: '#666'
- },
- axisLine: {
- lineStyle: {
- color: '#666'
- }
- }
- },
- series: series
- }
- chart2.setOption(option2)
- this.chart2 = chart2
- this.chart2.resize()
- },
- // 初始化新用户注册量
- initChart1 (xData, yData) {
- const con1 = document.getElementById('con1')
- const chart1 = echarts.init(con1)
- const option1 = {
- title: {
- text: '新用户注册量',
- top: 20,
- left: 20,
- textStyle: {
- color: '#abd7ff'
- },
- textAlingn: 'left'
- },
- tooltip: {
- formatter: '{b0}日: {c0}人'
- },
- grid: {
- left: 15,
- right: 60,
- bottom: 20,
- top: 85,
- containLabel: true
- },
- xAxis: {
- name: '日期',
- data: xData,
- type: 'category',
- nameTextStyle: {
- color: '#666'
- },
- axisLine: {
- lineStyle: {
- color: '#666'
- }
- }
- },
- yAxis: {
- name: '用户',
- type: 'value',
- nameTextStyle: {
- color: '#666'
- },
- axisLine: {
- lineStyle: {
- color: '#666'
- }
- }
- },
- series: [{
- data: yData,
- type: 'line',
- smooth: true,
- label: {
- normal: {
- show: true,
- position: 'top'
- }
- },
- lineStyle: {
- color: 'rgba(55, 162, 218, 0.9)'
- },
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: 'rgba(55, 162, 218, 0.5)' // 0% 处的颜色
- }, {
- offset: 1, color: 'rgba(55, 162, 218, 0.9)' // 100% 处的颜色
- }]
- }
- }
- }]
- }
- chart1.setOption(option1)
- this.chart1 = chart1
- this.chart1.resize()
- }
- },
- mounted () {
- const that = this
- window.onresize = () => {
- return (() => {
- that.chart1.resize()
- that.chart2.resize()
- that.chart3.resize()
- that.chart4.resize()
- })()
- }
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {
- setTimeout(() => {
- vm.initChart()
- vm.getAreaListRequest(vm.queryParam.cityCode)
- }, 150)
- })
- },
- beforeRouterLeave (to, from, next) {
- next(vm => {
- // 销毁地图
- vm.map.destroy()
- vm.map = null
- })
- }
- }
- </script>
- <style lang="less">
- .dataView-content {
- width: 100%;
- height: 100%;
- min-height: 600px;
- background-image: url(../../assets/dataViewBg.png);
- background-size: 100% 100%;
- display: flex;
- flex-direction: column;
- .data-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- >div {
- height: 80px;
- line-height: 80px;
- &:first-child {
- width: 40%;
- color: #b3dcf5;
- padding-right: 10%;
- .border-box-content {
- font-size: 30px;
- text-align: center;
- }
- }
- &:last-child {
- width: 35%;
- color: #0ed3ff;
- .border-box-content {
- font-size: 18px;
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
- padding-left: 50px;
- select {
- background: #021931;
- border: 1px solid #3e566d;
- min-width: 20%;
- padding: 2px 10px;
- margin: 0 10px;
- box-shadow: inset 0 0 2px #69b2ff;
- border-radius: 6px;
- }
- }
- }
- }
- }
- .data-body {
- flex-grow: 1;
- display: flex;
- .b-left,
- .b-right {
- width: 25%;
- display: flex;
- padding: 5px;
- flex-direction: column;
- justify-content: space-around;
- > div{
- height: 400px;
- }
- }
- .b-middle {
- width: 50%;
- padding: 5px;
- display: flex;
- flex-direction: column;
- >div {
- &:first-child {
- height: 80%;
- }
- &:last-child {
- height: 20%;
- .total-block {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- >div {
- width: 40%;
- }
- .total-label {
- color: #fff;
- text-align: center;
- }
- }
- }
- }
- }
- }
- }
- </style>
|