页面

package-lock.json

@@ -9,6 +9,11 @@
       "resolved": "https://r.cnpmjs.org/@babel/parser/-/parser-7.22.5.tgz",
       "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q=="
     },
+    "@qiun/vue-ucharts": {
+      "version": "2.5.0-20230101",
+      "resolved": "https://r.cnpmjs.org/@qiun/vue-ucharts/-/vue-ucharts-2.5.0-20230101.tgz",
+      "integrity": "sha512-HZ4q6CBjzheAmocr//jY2nV3wO2Xu+2CX6NjwUD+uM1Jo/ewlnNIL2TiRRqtwMBhyaIoJh4nCzmnoeT7kUvlxA=="
+    },
     "@types/q": {
       "version": "1.5.5",
       "resolved": "https://r2.cnpmjs.org/@types/q/-/q-1.5.5.tgz",

package.json

@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@qiun/vue-ucharts": "^2.5.0-20230101",
     "less": "^4.1.3",
     "less-loader": "^4.1.0",
     "vue": "^2.5.2",

src/components/index/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="hello">
-      <div class="main" >
+      <div class="main" :class="backVal == 1 ? 'bla1' : 'bla'" >
 
         <div class="topCard">
           <div class="item">
@@ -10,14 +10,32 @@
           </div>
 
           <div class="selectItem">
-            <div @click="clickItme(1)" class="tiyuchang guan" :class="selectVal == 1 ? 'tiyuchangBackS' : 'tiyuguanBackD'"><div class="txt">体育场</div></div>
+            <div @click="clickItme(1)" class="tiyuchang guan" :class="selectVal == 1 ? 'tiyuchangBackS' : 'tiyuguanBackD'">
-            <div @click="clickItme(2)" class="tiyuguan guan" :class="selectVal == 2 ? 'tiyuguanBackS' : 'tiyuguanBackD'"><div class="txt">体育馆</div></div>
+              <div class="txt">体育场</div>
-            <div @click="clickItme(3)" class="zonglan guan" :class="selectVal == 3 ? 'zonglanBackS' : 'zonglanBackD'"><div class="txt">总览</div></div>
+            </div>
-            <div @click="clickItme(4)" class="youyong guan" :class="selectVal == 4 ? 'youyongBackS' : 'youyongBackD'"><div class="txt">游泳场馆</div></div>
+            <div @click="clickItme(2)" class="tiyuguan guan" :class="selectVal == 2 ? 'tiyuguanBackS' : 'tiyuguanBackD'">
-            <div @click="clickItme(5)" class="bowu guan" :class="selectVal == 5 ? 'bowuS' : 'bowuD'"><div class="txt">博物馆</div></div>
+              <div class="txt">体育馆</div>
+            </div>
+            <div @click="clickItme(3)" class="zonglan guan" :class="selectVal == 3 ? 'zonglanBackS' : 'zonglanBackD'">
+              <div class="txt">总览</div>
+            </div>
+            <div @click="clickItme(4)" class="youyong guan" :class="selectVal == 4 ? 'youyongBackS' : 'youyongBackD'">
+              <div class="txt">游泳场馆</div>
+            </div>
+            <div @click="clickItme(5)" class="bowu guan" :class="selectVal == 5 ? 'bowuS' : 'bowuD'">
+              <div class="txt">博物馆</div>
+            </div>
           </div>
         </div>
+        
+         
+        <router-view></router-view>
+        
+        
+
+        <div class="botCard">
 
+        </div>
       </div>
     </div>
   </template>
@@ -27,25 +45,58 @@
     data () {
       return {
         msg: 'Welcome to Your Vue.js App',
-        selectVal: ''
+        selectVal: 3,
+        keliuList: [
+          {
+            unit: '年'
+          },
+          {
+            unit: '月'
+          },
+          {
+            unit: '日'
+          }
+        ],
+        selectVal1: '年',
+        backVal: 3
 
       }
     },
+    mounted() {
+      this.$router.push({ path: '/zongLan/zongLan' })
+    },
     methods: {
       clickItme(val){
         this.selectVal = val
+        if(val == 1){
+          this.$router.push({ path: '/tiyuchang/tiyuchang' })
+          this.backVal = 1
+        }
+        if(val == 3){
+          this.$router.push({ path: '/zongLan/zongLan' })
+          this.backVal = 3
+        }
+      },
+      clickQushi(val){
+        this.selectVal1 = val
       }
     }
   }
   </script>
   
   <style lang="less" scoped>
