xioayue
/
btgymm
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

布局样式更新

master
luyisha 3 years ago
parent
e30406be0d
commit
07d349f7d5
6 changed files with 88 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      src/App.vue
  2. 14
      src/api/home.js
  3. BIN
      src/assets/img/ty_pcb_item_bg.png
  4. 21
      src/views/HomeView.vue
  5. 27
      src/views/TycView.vue
  6. 57
      src/views/WhView.vue

53
src/App.vue
View File

@ -2,9 +2,15 @@
<router-view /> <router-view />
<nav class="navbar"> <nav class="navbar">
<!-- &nbsp;&nbsp; --> <!-- &nbsp;&nbsp; -->
<router-link class="narRouter" to="/ty">体育</router-link> <div class="nav-bar-item">
<router-link class="narRouter" to="/">总览</router-link> <router-link class="narRouter" to="/ty">体育</router-link>
<router-link class="narRouter" to="/wh">文化</router-link> </div>
<div class="nav-bar-item">
<router-link class="narRouter" to="/">总览</router-link>
</div>
<div class="nav-bar-item">
<router-link class="narRouter" to="/wh">文化</router-link>
</div>
</nav> </nav>
</template> </template>
@ -14,38 +20,35 @@
height: 2.8rem; height: 2.8rem;
width: 100%; width: 100%;
display: block; display: block;
margin-top: 4rem;
font-size: 0.98rem; font-size: 0.98rem;
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 90; z-index: 90;
background-color: #111228;
display: flex;
justify-content: space-between;
align-items: center;
} }
.nav-bar-item{
.navbar a.router-link-exact-active { width: 33%;
/* 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;
} }
.navbar a { .navbar a {
display: block; display: block;
float: left;
width: 33.33% !important;
text-align: center; text-align: center;
line-height: 44px; line-height: 36px;
background-color: #0c2151; 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 { /* .navbar .narRouter {

14
src/api/home.js
View File

@ -4,7 +4,9 @@ import request from '@/utils/request'
// 定义接口的传参 // 定义接口的传参
const api={ 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) { export function homeBarData(param) {
return request({ 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', method: 'post',
param, param,
}) })
@ -26,7 +28,7 @@ export function homeBarData(param) {
export function allGroupNum(param) { export function allGroupNum(param) {
return request({ 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', method: 'post',
param, param,
}) })
@ -34,7 +36,7 @@ export function allGroupNum(param) {
export function allInfoDatas(param) { export function allInfoDatas(param) {
return request({ 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', method: 'post',
param, param,
}) })
@ -42,7 +44,7 @@ export function allInfoDatas(param) {
export function allGcgNumDatas(param) { export function allGcgNumDatas(param) {
return request({ 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', method: 'post',
param, param,
}) })
@ -50,7 +52,7 @@ export function allGcgNumDatas(param) {
export function allTsgInfoDatas(param) { export function allTsgInfoDatas(param) {
return request({ 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', method: 'post',
param, param,
}) })

BIN
src/assets/img/ty_pcb_item_bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 26 KiB

21
src/views/HomeView.vue
View File

@ -98,7 +98,7 @@
<!-- 今日场馆人数 --> <!-- 今日场馆人数 -->
<div class="today_rs"> <div class="today_rs">
<div class="tdrs_title"> <div class="tdrs_title">
<p></p>今日各馆趋势 今日各馆趋势
</div> </div>
<div id="tdrs" style="width:100%;height:12rem;"></div> <div id="tdrs" style="width:100%;height:12rem;"></div>
</div> </div>
@ -108,7 +108,7 @@
<div class="pcgrs_title">各场馆实时进馆人数</div> <div class="pcgrs_title">各场馆实时进馆人数</div>
<!-- 場館實時 --> <!-- 場館實時 -->
<div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId"> <div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId">
<span class="pcpos">体育场</span> <span class="pcpos">{{item.groupName}}</span>
<p class="pcval">{{ item.allEnter }}</p> <p class="pcval">{{ item.allEnter }}</p>
<span class="pcrate" <span class="pcrate"
:class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 }]">{{ :class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 }]">{{
@ -564,6 +564,7 @@ export default {
borderWidth: 0, borderWidth: 0,
top: 160, top: 160,
bottom: 160, bottom: 160,
right: 20,
textStyle: { textStyle: {
color: "#fff" color: "#fff"
} }
@ -938,22 +939,20 @@ export default {
.cgbox .cgleft { .cgbox .cgleft {
width: 30%; width: 30%;
height: 12rem;
float: left; float: left;
} }
.cgbox .cgleft>ul { .cgbox .cgleft>ul {
padding-left: 0.66rem; padding-left: 0rem;
} }
.cgbox .cgright { .cgbox .cgright {
width: 30%; width: 30%;
height: 12rem;
float: left; float: left;
} }
.cgbox .cgright>ul { .cgbox .cgright>ul {
padding-left: 0.66rem; padding-left: 0.5rem;
} }
.cgbox .cglist { .cgbox .cglist {
@ -962,7 +961,7 @@ export default {
.cgbox .cglist ul { .cgbox .cglist ul {
display: block; display: block;
width: 100%; /* width: 100%; */
} }
.cgbox .cglist ul li { .cgbox .cglist ul li {
@ -1005,7 +1004,7 @@ export default {
/* 今日人數 */ /* 今日人數 */
.today_rs { .today_rs {
margin-top: 2.6rem; margin-top: 1rem;
width: 100%; width: 100%;
} }
@ -1013,13 +1012,13 @@ export default {
background-image: url("../assets/img/left_t2_bg.png"); background-image: url("../assets/img/left_t2_bg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-position: 0 0;
height: 3.2rem;
line-height: 2.8rem;
background-position: -1.04rem 0.2rem; background-position: -1.04rem 0.2rem;
height: 3.2rem;
line-height: 0rem;
padding-left: 4.6rem; padding-left: 4.6rem;
font-size: 1.1rem; font-size: 1.1rem;
color: gray; color: gray;
padding-bottom: 1rem;
} }
/** 各場館實時 */ /** 各場館實時 */

27
src/views/TycView.vue
View File

@ -55,7 +55,7 @@
<!-- 各场馆人数趋势 --> <!-- 各场馆人数趋势 -->
<div class="gcgrs"> <div class="gcgrs">
<div class="gcgrs_title">各场馆人数趋势</div> <div class="gcgrs_title">各场馆人流趋势</div>
<div id="gc_charts" class="gcgrs_charts"></div> <div id="gc_charts" class="gcgrs_charts"></div>
</div> </div>
@ -194,31 +194,25 @@
.pcgrbox .pcbcon { .pcgrbox .pcbcon {
width: 100%; width: 100%;
margin-top: 2rem; margin-top: 2rem;
display: flex;
justify-content: space-around;
} }
.pcgrbox .pcbcon .pcbitem { .pcgrbox .pcbcon .pcbitem {
width: 30%; 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 { .pcgrbox .pcbcon .pcbitem div:first {
margin-left: 0; margin-left: 0;
} }
.pcgrbox .pcbcon .pcbitem .pcbval { .pcgrbox .pcbcon .pcbitem .pcbval {
height: 5rem; /* height: 230px; */
width: 5rem; /* width: 315px; */
background-image: url('../assets/img/ty_pcb_val.png'); 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-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -235,7 +229,7 @@
font-size: 0.8rem; font-size: 0.8rem;
width: 5rem; width: 5rem;
height: 2rem; height: 2rem;
margin-top: 0.42rem; margin-top: 0.7rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
line-height: 2rem; line-height: 2rem;
@ -258,7 +252,7 @@
} }
.gcgrs .gcgrs_charts { .gcgrs .gcgrs_charts {
margin-top: 2rem; /* margin-top: 2rem; */
width: 100%; width: 100%;
height: 19rem; height: 19rem;
} }
@ -523,6 +517,7 @@ export default {
borderWidth: 0, borderWidth: 0,
top: 240, top: 240,
bottom: 240, bottom: 240,
right: 20,
textStyle: { textStyle: {
color: "#fff" color: "#fff"
} }

57
src/views/WhView.vue
View File

@ -255,7 +255,7 @@
} }
.gcgrs .gcgrs_charts { .gcgrs .gcgrs_charts {
margin-top: 1.8rem; margin-top: 1rem;
width: 100%; width: 100%;
height: 18rem; height: 18rem;
} }
@ -305,7 +305,7 @@ export default {
this.getTsgInfoDatas() this.getTsgInfoDatas()
}, },
methods: { methods: {
// 山峰图 // 山峰图---24小时进馆人数趋势
cgsf_line() { cgsf_line() {
var chartDom = document.getElementById('gcins_charts'); var chartDom = document.getElementById('gcins_charts');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
@ -322,8 +322,8 @@ export default {
} }
}, },
grid: { grid: {
left: '3%', left: '-8%',
right: '3%', right: '4%',
bottom: '3%', bottom: '3%',
top: '10%', top: '10%',
containLabel: true containLabel: true
@ -370,7 +370,9 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#0095FF', color: '#0095FF',
} align: 'left',
margin: 40
},
}], }],
series: [{ series: [{
// name: '厂用电量', // name: '厂用电量',
@ -444,7 +446,7 @@ export default {
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
// // 各场馆人数趋势
gc_line() { gc_line() {
var chartDom = document.getElementById("gc_charts"); var chartDom = document.getElementById("gc_charts");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
@ -506,7 +508,7 @@ export default {
// backgroundColor: "#141f56", // backgroundColor: "#141f56",
legend: { legend: {
top: 0, top: 0,
right: 30, right: 10,
itemGap: 15, itemGap: 15,
itemWidth: 20, itemWidth: 20,
itemHeight: 20, itemHeight: 20,
@ -550,6 +552,8 @@ export default {
grid: { grid: {
borderWidth: 0, borderWidth: 0,
top: 240, top: 240,
left: 30,
right: 10,
bottom: 240, bottom: 240,
textStyle: { textStyle: {
color: "#fff" color: "#fff"
@ -628,6 +632,11 @@ export default {
value: 323, value: 323,
}, },
]; ];
let valueColor = [
{ color1: '#15224C', color2: '#FF0042', unit: ' 人 '},
{ color1: '#15224C', color2: '#FED700', unit: ' 册 '},
{ color1: '#15224C', color2: '#00FEC5', unit: ' 册 '}
]
var libraryIcons = { var libraryIcons = {
'Lend': '/img/wh_right1.png', 'Lend': '/img/wh_right1.png',
'Still': '/img/wh_right2.png', 'Still': '/img/wh_right2.png',
@ -802,7 +811,7 @@ export default {
lineHeight: 42, lineHeight: 42,
fontSize: 14, fontSize: 14,
formatter: function (value, index) { formatter: function (value, index) {
return data[index].value + ' 册 ' return data[index].value + valueColor[index].unit
}, },
} }
}], }],
@ -831,28 +840,24 @@ export default {
// align: left, // align: left,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient( color: (params) => {
0, var index = params.dataIndex;
0, if (params.dataIndex >= valueColor.length) {
1, index = params.dataIndex - valueColor.length;
0, }
[{ return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0, offset: 0,
color: '#A71A2B' color: valueColor[index].color1
},
{
offset: 0.7,
color: '#A71A2B'
}, },
{ {
offset: 0.8,
color: valueColor[index].color2
},{
offset: 1, offset: 1,
color: '#5EDEE5' color: valueColor[index].color2
} }]);
], },
barBorderRadius: 0
false
),
barBorderRadius: 10
}, },
// color: '#A71A2B', // color: '#A71A2B',
barBorderRadius: 4, barBorderRadius: 4,

Write Preview
Loading…
Cancel
Save