diff --git a/src/App.vue b/src/App.vue index 49d83f5..b14b087 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,9 +2,15 @@ @@ -14,38 +20,35 @@ height: 2.8rem; width: 100%; display: block; - margin-top: 4rem; font-size: 0.98rem; left: 0; bottom: 0; z-index: 90; + background-color: #111228; + display: flex; + justify-content: space-between; + align-items: center; } - -.navbar a.router-link-exact-active { - - /* background-color: #2132fa; - padding-bottom: 10px; - background-image: linear-gradient(#2132fa, #1d37fb); */ - width: 100px; - /* text-align: center; */ - line-height: 44px; - /* background-color: #2132fa; */ - background-image: linear-gradient(#2132fa, #1d37fb); - background-repeat: no-repeat; - background-size: 50% 70%; - background-position: 50% 50%; - box-sizing: border-box; - padding: 0 0.9rem; - +.nav-bar-item{ + width: 33%; } .navbar a { display: block; - float: left; - width: 33.33% !important; text-align: center; - line-height: 44px; - background-color: #0c2151; + line-height: 36px; + width: 50%; + margin: 0 auto; + border-radius: 5px; +} +/* .navbar a:hover{ + background: transparent; +} */ +.navbar a.router-link-exact-active { + width: 50%; + margin: 0 auto; + line-height: 36px; + background-color: #026AFF; } /* .navbar .narRouter { diff --git a/src/api/home.js b/src/api/home.js index 74fa906..926aaa8 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -4,7 +4,9 @@ import request from '@/utils/request' // 定义接口的传参 const api={ // 日客流趋势 - daily_klqs:'pass.passcc/allGroupTimeNum' + daily_klqs:'pass.passcc/allGroupTimeNum', + // baseUrl: 'http://btgym.xingtongworld.com', + baseUrl: 'http://192.168.66.16' } // 获取群组 @@ -18,7 +20,7 @@ export function allGroupTimeNum(param) { export function homeBarData(param) { return request({ - url: 'http://btgym.xingtongworld.com/index.php?s=/api/pass.passcc/allGroupTimeNum&granularity=daily', + url: api.baseUrl+'/index.php?s=/api/pass.passcc/allGroupTimeNum&granularity=daily', method: 'post', param, }) @@ -26,7 +28,7 @@ export function homeBarData(param) { export function allGroupNum(param) { return request({ - url: 'http://btgym.xingtongworld.com/index.php?s=/api/pass.passcc/allGroupNum', + url: api.baseUrl+'/index.php?s=/api/pass.passcc/allGroupNum', method: 'post', param, }) @@ -34,7 +36,7 @@ export function allGroupNum(param) { export function allInfoDatas(param) { return request({ - url: 'http://btgym.xingtongworld.com/index.php?s=/api/pass.passcc/realTimeData', + url: api.baseUrl+'/index.php?s=/api/pass.passcc/realTimeData', method: 'post', param, }) @@ -42,7 +44,7 @@ export function allInfoDatas(param) { export function allGcgNumDatas(param) { return request({ - url: 'http://btgym.xingtongworld.com/index.php?s=/api/pass.passcc/toDayGroupsEnterNum', + url: api.baseUrl+'/index.php?s=/api/pass.passcc/toDayGroupsEnterNum', method: 'post', param, }) @@ -50,7 +52,7 @@ export function allGcgNumDatas(param) { export function allTsgInfoDatas(param) { return request({ - url: 'http://btgym.xingtongworld.com/index.php?s=/api/library.pass/allFlowTrends', + url: api.baseUrl+'/index.php?s=/api/library.pass/allFlowTrends', method: 'post', param, }) diff --git a/src/assets/img/ty_pcb_item_bg.png b/src/assets/img/ty_pcb_item_bg.png index e71b9e3..4913362 100644 Binary files a/src/assets/img/ty_pcb_item_bg.png and b/src/assets/img/ty_pcb_item_bg.png differ diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 0ad094c..96039a1 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -98,7 +98,7 @@
-

今日各馆趋势 + 今日各馆趋势
@@ -108,7 +108,7 @@
各场馆实时进馆人数
- 体育场 + {{item.groupName}}

{{ item.allEnter }}