+  .bla{
+    background-image: url('../../assets/index/背景.jpg');
+  }
+  .bla1{
+    background-image: url('../../assets/tiyuguan/背景.jpg');
+  }
     .main{
       width: 100vw;
       height: 100vh;
-      background-image: url('../../assets/index/背景.jpg');
       background-size: 100% 100%;
       background-repeat: no-repeat;
+      position: relative;
       .topCard{
         width: 100%;
         height: 20%;
@@ -86,6 +137,7 @@
             text-align: center;
             color: #00BDF9;
             font-weight: bold;
+            font-size: 1em;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -163,6 +215,16 @@
           }
         }
       }
+
+      .botCard{
+        width: 100%;
+        height: 12%;
+        background-image: url('../../assets/index/底部.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        bottom: 0;
+      }
     }
   </style>
   

src/components/tiyuchang/tiyuchang.vue

@@ -0,0 +1,389 @@
+<template>
+    
+
+    <div class="hello">
+         <div class="main">
+           
+           <div class="left">
+              <div class="tiyuBla">
+                <div style="position: absolute;right: 28%;top: 52%;">体育场</div>
+              </div>
+
+              <div class="tongji">
+                <canvas id="etELhoiEDSDBklnwaLybhInLlmnhnHuv" :width="cWidth1" :height="cHeight1" class="charts1" @click="tap1"/>
+              </div>
+
+              <div class="bfb">
+                  <div class="renshu">进馆人数</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/安静.png" />
+                     </div>
+                     <div class="typeItem">
+                        <div>舒适</div>
+                        <img style="width: 45%;height: 40%;margin-top: 10%;" src="../../assets/tiyuguan/舒适.png" />
+                     </div>
+                     <div class="typeItem">
+                        <div>拥挤</div>
+                        <img style="width: 45%;height: 40%;margin-top: 10%;" src="../../assets/tiyuguan/拥挤.png" />
+                     </div>
+                  </div>
+              </div>
+           </div>
+
+
+
+           <div class="right">
+               <div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
+               <div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
+               <div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
+               <div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
+
+               
+           </div>
+
+
+           
+        </div>
+
+        
+      </div>
+  </template>
+  
+  <script>
+  import uCharts from '../../utils/u-charts';
+  function getH5Offset(e) {
+    e.mp = {
+      changedTouches: []
+    };
+    e.mp.changedTouches.push({
+      x: e.offsetX,
+      y: e.offsetY
+    });
+    return e;
+  }
+  var uChartsInstance = {};
+  export default {
+    data() {
+      return {
+        cWidth: 225,
+        cHeight: 150,
+        cWidth1: 550,
+        cHeight1: 250
+      };
+    },
+    mounted() {
+      this.getServerData();
+      this.getServerData1()
+    },
+    methods: {
+        getServerData1() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+        let res = {
+            categories: ["2018","2019","2020","2021","2022","2023"],
+            series: [
+              {
+                name: "成交量A",
+                linearColor: [
+                  [
+                    0,
+                    "#1890FF"
+                  ],
+                  [
+                    0.25,
+                    "#00B5FF"
+                  ],
+                  [
+                    0.5,
+                    "#00D1ED"
+                  ],
+                  [
+                    0.75,
+                    "#00E6BB"
+                  ],
+                  [
+                    1,
+                    "#90F489"
+                  ]
+                ],
+                data: [15,45,15,45,15,45]
+              },
+              {
+                name: "成交量B",
+                linearColor: [
+                  [
+                    0,
+                    "#91CB74"
+                  ],
+                  [
+                    0.25,
+                    "#2BDCA8"
+                  ],
+                  [
+                    0.5,
+                    "#2AE3A0"
+                  ],
+                  [
+                    0.75,
+                    "#C4D06E"
+                  ],
+                  [
+                    1,
+                    "#F2D375"
+                  ]
+                ],
+                data: [55,85,55,85,55,85]
+              },
+              {
+                name: "成交量C",
+                linearColor: [
+                  [
+                    0,
+                    "#FAC858"
+                  ],
+                  [
+                    0.33,
+                    "#FFC371"
+                  ],
+                  [
+                    0.66,
+                    "#FFC2B2"
+                  ],
+                  [
+                    1,
+                    "#FA7D8D"
+                  ]
+                ],
+                data: [95,125,95,125,95,125]
+              }
+            ]
+          };
+        this.drawCharts1('etELhoiEDSDBklnwaLybhInLlmnhnHuv', res);
+      }, 50);
+    },
+    drawCharts1(id,data){
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "line",
+        context: ctx,
+        width: this.cWidth1,
+        height: this.cHeight1,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+        padding: [15,10,0,15],
+        dataLabel: false,
+        dataPointShape: false,
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true
+        },
+        yAxis: {
+          gridType: "dash",
+          dashLength: 2,
+          data: [
+            {
+              min: 0,
+              max: 150
+            }
+          ]
+        },
+        extra: {
+          line: {
+            type: "curve",
+            width: 2,
+            activeType: "hollow",
+            linearType: "custom"
+          }
+        }
+      });
+    },
+
+
+
+      getServerData() {
+        //模拟从服务器获取数据时的延时
+        setTimeout(() => {
+          //模拟服务器返回数据
+          let res = {
+              series: [
+                {
+                  name: "一班",
+                  data: 0.75
+                }
+              ]
+            };
+          this.drawCharts('PvqalmgjxGnTCXyTJMOKLkntpbgRzGND', res);
+        }, 50);
+      },
+      drawCharts(id,data){
+        const ctx = document.getElementById(id).getContext("2d");
+        uChartsInstance[id] = new uCharts({
+          type: "arcbar",
+          context: ctx,
+          width: this.cWidth,
+          height: this.cHeight,
+          series: data.series,
+          animation: true,
+          background: "#FFFFFF",
+          color: ["#FFFF00"],
+          padding: undefined,
+          title: {
+            name: "75%",
+            fontSize: 30,
+            color: "#fff",
+            fontWeight: "bold"
+          },
+          subtitle: {
+            name: "人流饱和",
+            fontSize: 12,
+            color: "#0082FF"
+          },
+          extra: {
+            arcbar: {
+              type: "circle",
+              width: 10,
+              backgroundColor: "#070A24",
+              startAngle: 1.5,
+              endAngle: 0.25,
+              gap: 2,
+            }
+          }
+        });
+      },
+      tap(e){
+        uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+        uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+      },
+      tap1(e){
+        uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+        uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+      }
+    }
+  };
+  </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/进馆人流标题.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/人流密集度.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            .renshu{
+               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%;
+        margin-right: 2%;
+        width: 63%;
+        height: 66vh;
+        border: 1px solid #019ADE;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-around;
+     }
+
+     .charts{
+      width: 225px;
+      height: 150px;
+    }
+    .charts1{
+        width: 550px;
+      height: 250px;
+  }
+    }
+  </style>

