调整资源

src/components/index/index.vue

@@ -69,7 +69,7 @@
           this.backVal = 3
         }
         else if(val == 3){
-          this.$router.push({ path: '/stadium/stadium' })
+          this.$router.push({ path: '/culture' })
           this.backVal = 2
         }
       },

src/components/library/index.vue

@@ -24,7 +24,7 @@
         </div>
 
         <div class="bfb">
-          <div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
+          <div class="renshu"><span><img src="../../assets/tiyuguan/rliu.png"></span>进馆人数</div>
 
           <div class="num">24,352,345</div>
 
@@ -48,21 +48,21 @@
               <div>安静</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/安静.png"
+                src="../../assets/tiyuguan/quiet.png"
               />
             </div>
             <div class="typeItem">
               <div>舒适</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/舒适.png"
+                src="../../assets/tiyuguan/soft.png"
               />
             </div>
             <div class="typeItem">
               <div>拥挤</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/拥挤.png"
+                src="../../assets/tiyuguan/crowd.png"
               />
             </div>
           </div>
@@ -366,7 +366,7 @@ export default {
     .tiyuBla {
       width: 100%;
       height: 40%;
-      background-image: url("../../assets/tiyuguan/进馆人流标题.png");
+      background-image: url("../../assets/tiyuguan/ins_title_bg.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
       color: white;

src/components/stadium/stadium.vue

@@ -24,7 +24,7 @@
         </div>
 
         <div class="bfb">
-          <div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
+          <div class="renshu"><span><img src="../../assets/tiyuguan/rliu.png"></span>进馆人数</div>
 
           <div class="num">24,352,345</div>
 
@@ -48,21 +48,21 @@
               <div>安静</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/安静.png"
+                src="../../assets/tiyuguan/quiet.png"
               />
             </div>
             <div class="typeItem">
               <div>舒适</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/舒适.png"
+                src="../../assets/tiyuguan/soft.png"
               />
             </div>
             <div class="typeItem">
               <div>拥挤</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/拥挤.png"
+                src="../../assets/tiyuguan/crowd.png"
               />
             </div>
           </div>
@@ -366,7 +366,7 @@ export default {
     .tiyuBla {
       width: 100%;
       height: 40%;
-      background-image: url("../../assets/tiyuguan/进馆人流标题.png");
+      background-image: url("../../assets/tiyuguan/ins_title_bg.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
       color: white;

src/components/tiyuchang/tiyuchang copy.vue

@@ -24,7 +24,7 @@
         </div>
 
         <div class="bfb">
-          <div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
+          <div class="renshu"><span><img src="../../assets/tiyuguan/rliu.png"></span>进馆人数</div>
 
           <div class="num">24,352,345</div>
 
@@ -48,21 +48,21 @@
               <div>安静</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/安静.png"
+                src="../../assets/tiyuguan/quiet.png"
               />
             </div>
             <div class="typeItem">
               <div>舒适</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/舒适.png"
+                src="../../assets/tiyuguan/soft.png"
               />
             </div>
             <div class="typeItem">
               <div>拥挤</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/拥挤.png"
+                src="../../assets/tiyuguan/crowd.png"
               />
             </div>
           </div>
@@ -366,7 +366,7 @@ export default {
     .tiyuBla {
       width: 100%;
       height: 40%;
-      background-image: url("../../assets/tiyuguan/进馆人流标题.png");
+      background-image: url("../../assets/tiyuguan/ins_title_bg.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
       color: white;

src/components/tiyuchang/tiyuchang.vue

@@ -3,7 +3,7 @@
     <div class="main">
       <div class="left">
         <div class="tiyuBla">
-          <div style="position: absolute; right: 28%; top: 52%">体育场</div>
+          <div style="position: absolute; right: 28%; top: 52%">体育</div>
         </div>
 
         <div class="tongji">
@@ -24,7 +24,7 @@
         </div>
 
         <div class="bfb">
-          <div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
+          <div class="renshu"><span><img src="../../assets/tiyuguan/rliu.png"></span>进馆人数</div>
 
           <div class="num">24,352,345</div>
 
@@ -48,21 +48,21 @@
               <div>安静</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/安静.png"
+                src="../../assets/tiyuguan/quiet.png"
               />
             </div>
             <div class="typeItem">
               <div>舒适</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/舒适.png"
+                src="../../assets/tiyuguan/soft.png"
               />
             </div>
             <div class="typeItem">
               <div>拥挤</div>
               <img
                 style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/tiyuguan/拥挤.png"
+                src="../../assets/tiyuguan/crowd.png"
               />
             </div>
           </div>
@@ -369,7 +369,7 @@ export default {
     .tiyuBla {
       width: 100%;
       height: 40%;
-      background-image: url("../../assets/tiyuguan/进馆人流标题.png");
+      background-image: url("../../assets/tiyuguan/ins_title_bg.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
       color: white;

src/router/index.js

@@ -32,6 +32,11 @@ export default new Router({
           name: "stadium",
           component: stadium
         },
+        {
+          path: '/culture',
+          name: "culture",
+          component: () => import(/* webpackChunkName: "culture" */ '@/views/Culture'),
+        },
         {
           path: '/library/library',
           name: "library",

src/views/Culture.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="culture">
+    <div class="main">
+      <div class="left">
+        <div class="tiyuBla">
+          <div style="position: absolute; right: 28%; top: 52%">文化</div>
+        </div>
+
+        <div class="tongji">
+          <canvas
+            id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1"
+            :width="cWidth1"
+            :height="cHeight1"
+            class="charts1"
+            @click="tap1"
+          />
+        </div>
+
+        <div class="bfb">
+          <div class="renshu">
+            <span><img src="../assets/tiyuguan/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/tiyuguan/quiet.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>舒适</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/soft.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>拥挤</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/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{
+    name:"culture",
+    data(){
+        return{
+
+        }
+    },
+    // 
+    mounted(){
+
+    },
+    methods:{
+
+    }
+}
+</script>
+    
+    <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/tiyuguan/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/tiyuguan/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/tiyuguan/视频大框.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    .item {
+      width: 40%;
+      height: 40%;
+      margin-top: 5px;
+      background-image: url("../../assets/tiyuguan/视频小框.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>