panoramic-view/dist/style.css

基于ThreeJS构建的全景图查看器。

.t-panoramic-container{position:relative;overflow:hidden;width:100%;height:100%}.t-panoramic-container .tippy-box{max-width:1000px!important}.t-panoramic-container .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}.t-panoramic-container [data-tippy-root]{max-width:calc(100vw - 10px)}.t-panoramic-container .tippy-box{position:relative;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.t-panoramic-container .tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.t-panoramic-container .tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.t-panoramic-container .tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.t-panoramic-container .tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.t-panoramic-container .tippy-box[data-placement^=left]>.tippy-arrow{right:0}.t-panoramic-container .tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.t-panoramic-container .tippy-box[data-placement^=right]>.tippy-arrow{left:0}.t-panoramic-container .tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.t-panoramic-container .tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.t-panoramic-container .tippy-arrow{width:16px;height:16px}.t-panoramic-container .tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.t-panoramic-container .tippy-content{position:relative;padding:5px 9px;z-index:1}.t-panoramic-container .tippy-box[data-theme~=t-panoramic-tip]{background-color:#333;color:#eee}.t-panoramic-container .tippy-box[data-theme~=t-panoramic-tip][data-placement^=top]>.tippy-arrow:before{border-top-color:#333}.t-panoramic-container .tippy-box[data-theme~=t-panoramic-tip][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#333}.t-panoramic-container .tippy-box[data-theme~=t-panoramic-tip][data-placement^=left]>.tippy-arrow:before{border-left-color:#333}.t-panoramic-container .tippy-box[data-theme~=t-panoramic-tip][data-placement^=right]>.tippy-arrow:before{border-right-color:#333}.t-panoramic-file-list{position:absolute;width:100%;padding:8px 0;left:0;right:0;bottom:0;height:0;background-color:#14141466;border-radius:5px;display:none;overflow-x:scroll;overflow-y:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.t-panoramic-file-list::-webkit-scrollbar{width:5px;height:6px}.t-panoramic-file-list::-webkit-scrollbar-thumb{border-radius:10px;background-color:#dddddd70}.t-panoramic-file-list::-webkit-scrollbar-thumb:hover{border-radius:10px;background-color:#404040}.t-panoramic-file-list::-webkit-scrollbar-thumb:active{border-radius:10px;background-color:#404040}.t-panoramic-file-list .t-panoramic-file-list-box{margin:0 16px;position:relative}.t-panoramic-file-list .t-panoramic-file-list-box:nth-last-child(1){padding-right:18px}.t-panoramic-file-list .t-panoramic-file-list-box-img{width:180px;height:100px;background-color:#fffc}.t-panoramic-file-list .t-panoramic-file-list-box-p{position:absolute;left:0;bottom:0;text-align:center;width:180px;color:#fff}@media (max-width: 700px){.t-panoramic-file-list .t-panoramic-file-list-box-img{width:120px;height:70px;background-color:#fffc}.t-panoramic-file-list .t-panoramic-file-list-box-p{position:absolute;left:0;bottom:0;text-align:center;width:120px;color:#fff}}.help-dialog-content{border-radius:5px;box-shadow:0 0 7px #00000026;background-color:#fff;overflow:hidden;padding:16px;max-height:60vh}.help-dialog-content h4{margin:0 0 16px;color:#303133;font-size:14px}.help-dialog-content .help-section{margin-bottom:16px}.help-dialog-content .help-section:last-child{margin-bottom:0}.help-dialog-content .help-section h5{margin:0 0 8px;color:#606266;font-size:13px}.help-dialog-content .help-section ul{margin:0;padding-left:20px}.help-dialog-content .help-section ul li{color:#606266;font-size:13px;line-height:1.8}.help-dialog-content button{height:28px;margin-left:5px;border:1px solid #eee;background:#fafafa;color:#333;cursor:pointer;border-radius:4px}.help-dialog-content button:hover{background:#eee;color:#409eff}.t-panoramic-toolbar{position:absolute;bottom:188px;right:35px;display:flex;flex-direction:column;border-radius:50px;background-color:#14141466;padding:2px;overflow:hidden;width:42px;max-height:500px}.t-panoramic-toolbar.two-column{max-height:260px;width:86px;flex-wrap:wrap;border-radius:5px;overflow:auto}.t-panoramic-toolbar.two-column::-webkit-scrollbar{width:4px;height:6px}.t-panoramic-toolbar.two-column::-webkit-scrollbar-thumb{border-radius:10px;background-color:#dddddd70}.t-panoramic-toolbar.two-column::-webkit-scrollbar-thumb:hover{border-radius:10px;background-color:#404040}.t-panoramic-toolbar.two-column::-webkit-scrollbar-thumb:active{border-radius:10px;background-color:#404040}.t-panoramic-toolbar-item{background-color:#fff;border-radius:50px;box-sizing:border-box;width:36px;height:36px;padding:6px;margin:3px;position:relative}.t-panoramic-toolbar-item svg{width:100%;height:100%}.t-panoramic-toolbar-item .point{position:absolute;width:10px;height:10px;background-color:#00aeff;border-radius:50px;right:0;bottom:-2px}.t-panoramic-loading{position:absolute;width:100%;height:100%;background-color:#2e2e2e80;top:0;left:0;display:flex;justify-content:center;align-items:center}.t-panoramic-loading .t-panoramic-loading-bar-k{width:40%;height:1px;background-color:#555}.t-panoramic-loading .t-panoramic-loading-bar-x{height:3px;width:0;background-color:#fff}