{{ @@ -564,6 +564,7 @@ export default { borderWidth: 0, top: 160, bottom: 160, + right: 20, textStyle: { color: "#fff" } @@ -938,22 +939,20 @@ export default { .cgbox .cgleft { width: 30%; - height: 12rem; float: left; } .cgbox .cgleft>ul { - padding-left: 0.66rem; + padding-left: 0rem; } .cgbox .cgright { width: 30%; - height: 12rem; float: left; } .cgbox .cgright>ul { - padding-left: 0.66rem; + padding-left: 0.5rem; } .cgbox .cglist { @@ -962,7 +961,7 @@ export default { .cgbox .cglist ul { display: block; - width: 100%; + /* width: 100%; */ } .cgbox .cglist ul li { @@ -1005,7 +1004,7 @@ export default { /* 今日人數 */ .today_rs { - margin-top: 2.6rem; + margin-top: 1rem; width: 100%; } @@ -1013,13 +1012,13 @@ export default { background-image: url("../assets/img/left_t2_bg.png"); background-repeat: no-repeat; background-size: 100% 100%; - background-position: 0 0; - height: 3.2rem; - line-height: 2.8rem; 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; } /** 各場館實時 */ diff --git a/src/views/TycView.vue b/src/views/TycView.vue index 1ccea6b..898a45b 100644 --- a/src/views/TycView.vue +++ b/src/views/TycView.vue @@ -55,7 +55,7 @@
-
各场馆人数趋势
+
各场馆人流趋势
@@ -194,31 +194,25 @@ .pcgrbox .pcbcon { width: 100%; margin-top: 2rem; + display: flex; + justify-content: space-around; } .pcgrbox .pcbcon .pcbitem { width: 30%; - height: 5rem; - float: left; - margin-left: 3%; - /* background-image: url('../..//src/assets//img//ty_pcb_item_bg.png'); - background-size: 100% 100%; - background-position: 100%, 100%; - background-repeat: no-repeat; */ } -.pcgrbox .pcbcon .pcbitem div { - float: left; -} .pcgrbox .pcbcon .pcbitem div:first { margin-left: 0; } .pcgrbox .pcbcon .pcbitem .pcbval { - height: 5rem; - width: 5rem; - background-image: url('../assets/img/ty_pcb_val.png'); + /* height: 230px; */ + /* width: 315px; */ + width: 110px; + /* background-image: url('../assets/img/ty_pcb_val.png'); */ + background-image: url('../assets/img/ty_pcb_item_bg.png'); background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100%; @@ -235,7 +229,7 @@ font-size: 0.8rem; width: 5rem; height: 2rem; - margin-top: 0.42rem; + margin-top: 0.7rem; margin-left: auto; margin-right: auto; line-height: 2rem; @@ -258,7 +252,7 @@ } .gcgrs .gcgrs_charts { - margin-top: 2rem; + /* margin-top: 2rem; */ width: 100%; height: 19rem; } @@ -523,6 +517,7 @@ export default { borderWidth: 0, top: 240, bottom: 240, + right: 20, textStyle: { color: "#fff" } diff --git a/src/views/WhView.vue b/src/views/WhView.vue index c4bf248..03f2630 100644 --- a/src/views/WhView.vue +++ b/src/views/WhView.vue @@ -255,7 +255,7 @@ } .gcgrs .gcgrs_charts { - margin-top: 1.8rem; + margin-top: 1rem; width: 100%; height: 18rem; } @@ -305,7 +305,7 @@ export default { this.getTsgInfoDatas() }, methods: { - // 山峰图 + // 山峰图---24小时进馆人数趋势 cgsf_line() { var chartDom = document.getElementById('gcins_charts'); var myChart = echarts.init(chartDom); @@ -322,8 +322,8 @@ export default { } }, grid: { - left: '3%', - right: '3%', + left: '-8%', + right: '4%', bottom: '3%', top: '10%', containLabel: true @@ -370,7 +370,9 @@ export default { }, axisLabel: { color: '#0095FF', - } + align: 'left', + margin: 40 + }, }], series: [{ // name: '厂用电量', @@ -444,7 +446,7 @@ export default { option && myChart.setOption(option); }, - // + // 各场馆人数趋势 gc_line() { var chartDom = document.getElementById("gc_charts"); var myChart = echarts.init(chartDom); @@ -506,7 +508,7 @@ export default { // backgroundColor: "#141f56", legend: { top: 0, - right: 30, + right: 10, itemGap: 15, itemWidth: 20, itemHeight: 20, @@ -550,6 +552,8 @@ export default { grid: { borderWidth: 0, top: 240, + left: 30, + right: 10, bottom: 240, textStyle: { color: "#fff" @@ -628,6 +632,11 @@ export default { value: 323, }, ]; + let valueColor = [ + { color1: '#15224C', color2: '#FF0042', unit: ' 人 '}, + { color1: '#15224C', color2: '#FED700', unit: ' 册 '}, + { color1: '#15224C', color2: '#00FEC5', unit: ' 册 '} + ] var libraryIcons = { 'Lend': '/img/wh_right1.png', 'Still': '/img/wh_right2.png', @@ -802,7 +811,7 @@ export default { lineHeight: 42, fontSize: 14, formatter: function (value, index) { - return data[index].value + ' 册 ' + return data[index].value + valueColor[index].unit }, } }], @@ -831,28 +840,24 @@ export default { // align: left, itemStyle: { normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 1, - 0, - [{ + color: (params) => { + var index = params.dataIndex; + if (params.dataIndex >= valueColor.length) { + index = params.dataIndex - valueColor.length; + } + return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, - color: '#A71A2B' - }, - { - offset: 0.7, - color: '#A71A2B' + color: valueColor[index].color1 }, { + offset: 0.8, + color: valueColor[index].color2 + },{ offset: 1, - color: '#5EDEE5' - } - ], - - false - ), - barBorderRadius: 10 + color: valueColor[index].color2 + }]); + }, + barBorderRadius: 0 }, // color: '#A71A2B', barBorderRadius: 4,