jianguan
/
yxt-supervise-gd36524-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式修改

master
ashan 1 year ago
parent
a7fbdde7de
commit
43c9637d15
2 changed files with 55 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/image/videos.jpg
  2. 74
      src/views/mortgage/index.vue

BIN
public/image/videos.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

74
src/views/mortgage/index.vue
View File

@ -112,7 +112,9 @@
</div> </div>
<div class="mortgage_top_item_cons_right"> <div class="mortgage_top_item_cons_right">
<div class="mortgage_top_item_cons_right_top"> <div class="mortgage_top_item_cons_right_top">
<div class="mortgage_top_item_cons_right_top_video"></div> <div class="mortgage_top_item_cons_right_top_video">
<img src="/image/videos.jpg">
</div>
<div class="mortgage_top_item_cons_right_top_foor"> <div class="mortgage_top_item_cons_right_top_foor">
<div class="invie">东北角摄像头1</div> <div class="invie">东北角摄像头1</div>
@ -139,22 +141,22 @@
style="height: 16px; width: 16px" style="height: 16px; width: 16px"
/> />
</span> </span>
警告信息 告警信息
</div> </div>
<div class="titele_right"></div> <div class="titele_right"></div>
</div> </div>
<div class="containers"> <div class="containers">
<div class="container_item"> <div class="container_item">
2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;摄像头1号离线 2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
</div> </div>
<div class="container_item"> <div class="container_item">
2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;摄像头1号离线 2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
</div> </div>
<div class="container_item"> <div class="container_item">
2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;摄像头1号离线 2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
</div> </div>
<div class="container_item"> <div class="container_item">
2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;摄像头1号离线 2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
</div> </div>
</div> </div>
</div> </div>
@ -270,6 +272,15 @@
<iframe src="http://jianguan.yyundong.com/map365/#/map" frameborder="0"></iframe> <iframe src="http://jianguan.yyundong.com/map365/#/map" frameborder="0"></iframe>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog
title="查看视频"
:visible.sync="lookvideo"
width="50%">
<div class="loockvideo">
<video autoplay src="https://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/437270439243.mp4"></video>
</div>
</el-dialog>
</div> </div>
</template> </template>
@ -319,7 +330,8 @@ export default {
], ],
dayValue: "15日", dayValue: "15日",
dialogVisible:false, dialogVisible:false,
videos:true videos:true,
lookvideo:false
}; };
}, },
mounted(){ mounted(){
@ -328,6 +340,7 @@ export default {
methods:{ methods:{
clivideo(){ clivideo(){
this.videos = !this.videos this.videos = !this.videos
this.lookvideo = true
} }
} }
}; };
@ -337,7 +350,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 0px 20px 20px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -349,16 +362,18 @@ export default {
} }
.mortgage_top { .mortgage_top {
width: 100%; width: 100%;
height: calc((100% - 25px) / 2); height: calc((100% - 50px) / 2);
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 40px;
.mortgage_top_item { .mortgage_top_item {
height: 100%; height: 100%;
position: relative; position: relative;
&:nth-of-type(1) { &:nth-of-type(1) {
width: 26%; width: 26%;
box-sizing: border-box;
padding-right: 30px;
::v-deep .el-select { ::v-deep .el-select {
width: 150px; width: 150px;
.el-input { .el-input {
@ -504,6 +519,8 @@ export default {
.mortgage_top_item_cons_right { .mortgage_top_item_cons_right {
width: 40%; width: 40%;
height: 100%; height: 100%;
box-sizing: border-box;
padding-left: 30px;
position: relative; position: relative;
.mortgage_top_item_cons_right_top { .mortgage_top_item_cons_right_top {
height: 50%; height: 50%;
@ -512,12 +529,16 @@ export default {
position: relative; position: relative;
.mortgage_top_item_cons_right_top_video { .mortgage_top_item_cons_right_top_video {
width: 100%; width: 100%;
height: 85%; height: 90%;
position: relative; position: relative;
img{
width: 100%;
height: 100%;
}
} }
.mortgage_top_item_cons_right_top_foor { .mortgage_top_item_cons_right_top_foor {
width: 100%; width: 100%;
height: 15%; height: 10%;
display: flex; display: flex;
position: relative; position: relative;
.invie { .invie {
@ -583,9 +604,13 @@ export default {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
color: #999; color: #999;
font-size: 18px; font-size: 16px;
font-family: '微软雅黑';
box-sizing: border-box; box-sizing: border-box;
padding-left: 20px; padding-left: 20px;
span{
margin-left: 10px;
}
} }
} }
} }
@ -710,7 +735,7 @@ export default {
} }
.mortgage_bom { .mortgage_bom {
width: 100%; width: 100%;
height: calc((100% - 45px) / 2); height: calc((100% - 75px) / 2);
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
@ -718,9 +743,12 @@ export default {
height: 100%; height: 100%;
&:nth-of-type(1) { &:nth-of-type(1) {
width: 26%; width: 26%;
box-sizing:border-box;
padding-right: 30px;
.mortgage_bom_item_cont { .mortgage_bom_item_cont {
box-sizing: border-box; box-sizing: border-box;
padding-left: 25px; padding: 20px;
.mortgage_bom_item_cont_item { .mortgage_bom_item_cont_item {
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
@ -737,7 +765,7 @@ export default {
width: 28%; width: 28%;
.mortgage_bom_item_cont { .mortgage_bom_item_cont {
box-sizing: border-box; box-sizing: border-box;
padding-left: 25px; padding-left: 45px;
.mortgage_bom_item_cont_item { .mortgage_bom_item_cont_item {
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
@ -791,12 +819,12 @@ export default {
} }
.mortgage_bom_item_cont { .mortgage_bom_item_cont {
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 100px);
position: relative; position: relative;
.mortgage_bom_item_cont_item { .mortgage_bom_item_cont_item {
width: 100%; width: 100%;
height: 40px; height: calc(100% / 5);
position: relative; position: relative;
display: flex; display: flex;
border-bottom: solid 1px #dadada; border-bottom: solid 1px #dadada;
@ -818,7 +846,7 @@ export default {
} }
} }
.ditus { .ditus {
height: 200px; height: 160px;
width: 100%; width: 100%;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -843,5 +871,13 @@ export default {
height: 100%; height: 100%;
} }
} }
.loockvideo{
width: 100%;
height: 300px;
video{
width: 100%;
height: 100%;
}
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save