|
|
@@ -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>
|
002390
