You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1038 lines
24 KiB
1038 lines
24 KiB
<template>
|
|
<div class="home">
|
|
<div class="topnav">总览</div>
|
|
<!-- 图片 -->
|
|
<div class="gymbox">
|
|
<div class="gympic">
|
|
<img src="../assets/img/gymbg.png" />
|
|
</div>
|
|
<div class="gymnum">
|
|
<span>年度进馆总人数</span>
|
|
<p>{{ year_num }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- 今日进馆 -->
|
|
<div class="numbox">
|
|
<span class="numicon"><img src="../assets/img/icon01.png" /></span>
|
|
<div class="numdiv">
|
|
<p class="ndtitle" ref="dynum">{{ day_num }}</p>
|
|
<p class="nddesc">今日进馆总人数</p>
|
|
</div>
|
|
</div>
|
|
<!-- 本周进馆 -->
|
|
<div class="numbox">
|
|
<span class="numicon"><img src="../assets/img/icon02.png" /></span>
|
|
<div class="numdiv">
|
|
<p class="ndtitle">{{ week_num }}</p>
|
|
<p class="nddesc">本周进馆总人数</p>
|
|
</div>
|
|
</div>
|
|
<!-- 本月进馆 -->
|
|
<div class="numbox">
|
|
<span class="numicon"><img src="../assets/img/icon03.png" /></span>
|
|
<div class="numdiv">
|
|
<p class="ndtitle">{{ mon_num }}</p>
|
|
<p class="nddesc">本月进馆总人数</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 客流趋势 -->
|
|
<div class="klqs">
|
|
<div class="klqs_bg">客流趋势</div>
|
|
<div class="klbtn">
|
|
<span :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
|
|
<span :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span>
|
|
<span :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="echartzone" id="showorders" style='width:100%;height:14rem;'></div>
|
|
|
|
<!-- 场馆饱和度 -->
|
|
<div class="cgbox">
|
|
<!-- 左侧 -->
|
|
<div class="cglist cgleft">
|
|
<ul>
|
|
<li>
|
|
<span>{{ tycra.name }}</span>
|
|
<span>{{ tycra.value }}</span>
|
|
<span><img src="../assets/img/tyc_icon.png" /></span>
|
|
</li>
|
|
<li>
|
|
<span>{{tygra.name}}</span>
|
|
<span>{{ tygra.value }}</span>
|
|
<span><img src="../assets/img/tyg_icon.png" /></span>
|
|
</li>
|
|
<li>
|
|
<span>{{yygra.name}}</span>
|
|
<span>{{ yygra.value }}</span>
|
|
<span><img src="../assets/img/yyg_icon.png" /></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 場館圖表 -->
|
|
<div id="cgchart" class="cgpies"></div>
|
|
<!-- 右侧 -->
|
|
<div class="cglist cgright">
|
|
<ul>
|
|
<li>
|
|
<span><img src="../assets/img/tsg_icon.png" /></span>
|
|
<span>20%</span>
|
|
<span>图书馆</span>
|
|
</li>
|
|
<li>
|
|
<span><img src="../assets/img/whg_icon.png" /></span>
|
|
<span>12%</span>
|
|
<span>文化馆</span>
|
|
</li>
|
|
<li>
|
|
<span><img src="../assets/img/bwg_icon.png" /></span>
|
|
<span>{{bwgra.value}}</span>
|
|
<span>{{bwgra.name}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 今日场馆人数 -->
|
|
<div class="today_rs">
|
|
<div class="tdrs_title">
|
|
今日各馆趋势
|
|
</div>
|
|
<div id="tdrs" style="width:100%;height:12rem;"></div>
|
|
</div>
|
|
|
|
<!-- 個場館實時進館人數 -->
|
|
<div class="pcgrs">
|
|
<div class="pcgrs_title">各场馆实时进馆人数</div>
|
|
<!-- 場館實時 -->
|
|
<div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId">
|
|
<span class="pcpos">{{item.groupName}}</span>
|
|
<p class="pcval">{{ item.allEnter }}</p>
|
|
<span class="pcrate"
|
|
:class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 }]">{{
|
|
item.proportion }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import * as btApi from '../api/home'
|
|
|
|
// 数字变化效果
|
|
import { numGrow,ecMaxVal } from '@/utils/comm';
|
|
|
|
// 引入api
|
|
import * as homeApi from '@/api/home'
|
|
|
|
export default {
|
|
name: 'HomeView',
|
|
data() {
|
|
return {
|
|
// 年月日选中的样式,默认日
|
|
klselt: "d",
|
|
// 客流标题数组
|
|
kltdata: [],
|
|
// 客流值数组
|
|
klvdata: [],
|
|
// 环图数据
|
|
kcdata:[],
|
|
// 环形的比例值
|
|
// tyc
|
|
tycra:[],
|
|
//tyg
|
|
tygra:[],
|
|
//yyg
|
|
yygra:[],
|
|
// bwg
|
|
bwgra:[],
|
|
|
|
day_num: 0,
|
|
week_num: 0,
|
|
mon_num: 0,
|
|
year_num: 0,
|
|
// 客流趋势
|
|
klqsDatas: [],
|
|
// 实时进馆人数
|
|
ssjgNumDatas: []
|
|
}
|
|
},
|
|
// created() {
|
|
// this.$nextTick(() => {
|
|
// this.cgchart()
|
|
// });
|
|
// },
|
|
mounted() {
|
|
// 客流趋势
|
|
this.btgetdata(this.klselt)
|
|
// 各场馆客流趋势
|
|
this.getGcgNumDatas()
|
|
//统计日月年进馆总数
|
|
this.getStat();
|
|
this.getInfoDatas();
|
|
|
|
},
|
|
// 方法
|
|
methods: {
|
|
// 获取对应的参数
|
|
btgetdata(type) {
|
|
let nrq;
|
|
switch (type) {
|
|
case 'd': nrq = "daily"; break;
|
|
case 'm': nrq = "monthly"; break;
|
|
case 'y': nrq = "yearly"; break;
|
|
default:nrq="daily";break;
|
|
}
|
|
//return nrq;
|
|
this.getDataIn(nrq)
|
|
},
|
|
|
|
// 获取不同时期的数据
|
|
getDataIn(reqType){
|
|
//
|
|
btApi.allGroupTimeNum({ 'granularity': reqType }).then(res => {
|
|
const kldata = res.data.data.allTimeData
|
|
// 对应的键名
|
|
let kltd = new Array;
|
|
let tmpkvd = new Array;
|
|
const dkeys = res.data.data.dkeys
|
|
dkeys.forEach(function (item, idx) {
|
|
kltd.push(item)
|
|
tmpkvd.push(kldata[item].num)
|
|
})
|
|
|
|
// 赋值
|
|
this.kltdata = kltd
|
|
this.klvdata = tmpkvd
|
|
// 圆柱
|
|
this.showorders()
|
|
// 环图数据
|
|
const ccdata = res.data.data.groupsData
|
|
let tcdata =new Array;
|
|
ccdata.forEach(function(item,idx){
|
|
// idx
|
|
tcdata.push({
|
|
// value: item.proportion,
|
|
value: item.noRepeatInNum,
|
|
name: item.groupName
|
|
})
|
|
});
|
|
//
|
|
let tcidata = new Array;
|
|
ccdata.forEach(item=>{
|
|
// crcle infomation
|
|
tcidata.push({
|
|
name:item.groupName,
|
|
rate:item.proportion
|
|
});
|
|
});
|
|
// console.log(tcidata)
|
|
this.kcdata = tcdata
|
|
// 环形图
|
|
this.cgchart()
|
|
// this.kcrate = tcidata
|
|
this.tycra = tcidata[0]
|
|
this.tygra = tcidata[1]
|
|
this.yygra = tcidata[2]
|
|
this.bwgra = tcidata[3]
|
|
|
|
});
|
|
},
|
|
|
|
//选择年月日中的某个
|
|
selitem(type) {
|
|
this.klselt = type;
|
|
this.btgetdata(type)
|
|
},
|
|
// 圆柱图
|
|
showorders() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var chartDom = document.getElementById('showorders');
|
|
var myChart = echarts.init(chartDom);
|
|
// 指定图表的配置项和数据
|
|
var option;
|
|
|
|
//var cdata = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
|
|
var cdata = this.klvdata
|
|
// var data = [Math.random() * 300]
|
|
option = {
|
|
// backgroundColor: '#031245',
|
|
color: [
|
|
'#63caff',
|
|
'#49beff',
|
|
'#03387a',
|
|
'#03387a',
|
|
'#03387a',
|
|
'#6c93ee',
|
|
'#a9abff',
|
|
'#f7a23f',
|
|
'#27bae7',
|
|
'#ff6d9d',
|
|
'#cb79ff',
|
|
'#f95b5a',
|
|
'#ccaf27',
|
|
'#38b99c',
|
|
'#93d0ff',
|
|
'#bd74e0',
|
|
'#fd77da',
|
|
'#dea700',
|
|
],
|
|
grid: {
|
|
containLabel: true,
|
|
left: 20,
|
|
right: 20,
|
|
bottom: 10,
|
|
top: 40,
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
color: '#FFFFFF',
|
|
fontSize: 10,
|
|
interval: 0,
|
|
rotate: 45,
|
|
// show: true,
|
|
// inside:false
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#384267',
|
|
},
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: true,
|
|
},
|
|
data: this.kltdata,
|
|
type: 'category',
|
|
},
|
|
yAxis: {
|
|
// show:false,
|
|
axisLabel: {
|
|
color: '#0095FF',
|
|
fontSize: 14,
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
},
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
type: 'solid',
|
|
},
|
|
},
|
|
// 坐标轴显示状况
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: false,
|
|
},
|
|
name: '',
|
|
},
|
|
series: [
|
|
{
|
|
data: cdata,
|
|
type: 'bar',
|
|
barMaxWidth: 'auto',
|
|
barWidth: 15,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
color: function () {
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
|
|
{ offset: 0, color: "#00B4FF" },
|
|
{ offset: 1, color: "#2F00FF" }
|
|
], false)
|
|
},
|
|
label: {
|
|
show: false,//柱状上的数据
|
|
}
|
|
},
|
|
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
distance: 15,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
{
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
type: 'bar',
|
|
barMaxWidth: '15',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '50%'],
|
|
symbolSize: [10, 5],
|
|
color: '#fff',
|
|
},
|
|
{
|
|
data: cdata,
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '15',
|
|
symbolPosition: 'end',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '-50%'],
|
|
symbolSize: [15, 7],
|
|
zlevel: 2,
|
|
},
|
|
// 背景柱子的数值
|
|
{
|
|
data: ecMaxVal(cdata),
|
|
type: 'bar',
|
|
barMaxWidth: 'auto',
|
|
barWidth: 15,
|
|
barGap: '-100%',
|
|
zlevel: -1,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
},
|
|
}
|
|
},
|
|
{
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '15',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '50%'],
|
|
symbolSize: [15, 7],
|
|
zlevel: -2,
|
|
},
|
|
{
|
|
data:ecMaxVal(cdata),
|
|
//data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '15',
|
|
symbolPosition: 'end',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '-50%'],
|
|
symbolSize: [15, 7],
|
|
zlevel: -1,
|
|
itemStyle: {
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
shadowBlur: 15
|
|
}
|
|
},
|
|
],
|
|
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
// 圆饼图
|
|
cgchart() {
|
|
var chartDom = document.getElementById('cgchart');
|
|
|
|
chartDom.removeAttribute('_echarts_instance_');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
|
|
color: ["#F2A0CE", "#0780e2", "#FF6504", "#01FE00", "#00FFFF", "#fdff00"],
|
|
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['60%', '70%'], //曲线范围
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 40,
|
|
// borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 40,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: this.kcdata
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
// 场馆入场人数折线图
|
|
cgrs_line() {
|
|
|
|
var chartDom = document.getElementById('tdrs');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00'];
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
|
|
var name = []
|
|
var data = [
|
|
[137, 34, 135, 161, 74, 152, 110, 100, 150, 137, 34, 135, 161],
|
|
[174, 137, 135, 34, 152, 135, 140, 160, 100, 174, 137, 135, 34],
|
|
[134, 74, 137, 135, 161, 137, 300, 220, 250, 134, 74, 137, 135],
|
|
[147, 134, 155, 131, 174, 122, 140, 160, 150, 127, 134, 175, 161],
|
|
[124, 147, 175, 134, 122, 175, 180, 110, 130, 154, 187, 125, 134],
|
|
[154, 174, 157, 175, 121, 157, 200, 250, 280, 134, 174, 157, 175],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
]
|
|
|
|
var series = [];
|
|
for (var i = 0; i < 6; i++) {
|
|
series.push({
|
|
name: name[i],
|
|
type: "line",
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
smooth: true, //是否平滑曲线显示
|
|
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: color[i]
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(255,255,255,0)'
|
|
}], false),
|
|
// shadowColor: 'rgba(255,255,255, 0.1)',
|
|
shadowBlur: 10,
|
|
opacity: 0.3,
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: color[i],
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid' //'dotted'虚线 'solid'实线
|
|
},
|
|
borderColor: color[i], //图形的描边颜色。支持的格式同 color
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: false,
|
|
},
|
|
opacity: 0.5,
|
|
}
|
|
},
|
|
data: data[i],
|
|
|
|
})
|
|
}
|
|
option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
},
|
|
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}',
|
|
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
|
padding: [8, 10], //内边距
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 160,
|
|
bottom: 160,
|
|
right: 20,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0B0765',
|
|
}
|
|
},
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#FFFFFF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
data: xData,
|
|
}],
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0B0765 ',
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0B0765 ',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0095FF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
series: series,
|
|
}
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
},
|
|
|
|
// 统计概况
|
|
getStat() {
|
|
let that = this
|
|
homeApi.allGroupNum().then(res => {
|
|
// get allTimeData
|
|
const tmpdata = res.data.returnData
|
|
that.day_num = tmpdata.day.noRepeatInNum
|
|
that.week_num = tmpdata.week.noRepeatInNum
|
|
that.mon_num = tmpdata.month.noRepeatInNum
|
|
that.year_num = tmpdata.year.noRepeatInNum
|
|
|
|
// 增加数字动画效果
|
|
numGrow(that.$refs.dynum,tmpdata.day.noRepeatInNum)
|
|
|
|
});
|
|
},
|
|
|
|
// 获取实时数据
|
|
getInfoDatas() {
|
|
homeApi.allInfoDatas().then(res => {
|
|
// get allTimeData
|
|
this.ssjgNumDatas = res.data.returnData
|
|
});
|
|
},
|
|
|
|
// 各个场馆的人流
|
|
getGcgNumDatas() {
|
|
homeApi.allGcgNumDatas().then(res => {
|
|
// get allTimeData
|
|
const tmpdata = res.data.returnData
|
|
// 场馆人流趋势线面图
|
|
this.cgrs_line();
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home {
|
|
position: relative;
|
|
}
|
|
|
|
.topnav {
|
|
height: 46px;
|
|
line-height: 46px;
|
|
text-align: center;
|
|
padding: 12rpx;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 90;
|
|
color: #fff;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: #080A25;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.gymbox {
|
|
margin-top: 3.2rem;
|
|
width: 100%;
|
|
background-image: url("../assets/img/gymbox_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
padding-top: 2.26rem;
|
|
height: 20rem;
|
|
position: relative;
|
|
}
|
|
|
|
.gymbox .gympic {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 0rem;
|
|
/* height: 12.68rem; */
|
|
width: 100%;
|
|
}
|
|
|
|
.gymbox .gympic img {
|
|
width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
/* margin-top: 1rem; */
|
|
display: block;
|
|
/* padding-top: 0.2rem; */
|
|
height: 16rem;
|
|
}
|
|
|
|
.gymbox .gymnum {
|
|
width: 100%;
|
|
/* margin: 0.6rem auto; */
|
|
text-align: center;
|
|
height: 3rem;
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
/* padding-top: 0.7rem; */
|
|
}
|
|
|
|
.gymbox .gymnum span {
|
|
font-size: 0.86rem;
|
|
display: block;
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
.gymbox .gymnum p {
|
|
line-height: 26px;
|
|
height: 26px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
display: block;
|
|
margin: 0;
|
|
margin-top: 0.5rem;
|
|
/* margin: 0.5rem 0 1.7rem; */
|
|
}
|
|
|
|
/* 數據box */
|
|
.numbox {
|
|
width: 100%;
|
|
height: 4rem;
|
|
line-height: 1.2;
|
|
margin-top: 0.6rem;
|
|
}
|
|
|
|
.numbox .numicon {
|
|
display: block;
|
|
width: 20%;
|
|
height: 3.2rem;
|
|
float: left;
|
|
}
|
|
|
|
.numbox .numdiv {
|
|
width: 72%;
|
|
background-image: url("../assets/img/num_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 center;
|
|
background-size: 100%;
|
|
float: left;
|
|
margin-left: 0.68rem;
|
|
height: 4rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.numbox .numdiv p {
|
|
display: block;
|
|
float: left;
|
|
width: 100%;
|
|
/* line-height: 0; */
|
|
}
|
|
|
|
.numbox .numdiv .ndtitle {
|
|
padding-top: 0.2rem;
|
|
font-size: 1.08rem;
|
|
font-size: 1.1rem;
|
|
margin: 0.7rem 0 0;
|
|
}
|
|
|
|
.numbox .numdiv .nddesc {
|
|
color: #ccc;
|
|
font-size: 0.9rem !important;
|
|
/* padding-bottom: 0.2rem; */
|
|
margin: 0;
|
|
}
|
|
|
|
/** 客流趋势 */
|
|
.klqs {
|
|
margin-top: 2rem;
|
|
background-image: url("../assets/img/klqs_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
height: 3.8rem;
|
|
background-position: -1.04rem 0.2rem;
|
|
}
|
|
|
|
.klqs .klqs_bg {
|
|
float: left;
|
|
/* width: 80%; */
|
|
margin-left: 4rem;
|
|
/* padding-left: 6.4rem; */
|
|
line-height: 2.8rem;
|
|
font-size: 1.1rem;
|
|
color: gray;
|
|
}
|
|
|
|
.klqs .klbtn {
|
|
float: right;
|
|
margin-left: 1.06rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.klqs .klbtn span {
|
|
display: block;
|
|
float: left;
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
margin-left: 0.4rem;
|
|
line-height: 2.2rem;
|
|
text-align: center;
|
|
border: 1px solid #006bff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 选择年月日后的样式变化 */
|
|
.klqs .klbtn span.spactive {
|
|
background-image: url('../assets/img/sactive_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
/** 場館飽和度 */
|
|
.cgbox {
|
|
background-image: url("../assets/img/cgbox_bg.png");
|
|
width: 100%;
|
|
height: 12rem;
|
|
background-position: center center;
|
|
background-size: 100% 100%;
|
|
margin-top: 2.4rem;
|
|
}
|
|
|
|
/* 饼图 */
|
|
.cgbox .cgpies {
|
|
width: 40%;
|
|
height: 12rem;
|
|
float: left;
|
|
}
|
|
|
|
.cgbox .cgleft {
|
|
width: 30%;
|
|
float: left;
|
|
}
|
|
|
|
.cgbox .cgleft>ul {
|
|
padding-left: 0rem;
|
|
}
|
|
|
|
.cgbox .cgright {
|
|
width: 30%;
|
|
float: left;
|
|
}
|
|
|
|
.cgbox .cgright>ul {
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.cgbox .cglist {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.cgbox .cglist ul {
|
|
display: block;
|
|
/* width: 100%; */
|
|
}
|
|
|
|
.cgbox .cglist ul li {
|
|
width: 100%;
|
|
list-style: none;
|
|
height: 0.66rem;
|
|
line-height: 0.66rem;
|
|
font-size: 0.66rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.cgbox .cglist ul li span {
|
|
display: block;
|
|
float: left;
|
|
margin-left: 0.46rem;
|
|
}
|
|
|
|
.cgbox .cgleft ul li:nth-child(3) span:nth-child(2) {
|
|
display: block;
|
|
float: left;
|
|
margin-left: 0.06rem;
|
|
}
|
|
|
|
.cgbox .cgleft ul li:nth-child(3) span:nth-child(3) {
|
|
display: block;
|
|
float: left;
|
|
margin-left: 0.16rem;
|
|
}
|
|
|
|
.cgbox .cglist ul li span img {
|
|
width: 0.68rem;
|
|
height: 0.68rem;
|
|
}
|
|
|
|
.cgbox .cgright {
|
|
width: 30%;
|
|
height: 12rem;
|
|
float: left;
|
|
}
|
|
|
|
/* 今日人數 */
|
|
.today_rs {
|
|
margin-top: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.today_rs .tdrs_title {
|
|
background-image: url("../assets/img/left_t2_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: -1.04rem 0.2rem;
|
|
height: 3.2rem;
|
|
line-height: 0rem;
|
|
padding-left: 4.6rem;
|
|
font-size: 1.1rem;
|
|
color: gray;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
/** 各場館實時 */
|
|
.pcgrs {
|
|
clear: both;
|
|
margin-top: 2.6rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.pcgrs .pcgrs_title {
|
|
background-image: url("../assets/img/left_t3_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
height: 3.8rem;
|
|
line-height: 2.8rem;
|
|
background-position: -1.04rem 0.2rem;
|
|
padding-left: 4.6rem;
|
|
font-size: 1.1rem;
|
|
color: gray;
|
|
}
|
|
|
|
.pcgrs .pcg_item {
|
|
margin-top: 0.4rem;
|
|
background-image: url("../assets/img/pcg_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
/* height: 12rem; */
|
|
width: 48%;
|
|
float: left;
|
|
margin-left: 2%;
|
|
position: relative;
|
|
margin-bottom: 1.6rem;
|
|
}
|
|
|
|
.pcgrs .pcg_item .pcpos {
|
|
text-align: right;
|
|
font-size: 0.68rem;
|
|
display: block;
|
|
/* width: 3.5rem; */
|
|
text-align: left;
|
|
float: right;
|
|
margin-top: 1.6rem;
|
|
margin-right: 1.1rem;
|
|
/* padding-right: 0.9rem; */
|
|
}
|
|
|
|
.pcgrs .pcg_item .pcval {
|
|
font-size: 1.086rem;
|
|
margin-top: 3.75rem;
|
|
width: 69%;
|
|
display: block;
|
|
float: left;
|
|
text-align: left;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
/* .pcgrs .pcg_item:nth-child(6) .pcval {
|
|
font-size: 1.086rem;
|
|
margin-top: 3.5rem;
|
|
width: 66%;
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
} */
|
|
|
|
.pcgrs .pcg_item .pcrate {
|
|
width: 32%;
|
|
height: 3.4rem;
|
|
line-height: 3.4rem;
|
|
display: block;
|
|
float: left;
|
|
font-size: 0.46rem;
|
|
margin-top: 3.78rem;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0.4rem;
|
|
right: 0.63rem;
|
|
background-image: url('../assets/img/安静.png');
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.pcgrs .pcg_item .pcrate2 {
|
|
background-image: url('../assets/img/舒适.png');
|
|
}
|
|
|
|
.pcgrs .pcg_item .pcrate3 {
|
|
background-image: url('../assets/img/拥挤.png');
|
|
}
|
|
</style>
|