体育页面更新样式

src/App.vue

@@ -14,7 +14,12 @@
   </nav>
 </template>
 
-<style scoped>
+<style>
+body{
+  margin: 0px;
+  padding: 8px;
+  background-color: #032461;
+}
 .navbar {
   position: fixed;
   height: 2.8rem;
@@ -24,7 +29,7 @@
   left: 0;
   bottom: 0;
   z-index: 90;
-  background-color: #111228;
+  background-color: #040040;
   display: flex;
   justify-content: space-between;
   align-items: center;

src/views/TycView.vue

@@ -1,46 +1,68 @@
 <template>
   <div class="tyc">
-    <div class="topnav">体育</div>
+    <div class="topnav">体育馆</div>
     <!-- 图形 -->
     <div class="tyclogo">
       <div class="tyname">体育</div>
-      <div class="tydesc">体育场|体育馆|游泳馆</div>
+      <div class="tydesc">体育场&nbsp;|&nbsp;体育馆&nbsp;|&nbsp;游泳场馆</div>
     </div>
-    <!-- 总计进馆人数 -->
+    <!-- 24小时进馆人数 -->
+    <div class="today_area">
+      <div class="t_title">24小时进馆人数</div>
+      <div class="t_content">
+        <div class="illustration illustration-1"></div>
+        <div class="text-box">
+          <span>{{ cgdata[2]&&cgdata[2].noRepeatInNum }}</span>
+          <span>{{ cgdata[2]&&cgdata[2].groupName }}</span>
+        </div>
+        <div class="illustration illustration-2"></div>
+        <div class="text-box">
+          <span>{{ cgdata[0]&&cgdata[0].noRepeatInNum }}</span>
+          <span>{{ cgdata[0]&&cgdata[0].groupName }}</span>
+        </div>
+        <div class="illustration illustration-3"></div>
+        <div class="text-box">
+          <span>{{ cgdata[1]&&cgdata[1].noRepeatInNum }}</span>
+          <span>{{ cgdata[1]&&cgdata[1].groupName }}</span>
+        </div>
+      </div>
+    </div>
+    <!-- 累计服务人数 -->
     <div class="jgbox">
-      <div class="jg_title">总计进馆人数</div>
+      <div class="jg_title">累计服务人数</div>
       <div class="jgcon">
 
         <div class="jgitem">
-          <div class="jgimg"><img src="../assets/img/icon01.png" /></div>
-          <span class="jgival" id="tdjg">{{ tdnum }}</span>
+          <div class="jgimg">{{ tdnum }}</div>
           <span class="jgdesc">今日进馆人数</span>
         </div>
         <div class="jgitem">
-          <div class="jgimg"><img src="../assets/img/icon02.png" /></div>
-          <span class="jgival" id="tmjg">{{ tmdata }}</span>
+          <div class="jgimg">{{ wdnum }}</div>
+          <span class="jgdesc">本周进馆人数</span>
+        </div>
+        <div class="jgitem">
+          <div class="jgimg">{{ tmdata }}</div>
           <span class="jgdesc">本月进馆人数</span>
         </div>
         <div class="jgitem">
-          <div class="jgimg"><img src="../assets/img/icon03.png" /></div>
-          <span class="jgival" id="tyjg">{{ tydata }}</span>
+          <div class="jgimg">{{ tydata }}</div>
           <span class="jgdesc">本年进馆人数</span>
         </div>
       </div>
     </div>
     <!-- 进馆人数统计 -->
     <div class="gcins">
-      <div class="gcins_title">24小时总进馆人流趋势</div>
-      <div id="gcins_charts" style="height:16rem"></div>
+      <div class="gcins_title">24小时总服务人次趋势</div>
+      <div id="gcins_charts" style="height:16rem;background-color: #051136;margin-top: 1rem;"></div>
     </div>
-    <!-- 各场馆人次占比 -->
+    <!-- 各场馆服务人次占比 -->
     <div class="pcgrbox">
-      <div class="pcb_title">各场馆人次占比</div>
+      <div class="pcb_title">各场馆服务人次占比</div>
       <div class="pcbcon">
 
         <div class="pcbitem" v-for="cg in cgdata" :key="key">
           <div class="pcbval">{{ cg.proportion }}</div>
-          <div class="pcbdesc">{{cg. groupName }}</div>
+          <div class="pcbdesc">{{cg.groupName }}</div>
         </div>
 
       </div>
@@ -48,9 +70,14 @@
 
     <!-- 各场馆人数趋势 -->
     <div class="gcgrs">
-      <div class="gcgrs_title">各场馆人流趋势</div>
+      <div class="gcgrs_title">各场馆服务人次趋势</div>
       <div id="gc_charts" class="gcgrs_charts"></div>
     </div>
+    <div class="rbox_label">
+      <span></span>体育场
+      <span></span>体育馆
+      <span></span>游泳场馆
+    </div>
 
   </div>
 </template>
@@ -59,6 +86,7 @@
   position: relative;
   /** wait for chk */
   /* background-color: #032461; */
+  /* 22.44rem 等于359px（375设备的100%） */
 }
 
 .topnav {
@@ -72,7 +100,8 @@
   color: #fff;
   left: 0;
   top: 0;
-  background-color: #080A25;
+  background-color: #032461;
+  box-shadow: 0px 3px 4px 0px rgba(255, 255, 255, 0.1);
   margin-bottom: 30rpx;
 }
 
