renyicun
/
ZhongMianAdmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
							<!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;
                right: 0;
                top: 50%;
                margin-right: 70px;
                width: 200px;
                height: 200px;
                transform: translateY(50%) scale(0);
                transform-origin: calc(100% + 40px) -50%;
                transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
                background: rgba(27, 27, 28, 0.8);
                border-radius: 4px;
                min-width: 400px;
                padding: 30px 20px;
            }

            [xui_tags_view] .tag-body::after {
                content: '';
                position: absolute;
                top: 50%;
                right: -39px;
                width: 0;
                height: 0;
                border-top: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-left: 40px solid rgba(27, 27, 28, 0.8);
                transform: translateY(-50%);
            }

            [xui_tags_view] .tag-body.show {
                transform: translateY(-50%) scale(1);
            }

            .title {
                font-size: 20px;
                font-weight: bold;
                line-height: 30px;
                color: #fff;
                position: relative;
            }
            .content {
                margin-top: 10px;
                font-size: 14px;
                color: #999;
                line-height: 20px;
                text-align: justify;
                word-break: break-all;
            }
            .content p {
                margin: 0;
                padding: 0;
            }
        </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-GM44NgSkjr',
                tag:{
                    showIn:'floorplan,dollhouse'
                }
                // num: 'eur-YbbHyQ5OF',
                // server:'https://eur.4dkankan.com/',
                // resource:'https://eurs3.4dkankan.com/'
            })
            kankan
                .use('TagView', {
                    render(data) {
                        return `<span class="tag-icon animate" style="background-image:url({{icon}})"></span><div class="tag-body"></div>`
                    },
                })
                .then(view => {
                    view.on('rendered', () => {
                        // 动态构造面板内容
                        function billboard(data) {
                            return `
                                <div class="title">${data.title}</div>
                                <div class="content">${data.content}</div>
                            `
                        }

                        function open(e) {
                            if (e.$tag.classList.contains('fixed')) {
                                return
                            }
                            view.tags.forEach(item => {
                                view.$tags[item.sid].querySelector('.tag-body').innerHTML = ''
                                view.$tags[item.sid].querySelector('.tag-body').classList.remove('show')
                            })
                            var $body = e.$tag.querySelector('.tag-body')
                            $body.innerHTML = billboard(e.data)
                            $body.classList.add('show')
                        }
                        function close(e) {
                            if (e.$tag.classList.contains('fixed')) {
                                return
                            }
                            let $body = e.$tag.querySelector('.tag-body')
                            $body.classList.remove('show')
                        }

                        view.on('click', e => view.focus(e.data.sid, 'left').then(() => open(e)))
                        view.on('mouseenter', e => open(e))
                        view.on('mouseleave', e => close(e))

                        // 切换点位时关闭热点面板
                        kankan.Camera.on('flying.started', () => {
                            if (!view.isAimating && view.$tag) {
                                view.$tag.classList.remove('fixed')
                                close({ $tag: view.$tag })
                            }
                        })
                    })
                })
            kankan.render()
        </script>
    </body>
</html>