Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
55adcb77 by 任超
Options

style；弹框样式

1 parent 36f17548
Inline Side-by-side
Showing 10 changed files with 115 additions and 65 deletions
......@@ -40,6 +40,15 @@ export default {
</script>
<style>
.ace-jsoneditor .ace_gutter {
background-color: #08346F !important;
color: #FFFFFF !important;
}
.jsoneditor-menu {
background-color: #074487 !important;
}
/* jsoneditor右上角默认有一个链接,加css去掉了 */
.jsoneditor-poweredBy {
display: none;
......
.itemForm {
margin-top: 5px;
position: relative;
padding: 10px;
......@@ -26,27 +25,19 @@
width: 100%;
}
/deep/.el-form-item__label {
line-height: 16px;
font-size: 12px;
position: relative;
}
/deep/ .el-form-item__content {
display: flex;
}
// table 样式
/deep/.el-form-item__label {
border: 1px solid #DCDFE6;
border-right: none;
background-color: #F2F6FC;
text-align: center;
padding: 0;
line-height: 16px;
font-size: 12px;
color: #CEF8FF;
margin-top: 8px !important;
}
/deep/.el-form-item__content {
border: 1px solid #DCDFE6;
display: flex;
margin-right: -1px;
}
......@@ -54,11 +45,18 @@
/deep/.el-textarea__inner {
margin: 5px;
width: 96%;
background: #05275B;
color: #FFFFFF;
border-radius: 2px;
border: 1px solid #6BC1FC;
}
/deep/.el-input__inner {
margin: 5px;
width: 96%;
background: #05275B;
border-radius: 2px;
border: 1px solid #6BC1FC;
}
/deep/.el-form-item {
......
<template>
<!-- 编辑 -->
<el-dialog :close-on-click-modal="false" top="0" custom-class="dialogBox editDialogBox mainCenter"
:visible.sync="dialogVisible" width="80%">
:visible.sync="dialogVisible" width="85%">
<div slot="title" class="dialog_title" ref="dialogTitle">
<b>{{ title || '标题' }}</b>
</div>
<el-tabs v-model="titleName" type="card" @tab-click="handleTitleTab">
<el-tab-pane label="数据模型" name="sjmx"></el-tab-pane>
<el-tab-pane label="xml报文" name="xml"></el-tab-pane>
</el-tabs>
<div v-if="titleName == 'sjmx'">
<div class="dialog-from">
<el-row>
<el-col :span="6">
......@@ -90,34 +95,36 @@
</el-tab-pane>
</el-tabs>
<div class="edit-content">
<component :is="editItem" ref="editItem" :class="{ 'editForm': $store.state.business.Edit }" :bsmYwsjb="bsmYwsjb"
:bsmSjsb="dataReport.bsmReport" />
<component :is="editItem" ref="editItem" :class="{ 'editForm': $store.state.business.Edit }"
:bsmYwsjb="bsmYwsjb" :bsmSjsb="dataReport.bsmReport" />
</div>
</div>
<div slot="footer" class="dialog_footer" ref="dialogFooter">
<JsonEditor v-else />
<!-- <div slot="footer" class="dialog_footer" ref="dialogFooter">
<div class="dialog_button">
<!-- <el-button type="primary" plain @click="submitForm" v-if="!Edit" :loading="saveloding"
:disabled="JSON.stringify(this.$store.state.business.rules) === '{}'">确定
</el-button> -->
<el-button type="primary" plain @click="submitForm" v-if="!Edit" :loading="saveloding">确定
</el-button>
<el-button @click="closeDialog()">关闭</el-button>
</div>
</div>
</div> -->
</el-dialog>
</template>
<script>
import { mapGetters } from "vuex";
import dataReporting from "@/api/dataReporting";
import JsonEditor from "@/components/JsonEditor/index";
import { getDetail } from "@/api/sbbwcx.js";
import { MessageBox } from "element-ui";
export default {
components: { JsonEditor },
computed: {
...mapGetters(["dicData"]),
},
props: {},
data() {
data () {
return {
titleName: 'sjmx',
dataReport: {},
index: 0,
bsmYwsjb: "",
......@@ -150,7 +157,10 @@ export default {
};
},
methods: {
isShow(item) {
handleTitleTab (val) {
console.log(val);
},
isShow (item) {
this.dataReport = item;
this.dialogVisible = true;
//获取表头列表
......@@ -160,7 +170,7 @@ export default {
}
});
},
changeList(val) {
changeList (val) {
let _index = val.index;
if (_index > this.index) {
}
......@@ -173,14 +183,14 @@ export default {
}
});
},
loadView(view) {
loadView (view) {
return (r) =>
require.ensure([], () => r(require(`@/components/business/${view}`)));
},
closeDialog() {
closeDialog () {
this.dialogVisible = false;
},
submitForm() {
submitForm () {
let _this = this;
this.$store.dispatch(
"business/setRules",
......@@ -226,9 +236,9 @@ export default {
}
});
});
},
},
};
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
......@@ -253,22 +263,42 @@ export default {
flex-direction: column;
}
// /deep/.el-tabs__item {
// background-color: #f2f6fc;
// }
/deep/ .el-tabs {
margin: 0 15px 0 15px;
color: #CEF8FF;
}
/deep/.el-tabs__item {
color: #CEF8FF !important;
height: 50px;
padding-top: 7px;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
.obligee-item-name {
background: #05275B;
color: #FFFFFF;
border: 1px solid #6BC1FC;
}
/deep/.el-tabs__nav-scroll {
background: none;
}
/deep/.el-tabs__nav {
border: none !important;
}
/deep/.el-tabs__item.is-top {
border: 1px solid #dfe4ed;
border-top: 1px solid #dfe4ed;
border-bottom: 1px solid transparent;
}
/deep/.el-tabs__header .el-tabs__nav {
border-top: none;
/deep/.el-tabs__header {
border: none;
}
/deep/.el-tabs__item.is-top:not(:last-child) {
......@@ -276,7 +306,12 @@ export default {
}
/deep/.el-tabs__item.is-top {
background-color: #f2f6fc;
background-color: none !important;
}
/deep/.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.success-images {
......@@ -296,51 +331,50 @@ export default {
}
.edit-content {
height: 380px;
height: 400px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 1px;
border: 1px solid #ccc;
margin-bottom: 10px;
border-top: none;
}
.editDialogBox {
/deep/.editDialogBox {
border-radius: 8px;
overflow: hidden;
min-width: 1228px;
height: 825px !important;
.dialog-from {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px;
background: #08346F;
border-radius: 2px;
box-sizing: border-box;
margin: -3px 15px 15px 15px;
.el-col {
line-height: 24px;
display: flex;
align-items: center;
margin-bottom: 3px;
color: #B5D6DC;
span {
display: inline-block;
padding: 3px;
border-radius: 3px;
overflow: hidden;
min-width: 130px;
min-width: 140px;
text-align: right;
background-color: #f2f6fc;
margin-right: 5px;
color: #02D9FD;
}
p {
white-space: nowrap;
div {
flex: 1;
width: 100%;
padding-left: 5px;
border: 1px solid #f2f6fc;
height: 26px;
background-color: #f5f7fa;
line-height: 20px;
color: #c0c4cc;
cursor: not-allowed;
margin-right: 5px;
......
.dialogBox {
border-radius: 8px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10);
background: url("~@/image/dialogBg.png") no-repeat;
background-size: 100% 100%;
.dialog_title {
display: flex;
......@@ -45,10 +44,12 @@
}
.el-dialog__header {
margin-bottom: 10px;
color: #4A4A4A;
background-color: #FCFDFD;
border-bottom: 1px solid #E4EBF4;
color: #FFFFFF;
// background: #074487;
height: 46px !important;
width: 97%;
margin: 0 auto;
margin-top: 2px;
}
.el-dialog__body {
......@@ -57,9 +58,10 @@
}
.el-dialog__headerbtn .el-dialog__close {
color: #6B7A99 !important;
color: #FFFFFF !important;
position: relative;
top: -2px;
right: 15px
}
......
......@@ -12,6 +12,7 @@
//input
.el-input__inner {
color: #FFFFFF!important;
padding: 0 7px !important;
}
......@@ -63,7 +64,7 @@
// to fixed https://github.com/ElemeFE/element/issues/2461
// refine element ui upload
.el-input.is-disabled .el-input__inner {
color: #909399;
color: #FFFFFF !important;
}
.upload-container {
......
......@@ -383,7 +383,7 @@ aside {
width: 0;
height: 8px;
left: -10px;
top: 1px;
top: 2px;
background: #00FAA8;
color: #00FAA8;
}
......@@ -400,7 +400,7 @@ aside {
width: 0;
height: 8px;
left: -10px;
top: 1px;
top: 2px;
background: #FF7962;
color: #FF7962;
}
\ No newline at end of file
......
......@@ -27,6 +27,7 @@ span:focus {
}
.process-design {
.el-table td,
.el-table th {
color: #333;
......@@ -37,26 +38,31 @@ span:focus {
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
}
.el-dialog__body {
padding: 16px;
max-height: 80vh;
box-sizing: border-box;
overflow-y: auto;
}
.el-dialog__footer {
padding: 16px;
box-sizing: border-box;
border-top: 1px solid #e8e8e8;
}
.el-dialog__close {
font-weight: 600;
}
.el-select {
width: 100%;
}
.el-divider:not(.el-divider--horizontal) {
margin: 0 8px ;
margin: 0 8px;
}
.el-divider.el-divider--horizontal {
margin: 16px 0;
}
......