|
|
|
@ -46,20 +46,63 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="echartzone" id="showorders" style='min-width:100%;overflow-x: auto; height:16rem'></div> |
|
|
|
<div class="echartzone" id="showorders" style='width:100%;height:14rem;'></div> |
|
|
|
|
|
|
|
<!-- 场馆饱和度 --> |
|
|
|
<div class="cgbox"> |
|
|
|
<!-- 左侧 --> |
|
|
|
<div class="cglist cgleft"> |
|
|
|
<ul> |
|
|
|
<li> |
|
|
|
<span>体育场</span> |
|
|
|
<span>20%</span> |
|
|
|
<span><img src="../assets/tyc_icon.png" /></span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span>体育场</span> |
|
|
|
<span>20%</span> |
|
|
|
<span><img src="../assets/tyc_icon.png" /></span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span>体育场</span> |
|
|
|
<span>20%</span> |
|
|
|
<span><img src="../assets/tyc_icon.png" /></span> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<!-- 場館圖表 --> |
|
|
|
<div id="cgchart"></div> |
|
|
|
<div id="cgchart" class="cgpies"></div> |
|
|
|
<!-- 右侧 --> |
|
|
|
<div class="cglist cgright"> |
|
|
|
<ul> |
|
|
|
<li> |
|
|
|
<span><img src="../assets/tyc_icon.png" /></span> |
|
|
|
<span>20%</span> |
|
|
|
<span>体育场</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span><img src="../assets/tyc_icon.png" /></span> |
|
|
|
<span>20%</span> |
|
|
|
<span>体育场</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span><img src="../assets/tyc_icon.png" /></span> |
|
|
|
<span>20%</span> |
|
|
|
<span>体育场</span> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 今日场馆人数 --> |
|
|
|
<div class="today_rs"> |
|
|
|
<div class="tdrs_title">今日各馆趋势</div> |
|
|
|
<div id="tdrs" style="width:100%;height: 26rem;"></div> |
|
|
|
<div class="tdrs_title"> |
|
|
|
<p></p>今日各馆趋势 |
|
|
|
</div> |
|
|
|
<div id="tdrs" style="width:100%;height:12rem;"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 個場館實時進館人數 --> |
|
|
|
<div class="pcgrs"> |
|
|
|
<div class="pcgrs_title">各场馆实时进馆人数</div> |
|
|
|
@ -120,6 +163,7 @@ export default { |
|
|
|
mounted() { |
|
|
|
this.showorders() |
|
|
|
this.cgrs_line() |
|
|
|
this.cgchart() |
|
|
|
}, |
|
|
|
// 方法 |
|
|
|
methods: { |
|
|
|
@ -127,6 +171,7 @@ export default { |
|
|
|
selitem(type) { |
|
|
|
this.klselt = type; |
|
|
|
}, |
|
|
|
// 圆柱图 |
|
|
|
showorders() { |
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
var chartDom = document.getElementById('showorders'); |
|
|
|
@ -134,31 +179,254 @@ export default { |
|
|
|
// 指定图表的配置项和数据 |
|
|
|
var option; |
|
|
|
|
|
|
|
// option = { |
|
|
|
// grid: { //整张图的大小，距离left，right，bottom的距离 |
|
|
|
// left: '3%', |
|
|
|
// right: '4%', |
|
|
|
// bottom: '3%', |
|
|
|
// containLabel: true |
|
|
|
// }, |
|
|
|
// xAxis: { |
|
|
|
// type: 'category', |
|
|
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|
|
|
// }, |
|
|
|
// yAxis: { |
|
|
|
// type: 'value' |
|
|
|
// }, |
|
|
|
|
|
|
|
// series: [ |
|
|
|
// { |
|
|
|
// data: [120, 200, 150, 80, 70, 110, 130], |
|
|
|
// type: 'bar', |
|
|
|
// showBackground: true, |
|
|
|
// color: "#2626ff", |
|
|
|
// backgroundStyle: { |
|
|
|
// color: 'rgba(180, 180, 180, 0.2)' |
|
|
|
// }, |
|
|
|
|
|
|
|
// } |
|
|
|
// ] |
|
|
|
// }; |
|
|
|
var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120] |
|
|
|
// var data = [Math.random() * 300] |
|
|
|
option = { |
|
|
|
grid: { //整张图的大小，距离left，right，bottom的距离 |
|
|
|
left: '3%', |
|
|
|
right: '4%', |
|
|
|
bottom: '3%', |
|
|
|
containLabel: true |
|
|
|
// 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: 12, |
|
|
|
interval: 0, |
|
|
|
// show: false, |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
lineStyle: { |
|
|
|
color: '#384267', |
|
|
|
}, |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#0095FF', |
|
|
|
width: 1, |
|
|
|
type: 'solid', |
|
|
|
}, |
|
|
|
show: true, |
|
|
|
}, |
|
|
|
data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00', '22:00'], |
|
|
|
type: 'category', |
|
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value' |
|
|
|
// 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: [120, 200, 150, 80, 70, 110, 130], |
|
|
|
data: data, |
|
|
|
type: 'bar', |
|
|
|
showBackground: true, |
|
|
|
color: "#2626ff", |
|
|
|
backgroundStyle: { |
|
|
|
color: 'rgba(180, 180, 180, 0.2)' |
|
|
|
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: data, |
|
|
|
type: 'pictorialBar', |
|
|
|
barMaxWidth: '15', |
|
|
|
symbolPosition: 'end', |
|
|
|
symbol: 'circle', |
|
|
|
symbolOffset: [0, '-50%'], |
|
|
|
symbolSize: [15, 7], |
|
|
|
zlevel: 2, |
|
|
|
}, |
|
|
|
{ |
|
|
|
data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300], |
|
|
|
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: [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'); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option; |
|
|
|
|
|
|
|
option = { |
|
|
|
|
|
|
|
color: ["#0780e2", "#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: [ |
|
|
|
{ value: 1048, name: 'Search Engine' }, |
|
|
|
{ value: 735, name: 'Direct' }, |
|
|
|
{ value: 580, name: 'Email' }, |
|
|
|
{ value: 484, name: 'Union Ads' }, |
|
|
|
{ value: 300, name: 'Video Ads' } |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
@ -173,87 +441,130 @@ export default { |
|
|
|
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 = { |
|
|
|
toolbox: { |
|
|
|
feature: { |
|
|
|
saveAsImage: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
grid: { |
|
|
|
left: '3%', |
|
|
|
right: '4%', |
|
|
|
bottom: '3%', |
|
|
|
containLabel: true |
|
|
|
}, |
|
|
|
xAxis: [ |
|
|
|
{ |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|
|
|
borderWidth: 0, |
|
|
|
top: 160, |
|
|
|
bottom: 160, |
|
|
|
textStyle: { |
|
|
|
color: "#fff" |
|
|
|
} |
|
|
|
], |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
type: 'value' |
|
|
|
} |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'Email', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
areaStyle: {}, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: [120, 132, 101, 134, 90, 230, 210] |
|
|
|
}, |
|
|
|
xAxis: [{ |
|
|
|
type: "category", |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'Union Ads', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
areaStyle: {}, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: [220, 182, 191, 234, 290, 330, 310] |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#0B0765', |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'Video Ads', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
areaStyle: {}, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: [150, 232, 201, 154, 190, 330, 410] |
|
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'Direct', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
areaStyle: {}, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: [320, 332, 301, 334, 390, 330, 320] |
|
|
|
splitArea: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'Search Engine', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
axisLabel: { |
|
|
|
inside: false, |
|
|
|
textStyle: { |
|
|
|
color: '#FFFFFF', |
|
|
|
fontWeight: 'normal', |
|
|
|
fontSize: '12', |
|
|
|
}, |
|
|
|
areaStyle: {}, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
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', |
|
|
|
}, |
|
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
formatter: '{value}', |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: series, |
|
|
|
} |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
|
|
|
|
@ -415,7 +726,8 @@ export default { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.klqs .klbtn span.spactive{ |
|
|
|
/* 选择年月日后的样式变化 */ |
|
|
|
.klqs .klbtn span.spactive { |
|
|
|
background-image: url('../assets/sactive_bg.png'); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
@ -426,11 +738,66 @@ export default { |
|
|
|
.cgbox { |
|
|
|
background-image: url("../assets/cgbox_bg.png"); |
|
|
|
width: 100%; |
|
|
|
height: 8.6rem; |
|
|
|
background-position: 0 0; |
|
|
|
background-size: 100%; |
|
|
|
height: 12rem; |
|
|
|
background-position: center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-top: 2.4rem; |
|
|
|
padding: 0.4rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* 饼图 */ |
|
|
|
.cgbox .cgpies { |
|
|
|
width: 40%; |
|
|
|
height: 12rem; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
.cgbox .cgleft { |
|
|
|
width: 30%; |
|
|
|
height: 12rem; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
.cgbox .cgleft>ul{ |
|
|
|
padding-left: 0.66rem; |
|
|
|
} |
|
|
|
.cgbox .cgright { |
|
|
|
width: 30%; |
|
|
|
height: 12rem; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
.cgbox .cgright>ul{ |
|
|
|
padding-left: 0.66rem; |
|
|
|
} |
|
|
|
.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 .cglist ul li span img{ |
|
|
|
width: 0.68rem; |
|
|
|
height: 0.68rem; |
|
|
|
} |
|
|
|
|
|
|
|
.cgbox .cgright { |
|
|
|
width: 30%; |
|
|
|
height: 12rem; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
/* 今日人數 */ |
|
|
|
@ -442,31 +809,33 @@ export default { |
|
|
|
.today_rs .tdrs_title { |
|
|
|
background-image: url("../assets/klqs_bg.png"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
height: 3.8rem; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 0 0; |
|
|
|
height: 3.2rem; |
|
|
|
line-height: 2.86rem; |
|
|
|
background-position: -1.04rem 0.2rem; |
|
|
|
float: left; |
|
|
|
padding-left: 4rem; |
|
|
|
padding-left: 4.6rem; |
|
|
|
font-size: 1.6rem; |
|
|
|
} |
|
|
|
|
|
|
|
/** 各場館實時 */ |
|
|
|
.pcgrs{ |
|
|
|
.pcgrs { |
|
|
|
clear: both; |
|
|
|
margin-top: 2.6rem; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.pcgrs .pcgrs_title{ |
|
|
|
|
|
|
|
.pcgrs .pcgrs_title { |
|
|
|
background-image: url("../assets/klqs_bg.png"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
height: 3.8rem; |
|
|
|
background-position: -1.04rem 0.2rem; |
|
|
|
float: left; |
|
|
|
padding-left: 4rem; |
|
|
|
padding-left: 4.6rem; |
|
|
|
font-size: 1.6rem; |
|
|
|
} |
|
|
|
.pcgrs .pcg_item{ |
|
|
|
|
|
|
|
.pcgrs .pcg_item { |
|
|
|
margin-top: 0.4rem; |
|
|
|
background-image: url("../assets/pcg_bg.png"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
@ -475,15 +844,17 @@ export default { |
|
|
|
float: left; |
|
|
|
margin-left: 2%; |
|
|
|
} |
|
|
|
.pcgrs .pcg_item .pcpos{ |
|
|
|
|
|
|
|
.pcgrs .pcg_item .pcpos { |
|
|
|
text-align: right; |
|
|
|
font-size: 0.68rem; |
|
|
|
display: block; |
|
|
|
float: right; |
|
|
|
margin-top: 1.6rem; |
|
|
|
padding-right: 0.6rem; |
|
|
|
padding-right: 1.18rem; |
|
|
|
} |
|
|
|
.pcgrs .pcg_item .pcval{ |
|
|
|
|
|
|
|
.pcgrs .pcg_item .pcval { |
|
|
|
font-size: 1.086rem; |
|
|
|
margin-top: 6rem; |
|
|
|
width: 68%; |
|
|
|
@ -491,12 +862,12 @@ export default { |
|
|
|
float: left; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.pcgrs .pcg_item .pcrate{ |
|
|
|
width: 32%; |
|
|
|
|
|
|
|
.pcgrs .pcg_item .pcrate { |
|
|
|
/* width: 32%; */ |
|
|
|
display: block; |
|
|
|
float: left; |
|
|
|
font-size: 0.86rem; |
|
|
|
margin-top: 4rem; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
</style> |
|
|
|
}</style> |
453530270@qq.com
3 years ago
