|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="pipe-list">
|
|
|
+ <div class="pipe-list" id="pipelist">
|
|
|
<Input
|
|
|
class="baseItemInput"
|
|
|
:width="188"
|
|
@@ -8,11 +8,16 @@
|
|
|
@pressEnter="pressEnter"
|
|
|
@clear="pressEnter"
|
|
|
/>
|
|
|
- <div v-show="!pressMsgData.length">
|
|
|
+ <div class="box-type" id="boxtype" v-show="!pressMsgData.length">
|
|
|
<ul class="type" v-for="(item, key) in pipeList" :key="key">
|
|
|
<li class="type-item">
|
|
|
<div class="type-title" @click="collapse(item)">
|
|
|
- <i class="el-icon-caret-bottom"></i>
|
|
|
+ <i
|
|
|
+ v-bind:class="[
|
|
|
+ item.showchild ? 'caret-icon-active' : 'caret-icon',
|
|
|
+ 'el-icon-caret-bottom',
|
|
|
+ ]"
|
|
|
+ ></i>
|
|
|
<span>{{ item.name }}</span>
|
|
|
</div>
|
|
|
<el-collapse-transition>
|
|
@@ -99,7 +104,13 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ const dombox = document.getElementById("pipelist");
|
|
|
+ const boxPorfess = document.getElementById("boxtype");
|
|
|
+ if (dombox) {
|
|
|
+ boxPorfess.style.height = dombox.offsetHeight - 20 + "px";
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
this.getPipeList();
|
|
|
},
|
|
@@ -115,6 +126,10 @@ li {
|
|
|
.pipe-list {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ .box-type {
|
|
|
+ min-height: 500px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
.type {
|
|
|
padding: 12px;
|
|
|
box-sizing: border-box;
|
|
@@ -196,4 +211,42 @@ li {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+.caret-icon {
|
|
|
+ animation: nowhirling 0.2s linear forwards;
|
|
|
+}
|
|
|
+.caret-icon-active {
|
|
|
+ animation: whirling 0.2s linear forwards;
|
|
|
+}
|
|
|
+@keyframes whirling {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ -ms-transform: rotate(-90deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(-90deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(-90deg); /* Opera */
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ -ms-transform: rotate(0deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(0deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(0deg); /* Opera */
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes nowhirling {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ -ms-transform: rotate(0deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(0deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(0deg); /* Opera */
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ -ms-transform: rotate(-90deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(-90deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(-90deg); /* Opera */
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|