页面样式优化
This commit is contained in:
parent
a4d791b912
commit
92cb262062
|
|
@ -31,20 +31,10 @@ html, body {
|
|||
<script>
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var type = urlParams.get('type');
|
||||
console.log(type)
|
||||
$(function () {
|
||||
var height = '100%';
|
||||
var width = $("body").width();
|
||||
if(type=="dialog"){
|
||||
width = $("body").width();
|
||||
height = '500';
|
||||
}
|
||||
if(type=="sanwei"){
|
||||
width = $("body").width();
|
||||
height = '930';
|
||||
}
|
||||
width = 500;
|
||||
height = 300;
|
||||
height = 320;
|
||||
// <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,18 @@
|
|||
<template>
|
||||
<div id="video">
|
||||
<div class="contant">
|
||||
<table style="height: 600px;width: 100%;">
|
||||
<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('14')"></div>
|
||||
<iframe style="width: 500px;height: 300px" src="monitor/iframe.html" ref="videoIframe1" frameborder="0" ></iframe>
|
||||
<div style="width: 49%;height: auto;margin-bottom: 20px;">
|
||||
<iframe style="width: 100%;height: 320px;" src="monitor/iframe.html" ref="videoIframe1" frameborder="0" ></iframe>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 100%;">
|
||||
<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 style="width: 49%;height: auto;">
|
||||
<iframe style="width: 100%;height: 320px" src="monitor/iframe.html" ref="videoIframe2" frameborder="0" ></iframe>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<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 style="width: 49%;height: auto;">
|
||||
<iframe style="width: 100%;height: 320px;" src="monitor/iframe.html" ref="videoIframe3" frameborder="0" ></iframe>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 100%;">
|
||||
<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 style="width: 49%;height: auto;">
|
||||
<iframe style="width: 100%;height: 320px;" src="monitor/iframe.html" ref="videoIframe4" frameborder="0" ></iframe>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -157,30 +139,13 @@ methods:{
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
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{
|
||||
// height: 85%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
padding-top: 1%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
|
||||
<div class="topdiv">
|
||||
<div class="dateTimeClass">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="titlediv2">
|
||||
健康晨检
|
||||
</div>
|
||||
|
|
@ -66,10 +64,11 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="fegexian" style="margin-top: 10px;"></div>
|
||||
|
||||
<div class="partthree">
|
||||
<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" >
|
||||
<slide v-for="(item, index) in inspectionRecord" :key="index">
|
||||
<div style="padding: 5%;;width: 100%; height: 90%;overflow: hidden;">
|
||||
|
|
@ -80,21 +79,21 @@
|
|||
</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="partthree_title"><span>证照公示</span></div>
|
||||
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 0px;"></div></div>
|
||||
<div style="height: 100%;width: 100%;">
|
||||
<img style="width: 80%; height: 100%; object-fit: cover;padding-left: 10%" :src="certificatePic[0]"/>
|
||||
<div class="partthree_title2"><div class="fegexian2" style="width: 80%;"></div></div>
|
||||
<div style="width: 90%;height: 260px;margin: 10px auto;text-align: center;">
|
||||
<img style="width: 100%; height: 250px; object-fit: cover;" :src="certificatePic[0]"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container2">
|
||||
<div class="partthree_title"><span>厨师公示</span></div>
|
||||
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 0px;"></div></div>
|
||||
<div style="width: 100%; height: 100%; ">
|
||||
<div class="partthree_title2"><div class="fegexian2" style="width: 80%;"></div></div>
|
||||
<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" >
|
||||
<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"/>
|
||||
<div style="color: #D8E2FF;height: 10%;text-align: center;">{{item.staffname}}</div>
|
||||
</div>
|
||||
|
|
@ -103,32 +102,13 @@
|
|||
</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_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div>
|
||||
<div style="height: 100%;width: 100%;margin-top: 1%;">
|
||||
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;width: 80%;"></div></div>
|
||||
<div style="width: 100%;height: 800px;margin-top: 1%;">
|
||||
<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>
|
||||
<br>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -141,7 +121,7 @@
|
|||
import axios from 'axios';
|
||||
import Cookies from 'js-cookie';
|
||||
import { getCertificatePicInfoApi,getCookCertificateInfoApi,getAIRewordInfoApi,getMorningCheckInfoApi } from "@/api/view";
|
||||
export default {
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
videoMonitoring // 注册子组件
|
||||
|
|
@ -579,7 +559,7 @@ export default {
|
|||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -595,44 +575,40 @@ export default {
|
|||
justify-content: center; /* 水平居中 */
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.container2 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.topdiv{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
background-image: url("../assets/images/canteen1.png");
|
||||
background-size: cover; /* 覆盖整个div */
|
||||
background-size: 100% 100%; /* 覆盖整个div */
|
||||
background-position: center; /* 图片居中 */
|
||||
height: 15%;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 3%;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.titlediv{
|
||||
display: flex;
|
||||
width: 40%;
|
||||
justify-content: center; /* 水平居中 */
|
||||
// align-items: flex-end; /* 垂直靠上 */
|
||||
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||||
font-weight: normal;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: #E1EFFF;
|
||||
}
|
||||
.dateTimeClass{
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
// justify-content: center; /* 水平居中 */
|
||||
color:#fff;
|
||||
width:30%;
|
||||
font-size: 26px;
|
||||
}
|
||||
.hourTimeClass{
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
justify-content: flex-end; /* 水平居中 */
|
||||
color:#fff;
|
||||
width:30%;
|
||||
font-size: 26px;
|
||||
}
|
||||
.titlediv2{
|
||||
display: flex;
|
||||
|
|
@ -651,6 +627,7 @@ export default {
|
|||
justify-content: center; /* 水平居中 */
|
||||
flex-wrap: wrap;
|
||||
color:#fff;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.fegexian{
|
||||
width: 49%;
|
||||
|
|
@ -698,14 +675,10 @@ export default {
|
|||
margin-top: 3%;
|
||||
}
|
||||
.partthree{
|
||||
margin-top: 1%;
|
||||
height: 30%;
|
||||
width: 90%;
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center; /* 水平居中 */
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
width: 96%;
|
||||
margin: 1% auto;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.partthree_title{
|
||||
display: flex;
|
||||
|
|
@ -715,10 +688,23 @@ export default {
|
|||
}
|
||||
.partthree_title2{
|
||||
display: flex;
|
||||
height: 6px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
margin-top: 1%;
|
||||
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 {
|
||||
// border: 1px solid #fff;
|
||||
// border-collapse: collapse; /* 可选，用于合并相邻单元格的边框 */
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ module.exports = {
|
|||
// target: `http://192.168.2.75:58080`,
|
||||
// target: `http://192.168.0.61:58080`,
|
||||
// target: `http://192.168.0.44:58085`,
|
||||
target: `http://127.0.0.1:48380`,
|
||||
// target: `http://192.168.0.244:38380`,
|
||||
// target: `http://192.168.2.55:48380`,
|
||||
target: `http://192.168.0.244:48380`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue