SwkkView.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968
  1. <template>
  2. <div
  3. class="skww-view"
  4. >
  5. <div
  6. class="swkk-wrap"
  7. />
  8. <h1 v-if="!$isMobile">
  9. 安徽省纪录小康工程数据库云展馆
  10. </h1>
  11. <menu
  12. v-show="!($isMobile && mode !== 2)"
  13. class="main-menu"
  14. :style="{
  15. bottom: isShowTourGuide ? 'calc(183px + 30px)' : '',
  16. }"
  17. >
  18. <button
  19. id="auto-moving"
  20. @click="onClickAutoMoving"
  21. >
  22. <img
  23. v-show="!isAutoMoving"
  24. src="@/assets\images\swkk\zidongmanyou.png"
  25. alt=""
  26. draggable="false"
  27. >
  28. <img
  29. v-show="isAutoMoving"
  30. src="@/assets\images\swkk\zidongmanyou_1.png"
  31. alt=""
  32. draggable="false"
  33. >
  34. <!-- <div>自动漫游</div> -->
  35. </button>
  36. <button
  37. id="tour-guide"
  38. :class="{active: isShowTourGuide}"
  39. @click="onClickChangjingdaolan"
  40. >
  41. <img
  42. src="@/assets\images\swkk\changjingdaolan.png"
  43. alt=""
  44. draggable="false"
  45. >
  46. <!-- <div>场景导览</div> -->
  47. </button>
  48. <button
  49. v-if="!$isMobile"
  50. id="qjmy"
  51. :class="{active: mode === 2}"
  52. @click="onClickQuanjingmanyou"
  53. >
  54. <img
  55. src="@/assets\images\swkk\quanjingmanyou.png"
  56. alt=""
  57. draggable="false"
  58. >
  59. <!-- <div>全景漫游</div> -->
  60. </button>
  61. <button
  62. v-if="!$isMobile"
  63. id="overlook"
  64. :class="{active: mode === 3}"
  65. @click="onClickDingbufushi"
  66. >
  67. <img
  68. src="@/assets\images\swkk\dingbufushi.png"
  69. alt=""
  70. draggable="false"
  71. >
  72. <!-- <div>顶部俯视</div> -->
  73. </button>
  74. <button
  75. v-if="!$isMobile"
  76. id="mini-model"
  77. :class="{active: mode === 4}"
  78. @click="onClickMinimoxing"
  79. >
  80. <img
  81. src="@/assets\images\swkk\minimoxing.png"
  82. alt=""
  83. draggable="false"
  84. >
  85. <!-- <div>迷你模型</div> -->
  86. </button>
  87. <!-- <button
  88. id="hotspot-list"
  89. :class="{active: isShowHotspotList}"
  90. @click="isShowHotspotList = true"
  91. >
  92. <img
  93. v-show="!isShowHotspotList"
  94. src="@/assets\images\swkk\hotspot-list.png"
  95. alt=""
  96. draggable="false"
  97. >
  98. <img
  99. v-show="isShowHotspotList"
  100. src="@/assets\images\swkk\hotspot-list-active.png"
  101. alt=""
  102. draggable="false"
  103. >
  104. <div>热点列表</div>
  105. </button> -->
  106. </menu>
  107. <menu
  108. v-show="$isMobile && mode !== 2"
  109. class="mobile-sub-menu"
  110. >
  111. <button
  112. :class="{active: mode === 2}"
  113. @click="onClickQuanjingmanyou"
  114. >
  115. <img
  116. class="manyou"
  117. src="@/assets/images/swkk/quanjingmanyou-sub.png"
  118. alt=""
  119. draggable="false"
  120. >
  121. <span>漫游</span>
  122. </button>
  123. <button
  124. :class="{active: mode === 3}"
  125. @click="onClickDingbufushi"
  126. >
  127. <img
  128. class="pingmian"
  129. src="@/assets/images/swkk/dingbufushi-mobile.png"
  130. alt=""
  131. draggable="false"
  132. >
  133. <span>平面</span>
  134. </button>
  135. <button
  136. :class="{active: mode === 4}"
  137. @click="onClickMinimoxing"
  138. >
  139. <img
  140. class="sanwei"
  141. src="@/assets/images/swkk/minimoxing-mobile.png"
  142. alt=""
  143. draggable="false"
  144. >
  145. <span>三维</span>
  146. </button>
  147. </menu>
  148. <!-- 右上地图 -->
  149. <div
  150. v-show="!isLoading && mode === 2"
  151. id="mini-map"
  152. class="mini-map"
  153. >
  154. <img
  155. class="mini-map-top"
  156. :src="require(`@/assets/images/swkk/mini-map-${$isMobile ? 'mobile' : 'pc'}.png`)"
  157. alt=""
  158. draggable="false"
  159. >
  160. <div class="selector">
  161. <div
  162. v-if="$isMobile"
  163. class="bottom-bar"
  164. >
  165. <button
  166. class="plain"
  167. @click="onClickDingbufushi"
  168. >
  169. <img
  170. class=""
  171. src="@/assets/images/swkk/dingbufushi-mobile.png"
  172. alt=""
  173. draggable="false"
  174. >
  175. <span>平面</span>
  176. </button>
  177. <button
  178. class="model"
  179. @click="onClickMinimoxing"
  180. >
  181. <img
  182. class=""
  183. src="@/assets/images/swkk/minimoxing-mobile.png"
  184. alt=""
  185. draggable="false"
  186. >
  187. <span>三维</span>
  188. </button>
  189. </div>
  190. </div>
  191. </div>
  192. <!-- 导览栏 -->
  193. <div
  194. v-show="isShowTourGuide && !($isMobile && mode !== 2)"
  195. class="tour-guide-wrap swiper-root"
  196. :style="{
  197. zIndex: $globalConfig.zIndex.swkkGuideBar.self
  198. }"
  199. >
  200. <ul
  201. v-if="tourList.length"
  202. class="tour-guide swiper-wrapper"
  203. >
  204. <li
  205. v-for="(item, index) in tourList"
  206. :key="item.sid"
  207. ref="scene-item"
  208. class="swiper-slide"
  209. :class="{active: curSceneIdx === index}"
  210. @click="changeScene(index)"
  211. >
  212. <img
  213. :src="item.list[0].enter.cover"
  214. alt=""
  215. draggable="false"
  216. >
  217. <div class="mask" />
  218. <div
  219. v-show="isAutoMoving && (curSceneIdx === index)"
  220. class="progress"
  221. :style="{
  222. width: autoMovingProgress + '%',
  223. }"
  224. />
  225. <div class="title">
  226. {{ item.name }}
  227. </div>
  228. </li>
  229. </ul>
  230. </div>
  231. <HotspotDetail
  232. v-if="isShowDetail"
  233. class="hotspot-detail"
  234. :style="{
  235. zIndex: $globalConfig.zIndex.swkkHotspotDetail.self
  236. }"
  237. :hotspot-list="relatedHotspotList"
  238. :scene-code="sceneCode"
  239. @close="isShowDetail = false"
  240. />
  241. <HotspotDetailVideo
  242. class="hotspot-detail"
  243. :style="{
  244. zIndex: $globalConfig.zIndex.swkkHotspotDetail.self
  245. }"
  246. />
  247. <HotspotList
  248. v-if="isShowHotspotList"
  249. class="hotspot-list"
  250. :style="{
  251. zIndex: $globalConfig.zIndex.swkkHotspotList.self
  252. }"
  253. :hotspot-data="baseHotData"
  254. @back="isShowHotspotList = false"
  255. @click-hotspot="onClickHotspot"
  256. />
  257. </div>
  258. </template>
  259. <script>
  260. import HotspotDetail from "@/components/HotspotDetail.vue"
  261. import HotspotDetailVideo from "@/components/HotspotDetailVideo.vue"
  262. import HotspotList from "@/components/HotspotList.vue"
  263. import Swiper from 'swiper/swiper-bundle.esm.js'
  264. import 'swiper/swiper-bundle.css'
  265. export default {
  266. components: {
  267. HotspotDetail,
  268. HotspotList,
  269. HotspotDetailVideo,
  270. },
  271. data() {
  272. return {
  273. // 四维看看库相关
  274. kankan: null,
  275. tagView: null,
  276. mode: 2,
  277. isLoading: true,
  278. // 楼层
  279. floor: 0,
  280. sceneCode: '',
  281. // 自动巡游相关
  282. canClickAutoMoving: false,
  283. isAutoMoving: false,
  284. isChangingAutoMovingStatus: false,
  285. autoMovingProgress: 0,
  286. // 自动导览与切换场景相关
  287. isShowTourGuide: false,
  288. tourList: [],
  289. isChangingScene: false,
  290. curSceneIdx: null,
  291. // 热点相关
  292. baseHotData: null,
  293. isShowDetail: false,
  294. isShowHotspotList: false,
  295. }
  296. },
  297. computed: {
  298. ...globalMapState([
  299. 'isMuted',
  300. ])
  301. },
  302. watch: {
  303. isMuted: {
  304. handler(vNew) {
  305. if (!vNew) {
  306. this.stopAutoMoving()
  307. }
  308. }
  309. },
  310. isAutoMoving: {
  311. handler(vNew) {
  312. if (vNew) {
  313. this.isShowTourGuide = true
  314. } else {
  315. }
  316. }
  317. },
  318. isShowTourGuide: {
  319. handler(vNew) {
  320. if (vNew) {
  321. this.$msgCenter.publish('tour-guide-show')
  322. } else {
  323. this.$msgCenter.publish('tour-guide-hide')
  324. }
  325. }
  326. }
  327. },
  328. beforeCreate() {
  329. },
  330. beforeMount() {
  331. if (this.$route.query.isMuted === 'false') {
  332. this.setIsMuted(false)
  333. let newHref = location.href.substring(0, location.href.length - 14)
  334. location.href = newHref
  335. } else if (this.$route.query.isMuted === 'true') {
  336. this.setIsMuted(true)
  337. let newHref = location.href.substring(0, location.href.length - 13)
  338. location.href = newHref
  339. }
  340. },
  341. mounted() {
  342. // setTimeout(() => {
  343. // const haveShownSwkkGuide = localStorage.getItem('haveShownSwkkGuide')
  344. // if (!haveShownSwkkGuide) {
  345. // localStorage.setItem('haveShownSwkkGuide', '1')
  346. // this.$root.userGuide.beginGuide([
  347. // {
  348. // selector: '#auto-moving',
  349. // title: '自动漫游',
  350. // content: '自动游览线上场馆',
  351. // },
  352. // {
  353. // selector: '#tour-guide',
  354. // title: '场景导览',
  355. // content: '查看场景内所有镜头点位',
  356. // },
  357. // {
  358. // selector: '#qjmy',
  359. // title: '全景漫游',
  360. // content: '手动自主漫游',
  361. // },
  362. // {
  363. // selector: '#mini-model',
  364. // title: '迷你模型',
  365. // content: '查看场景3D模型',
  366. // },
  367. // {
  368. // selector: '#overlook',
  369. // title: '顶部俯视',
  370. // content: '查看场景平面图',
  371. // },
  372. // {
  373. // selector: '#hotspot-list',
  374. // title: '热点列表',
  375. // content: '查看场景内所有交互热点',
  376. // },
  377. // {
  378. // selector: '#bottom-bar',
  379. // title: '更多',
  380. // content: '可回到首页,关闭/开启声音,点赞和分享等',
  381. // },
  382. // {
  383. // selector: '#mini-map',
  384. // title: '地图',
  385. // content: '可切换楼层,或查看场景3D模型',
  386. // customWidth: '18rem',
  387. // customHeight: '18rem + 4.6rem',
  388. // },
  389. // ])
  390. // }
  391. // }, 500)
  392. this.$msgCenter.publish('show-loading')
  393. let floor = this.$route.query.floor
  394. this.floor = floor
  395. if (floor === "1") this.sceneCode = process.env.VUE_APP_SCENE_CODE_FLOOR_1
  396. else if (floor === "2") this.sceneCode = process.env.VUE_APP_SCENE_CODE_FLOOR_2
  397. console.assert(this.sceneCode, 'no sceneCode!')
  398. let kankan = new KanKan({
  399. dom: ".swkk-wrap",
  400. num: this.sceneCode,
  401. })
  402. kankan.use("MinMap", {
  403. theme: {
  404. camera_fillStyle: "#930909",
  405. },
  406. })
  407. kankan.use("TourPlayer").then((player) => {
  408. player.on("play", ({ partId, frameId }) => {
  409. this.isAutoMoving = true
  410. this.isChangingAutoMovingStatus = false
  411. this.mustMute()
  412. })
  413. player.on("pause", ({ partId, frameId }) => {
  414. this.isAutoMoving = false
  415. this.isChangingAutoMovingStatus = false
  416. this.cancelMustMute()
  417. })
  418. player.on("end", async () => {
  419. this.isAutoMoving = false
  420. this.isChangingAutoMovingStatus = false
  421. this.autoMovingProgress = 0
  422. this.frameId = null
  423. this.cancelMustMute()
  424. })
  425. player.on("progress", ({ partId, frameId, progress }) => {
  426. if (partId !== this.curSceneIdx) {
  427. this.curSceneIdx = partId
  428. this.autoMovingProgress = 0
  429. this.$refs['scene-item'][this.curSceneIdx].scrollIntoView()
  430. }
  431. this.autoMovingProgress = (frameId / this.tourList[partId].list.length + Number(progress).toFixed(5) / this.tourList[partId].list.length) * 100
  432. })
  433. })
  434. // 导览数据
  435. kankan.TourManager.on("loaded", (tours) => {
  436. try {
  437. this.tourList = tours
  438. console.log('tour list: ', this.tourList)
  439. setTimeout(() => {
  440. new Swiper('.swiper-root', {
  441. slidesPerView: 'auto',
  442. freeMode: true,
  443. mousewheel: true,
  444. grabCursor: true,
  445. // If we need pagination
  446. // pagination: {
  447. // el: '.swiper-pagination',
  448. // },
  449. // Navigation arrows
  450. // navigation: {
  451. // nextEl: '.swiper-button-next',
  452. // prevEl: '.swiper-button-prev',
  453. // },
  454. })
  455. }, 0)
  456. setTimeout(() => {
  457. this.canClickAutoMoving = true
  458. }, 1000)
  459. } catch (e) {
  460. console.error('没拿到导览数据:', e)
  461. this.tourList = []
  462. }
  463. this.$msgCenter.publish('hide-loading')
  464. })
  465. // 全部热点数据
  466. kankan.store.on("tags", (tags) => {
  467. this.baseHotData = tags.tags
  468. console.log('baseHotData: ', this.baseHotData)
  469. })
  470. // 热点
  471. kankan.use("TagView", {
  472. render(data) {
  473. let ifNeedShow = false
  474. // data.title如果没有“&”或者是“a&b&show”这样子,就要显示。
  475. let arrTitle = data.title.split("&")
  476. if (arrTitle[2] === 'show' || !data.title.includes("&")) {
  477. ifNeedShow = true
  478. }
  479. let title = data.title.split("&")[0]
  480. return `
  481. <span class="tag-icon animate" title=${title} style="${ifNeedShow ? "" : "display: none;"}; background-image: url({{icon}})"></span>
  482. <div class="tag-body"></div>
  483. `
  484. },
  485. }).then((TagView) => {
  486. this.tagView = TagView
  487. // 监听手动点击事件
  488. TagView.on("click", (e) => {
  489. this.relatedHotspotList = []
  490. if (e.data.title.split("&")[1]) { // 如果是多个热点合并
  491. this.baseHotData.forEach((item) => {
  492. if (item.title.split("&")[1] === e.data.title.split("&")[1]) {
  493. this.relatedHotspotList.push(item)
  494. }
  495. })
  496. } else { // 单个热点
  497. this.relatedHotspotList.push(e.data)
  498. }
  499. // 聚焦当前点击的热点
  500. TagView.focus(e.data.sid)
  501. this.isShowDetail = true
  502. })
  503. })
  504. // 球幕视频的播放与暂停影响背景音乐的播放状态
  505. kankan.Scene.on("panorama.videorenderer.startvideo", () => {
  506. console.log('startvideo')
  507. this.mustMute()
  508. })
  509. kankan.Scene.on("panorama.videorenderer.suspendrender", () => {
  510. console.log('suspend')
  511. this.cancelMustMute()
  512. })
  513. kankan.Scene.on("panorama.videorenderer.resumerender", () => {
  514. console.log('resume')
  515. this.mustMute()
  516. })
  517. kankan.Scene.on("loaded", () => {
  518. console.log('loaded!')
  519. this.isLoading = false
  520. //设置地面logo
  521. kankan.Scene.setFloorLogo({
  522. url: "./static-swkk/diBiao.png",
  523. size: 40,
  524. })
  525. })
  526. // 监听看看的模式
  527. kankan.Camera.on("mode.beforeChange", ({ toMode }) => {
  528. this.mode = {
  529. panorama: 2,
  530. floorplan: 3,
  531. dollhouse: 4,
  532. }[toMode]
  533. if (this.$isMobile && this.mode !== 2) {
  534. this.$msgCenter.publish('need-hide-bottom-bar')
  535. }
  536. if (this.$isMobile && this.mode === 2) {
  537. this.$msgCenter.publish('need-show-bottom-bar')
  538. }
  539. })
  540. kankan.render()
  541. this.kankan = kankan
  542. },
  543. beforeDestroy() {
  544. this.stopAutoMoving()
  545. },
  546. methods: {
  547. ...globalMapMutations([
  548. 'mustMute',
  549. 'cancelMustMute',
  550. 'setIsMuted',
  551. ]),
  552. changeFloor(val) {
  553. let newHref = location.href.substring(0, location.href.length - 1) + val + `&isMuted=${this.isMuted}`
  554. location.href = newHref
  555. location.reload()
  556. },
  557. onClickAutoMoving() {
  558. if (!this.canClickAutoMoving) {
  559. return
  560. }
  561. if (this.isAutoMoving) {
  562. this.stopAutoMoving()
  563. } else {
  564. this.startAutoMoving()
  565. }
  566. },
  567. async startAutoMoving() {
  568. if (this.isChangingAutoMovingStatus || this.isAutoMoving) {
  569. return
  570. }
  571. this.isChangingAutoMovingStatus = true
  572. let player = await this.kankan.TourManager.player
  573. player.play()
  574. },
  575. async stopAutoMoving() {
  576. if (this.isChangingAutoMovingStatus || !this.isAutoMoving) {
  577. return
  578. }
  579. this.isChangingAutoMovingStatus = true
  580. let player = await this.kankan.TourManager.player
  581. player.pause()
  582. },
  583. onClickChangjingdaolan() {
  584. this.isShowTourGuide = !this.isShowTourGuide
  585. },
  586. onClickQuanjingmanyou() {
  587. this.kankan.Camera.panorama()
  588. },
  589. onClickMinimoxing() {
  590. this.stopAutoMoving()
  591. this.kankan.Camera.dollhouse()
  592. },
  593. onClickDingbufushi() {
  594. this.stopAutoMoving()
  595. this.kankan.Camera.floorplan()
  596. },
  597. async changeScene(index) {
  598. if (this.isChangingScene) {
  599. return
  600. }
  601. this.stopAutoMoving()
  602. this.isChangingScene = true
  603. this.curSceneIdx = index
  604. this.$refs['scene-item'][this.curSceneIdx].scrollIntoView()
  605. let player = await this.kankan.TourManager.player
  606. player.pause()
  607. await player.selectPart(index)
  608. this.isChangingScene = false
  609. },
  610. onClickHotspot(hotspot) {
  611. this.isShowHotspotList = false
  612. this.relatedHotspotList = []
  613. if (hotspot.title.split("&")[1]) { // 如果是多个热点合并
  614. this.baseHotData.forEach((item) => {
  615. if (item.title.split("&")[1] === hotspot.title.split("&")[1]) {
  616. this.relatedHotspotList.push(item)
  617. }
  618. })
  619. } else { // 单个热点
  620. this.relatedHotspotList.push(hotspot)
  621. }
  622. // 聚焦当前点击的热点
  623. this.tagView && this.tagView.focus(hotspot.sid)
  624. this.isShowDetail = true
  625. }
  626. },
  627. }
  628. </script>
  629. <style lang="less" scoped>
  630. .skww-view {
  631. position: relative;
  632. width: 100%;
  633. height: 100%;
  634. .swkk-wrap {
  635. position: absolute;
  636. top: 0;
  637. left: 0;
  638. width: 100%;
  639. height: 100%;
  640. }
  641. > h1 {
  642. position: absolute;
  643. z-index: 1;
  644. top: 23px;
  645. left: 50%;
  646. transform: translateX(-50%);
  647. background: rgba(0,0,0,0.45);
  648. border-radius: 33px;
  649. font-size: 16px;
  650. color: #FFFFFF;
  651. padding: 9px 29px;
  652. }
  653. > menu.main-menu {
  654. position: absolute;
  655. z-index: 1;
  656. bottom: 30px;
  657. display: flex;
  658. align-items: center;
  659. pointer-events: none;
  660. > button {
  661. pointer-events: initial;
  662. margin-left: 30px;
  663. opacity: 0.7;
  664. &:hover {
  665. opacity: 1;
  666. }
  667. > img {
  668. width: 50px;
  669. height: 50px;
  670. }
  671. > div {
  672. color: #fff;
  673. text-shadow: 0px 0px 0.2rem rgba(255,255,255,0.6);
  674. margin-top: 0.17rem;
  675. font-size: 1.17rem;
  676. }
  677. &.active {
  678. opacity: 1;
  679. > div {
  680. color: #930909;
  681. text-shadow: 0px 0px 0.2rem rgba(255,255,255,0.6);
  682. }
  683. }
  684. }
  685. }
  686. > menu.mobile-sub-menu {
  687. position: absolute;
  688. z-index: 1;
  689. top: 17px;
  690. left: 50%;
  691. transform: translateX(-50%);
  692. padding: 3px;
  693. background: rgba(0,0,0,0.5);
  694. border-radius: 5px 5px 5px 5px;
  695. display: flex;
  696. align-items: center;
  697. > button {
  698. width: 75px;
  699. height: 37px;
  700. // background: rgba(161,14,12,0.7);
  701. border-radius: 2px 2px 2px 2px;
  702. display: flex;
  703. align-items: center;
  704. justify-content: center;
  705. &.active {
  706. background: rgba(161,14,12,0.7);
  707. }
  708. > img.manyou {
  709. width: 8px;
  710. height: 20px;
  711. margin-right: 6px;
  712. }
  713. > img.pingmian {
  714. width: 19px;
  715. height: 19px;
  716. margin-right: 4px;
  717. }
  718. > img.sanwei {
  719. width: 23px;
  720. height: 22px;
  721. margin-right: 4px;
  722. }
  723. > span {
  724. font-size: 14px;
  725. color: #FFF1BD;
  726. }
  727. }
  728. }
  729. /deep/[xui_min_map] {
  730. top: 28px;
  731. right: 20px;
  732. width: 237px;
  733. height: 149px;
  734. border: none;
  735. background: rgba(86,86,86,0.2);
  736. border-radius: 0;
  737. backdrop-filter: blur(10px);
  738. }
  739. .mini-map {
  740. position: absolute;
  741. z-index: 1;
  742. right: 12px;
  743. top: 10px;
  744. width: 254px;
  745. height: 18px;
  746. > img {
  747. position: absolute;
  748. left: 0;
  749. top: 0;
  750. width: 100%;
  751. height: 100%;
  752. }
  753. }
  754. .tour-guide-wrap {
  755. ::-webkit-scrollbar { width: 0; height: 5px; } /*宽度是对垂直滚动条而言,高度是对水平滚动条而言*/
  756. ::-webkit-scrollbar-track {
  757. background: #fff;
  758. }
  759. position: absolute;
  760. left: 0;
  761. bottom: 0;
  762. width: 100%;
  763. background: rgba(133, 119, 69, 0.50);
  764. backdrop-filter: blur(10px);
  765. .tour-guide {
  766. height: 100%;
  767. padding: 24px 0;
  768. width: fit-content !important;
  769. > li {
  770. margin-right: 10px;
  771. &:first-child {
  772. margin-left: 46px;
  773. }
  774. &:last-child {
  775. margin-right: 46px;
  776. }
  777. width: 187px;
  778. height: 135px;
  779. position: relative;
  780. > img {
  781. background: #D26868;
  782. width: 100%;
  783. height: 100%;
  784. object-fit: cover;
  785. }
  786. > .mask {
  787. position: absolute;
  788. left: 0;
  789. top: 0;
  790. width: 100%;
  791. height: 100%;
  792. background: rgba(0,0,0,0.5);
  793. }
  794. > .progress {
  795. position: absolute;
  796. left: 0;
  797. bottom: 0;
  798. height: 10px;
  799. background-color: #930909;
  800. }
  801. .title {
  802. position: absolute;
  803. left: 50%;
  804. top: 50%;
  805. transform: translate(-50%, -50%);
  806. font-size: 16px;
  807. color: #FFFFFF;
  808. white-space: pre;
  809. word-break: break-all;
  810. overflow: hidden;
  811. text-overflow: ellipsis;
  812. pointer-events: none;
  813. user-select: none;
  814. }
  815. &.active {
  816. > .mask {
  817. border: 4px solid #A10E0C;
  818. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
  819. }
  820. .title {
  821. top: initial;
  822. bottom: 12px;
  823. transform: translateX(-50%);
  824. }
  825. }
  826. }
  827. }
  828. }
  829. .hotspot-detail {
  830. position: absolute;
  831. top: 0;
  832. left: 0;
  833. width: 100%;
  834. height: 100%;
  835. }
  836. }
  837. .mobile {
  838. .skww-view {
  839. > menu.main-menu {
  840. width: 50%;
  841. justify-content: space-around;
  842. > button {
  843. margin-left: initial;
  844. &:hover {
  845. opacity: 0.7;
  846. }
  847. &:active {
  848. opacity: 1;
  849. }
  850. }
  851. }
  852. /deep/[xui_min_map] {
  853. top: 25px;
  854. right: 10px;
  855. width: 160px;
  856. height: 137px;
  857. backdrop-filter: initial;
  858. background: initial;
  859. }
  860. .mini-map {
  861. position: absolute;
  862. z-index: 9;
  863. right: 5px;
  864. top: 12px;
  865. width: 170px;
  866. height: calc(12px + 137px + 44px);
  867. background: transparent;
  868. > img {
  869. height: 12px;
  870. }
  871. > .selector {
  872. position: absolute;
  873. left: 50%;
  874. top: 12px;
  875. transform: translateX(-50%);
  876. width: 160px;
  877. height: calc(137px + 44px);
  878. background: rgba(86, 86, 86, 0.2);
  879. backdrop-filter: blur(10px);
  880. > .bottom-bar {
  881. position: absolute;
  882. left: 0;
  883. bottom: 12px;
  884. width: 100%;
  885. display: flex;
  886. justify-content: space-around;
  887. align-items: center;
  888. > button.plain {
  889. display: flex;
  890. align-items: center;
  891. > img {
  892. width: 19px;
  893. height: 19px;
  894. margin-right: 4px;
  895. }
  896. > span {
  897. font-size: 16px;
  898. color: #FFF0BD;
  899. }
  900. }
  901. > button.model {
  902. display: flex;
  903. align-items: center;
  904. > img {
  905. width: 23px;
  906. height: 22px;
  907. margin-right: 4px;
  908. }
  909. > span {
  910. font-size: 16px;
  911. color: #FFF0BD;
  912. }
  913. }
  914. }
  915. }
  916. }
  917. }
  918. }
  919. </style>