【食堂菜单大屏】：菜单调整字体大小，取消自动滚动

src/views/canteen/menuScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="menuScreen" style="position: relative;">
+  <div id="menuScreen" style="position: relative">
     <div class="title">德荣食堂</div>
     <div class="title2">
       <span>时段</span>
@@ -7,15 +7,32 @@
       <span>价格</span>
       <span>日期</span>
     </div>
-    <div class="tables">
-      <!--  class="gun" -->
-      <div class="gun">
-        <el-table :cell-style="{ color: '#fff' }" :header-cell-style="{ color: '#fff' }" :data="tableData"
-          style="width: 100%;height:100%;font-size: 2.4vh;" ref="tableBox">
-
+    <div>
+      <!-- 去除滚动 2024.02.26 class="tables" -->
+      <div>
+        <!--  class="gun" -->
+        <el-table
+          :cell-style="{ color: '#fff' }"
+          :header-cell-style="{ color: '#fff' }"
+          :data="tableData"
+          style="
+            width: 100%;
+            height: calc(100vh - 30vh);
+            font-size: 4.5vh;
+            overflow-y: auto;
+            overflow-x: hidden;
+          "
+          ref="tableBox"
+        >
           <el-table-column prop="timeFrame" align="center" label="">
             <template slot-scope="scope">
-              <span>{{ scope.row.timeFrame == '1' ? '早餐' : scope.row.timeFrame == '2' ? '午餐' : '晚餐' }}</span>
+              <span>{{
+                scope.row.timeFrame == "1"
+                  ? "早餐"
+                  : scope.row.timeFrame == "2"
+                  ? "午餐"
+                  : "晚餐"
+              }}</span>
             </template>
           </el-table-column>
 
@@ -34,45 +51,45 @@
       </div>
     </div>
 
-    <p class="people">{{nowDate}}园区打卡人数:{{ dakaNum }}人</p>
+    <p class="people">{{ nowDate }}园区打卡人数:{{ dakaNum }}人</p>
   </div>
 </template>
 
 <script>
-import axios from 'axios'
-import { menuList, dakaPeople } from '@/api/canteen/basic.js'
+import axios from "axios";
+import { menuList, dakaPeople } from "@/api/canteen/basic.js";
 export default {
   data() {
     return {
       tableData: [],
-      nowDate: '',
+      nowDate: "",
       intervalId: null,
-      dakaNum: ''
-    }
+      dakaNum: "",
+    };
   },
   created() {
     this.getList();
-    this.dataRefreh()
-    this.getPeoples()
+    this.dataRefreh();
+    this.getPeoples();
   },
-  destroyed(){
+  destroyed() {
     // 在页面销毁后，清除计时器
     this.clear();
   },
   methods: {
     getList() {
-      this.getNow()
+      this.getNow();
       // {billDate: this.nowDate}
-      menuList({ pageSize: 100, billDate: this.nowDate }).then(res => {
+      menuList({ pageSize: 100, billDate: this.nowDate }).then((res) => {
         if (res.code === 200) {
-          this.tableData = res.rows
-          this.tableData = this.tableData.map(data => {
-            data.billDate = data.billDate.substring(0, 11)
+          this.tableData = res.rows;
+          this.tableData = this.tableData.map((data) => {
+            data.billDate = data.billDate.substring(0, 11);
             return data;
-          })
-          console.log(this.tableData, 'this.tableData');
+          });
+          console.log(this.tableData, "this.tableData");
         }
-      })
+      });
     },
     getNow() {
       var date = new Date();
@@ -86,10 +103,10 @@ export default {
         day = "0" + day;
       }
       const nowDate = year + "-" + month + "-" + day;
-      this.nowDate = nowDate
+      this.nowDate = nowDate;
     },
-   // 定时刷新数据函数
-   dataRefreh() {
+    // 定时刷新数据函数
+    dataRefreh() {
       // 计时器正在进行中，退出函数
       if (this.intervalId != null) {
         return;
@@ -98,8 +115,8 @@ export default {
       this.intervalId = setInterval(() => {
         console.log("刷新" + new Date());
         this.getList(); //加载数据函数
-        this.getPeoples() // 加载园区打卡人数
-      }, 1000*60*5);
+        this.getPeoples(); // 加载园区打卡人数
+      }, 1000 * 60 * 5);
     },
     // 停止定时器
     clear() {
@@ -108,23 +125,23 @@ export default {
     },
     // 获取园区打卡数据
     getPeoples() {
-      axios.defaults.baseURL = ''
-      axios.get('/data-service-center/accessControl/getPeople ').then(res => {
-        console.log(res.data)
-        if(res.data.code === 200) {
-          this.dakaNum = res.data.data
+      axios.defaults.baseURL = "";
+      axios.get("/data-service-center/accessControl/getPeople ").then((res) => {
+        console.log(res.data);
+        if (res.data.code === 200) {
+          this.dakaNum = res.data.data;
         }
-      })
-    }
+      });
+    },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
 #menuScreen {
   width: 100%;
   height: 100%;
-  background-image: url('../../assets/images/background.png');
+  background-image: url("../../assets/images/background.png");
   background-repeat: no-repeat;
   background-size: cover;
   // overflow: hidden;
@@ -147,11 +164,11 @@ export default {
 
 .title2 {
   text-align: center;
-  font-size: 3vh;
+  font-size: 6vh;
   font-weight: 600;
   color: #fff;
   width: 80%;
-  color: #FFF;
+  color: #fff;
   margin: 2% auto;
   display: flex;
   justify-content: space-around;
@@ -178,7 +195,7 @@ export default {
 
 @keyframes tables {
   0% {
-    transform: translateY(0px)
+    transform: translateY(0px);
   }
 
   100% {
@@ -199,7 +216,7 @@ export default {
   background-color: transparent !important;
   // border-top-color: #808DA6;
   // border-bottom-color: #808DA6;
-  border-top: 1px solid #808DA6;
+  border-top: 1px solid #808da6;
   border-bottom: none;
 }
 
@@ -211,9 +228,14 @@ export default {
 }
 .people {
   position: absolute;
-  top: 0;right: 1%; 
-  font-size: 3vh;
+  top: 0;
+  right: 1%;
+  font-size: 4vh;
   font-weight: 600;
   color: #fff;
 }
-</style>
+
+.el-table::before {
+  height: 0;
+}
+</style>