完成总览重新布局

src/views/index.vue

@@ -94,66 +94,55 @@
         </div>
     </div>
     <!-- 右边 -->
-    <div class="rightbox"></div>
+    <div class="rbox">
-    <div class="renshu">
+        <div class="rbox_title">各场馆实施实时进馆人数</div>
-          <div class="keliu">
+        <div class="rbox_con">
-            <div class="keliuTxt">各场馆实施实时进馆人数</div>
+            <!-- 各场馆实时人数 cg1 -->
-            <!-- <div>
+            <div class="rbitem">
-              <canvas
+                <span class="rbcgname">体育场</span>
-                id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
+                <span class="rbtitle">当前人数</span>
-                :width="cWidth"
+                <span class="rbval">4,738</span>
-                :height="cHeight"
+                <span class="rbrate">40%</span>
-                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">
+            <!-- 各场馆实时人数 cg2 -->
-              <div class="title">图书馆</div>
+            <div class="rbitem">
-              <div class="dangq">当前人数</div>
+                <span class="rbcgname">体育场</span>
-
+                <span class="rbtitle">当前人数</span>
-              <div class="number">34,738</div>
+                <span class="rbval">4,738</span>
-              <div class="bfb">50%</div>
+                <span class="rbrate">40%</span>
             </div>
-            <div style="margin-right: 2%" class="renshuChild">
+            <!-- 各场馆实时人数 cg3 -->
-              <div class="title">体育馆</div>
+            <div class="rbitem">
-              <div class="dangq">当前人数</div>
+                <span class="rbcgname">体育场</span>
-
+                <span class="rbtitle">当前人数</span>
-              <div class="number">899,738</div>
+                <span class="rbval">4,738</span>
-              <div class="bfb">80%</div>
+                <span class="rbrate">40%</span>
             </div>
-            <div class="renshuChild">
+            <!-- 各场馆实时人数 cg4 -->
-              <div class="title">文化馆</div>
+            <div class="rbitem">
-              <div class="dangq">当前人数</div>
+                <span class="rbcgname">体育场</span>
-
+                <span class="rbtitle">当前人数</span>
-              <div class="number">240</div>
+                <span class="rbval">4,738</span>
-              <div class="bfb">25%</div>
+                <span class="rbrate">40%</span>
             </div>
-            <div style="margin-right: 2%" class="renshuChild">
+            <!-- 各场馆实时人数 cg5 -->
-              <div class="title">游泳场馆</div>
+            <div class="rbitem">
-              <div class="dangq">当前人数</div>
+                <span class="rbcgname">体育场</span>
-
+                <span class="rbtitle">当前人数</span>
-              <div class="number">33,738</div>
+                <span class="rbval">4,738</span>
-              <div class="bfb">75%</div>
+                <span class="rbrate">40%</span>
             </div>
-            <div class="renshuChild">
+            <!-- 各场馆实时人数 cg6 -->
-              <div class="title">博物馆</div>
+            <div class="rbitem">
-              <div class="dangq">当前人数</div>
+                <span class="rbcgname">体育场</span>
-
+                <span class="rbtitle">当前人数</span>
-              <div class="number">4,738</div>
+                <span class="rbval">4,738</span>
-              <div class="bfb">40%</div>
+                <span class="rbrate">40%</span>
             </div>
-          </div>
+
         </div>
+    </div>
+
   </div>
 </template>
 <script>
@@ -362,11 +351,14 @@ export default {
 };
 </script>
 <style>
-
+#index{
+    width: 100%;
+    float: left;
+}
 .leftbox {
-  width: 33.33%;
+  width: 30%;
   float: left;
-  height: 100vh;
+  /* height: 100%; */
 }
 
 .leftbox .keliu {
@@ -425,7 +417,7 @@ export default {
 }
 /* 场馆左侧 */
 .leftbox .cgflow_leftbox {
-    padding:66px 0 0 6%;
+  padding:66px 0 0 6%;
   float: left;
   width: 40%;
 }
@@ -480,10 +472,10 @@ export default {
     background-image: url('../assets/index/mid_bg.png');
     background-position: 0 0;
     background-size: 100% 100%;
-    width:30%;
+    width:29%;
     float: left;
-    margin-left: 3.33%;
+    margin-left: 3%;
-    padding:1.3%;
+    padding:1%;
     margin-top:4%;
 }
 .centerbox .jgrs{
@@ -499,6 +491,70 @@ export default {
     height: 360px;
     margin:12% auto;
 }
+/* 右边 */
+.rbox{
+    width:30%;
+    float: left;
+    margin-left: 3%;
+    color: #fff;
+}
+.rbox .rbox_title{
+    background-image: url('../assets/index/right_t1_bg.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    height: 0.86rem;
+    line-height: 0.86rem;
+    font-weight: 600;
+    font-size: 18px;
+    text-align: right;
+    padding-right: 2.6rem;
+    color: #b5b7c5;
+}
+.rbox .rbox_con{
+    width: 100%;
+    margin-top: 12px;
+}
+.rbox .rbox_con .rbitem{
+    background-image:url('../assets/index/rb_data_bg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 2.2rem;
+    width: 46%;
+    margin-left: 0.28rem;
+    float: left;
+    margin-top: 0.46rem;
+    padding-top: 0.2rem;
+}
+.rbox .rbox_con .rbitem span{
+    display: block;
+}
+.rbox .rbox_con .rbitem .rbcgname{
+    margin-top: 0.28rem;
+    color: #0096ff;
+    text-align: right;
+    padding-right: 0.28rem;
+
+}
+.rbox .rbox_con .rbitem .rbtitle{
+    text-align: left;
+    padding-left: 0.66rem;
+    padding-top: 0.1rem;
+}
+.rbox .rbox_con .rbitem .rbval{
+    font-size: 18px;
+    width: 60%;
+    height: 118px;
+    text-align: center;
+    line-height: 118px;
+}
+.rbox .rbox_con .rbitem .rbrate{
+    width: 30%;
+    float: left;
+    height: 118px;
+    text-align: center;
+    line-height: 118px;
+
+}
 /* 页面背景 */
 .page_bg {
   clear: both;