|
|
@@ -1,108 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="collspseBox">
|
|
|
- <van-row class="collspse_item" v-for="(item, index) in ruleTree" :key="item.id" @click.stop="open(item, index)" >
|
|
|
- <van-col span="21" class="title" :class="currentRuleId == item.id ? 'item-active' : 'item-gray'">{{ item.name }}</van-col>
|
|
|
- <van-col span="3" class="icon">
|
|
|
- <van-icon v-if="item.child && item.child.length > 0" :name="item.active ? 'arrow-down' : 'arrow'" :color="currentRuleId == item.id ? '#409EFF' : '#878D99'" />
|
|
|
- </van-col>
|
|
|
- <van-col span="24" class="content" v-if="item.child && item.child.length > 0" :style="{ height: item.active ? 'auto' : '0' }">
|
|
|
- <collapse :currentRuleId="currentRuleId" :ruleTree="item.child" @open="$emit('open', $event)" />
|
|
|
- </van-col>
|
|
|
- </van-row>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<!-- -->
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- name: "collapse",
|
|
|
- props: {
|
|
|
- ruleTree: Array,
|
|
|
- currentRuleId: [String, Number],
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- activeName: "",
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- open(item, index) {
|
|
|
- this.activeName = item.name;
|
|
|
- this.$set(this.ruleTree[index], 'active', !this.ruleTree[index].active);
|
|
|
- this.$emit("open", item)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .item-active {
|
|
|
- color: #409EFF !important;
|
|
|
- }
|
|
|
- .item-gray {
|
|
|
- color: #323233 !important;
|
|
|
- }
|
|
|
-.collspseBox {
|
|
|
- padding: 14px 10px;
|
|
|
-
|
|
|
- .collspse_item {
|
|
|
- background-color: #fff;
|
|
|
- padding: 15px 12px;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 10px;
|
|
|
- box-shadow: 0 0px 6px rgba(100, 101, 102, 0.1);
|
|
|
-
|
|
|
- .icon {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 0.32rem;
|
|
|
- color: #323233;
|
|
|
- white-space: nowrap;
|
|
|
- text-wrap: nowrap;
|
|
|
- word-break: keep-all;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- transition: all .5s;
|
|
|
-
|
|
|
- .collspseBox {
|
|
|
- padding: 0;
|
|
|
-
|
|
|
- .collspse_item {
|
|
|
- padding: 16px 0 0 12px;
|
|
|
- margin-bottom: 0;
|
|
|
- box-shadow: none;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 0.3rem;
|
|
|
- color: #2F3541;
|
|
|
- font-family: "PingFang SC";
|
|
|
- font-weight: 400;
|
|
|
- position: relative;
|
|
|
- padding-left: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- // .title::before {
|
|
|
- // content: '';
|
|
|
- // position: absolute;
|
|
|
- // top: calc(50% - 1px);
|
|
|
- // left: 0;
|
|
|
- // width: 2px;
|
|
|
- // height: 2px;
|
|
|
- // background-color: #2F3541;
|
|
|
- // border-radius: 2px;
|
|
|
- // }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|
