diff --git a/src/assets/img/left_t2_bg.png b/src/assets/img/left_t2_bg.png new file mode 100644 index 0000000..84da731 Binary files /dev/null and b/src/assets/img/left_t2_bg.png differ diff --git a/src/assets/img/left_t3_bg.png b/src/assets/img/left_t3_bg.png new file mode 100644 index 0000000..5d739f2 Binary files /dev/null and b/src/assets/img/left_t3_bg.png differ diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index ac2917f..b44e857 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -260,9 +260,11 @@ export default { xAxis: { axisLabel: { color: '#FFFFFF', - fontSize: 12, + fontSize: 10, interval: 0, - // show: false, + rotate:45, + // show: true, + // inside:false }, axisTick: { lineStyle: { @@ -281,8 +283,8 @@ export default { }, show: true, }, - data: this.kltdata, - //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'], + // data: this.kltdata, + 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: { @@ -399,6 +401,21 @@ export default { } }, ], + tooltip: { + show: "true", + trigger: 'item', + backgroundColor: 'rgba(0,0,0,0.7)', // 背景 + padding: [8, 10], //内边距 + textStyle: { + color: '#fff' + }, + extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 + formatter: function (params) { + if (params.seriesName != "") { + return params.name + ' : 有 ' + params.value + ' 人'; + } + }, + }, }; @@ -520,7 +537,19 @@ export default { }) } option = { - + tooltip: { + trigger: "axis", + axisPointer: { // 坐标轴指示器,坐标轴触发有效 + type: 'line', // 默认为直线,可选为:'line' | 'shadow' + lineStyle: { + color: '#57617B' + } + }, + formatter: '{b}
{a0}: {c0}
{a1}: {c1}
{a2}: {c2}
{a3}: {c3}
{a4}: {c4}
{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, @@ -849,8 +878,9 @@ export default { } .klqs .klbtn { - float: left; + float: right; margin-left: 1.06rem; + margin-right: 1rem; } .klqs .klbtn span { @@ -964,7 +994,7 @@ export default { } .today_rs .tdrs_title { - background-image: url("../assets/img/klqs_bg.png"); + background-image: url("../assets/img/left_t3_bg.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0; @@ -984,7 +1014,7 @@ export default { } .pcgrs .pcgrs_title { - background-image: url("../assets/img/klqs_bg.png"); + background-image: url("../assets/img/left_t2_bg.png"); background-repeat: no-repeat; background-size: 100%; height: 3.8rem; @@ -1023,7 +1053,8 @@ export default { width: 69%; display: block; float: left; - text-align: center; + text-align: left; + margin-left: 2rem; } /* .pcgrs .pcg_item:nth-child(6) .pcval { @@ -1036,8 +1067,8 @@ export default { } */ .pcgrs .pcg_item .pcrate { - width: 32%; - height: 3.3rem; + width: 30%; + height: 3.4rem; line-height: 3.3rem; display: block; float: left; @@ -1045,8 +1076,8 @@ export default { margin-top: 3.78rem; text-align: center; position: absolute; - bottom: 3.5rem; - right: 0.8rem; + bottom: 3.45rem; + right: 1.33rem; background-image: url('../assets/img/安静.png'); background-size: 100% 100%; background-position: 100% 100%; diff --git a/src/views/TycView.vue b/src/views/TycView.vue index 850889a..48fe2a2 100644 --- a/src/views/TycView.vue +++ b/src/views/TycView.vue @@ -173,13 +173,15 @@ line-height: 1.8rem; padding-left: 2.02rem; } + /* 各场馆人次占比 */ -.pcgrbox{ +.pcgrbox { margin-top: 1.6rem; padding-bottom: 4rem; height: 8rem; } -.pcgrbox .pcb_title{ + +.pcgrbox .pcb_title { background-image: url("../assets/img/tyc_tbg.png"); background-position: 0 0; background-repeat: no-repeat; @@ -188,11 +190,13 @@ line-height: 1.8rem; padding-left: 2.02rem; } -.pcgrbox .pcbcon{ + +.pcgrbox .pcbcon { width: 100%; margin-top: 2rem; } -.pcgrbox .pcbcon .pcbitem{ + +.pcgrbox .pcbcon .pcbitem { width: 30%; height: 5rem; float: left; @@ -202,13 +206,16 @@ background-position: 100%, 100%; background-repeat: no-repeat; */ } -.pcgrbox .pcbcon .pcbitem div{ + +.pcgrbox .pcbcon .pcbitem div { float: left; } -.pcgrbox .pcbcon .pcbitem div:first{ + +.pcgrbox .pcbcon .pcbitem div:first { margin-left: 0; } -.pcgrbox .pcbcon .pcbitem .pcbval{ + +.pcgrbox .pcbcon .pcbitem .pcbval { height: 5rem; width: 5rem; background-image: url('../assets/img/ty_pcb_val.png'); @@ -219,7 +226,8 @@ line-height: 5rem; text-align: center; } -.pcgrbox .pcbcon .pcbitem .pcbdesc{ + +.pcgrbox .pcbcon .pcbitem .pcbdesc { background-image: url('../assets/img/ty_pcb_desc.png'); background-position: 0 0; background-repeat: no-repeat; @@ -236,23 +244,23 @@ /* 各场馆人数趋势 */ .gcgrs { - margin-top: 1.06rem; + margin-top: 1.06rem; } .gcgrs .gcgrs_title { - background-image: url("../assets/img/wh_tbg.png"); - background-position: 0 0; - background-repeat: no-repeat; - background-size: 100% 100%; - height: 1.8rem; - line-height: 1.4rem; - padding-left: 2.02rem; + background-image: url("../assets/img/wh_tbg.png"); + background-position: 0 0; + background-repeat: no-repeat; + background-size: 100% 100%; + height: 1.8rem; + line-height: 1.4rem; + padding-left: 2.02rem; } .gcgrs .gcgrs_charts { - margin-top: 2rem; - width: 100%; - height: 19rem; + margin-top: 2rem; + width: 100%; + height: 19rem; }