diff --git a/src/assets/ty_jg_bg.png b/src/assets/ty_jg_bg.png
new file mode 100644
index 0000000..a9afc8d
Binary files /dev/null and b/src/assets/ty_jg_bg.png differ
diff --git a/src/assets/wh_00.png b/src/assets/wh_00.png
new file mode 100644
index 0000000..e304fcc
Binary files /dev/null and b/src/assets/wh_00.png differ
diff --git a/src/views/TycView.vue b/src/views/TycView.vue
index 6322074..a3993a6 100644
--- a/src/views/TycView.vue
+++ b/src/views/TycView.vue
@@ -1,9 +1,32 @@
 <template>
   <div class="tyc">
-    <div class="topnav">体育馆</div>
+    <div class="topnav">体育</div>
     <!-- 图形 -->
     <div class="tyclogo">
-      <div class="tyname">体育场</div>
+      <div class="tyname">体育</div>
+      <div class="tydesc">体育场|体育馆|游泳馆</div>
+    </div>
+    <!-- 总计进馆人数 -->
+    <div class="jgbox">
+      <div class="jg_title">总计进馆人数</div>
+      <div class="jgcon">
+
+        <div class="jgitem">
+          <div class="jgimg"><img src="../assets/icon01.png"/></div>
+          <span class="jgival">234,255</span>
+          <span class="jgdesc">今日进馆人数</span>
+        </div>
+        <div class="jgitem">
+          <div class="jgimg"><img src="../assets/icon02.png"/></div>
+          <span class="jgival">234,255</span>
+          <span class="jgdesc">本月进馆人数</span>
+        </div>
+        <div class="jgitem">
+          <div class="jgimg"><img src="../assets/icon03.png"/></div>
+          <span class="jgival">234,255</span>
+          <span class="jgdesc">本年进馆人数</span>
+        </div>                
+      </div>
     </div>
     <!-- 进馆人数统计 -->
     <div class="gcins">
@@ -40,16 +63,68 @@
   background-image: url("../assets/tyc_00.png");
   background-repeat: no-repeat;
   background-size: 100%;
