laozt 1 year ago
parent 619b9cf3b1
commit b7bf4efe24

@ -48,7 +48,7 @@
"js-beautify": "1.13.0", "js-beautify": "1.13.0",
"js-cookie": "3.0.1", "js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1", "jsencrypt": "3.0.0-rc.1",
"leaflet": "^1.5.1", "leaflet": "^1.9.4",
"moment": "^2.29.1", "moment": "^2.29.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"postcss-px2rem": "^0.3.0", "postcss-px2rem": "^0.3.0",

Binary file not shown.

After

Width:  |  Height:  |  Size: 838 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 745 B

@ -15,7 +15,15 @@
:width="width" :width="width"
:style="heightStyle" :style="heightStyle"
append-to-body append-to-body
:custom-class="type == 1 ? 'dialog-boxed': type == 2 ? 'dialog-boxed2' : type == 3 ? 'dialog-boxed3' : ''" :custom-class="
type == 1
? 'dialog-boxed'
: type == 2
? 'dialog-boxed2'
: type == 3
? 'dialog-boxed3'
: ''
"
> >
<template slot="title"> <template slot="title">
<div class="closeClick"> <div class="closeClick">
@ -32,47 +40,48 @@
export default { export default {
data() { data() {
return { return {
dialogVisible:false, dialogVisible: false,
type:0, type: 0,
} };
}, },
props:{ props: {
title:{ title: {
type:String, type: String,
default:"测试标题看看是啥样", default: "测试标题看看是啥样",
}, },
width:{ width: {
type:String, type: String,
default:'50%' default: "50%",
}, },
heightStyle:{ heightStyle: {
type:Object, type: Object,
default: function(){ default: function () {
return {} return {};
}, },
}, },
}, },
methods:{ methods: {
open(id) { open(id) {
this.type = Number(id); this.type = Number(id);
this.dialogVisible = true this.dialogVisible = true;
}, },
Close() { Close() {
this.dialogVisible = false this.dialogVisible = false;
}
}, },
mounted(){ },
mounted() {
// console.log(this.type) // console.log(this.type)
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-dialog { ::v-deep .el-dialog {
// width: vw(878); // width: vw(878);
// height: 520px; // height: 520px;
// border: 1px solid red; // border: 1px solid red;
background-image: url('../../../assets/images/dialogbg.png'); background-image: url("../../../assets/images/dialogbg.png");
background-size: 100% 100%; background-size: 100% 100%;
background-color: transparent;
.el-dialog__header { .el-dialog__header {
padding: 10px 20px; padding: 10px 20px;
.closeClick { .closeClick {
@ -82,27 +91,27 @@ export default {
position: relative; position: relative;
padding-top: 10px; padding-top: 10px;
.headline { .headline {
background-image: url('../../../assets/images/dialogtitlebg.png'); background-image: url("../../../assets/images/dialogtitlebg.png");
width: 451px; width: 451px;
background-size: 100% 100%; background-size: 100% 100%;
padding-left: 22px; padding-left: 22px;
height: 38px; height: 38px;
.headlinetitle { .headlinetitle {
font-size: 20px; font-size: 20px;
font-family: 'YouSheBiaoTiHei'; font-family: "YouSheBiaoTiHei";
font-weight: 400; font-weight: 400;
// line-height: 26px; // line-height: 26px;
color: #FFFFFF; color: #ffffff;
display: flex; display: flex;
flex: 1; flex: 1;
text-shadow: 1px 1px 0px #1A3F76; text-shadow: 1px 1px 0px #1a3f76;
&::before { &::before {
content: attr(text); content: attr(text);
position: absolute; position: absolute;
z-index: 10; z-index: 10;
color: #ffffff; color: #ffffff;
// //
background: linear-gradient(180deg, #FFFFFF 0%, #43B4C5 100%); background: linear-gradient(180deg, #ffffff 0%, #43b4c5 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; color: transparent;
// //
@ -125,7 +134,7 @@ export default {
} }
} }
::v-deep .dialog-boxed { ::v-deep .dialog-boxed {
background-image: url('../../../assets/images/dialogbg/dialog13.png'); background-image: url("../../../assets/images/dialogbg/dialog13.png");
.el-dialog__header { .el-dialog__header {
.closeClick { .closeClick {
.close { .close {
@ -140,10 +149,10 @@ export default {
} }
} }
::v-deep .dialog-boxed2 { ::v-deep .dialog-boxed2 {
background-image: url('../../../assets/images/dialogbg/dialog2.png'); background-image: url("../../../assets/images/dialogbg/dialog2.png");
} }
::v-deep .dialog-boxed3 { ::v-deep .dialog-boxed3 {
background-image: url('../../../assets/images/dialogbg/792@2x.png'); background-image: url("../../../assets/images/dialogbg/792@2x.png");
.el-dialog__header { .el-dialog__header {
.closeClick { .closeClick {
.close { .close {

@ -1,7 +1,158 @@
<template></template> <template>
<div>
<div>
<div class="title">
<span class="icon-bar"></span>
<span class="subtitle">安全生产摸排</span>
</div>
</div>
<div class="search-gr">
<div class="btn-reset">
<div class="icon-reset"></div>
<span class="text">重置</span>
</div>
<div class="btn-search">
<div class="icon-search"></div>
<span class="text">查询</span>
</div>
</div>
<div>
<div class="tb-header">
<span>执法人员</span>
<span>网格</span>
<span>安全生产排查日期</span>
<span>是否发现隐患</span>
<span>是否发起整改工单</span>
</div>
<div class="tb-content">
<span>张天</span>
<span>网格1</span>
<span>2023-09-12</span>
<span></span>
<span></span>
</div>
<div class="tb-content_">
<span>张天</span>
<span>网格1</span>
<span>2023-09-12</span>
<span></span>
<span></span>
</div>
</div>
</div>
</template>
<script> <script>
export default {}; export default {};
</script> </script>
<style></style> <style lang="scss" scoped>
.title {
margin-bottom: 14px;
display: flex;
align-items: center;
.icon-bar {
width: 4px;
height: 12px;
background-color: #5ba1d2;
display: block;
}
.subtitle {
margin-left: 10px;
font-size: 14px;
font-family: Source Han Sans-Medium, Source Han Sans;
color: #e9f4ff;
}
}
.search-gr {
display: flex;
margin: 10px 64px;
.btn-reset {
display: flex;
align-items: center;
border-radius: 2px 2px 2px 2px;
border: 1px solid rgba(181, 207, 255, 0.5);
.icon-reset {
width: 24px;
height: 24px;
background-image: url("../../../../assets/images/icon-reset.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.text {
margin-left: 10px;
font-size: 14px;
font-family: Source Han Sans-Regular, Source Han Sans;
color: #d3eef2;
}
}
.btn-search {
display: flex;
align-items: center;
padding: 4px 16px;
background: rgba(255, 125, 64, 0.8);
box-shadow: inset 0px 0px 13px 0px #f6b463;
border-radius: 2px 2px 2px 2px;
border: 1px solid rgba(181, 207, 255, 0.5);
.icon-search {
width: 24px;
height: 24px;
background-image: url("../../../../assets/images/icon-search.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.text {
margin-left: 10px;
font-size: 14px;
font-family: Source Han Sans-Regular, Source Han Sans;
color: #d3eef2;
}
}
}
.tb-header {
width: 100%;
background: rgba(7, 127, 255, 0.1608);
display: flex;
border-top: 1px solid #077fff;
padding: 10px 20px;
span {
flex: 1;
font-size: 14px;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #d3eef2;
}
}
.tb-content {
width: 100%;
background: rgba(216, 216, 216, 0.1);
display: flex;
padding: 10px 20px;
span {
flex: 1;
font-size: 14px;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #d3eef2;
}
}
.tb-content_ {
width: 100%;
background: rgba(216, 216, 216, 0.3);
display: flex;
padding: 10px 20px;
span {
flex: 1;
font-size: 14px;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #d3eef2;
}
}
</style>

@ -21,6 +21,9 @@
</div> </div>
<div class="tab-page"> <div class="tab-page">
<tab-one v-show="currentIndex == 0"></tab-one> <tab-one v-show="currentIndex == 0"></tab-one>
<tab2 v-show="currentIndex == 1" />
<tab3 v-show="currentIndex == 2" />
<tab4 v-show="currentIndex == 3" />
</div> </div>
</dia-log> </dia-log>
</template> </template>

Loading…
Cancel
Save