|
|
@@ -4,10 +4,10 @@
|
|
|
<div id="view-controllers"></div>
|
|
|
</div>
|
|
|
<div class="pinBottom left">
|
|
|
- <div v-if="isMobile" id="myClickBox" style="">
|
|
|
+ <!-- <div v-if="isMobile" id="myClickBox" style="">
|
|
|
<div id="go" />
|
|
|
<div id="back" />
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<div>
|
|
|
<div class="viewContainer">
|
|
|
@@ -23,7 +23,7 @@
|
|
|
:src="require('@/assets/images/play.png')"
|
|
|
width="24"
|
|
|
height="24"
|
|
|
- data-original-title="播放"
|
|
|
+ :data-original-title="$t('operation.bf')"
|
|
|
/>
|
|
|
</a>
|
|
|
</div>
|
|
|
@@ -31,10 +31,10 @@
|
|
|
id="play"
|
|
|
class="ui-icon"
|
|
|
rel="tooltip"
|
|
|
- data-original-title="播放"
|
|
|
+ :data-original-title="$t('operation.bf')"
|
|
|
>
|
|
|
<!-- 鼠标移入的显示 -->
|
|
|
- <div class="hoverTit">自动导览</div>
|
|
|
+ <div class="hoverTit">{{$t('operation.zddl')}}</div>
|
|
|
<a>
|
|
|
<img
|
|
|
:src="require('@/assets/images/icon/play.png')"
|
|
|
@@ -45,7 +45,7 @@
|
|
|
</div>
|
|
|
<div id="pause" class="ui-icon" style="display: none">
|
|
|
<!-- 鼠标移入的显示 -->
|
|
|
- <div class="hoverTit">自动导览</div>
|
|
|
+ <div class="hoverTit">{{$t('operation.zddl')}}</div>
|
|
|
|
|
|
<a>
|
|
|
<img
|
|
|
@@ -54,7 +54,7 @@
|
|
|
:src="require('@/assets/images/icon/pause.png')"
|
|
|
width="24"
|
|
|
height="24"
|
|
|
- data-original-title="暂停"
|
|
|
+ :data-original-title="$t('operation.zt')"
|
|
|
/>
|
|
|
</a>
|
|
|
</div>
|
|
|
@@ -68,20 +68,20 @@
|
|
|
rel="tooltip"
|
|
|
title=""
|
|
|
class="icon icon-dpad-right"
|
|
|
- data-original-title="下一个"
|
|
|
+ :data-original-title="$t('operation.xyg')"
|
|
|
></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div id="gui-modes-map" class="ui-icon double active">
|
|
|
<div
|
|
|
- data-original-title="导览"
|
|
|
+ :data-original-title="$t('operation.dl')"
|
|
|
@click="isGuide = !isGuide"
|
|
|
id="pullTab"
|
|
|
rel="tooltip"
|
|
|
- title="场景导览"
|
|
|
+ :title="$t('operation.cjdl')"
|
|
|
>
|
|
|
<!-- 鼠标移入的显示 -->
|
|
|
- <div class="hoverTit">导览列表</div>
|
|
|
+ <div class="hoverTit">{{$t('operation.dllist')}}</div>
|
|
|
|
|
|
<img
|
|
|
title=""
|
|
|
@@ -95,12 +95,12 @@
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
- data-original-title="全景漫游"
|
|
|
+ :data-original-title="$t('operation.mnmx')"
|
|
|
id="gui-modes-inside"
|
|
|
rel="tooltip"
|
|
|
>
|
|
|
<!-- 鼠标移入的显示 -->
|
|
|
- <div class="hoverTit">全景漫游</div>
|
|
|
+ <div class="hoverTit">{{$t('operation.qjmy')}}</div>
|
|
|
|
|
|
<img
|
|
|
class="icon icon-inside"
|
|
|
@@ -112,13 +112,13 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
- title="迷你漫游"
|
|
|
- data-original-title="迷你模型"
|
|
|
+ :title="$t('operation.mnmy')"
|
|
|
+ :data-original-title="$t('operation.mnmx')"
|
|
|
id="gui-modes-dollhouse"
|
|
|
rel="tooltip"
|
|
|
>
|
|
|
<!-- 鼠标移入的显示 -->
|
|
|
- <div class="hoverTit">三维视觉</div>
|
|
|
+ <div class="hoverTit">{{$t('operation.swsj')}}</div>
|
|
|
<img
|
|
|
class="icon icon-inside"
|
|
|
:src="require('@/assets/images/icon/dollhouse.png')"
|
|
|
@@ -129,13 +129,13 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
- data-original-title="俯视图"
|
|
|
+ :data-original-title="$t('operation.fst')"
|
|
|
id="gui-modes-floorplan"
|
|
|
rel="tooltip"
|
|
|
- title="顶部俯视"
|
|
|
+ :title="$t('operation.fst')"
|
|
|
>
|
|
|
<!-- 鼠标移入的显示 -->
|
|
|
- <div class="hoverTit">平面视觉</div>
|
|
|
+ <div class="hoverTit">{{$t('operation.pmt')}}</div>
|
|
|
<img
|
|
|
class="icon icon-inside"
|
|
|
:src="require('@/assets/images/icon/floor.png')"
|
|
|
@@ -149,7 +149,7 @@
|
|
|
<!-- 热点列表 -->
|
|
|
<div v-show="!hideTools" id="myHotList" @click="openInd = 1">
|
|
|
<!-- 鼠标移入的显示 -->
|
|
|
- <div class="hoverTit">热点列表</div>
|
|
|
+ <div class="hoverTit">{{$t('operation.rdlist')}}</div>
|
|
|
<img src="../../assets/images/icon/hot.png" alt="" />
|
|
|
</div>
|
|
|
|
|
|
@@ -166,10 +166,10 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
- data-original-title="消除外壳"
|
|
|
+ :data-original-title="$t('operation.xcwk')"
|
|
|
id="gui-remove-face"
|
|
|
rel="tooltip"
|
|
|
- title=""
|
|
|
+ :title="$t('operation.xcwk')"
|
|
|
style="display: none; float: left"
|
|
|
>
|
|
|
<img
|
|
|
@@ -184,13 +184,13 @@
|
|
|
|
|
|
<div v-show="!hideTools" class="pinBottom right hideTarget">
|
|
|
<div class="rightViewContainer clearfix">
|
|
|
- <div class="gui-floor">
|
|
|
+ <!-- <div class="gui-floor">
|
|
|
<div class="gui-floor-title"></div>
|
|
|
<div class="gui-floor-icon">
|
|
|
<span class="gui-floor-number"></span>
|
|
|
</div>
|
|
|
<div class="container"></div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<div id="vr" class="ui-icon wide hidden" style="display: none">
|
|
|
<a>
|
|
|
@@ -244,7 +244,7 @@
|
|
|
<!-- 音乐 -->
|
|
|
<div id="volume" class="ui-icon bgandshare wide">
|
|
|
<!-- 鼠标移入的显示 -->
|
|
|
- <div class="hoverTit">{{ musicState ? "关闭" : "打开" }}音乐</div>
|
|
|
+ <div class="hoverTit">{{ musicState?$t("operation.gbyy"):$t("operation.dkyy") }}</div>
|
|
|
<div>
|
|
|
<img
|
|
|
id="openMusic"
|
|
|
@@ -268,28 +268,40 @@
|
|
|
<div class="hoverTit">分享</div>
|
|
|
<img src="../../assets/img/share.png" alt="" />
|
|
|
</div> -->
|
|
|
- <div class="toHomeBox" @click="read = true">
|
|
|
- <div class="yueduliang" v-if="read">
|
|
|
- <div v-for="item in readList" :key="item" :class="{active: item==activeRead}" @click="readClick(item)">{{ item }}</div>
|
|
|
- <div class="read">{{ readVlaue }}</div>
|
|
|
- <img @click.stop="read = false" src="../../assets/images/icon/close.png" alt="">
|
|
|
- <span class="triangle-down"></span>
|
|
|
+ <div class="toHomeBox" :class="{toHomeBoxMc: isMyMobile}" @click="read = true; languageShow = false">
|
|
|
+ <div v-if="!isMyMobile">
|
|
|
+ <div class="yueduliang" v-show="read">
|
|
|
+ <div v-for="item in readList" :key="item" :class="{active: item==activeRead}" @click="readClick(item)">{{ item }}</div>
|
|
|
+ <div class="read">{{ readVlaue }}</div>
|
|
|
+ <img @click.stop="read = false" src="../../assets/images/icon/close.png" alt="">
|
|
|
+ <span class="triangle-down"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="yueduliangMC" v-show="read">
|
|
|
+ <div class="typelist">
|
|
|
+ <div v-for="item in readList" :key="item" :class="{active: item==activeRead}" @click="readClick(item)">{{ item }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="read">{{ readVlaue }}</div>
|
|
|
+ <img @click.stop="read = false" src="../../assets/images/icon/close.png" alt="">
|
|
|
+ <span class="triangle-down"></span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="hoverTit">阅读量</div>
|
|
|
+ <div class="hoverTit">{{ $t("operation.ydl") }}</div>
|
|
|
<img src="../../assets/images/icon/red.png" alt="" />
|
|
|
</div>
|
|
|
|
|
|
- <div class="toHomeBox">
|
|
|
- <div class="hoverTit">全屏</div>
|
|
|
+ <div class="toHomeBox" @click="handleFullscreen">
|
|
|
+ <div class="hoverTit">{{ $t("operation.qp") }}</div>
|
|
|
<img src="../../assets/images/icon/quanping.png" alt="" />
|
|
|
</div>
|
|
|
|
|
|
<div class="toHomeBox">
|
|
|
- <div class="ppList">
|
|
|
- <div v-for="item in languageList" :key="item" :style="{color: item==language?'#0F7562':'#00221C'}">{{item}}</div>
|
|
|
+ <div class="ppList" v-show="languageShow">
|
|
|
+ <div v-for="item in languageList" :key="item.key" @click="hanldlanguage(item)" :style="{color: item.key==language?'#0F7562':'#00221C'}">{{item.name}}</div>
|
|
|
</div>
|
|
|
- <div class="hoverTit">语言</div>
|
|
|
- <img src="../../assets/images/icon/yuyan.png" alt="" />
|
|
|
+ <div class="hoverTit">{{ $t("operation.yy") }}</div>
|
|
|
+ <img @click="languageShow = !languageShow; read = false" src="../../assets/images/icon/yuyan.png" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -310,25 +322,99 @@ export default {
|
|
|
components: { HotList, Share },
|
|
|
props: {
|
|
|
hideTools: Boolean,
|
|
|
+ loadingstate: Boolean,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ m: this.$route.query.m,
|
|
|
+ id: this.$route.query.id,
|
|
|
isGuide: true,
|
|
|
+ fullscreen: false,
|
|
|
musicState: false,
|
|
|
+ isMyMobile: false,
|
|
|
+ loading: true,
|
|
|
+
|
|
|
// vr---热点列表---分享
|
|
|
openInd: 0,
|
|
|
read: false,
|
|
|
+ languageShow: false,
|
|
|
readVlaue: 19990,
|
|
|
activeRead: '全部',
|
|
|
- language: '简体中文',
|
|
|
- languageList: ['简体中文', '繁体中文', 'English', 'Português'],
|
|
|
- readList: ['全部', '本年', '本月', '本日'],
|
|
|
+ language: localStorage.getItem("locale") || 'zh-cn',
|
|
|
+ languageList: [{
|
|
|
+ name: '简体中文',
|
|
|
+ key: 'zh-cn',
|
|
|
+ },{
|
|
|
+ name: '繁体中文',
|
|
|
+ key: 'zh-hk',
|
|
|
+ },{
|
|
|
+ name: 'English',
|
|
|
+ key: 'en',
|
|
|
+ },{
|
|
|
+ name: 'Português',
|
|
|
+ key: 'pe',
|
|
|
+ }],
|
|
|
+ readList: [this.$t("operation.readList0"), this.$t("operation.readList1"), this.$t("operation.readList2"), this.$t("operation.readList3")],
|
|
|
};
|
|
|
},
|
|
|
watch: {},
|
|
|
- computed: {},
|
|
|
- mounted() {},
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.addEventListener('resize', this.checkIfMobile);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ window.addEventListener("loadfinish", () => {
|
|
|
+ this.loading = false;
|
|
|
+ // document.title = "珠海高新区中共党史学习教育园地线上展厅";
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log('$route.query',this.$route.query);
|
|
|
+ this.$http({
|
|
|
+ method: "post",
|
|
|
+ data: {
|
|
|
+ "num": this.m,
|
|
|
+ "type": "visit"
|
|
|
+ },
|
|
|
+ url: `https://sit-visitcommon.4dage.com/api/visit/trend/saveType`
|
|
|
+ }).then(res => {
|
|
|
+ this.getReadData();
|
|
|
+ });
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ handleFullscreen() {
|
|
|
+ if (!this.fullscreen) {
|
|
|
+ this.fullscreenFn()
|
|
|
+ }else{
|
|
|
+ this.exitFullscreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fullscreenFn () {
|
|
|
+ let element = document.body
|
|
|
+ this.fullscreen = true;
|
|
|
+ // 全屏
|
|
|
+ if (element.requestFullscreen)
|
|
|
+ element.requestFullscreen()
|
|
|
+ else if (element.mozRequestFullScreen)
|
|
|
+ element.mozRequestFullScreen()
|
|
|
+ else if (element.webkitRequestFullscreen)
|
|
|
+ element.webkitRequestFullscreen()
|
|
|
+ else if (element.msRequestFullscreen)
|
|
|
+ element.msRequestFullscreen()
|
|
|
+ },
|
|
|
+ exitFullscreen() {
|
|
|
+ // 退出全屏
|
|
|
+ if (document.exitFullscreen)
|
|
|
+ document.exitFullscreen()
|
|
|
+ else if (document.mozCancelFullScreen)
|
|
|
+ document.mozCancelFullScreen()
|
|
|
+ else if (document.webkitExitFullscreen)
|
|
|
+ document.webkitExitFullscreen()
|
|
|
+ this.fullscreen = false
|
|
|
+ },
|
|
|
+ checkIfMobile() {
|
|
|
+ const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
|
|
+ this.isMyMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
|
|
|
+ },
|
|
|
switchBGM(flag) {
|
|
|
this.musicState = flag;
|
|
|
if (flag) {
|
|
|
@@ -353,10 +439,38 @@ export default {
|
|
|
this.switchBGM(false);
|
|
|
this.$emit("toHome");
|
|
|
},
|
|
|
+ hanldlanguage(item) {
|
|
|
+ this.$i18n.locale = item.key
|
|
|
+ this.language = item.key;
|
|
|
+ localStorage.setItem("locale", item.key);
|
|
|
+ },
|
|
|
readClick(item) {
|
|
|
+ console.log('item', item);
|
|
|
this.activeRead = item;
|
|
|
- }
|
|
|
+ this.getReadData();
|
|
|
+ },
|
|
|
+ async getReadData() {
|
|
|
+ let obj = {
|
|
|
+ [this.$t("operation.readList0")]: '',
|
|
|
+ [this.$t("operation.readList1")]: 'year',
|
|
|
+ [this.$t("operation.readList2")]: 'month',
|
|
|
+ [this.$t("operation.readList3")]: 'day',
|
|
|
+ };
|
|
|
+ let res = await this.$http({
|
|
|
+ method: "get",
|
|
|
+ params: {
|
|
|
+ "num": this.m,
|
|
|
+ "type": obj[this.activeRead]
|
|
|
+ },
|
|
|
+ url: `https://sit-visitcommon.4dage.com//api/visit/trend/period/${this.m}`
|
|
|
+ });;
|
|
|
+ console.log('getReadData', res);
|
|
|
+ this.readVlaue = res.data && res.data.data && res.data.data.pcsVisit || 0;
|
|
|
+ }
|
|
|
},
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener('resize', this.checkIfMobile);
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -495,13 +609,61 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+.toHomeBoxMc{
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
.toHomeBox {
|
|
|
margin-right: 20px;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
width: 58px;
|
|
|
height: 58px;
|
|
|
+ .yueduliangMC{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: -50px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ height: auto;
|
|
|
+ color: #0F7562;
|
|
|
+ padding: 10px;
|
|
|
+ top: -5px;
|
|
|
+ left: -120px;
|
|
|
+ .typelist{
|
|
|
+ width: 55px;
|
|
|
+ padding-right: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-right: 1px solid #D2C9C1;
|
|
|
+ }
|
|
|
+ .typelist{
|
|
|
+ .active{
|
|
|
+ background: #0F7562;
|
|
|
+ border-radius: 25px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ div{
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Serif CN;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #00221C;
|
|
|
+ opacity: 0.85;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #D2C9C1;
|
|
|
+ &:last-child{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 20px;
|
|
|
+ right: 3px;
|
|
|
+ top: -7px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
.yueduliang{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -556,7 +718,7 @@ export default {
|
|
|
background: #fff;
|
|
|
opacity: 0.85;
|
|
|
border-radius: 8px;
|
|
|
- display: none;
|
|
|
+ // display: none;
|
|
|
div{
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
@@ -577,7 +739,7 @@ export default {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
.ppList{
|
|
|
- display: block;
|
|
|
+ // display: block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -636,11 +798,14 @@ export default {
|
|
|
.hoverTit {
|
|
|
opacity: 0 !important;
|
|
|
}
|
|
|
+ .yueduliang{
|
|
|
+ left: -196px
|
|
|
+ }
|
|
|
.viewContainer {
|
|
|
& > div {
|
|
|
img {
|
|
|
- width: 33px !important;
|
|
|
- height: 33px !important;
|
|
|
+ // width: 33px !important;
|
|
|
+ // height: 33px !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -648,8 +813,8 @@ export default {
|
|
|
width: 50px;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
-
|
|
|
.pinBottom-container {
|
|
|
+ background: none;
|
|
|
.pinBottom.right.hideTarget {
|
|
|
position: fixed;
|
|
|
top: 200px;
|
|
|
@@ -658,17 +823,20 @@ export default {
|
|
|
flex-direction: column;
|
|
|
& > div,
|
|
|
#volume {
|
|
|
- width: 50px !important;
|
|
|
+ // width: 50px !important;
|
|
|
text-align: right;
|
|
|
margin-right: 0;
|
|
|
margin-bottom: 10px;
|
|
|
- & > div {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
+ & > .ppList {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: flex-end;
|
|
|
+ left: -105px;
|
|
|
+ top: -50px
|
|
|
+
|
|
|
}
|
|
|
img {
|
|
|
- width: 33px;
|
|
|
- height: 33px;
|
|
|
+ // width: 33px;
|
|
|
+ // height: 33px;
|
|
|
}
|
|
|
}
|
|
|
}
|
