Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
587c5305 by renchao@pashanhoo.com
Options

docs:注释增加

1 parent ecb27d8c
Inline Side-by-side
Showing 4 changed files with 452 additions and 432 deletions
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-20 10:22:20
5 -->
1 <template> 6 <template>
2 <label class="el-checkbox" :class="[ 7 <label class="el-checkbox" :class="[
3 border && checkboxSize ? 'el-checkbox--' + checkboxSize : '', 8 border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
...@@ -26,217 +31,217 @@ ...@@ -26,217 +31,217 @@
26 </label> 31 </label>
27 </template> 32 </template>
28 <script> 33 <script>
29 import Emitter from 'element-ui/src/mixins/emitter'; 34 import Emitter from 'element-ui/src/mixins/emitter';
30 35
31 export default { 36 export default {
32 name: 'ElCheckbox', 37 name: 'ElCheckbox',
33 38
34 mixins: [Emitter], 39 mixins: [Emitter],
35 40
36 inject: { 41 inject: {
37 elForm: { 42 elForm: {
38 default: '' 43 default: ''
44 },
45 elFormItem: {
46 default: ''
47 }
48 },
49
50 componentName: 'ElCheckbox',
51
52 data () {
53 return {
54 selfModel: false,
55 focus: false,
56 isLimitExceeded: false
57 };
39 }, 58 },
40 elFormItem: {
41 default: ''
42 }
43 },
44 59
45 componentName: 'ElCheckbox', 60 computed: {
61 model: {
62 /**
63 * @description: get
64 * @author: renchao
65 */
66 get () {
67 return this.isGroup
68 ? this.store : this.value !== undefined
69 ? this.value : this.selfModel;
70 },
71 /**
72 * @description: set
73 * @param {*} val
74 * @author: renchao
75 */
76 set (val) {
77 if (this.isGroup) {
78 this.isLimitExceeded = false;
79 (this._checkboxGroup.min !== undefined &&
80 val.length < this._checkboxGroup.min &&
81 (this.isLimitExceeded = true));
46 82
47 data () { 83 (this._checkboxGroup.max !== undefined &&
48 return { 84 val.length > this._checkboxGroup.max &&
49 selfModel: false, 85 (this.isLimitExceeded = true));
50 focus: false, 86
51 isLimitExceeded: false 87 this.isLimitExceeded === false &&
52 }; 88 this.dispatch('ElCheckboxGroup', 'input', [val]);
53 }, 89 } else {
90 this.$emit('input', val);
91 this.selfModel = val;
92 }
93 }
94 },
54 95
55 computed: {
56 model: {
57 /** 96 /**
58 * @description: get 97 * @description: isChecked
59 * @author: renchao 98 * @author: renchao
60 */ 99 */
61 get () { 100 isChecked () {
62 return this.isGroup 101 if ({}.toString.call(this.model) === '[object Boolean]') {
63 ? this.store : this.value !== undefined 102 return this.model;
64 ? this.value : this.selfModel; 103 } else if (Array.isArray(this.model)) {
104 return this.model.indexOf(this.label) > -1;
105 } else if (this.model !== null && this.model !== undefined) {
106 return this.model === this.trueLabel;
107 }
65 }, 108 },
66 /** 109 /**
67 * @description: set 110 * @description: isGroup
68 * @param {*} val
69 * @author: renchao 111 * @author: renchao
70 */ 112 */
71 set (val) { 113 isGroup () {
72 if (this.isGroup) { 114 let parent = this.$parent;
73 this.isLimitExceeded = false; 115 while (parent) {
74 (this._checkboxGroup.min !== undefined && 116 if (parent.$options.componentName !== 'ElCheckboxGroup') {
75 val.length < this._checkboxGroup.min && 117 parent = parent.$parent;
76 (this.isLimitExceeded = true)); 118 } else {
77 119 this._checkboxGroup = parent;
78 (this._checkboxGroup.max !== undefined && 120 return true;
79 val.length > this._checkboxGroup.max && 121 }
80 (this.isLimitExceeded = true));
81
82 this.isLimitExceeded === false &&
83 this.dispatch('ElCheckboxGroup', 'input', [val]);
84 } else {
85 this.$emit('input', val);
86 this.selfModel = val;
87 } 122 }
123 return false;
124 },
125 /**
126 * @description: store
127 * @author: renchao
128 */
129 store () {
130 return this._checkboxGroup ? this._checkboxGroup.value : this.value;
131 },
132
133 /**
134 * @description: isLimitDisabled
135 * @author: renchao
136 */
137 isLimitDisabled () {
138 const { max, min } = this._checkboxGroup;
139 return !!(max || min) &&
140 (this.model.length >= max && !this.isChecked) ||
141 (this.model.length <= min && this.isChecked);
142 },
143 /**
144 * @description: isDisabled
145 * @author: renchao
146 */
147 isDisabled () {
148 return this.isGroup
149 ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled
150 : this.disabled || (this.elForm || {}).disabled;
151 },
152 /**
153 * @description: _elFormItemSize
154 * @author: renchao
155 */
156 _elFormItemSize () {
157 return (this.elFormItem || {}).elFormItemSize;
158 },
159 /**
160 * @description: checkboxSize
161 * @author: renchao
162 */
163 checkboxSize () {
164 const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
165 return this.isGroup
166 ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize
167 : temCheckboxSize;
88 } 168 }
89 }, 169 },
90 170
91 /** 171 props: {
92 * @description: isChecked 172 value: {},
93 * @author: renchao 173 label: {},
94 */ 174 indeterminate: Boolean,
95 isChecked () { 175 disabled: Boolean,
96 if ({}.toString.call(this.model) === '[object Boolean]') { 176 checked: Boolean,
97 return this.model; 177 name: String,
98 } else if (Array.isArray(this.model)) { 178 trueLabel: [String, Number],
99 return this.model.indexOf(this.label) > -1; 179 falseLabel: [String, Number],
100 } else if (this.model !== null && this.model !== undefined) { 180 id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
101 return this.model === this.trueLabel; 181 controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
102 } 182 border: Boolean,
183 size: String
103 }, 184 },
104 /** 185
105 * @description: isGroup 186 methods: {
106 * @author: renchao 187 /**
107 */ 188 * @description: addToStore
108 isGroup () { 189 * @author: renchao
109 let parent = this.$parent; 190 */
110 while (parent) { 191 addToStore () {
111 if (parent.$options.componentName !== 'ElCheckboxGroup') { 192 if (
112 parent = parent.$parent; 193 Array.isArray(this.model) &&
194 this.model.indexOf(this.label) === -1
195 ) {
196 this.model.push(this.label);
113 } else { 197 } else {
114 this._checkboxGroup = parent; 198 this.model = this.trueLabel || true;
115 return true;
116 } 199 }
200 },
201 /**
202 * @description: handleChange
203 * @author: renchao
204 */
205 handleChange (ev) {
206 if (this.isLimitExceeded) return;
207 let value;
208 if (ev.target.checked) {
209 value = this.trueLabel === undefined ? true : this.trueLabel;
210 } else {
211 value = this.falseLabel === undefined ? false : this.falseLabel;
212 }
213 this.$emit('change', value, ev);
214 this.$nextTick(() => {
215 if (this.isGroup) {
216 this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
217 }
218 });
117 } 219 }
118 return false;
119 },
120 /**
121 * @description: store
122 * @author: renchao
123 */
124 store () {
125 return this._checkboxGroup ? this._checkboxGroup.value : this.value;
126 },
127
128 /**
129 * @description: isLimitDisabled
130 * @author: renchao
131 */
132 isLimitDisabled () {
133 const { max, min } = this._checkboxGroup;
134 return !!(max || min) &&
135 (this.model.length >= max && !this.isChecked) ||
136 (this.model.length <= min && this.isChecked);
137 },
138 /**
139 * @description: isDisabled
140 * @author: renchao
141 */
142 isDisabled () {
143 return this.isGroup
144 ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled
145 : this.disabled || (this.elForm || {}).disabled;
146 }, 220 },
147 /** 221 /**
148 * @description: _elFormItemSize 222 * @description: created
149 * @author: renchao 223 * @author: renchao
150 */ 224 */
151 _elFormItemSize () { 225 created () {
152 return (this.elFormItem || {}).elFormItemSize; 226 this.checked && this.addToStore();
153 }, 227 },
154 /** 228 /**
155 * @description: checkboxSize 229 * @description: mounted
156 * @author: renchao 230 * @author: renchao
157 */ 231 */
158 checkboxSize () { 232 mounted () { // 为indeterminate元素 添加aria-controls 属性
159 const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size; 233 if (this.indeterminate) {
160 return this.isGroup 234 this.$el.setAttribute('aria-controls', this.controls);
161 ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize
162 : temCheckboxSize;
163 }
164 },
165
166 props: {
167 value: {},
168 label: {},
169 indeterminate: Boolean,
170 disabled: Boolean,
171 checked: Boolean,
172 name: String,
173 trueLabel: [String, Number],
174 falseLabel: [String, Number],
175 id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
176 controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
177 border: Boolean,
178 size: String
179 },
180
181 methods: {
182 /**
183 * @description: addToStore
184 * @author: renchao
185 */
186 addToStore () {
187 if (
188 Array.isArray(this.model) &&
189 this.model.indexOf(this.label) === -1
190 ) {
191 this.model.push(this.label);
192 } else {
193 this.model = this.trueLabel || true;
194 } 235 }
195 }, 236 },
196 /** 237 /**
197 * @description: handleChange 238 * @description: watch
198 * @author: renchao 239 * @author: renchao
199 */ 240 */
200 handleChange (ev) { 241 watch: {
201 if (this.isLimitExceeded) return; 242 value (value) {
202 let value; 243 this.dispatch('ElFormItem', 'el.form.change', value);
203 if (ev.target.checked) {
204 value = this.trueLabel === undefined ? true : this.trueLabel;
205 } else {
206 value = this.falseLabel === undefined ? false : this.falseLabel;
207 } 244 }
208 this.$emit('change', value, ev);
209 this.$nextTick(() => {
210 if (this.isGroup) {
211 this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
212 }
213 });
214 }
215 },
216 /**
217 * @description: created
218 * @author: renchao
219 */
220 created () {
221 this.checked && this.addToStore();
222 },
223 /**
224 * @description: mounted
225 * @author: renchao
226 */
227 mounted () { // 为indeterminate元素 添加aria-controls 属性
228 if (this.indeterminate) {
229 this.$el.setAttribute('aria-controls', this.controls);
230 }
231 },
232 /**
233 * @description: watch
234 * @author: renchao
235 */
236 watch: {
237 value (value) {
238 this.dispatch('ElFormItem', 'el.form.change', value);
239 } 245 }
240 } 246 };
241 };
242 </script> 247 </script>
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-20 13:33:07
5 -->
1 <template> 6 <template>
2 <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" 7 <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :width="width" :fullscreen="fullscreen" top="0"
3 :append-to-body="appendToBody" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key" 8 :append-to-body="appendToBody" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key"
...@@ -23,117 +28,117 @@ ...@@ -23,117 +28,117 @@
23 </el-dialog> 28 </el-dialog>
24 </template> 29 </template>
25 <script> 30 <script>
26 export default { 31 export default {
27 props: { 32 props: {
28 value: { type: Boolean, default: false }, 33 value: { type: Boolean, default: false },
29 isMain: { 34 isMain: {
30 type: Boolean, 35 type: Boolean,
31 default: false 36 default: false
32 }, 37 },
33 appendToBody: { 38 appendToBody: {
34 type: Boolean, 39 type: Boolean,
35 default: true 40 default: true
36 }, 41 },
37 isButton: { 42 isButton: {
38 type: Boolean, 43 type: Boolean,
39 default: true, 44 default: true,
40 }, 45 },
41 width: { 46 width: {
42 type: String, 47 type: String,
43 default: '70%', 48 default: '70%',
44 }, 49 },
45 title: { 50 title: {
46 type: String, 51 type: String,
47 default: '', 52 default: '',
48 }, 53 },
49 isFullscreen: { 54 isFullscreen: {
50 type: Boolean, 55 type: Boolean,
51 default: true, 56 default: true,
52 }, 57 },
53 isSave: { 58 isSave: {
54 type: Boolean, 59 type: Boolean,
55 default: true, 60 default: true,
56 }, 61 },
57 saveButton: { 62 saveButton: {
58 type: String, 63 type: String,
59 default: '提交', 64 default: '提交',
60 }, 65 },
61 isReset: { 66 isReset: {
62 type: Boolean, 67 type: Boolean,
63 default: true, 68 default: true,
64 }, 69 },
65 saveloding: { 70 saveloding: {
66 type: Boolean, 71 type: Boolean,
67 default: false, 72 default: false,
73 },
74 btnDisabled: {
75 type: Boolean,
76 default: false
77 },
78 height: {
79 type: String,
80 default: ''
81 }
68 }, 82 },
69 btnDisabled: { 83 data () {
70 type: Boolean, 84 return {
71 default: false 85 key: 0,
86 dialogVisible: false,
87 fullscreen: false,
88 scrollerHeight: ''
89 }
72 }, 90 },
73 height: { 91 watch: {
74 type: String, 92 value (val) {
75 default: '' 93 this.$nextTick(() => {
76 } 94 this.dialogVisible = val
77 }, 95 })
78 data () { 96 this.height && (this.scrollerHeight = this.height + 'px')
79 return {
80 key: 0,
81 dialogVisible: false,
82 fullscreen: false,
83 scrollerHeight: ''
84 }
85 },
86 watch: {
87 value (val) {
88 this.$nextTick(() => {
89 this.dialogVisible = val
90 })
91 this.height && (this.scrollerHeight = this.height + 'px')
92 }
93 },
94 methods: {
95 /**
96 * @description: handleFullscreen
97 * @author: renchao
98 */
99 handleFullscreen () {
100 this.fullscreen = !this.fullscreen
101 if (!this.fullscreen) {
102 this.scrollerHeight = ''
103 } else {
104 this.scrollerHeight = (window.innerHeight - 120) + 'px'
105 } 97 }
106 }, 98 },
107 /** 99 methods: {
108 * @description: submitForm 100 /**
109 * @author: renchao 101 * @description: handleFullscreen
110 */ 102 * @author: renchao
111 submitForm () { 103 */
112 if (this.isButton) { 104 handleFullscreen () {
113 this.$emit('submitForm'); 105 this.fullscreen = !this.fullscreen
106 if (!this.fullscreen) {
107 this.scrollerHeight = ''
108 } else {
109 this.scrollerHeight = (window.innerHeight - 120) + 'px'
110 }
111 },
112 /**
113 * @description: submitForm
114 * @author: renchao
115 */
116 submitForm () {
117 if (this.isButton) {
118 this.$emit('submitForm');
119 }
120 },
121 /**
122 * @description: closeDialog
123 * @author: renchao
124 */
125 closeDialog () {
126 this.key++
127 this.$emit('input', false)
128 this.$emit('closeDialog')
114 } 129 }
115 }, 130 },
116 /** 131 }
117 * @description: closeDialog
118 * @author: renchao
119 */
120 closeDialog () {
121 this.key++
122 this.$emit('input', false)
123 this.$emit('closeDialog')
124 }
125 },
126 }
127 </script> 132 </script>
128 <style rel="stylesheet/scss" lang="scss" > 133 <style rel="stylesheet/scss" lang="scss" >
129 @import "~@/styles/mixin.scss"; 134 @import "~@/styles/mixin.scss";
130 @import "~@/styles/dialogBox.scss"; 135 @import "~@/styles/dialogBox.scss";
131 </style> 136 </style>
132 <style rel="stylesheet/scss" scoped lang="scss" > 137 <style rel="stylesheet/scss" scoped lang="scss" >
133 /deep/.is-fullscreen { 138 /deep/.is-fullscreen {
134 position: absolute; 139 position: absolute;
135 top: 50% !important; 140 top: 50% !important;
136 left: 50% !important; 141 left: 50% !important;
137 transform: translate(-50%, -50%) !important; 142 transform: translate(-50%, -50%) !important;
138 } 143 }
139 </style> 144 </style>
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-20 13:40:27
5 -->
1 <template> 6 <template>
2 <dialogBox title="配置常办项目" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%" 7 <dialogBox title="配置常办项目" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
3 @closeDialog="closeDialog" v-model="myValue"> 8 @closeDialog="closeDialog" v-model="myValue">
...@@ -6,103 +11,103 @@ ...@@ -6,103 +11,103 @@
6 </dialogBox> 11 </dialogBox>
7 </template> 12 </template>
8 <script> 13 <script>
9 import { getMenuInfo } from "@/api/user.js"; 14 import { getMenuInfo } from "@/api/user.js";
10 import Tree from "@/components/Tree/src/tree.vue" 15 import Tree from "@/components/Tree/src/tree.vue"
11 import { saveFrequentProjectsList, getHomeFrequentProjects } from "@/api/home.js"; 16 import { saveFrequentProjectsList, getHomeFrequentProjects } from "@/api/home.js";
12 export default { 17 export default {
13 components: { 18 components: {
14 Tree 19 Tree
15 }, 20 },
16 props: { 21 props: {
17 value: { type: Boolean, default: false }, 22 value: { type: Boolean, default: false },
18 bindItem: { type: Array, default: [] } 23 bindItem: { type: Array, default: [] }
19 }, 24 },
20 data () { 25 data () {
21 return { 26 return {
22 myValue: false, 27 myValue: false,
23 defaultCheckeds: [], 28 defaultCheckeds: [],
24 projectList: [], 29 projectList: [],
25 checkedItem: [], 30 checkedItem: [],
26 defaultProps: { 31 defaultProps: {
27 children: "children", 32 children: "children",
28 label: "name", 33 label: "name",
29 disabled: function (data, node) { 34 disabled: function (data, node) {
30 if (data.children && data.children.length > 0) { 35 if (data.children && data.children.length > 0) {
31 return true 36 return true
32 } else { 37 } else {
33 return false 38 return false
39 }
34 } 40 }
35 } 41 },
36 }, 42 uniqueValue: ''//最后拿到的唯一选择的moduldCode值,相当于id
37 uniqueValue: ''//最后拿到的唯一选择的moduldCode值,相当于id
38 }
39 },
40 watch: {
41 value (val) {
42 this.myValue = val
43 if (val) {
44 this.queryClick()
45 } 43 }
46 }
47 },
48 mounted () {
49 this.dealCheckedItem();
50 },
51 methods: {
52 submitForm () {
53 var checkedNodes = this.$refs.tree.getCheckedNodes();
54 if (checkedNodes.length > 6) {
55 this.$message.error("最多选择6个项目！");
56 return
57 }
58 saveFrequentProjectsList(checkedNodes).then(res => {
59 if (res.code == 200) {
60 this.$parent.queryProjectList();
61 this.$message.success("保存成功");
62 this.$emit("input", false);
63 } else {
64 this.$message.error(res.message);
65 }
66 })
67 }, 44 },
68 queryClick () { 45 watch: {
69 let that = this 46 value (val) {
70 getMenuInfo().then(res => { 47 this.myValue = val
71 this.projectList = res.result.slice(0, -2) 48 if (val) {
72 }) 49 this.queryClick()
73 function lookForAllId (arr = []) {
74 for (let item of that.bindItem) {
75 arr.push(item.id)
76 if (item.children && item.children.length) lookForAllId(item.children, arr)
77 } 50 }
78 return arr
79 } 51 }
80 this.defaultCheckeds = lookForAllId()
81 }, 52 },
82 dealCheckedItem () { 53 mounted () {
54 this.dealCheckedItem();
83 }, 55 },
84 //关闭窗口 56 methods: {
85 closeDialog () { 57 submitForm () {
86 this.$emit("input", false); 58 var checkedNodes = this.$refs.tree.getCheckedNodes();
87 }, 59 if (checkedNodes.length > 6) {
88 //节点选择状态发生改变时 60 this.$message.error("最多选择6个项目！");
89 handleClick (data, checked, node) { 61 return
90 var checkedNodes = this.$refs.tree.getCheckedNodes(); 62 }
91 if (checkedNodes.length > 6) { 63 saveFrequentProjectsList(checkedNodes).then(res => {
92 this.$message({ 64 if (res.code == 200) {
93 message: '最后选择6条数据', 65 this.$parent.queryProjectList();
94 type: 'warning', 66 this.$message.success("保存成功");
95 customClass: 'messageIndex' 67 this.$emit("input", false);
68 } else {
69 this.$message.error(res.message);
70 }
71 })
72 },
73 queryClick () {
74 let that = this
75 getMenuInfo().then(res => {
76 this.projectList = res.result.slice(0, -2)
96 }) 77 })
97 this.$refs.tree.setChecked(data, false) // 取消当前节点的选中状态 78 function lookForAllId (arr = []) {
79 for (let item of that.bindItem) {
80 arr.push(item.id)
81 if (item.children && item.children.length) lookForAllId(item.children, arr)
82 }
83 return arr
84 }
85 this.defaultCheckeds = lookForAllId()
86 },
87 dealCheckedItem () {
88 },
89 //关闭窗口
90 closeDialog () {
91 this.$emit("input", false);
92 },
93 //节点选择状态发生改变时
94 handleClick (data, checked, node) {
95 var checkedNodes = this.$refs.tree.getCheckedNodes();
96 if (checkedNodes.length > 6) {
97 this.$message({
98 message: '最后选择6条数据',
99 type: 'warning',
100 customClass: 'messageIndex'
101 })
102 this.$refs.tree.setChecked(data, false) // 取消当前节点的选中状态
103 }
98 } 104 }
99 } 105 }
100 } 106 }
101 }
102 </script> 107 </script>
103 <style scoped lang='scss'> 108 <style scoped lang='scss'>
104 /deep/.el-tree-node.is-expanded>.el-tree-node__children { 109 /deep/.el-tree-node.is-expanded > .el-tree-node__children {
105 display: flex; 110 display: flex;
106 flex-wrap: wrap; 111 flex-wrap: wrap;
107 } 112 }
108 </style> 113 </style>
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-20 13:40:32
5 -->
1 <template> 6 <template>
2 <div class="model"> 7 <div class="model">
3 <div class="mask">123</div> 8 <div class="mask">123</div>
...@@ -18,71 +23,71 @@ ...@@ -18,71 +23,71 @@
18 23
19 24
20 <style scoped lang='scss'> 25 <style scoped lang='scss'>
21 //css部分 26 //css部分
22 .mask { 27 .mask {
23 position: fixed; //这里用固定定位，后面设置动画时才不受影响 28 position: fixed; //这里用固定定位，后面设置动画时才不受影响
24 top: 0; 29 top: 0;
25 height: 100%; 30 height: 100%;
26 width: 100%; 31 width: 100%;
27 background-color: rgba(167, 165, 165, 0.486); 32 background-color: rgba(167, 165, 165, 0.486);
28 opacity: 0.5; 33 opacity: 0.5;
29 z-index: 9; 34 z-index: 9;
30 } 35 }
31 .model-dialog { 36 .model-dialog {
32 position: absolute; 37 position: absolute;
33 //让弹框居中显示 38 //让弹框居中显示
34 top: 50%; 39 top: 50%;
35 left: 50%; 40 left: 50%;
36 transform: translate(-50%, -50%); 41 transform: translate(-50%, -50%);
37 background-color: #fff; 42 background-color: #fff;
38 border-radius: 12px; 43 border-radius: 12px;
39 width: 600px; 44 width: 600px;
40 height: 300px; 45 height: 300px;
41 border: 1px solid #f5f5f5; 46 border: 1px solid #f5f5f5;
42 overflow: hidden; 47 overflow: hidden;
43 z-index: 10; //这里注意层级要比mask大，覆盖它 48 z-index: 10; //这里注意层级要比mask大，覆盖它
44 } 49 }
45 .model-header { 50 .model-header {
46 position: relative; 51 position: relative;
47 height: 50px; 52 height: 50px;
48 padding-left: 10px; 53 padding-left: 10px;
49 padding-top: 10px; 54 padding-top: 10px;
50 font-size: 20px; 55 font-size: 20px;
51 line-height: 50px; 56 line-height: 50px;
52 background-color: #f5f5f5; 57 background-color: #f5f5f5;
53 border-bottom: 1px solid rgb(177, 176, 176); 58 border-bottom: 1px solid rgb(177, 176, 176);
54 } 59 }
55 .model-body { 60 .model-body {
56 height: 150px; 61 height: 150px;
57 line-height: 150px; 62 line-height: 150px;
58 font-size: 28px; 63 font-size: 28px;
59 text-align: center; 64 text-align: center;
60 background-color: #fff; 65 background-color: #fff;
61 } 66 }
62 .model-footer { 67 .model-footer {
63 background-color: #f5f5f5; 68 background-color: #f5f5f5;
64 height: 100px; 69 height: 100px;
65 text-align: center; 70 text-align: center;
66 line-height: 100px; 71 line-height: 100px;
67 } 72 }
68 .btn { 73 .btn {
69 width: 180px; 74 width: 180px;
70 height: 40px; 75 height: 40px;
71 border-radius: 8px; 76 border-radius: 8px;
72 background-color: rgb(180, 103, 103); 77 background-color: rgb(180, 103, 103);
73 color: #fff; 78 color: #fff;
74 font-size: 18px; 79 font-size: 18px;
75 border: none; 80 border: none;
76 } 81 }
77 .icon-close { 82 .icon-close {
78 position: absolute; //如果不加绝对布局，图表显示不出来 83 position: absolute; //如果不加绝对布局，图表显示不出来
79 background-color: pink; 84 background-color: pink;
80 right: 15px; 85 right: 15px;
81 top: 16px; 86 top: 16px;
82 width: 30px; 87 width: 30px;
83 height: 30px; 88 height: 30px;
84 z-index: 10; 89 z-index: 10;
85 //background: url("../assets/icon-close.png") no-repeat; 90 //background: url("../assets/icon-close.png") no-repeat;
86 background-size: contain; 91 background-size: contain;
87 } 92 }
88 </style> 93 </style>
...\ No newline at end of file ...\ No newline at end of file
......