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

调整页面布局

lite
xyiege 3 years ago
parent
70d884ab1e
commit
b80e60c592
5 changed files with 156 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      src/App.vue
  2. 0
      src/assets/index/mid_bg.png
  3. 2
      src/views/cultrue/index.vue
  4. 158
      src/views/index.vue
  5. 2
      src/views/ty/index.vue

28
src/App.vue
View File

@ -1,6 +1,5 @@
<template>
<div id="app">
<dv-full-screen-container class="btgym">
<div id="app" class="btgym">
<!-- 顶部信息 -->
<div class="topnav">
<div class="toptxt">
@ -20,7 +19,6 @@
<router-view />
<!-- 底部信息 -->
<div class="footer"></div>
</dv-full-screen-container>
</div>
</template>
@ -51,28 +49,28 @@ body {
margin: 0;
padding: 0;
background: #070a24;
height: 100%;
overflow: hidden;
}
#app{
min-height: 100vh;
overflow-y: auto;
height: 100vh;
}
// 基类
.btgym {
width: 100vw;
height: 100vh;
height: 100%;
position: relative;
// background-image: url("assets/index/bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
// 顶部信息
.topnav {
width: 100%;
height: 16%;
height: 14%;
background-image: url("assets/index/topnav.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
// position: relative;
// 顶部文字
.toptxt {
@ -80,9 +78,11 @@ body {
justify-content: space-between;
.topImg {
margin-top: 1%;
width: 35%;
height: 15%;
margin-top: 0.6%;
width: 24%;
height: 12%;
margin-left: auto;
margin-right: auto;
}
.topTitle {
margin-top: 1%;
@ -97,7 +97,7 @@ body {
width: 24%;
height: 36%;
// border: 1px solid red;
margin: 1.4% auto;
margin: 16px auto;
display: flex;
justify-content: space-between;
font-weight: bold;
@ -147,7 +147,7 @@ body {
//底部信息
.footer {
width: 100%;
height: 120px;
height: 60px;
background-image: url("assets/g_footbg.png");
background-repeat: no-repeat;
background-size: 100% 100%;

0
src/assets/index/中间数据.png → src/assets/index/mid_bg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

2
src/views/cultrue/index.vue
View File

@ -7,7 +7,7 @@ export default {
return {};
},
mounted() {
let cc = window.document.getElementById("dv-full-screen-container");
let cc = window.document.getElementById("app");
// 清除其他多余的classname
if (cc.className.indexOf("wh_bg") > -1) {
cc.className = "btgym";

158
src/views/index.vue
View File

@ -60,14 +60,100 @@
</div>
</div>
<!-- 今日各场馆人数趋势 -->
<div class="gcgqs">
<div class="gcg_title">今日各场馆人数趋势</div>
<div id="kl-line" style="width: 100%; height: 180px"></div>
</div>
</div>
</div>
<!-- 中间 -->
<div class="centerbox"></div>
<div class="centerbox">
<!-- 今日进馆人数 -->
<div class="jgrs">
<span class="jgval">345,235</span>
<span class="jgdesc">今日进馆人数</span>
</div>
<!-- 本周进馆人数 -->
<div class="jgrs">
<span class="jgval">345,235</span>
<span class="jgdesc">本周进馆人数</span>
</div>
<!-- 本月进馆人数 -->
<div class="jgrs">
<span class="jgval">345,235</span>
<span class="jgdesc">本月进馆人数</span>
</div>
<!-- 会动的体育馆image -->
<div class="tygpic"><img src="../assets/index/zt.png" /></div>
<!-- 年度进馆人数 -->
<div class="ndjgrs">
<span class="nddesc">年度进馆人数</span>
<span class="ndval">33,532,890</span>
</div>
</div>
<!-- 右边 -->
<div class="rightbox"></div>
<div class="renshu">
<div class="keliu">
<div class="keliuTxt">各场馆实施实时进馆人数</div>
<!-- <div>
<canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
:width="cWidth"
:height="cHeight"
class="charts"
@click="tap"
/>
</div> -->
</div>
<div class="renshuItme">
<div style="margin-right: 2%" class="renshuChild">
<div class="title">体育场</div>
<div class="dangq">当前人数</div>
<div class="number">4,738</div>
<div class="bfb">40%</div>
</div>
<div class="renshuChild">
<div class="title">图书馆</div>
<div class="dangq">当前人数</div>
<div class="number">34,738</div>
<div class="bfb">50%</div>
</div>
<div style="margin-right: 2%" class="renshuChild">
<div class="title">体育馆</div>
<div class="dangq">当前人数</div>
<div class="number">899,738</div>
<div class="bfb">80%</div>
</div>
<div class="renshuChild">
<div class="title">文化馆</div>
<div class="dangq">当前人数</div>
<div class="number">240</div>
<div class="bfb">25%</div>
</div>
<div style="margin-right: 2%" class="renshuChild">
<div class="title">游泳场馆</div>
<div class="dangq">当前人数</div>
<div class="number">33,738</div>
<div class="bfb">75%</div>
</div>
<div class="renshuChild">
<div class="title">博物馆</div>
<div class="dangq">当前人数</div>
<div class="number">4,738</div>
<div class="bfb">40%</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -83,7 +169,7 @@ export default {
},
//创建的时候修改背景图片
created() {
let cc = window.document.getElementById("dv-full-screen-container");
let cc = window.document.getElementById("app");
// 清除其他多余的classname
let len = cc.classList.length;
@ -95,7 +181,7 @@ export default {
// 首页线图
this.home_bar();
// 折线图
// this.line_zone();
this.line_zone();
},
methods: {
//选择年月日中的某个
@ -276,6 +362,7 @@ export default {
};
</script>
<style>
.leftbox {
width: 33.33%;
float: left;
@ -284,28 +371,26 @@ export default {
.leftbox .keliu {
background-image: url("../assets/index/left_t1_bg.png");
background-size: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0 0;
height: 1.2rem;
height: 0.88rem;
color: #b5b7c5;
}
/* 客流趋势 */
.leftbox .keliu .kliu_title {
line-height: 0.88rem;
font-size: 0.38rem;
font-size: 22px;
padding-left: 2.4rem;
display: block;
/* width: 40%; */
float: left;
}
.leftbox .keliu .kliu_st {
/* width: 30%; */
float: right;
line-height: 0.88rem;
font-size: 0.26rem;
padding-top: 0.4rem;
padding-top: 0.18rem;
}
.leftbox .keliu .kliu_st span {
@ -331,18 +416,18 @@ export default {
}
/* 场馆流量预警 */
.leftbox .cgflow {
margin-top: 0.26rem;
margin-top: 0.2rem;
background-image: url("../assets/index/left_t3_bg.png");
background-size: 100%;
background-position: 0 0;
height: 3.2rem;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0 center;
height: 2.8rem;
}
/* 场馆左侧 */
.leftbox .cgflow_leftbox {
padding:106px 0 0 6%;
padding:66px 0 0 6%;
float: left;
width: 40%;
height: 100%;
}
.cgflow .cgfitem{
@ -371,12 +456,49 @@ export default {
}
/* 场馆左侧 */
.leftbox .cgflow_rightbox {
padding:106px 0 0 12%;
padding:66px 0 0 12%;
float: right;
width: 30%;
height: 100%;
margin-left: 4%;
}
/* 各场馆人流趋势 */
.leftbox .gcgqs{
float: left;
width: 100%;
}
.leftbox .gcgqs .gcg_title{
background-image:url('../assets/index/left_t2_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 0.88rem;
font-size: 22px;
line-height: 0.88rem;
padding-left: 2.2rem;
}
/* 中间的数据 */
.centerbox{
background-image: url('../assets/index/mid_bg.png');
background-position: 0 0;
background-size: 100% 100%;
width:30%;
float: left;
margin-left: 3.33%;
padding:1.3%;
margin-top:4%;
}
.centerbox .jgrs{
width: 33.33%;
float: left;
height: 120px;
}
.centerbox .tygpic{
clear: both;
width: 100%;
}
.centerbox .tygpic img{
height: 360px;
margin:12% auto;
}
/* 页面背景 */
.page_bg {
clear: both;

2
src/views/ty/index.vue
View File

@ -8,7 +8,7 @@ export default {
},
mounted() {
let cc = window.document.getElementById("dv-full-screen-container");
let cc = window.document.getElementById("app");
// 清除其他多余的classname
if (cc.className.indexOf('ty_bg') > -1) {
cc.className = "btgym";

Write Preview
Loading…
Cancel
Save