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.
892 lines
20 KiB
892 lines
20 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>23,556</p>
|
|
</div>
|
|
</div>
|
|
<!-- 今日进馆 -->
|
|
<div class="numbox">
|
|
<span class="numicon"><img src="../assets/img/icon01.png" /></span>
|
|
<div class="numdiv">
|
|
<p class="ndtitle">23566</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">23566</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">23566</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>体育场</span>
|
|
<span>20%</span>
|
|
<span><img src="../assets/img/tyc_icon.png" /></span>
|
|
</li>
|
|
<li>
|
|
<span>体育场</span>
|
|
<span>20%</span>
|
|
<span><img src="../assets/img/tyc_icon.png" /></span>
|
|
</li>
|
|
<li>
|
|
<span>体育场</span>
|
|
<span>20%</span>
|
|
<span><img src="../assets/img/tyc_icon.png" /></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 場館圖表 -->
|
|
<div id="cgchart" class="cgpies"></div>
|
|
<!-- 右侧 -->
|
|
<div class="cglist cgright">
|
|
<ul>
|
|
<li>
|
|
<span><img src="../assets/img/tyc_icon.png" /></span>
|
|
<span>20%</span>
|
|
<span>体育场</span>
|
|
</li>
|
|
<li>
|
|
<span><img src="../assets/img/tyc_icon.png" /></span>
|
|
<span>20%</span>
|
|
<span>体育场</span>
|
|
</li>
|
|
<li>
|
|
<span><img src="../assets/img/tyc_icon.png" /></span>
|
|
<span>20%</span>
|
|
<span>体育场</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 今日场馆人数 -->
|
|
<div class="today_rs">
|
|
<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>
|
|
<!-- 場館實時 -->
|
|
<div class="pcg_item">
|
|
<span class="pcpos">体育场</span>
|
|
<p class="pcval">23,456</p>
|
|
<span class="pcrate">40%</span>
|
|
</div>
|
|
<!-- #2 -->
|
|
<div class="pcg_item">
|
|
<span class="pcpos">体育场</span>
|
|
<p class="pcval">23,456</p>
|
|
<span class="pcrate">40%</span>
|
|
</div>
|
|
<!-- 3 -->
|
|
<div class="pcg_item">
|
|
<span class="pcpos">体育场</span>
|
|
<p class="pcval">23,456</p>
|
|
<span class="pcrate">40%</span>
|
|
</div>
|
|
<!-- 4 -->
|
|
<div class="pcg_item">
|
|
<span class="pcpos">体育场</span>
|
|
<p class="pcval">23,456</p>
|
|
<span class="pcrate">40%</span>
|
|
</div>
|
|
<!-- 5 -->
|
|
<div class="pcg_item">
|
|
<span class="pcpos">体育场</span>
|
|
<p class="pcval">23,456</p>
|
|
<span class="pcrate">40%</span>
|
|
</div>
|
|
<!-- 6 -->
|
|
<div class="pcg_item">
|
|
<span class="pcpos">体育场</span>
|
|
<p class="pcval">23,456</p>
|
|
<span class="pcrate">40%</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import * as btApi from '../api/home'
|
|
|
|
export default {
|
|
name: 'HomeView',
|
|
data() {
|
|
return {
|
|
// 年月日选中的样式,默认日
|
|
klselt: "d",
|
|
}
|
|
},
|
|
mounted() {
|
|
this.showorders()
|
|
this.cgrs_line()
|
|
this.cgchart()
|
|
//
|
|
this.btgetdata()
|
|
},
|
|
// 方法
|
|
methods: {
|
|
// 获取对应的参数
|
|
btgetdata(){
|
|
//
|
|
btApi.allGroupTimeNum({'granularity':'daily'}).then(res=>{
|
|
console.log(res)
|
|
}).catch(err=>{
|
|
console.log("发生错误:")
|
|
console.log(err)
|
|
});
|
|
},
|
|
//选择年月日中的某个
|
|
selitem(type) {
|
|
this.klselt = type;
|
|
},
|
|
// 圆柱图
|
|
showorders() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var chartDom = document.getElementById('showorders');
|
|
var myChart = echarts.init(chartDom);
|
|
// 指定图表的配置项和数据
|
|
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 = {
|
|
// 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',
|
|
},
|
|
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: data,
|
|
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: 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' }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
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 = {
|
|
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 160,
|
|
bottom: 160,
|
|
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);
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
</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%;
|
|
background-position: 0 0;
|
|
padding-top: 2.26rem;
|
|
height: 20rem;
|
|
}
|
|
|
|
.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: 60%;
|
|
margin: 0.6rem auto;
|
|
text-align: center;
|
|
height: 3rem;
|
|
padding-top: 1.4rem;
|
|
}
|
|
|
|
.gymbox .gymnum span {
|
|
font-size: 0.86rem;
|
|
display: block;
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
.gymbox .gymnum p {
|
|
line-height: 1.2;
|
|
height: 26px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: block;
|
|
}
|
|
|
|
/* 數據box */
|
|
.numbox {
|
|
width: 100%;
|
|
height: 4rem;
|
|
line-height: 1.2;
|
|
margin-top: 2.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.4rem;
|
|
font-size: 1.08rem;
|
|
}
|
|
|
|
.numbox .numdiv .nddesc {
|
|
color: #ccc;
|
|
font-size: 0.4rem;
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
|
|
/** 客流趋势 */
|
|
.klqs {
|
|
margin-top: 3rem;
|
|
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; */
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.klqs .klbtn {
|
|
float: left;
|
|
margin-left: 1.06rem;
|
|
}
|
|
|
|
.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%;
|
|
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;
|
|
}
|
|
|
|
/* 今日人數 */
|
|
.today_rs {
|
|
margin-top: 2.6rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.today_rs .tdrs_title {
|
|
background-image: url("../assets/img/klqs_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
height: 3.2rem;
|
|
line-height: 2.86rem;
|
|
background-position: -1.04rem 0.2rem;
|
|
padding-left: 4.6rem;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
/** 各場館實時 */
|
|
.pcgrs {
|
|
clear: both;
|
|
margin-top: 2.6rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.pcgrs .pcgrs_title {
|
|
background-image: url("../assets/img/klqs_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
height: 3.8rem;
|
|
background-position: -1.04rem 0.2rem;
|
|
padding-left: 4.6rem;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.pcgrs .pcg_item {
|
|
margin-top: 0.4rem;
|
|
background-image: url("../assets/img/pcg_bg.png");
|
|
background-repeat: no-repeat;
|
|
height: 12rem;
|
|
width: 48%;
|
|
float: left;
|
|
margin-left: 2%;
|
|
}
|
|
|
|
.pcgrs .pcg_item .pcpos {
|
|
text-align: right;
|
|
font-size: 0.68rem;
|
|
display: block;
|
|
float: right;
|
|
margin-top: 1.6rem;
|
|
padding-right: 1.18rem;
|
|
}
|
|
|
|
.pcgrs .pcg_item .pcval {
|
|
font-size: 1.086rem;
|
|
margin-top: 6rem;
|
|
width: 68%;
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
}
|
|
|
|
.pcgrs .pcg_item .pcrate {
|
|
/* width: 32%; */
|
|
display: block;
|
|
float: left;
|
|
font-size: 0.86rem;
|
|
margin-top: 4rem;
|
|
text-align: center;
|
|
}</style>
|