Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
7d54a17e by 任超
Options

style:材料上传

1 parent 9285eb55
Inline Side-by-side
Showing 10 changed files with 135 additions and 216 deletions
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
59 }, 59 },
60 heightNum: { 60 heightNum: {
61 type: Number, 61 type: Number,
62 default: 275, 62 default: 265,
63 }, 63 },
64 maxHeight: { 64 maxHeight: {
65 type: Number, 65 type: Number,
......
...@@ -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,21 +128,17 @@ export default { ...@@ -130,21 +128,17 @@ 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) 132 if (this.isActive(view)) {
135 .then(({ visitedViews }) => { 133 this.toLastView(visitedViews, view)
136 if (this.isActive(view)) { 134 }
137 this.toLastView(visitedViews, view) 135 })
138 }
139 })
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) 140 this.moveToCurrentTag()
145 .then(() => { 141 })
146 this.moveToCurrentTag()
147 })
148 }, 142 },
149 closeAllTags (view) { 143 closeAllTags (view) {
150 this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => { 144 this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
...@@ -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: ''; 230
261 // background: #0F93F6; 231 &::before {
262 // display: inline-block; 232 content: '';
263 // width: 8px; 233 background: #fff;
264 // height: 8px; 234 display: inline-block;
265 // border-radius: 50%; 235 width: 8px;
266 // position: relative; 236 height: 8px;
267 // margin-right: 2px; 237 border-radius: 50%;
268 // } 238 position: relative;
239 margin-right: 2px;
240 }
269 } 241 }
270
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%;
......
1 // global transition css
2
3 /* fade */ 1 /* fade */
4 .fade-enter-active, 2 .fade-enter-active,
5 .fade-leave-active { 3 .fade-leave-active {
......
...@@ -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> 22 <div v-for="item in tableData" :key="item.bsmSj"
23 <div v-show="menuOpen"> 23 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)">
24 <div v-for="item in tableData" :key="item.bsmSj" 24 <span v-if="item.isrequired==1" class="required">必选</span>
25 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)"> 25 {{ item.sjmc }}
26 {{ item.sjmc }} 26 <span class="cl_number">({{item.children.length}})</span>
27 </div>
28 </div> 27 </div>
29 </el-collapse-transition> 28 </div>
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,25 +231,25 @@ export default { ...@@ -233,25 +231,25 @@ 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
238 }
239 })
240 this.previewImg.imgList = _.cloneDeep(val.children)
241 if (this.previewImg.index == this.previewImg.imgList.length) {
242 this.previewImg.index = this.previewImg.index - 1
240 } 243 }
241 }) 244 } else {
242 this.previewImg.imgList = _.cloneDeep(val.children)
243 if (this.previewImg.index == this.previewImg.imgList.length) {
244 this.previewImg.index = this.previewImg.index - 1
245 }
246 }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 })
253 } 251 }
254 252
255 }, 253 },
256 // 左侧菜单点击 254 // 左侧菜单点击
257 menuClick (item) { 255 menuClick (item) {
...@@ -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 }
......