aaa

wujingjing

2025-02-08 40d796814fc688c760004719b773c0b8caf2e334

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
    <div class="layer-control bg-white">
        <div class="w-[370px] bg-white p-3 rounded">
            <div class="header flex-items-center pb-1.5" style="border-bottom: 1px solid black">
                <div class="flex-items-center">
                    <span class="ywifont ywicon-guanbi cursor-pointer mr-1.5" @click="closeClick"></span>
                    <span class="text-lg font-bold">主题</span>
                </div>
            </div>
        </div>
        <div class="content rounded-lg max-h-[700px] overflow-y-auto min-h-[600px]">
            <el-collapse v-model="activeNames" class="mt-2 h-full">
                <el-collapse-item v-for="group in themeInfo" :key="group.id" :title="group.title" :name="group.id" class="">
                    <pre>
                        {{ group.children }}
                    </pre
                    >
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>
 
<script setup lang="ts" name="ThemeControl">
import { computed, ref } from 'vue';
import type { OLMap } from '/@/model/map/OLMap';
const props = defineProps(['olMap']);
 
const emit = defineEmits(['close']);
const activeNames = ref(['1']);
 
const closeClick = () => {
    emit('close');
};
 
const themeList = ref([
    {
        id: 't1',
        group: '分组1',
        title: '主题1',
    },
    {
        id: 't2',
        group: '分组2',
        title: '主题2',
    },
]);
 
const themeInfo = computed(() => (props.olMap as OLMap).themeInfo.value);
</script>
<style scoped lang="scss">
.content {
    .el-collapse {
        --item-border-radius: 0.8rem;
        --el-collapse-border-color: black;
        border-top: unset;
        border-bottom: unset;
        .el-collapse-item {
            :deep(.el-collapse-item__header) {
                background-color: #e5e5e5;
                padding-left: 4px;
            }
            :deep(.el-collapse-item__content) {
                padding-bottom: 0;
            }
 
            &:first-child {
                :deep(.el-collapse-item__header) {
                    border-top-left-radius: var(--item-border-radius);
                    border-top-right-radius: var(--item-border-radius);
                }
            }
            &:last-child {
                :deep(.el-collapse-item__header) {
                    border: unset;
                }
                margin-bottom: unset;
            }
 
        
        }
    }
}
</style>