|
@@ -17,36 +17,48 @@
|
|
|
v-for="(item, index) in baseEditItems"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <span class="legend-title">{{ item.title }}</span>
|
|
|
- <div
|
|
|
- class="legend-content"
|
|
|
- v-for="(itemList, i) in item.itemList"
|
|
|
- :key="i"
|
|
|
- >
|
|
|
- <div @click="collapse(itemList)" class="title">
|
|
|
- {{ itemList.title }}
|
|
|
- <i
|
|
|
- v-bind:class="[
|
|
|
- itemList.isClip ? 'caret-icon-active' : 'caret-icon',
|
|
|
- 'el-icon-caret-bottom ',
|
|
|
- ]"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- <el-collapse-transition>
|
|
|
- <ul v-show="itemList.isClip">
|
|
|
- <li
|
|
|
- :class="{ 'btn-active': editCmd == baseItem.id }"
|
|
|
- v-for="(baseItem, k) in itemList.itemList"
|
|
|
- :key="k"
|
|
|
- @click="drawItem(baseItem.id)"
|
|
|
- :title="baseItem.name"
|
|
|
- >
|
|
|
- <img class="icon" :src="baseItem.icon" />
|
|
|
- <span class="iconName">{{ baseItem.name }}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-collapse-transition>
|
|
|
+ <div class="legend-title" @click="collapse(item)">
|
|
|
+ <span>{{ item.title }}</span
|
|
|
+ ><i
|
|
|
+ :class="[
|
|
|
+ item.isClip ? 'caret-icon-active' : 'caret-icon',
|
|
|
+ 'el-icon-arrow-down',
|
|
|
+ ]"
|
|
|
+ ></i>
|
|
|
</div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-show="item.isClip">
|
|
|
+ <div
|
|
|
+ class="legend-content"
|
|
|
+ v-for="(itemList, i) in item.itemList"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <div @click="collapse(itemList)" class="title">
|
|
|
+ {{ itemList.title }}
|
|
|
+ <i
|
|
|
+ v-bind:class="[
|
|
|
+ itemList.isClip ? 'caret-icon-active' : 'caret-icon',
|
|
|
+ 'el-icon-caret-bottom ',
|
|
|
+ ]"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <ul v-show="itemList.isClip">
|
|
|
+ <li
|
|
|
+ :class="{ 'btn-active': editCmd == baseItem.id }"
|
|
|
+ v-for="(baseItem, k) in itemList.itemList"
|
|
|
+ :key="k"
|
|
|
+ @click="drawItem(baseItem.id)"
|
|
|
+ :title="baseItem.name"
|
|
|
+ >
|
|
|
+ <img class="icon" :src="baseItem.icon" />
|
|
|
+ <span class="iconName">{{ baseItem.name }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
</div>
|
|
|
<ul class="baseItems" v-show="baseItemList.length">
|
|
|
<li
|
|
@@ -114,11 +126,18 @@ export default {
|
|
|
.legend-title {
|
|
|
display: block;
|
|
|
font-size: 14px;
|
|
|
- height: 38px;
|
|
|
- line-height: 38px;
|
|
|
- margin-left: 10px;
|
|
|
+ padding: 0 10px 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
color: #8d9399;
|
|
|
border-top: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ cursor: pointer;
|
|
|
+ span {
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ }
|
|
|
}
|
|
|
.legend-content {
|
|
|
padding: 0 10 10px 10px;
|
|
@@ -131,45 +150,6 @@ export default {
|
|
|
padding-top: 16px;
|
|
|
padding-bottom: 16px;
|
|
|
cursor: pointer;
|
|
|
- .caret-icon {
|
|
|
- animation: nowhirling 0.2s linear forwards;
|
|
|
- }
|
|
|
- .caret-icon-active {
|
|
|
- animation: whirling 0.2s linear forwards;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes whirling {
|
|
|
- 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(180deg);
|
|
|
- -ms-transform: rotate(180deg); /* Internet Explorer */
|
|
|
- -moz-transform: rotate(180deg); /* Firefox */
|
|
|
- -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
|
|
|
- -o-transform: rotate(180deg); /* Opera */
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes nowhirling {
|
|
|
- 0% {
|
|
|
- transform: rotate(180deg);
|
|
|
- -ms-transform: rotate(180deg); /* Internet Explorer */
|
|
|
- -moz-transform: rotate(180deg); /* Firefox */
|
|
|
- -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
|
|
|
- -o-transform: rotate(180deg); /* 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 */
|
|
|
- }
|
|
|
}
|
|
|
ul {
|
|
|
display: flex;
|
|
@@ -248,4 +228,42 @@ export default {
|
|
|
background: #e1f2ff !important;
|
|
|
}
|
|
|
}
|
|
|
+.caret-icon {
|
|
|
+ animation: nowhirling 0.2s linear forwards;
|
|
|
+}
|
|
|
+.caret-icon-active {
|
|
|
+ animation: whirling 0.2s linear forwards;
|
|
|
+}
|
|
|
+@keyframes whirling {
|
|
|
+ 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(180deg);
|
|
|
+ -ms-transform: rotate(180deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(180deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(180deg); /* Opera */
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes nowhirling {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ -ms-transform: rotate(180deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(180deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(180deg); /* 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 */
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|