食堂菜单界面更改

src/views/canteen/foodScreen.vue

@@ -1,45 +1,33 @@
 <template>
   <div id="menuScreen">
     <div class="title">今日食材</div>
-    <div class="title2" style="width: 80%;color: #FFF;margin:1% auto;display: flex;justify-content: space-around;">
-        <span>食材</span>
-        <span>地址</span>
-        <span>日期</span>
+    <div class="title2">
+      <span>食材</span>
+      <span>地址</span>
+      <span>日期</span>
     </div>
 
     <div class="tables">
-    <div class="gun">
-      <el-table
-      :cell-style="{ color: '#fff' }"
-      :header-cell-style="{ color: '#fff' }"
-      :data="tableData"
-      style="width: 100%;height:100%;font-size: 2.5vh;">
-      <el-table-column
-        prop="product"
-        align="center"
-        label="">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label=""
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="billDate"
-        label=""
-        align="center">
-      </el-table-column>
-      </el-table>
-    </div>
+      <div class="gun">
+        <el-table :cell-style="{ color: '#fff' }" :header-cell-style="{ color: '#fff' }" :data="tableData"
+          style="width: 100%;height:100%;font-size: 2.5vh;">
+          <el-table-column prop="product" align="center" label="">
+          </el-table-column>
+          <el-table-column prop="address" label="" align="center">
+          </el-table-column>
+          <el-table-column prop="billDate" label="" align="center">
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import {foodList} from '@/api/canteen/basic.js'
+import { foodList } from '@/api/canteen/basic.js'
 export default {
   data() {
-    return{
+    return {
       tableData: [],
       nowDate: ''
     }
@@ -52,7 +40,7 @@ export default {
       this.getNow()
       // {billDate: this.nowDate}
       foodList().then(res => {
-        if (res.code === 200 ) {
+        if (res.code === 200) {
           this.tableData = res.rows
         }
       })
@@ -63,10 +51,10 @@ export default {
       var month = date.getMonth() + 1;
       var day = date.getDate();
       if (month < 10) {
-          month = "0" + month;
+        month = "0" + month;
       }
       if (day < 10) {
-          day = "0" + day;
+        day = "0" + day;
       }
       const nowDate = year + "-" + month + "-" + day;
       this.nowDate = nowDate
@@ -79,62 +67,87 @@ export default {
 #menuScreen {
   width: 100%;
   height: 100%;
-  background-image: url('../../assets/images/menu_bg.jpg');
+  overflow: hidden;
+  background-image: url('../../assets/images/background.png');
   background-repeat: no-repeat;
   background-size: cover;
 }
+
 .title {
   text-align: center;
   font-size: 8vh;
   color: #fff;
-  text-shadow: 0 0 5px #fff,
-  0 0 10px #fff,
-  0 0 15px #fff,
-  0 0 20px #00a67c,
-  0 0 35px #00a67c,
-  0 0 40px #00a67c,
-  0 0 50px #00a67c,
-  0 0 75px #00a67c;
+  font-weight: 600;
+  // text-shadow: 0 0 5px #fff,
+  //   0 0 10px #fff,
+  //   0 0 15px #fff,
+  //   0 0 20px #00a67c,
+  //   0 0 35px #00a67c,
+  //   0 0 40px #00a67c,
+  //   0 0 50px #00a67c,
+  //   0 0 75px #00a67c;
 }
+
 .title2 {
   text-align: center;
   font-size: 3vh;
   color: #fff;
-  text-shadow: 0 0 5px #fff,
-  0 0 10px #fff,
-  0 0 15px #fff,
-  0 0 20px #00a67c,
-  0 0 35px #00a67c,
-  0 0 40px #00a67c,
-  0 0 50px #00a67c,
-  0 0 75px #00a67c;
+  font-weight: 600;
+  width: 80%;
+  color: #FFF;
+  margin: 2% auto;
+  display: flex;
+  justify-content: space-around;
+  //   text-shadow: 0 0 5px #fff,
+  //     0 0 10px #fff,
+  //     0 0 15px #fff,
+  //     0 0 20px #00a67c,
+  //     0 0 35px #00a67c,
+  //     0 0 40px #00a67c,
+  //     0 0 50px #00a67c,
+  //     0 0 75px #00a67c;
+  // }
 }
+
 .gun {
   animation: tables 12s linear infinite;
 }
+
 .tables {
   width: 80%;
   height: 680px;
   margin: 0 auto;
   overflow: hidden;
 }
+
 @keyframes tables {
-        0%{
-            transform:translateY(0px)
-        }
-        100%{
-            transform: translateY(calc(-100% + 680px));
-        }
-    }
+  0% {
+    transform: translateY(0px)
+  }
+
+  100% {
+    transform: translateY(calc(-100% + 680px));
+  }
+}
+
 /*最外层透明*/
 ::v-deep .el-table,
 ::v-deep .el-table__expanded-cell {
   background-color: transparent !important;
 }
+
 /* 表格内背景颜色 */
 ::v-deep .el-table th,
 ::v-deep .el-table tr,
 ::v-deep .el-table td {
   background-color: transparent !important;
+
+  border-top-color: #808DA6;
+  border-bottom-color: #808DA6;
 }
+
+// ::v-deep .el-table tr {
+//   border-top-color: #808DA6;
+//   border-bottom-color: #808DA6;
+// }
 </style>

src/views/canteen/menuScreen.vue

@@ -1,47 +1,29 @@
 <template>
   <div id="menuScreen">
     <div class="title">德荣食堂</div>
-    <div class="title2" style="width: 80%;color: #FFF;margin:1% auto;display: flex;justify-content: space-around;">
-        <span>时段</span>
-        <span>菜名</span>
-        <span>价格</span>
-        <span>日期</span>
+    <div class="title2">
+      <span>时段</span>
+      <span>菜名</span>
+      <span>价格</span>
+      <span>日期</span>
     </div>
     <div class="tables">
-      <div class="gun">
-        <el-table
-        :cell-style="{ color: '#fff' }"
-        :header-cell-style="{ color: '#fff' }"
-        :data="tableData"
-        style="width: 100%;height:100%;font-size: 2.5vh;"
-        ref="tableBox">
-          <el-table-column
-            prop="timeFrame"
-            align="center"
-            label="">
+      <div>
+        <el-table :cell-style="{ color: '#fff' }" :header-cell-style="{ color: '#fff' }" :data="tableData"
+          style="width: 100%;height:100%;font-size: 2.5vh;" 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>
-          <el-table-column
-            prop="name"
-            label=""
-            align="center"
-            >
+          <el-table-column prop="name" label="" align="center">
           </el-table-column>
-          <el-table-column
-            prop="price"
-            align="center"
-            label="">
+          <el-table-column prop="price" align="center" label="">
             <template slot-scope="scope">
               <span>￥{{ scope.row.price }}</span>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="billDate"
-            label=""
-            align="center"
-            >
+          <el-table-column prop="billDate" label="" align="center">
           </el-table-column>
         </el-table>
       </div>
@@ -50,10 +32,10 @@
 </template>
 
 <script>
-import {menuList} from '@/api/canteen/basic.js'
+import { menuList } from '@/api/canteen/basic.js'
 export default {
   data() {
-    return{
+    return {
       tableData: [],
       nowDate: ''
     }
@@ -61,16 +43,21 @@ export default {
   created() {
     this.getList()
   },
-  mounted () {
+  mounted() {
 
   },
   methods: {
     getList() {
       this.getNow()
       // {billDate: this.nowDate}
-      menuList({pageSize: 50}).then(res => {
-        if (res.code === 200 ) {
+      menuList({ pageSize: 50 }).then(res => {
+        if (res.code === 200) {
           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');
         }
       })
     },
@@ -80,10 +67,10 @@ export default {
       var month = date.getMonth() + 1;
       var day = date.getDate();
       if (month < 10) {
-          month = "0" + month;
+        month = "0" + month;
       }
       if (day < 10) {
-          day = "0" + day;
+        day = "0" + day;
       }
       const nowDate = year + "-" + month + "-" + day;
       this.nowDate = nowDate
@@ -96,64 +83,80 @@ export default {
 #menuScreen {
   width: 100%;
   height: 100%;
-  background-image: url('../../assets/images/menu_bg.jpg');
+  background-image: url('../../assets/images/background.png');
   background-repeat: no-repeat;
   background-size: cover;
+  overflow: hidden;
 }
+
 .title {
   text-align: center;
   font-size: 8vh;
   color: #fff;
-  text-shadow: 0 0 5px #fff,
-  0 0 10px #fff,
-  0 0 15px #fff,
-  0 0 20px #00a67c,
-  0 0 35px #00a67c,
-  0 0 40px #00a67c,
-  0 0 50px #00a67c,
-  0 0 75px #00a67c;
+  font-weight: 600;
+  // text-shadow: 0 0 5px #fff,
+  // 0 0 10px #fff,
+  // 0 0 15px #fff,
+  // 0 0 20px #00a67c,
+  // 0 0 35px #00a67c,
+  // 0 0 40px #00a67c,
+  // 0 0 50px #00a67c,
+  // 0 0 75px #00a67c;
 }
+
 .title2 {
   text-align: center;
   font-size: 3vh;
+  font-weight: 600;
   color: #fff;
-  text-shadow: 0 0 5px #fff,
-  0 0 10px #fff,
-  0 0 15px #fff,
-  0 0 20px #00a67c,
-  0 0 35px #00a67c,
-  0 0 40px #00a67c,
-  0 0 50px #00a67c,
-  0 0 75px #00a67c;
+  width: 80%;
+  color: #FFF;
+  margin: 2% auto;
+  display: flex;
+  justify-content: space-around;
+  // text-shadow: 0 0 5px #fff,
+  // 0 0 10px #fff,
+  // 0 0 15px #fff,
+  // 0 0 20px #00a67c,
+  // 0 0 35px #00a67c,
+  // 0 0 40px #00a67c,
+  // 0 0 50px #00a67c,
+  // 0 0 75px #00a67c;
 }
+
 .gun {
   animation: tables 12s linear infinite;
 }
+
 .tables {
   width: 80%;
   height: 680px;
   margin: 0 auto;
   overflow: hidden;
 }
+
 @keyframes tables {
-        0%{
-            transform:translateY(0px)
-        }
-        100%{
-            transform: translateY(calc(-100% + 680px));
-        }
-    }
+  0% {
+    transform: translateY(0px)
+  }
+
+  100% {
+    transform: translateY(calc(-100% + 680px));
+  }
+}
+
 /*最外层透明*/
 ::v-deep .el-table,
 ::v-deep .el-table__expanded-cell {
   background-color: transparent !important;
 }
+
 /* 表格内背景颜色 */
 ::v-deep .el-table th,
 ::v-deep .el-table tr,
 ::v-deep .el-table td {
   background-color: transparent !important;
+  border-top-color: #808DA6;
+  border-bottom-color: #808DA6;
 }
-
-
 </style>