调整体育page

src/views/ty/index.vue

@@ -1,5 +1,69 @@
 <template>
-  <div id="ty"></div>
+  <div id="ty">
+
+    <div class="main">
+      <div class="left">
+        <div class="tiyuBla">
+          <div style="position: absolute; right: 28%; top: 52%">体育</div>
+        </div>
+
+        <div class="tongji"></div>
+
+        <div class="bfb">
+          <div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div>
+
+          <div class="num">24,352,345</div>
+
+          <!-- <div class="cntTxt">
+                     <div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
+                     <div style="color: #0082FF;font-size: 14px;">人流饱和</div>
+                  </div> -->
+
+          <div class="cntTxt">
+            <canvas
+              id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
+              :width="cWidth"
+              :height="cHeight"
+              class="charts"
+              @click="tap"
+            />
+          </div>
+
+          <div class="rsType">
+            <div class="typeItem">
+              <div>安静</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/ty/quiet.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>舒适</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/ty/soft.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>拥挤</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/ty/crowd.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="right">
+        <div class="item" ></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+      </div>
+    </div>
+
+  </div>
 </template>
 <script>
 export default {
@@ -25,3 +89,127 @@ export default {
   background-image: url("../../assets/ty/tybg.jpg") !important;
 }
 </style>
+<style lang="less" scoped>
+.main {
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 30%;
+    height: 75vh;
+    // border: 1px solid red;
+    margin-left: 2%;
+    margin-top: -4%;
+    .tiyuBla {
+      width: 100%;
+      height: 40%;
+      background-image: url("../../assets/ty/ins_title_bg.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: white;
+      font-size: 38px;
+      font-weight: bold;
+      position: relative;
+    }
+
+    .tongji {
+      width: 100%;
+      height: 35%;
+      border: 1px solid #019ade;
+    }
+
+    .bfb {
+      width: 100%;
+      height: 25%;
+      background-image: url("../../assets/ty/pins_bh.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .renshu {
+        span{
+          margin-right: 5px;
+          img{
+            width: 10px;
+            height: 12px;
+          }
+        }
+        position: absolute;
+        top: 30%;
+        left: 10%;
+        color: #8199bd;
+        font-weight: bold;
+        font-size: 14px;
+      }
+      .num {
+        color: white;
+        font-weight: bold;
+        font-size: 20px;
+        position: absolute;
+        top: 45%;
+        left: 6%;
+      }
+      .cntTxt {
+        width: 20%;
+        height: 60%;
+        // border: 1px solid red;
+        position: absolute;
+        top: -5%;
+        left: 30.5%;
+        text-align: center;
+        padding-top: 2.5%;
+      }
+      .rsType {
+        width: 30%;
+        height: 35%;
+        // border: 1px solid red;
+        position: absolute;
+        top: 30%;
+        right: 4%;
+        display: flex;
+        justify-content: space-between;
+        .typeItem {
+          width: 30%;
+          height: 95%;
+          text-align: center;
+          color: #687c9e;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .right {
+    margin-top: 3%;
+    width: 65%;
+    height: 66vh;
+    // border: 1px solid #019ade;
+    display: flex;
+    flex-wrap: wrap;
+    // align-items: center;
+    align-content: center;
+    justify-content: center;
+    background-image: url("../../assets/ty/vbig_bg.png") ;
+    background-size:contain;
+    background-repeat:no-repeat;
+    .item{
+      width: 40%; 
+      height: 40%; 
+      margin-top: 5px;
+      background-image: url("../../assets/ty/vsmall_bg.png") ;
+      background-size:contain;
+      background-repeat:no-repeat;
+    }
+    .item:nth-child(2),.item:nth-child(4){
+      margin-right: 60px;
+    }
+  }
+
+  .charts {
+    width: 225px;
+    height: 150px;
+  }
+  .charts1 {
+    width: 550px;
+    height: 250px;
+  }
+}
+</style>