src/components/zongLan/zongLan.vue

@@ -0,0 +1,387 @@
+<template>
+    <div class="hello">
+        
+         
+        <div class="content">
+
+          <div class="qushi">
+            <div class="keliu">
+              <div class="keliuTxt">客流趋势</div>
+              <div class="keliuBtn">
+                <div v-for="(item, index) in keliuList" :key="index" class="btnItem" @click="clickQushi(item.unit)" :class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'">
+                  <div class="txt">{{ item.unit }}</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="tongjitu">
+              
+            </div>
+
+            <div class="qushiBaifb">
+               <div class="baifbLeft">
+                <div class="baiFbitem">
+                  <div style="font-size: 14px;">体育场</div>
+                  <div style="color: white;font-size: 18px;font-weight: bold;margin-left: 10%;">20%</div>
+                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育场图例.png" />
+                </div>
+                <div class="baiFbitem">
+                  <div style="font-size: 14px;">体育馆</div>
+                  <div style="color: white;font-size: 18px;font-weight: bold;margin-left: 10%;">12%</div>
+                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
+                </div>
+                <div class="baiFbitem">
+                  <div style="font-size: 14px;">游泳场馆</div>
+                  <div style="color: white;font-size: 18px;font-weight: bold;">12%</div>
+                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
+                </div>
+               </div>
+               <div class="baiFbRight">
+                <div class="baiFbitem">
+                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育场图例.png" />
+                  <div style="color: white;font-size: 18px;font-weight: bold;margin-right: 10%;">20%</div>
+                  <div style="font-size: 14px;">图书馆</div>
+                </div>
+                <div class="baiFbitem">
+                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
+                  <div style="color: white;font-size: 18px;font-weight: bold;margin-right: 10%;">12%</div>
+                  <div style="font-size: 14px;">文化馆</div>
+                </div>
+                <div class="baiFbitem">
+                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
+                  <div style="color: white;font-size: 18px;font-weight: bold;margin-right: 10%;">12%</div>
+                  <div style="font-size: 14px;">博物馆</div>
+                </div>
+               </div>
+            </div>
+
+
+            <div class="keliu keliuTu1">
+              <div class="keliuTxt">今日各场馆人数趋势</div>
+            </div>
+          </div>
+
+          
+
+
+          <div class="middle">
+            <div style="position: absolute;color: white;top: 11%;left: 18%;font-weight: bold;">345,235</div>
+            <div style="position: absolute;color: white;top: 11%;left: 43.5%;font-weight: bold;">2,345,235</div>
+            <div style="position: absolute;color: white;top: 11%;left: 71%;font-weight: bold;">2,345万</div>
+            
+            <img src="../../assets/index/主体.png" class="aimImg" style="width: 70%;height: 50%;position: absolute;left: 15%;top: 29%;" />
+
+
+            <div style="position: absolute;color: white;left: 42%;bottom: 15.5%;font-weight: bold;">年度进馆人数</div>
+            <div style="position: absolute;color: white;left: 39%;bottom: 8%;font-weight: bold;font-size: 24px;">33,532,890</div>
+          </div>
+
+          <div class="renshu">
+            <div class="keliu">
+              <div class="keliuTxt">各场馆实施实时进馆人数</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">
+                <div class="title">图书馆</div> 
+                <div class="dangq">当前人数</div>
+                
+                <div class="number">34,738</div>
+                <div class="bfb">50%</div>
+              </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>
+              </div>
+              <div class="renshuChild">
+                <div class="title">文化馆</div> 
+                <div class="dangq">当前人数</div>
+                
+                <div class="number">240</div>
+                <div class="bfb">25%</div>
+              </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>
+              </div>
+              <div class="renshuChild">
+                <div class="title">博物馆</div> 
+                <div class="dangq">当前人数</div>
+                
+                <div class="number">4,738</div>
+                <div class="bfb">40%</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        
+
+      </div>
+  </template>
+  
+  <script>
+  export default {
+    data () {
+      return {
+        msg: 'Welcome to Your Vue.js App',
+        selectVal: 1,
+        keliuList: [
+          {
+            unit: '年'
+          },
+          {
+            unit: '月'
+          },
+          {
+            unit: '日'
+          }
+        ],
+        selectVal1: '年'
+
+      }
+    },
+    methods: {
+      clickItme(val){
+        this.selectVal = val
+      },
+      clickQushi(val){
+        this.selectVal1 = val
+      }
+    }
+  }
+  </script>
+  
+  <style lang="less" scoped>
+      .content{
+        height: auto;
+        width: 100%;
+        margin-top: -3%;
+        display: flex;
+        justify-content: space-between;
+        // border: 1px solid red;  
+        .qushi{
+          width: 32%;
+          // border: 1px solid red;
+          margin-left: 1%;
+          .keliu{
+            width: 100%;
+            height: 8vh;
+            background-image: url(../../assets/index/左1标题.png);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            .keliuTxt{
+              position: absolute;
+              left: 28%;
+              top: 25%;
+              color: white;
+              font-size: 18px;
+              color: #B5B7C5;
+              font-weight: bold;
+            }
+            .keliuBtn{
+              width: 20%;
+              height: 50%;
+              // border: 1px solid red;
+              position: absolute;
+              right: 0;
+              bottom: 15%;
+              display: flex;
+              justify-content: space-between;
+              // align-items: center;
+              .btnItemD{
+                color: #006BFF;
+                background-image: url('../../assets/index/年月日1.png');
+              }
+              .btnItemS{
+                color: white;
+                background-image: url('../../assets/index/年月日2.png');
+              }
+              .btnItem{
+                cursor:pointer;
+                width: 30%;
+                height: 95%;
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                text-align: center;
+                line-height: 200%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+              }
+            }
+          }
+          .keliuTu1{
+            background-image: url('../../assets/index/左2标题.png');
+          }
+          .tongjitu{
+            width: 100%;
+            height: 16vh;
+            // border: 1px solid red;
+          }
+          .qushiBaifb{
+            width: 100%;
+            height: 30vh;
+            // border: 1px solid red;
+            background-image: url('../../assets/index/左1-2背景.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .baifbLeft{
+              width: 25%;
+              height: 30%;
+              // border: 1px solid red;
+              .baiFbitem{
+                width: 100%;
+                height: 30%;
+                color: #0096FF;
+                // border: 1px solid red;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              }
+            }
+            .baiFbRight{
+              width: 25%;
+              height: 30%;
+              // border: 1px solid red;
+              .baiFbitem{
+                width: 100%;
+                height: 30%;
+                color: #0096FF;
+                // border: 1px solid red;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              }
+            }
+          }
+        }
+
+        .middle{
+          width: 30%;
+          height: 70vh;
+          background-image: url('../../assets/index/中间数据.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          margin-top: 4%;
+          position: relative;
+          .aimImg{
+            animation: firstdiv 2s linear 2s infinite alternate;
+          }
+          @keyframes firstdiv{
+              0%{
+                  opacity: 1;
+                  margin-top: 0%;
+              }
+              25%{
+                  opacity: 0.7;
+                  margin-top: 3%;
+              }
+              50%{
+                  opacity: 0.5;
+                  margin-top: 5%;
+              }
+              75%{
+                  opacity: 0.7;
+                  margin-top: 3%;
+              }
+              100%{
+                  opacity: 1;
+                  margin-top: 0%;
+              }
+            }
+        }
+        
+        .renshu{
+          width: 32%;
+          // height: 50vh;
+          margin-right: 1%;
+          // border: 1px solid red;
+          .keliu{
+            width: 100%;
+            height: 8vh;
+            background-image: url(../../assets/index/右1标题.png);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            .keliuTxt{
+              position: absolute;
+              right: 28%;
+              top: 25%;
+              color: white;
+              font-size: 18px;
+              color: #B5B7C5;
+              font-weight: bold;
+            }
+          }
+          
+          .renshuItme{
+              width: 100%;
+              height: auto;
+              display: flex;
+              flex-wrap: wrap;
+              .renshuChild{
+                width: 45%;
+                height: 23vh;
+                background-image: url('../../assets/index/右1数据.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                margin-bottom: 2%;
+                position: relative;
+                .title{
+                  color: #0095FF;
+                  font-weight: bold;
+                  position: absolute;
+                  top: 19%;
+                  right: 10%;
+                  font-size: 14px;
+                }
+                .dangq{
+                  position: absolute;
+                  top: 31.5%;
+                  left: 20%;
+                  color: white;
+                  font-weight: bold;
+                  font-size: 14px;
+                }
+                .number{
+                  color: white;
+                  position: absolute;
+                  font-size: 22px;
+                  font-weight: bold;
+                  bottom: 18%;
+                  left: 10%;
+                }
+                .bfb{
+                  position: absolute;
+                  bottom: 18%;
+                  right: 15%;
+                  color: #00D7FF;
+                  font-weight: bold;
+                }
+              }
+            }
+
+        }
+      }
+    
+  </style>
+  

src/router/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
 import index from '@/components/index'
+import zongLan from '@/components/zongLan/zongLan'
+import tiyuchang from '@/components/tiyuchang/tiyuchang'
 
 Vue.use(Router)
 
@@ -10,7 +12,19 @@ export default new Router({
     {
       path: '/',
       name: 'index',
-      component: index
+      component: index,
+      children:[
+        {
+          path: '/zongLan/zongLan',
+          name: "zongLan",
+          component: zongLan
+        },
+        {
+          path: '/tiyuchang/tiyuchang',
+          name: "tiyuchang",
+          component: tiyuchang
+        }
+      ]
     },
     {
       path: '/',