文化页面的布局

src/views/cultrue/index.vue

@@ -6,9 +6,67 @@
         <span class="wh_big_tit">文化</span>
         <span class="wh_small">图书馆|文化馆|博物馆</span>
       </div>
+      <!-- 总计进馆总人数 -->
+      <div class="inszone">
+        <span class="institle">总计进馆人数</span>
+        <!-- 今日进馆人数 -->
+        <div class="insval">
+          <img src="../../assets/wh/td_ins.png"/>
+          <span class="insv">234,098</span>
+          <span class="inst">今日进馆人数</span>
+        </div>
+        <!-- 本月进馆人数 -->
+        <div class="insval">
+          <img src="../../assets/wh/tm_ins.png"/>
+          <span class="insv">234,098</span>
+          <span class="inst">本月进馆人数</span>
+        </div>
+        <!-- 本年进馆人数 -->
+        <div class="insval">
+          <img src="../../assets/wh/tyear_ins.png"/>
+          <span class="insv">234,098</span>
+          <span class="inst">本年进馆人数</span>
+        </div>
+      </div>
+      <!-- 24h ins 统计图 -->
+      <div class="dinszone">
+        <span class="dins_title">24小时总进馆人流趋势</span>
+        <!-- 柱状统计图 -->
+        <div class="dins_chart" id="dinschart"></div>
+      </div>
     </div>
     <!-- 中间 -->
+    <div class="center">
+      <div class="ctop">24小时进馆人数</div>
+      <div class="cmid">
+        <div class="cmdiv">
+          <span class="cmdval">890,098</span>
+          <span class="cmdt">博物馆</span>
+        </div>
+        <div class="cmdiv">
+          <span class="cmdval">890,098</span>
+          <span class="cmdt">文化馆</span>
+        </div>
+      </div>
+      <div class="cbuttom">
+        <span class="cbval">23,334</span>
+        <span class="cbt">图书馆</span>
+      </div>
+    </div>
     <!-- 右侧 -->
+    <div class="rightbox">
+      <!-- 各场馆人流趋势 -->
+      <div class="pcgrliu">
+        <span class="pcg_title">各场馆人流趋势</span>
+        <div id="pcgchart" style="width: 100%;height: 12vh;"></div>
+      </div>
+      <!-- 图书馆数据统计 -->
+      <div class="tsgrliu">
+        <span class="tsg_title">图书馆数据统计</span>
+        <div id="tsgchart" style="width: 100%;height: 12vh;"></div>
+      </div>
+    </div>
+
   </div>
 </template>
 <script>