-  background-position: center center;
+  background-position: 0 0;
   height: 12rem;
 }
 
 .tyclogo .tyname {
-  line-height: 12rem;
+  height: 3rem;
+  line-height: 3rem;
   text-align: right;
-  padding-right: 16%;
+  padding-right: 6.06rem;
   font-size: 2.02rem;
-  padding-top: 1.6rem;
+  padding-top: 4.8rem;
+}
+.tyclogo .tydesc{
+  height: 2rem;
+  line-height: 2rem;
+  font-size: 1.03rem;
+  text-align: right;
+  padding-right: 1.06rem;
+  color: #999;
+}
+/* 总计进馆 */
+.jgbox{
+  margin-top: 1.02rem;
+  width: 100%;
+  height: 12rem;
+}
+.jgbox .jg_title{
+  background-image: url('../assets/ty_jg_bg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  padding-left: 3.2rem;
+  height: 2.06rem;
+  line-height: 2.06rem;
+}
+.jgbox .jgcon{
+  width: 100%;
+  height: 7rem;
+  padding-top: 2rem;
+}
+.jgbox .jgcon .jgitem{
+  width: 30%;
+  margin-left: 3%;
+  float: left;
+}
+.jgbox .jgcon .jgitem .jgimg{
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+.jgbox .jgcon .jgitem span{
+  display: block;
+  text-align: center;
+  height: 1.8rem;
+  line-height: 1.8rem;
+}
+.jgbox .jgcon .jgitem .jgival{
+  font-size: 1.06rem;
+}
+.jgbox .jgcon .jgitem .jgdesc{
+  color: #666;
+  font-size: 0.8rem;
 }
 /* 进馆人数统计 */
 .gcins {
@@ -94,151 +169,126 @@ export default {
       var option;
 
       option = {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "none",
-          },
-          formatter: function (params) {//hover到某一柱子时显示单位，例如：“1号商店进货：60个”
-            return params[0].name + ": " + params[0].value + "个";
-          },
-        },
+
         grid: {
-          width: "85%",
-          height: "65%",
-          top: "17%",
-          left: "12%",
+          left: '3%',
+          right: '3%',
+          bottom: '3%',
+          top: '10%',
+          containLabel: true
         },
-        xAxis: {
-          data: ["1号商店进货", "2号商店进货", "3号商店进货", "4号商店进货"],
-          axisTick: { show: false },
+        xAxis: [{
+          data: [
+            '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
+          ],
           axisLine: {
             lineStyle: {
-              color: "#483D8B",
+              color: '#0095FF',
+              width: 1,
+              type: 'solid',
             },
+            show: true
           },
-          axisLabel: {
-            color: "#483D8B",
-            interval: 0,//隔几个显示一次，0表示全部显示
-            fontSize: "12",//x轴字体大小
-            itemSize: "",
-            formatter: function (params) {
-              var newParamsName = ""; // 最终拼接成的字符串
-              var paramsNameNumber = params.length; // 实际标签的个数
-              var provideNumber = 4; // 每行能显示的字的个数
-              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
-              /**
-               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-               */
-              // 条件等同于rowNumber>1
-              if (paramsNameNumber > provideNumber) {
-                /** 循环每一行,p表示行 */
-                for (var p = 0; p < rowNumber; p++) {
-                  var tempStr = ""; // 表示每一次截取的字符串
-                  var start = p * provideNumber; // 开始截取的位置
-                  var end = start + provideNumber; // 结束截取的位置
-                  // 此处特殊处理最后一行的索引值
-                  if (p == rowNumber - 1) {
-                    // 最后一次不换行
-                    tempStr = params.substring(start, paramsNameNumber);
-                  } else {
-                    // 每一次拼接字符串并换行
-                    tempStr = params.substring(start, end) + "\n";
-                  }
-                  newParamsName += tempStr; // 最终拼成的字符串
-                }
-              } else {
-                // 将旧标签的值赋给新标签
-                newParamsName = params;
-              }
-              //将最终的字符串返回
-              return newParamsName;
-            },
+          axisTick: {
+            show: false,
           },
-          axisPointer: {
-            type: "shadow",
+          splitLine: {
+            show: false
           },
-        },
-        yAxis: {
-          name: "单位：个",
-          type: "value",
-          //设置Y轴坐标最大、最小值
-          min: 0,
-          max: 100,
-          interval: 20,
           axisLabel: {
-            color: "#483D8B",
-          },
-          axisTick: { show: false },
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        }],
+        yAxis: [{
+          type: 'value',
           axisLine: {
+            show: false
+          },
+          axisTick: {
             show: false,
-            lineStyle: {
-              color: "#483D8B",
-            },
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(	72,61,139,0.7)",
-              type: "dashed",
-            },
+              // 使用深浅的间隔色
+              color: '#027eff'
+            }
+          },
+          axisLabel: {
+            color: '#0095FF',
+          }
+        }],
+        series: [{
+          // name: '厂用电量',
+          type: 'bar',
+          barGap: '5%',
+          barWidth: '10%',
+          barCategoryGap: '60%',
+          stack: 1,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [30, 30, 0, 0],
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#00feff'
+                },
+                {
+                  offset: 1,
+                  color: '#0286ff'
+                }
+              ]
+              )
+            }
           },
+          data: [
+            14000,
+            11000,
+            10000,
+            9000,
+            8000,
+            7000,
+            5000,
+            4000,
+            3000,
+          ],
+          zlevel: 11
         },
