style:材料上传
Showing
10 changed files
with
115 additions
and
196 deletions
... | @@ -19,7 +19,7 @@ export default { | ... | @@ -19,7 +19,7 @@ export default { |
19 | <style lang="scss" scoped> | 19 | <style lang="scss" scoped> |
20 | .hasTagsView { | 20 | .hasTagsView { |
21 | .app-main { | 21 | .app-main { |
22 | height: calc(100% - 48px); | 22 | height: calc(100% - 41px); |
23 | overflow-x: auto; | 23 | overflow-x: auto; |
24 | padding: 5px; | 24 | padding: 5px; |
25 | box-sizing: border-box; | 25 | box-sizing: border-box; | ... | ... |
... | @@ -206,15 +206,5 @@ export default { | ... | @@ -206,15 +206,5 @@ export default { |
206 | } | 206 | } |
207 | } | 207 | } |
208 | } | 208 | } |
209 | |||
210 | /*2.隐藏滚动条,太丑了*/ | ||
211 | .el-drawer__container ::-webkit-scrollbar { | ||
212 | display: none; | ||
213 | |||
214 | } | ||
215 | |||
216 | .el-form-item--small .el-form-item__label { | ||
217 | width: 80px !important; | ||
218 | } | ||
219 | } | 209 | } |
220 | </style> | 210 | </style> | ... | ... |
... | @@ -9,32 +9,32 @@ const tagAndTagSpacing = 4 // tagAndTagSpacing | ... | @@ -9,32 +9,32 @@ const tagAndTagSpacing = 4 // tagAndTagSpacing |
9 | 9 | ||
10 | export default { | 10 | export default { |
11 | name: 'ScrollPane', | 11 | name: 'ScrollPane', |
12 | data() { | 12 | data () { |
13 | return { | 13 | return { |
14 | left: 0 | 14 | left: 0 |
15 | } | 15 | } |
16 | }, | 16 | }, |
17 | computed: { | 17 | computed: { |
18 | scrollWrapper() { | 18 | scrollWrapper () { |
19 | return this.$refs.scrollContainer.$refs.wrap | 19 | return this.$refs.scrollContainer.$refs.wrap |
20 | } | 20 | } |
21 | }, | 21 | }, |
22 | mounted() { | 22 | mounted () { |
23 | this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) | 23 | this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) |
24 | }, | 24 | }, |
25 | beforeDestroy() { | 25 | beforeDestroy () { |
26 | this.scrollWrapper.removeEventListener('scroll', this.emitScroll) | 26 | this.scrollWrapper.removeEventListener('scroll', this.emitScroll) |
27 | }, | 27 | }, |
28 | methods: { | 28 | methods: { |
29 | handleScroll(e) { | 29 | handleScroll (e) { |
30 | const eventDelta = e.wheelDelta || -e.deltaY * 40 | 30 | const eventDelta = e.wheelDelta || -e.deltaY * 40 |
31 | const $scrollWrapper = this.scrollWrapper | 31 | const $scrollWrapper = this.scrollWrapper |
32 | $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 | 32 | $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 |
33 | }, | 33 | }, |
34 | emitScroll() { | 34 | emitScroll () { |
35 | this.$emit('scroll') | 35 | this.$emit('scroll') |
36 | }, | 36 | }, |
37 | moveToTarget(currentTag) { | 37 | moveToTarget (currentTag) { |
38 | const $container = this.$refs.scrollContainer.$el | 38 | const $container = this.$refs.scrollContainer.$el |
39 | const $containerWidth = $container.offsetWidth | 39 | const $containerWidth = $container.offsetWidth |
40 | const $scrollWrapper = this.scrollWrapper | 40 | const $scrollWrapper = this.scrollWrapper |
... | @@ -82,15 +82,14 @@ export default { | ... | @@ -82,15 +82,14 @@ export default { |
82 | position: relative; | 82 | position: relative; |
83 | overflow: hidden; | 83 | overflow: hidden; |
84 | width: 100%; | 84 | width: 100%; |
85 | ::v-deep { | 85 | height: 100%; |
86 | .el-scrollbar__bar { | 86 | } |
87 | bottom: 0px; | 87 | |
88 | width: 0; | 88 | /deep/ .el-scrollbar__view { |
89 | } | 89 | display: inline-block !important; |
90 | .el-scrollbar__wrap { | 90 | } |
91 | height: 48px; | 91 | |
92 | line-height: 48px; | 92 | /deep/ .el-scrollbar__wrap { |
93 | } | 93 | overflow-x: hidden !important; |
94 | } | ||
95 | } | 94 | } |
96 | </style> | 95 | </style> | ... | ... |
1 | <template> | 1 | <template> |
2 | <div id="tags-view-container" class="tags-view-container"> | 2 | <div id="tags-view-container" class="tags-view-container"> |
3 | <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> | 3 | <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> |
4 | <p class="pane-mask-left"></p> | 4 | <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag)?'active':''" |
5 | <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''" | ||
6 | :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item" | 5 | :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item" |
7 | @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''" | 6 | @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''" |
8 | @contextmenu.prevent.native="openMenu(tag, $event)"> | 7 | @contextmenu.prevent.native="openMenu(tag,$event)"> |
9 | {{ tag.title }} | 8 | {{ tag.title }} |
10 | <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> | 9 | <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> |
11 | </router-link> | 10 | </router-link> |
12 | <p class="pane-mask-right"></p> | ||
13 | </scroll-pane> | 11 | </scroll-pane> |
14 | <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu"> | 12 | <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> |
15 | <li @click="refreshSelectedTag(selectedTag)">刷新</li> | 13 | <li @click="refreshSelectedTag(selectedTag)">Refresh</li> |
16 | <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li> | 14 | <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li> |
17 | <li @click="closeOthersTags">关闭其他</li> | 15 | <li @click="closeOthersTags">Close Others</li> |
18 | <li @click="closeAllTags(selectedTag)">关闭全部</li> | 16 | <li @click="closeAllTags(selectedTag)">Close All</li> |
19 | </ul> | 17 | </ul> |
20 | </div> | 18 | </div> |
21 | </template> | 19 | </template> |
... | @@ -89,7 +87,7 @@ export default { | ... | @@ -89,7 +87,7 @@ export default { |
89 | return tags | 87 | return tags |
90 | }, | 88 | }, |
91 | initTags () { | 89 | initTags () { |
92 | const affixTags = (this.affixTags = this.filterAffixTags(this.routes)) | 90 | const affixTags = this.affixTags = this.filterAffixTags(this.routes) |
93 | for (const tag of affixTags) { | 91 | for (const tag of affixTags) { |
94 | // Must have tag name | 92 | // Must have tag name |
95 | if (tag.name) { | 93 | if (tag.name) { |
... | @@ -130,9 +128,7 @@ export default { | ... | @@ -130,9 +128,7 @@ export default { |
130 | }) | 128 | }) |
131 | }, | 129 | }, |
132 | closeSelectedTag (view) { | 130 | closeSelectedTag (view) { |
133 | this.$store | 131 | this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => { |
134 | .dispatch('tagsView/delView', view) | ||
135 | .then(({ visitedViews }) => { | ||
136 | if (this.isActive(view)) { | 132 | if (this.isActive(view)) { |
137 | this.toLastView(visitedViews, view) | 133 | this.toLastView(visitedViews, view) |
138 | } | 134 | } |
... | @@ -140,9 +136,7 @@ export default { | ... | @@ -140,9 +136,7 @@ export default { |
140 | }, | 136 | }, |
141 | closeOthersTags () { | 137 | closeOthersTags () { |
142 | this.$router.push(this.selectedTag) | 138 | this.$router.push(this.selectedTag) |
143 | this.$store | 139 | this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => { |
144 | .dispatch('tagsView/delOthersViews', this.selectedTag) | ||
145 | .then(() => { | ||
146 | this.moveToCurrentTag() | 140 | this.moveToCurrentTag() |
147 | }) | 141 | }) |
148 | }, | 142 | }, |
... | @@ -168,14 +162,13 @@ export default { | ... | @@ -168,14 +162,13 @@ export default { |
168 | this.$router.push('/') | 162 | this.$router.push('/') |
169 | } | 163 | } |
170 | } | 164 | } |
171 | console.log(this.$store.state.tagsView.visitedViews); | ||
172 | }, | 165 | }, |
173 | openMenu (tag, e) { | 166 | openMenu (tag, e) { |
174 | const menuMinWidth = 95 | 167 | const menuMinWidth = 105 |
175 | const offsetLeft = this.$el.getBoundingClientRect().left // container margin left | 168 | const offsetLeft = this.$el.getBoundingClientRect().left // container margin left |
176 | const offsetWidth = this.$el.offsetWidth // container width | 169 | const offsetWidth = this.$el.offsetWidth // container width |
177 | const maxLeft = offsetWidth - menuMinWidth // left boundary | 170 | const maxLeft = offsetWidth - menuMinWidth // left boundary |
178 | const left = e.clientX - offsetLeft + 210 // 15: margin right | 171 | const left = e.clientX - offsetLeft + 15 // 15: margin right |
179 | 172 | ||
180 | if (left > maxLeft) { | 173 | if (left > maxLeft) { |
181 | this.left = maxLeft | 174 | this.left = maxLeft |
... | @@ -199,52 +192,29 @@ export default { | ... | @@ -199,52 +192,29 @@ export default { |
199 | 192 | ||
200 | <style lang="scss" scoped> | 193 | <style lang="scss" scoped> |
201 | .tags-view-container { | 194 | .tags-view-container { |
202 | height: 48px; | 195 | height: 40px; |
203 | line-height: 48px; | ||
204 | width: 100%; | 196 | width: 100%; |
205 | background: #EDF1F7; | 197 | background: #fff; |
206 | border-bottom: 1px solid #E4EBF4; | 198 | border-bottom: 1px solid #d8dce5; |
207 | box-shadow: 0 1px 3px 0 rgba(147, 173, 209, 0.12); | 199 | box-sizing: border-box; |
200 | padding-top: 3px; | ||
201 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); | ||
208 | 202 | ||
209 | .tags-view-wrapper { | 203 | .tags-view-wrapper { |
210 | .el-scrollbar__view { | ||
211 | position: relative; | ||
212 | |||
213 | .pane-mask-left, | ||
214 | .pane-mask-right { | ||
215 | position: absolute; | ||
216 | top: 8px; | ||
217 | height: 33px; | ||
218 | z-index: 1; | ||
219 | background: #EDF1F7!important; | ||
220 | |||
221 | } | ||
222 | |||
223 | .pane-mask-left { | ||
224 | width: 15px; | ||
225 | left: 0; | ||
226 | background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 20%, #FFFFFF 33%); | ||
227 | } | ||
228 | |||
229 | .pane-mask-right { | ||
230 | width: 30px; | ||
231 | right: 0; | ||
232 | background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 5%, #FFFFFF 30%); | ||
233 | } | ||
234 | } | ||
235 | |||
236 | .tags-view-item { | 204 | .tags-view-item { |
237 | display: inline-block; | 205 | display: inline-block; |
238 | position: relative; | 206 | position: relative; |
239 | cursor: pointer; | 207 | cursor: pointer; |
240 | height: 31px; | 208 | height: 26px; |
241 | line-height: 29px; | 209 | line-height: 26px; |
242 | color: #686666; | 210 | border: 1px solid #d8dce5; |
243 | background: #D8DFE6; | 211 | color: #495060; |
244 | padding: 0 20px 0 20px; | 212 | background: #fff; |
245 | font-size: 16px; | 213 | padding: 0 8px; |
246 | margin-top: 5px; | 214 | font-size: 12px; |
247 | border-radius: 8px 8px 0 0; | 215 | margin-left: 5px; |
216 | margin-top: 4px; | ||
217 | |||
248 | &:first-of-type { | 218 | &:first-of-type { |
249 | margin-left: 15px; | 219 | margin-left: 15px; |
250 | } | 220 | } |
... | @@ -254,20 +224,21 @@ export default { | ... | @@ -254,20 +224,21 @@ export default { |
254 | } | 224 | } |
255 | 225 | ||
256 | &.active { | 226 | &.active { |
257 | color: #0f93f6; | 227 | background-color: #42b983; |
258 | background: #ffffff; | 228 | color: #fff; |
259 | // &::before { | 229 | border-color: #42b983; |
260 | // content: ''; | ||
261 | // background: #0F93F6; | ||
262 | // display: inline-block; | ||
263 | // width: 8px; | ||
264 | // height: 8px; | ||
265 | // border-radius: 50%; | ||
266 | // position: relative; | ||
267 | // margin-right: 2px; | ||
268 | // } | ||
269 | } | ||
270 | 230 | ||
231 | &::before { | ||
232 | content: ''; | ||
233 | background: #fff; | ||
234 | display: inline-block; | ||
235 | width: 8px; | ||
236 | height: 8px; | ||
237 | border-radius: 50%; | ||
238 | position: relative; | ||
239 | margin-right: 2px; | ||
240 | } | ||
241 | } | ||
271 | } | 242 | } |
272 | } | 243 | } |
273 | 244 | ||
... | @@ -278,22 +249,19 @@ export default { | ... | @@ -278,22 +249,19 @@ export default { |
278 | position: absolute; | 249 | position: absolute; |
279 | list-style-type: none; | 250 | list-style-type: none; |
280 | padding: 5px 0; | 251 | padding: 5px 0; |
252 | border-radius: 4px; | ||
281 | font-size: 12px; | 253 | font-size: 12px; |
282 | font-weight: 400; | 254 | font-weight: 400; |
283 | color: #333; | 255 | color: #333; |
284 | border: 1px solid #EBEEF5; | 256 | box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); |
285 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); | ||
286 | border-radius: 4px 0 0 4px 4px; | ||
287 | 257 | ||
288 | li { | 258 | li { |
289 | height: 29px; | ||
290 | line-height: 29px; | ||
291 | margin: 0; | 259 | margin: 0; |
292 | padding: 0px 16px; | 260 | padding: 7px 16px; |
293 | cursor: pointer; | 261 | cursor: pointer; |
294 | 262 | ||
295 | &:hover { | 263 | &:hover { |
296 | background: #F6F7F9; | 264 | background: #eee; |
297 | } | 265 | } |
298 | } | 266 | } |
299 | } | 267 | } |
... | @@ -304,24 +272,19 @@ export default { | ... | @@ -304,24 +272,19 @@ export default { |
304 | //reset element css of el-icon-close | 272 | //reset element css of el-icon-close |
305 | .tags-view-wrapper { | 273 | .tags-view-wrapper { |
306 | .tags-view-item { | 274 | .tags-view-item { |
307 | text-align: justify; | ||
308 | margin-right: 8px; | ||
309 | |||
310 | .el-icon-close { | 275 | .el-icon-close { |
311 | height: 16px; | ||
312 | width: 16px; | 276 | width: 16px; |
313 | position: relative; | 277 | height: 16px; |
278 | vertical-align: 2px; | ||
314 | border-radius: 50%; | 279 | border-radius: 50%; |
315 | text-align: center; | 280 | text-align: center; |
316 | line-height: 16px; | 281 | transition: all .3s cubic-bezier(.645, .045, .355, 1); |
317 | transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | ||
318 | transform-origin: 100% 50%; | 282 | transform-origin: 100% 50%; |
319 | color: #686666; | ||
320 | font-size: 14px; | ||
321 | 283 | ||
322 | &:before { | 284 | &:before { |
323 | transform: scale(0.8); | 285 | transform: scale(.6); |
324 | display: inline-block; | 286 | display: inline-block; |
287 | vertical-align: -3px; | ||
325 | } | 288 | } |
326 | 289 | ||
327 | &:hover { | 290 | &:hover { | ... | ... |
... | @@ -120,7 +120,6 @@ | ... | @@ -120,7 +120,6 @@ |
120 | ::-webkit-scrollbar-thumb:hover { | 120 | ::-webkit-scrollbar-thumb:hover { |
121 | background-color: rgb(162, 164, 167); | 121 | background-color: rgb(162, 164, 167); |
122 | } | 122 | } |
123 | |||
124 | // element 样式补丁 | 123 | // element 样式补丁 |
125 | .el-menu--horizontal { | 124 | .el-menu--horizontal { |
126 | border-bottom: none !important; | 125 | border-bottom: none !important; | ... | ... |
... | @@ -33,22 +33,6 @@ | ... | @@ -33,22 +33,6 @@ |
33 | } | 33 | } |
34 | } | 34 | } |
35 | 35 | ||
36 | .el-scrollbar__bar.is-vertical { | ||
37 | right: 0px; | ||
38 | } | ||
39 | |||
40 | .el-scrollbar { | ||
41 | height: 100%; | ||
42 | |||
43 | &::-webkit-scrollbar { | ||
44 | display: none; | ||
45 | } | ||
46 | } | ||
47 | |||
48 | .is-horizontal { | ||
49 | display: none; | ||
50 | } | ||
51 | |||
52 | a { | 36 | a { |
53 | display: inline-block; | 37 | display: inline-block; |
54 | width: 100%; | 38 | width: 100%; | ... | ... |
... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
9 | <div class="img-list-wrap"> | 9 | <div class="img-list-wrap"> |
10 | <div v-for="(img, i) in previewImg.imgList" :key="i"> | 10 | <div v-for="(img, i) in previewImg.imgList" :key="i"> |
11 | <photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2" | 11 | <photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2" |
12 | overlayStyle="width: 100%;height: 563px;"> | 12 | overlayStyle="width: 100%;height:100%"> |
13 | </photo-zoom> | 13 | </photo-zoom> |
14 | </div> | 14 | </div> |
15 | </div> | 15 | </div> |
... | @@ -204,8 +204,8 @@ export default { | ... | @@ -204,8 +204,8 @@ export default { |
204 | height: 66px; | 204 | height: 66px; |
205 | line-height: 75px; | 205 | line-height: 75px; |
206 | color: #fff; | 206 | color: #fff; |
207 | background-color: rgb(198, 198, 198); | 207 | background-color: rgb(239, 239, 239); |
208 | border-radius: 4px; | 208 | border-radius: 50%; |
209 | cursor: pointer; | 209 | cursor: pointer; |
210 | text-align: center; | 210 | text-align: center; |
211 | 211 | ||
... | @@ -214,12 +214,17 @@ export default { | ... | @@ -214,12 +214,17 @@ export default { |
214 | } | 214 | } |
215 | } | 215 | } |
216 | 216 | ||
217 | .handle-btn:hover { | ||
218 | background-color: rgb(185, 183, 183); | ||
219 | } | ||
220 | |||
221 | |||
217 | .prev { | 222 | .prev { |
218 | left: 0%; | 223 | left: 1%; |
219 | } | 224 | } |
220 | 225 | ||
221 | .next { | 226 | .next { |
222 | right: 0%; | 227 | right: 1%; |
223 | } | 228 | } |
224 | 229 | ||
225 | .img-list-wrap { | 230 | .img-list-wrap { |
... | @@ -230,6 +235,7 @@ export default { | ... | @@ -230,6 +235,7 @@ export default { |
230 | align-items: center; | 235 | align-items: center; |
231 | background: rgba(194, 190, 190, 0.1); | 236 | background: rgba(194, 190, 190, 0.1); |
232 | overflow: scroll; | 237 | overflow: scroll; |
238 | |||
233 | img { | 239 | img { |
234 | display: block; | 240 | display: block; |
235 | object-fit: scale-down; | 241 | object-fit: scale-down; | ... | ... |
... | @@ -17,16 +17,15 @@ | ... | @@ -17,16 +17,15 @@ |
17 | <div class="clyl-box" v-else> | 17 | <div class="clyl-box" v-else> |
18 | <div class="menu-tree"> | 18 | <div class="menu-tree"> |
19 | <div class="item"> | 19 | <div class="item"> |
20 | 材料目录 | 20 | 材料目录({{tableData.length}}) |
21 | <i :class="iclass" @click="iconClick()"></i> | 21 | <div> |
22 | <el-collapse-transition> | ||
23 | <div v-show="menuOpen"> | ||
24 | <div v-for="item in tableData" :key="item.bsmSj" | 22 | <div v-for="item in tableData" :key="item.bsmSj" |
25 | :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)"> | 23 | :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)"> |
24 | <span v-if="item.isrequired==1" class="required">必选</span> | ||
26 | {{ item.sjmc }} | 25 | {{ item.sjmc }} |
26 | <span class="cl_number">({{item.children.length}})</span> | ||
27 | </div> | 27 | </div> |
28 | </div> | 28 | </div> |
29 | </el-collapse-transition> | ||
30 | </div> | 29 | </div> |
31 | </div> | 30 | </div> |
32 | <image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" /> | 31 | <image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" /> |
... | @@ -55,8 +54,7 @@ export default { | ... | @@ -55,8 +54,7 @@ export default { |
55 | label: "材料预览", | 54 | label: "材料预览", |
56 | }, | 55 | }, |
57 | ], | 56 | ], |
58 | menuOpen: true, | 57 | iclass: "", |
59 | iclass: "itemIcon el-icon-caret-bottom", | ||
60 | treeCheckId: "", | 58 | treeCheckId: "", |
61 | checkedId: "1", | 59 | checkedId: "1", |
62 | column: [ | 60 | column: [ |
... | @@ -233,7 +231,7 @@ export default { | ... | @@ -233,7 +231,7 @@ export default { |
233 | }) | 231 | }) |
234 | }, | 232 | }, |
235 | updateList (val) { | 233 | updateList (val) { |
236 | if(val!=null){ //删除最后一张图片时 val=null | 234 | if (val != null) { //删除最后一张图片时 val=null |
237 | this.tableData.forEach(item => { | 235 | this.tableData.forEach(item => { |
238 | if (item.bsmSj === val.bsmSj) { | 236 | if (item.bsmSj === val.bsmSj) { |
239 | item.children = val.children | 237 | item.children = val.children |
... | @@ -243,10 +241,10 @@ export default { | ... | @@ -243,10 +241,10 @@ export default { |
243 | if (this.previewImg.index == this.previewImg.imgList.length) { | 241 | if (this.previewImg.index == this.previewImg.imgList.length) { |
244 | this.previewImg.index = this.previewImg.index - 1 | 242 | this.previewImg.index = this.previewImg.index - 1 |
245 | } | 243 | } |
246 | }else{ | 244 | } else { |
247 | this.previewImg.imgList = [] | 245 | this.previewImg.imgList = [] |
248 | this.tableData.forEach(item => { | 246 | this.tableData.forEach(item => { |
249 | if(this.treeCheckId == item.bsmSj){ | 247 | if (this.treeCheckId == item.bsmSj) { |
250 | item.children = [] | 248 | item.children = [] |
251 | } | 249 | } |
252 | }) | 250 | }) |
... | @@ -347,20 +345,12 @@ export default { | ... | @@ -347,20 +345,12 @@ export default { |
347 | }) | 345 | }) |
348 | }) | 346 | }) |
349 | }, | 347 | }, |
350 | // 材料目录关闭收起 | ||
351 | iconClick () { | ||
352 | this.menuOpen = !this.menuOpen; | ||
353 | if (this.menuOpen) { | ||
354 | this.iclass = "itemIcon el-icon-caret-bottom close"; | ||
355 | } else { | ||
356 | this.iclass = "itemIcon el-icon-caret-bottom open"; | ||
357 | } | ||
358 | }, | ||
359 | // 材料目录点击选中 | 348 | // 材料目录点击选中 |
360 | treeClick (item) { | 349 | treeClick (item) { |
361 | this.treeCheckId = item.bsmSj; | 350 | this.previewImg.index = 0 |
362 | this.previewImg.imgList = item?.children; | 351 | this.treeCheckId = item.bsmSj |
363 | this.previewImg.bsmSj = item?.bsmSj; | 352 | this.previewImg.imgList = item?.children |
353 | this.previewImg.bsmSj = item?.bsmSj | ||
364 | }, | 354 | }, |
365 | // 小图片点击 | 355 | // 小图片点击 |
366 | imgClick (item, index) { | 356 | imgClick (item, index) { |
... | @@ -391,6 +381,16 @@ export default { | ... | @@ -391,6 +381,16 @@ export default { |
391 | color: #fff; | 381 | color: #fff; |
392 | } | 382 | } |
393 | 383 | ||
384 | .required { | ||
385 | font-size: 12px; | ||
386 | color: $pink; | ||
387 | float: left; | ||
388 | } | ||
389 | |||
390 | .cl_number { | ||
391 | float: right; | ||
392 | } | ||
393 | |||
394 | .clxx { | 394 | .clxx { |
395 | width: 100%; | 395 | width: 100%; |
396 | display: flex; | 396 | display: flex; |
... | @@ -450,11 +450,12 @@ export default { | ... | @@ -450,11 +450,12 @@ export default { |
450 | padding: 0 15px; | 450 | padding: 0 15px; |
451 | 451 | ||
452 | .item { | 452 | .item { |
453 | height: 60px; | 453 | line-height: 30px; |
454 | line-height: 60px; | 454 | padding-top: 5px; |
455 | border-bottom: 1px solid #e8e8e8; | 455 | border-bottom: 1px solid #e8e8e8; |
456 | font-size: 16px; | 456 | font-size: 16px; |
457 | color: #4a4a4a; | 457 | text-align: center; |
458 | color: $light-blue; | ||
458 | 459 | ||
459 | .itemIcon { | 460 | .itemIcon { |
460 | float: right; | 461 | float: right; |
... | @@ -462,44 +463,23 @@ export default { | ... | @@ -462,44 +463,23 @@ export default { |
462 | cursor: pointer; | 463 | cursor: pointer; |
463 | } | 464 | } |
464 | 465 | ||
465 | @keyframes open { | ||
466 | 100% { | ||
467 | transform: rotate(180deg); | ||
468 | } | ||
469 | } | ||
470 | |||
471 | @keyframes close { | ||
472 | 0% { | ||
473 | transform: rotate(180deg); | ||
474 | } | ||
475 | |||
476 | 100% { | ||
477 | transform: rotate(-0deg); | ||
478 | } | ||
479 | } | ||
480 | |||
481 | .open { | ||
482 | animation: open 0.5s; | ||
483 | animation-fill-mode: both; | ||
484 | } | ||
485 | |||
486 | .close { | ||
487 | animation: close 0.5s; | ||
488 | animation-fill-mode: both; | ||
489 | } | ||
490 | |||
491 | .child { | 466 | .child { |
492 | line-height: 36px; | 467 | line-height: 32px; |
493 | border-bottom: 1px solid #e8e8e8; | 468 | border-bottom: 1px solid #e8e8e8; |
494 | padding-left: 10px; | 469 | padding-left: 10px; |
495 | color: #6b6b6b; | 470 | color: #6b6b6b; |
496 | cursor: pointer; | 471 | cursor: pointer; |
497 | box-sizing: border-box; | 472 | box-sizing: border-box; |
473 | border-radius: 6px; | ||
474 | } | ||
475 | |||
476 | .child:hover { | ||
477 | color: $light-blue; | ||
498 | } | 478 | } |
499 | 479 | ||
500 | .checked { | 480 | .checked { |
501 | border-radius: 6px; | 481 | border: 1px solid $light-blue; |
502 | border: 1px solid #4083f9; | 482 | color: $light-blue; |
503 | } | 483 | } |
504 | } | 484 | } |
505 | } | 485 | } | ... | ... |
-
Please register or sign in to post a comment