skjia
/
bonus-ui-canteen-screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

冬至活动大屏修改

This commit is contained in:
zzyuan 2025-12-16 16:55:42 +08:00
parent 3c53aaedd3
commit 90f5922c0b
2 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

56
src/views/view.vue
View File

@ -2,20 +2,20 @@
<div class="container"> <div class="container">
<div class="topdiv"> <div class="topdiv">
<div class="dateTimeClass"> <div class="dateTimeClass">
<span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{dateTime}}</span> <span style="color:#F6F3BC;font-size: 24px;margin-top: 12px;">{{dateTime}}</span>
</div> </div>
<div class="titlediv"> <div class="titlediv">
公示大屏 公示大屏
</div> </div>
<div class="hourTimeClass"> <div class="hourTimeClass">
<span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{hourTime}}</span> <span style="color:#F6F3BC;font-size: 24px;margin-top: 12px;">{{hourTime}}</span>
</div> </div>
</div> </div>
<div style="height: auto;width: 100%;margin-bottom: 20px;"> <div style="height: auto;width: 100%;margin-bottom: 20px;">
<div class="partthree_title"><span>活动公告</span></div> <div class="partthree_title"><span>活动公告</span></div>
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div> <!-- <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div> -->
<div style="display: flex;align-items: center;justify-content: center;"> <div style="display: flex;align-items: center;justify-content: center;">
<img style="width: 90%;height: 370px;" src="../assets/images/huodong1.jpg"/> <img style="width: 90%;" src="../assets/images/huodong1.jpg"/>
</div> </div>
</div> </div>
<!-- <div style="height: auto;width: 100%;margin-bottom: 40px;"> <!-- <div style="height: auto;width: 100%;margin-bottom: 40px;">
@ -54,13 +54,15 @@
</table> </table>
</div> </div>
</div> --> </div> -->
<div style="height: auto;width: 100%;margin-bottom: 40px;"> <div style="height: auto;width: 100%;margin-bottom: 20px;">
<div class="partthree_title"><span>本周菜谱</span></div> <div class="partthree_title"><span>本周菜谱</span></div>
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div> <!-- <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div> -->
<div class="contentclass"> <div class="contentclass">
<div style="width: 80%;border: 1px solid rgba(191,191,255,0.04);margin-top: 10px;"> <div style="width: 80%;border: 1px solid rgba(191,191,255,0.04);margin-top: 10px;">
<div class="dishclass"> <div class="dishclass">
<img src="../assets/images/Frame1.png"/><span>早餐供应</span><img src="../assets/images/breakfast.png" style="float: right;"/> <img src="../assets/images/Frame1.png"/>
<span>早餐供应</span>
<!-- <img src="../assets/images/breakfast.png" style="float: right;"/> -->
</div> </div>
<div class="dishcontentclass"> <div class="dishcontentclass">
<template v-if="onedataList.length>0"> <template v-if="onedataList.length>0">
@ -74,7 +76,9 @@
</div> </div>
<div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;"> <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
<div class="dishclass"> <div class="dishclass">
<img src="../assets/images/Frame2.png"/><span>午餐供应</span><img src="../assets/images/lunch.png" style="float: right;"/> <img src="../assets/images/Frame2.png"/>
<span>午餐供应</span>
<!-- <img src="../assets/images/lunch.png" style="float: right;"/> -->
</div> </div>
<div class="dishcontentclass"> <div class="dishcontentclass">
<template v-if="twodataList.length>0"> <template v-if="twodataList.length>0">
@ -93,7 +97,9 @@
</div> </div>
<div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;"> <div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
<div class="dishclass"> <div class="dishclass">
<img src="../assets/images/Frame.png"/><span>晚餐供应</span><img src="../assets/images/dinner.png" style="float: right;"/> <img src="../assets/images/Frame.png"/>
<span>晚餐供应</span>
<!-- <img src="../assets/images/dinner.png" style="float: right;"/> -->
</div> </div>
<div class="dishcontentclass"> <div class="dishcontentclass">
<template v-if="fourdataList.length>0"> <template v-if="fourdataList.length>0">
@ -107,7 +113,7 @@
</div> </div>
<div style="height: auto;width: 90%;margin: 0 auto;"> <div style="height: auto;width: 90%;margin: 0 auto;">
<div class="partthree_title"><span>证件公示(健康证)</span></div> <div class="partthree_title"><span>证件公示(健康证)</span></div>
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div> <!-- <div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div> -->
<div style="width: 100%; height:100%; "> <div style="width: 100%; height:100%; ">
<carousel :per-page="4" :mouse-drag="true" :autoplay="true" :autoplay-timeout="4000" :loop="true" > <carousel :per-page="4" :mouse-drag="true" :autoplay="true" :autoplay-timeout="4000" :loop="true" >
<slide v-for="(item, index) in staffNums" :key="index"> <slide v-for="(item, index) in staffNums" :key="index">
@ -536,11 +542,11 @@ export default {
.container { .container {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: rgba(148, 5, 0); // background: #000;
// background-image: url("../assets/images/background.jpg"); background-image: url("../assets/images/background.png");
// background-size: cover; background-size: cover;
// background-position: center; background-position: center;
// overflow-y: hidden; /* 保留垂直滚动（如果内容超出屏幕） */ overflow-y: hidden; /* 保留垂直滚动（如果内容超出屏幕） */
} }
.topdiv{ .topdiv{
width: 100%; width: 100%;
@ -558,12 +564,12 @@ export default {
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20; font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
font-weight: normal; font-weight: normal;
font-size: 34px; font-size: 34px;
color: #E1EFFF; color: #F6F3BC;
} }
.dateTimeClass{ .dateTimeClass{
display: flex; display: flex;
justify-content: center; justify-content: center;
color:#E1EFFF; color:#F6F3BC;
width:30%; width:30%;
align-items: center; align-items: center;
} }
@ -571,7 +577,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color:#E1EFFF; color:#F6F3BC;
width:30%; width:30%;
} }
.titlediv2{ .titlediv2{
@ -580,7 +586,7 @@ export default {
// height: 10px; // height: 10px;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
color:#E1EFFF; color:#F6F3BC;
font-size: 28px; font-size: 28px;
// background-image: url("../assets/images/caidanline.png"); // background-image: url("../assets/images/caidanline.png");
// background-size: cover; // background-size: cover;
@ -591,7 +597,7 @@ export default {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
color:#E1EFFF; color:#F6F3BC;
} }
.fegexian{ .fegexian{
width: 50%; width: 50%;
@ -611,7 +617,7 @@ export default {
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20; font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
font-weight: normal; font-weight: normal;
font-size: 24px; font-size: 24px;
color: #D8E2FF; color: #F6F3BC;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -624,7 +630,7 @@ export default {
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
// color: transparent; // color: transparent;
color: #D8E2FF; color: #F6F3BC;
} }
.dishcontentclass{ .dishcontentclass{
display: flex; display: flex;
@ -634,7 +640,7 @@ export default {
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20; font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
font-weight: normal; font-weight: normal;
font-size: 22px; font-size: 22px;
color: #D8E2FF; color: #F6F3BC;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
padding-bottom: 1%; padding-bottom: 1%;
@ -652,7 +658,7 @@ export default {
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20; font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
color: #6FA9FF; color: #F6F3BC;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
@ -669,7 +675,7 @@ export default {
} }
.partthree_title{ .partthree_title{
display: flex; display: flex;
color:#E1EFFF; color:#F6F3BC;
font-size: 25px; font-size: 25px;
justify-content: center; justify-content: center;
margin-bottom: 5px; margin-bottom: 5px;