|
|
@@ -3,7 +3,7 @@
|
|
|
<div class="l-con" :class="showList?'active':''" v-if="!(showInfo.catalogRoot.length == 1 && scenes.length == 1 && showInfo.catalogs.length == 1)">
|
|
|
<div class="pic-con">
|
|
|
|
|
|
- <div ref="sw" v-swiper:mySwiper="swiperOptions" v-if="scenes.length>0">
|
|
|
+ <div class="clip-scroller" ref="sw" v-swiper:mySwiper="swiperOptions" v-if="scenes.length>0">
|
|
|
<ul class="pic-list swiper-wrapper">
|
|
|
<li class="swiper-slide" @click="handleVR(item,i)" v-for="(item,i) in scenes" :key="i">
|
|
|
<div :class="{active:selected.sceneCode==item.sceneCode}">
|
|
|
@@ -15,9 +15,9 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
- <div ref="sw1" v-swiper:mySwipera="swiperOptions" v-if="childTab.length > 1">
|
|
|
+ <div ref="sw1" class="clip-scroller" v-swiper:mySwipera="swiperOptions" v-if="childTab.length > 1">
|
|
|
|
|
|
- <ul class="tap swiper-wrapper" >
|
|
|
+ <ul class="tap pp-tap swiper-wrapper" >
|
|
|
<li class="swiper-slide" @click="handleTabtow(item,i)" v-for="(item,i) in childTab" :key="i">
|
|
|
<rollName :offset="30" :mgin="20" :active="item.id == tabtowActive.id" class="btn pic-rect" :class="{active:item.id == tabtowActive.id}" :myref="'ww'+item.id" :name="item.name"/>
|
|
|
</li>
|
|
|
@@ -33,36 +33,17 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="selected.type=='4dkk' && (isShowDL || (currentActive!='2d'&& currentActive!='3d' && mapvisit == 0))" class="menu">
|
|
|
- <div class="menucon" :class="{shouqi:shouqi}">
|
|
|
- <ul>
|
|
|
- <li @click="handleDL" v-if="isShowDL">
|
|
|
- <i class="iconfont" :class="isDaolan?'iconshow_suspension':'iconshow_playback'"></i>
|
|
|
- <span title="导览" >导览</span>
|
|
|
- </li>
|
|
|
- {{mapvisit}}
|
|
|
- <template v-if="currentActive!='2d'&& currentActive!='3d' && mapvisit == 0">
|
|
|
- <li v-for="(item,i) in menu" @click="handleMenu(item)" :key="i">
|
|
|
- <i class="iconfont" :class="currentActive==item.id?item.active:item.icon"></i>
|
|
|
- <span :title="item.name" >{{item.name}}</span>
|
|
|
- <!-- <i style="font-size:10px; margin-left:6px" v-if="item.id == 'daolan'" class="iconfont iconshow_drop-down"></i> -->
|
|
|
- </li>
|
|
|
- </template>
|
|
|
- </ul>
|
|
|
- <i @click="shouqi = !shouqi" class="iconfont iconshow_function_collect"></i>
|
|
|
|
|
|
- </div>
|
|
|
|
|
|
- <div class="scenedl">
|
|
|
- <i class="iconfont" @click="showList=!showList" :class="showList?'iconnav_scene_down':'iconnav_scene_up'"></i>
|
|
|
- </div>
|
|
|
+ <div v-if="selected.type=='4dkk' && isShowDL" class="menu">
|
|
|
+ <div @click="handleDL" v-if="isShowDL">
|
|
|
+ <i class="iconfont" :class="isDaolan?'iconshow_suspension':'iconshow_playback'"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <template v-else>
|
|
|
- <div class="btn dl" :class="{deepbg:showList}" v-if="!(showInfo.catalogRoot.length == 1 && scenes.length == 1 && showInfo.catalogs.length == 1)" @click="showList = !showList">
|
|
|
- <i class="iconfont " :class="showList?'iconnav_scene_down':'iconnav_scene_up'"></i>场景导航
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <div class="btn dl" :class="{deepbg:showList}" v-if="!(showInfo.catalogRoot.length == 1 && scenes.length == 1 && showInfo.catalogs.length == 1)" @click="showList = !showList">
|
|
|
+ <i class="iconfont " :class="showList?'iconnav_scene_down':'iconnav_scene_up'"></i>场景导航
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
@@ -270,9 +251,9 @@ export default {
|
|
|
selected:{
|
|
|
handler:function (newVal) {
|
|
|
this.handleVR(newVal)
|
|
|
- if (newVal.type == '4dkk') {
|
|
|
- this.showList = false
|
|
|
- }
|
|
|
+ // if (newVal.type == '4dkk') {
|
|
|
+ // this.showList = false
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -338,16 +319,21 @@ export default {
|
|
|
|
|
|
.list{
|
|
|
position: fixed;
|
|
|
- bottom: 10px;
|
|
|
+ bottom: 44px;
|
|
|
left: 0;
|
|
|
text-align: right;
|
|
|
width: 100%;
|
|
|
+
|
|
|
+ .clip-scroller{
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+
|
|
|
.dl{
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
border-radius: 18px;
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
- margin-top: 10px;
|
|
|
- margin-right: 10px;
|
|
|
+ margin-top: 18px;
|
|
|
+ margin-right: 15px;
|
|
|
padding: 0 10px;
|
|
|
height: 36px;
|
|
|
line-height: 36px;
|
|
|
@@ -368,68 +354,26 @@ export default {
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
.menu{
|
|
|
- margin: 10px 0 12px;
|
|
|
- .menucon{
|
|
|
- float: left;
|
|
|
- display: flex;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.10196078431372549);
|
|
|
- border-radius: 0px 24px 24px 0px;
|
|
|
- background: rgba(0, 0, 0, 0.3);
|
|
|
- padding-right: 30px;
|
|
|
- position: relative;
|
|
|
- transition: all 0.3s ease;
|
|
|
- >ul{
|
|
|
- display: flex;
|
|
|
- overflow: hidden;
|
|
|
- >li{
|
|
|
- color: #fff;
|
|
|
- margin: 0;
|
|
|
- height: 46px;
|
|
|
- line-height: 46px;
|
|
|
- padding: 0 5px;
|
|
|
- background: none;
|
|
|
- >span{
|
|
|
- display: inline-block;
|
|
|
- margin-left: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- >i{
|
|
|
- font-size: 10px;
|
|
|
+ position: fixed;
|
|
|
+ left: 15px;
|
|
|
+ bottom: 40px;
|
|
|
+ >div{
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ display: inline-block;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 18px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ >i{
|
|
|
position: absolute;
|
|
|
- right: 14px;
|
|
|
top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .shouqi{
|
|
|
- >ul{
|
|
|
- max-width: 0;
|
|
|
- width: 0;
|
|
|
}
|
|
|
- >i{
|
|
|
- transform: translateY(-50%) rotate(180deg);
|
|
|
- }
|
|
|
- }
|
|
|
- .scenedl{
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- background: rgba(0, 0, 0, 0.3);
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
- display: inline-block;
|
|
|
- border-radius: 50%;
|
|
|
- position: relative;
|
|
|
- margin-right: 10px;
|
|
|
- >i{
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- position: absolute;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.l-con{
|
|
|
width: 100%;
|
|
|
@@ -438,9 +382,6 @@ export default {
|
|
|
overflow: hidden;
|
|
|
.pic-con{
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 4px;
|
|
|
- padding: 0 10px;
|
|
|
-
|
|
|
}
|
|
|
ul{
|
|
|
align-items: center;
|
|
|
@@ -452,38 +393,44 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.tap{
|
|
|
- padding: 12px 0;
|
|
|
+ padding: 12px 0 0;
|
|
|
&::-webkit-scrollbar{
|
|
|
display: none;
|
|
|
}
|
|
|
> li {
|
|
|
+ font-size: 0;
|
|
|
position: relative;
|
|
|
width: 88px;
|
|
|
|
|
|
.btn{
|
|
|
+ font-size: 14px;
|
|
|
width: 100%;
|
|
|
padding: 0;
|
|
|
}
|
|
|
- &.active {
|
|
|
- @size:8px;
|
|
|
- &::before {
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-left: @size * 1.5 solid transparent;
|
|
|
- border-right: @size * 1.5 solid transparent;
|
|
|
- border-top: @size*2 solid rgba(0, 0, 0, 0.5);
|
|
|
- position: absolute;
|
|
|
- top: -18px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
+ // &.active {
|
|
|
+ // @size:8px;
|
|
|
+ // &::before {
|
|
|
+ // content: "";
|
|
|
+ // display: inline-block;
|
|
|
+ // width: 0;
|
|
|
+ // height: 0;
|
|
|
+ // border-left: @size * 1.5 solid transparent;
|
|
|
+ // border-right: @size * 1.5 solid transparent;
|
|
|
+ // border-top: @size*2 solid rgba(0, 0, 0, 0.5);
|
|
|
+ // position: absolute;
|
|
|
+ // top: -18px;
|
|
|
+ // left: 50%;
|
|
|
+ // transform: translateX(-50%);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .pp-tap{
|
|
|
+ padding: 8px 0 18px;
|
|
|
+ }
|
|
|
.pic-list{
|
|
|
- padding: 12px 0;
|
|
|
+ padding: 10px 0;
|
|
|
&::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|