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