@@ -46,7 +104,7 @@ export default {
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: 0 0;
-  height: 4.2rem;
+  height: 3.8rem;
 }
 .leftbox .lb_wht span{
   display: block;
@@ -63,7 +121,208 @@ export default {
   text-align: right;
   padding-right: 10px;
 }
-
+/* 总计进馆人数 */
+.inszone{
+  width: 100%;
+  float: left;
+  height: 2.4rem;
+  background-image:url("../../assets/wh/ins_count.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-top: 0.48rem;
+}
+.inszone .institle{
+  color: #00c6ff;
+  padding-left: 0.4rem;
+  line-height: 0.38rem;
+  height: 0.38rem;
+  display: block;
+}
+.inszone .insval{
+  width: 30%;
+  height: 1.68rem;
+  float: left;
+  margin-left: 0.16rem;
+}
+.inszone .insval:first{
+  margin-left: 0;
+}
+.inszone .insval img{
+  padding-top: 0.268rem;
+  display: block;
+  text-align: center;
+  height: 0.78rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.inszone .insval span{
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+.inszone .insval .insv{
+  height: 0.48rem;
+  line-height: 0.48rem;
+  font-size: 22px;
+}
+.inszone .insval .inst{
+  color:#6a6c7c;
+  font-size: 12px;
+  height: 0.12rem;
+  line-height: 0.12rem;
+}
+/* 24小时进馆总趋势 */
+.dinszone{
+  margin-top: 0.22rem;
+  width: 100%;
+  height: 0.48rem;
+  float: left;
+}
+.dinszone .dins_title{
+  display: block;
+  height: 0.38rem;
+  line-height: 0.28rem;
+  color: #fff;
+  font-size: 0.186rem;
+  background-image: url('../../assets/wh/dins_title_bg.png');
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  padding-left: 0.56rem;
+}
+/* 中间部位 */
+.center{
+  margin-top: 4vh;
+  width: 50%;
+  float: left;
+  height: 78vh;
+  padding-top: 2vh;
+  background-image: url('../../assets/wh/center_bg.png');
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: 100% 100%;
+}
+.center .ctop{
+  margin-top:1vh ;
+  height: 4vh;
+  line-height: 4vh;
+  color: #fff;
+  font-size: 24px;
+  text-align: center;
+}
+/* 中间中部 */
+.center .cmid{
+  padding-top: 32vh;
+  width: 100%;
+  height: 12vh;
+}
+.center .cmid .cmdiv{
+  width: 60%;
+  float: left;
+  padding-top: 3vh;
+}
+.center .cmid .cmdiv span{
+  display: block;
+  width: 100%;
+  float: left;
+}
+.center .cmid .cmdiv .cmdval{
+  color: #fff;
+  font-size: 18px;
+  padding-left: 12%;
+}
+.center .cmid .cmdiv .cmdt{
+  color: #00c6ff;
+  font-size: 14px;
+  width: 6vw;
+  height: 2vh;
+  text-align: center;
+  background: url('../../assets/wh/ct_bg.png') no-repeat;
+  background-size: 100% 100%;
+  background-position: center center;
+  margin-left: 10%;
+}
+.center .cmid .cmdiv:nth-child(2){
+  padding-right: 10%;
+  text-align: right;
+  width: 20%;
+  padding-left: 9.8%;
+}
+.center .cmid .cmdiv:nth-child(2) .cmdval{
+  text-align: right;
+  padding-right: 30% !important;
+  margin-right: 16%;
+}
+.center .cmid .cmdiv:nth-child(2) .cmdt{
+  /* padding-right:30% !important; */
+  margin-right: 25%;
+  margin-left: 40%;
+}
+/* 中间底部 */
+.center .cbuttom{
+  margin-top: 12vh;
+  padding-top: 6vh;
+  height: 6vh;
+  line-height: 6vh;
+  text-align: center;
+}
+.center .cbuttom span{
+  display: block;
+  float: left;
+}
+.center .cbuttom .cbval{
+  padding-top: 3vh;
+  font-size: 22px;
+  color: #fff;
+  height: 2vh;
+  line-height: 2vh;
+  width: 100%;
+}
+.center .cbuttom .cbt{
+  color: #00c6ff;
+  height: 2vh;
+  line-height: 2vh;
+  background: url('../../assets/wh/ct_bg.png') no-repeat;
+  background-size: 100% 100%;
+  background-position: center center;
+  width: 6vw;
+  margin-left: 45%;
+  margin-top: 1vh;
+}
+/* 右边 */
+.rightbox{
+  width: 25%;
+  float: left;
+}
+.rightbox .pcgrliu{
+  margin-top: 10vh;
+  height: 26vh;
+}
+.rightbox .pcgrliu .pcg_title{
+  display: block;
+  height: 4vh;
+  line-height: 3vh;
+  background:url('../../assets/wh/pcg_t_bg.png') no-repeat;
+  background-size: 100% 100%;
+  background-position: 0 center;
+  padding-left: 0.68rem;
+  color: #fff;
+}
+.rightbox .tsgrliu{
+  margin: 4vh 0 0 0;
+  height: 26vh;
+}
+.rightbox .tsgrliu .tsg_title{
+  display: block;
+  height: 4vh;
+  line-height: 3vh;
+  background:url('../../assets/wh/tsg_t_bg.png') no-repeat;
+  background-size: 100% 100%;
+  background-position: 0 center;
+  padding-left: 0.68rem;
+  color: #fff;
+}
+/* 全局背景 */
 .wh_bg {
   clear: both;
   background-image: url("../../assets/wh/whbg.jpg") !important;