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

页面样式优化

This commit is contained in:
zzyuan 2025-09-02 14:50:34 +08:00
parent a4d791b912
commit 92cb262062
4 changed files with 537 additions and 596 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/monitor/iframe.html
View File

@ -31,20 +31,10 @@ html, body {
<script> <script>
var urlParams = new URLSearchParams(window.location.search); var urlParams = new URLSearchParams(window.location.search);
var type = urlParams.get('type'); var type = urlParams.get('type');
console.log(type)
$(function () { $(function () {
var height = '100%'; var height = '100%';
var width = $("body").width(); var width = $("body").width();
if(type=="dialog"){ height = 320;
width = $("body").width();
height = '500';
}
if(type=="sanwei"){
width = $("body").width();
height = '930';
}
width = 500;
height = 300;
// <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> // <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
WebVideoCtrl.I_InitPlugin(width,height, { WebVideoCtrl.I_InitPlugin(width,height, {
bWndFull: true,//<2F>Ƿ<EFBFBD>֧<EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD><EFBFBD><EFBFBD>˫<EFBFBD><CBAB>ȫ<EFBFBD><C8AB><EFBFBD><EFBFBD>Ĭ<EFBFBD><C4AC>֧<EFBFBD><D6A7> true:֧<><D6A7> false:<3A><>֧<EFBFBD><D6A7> bWndFull: true,//<2F>Ƿ<EFBFBD>֧<EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD><EFBFBD><EFBFBD>˫<EFBFBD><CBAB>ȫ<EFBFBD><C8AB><EFBFBD><EFBFBD>Ĭ<EFBFBD><C4AC>֧<EFBFBD><D6A7> true:֧<><D6A7> false:<3A><>֧<EFBFBD><D6A7>

59
src/views/videoMonitoring.vue
View File

@ -1,36 +1,18 @@
<template> <template>
<div id="video"> <div id="video">
<div class="contant"> <div class="contant">
<table style="height: 600px;width: 100%;"> <div style="width: 49%;height: auto;margin-bottom: 20px;">
<tr style="height: 100%;width: 100%;"> <iframe style="width: 100%;height: 320px;" src="monitor/iframe.html" ref="videoIframe1" frameborder="0" ></iframe>
<td style="width: 100%;">
<div style="width: 80%; height: 100%; object-fit: cover;" >
<div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('14')"></div>
<iframe style="width: 500px;height: 300px" src="monitor/iframe.html" ref="videoIframe1" frameborder="0" ></iframe>
</div> </div>
</td> <div style="width: 49%;height: auto;">
<td style="width: 100%;"> <iframe style="width: 100%;height: 320px" src="monitor/iframe.html" ref="videoIframe2" frameborder="0" ></iframe>
<div style="width: 80%; height: 100%; object-fit: cover;">
<div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('16')"></div>
<iframe style="width: 500px;height: 300px" src="monitor/iframe.html" ref="videoIframe2" frameborder="0" ></iframe>
</div> </div>
</td> <div style="width: 49%;height: auto;">
</tr> <iframe style="width: 100%;height: 320px;" src="monitor/iframe.html" ref="videoIframe3" frameborder="0" ></iframe>
<tr style="height: 100%;width: 100%;">
<td style="width: 100%;">
<div style="width: 80%; height: 100%; object-fit: cover;" >
<div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('17')"></div>
<iframe style="width: 500px;height: 300px" src="monitor/iframe.html" ref="videoIframe3" frameborder="0" ></iframe>
</div> </div>
</td> <div style="width: 49%;height: auto;">
<td style="width: 100%;"> <iframe style="width: 100%;height: 320px;" src="monitor/iframe.html" ref="videoIframe4" frameborder="0" ></iframe>
<div style="width: 80%; height: 100%; object-fit: cover;" >
<div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('32')"></div>
<iframe style="width: 500px;height: 300px" src="monitor/iframe.html" ref="videoIframe4" frameborder="0" ></iframe>
</div> </div>
</td>
</tr>
</table>
</div> </div>
</div> </div>
@ -157,30 +139,13 @@ methods:{
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 0.2rem; margin: 0 0.2rem;
.header{
display: flex;
align-items: center;
color: #fff;
font-size: 0.5rem;
margin-bottom: 0.1rem;
span{
margin-left: 0.2rem;
}
img{
width: 0.5rem;
height: 0.5rem;
}
// justify-content: center;
}
.contant{ .contant{
// height: 85%; width: 100%;
height: auto;
display: flex; display: flex;
padding-top: 1%; flex-wrap: wrap;
justify-content: space-between;
} }
} }
</style> </style>

110
src/views/view.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<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:#D8E2FF;font-size: 24px;margin-top: 12px;">{{dateTime}}</span>
@ -12,7 +11,6 @@
<span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{hourTime}}</span> <span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{hourTime}}</span>
</div> </div>
</div> </div>
<div class="titlediv2"> <div class="titlediv2">
健康晨检 健康晨检
</div> </div>
@ -66,10 +64,11 @@
</tr> </tr>
</table> </table>
</div> </div>
<div class="fegexian" style="margin-top: 10px;"></div>
<div class="partthree"> <div class="partthree">
<div class="partthree_title"><span>AI巡检记录</span></div> <div class="partthree_title"><span>AI巡检记录</span></div>
<div style="width: 100%; height: 100%; "> <div class="fegexian" style="margin: 10px auto;"></div>
<div style="width: 100%; height: auto;">
<carousel :per-page="3" :mouse-drag="true" :paginationActive="false" :autoplay="true" :autoplay-timeout="5000" :loop="true" > <carousel :per-page="3" :mouse-drag="true" :paginationActive="false" :autoplay="true" :autoplay-timeout="5000" :loop="true" >
<slide v-for="(item, index) in inspectionRecord" :key="index"> <slide v-for="(item, index) in inspectionRecord" :key="index">
<div style="padding: 5%;;width: 100%; height: 90%;overflow: hidden;"> <div style="padding: 5%;;width: 100%; height: 90%;overflow: hidden;">
@ -80,21 +79,21 @@
</div> </div>
</div> </div>
<div style="display: flex;margin-top: 15%;"> <div style="width: 96%;height: auto;margin: 1% auto;display: flex;justify-content: space-between;">
<div class="container2"> <div class="container2">
<div class="partthree_title"><span>证照公示</span></div> <div class="partthree_title"><span>证照公示</span></div>
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 0px;"></div></div> <div class="partthree_title2"><div class="fegexian2" style="width: 80%;"></div></div>
<div style="height: 100%;width: 100%;"> <div style="width: 90%;height: 260px;margin: 10px auto;text-align: center;">
<img style="width: 80%; height: 100%; object-fit: cover;padding-left: 10%" :src="certificatePic[0]"/> <img style="width: 100%; height: 250px; object-fit: cover;" :src="certificatePic[0]"/>
</div> </div>
</div> </div>
<div class="container2"> <div class="container2">
<div class="partthree_title"><span>厨师公示</span></div> <div class="partthree_title"><span>厨师公示</span></div>
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 0px;"></div></div> <div class="partthree_title2"><div class="fegexian2" style="width: 80%;"></div></div>
<div style="width: 100%; height: 100%; "> <div style="width: 90%;height: 260px;margin: 10px auto;text-align: center;">
<carousel :per-page="3" :mouse-drag="false" :navigationEnabled="false" :autoplay="true" :autoplay-timeout="5000" :loop="true" > <carousel :per-page="3" :mouse-drag="false" :navigationEnabled="false" :autoplay="true" :autoplay-timeout="5000" :loop="true" >
<slide v-for="(item, index) in cookCertificate" :key="index"> <slide v-for="(item, index) in cookCertificate" :key="index">
<div style="padding: 5%;;width: 100%; height: 100%;overflow: hidden;"> <div style="padding: 5%;;width: 100%; height: 250px;overflow: hidden;">
<img style="width: 100%; height: 90%; object-fit: cover;" :src="item.picUrl"/> <img style="width: 100%; height: 90%; object-fit: cover;" :src="item.picUrl"/>
<div style="color: #D8E2FF;height: 10%;text-align: center;">{{item.staffname}}</div> <div style="color: #D8E2FF;height: 10%;text-align: center;">{{item.staffname}}</div>
</div> </div>
@ -103,32 +102,13 @@
</div> </div>
</div> </div>
</div> </div>
<div style="height: 40%;width: 70%;margin-top: 8%;"> <div style="width: 90%;height: auto;margin: 1% 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;width: 80%;"></div></div>
<div style="height: 100%;width: 100%;margin-top: 1%;"> <div style="width: 100%;height: 800px;margin-top: 1%;">
<videoMonitoring></videoMonitoring> <videoMonitoring></videoMonitoring>
<!-- <table style="height: 50%;width: 100%;">
<tr style="height: 50%;width: 50%;">
<td style="width: 50%;">
<img style="width: 80%; height: 50%; object-fit: cover;" :src="certificatePic[0]"/>
</td>
<td style="width: 50%;">
<img style="width: 80%; height: 50%; object-fit: cover;" :src="certificatePic[0]"/>
</td>
</tr>
<tr style="height: 50%;width: 50%;">
<td style="width: 50%;">
<img style="width: 80%; height: 50%; object-fit: cover;" :src="certificatePic[0]"/>
</td>
<td style="width: 50%;">
<img style="width: 80%; height: 50%; object-fit: cover;" :src="certificatePic[0]"/>
</td>
</tr>
</table> -->
</div> </div>
</div> </div>
<br>
</div> </div>
</template> </template>
@ -141,7 +121,7 @@
import axios from 'axios'; import axios from 'axios';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { getCertificatePicInfoApi,getCookCertificateInfoApi,getAIRewordInfoApi,getMorningCheckInfoApi } from "@/api/view"; import { getCertificatePicInfoApi,getCookCertificateInfoApi,getAIRewordInfoApi,getMorningCheckInfoApi } from "@/api/view";
export default { export default {
name: "Index", name: "Index",
components: { components: {
videoMonitoring // 注册子组件 videoMonitoring // 注册子组件
@ -579,7 +559,7 @@ export default {
}); });
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -595,44 +575,40 @@ export default {
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
flex-wrap: wrap; flex-wrap: wrap;
} }
.container2 {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center; /* 水平居中 */
align-items: center;
flex-wrap: wrap;
}
.topdiv{ .topdiv{
width: 100%; width: 96%;
display: flex; margin: 0 auto;
background-image: url("../assets/images/canteen1.png"); background-image: url("../assets/images/canteen1.png");
background-size: cover; /* 覆盖整个div */ background-size: 100% 100%; /* 覆盖整个div */
background-position: center; /* 图片居中 */ background-position: center; /* 图片居中 */
height: 15%; height: 180px;
display: flex;
justify-content: space-between;
padding-top: 3%;
margin-bottom: 2%;
} }
.titlediv{ .titlediv{
display: flex; display: flex;
width: 40%; width: 40%;
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
// align-items: flex-end; /* 垂直靠上 */
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20; font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
font-weight: normal; font-weight: 600;
font-size: 34px; font-size: 32px;
color: #E1EFFF; color: #E1EFFF;
} }
.dateTimeClass{ .dateTimeClass{
display: flex; display: flex;
justify-content: center; /* 水平居中 */ // justify-content: center; /* 水平居中 */
color:#fff; color:#fff;
width:30%; width:30%;
font-size: 26px;
} }
.hourTimeClass{ .hourTimeClass{
display: flex; display: flex;
justify-content: center; /* 水平居中 */ justify-content: flex-end; /* 水平居中 */
color:#fff; color:#fff;
width:30%; width:30%;
font-size: 26px;
} }
.titlediv2{ .titlediv2{
display: flex; display: flex;
@ -651,6 +627,7 @@ export default {
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
flex-wrap: wrap; flex-wrap: wrap;
color:#fff; color:#fff;
margin-bottom: 2%;
} }
.fegexian{ .fegexian{
width: 49%; width: 49%;
@ -698,14 +675,10 @@ export default {
margin-top: 3%; margin-top: 3%;
} }
.partthree{ .partthree{
margin-top: 1%; height: auto;
height: 30%; width: 96%;
width: 90%; margin: 1% auto;
margin-bottom: 2%;
display: flex;
width: 100%;
justify-content: center; /* 水平居中 */
flex-wrap: wrap;
} }
.partthree_title{ .partthree_title{
display: flex; display: flex;
@ -715,10 +688,23 @@ export default {
} }
.partthree_title2{ .partthree_title2{
display: flex; display: flex;
height: 6px; height: 30px;
width: 100%; width: 100%;
margin-top: 1%;
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
} }
.container2 {
height: auto;
width: 50%;
display: flex;
flex-direction: row;
justify-content: center; /* 水平居中 */
align-items: center;
flex-wrap: wrap;
}
table, th, td { table, th, td {
// border: 1px solid #fff; // border: 1px solid #fff;
// border-collapse: collapse; /* 可选，用于合并相邻单元格的边框 */ // border-collapse: collapse; /* 可选，用于合并相邻单元格的边框 */

4
vue.config.js
View File

@ -38,8 +38,8 @@ module.exports = {
// target: `http://192.168.2.75:58080`, // target: `http://192.168.2.75:58080`,
// target: `http://192.168.0.61:58080`, // target: `http://192.168.0.61:58080`,
// target: `http://192.168.0.44:58085`, // target: `http://192.168.0.44:58085`,
target: `http://127.0.0.1:48380`, // target: `http://192.168.2.55:48380`,
// target: `http://192.168.0.244:38380`, target: `http://192.168.0.244:48380`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '', ['^' + process.env.VUE_APP_BASE_API]: '',