renyicun
/
ZhongMianAdmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                overflow: hidden;
            }
            .scene {
                width: 100%;
                height: 100%;
            }
            #toolbar {
                position: absolute;
                left: 50%;
                top: 0;
                z-index: 10000;
            }
            [xui_tags_view] .tag-body {
                position: absolute;
                left: 50%;
                bottom: 50px;
                width: 100px;
                height: 100px;
                background-color: bisque;
                transform: translateX(-50%) scale(0);
                transform-origin: bottom;
                transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
                pointer-events: none;
            }
            [xui_tags_view] .tag-body.show {
                transform: translateX(-50%) scale(1);
            }
        </style>
    </head>
    <body>
        <div id="scene" class="scene"></div>
        <script src="../dist/sdk/kankan-sdk-deps.js"></script>
        <script src="../dist/sdk/kankan-sdk.js"></script>
        <script>
            var kankan = new KanKan({
                dom: '#scene',
                num: 't-JKNqv1o',
                tag: {
                    showIn: 'panorama,floorplan',
                },
            })
            kankan
                .use('TagView', {
                    render(data) {
                        console.log(data)
                        if (data.type == 'image') {
                            return `
                                <span class="tag-icon animate" style="background-image:url({{icon}})"></span>
                                <div class="tag-body">sdfsdf</div>
                            `
                        } else {
                            return `
                                <span class="tag-icon animate" style="background-image:url({{icon}})"></span>
                            `
                        }
                    },
                })
                .then(view => {
                    view.on('rendered', () => {
                        view.on('click', e => {
                            var tag = e.data
                            // 聚焦当前点击的热点
                            view.focus(tag.sid)
                        })

                        view.on('focus', e => {
                            document.querySelectorAll('[xui_tags_view] >div').forEach(el => {
                                if (el.getAttribute('data-tag-type') == 'image') {
                                    el.querySelector('.tag-body').classList.remove('show')
                                }
                            })
                            if (e.data.type == 'image') {
                                e.target.querySelector('.tag-body').classList.add('show')
                            }
                        })
                    })
                })
            kankan.render()
        </script>
    </body>
</html>