-        series: [
-          {
-            name: "hill",
-            type: "pictorialBar",
-            barCategoryGap: "5%",
-            symbol:
-              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
-            //要改成山峰图就改成<  symbol: 'path://path://M10 600 Q 95 0 180 600' >
-            //要改成三角图就改成< symbol: 'triangle' >
-            itemStyle: {
-              opacity: 1,
-              color: {//设置渐变颜色
-                type: "linear",
-                //x 和 y 表示起始的坐标，x2 和 y2 表示终点坐标, 所以也就是向下渐变
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "red", // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.3,
-                    color: "rgba(123,104,238, .8)", // 30% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(123,104,238, .1)", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
-            emphasis: {
-              itemStyle: {
-                opacity: 1,
-              },
-            },
-            data: [60, 95, 70, 52],
-            z: 10,
+        {
+          // name: '厂用电量',
+          type: 'scatter',
+          stack: 1,
+          xAxisIndex: 0,
+          symbolOffset: [0, 0], //相对于原本位置的偏移量
+          data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
+          itemStyle: {
+            normal: {
+              color: '#fff'
+            }
           },
-          {
-            name: "glyph",
-            type: "pictorialBar",
-            barGap: "-100%",//设置图的大小，越大底部重叠的越多
-            symbolPosition: "end",
-            symbolSize: 0,
-            symbolOffset: [0, "100%"],
-            data: [],
+          symbolSize: 13,
+          zlevel: 10,
+          z: 2,
+        },
+        {
+          name: '背景',
+          type: 'bar',
+          barWidth: '10%',
+          barGap: '-100%',
+          data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
+          itemStyle: {
+            normal: {
+              color: '#004298',
+              barBorderRadius: 30,
+            }
           },
-        ],
-
-      };
+          z: 1,
+        },
+        ]
+      }
 
       option && myChart.setOption(option);
     },
diff --git a/src/views/WhView.vue b/src/views/WhView.vue
index d585ab5..4c049b3 100644
--- a/src/views/WhView.vue
+++ b/src/views/WhView.vue
@@ -1,10 +1,297 @@
 <template>
-    <div class="">
-        第三個頁面
+    <div class="tyc">
+      <div class="topnav">文化</div>
+      <!-- 图形 -->
+      <div class="tyclogo">
+        <div class="tyname">文化</div>
+        <div class="tydesc">图书馆|文化馆|博物馆</div>
+      </div>
+      <!-- 总计进馆人数 -->
+      <div class="jgbox">
+        <div class="jg_title">总计进馆人数</div>
+        <div class="jgcon">
+  
+          <div class="jgitem">
+            <div class="jgimg"><img src="../assets/icon01.png"/></div>
+            <span class="jgival">234,255</span>
+            <span class="jgdesc">今日进馆人数</span>
+          </div>
+          <div class="jgitem">
+            <div class="jgimg"><img src="../assets/icon02.png"/></div>
+            <span class="jgival">234,255</span>
+            <span class="jgdesc">本月进馆人数</span>
+          </div>
+          <div class="jgitem">
+            <div class="jgimg"><img src="../assets/icon03.png"/></div>
+            <span class="jgival">234,255</span>
+            <span class="jgdesc">本年进馆人数</span>
+          </div>                
+        </div>
+      </div>
+      <!-- 进馆人数统计 -->
+      <div class="gcins">
+        <div class="gcins_title">进馆人数统计</div>
+        <div id="gcins_charts" style="height:16rem"></div>
+      </div>
+      <!-- 人数状态 -->
+      <div class="incbox"></div>
+  
     </div>
