|
|
@@ -1,86 +1,160 @@
|
|
|
<template>
|
|
|
- <div class="parimaryExhibtion" :class="{daolanactive:isShow}">
|
|
|
+ <div class="parimaryExhibtion" :class="{ daolanactive: isShow }">
|
|
|
<div class="p-title">
|
|
|
- <span>当前位置：{{current.name}}</span>
|
|
|
+ <span>当前位置：{{ current.name }}</span>
|
|
|
</div>
|
|
|
<div class="cad-con"></div>
|
|
|
<ul class="exhi-list">
|
|
|
- <li :class="{active:item.id == current.id}" @click="handleItem(item)" v-for="(item,i) in list" :key="i">
|
|
|
- {{item.name}}
|
|
|
+ <li :class="{ haveChild: item.id == 'jishechengjiu', showactive: shensuo }" @click="handleItem(item)" v-for="(item, i) in list" :key="i">
|
|
|
+ <span :class="{ active: item.name == current.name }">{{ item.name }}</span>
|
|
|
+ <ul v-if="item.id == 'jishechengjiu'">
|
|
|
+ <li :class="{ active: sub.name == current.name }" @click="handleItem(sub)" v-for="(sub, ii) in subList" :key="ii">
|
|
|
+ {{ sub.name }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div class="daolan" @click="isShow = !isShow ">
|
|
|
- <img :src="require('@/assets/images/icon/daolan.png')">
|
|
|
- <span>{{isShow?'收起':'展开'}}导览</span>
|
|
|
+ <div class="daolan" @click="isShow = !isShow">
|
|
|
+ <img :src="require('@/assets/images/icon/daolan.png')" />
|
|
|
+ <span>{{ isShow ? "收起" : "展开" }}导览</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- props:['showExhi'],
|
|
|
- data(){
|
|
|
- return{
|
|
|
- isShow:true,
|
|
|
- list:[
|
|
|
- {
|
|
|
- id:'xinjiangout',
|
|
|
- name:'胡杨卫士广场',
|
|
|
+ props: ["showExhi"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShow: true,
|
|
|
+ shensuo: false,
|
|
|
+ subList: [
|
|
|
+ {
|
|
|
+ id: "xinjiang02",
|
|
|
+ name: "艰苦创业铸忠诚展区",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "xinjiang03",
|
|
|
+ name: "奠定基础谋发展展区",
|
|
|
},
|
|
|
{
|
|
|
- id:'xinjiang01',
|
|
|
- name:'发展历程厅',
|
|
|
+ id: "xinjiang04",
|
|
|
+ name: "全面发展强根基展区",
|
|
|
},
|
|
|
{
|
|
|
- id:'xinjiang02',
|
|
|
- name:'艰苦创业厅',
|
|
|
+ id: "xinjiang05",
|
|
|
+ name: "奋进强军创一流展区",
|
|
|
},
|
|
|
+ ],
|
|
|
+ list: [
|
|
|
{
|
|
|
- id:'xinjiang03',
|
|
|
- name:'奠定基础厅',
|
|
|
+ id: "xinjiangout",
|
|
|
+ name: "胡杨卫士广场",
|
|
|
},
|
|
|
{
|
|
|
- id:'xinjiang04',
|
|
|
- name:'全面发展厅',
|
|
|
+ id: "xinjiang01",
|
|
|
+ active: "",
|
|
|
+ name: "序厅",
|
|
|
},
|
|
|
{
|
|
|
- id:'xinjiang05',
|
|
|
- name:'新时代新征程厅',
|
|
|
+ id: "xinjiang01",
|
|
|
+ pano: 24,
|
|
|
+ quat: {
|
|
|
+ w: 0.0790464668350327,
|
|
|
+ x: 0.003520409893528852,
|
|
|
+ y: 0.9958775678424138,
|
|
|
+ z: -0.04435235868632624,
|
|
|
+ },
|
|
|
+ name: "发展历程厅",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "jishechengjiu",
|
|
|
+ name: "建设成就厅",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "xinjiang05",
|
|
|
+ name: "强军劲旅厅",
|
|
|
+ pano: 98,
|
|
|
+ quat: {
|
|
|
+ w: 0.6813749981741799,
|
|
|
+ x: 0.00593363566311834,
|
|
|
+ y: 0.7318827124363794,
|
|
|
+ z: -0.0063734735088626015,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "xinjiang05",
|
|
|
+ name: "英模荣誉厅",
|
|
|
+ pano: 120,
|
|
|
+ quat: {
|
|
|
+ w: 0.7633693466573722,
|
|
|
+ x: -0.004737236104839399,
|
|
|
+ y: 0.6459324426637506,
|
|
|
+ z: 0.0040084588217659855,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "xinjiang05",
|
|
|
+ name: "辅助展陈厅",
|
|
|
+ pano: 186,
|
|
|
+ quat: {
|
|
|
+ w: 0.09926812639548109,
|
|
|
+ x: -0.0003896273924052499,
|
|
|
+ y: 0.9950529757251679,
|
|
|
+ z: 0.0039055830856510134,
|
|
|
+ },
|
|
|
},
|
|
|
-
|
|
|
],
|
|
|
- current:{
|
|
|
- id:'xinjiang01',
|
|
|
- name:'发展历程厅',
|
|
|
- }
|
|
|
- }
|
|
|
+ current: {
|
|
|
+ id: "xinjiangout",
|
|
|
+ name: "胡杨卫士广场",
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
- methods:{
|
|
|
- handleItem(item){
|
|
|
- this.current = item
|
|
|
- this.$bus.$emit('currentScene',item.id)
|
|
|
- }
|
|
|
+ methods: {
|
|
|
+ handleItem(item) {
|
|
|
+ if (item.id == "jishechengjiu") {
|
|
|
+ this.shensuo = !this.shensuo;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.current = item;
|
|
|
+ this.$bus.$emit("currentScene", item);
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.current = this.list.find(item=>item.id==window.number)
|
|
|
- })
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let list = this.list;
|
|
|
+ if (window.number != "xinjiang01"&&window.number != "xinjiangout") {
|
|
|
+ if (!window.firstViewPosi) {
|
|
|
+ list = this.subList;
|
|
|
+ this.shensuo = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ list = this.list;
|
|
|
+ }
|
|
|
+ this.current = list.find((item) => {
|
|
|
+ if (window.firstViewPosi) {
|
|
|
+ return player.currentPano.id == item.pano;
|
|
|
+ } else {
|
|
|
+ return item.id == window.number;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
- watch:{
|
|
|
- isShow(newVal){
|
|
|
- let css =newVal? '10px':'-310px'
|
|
|
- $('.cad').css({right:css})
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ watch: {
|
|
|
+ isShow(newVal) {
|
|
|
+ let css = newVal ? "10px" : "-310px";
|
|
|
+ $(".cad").css({ right: css });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-
|
|
|
-.daolanactive{
|
|
|
+.daolanactive {
|
|
|
transform: translateX(0);
|
|
|
- .daolan{
|
|
|
- >img{
|
|
|
+ .daolan {
|
|
|
+ > img {
|
|
|
width: 16px;
|
|
|
transform: rotate(0);
|
|
|
margin-bottom: 4px;
|
|
|
@@ -90,26 +164,26 @@ export default {
|
|
|
</style>
|
|
|
|
|
|
<style lang="less">
|
|
|
-.cad{
|
|
|
- .xinjiang02{
|
|
|
+.cad {
|
|
|
+ .xinjiang02 {
|
|
|
transform: translateX(-40px);
|
|
|
}
|
|
|
- .xinjiang03{
|
|
|
- >svg{
|
|
|
- >g{
|
|
|
+ .xinjiang03 {
|
|
|
+ > svg {
|
|
|
+ > g {
|
|
|
transform: scale(1) translate(50px, 198px);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .xinjiang04{
|
|
|
- >svg{
|
|
|
- >g{
|
|
|
+ .xinjiang04 {
|
|
|
+ > svg {
|
|
|
+ > g {
|
|
|
transform: scale(1.3) translate(-50px, 208px);
|
|
|
- path{
|
|
|
- stroke-width: 4
|
|
|
+ path {
|
|
|
+ stroke-width: 4;
|
|
|
}
|
|
|
- circle{
|
|
|
+ circle {
|
|
|
r: 6;
|
|
|
stroke-width: 1.69182;
|
|
|
}
|
|
|
@@ -117,26 +191,24 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .xinjiang05{
|
|
|
- >svg{
|
|
|
- >g{
|
|
|
+ .xinjiang05 {
|
|
|
+ > svg {
|
|
|
+ > g {
|
|
|
transform: scale(3) translate(-90px, 260px);
|
|
|
- path{
|
|
|
- stroke-width: 2
|
|
|
+ path {
|
|
|
+ stroke-width: 2;
|
|
|
}
|
|
|
- .sign{
|
|
|
- >path{
|
|
|
+ .sign {
|
|
|
+ > path {
|
|
|
// d:path("M 201.7 -168.93 L 215.111 -175.821 L 219.111 -158.779 L 201.7 -160.67 Z");
|
|
|
}
|
|
|
- circle{
|
|
|
- r: 4;
|
|
|
- stroke-width: 1.69182;
|
|
|
+ circle {
|
|
|
+ r: 4;
|
|
|
+ stroke-width: 1.69182;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-</style>
|
|
|
+</style>
|
tremble
