|
|
|
@ -13,7 +13,7 @@ |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<!-- 起始结束楼层 --> |
|
|
|
<div class="floor-container"> |
|
|
|
<div class="floor-container" :class="{ 'art-model': route.query?.type }"> |
|
|
|
<div class="start-floor floor" :class="{ 'blue-mode': dirFloor.start.txt === '起点' }"> |
|
|
|
<span class="name" v-text="dirFloor.start.floor"></span> |
|
|
|
<p class="pos"> |
|
|
|
@ -78,12 +78,7 @@ |
|
|
|
|
|
|
|
<!-- logo --> |
|
|
|
<div class="logo-wrapper"> |
|
|
|
<img |
|
|
|
v-if="shop.logoUrl" |
|
|
|
class="shop-logo" |
|
|
|
:src="shop.logoUrl.search(config.sourceUrl) >= 0 ? shop.logoUrl : config.sourceUrl + shop.logoUrl" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<img v-if="shop.logoUrl" class="shop-logo" :src="shop.logoUrl" alt="" /> |
|
|
|
<img v-else class="shop-logo" src="@/assets/images/header/logo.svg" alt="" /> |
|
|
|
</div> |
|
|
|
<!-- 名称和属性 --> |
|
|
|
@ -201,12 +196,13 @@ function backModule() { |
|
|
|
//楼层显示内容 |
|
|
|
const dirFloor = computed(() => { |
|
|
|
const isT2B = device.value.floorOrder >= shop.value.floorOrder |
|
|
|
const model = route.query?.type |
|
|
|
return { |
|
|
|
start: { |
|
|
|
floor: isT2B ? device.value.floor : shop.value.floor, |
|
|
|
// icon: isT2B ? require('../../assets/images/nav/icon_start.svg') : require('../../assets/images/nav/icon_end.svg'), |
|
|
|
txt: isT2B ? i18n.global.t('go.start') : i18n.global.t('go.end'), |
|
|
|
rotate: isT2B ? 'rotate(180deg)' : 'rotate(0deg)' |
|
|
|
rotate: model ? (isT2B ? 'rotate(90deg)' : 'rotate(-90deg)') : isT2B ? 'rotate(180deg)' : 'rotate(0deg)' |
|
|
|
}, |
|
|
|
end: { |
|
|
|
floor: isT2B ? shop.value.floor : device.value.floor, |
|
|
|
@ -277,28 +273,32 @@ watch(shop, newVal => { |
|
|
|
} |
|
|
|
.floor-container { |
|
|
|
position: absolute; |
|
|
|
top: 312px; |
|
|
|
left: 80px; |
|
|
|
z-index: 1; |
|
|
|
top: 495px; |
|
|
|
right: 48px; |
|
|
|
z-index: 2; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: 56px; |
|
|
|
height: 196px; |
|
|
|
width: 260px; |
|
|
|
height: 348px; |
|
|
|
text-align: center; |
|
|
|
background: rgb(0 0 0 / 3%); |
|
|
|
border-radius: 8px; |
|
|
|
flex-direction: column; |
|
|
|
.floor { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 56px; |
|
|
|
height: 56px; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 4px; |
|
|
|
width: 228px; |
|
|
|
height: 96px; |
|
|
|
background: #b7a475; |
|
|
|
border-radius: 8px; |
|
|
|
.name { |
|
|
|
margin-right: 0; |
|
|
|
font-size: 28px; |
|
|
|
font-family: 'font_bold'; |
|
|
|
color: #9b8c85; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
@include no-wrap(); |
|
|
|
} |
|
|
|
// &.blue-mode { |
|
|
|
|
|
|
|
@ -306,9 +306,25 @@ watch(shop, newVal => { |
|
|
|
} |
|
|
|
.dir { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 18px; |
|
|
|
margin-top: 32px; |
|
|
|
margin-bottom: 32px; |
|
|
|
width: 56px; |
|
|
|
margin-top: 34px; |
|
|
|
margin-bottom: 34px; |
|
|
|
} |
|
|
|
|
|
|
|
&.art-model { |
|
|
|
top: 478px; |
|
|
|
right: 48px; |
|
|
|
width: 504px; |
|
|
|
height: 72px; |
|
|
|
background: transparent; |
|
|
|
flex-direction: row; |
|
|
|
.floor { |
|
|
|
width: 200px; |
|
|
|
height: 72px; |
|
|
|
} |
|
|
|
.dir { |
|
|
|
margin: 0 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.nav-art { |
|
|
|
|
deepblues
3 years ago
