完成体育视图

src/views/TycView.vue

@@ -33,6 +33,26 @@
       <div class="gcins_title">进馆人数统计</div>
       <div id="gcins_charts" style="height:16rem"></div>
     </div>
+    <!-- 各场馆人次占比 -->
+    <div class="pcgrbox">
+      <div class="pcb_title">各场馆人次占比</div>
+      <div class="pcbcon">
+
+        <div class="pcbitem">
+          <div class="pcbval">50%</div>
+          <div class="pcbdesc">体育场</div>
+        </div>
+        <div class="pcbitem">
+          <div class="pcbval">50%</div>
+          <div class="pcbdesc">体育场</div>
+        </div>
+        <div class="pcbitem">
+          <div class="pcbval">50%</div>
+          <div class="pcbdesc">体育场</div>
+        </div>
+      </div>
+    </div>
+
     <!-- 各场馆人数趋势 -->
     <div class="gcgrs">
       <div class="gcgrs_title">各场馆人数趋势</div>
@@ -153,6 +173,62 @@
   line-height: 1.8rem;
   padding-left: 2.02rem;
 }
+/* 各场馆人次占比 */
+.pcgrbox{
+  margin-top: 1.6rem;
+  padding-bottom: 4rem;
+  height: 8rem;
+}
+.pcgrbox .pcb_title{
+  background-image: url("../assets/tyc_tbg.png");
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 1.8rem;
+  line-height: 1.8rem;
+  padding-left: 2.02rem;
+}
+.pcgrbox .pcbcon{
+  width: 100%;
+  margin-top: 2rem;
+}
+.pcgrbox .pcbcon .pcbitem{
+  width: 30%;
+  height: 5rem;
+  float: left;
+  margin-left: 3%;
+}
+.pcgrbox .pcbcon .pcbitem div{
+  float: left;
+}
+.pcgrbox .pcbcon .pcbitem div:first{
+  margin-left: 0;
+}
+.pcgrbox .pcbcon .pcbitem .pcbval{
+  height: 5rem;
+  width: 5rem;
+  background-image: url('../assets/ty_pcb_val.png');
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-radius: 100%;
+  line-height: 5rem;
+  text-align: center;
+}
+.pcgrbox .pcbcon .pcbitem .pcbdesc{
+  background-image: url('../assets/ty_pcb_desc.png');
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  font-size: 0.6rem;
+  width: 5rem;
+  height: 1.6rem;
+  margin-top: 0.42rem;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.2rem;
+  text-align: center;
+}
 
 /* 各场馆人数趋势 */
 .gcgrs {
@@ -163,9 +239,9 @@
     background-image: url("../assets/wh_tbg.png");
     background-position: 0 0;
     background-repeat: no-repeat;
-    background-size: 100%;
+    background-size: 100% 100%;
     height: 1.8rem;
-    line-height: 1.8rem;
+    line-height: 1.4rem;
     padding-left: 2.02rem;
 }