@@ -89,25 +118,81 @@
   height: 2.5rem;
   line-height: 2.5rem;
   text-align: right;
-  padding-right: 7.3rem;
+  padding-right: 9.5rem;
   font-size: 1.7rem;
-  padding-top: 6.8rem;
+  padding-top: 5.5rem;
 }
 
 .tyclogo .tydesc {
   height: 2rem;
   line-height: 2rem;
-  font-size: 1.03rem;
+  font-size: 0.9rem;
   text-align: right;
-  padding-right: 1.06rem;
+  padding-right: 2.4rem;
   color: #fff;
 }
+/* 24小时 */
+.today_area{
+}
+.today_area .t_title{
+  width: 18.56rem;
+  height: 4.06rem;
+  line-height: 4.06rem;
+  text-align: center;
+  margin: 3rem auto;
+  background: url('../assets/img/t_title_bg.png');
+  background-size: 100% 100%;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+.today_area .t_content{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.today_area .t_content .illustration{
+  width: 17.5rem;
+}
+.today_area .t_content .illustration-1{
+  height: 10.5rem;
+  background: url('../assets/img/t_i_bg_1.png');
+  background-size: 100% 100%;
+}
+.today_area .t_content .illustration-2{
+  height: 8.56rem;
+  background: url('../assets/img/t_i_bg_2.png');
+  background-size: 100% 100%;
+}
+.today_area .t_content .illustration-3{
+  height: 8.06rem;
+  background: url('../assets/img/t_i_bg_3.png');
+  background-size: 100% 100%;
+}
+.today_area .t_content .text-box{
+  width: 12.5rem;
+  height: 6.31rem;
+  margin: 1rem 0px 3rem 0px;
+  background: url('../assets/img/t_i_bg_4.png');
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.today_area .t_content .text-box span:nth-of-type(1){
+  font-size: 1.2rem;
+}
+.today_area .t_content .text-box span:nth-of-type(2){
+  font-size: 0.88rem;
+  color: #06BEE6;
+  margin-top: 0.15rem;
+}
+
 
 /* 总计进馆 */
 .jgbox {
   margin-top: 1.02rem;
   width: 100%;
-  height: 12rem;
 }
 
 .jgbox .jg_title {
@@ -115,27 +200,45 @@
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: 0 0;
-  padding-left: 3.2rem;
+  padding-left: 2.2rem;
+  width: 12.94rem;
   height: 2.06rem;
   line-height: 2.06rem;
 }
 
 .jgbox .jgcon {
   width: 100%;
-  height: 7rem;
-  padding-top: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 .jgbox .jgcon .jgitem {
-  width: 30%;
-  margin-left: 3%;
-  float: left;
+  width: 7.5rem;
+  margin: 2rem 2rem 0px;
 }
-
-.jgbox .jgcon .jgitem .jgimg {
-  margin-left: auto;
-  margin-right: auto;
+.jgbox .jgcon .jgitem .jgimg{
   text-align: center;
+  width: 7.5rem;
+  height: 5.56rem;
+  line-height: 10rem;
+  font-size: 1.06rem;
+}
+.jgbox .jgcon .jgitem:nth-of-type(1) .jgimg {
+  background: url('../assets/img/icon01.png');
+  background-size: 100% 100%;
+}
+.jgbox .jgcon .jgitem:nth-of-type(2) .jgimg {
+  background: url('../assets/img/icon02.png');
+  background-size: 100% 100%;
+}
+.jgbox .jgcon .jgitem:nth-of-type(3) .jgimg {
+  background: url('../assets/img/icon03.png');
+  background-size: 100% 100%;
+}
+.jgbox .jgcon .jgitem:nth-of-type(4) .jgimg {
+  background: url('../assets/img/icon04.png');
+  background-size: 100% 100%;
 }
 
 .jgbox .jgcon .jgitem span {
@@ -145,12 +248,8 @@
   line-height: 1.8rem;
 }
 
-.jgbox .jgcon .jgitem .jgival {
-  font-size: 1.06rem;
-}
-
 .jgbox .jgcon .jgitem .jgdesc {
-  color: #666;
+  color: #8A90AF;
   font-size: 0.8rem;
 }
 
@@ -169,7 +268,7 @@
   padding-left: 2.02rem;
 }
 
-/* 各场馆人次占比 */
+/* 各场馆服务人次占比 */
 .pcgrbox {
   margin-top: 1.6rem;
   padding-bottom: 4rem;
@@ -205,11 +304,10 @@
 .pcgrbox .pcbcon .pcbitem .pcbval {
   width: 110px;
   /** 20230727 */
-  background-image: url('../assets/img/ty_pcb_item_bg.png');
+  background-image: url('../assets/img/ty_pcb_item_bg_new.png');
   background-position: 0 0;
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  border-radius: 100%;
   line-height: 5rem;
   text-align: center;
   /* 动画效果 */
@@ -267,6 +365,36 @@
   /* margin-top: 2rem; */
   width: 100%;
   height: 19rem;
+  background-image: linear-gradient(to bottom, #021d5b, #000248);
+  margin-top: 1rem;
+}
+.rbox_label{
+  /* width: 100%; */
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  font-size: 0.8rem;
+  color: #aaa;
+  margin-right: 0.5rem;
+  margin-top: 0.8rem;
+}
+.rbox_label span{
+  display: inline-block;
+  width: 1.2rem;
+  height: 1.2rem;
+  margin: 0px 0.5rem;
+}
+.rbox_label span:nth-of-type(1){
+  background: url('../assets/img/ty_tyc.png');
+  background-size: 100% 100%;
+}
+.rbox_label span:nth-of-type(2){
+  background: url('../assets/img/ty_tyg.png');
+  background-size: 100% 100%;
+}
+.rbox_label span:nth-of-type(3){
+  background: url('../assets/img/ty_yycg.png');
+  background-size: 100% 100%;
 }
 </style>
 <script>
@@ -284,6 +412,7 @@ export default {
       ecbardata:[],
       // 今日
       tdnum:0,
+      wdnum: 0,//week
       // month
       tmdata:0,
       // year
@@ -307,12 +436,12 @@ export default {
     // 110,210,310 
     // 查询场馆统计情况
     csstat(){
-      let groupId = "110|210|310"
+      // let groupId = "110|210|310"
       // 今日进馆数据
-      btApi.allGroupTimeNum({granularity:"daily",groupsId:groupId}).then(res=>{
-        const cgdata = res.data.data
+      btApi.allGroupTimeNum({granularity:"daily",type:1}).then(res=>{
+        const temcgData = res.data.data
         // 场馆人次占比
-        const tgdata = cgdata.groupsData
+        const tgdata = temcgData.groupsData
         this.cgdata = tgdata
         // today in
         const tdjg=0;
@@ -324,9 +453,9 @@ export default {
         const vkdata = new Array;
         const vvdata = new Array;
         // 
-        const dkeys = cgdata.dkeys
+        const dkeys = temcgData.dkeys
         // allTimeData
-        const allTdata = cgdata.allTimeData
+        const allTdata = temcgData.allTimeData
 
         dkeys.forEach(function(item,idx){
           // console.log(item)
@@ -342,22 +471,23 @@ export default {
          // 24h
          this.cgsf_line()
       });
+      return;
 
       // 本月
-      btApi.allGroupTimeNum({granularity:"monthly",groupsId:groupId}).then(res=>{
-          const cgdata = res.data.data
+      btApi.allGroupTimeNum({granularity:"monthly",type:1}).then(res=>{
+          const temcgData = res.data.data
           // 场馆人次占比
-          const tgdata = cgdata.groupsData
+          const tgdata = temcgData.groupsData
           this.cgdata = tgdata
           tgdata.forEach(item=>{
             this.tmdata += item.noRepeatInNum
           });
       });
       // 年度
-      btApi.allGroupTimeNum({granularity:"yearly",groupsId:groupId}).then(res=>{
-          const cgdata = res.data.data
+      btApi.allGroupTimeNum({granularity:"yearly",type:1}).then(res=>{
+          const temcgData = res.data.data
           // 场馆人次占比
-          const tgdata = cgdata.groupsData
+          const tgdata = temcgData.groupsData
           this.cgdata = tgdata
           tgdata.forEach(item=>{
             this.tydata += item.noRepeatInNum

src/views/WhView.vue

@@ -51,15 +51,15 @@
         </div>
 
 
-        <!-- 24小时进馆人数趋势 -->
+        <!-- 24小时总服务人次趋势 -->
         <div class="gcins">
-            <div class="gcins_title">24小时进馆人数趋势</div>
+            <div class="gcins_title">24小时总服务人次趋势</div>
             <div id="gcins_charts" style="height:16rem"></div>
         </div>
 
-        <!-- 各场馆人数趋势 -->
+        <!-- 各场馆服务人次趋势 -->
         <div class="gcgrs">
-            <div class="gcgrs_title">各场馆人数趋势</div>
+            <div class="gcgrs_title">各场馆服务人次趋势</div>
             <div id="gc_charts" class="gcgrs_charts"></div>
         </div>
         <!-- 各场馆人数趋势 -->
@@ -358,7 +358,7 @@ export default {
                 this.gkwhg = sgdata[2].incount
             });
         },
-        // 山峰图---24小时进馆人数趋势
+        // 山峰图---24小时总服务人次趋势
         cgsf_line() {
             var chartDom = document.getElementById('gcins_charts');
             var myChart = echarts.init(chartDom);