-</template>
-<script>
-    export default{
-        name:"gym"
-    }
-</script>
\ No newline at end of file
+  </template>
+  <style scoped>
+  .tyc {
+    position: relative;
+  }
+  
+  .topnav {
+    height: 46px;
+    line-height: 46px;
+    text-align: center;
+    padding: 12rpx;
+    width: 100%;
+    position: fixed;
+    z-index: 90;
+    color: #fff;
+    left: 0;
+    top: 0;
+    background-color: #080A25;
+    margin-bottom: 30rpx;
+  }
+  
+  .tyclogo {
+    margin-top: 1.6rem;
+    background-image: url("../assets/wh_00.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: 0 0;
+    height: 12rem;
+  }
+  
+  .tyclogo .tyname {
+    height: 3rem;
+    line-height: 3rem;
+    text-align: right;
+    padding-right: 6.06rem;
+    font-size: 2.02rem;
+    padding-top: 4.8rem;
+  }
+  .tyclogo .tydesc{
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.03rem;
+    text-align: right;
+    padding-right: 1.06rem;
+    color: #999;
+  }
+  /* 总计进馆 */
+  .jgbox{
+    margin-top: 1.02rem;
+    width: 100%;
+    height: 12rem;
+  }
+  .jgbox .jg_title{
+    background-image: url('../assets/ty_jg_bg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+    padding-left: 3.2rem;
+    height: 2.06rem;
+    line-height: 2.06rem;
+  }
+  .jgbox .jgcon{
+    width: 100%;
+    height: 7rem;
+    padding-top: 2rem;
+  }
+  .jgbox .jgcon .jgitem{
+    width: 30%;
+    margin-left: 3%;
+    float: left;
+  }
+  .jgbox .jgcon .jgitem .jgimg{
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+  }
+  .jgbox .jgcon .jgitem span{
+    display: block;
+    text-align: center;
+    height: 1.8rem;
+    line-height: 1.8rem;
+  }
+  .jgbox .jgcon .jgitem .jgival{
+    font-size: 1.06rem;
+  }
+  .jgbox .jgcon .jgitem .jgdesc{
+    color: #666;
+    font-size: 0.8rem;
+  }
+  /* 进馆人数统计 */
+  .gcins {
+    margin-top: 1.6rem;
+  }
+  
+  .gcins .gcins_title {
+    background-image: url("../assets/tyc_tbg.png");
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: 1.8rem;
+    line-height: 1.8rem;
+    padding-left: 2.02rem;
+  }
+  
+  /* 进馆人数 */
+  .incbox{
+    margin-top: 1.2rem;
+    background: url("../assets/tyc_bhd.png") no-repeat 0 center;
+    background-size: 100%;
+    height: 8rem;
+  }
+  </style>
+  <script>
+  import * as echarts from 'echarts';
+  export default {
+    name: 'TycView',
+    data() {
+      return {
+        //
+      }
+    },
+    mounted() {
+      this.cgsf_line()
+    },
+    methods: {
+      // 山峰图
+      cgsf_line() {
+        var chartDom = document.getElementById('gcins_charts');
+        var myChart = echarts.init(chartDom);
+        var option;
+  
+        option = {
+  
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '3%',
+            top: '10%',
+            containLabel: true
+          },
+          xAxis: [{
+            data: [
+              '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
+            ],
+            axisLine: {
+              lineStyle: {
+                color: '#0095FF',
+                width: 1,
+                type: 'solid',
+              },
+              show: true
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#fff'
+              }
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: '#027eff'
+              }
+            },
+            axisLabel: {
+              color: '#0095FF',
+            }
+          }],
+          series: [{
+            // name: '厂用电量',
+            type: 'bar',
+            barGap: '5%',
+            barWidth: '10%',
+            barCategoryGap: '60%',
+            stack: 1,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [30, 30, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#00feff'
+                  },
+                  {
+                    offset: 1,
+                    color: '#0286ff'
+                  }
+                ]
+                )
+              }
+            },
+            data: [
+              14000,
+              11000,
+              10000,
+              9000,
+              8000,
+              7000,
+              5000,
+              4000,
+              3000,
+            ],
+            zlevel: 11
+          },
+          {
+            // name: '厂用电量',
+            type: 'scatter',
+            stack: 1,
+            xAxisIndex: 0,
+            symbolOffset: [0, 0], //相对于原本位置的偏移量
+            data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
+            itemStyle: {
+              normal: {
+                color: '#fff'
+              }
+            },
+            symbolSize: 13,
+            zlevel: 10,
+            z: 2,
+          },
+          {
+            name: '背景',
+            type: 'bar',
+            barWidth: '10%',
+            barGap: '-100%',
+            data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
+            itemStyle: {
+              normal: {
+                color: '#004298',
+                barBorderRadius: 30,
+              }
+            },
+            z: 1,
+          },
+          ]
+        }
+  
+        option && myChart.setOption(option);
+      },
+    },
+  }
+  </script>
\ No newline at end of file