From e9df91a43b3dd50b9b697990b21ea9571c43c44d Mon Sep 17 00:00:00 2001
From: xioayue <xc@xyiege.com>
Date: Fri, 23 Jun 2023 20:40:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=80=BB=E8=A7=88=E9=87=8D?=
 =?UTF-8?q?=E6=96=B0=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index/{右1数据.png => rb_data_bg.png}  | Bin
 .../index/{右1标题.png => right_t1_bg.png} | Bin
 src/views/index.vue                           | 176 ++++++++++++------
 3 files changed, 116 insertions(+), 60 deletions(-)
 rename src/assets/index/{右1数据.png => rb_data_bg.png} (100%)
 rename src/assets/index/{右1标题.png => right_t1_bg.png} (100%)

diff --git a/src/assets/index/右1数据.png b/src/assets/index/rb_data_bg.png
similarity index 100%
rename from src/assets/index/右1数据.png
rename to src/assets/index/rb_data_bg.png
diff --git a/src/assets/index/右1标题.png b/src/assets/index/right_t1_bg.png
similarity index 100%
rename from src/assets/index/右1标题.png
rename to src/assets/index/right_t1_bg.png
diff --git a/src/views/index.vue b/src/views/index.vue
index 555ab1b..b438a27 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -94,66 +94,55 @@
         </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 class="rbox">
+        <div class="rbox_title">各场馆实施实时进馆人数</div>
+        <div class="rbox_con">
+            <!-- 各场馆实时人数 cg1 -->
+            <div class="rbitem">
+                <span class="rbcgname">体育场</span>
+                <span class="rbtitle">当前人数</span>
+                <span class="rbval">4,738</span>
+                <span class="rbrate">40%</span>
             </div>
-            <div class="renshuChild">
-              <div class="title">图书馆</div>
-              <div class="dangq">当前人数</div>
-
-              <div class="number">34,738</div>
-              <div class="bfb">50%</div>
+            <!-- 各场馆实时人数 cg2 -->
+            <div class="rbitem">
+                <span class="rbcgname">体育场</span>
+                <span class="rbtitle">当前人数</span>
+                <span class="rbval">4,738</span>
+                <span class="rbrate">40%</span>
             </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>
+            <!-- 各场馆实时人数 cg3 -->
+            <div class="rbitem">
+                <span class="rbcgname">体育场</span>
+                <span class="rbtitle">当前人数</span>
+                <span class="rbval">4,738</span>
+                <span class="rbrate">40%</span>
             </div>
-            <div class="renshuChild">
-              <div class="title">文化馆</div>
-              <div class="dangq">当前人数</div>
-
-              <div class="number">240</div>
-              <div class="bfb">25%</div>
+            <!-- 各场馆实时人数 cg4 -->
+            <div class="rbitem">
+                <span class="rbcgname">体育场</span>
+                <span class="rbtitle">当前人数</span>
+                <span class="rbval">4,738</span>
+                <span class="rbrate">40%</span>
             </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>
+            <!-- 各场馆实时人数 cg5 -->
+            <div class="rbitem">
+                <span class="rbcgname">体育场</span>
+                <span class="rbtitle">当前人数</span>
+                <span class="rbval">4,738</span>
+                <span class="rbrate">40%</span>
             </div>
-            <div class="renshuChild">
-              <div class="title">博物馆</div>
-              <div class="dangq">当前人数</div>
-
-              <div class="number">4,738</div>
-              <div class="bfb">40%</div>
+            <!-- 各场馆实时人数 cg6 -->
+            <div class="rbitem">
+                <span class="rbcgname">体育场</span>
+                <span class="rbtitle">当前人数</span>
+                <span class="rbval">4,738</span>
+                <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%;
-    padding:1.3%;
+    margin-left: 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;