|
|
@ -1,118 +1,59 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="pass-shop-wrapper animate__animated animate__fadeInDown animate__faster"> |
|
|
<div class="pass-shop-wrapper animate__animated animate__fadeInDown animate__faster"> |
|
|
<div class="left"> |
|
|
<div class="left"> |
|
|
<div class="logo-wrapper"> |
|
|
|
|
|
<img :src="shop.isFacility ? shop.logoUrl : config.sourceUrl + shop.logoUrl" alt="" class="logo" /> |
|
|
|
|
|
|
|
|
<div class="dir"> |
|
|
|
|
|
<img :class="direction.class" class="animate__infinite animate__animated" :src="direction.icon" alt="" /> |
|
|
|
|
|
<p class="content"> |
|
|
|
|
|
<i>{{ direction.text }}</i> |
|
|
|
|
|
请您面向屏幕 |
|
|
|
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<template v-if="currentFloor.floorOrder < shop.floorOrder"> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right"> |
|
|
|
|
|
<div class="top"> |
|
|
|
|
|
<template v-if="currentFloor.floorOrder > shop.floorOrder"> |
|
|
<div class="floor-box"> |
|
|
<div class="floor-box"> |
|
|
|
|
|
<div class="meta">终点</div> |
|
|
<h1 class="floor">{{ shop.floor }}</h1> |
|
|
<h1 class="floor">{{ shop.floor }}</h1> |
|
|
<div class="icon-wrapper"> |
|
|
|
|
|
<img src="../../../assets/images/nav/pos.svg" class="icon" alt="" /> |
|
|
|
|
|
<span class="text">{{ $t('zhongdian') }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="thumb-arrow"> |
|
|
<div class="thumb-arrow"> |
|
|
<img src="../../../assets/images/nav/floor_up.svg" class="thumb-icon animate__animated animate__fadeInUp animate__infinite" alt="" /> |
|
|
|
|
|
|
|
|
<img src="../../../assets/images/nav/floor_up.svg" class="thumb-icon animate__animated animate__fadeInRight animate__infinite" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
<div class="floor-box"> |
|
|
|
|
|
|
|
|
<div class="floor-box start"> |
|
|
|
|
|
<div class="meta">起点</div> |
|
|
<h1 class="floor">{{ currentFloor.floor }}</h1> |
|
|
<h1 class="floor">{{ currentFloor.floor }}</h1> |
|
|
<div class="icon-wrapper"> |
|
|
|
|
|
<img src="../../../assets/images/nav/start.svg" class="icon" alt="" /> |
|
|
|
|
|
<span class="text">{{ $t('qidian') }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<template v-else> |
|
|
<template v-else> |
|
|
<div class="floor-box"> |
|
|
|
|
|
|
|
|
<div class="floor-box start"> |
|
|
|
|
|
<div class="meta">起点</div> |
|
|
<h1 class="floor">{{ currentFloor.floor }}</h1> |
|
|
<h1 class="floor">{{ currentFloor.floor }}</h1> |
|
|
<div class="icon-wrapper"> |
|
|
|
|
|
<img src="../../../assets/images/nav/start.svg" class="icon" alt="" /> |
|
|
|
|
|
<span class="text">{{ $t('qidian') }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="thumb-arrow"> |
|
|
<div class="thumb-arrow"> |
|
|
<img src="../../../assets/images/nav/floor_down.svg" class="thumb-icon animate__animated animate__fadeInDown animate__infinite" alt="" /> |
|
|
|
|
|
|
|
|
<img src="../../../assets/images/nav/floor_down.svg" class="thumb-icon animate__animated animate__fadeInLeft animate__infinite" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
<div class="floor-box"> |
|
|
<div class="floor-box"> |
|
|
|
|
|
<div class="meta">终点</div> |
|
|
<h1 class="floor">{{ shop.floor }}</h1> |
|
|
<h1 class="floor">{{ shop.floor }}</h1> |
|
|
<div class="icon-wrapper"> |
|
|
|
|
|
<img src="../../../assets/images/nav/pos.svg" class="icon" alt="" /> |
|
|
|
|
|
<span class="text">{{ $t('zhongdian') }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<div class="group pt" v-if="shop.industryUrl?.length"> |
|
|
|
|
|
<div class="icon-box"> |
|
|
|
|
|
<img :src="config.sourceUrl + shop.industryUrl" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="group-right"> |
|
|
|
|
|
<span class="tip-name">业态</span> |
|
|
|
|
|
<span class="name">{{ switchLanguage(shop, 'industryFatherName') }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="group" v-if="shop.houseNumber?.length"> |
|
|
|
|
|
<div class="icon-box"> |
|
|
|
|
|
<img src="../../../assets/images/nav/detail-add.svg" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="group-right"> |
|
|
|
|
|
<span class="tip-name">地址</span> |
|
|
|
|
|
<span class="name">{{ shop.houseNumber }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="group" v-if="shop.contact?.length"> |
|
|
|
|
|
<div class="icon-box"> |
|
|
|
|
|
<img src="../../../assets/images/nav/phone.svg" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="group-right"> |
|
|
|
|
|
<span class="tip-name">电话</span> |
|
|
|
|
|
<span class="name">{{ shop.contact }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="group" v-if="shop.businessHours?.length"> |
|
|
|
|
|
<div class="icon-box"> |
|
|
|
|
|
<img src="../../../assets/images/nav/time.svg" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="group-right"> |
|
|
|
|
|
<span class="tip-name">营业时间</span> |
|
|
|
|
|
<span class="name">{{ shop.businessHours }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right"> |
|
|
|
|
|
<div class="top">{{ switchLanguage(shop, 'shopName') }}</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex"> |
|
|
<ScrollView scrollbar :list="list" class="middle-scroll"> |
|
|
<ScrollView scrollbar :list="list" class="middle-scroll"> |
|
|
<div class="pass-content"> |
|
|
<div class="pass-content"> |
|
|
<div class="pass-item"> |
|
|
<div class="pass-item"> |
|
|
<div class="shop-logo"> |
|
|
|
|
|
<img :src="direction.passIcon" class="logo-icon" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<p class="pass">您在{{ currentFloor.floor }}，{{ direction.text }}</p> |
|
|
<p class="pass">您在{{ currentFloor.floor }}，{{ direction.text }}</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pass-item" v-for="item of list" :key="item.shopId"> |
|
|
<div class="pass-item" v-for="item of list" :key="item.shopId"> |
|
|
<div class="shop-logo"> |
|
|
|
|
|
<img :src="item.isFacility ? item.logoUrl : config.sourceUrl + item.logoUrl" class="logo-icon" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<p class="pass">{{ switchLanguage(item, 'shopName') }}</p> |
|
|
<p class="pass">{{ switchLanguage(item, 'shopName') }}</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pass-item active"> |
|
|
<div class="pass-item active"> |
|
|
<div class="shop-logo"> |
|
|
|
|
|
<img :src="shop.isFacility ? shop.logoUrl : config.sourceUrl + shop.logoUrl" class="logo-icon" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<p class="pass">{{ switchLanguage(shop, 'shopName') }}</p> |
|
|
<p class="pass">{{ switchLanguage(shop, 'shopName') }}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</ScrollView> |
|
|
</ScrollView> |
|
|
<div class="bottom"> |
|
|
|
|
|
<img :class="direction.class" class="animate__infinite animate__animated" :src="direction.icon" alt="" /> |
|
|
|
|
|
<p class="content"> |
|
|
|
|
|
请您面向屏幕<i>{{ direction.text }}</i> |
|
|
|
|
|
</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -150,38 +91,42 @@ defineProps({ |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: stretch; |
|
|
align-items: stretch; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
width: 1000px; |
|
|
|
|
|
height: 740px; |
|
|
|
|
|
left: 40px; |
|
|
|
|
|
top: 1140px; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.03); |
|
|
|
|
|
border-radius: 12px; |
|
|
|
|
|
|
|
|
width: 100vw; |
|
|
|
|
|
height: 688px; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
|
.left { |
|
|
.left { |
|
|
width: 225px; |
|
|
|
|
|
padding-left: 32px; |
|
|
|
|
|
.pt { |
|
|
|
|
|
padding-top: 89px; |
|
|
|
|
|
} |
|
|
|
|
|
.logo-wrapper { |
|
|
|
|
|
margin-top: 32px; |
|
|
|
|
|
width: 160px; |
|
|
|
|
|
height: 160px; |
|
|
|
|
|
margin-bottom: 56px; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05); |
|
|
|
|
|
border-radius: 16px; |
|
|
|
|
|
padding: 20px; |
|
|
|
|
|
.logo { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
object-fit: contain; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.floor-box { |
|
|
|
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
width: 360px; |
|
|
|
|
|
background: rgba(255, 255, 255, 0.4); |
|
|
|
|
|
.dir { |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
height: 320px; |
|
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05); |
|
|
|
|
|
.content { |
|
|
|
|
|
padding-top: 25px; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
line-height: 24px; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
i { |
|
|
|
|
|
display: block; |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-size: 34px; |
|
|
|
|
|
line-height: 50px; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
|
|
margin-bottom: 6px; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.floor { |
|
|
.floor { |
|
|
font-weight: 700; |
|
|
font-weight: 700; |
|
|
font-family: 'font_bold'; |
|
|
font-family: 'font_bold'; |
|
|
@ -257,109 +202,118 @@ defineProps({ |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
align-items: stretch; |
|
|
align-items: stretch; |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
background: rgba(0, 0, 0, 0.02); |
|
|
|
|
|
|
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
.flex { |
|
|
.flex { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
align-items: stretch; |
|
|
align-items: stretch; |
|
|
} |
|
|
} |
|
|
.top { |
|
|
.top { |
|
|
height: 140px; |
|
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
height: 152px; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05); |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05); |
|
|
padding-left: 32px; |
|
|
|
|
|
|
|
|
padding: 0 68px; |
|
|
|
|
|
flex: 0 0 152px; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
.floor-box { |
|
|
|
|
|
width: 231px; |
|
|
|
|
|
height: 96px; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
padding-top: 17px; |
|
|
|
|
|
padding-left: 26px; |
|
|
|
|
|
border: 2px solid rgba(0, 0, 0, 0.1); |
|
|
font-weight: 700; |
|
|
font-weight: 700; |
|
|
font-size: 32px; |
|
|
font-size: 32px; |
|
|
text-align: justify; |
|
|
|
|
|
padding-top: 57px; |
|
|
|
|
|
|
|
|
line-height: 38px; |
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
|
|
.meta { |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
line-height: 18px; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
|
|
margin-bottom: 6px; |
|
|
|
|
|
} |
|
|
|
|
|
&.start { |
|
|
|
|
|
border: 2px solid rgba(67, 90, 205, 1); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
.middle-scroll { |
|
|
.middle-scroll { |
|
|
position: relative; |
|
|
position: relative; |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
height: 640px; |
|
|
|
|
|
|
|
|
height: 415px; |
|
|
|
|
|
padding-top: 21px; |
|
|
:deep(.bscroll-vertical-scrollbar) { |
|
|
:deep(.bscroll-vertical-scrollbar) { |
|
|
right: 50px !important; |
|
|
|
|
|
top: 16px !important; |
|
|
|
|
|
width: 6px !important; |
|
|
|
|
|
background: rgba(0, 0, 0, 0.02) !important; |
|
|
|
|
|
border-radius: 6px !important; |
|
|
|
|
|
|
|
|
top: 102px !important; |
|
|
|
|
|
width: 48px !important; |
|
|
|
|
|
background: center / 6px 250px no-repeat url(@/assets/images/scrollBar.png); |
|
|
|
|
|
border-radius: 6px; |
|
|
opacity: 1 !important; |
|
|
opacity: 1 !important; |
|
|
height: 200px !important; |
|
|
|
|
|
|
|
|
height: 250px !important; |
|
|
|
|
|
&::after { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
content: ''; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
|
|
|
|
|
|
top: 120px; |
|
|
|
|
|
margin: auto; |
|
|
|
|
|
width: 48px; |
|
|
|
|
|
height: 61px; |
|
|
|
|
|
background: center / cover no-repeat url(@/assets/images/scrollHand.png); |
|
|
|
|
|
} |
|
|
.bscroll-indicator { |
|
|
.bscroll-indicator { |
|
|
height: 95px !important; |
|
|
height: 95px !important; |
|
|
width: 6px !important; |
|
|
width: 6px !important; |
|
|
background: rgba(0, 0, 0, 0.1) !important; |
|
|
|
|
|
|
|
|
left: 0; |
|
|
|
|
|
right: 0; |
|
|
|
|
|
margin: auto; |
|
|
|
|
|
background: #ffffff !important; |
|
|
border-radius: 6px !important; |
|
|
border-radius: 6px !important; |
|
|
border: none !important; |
|
|
border: none !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.pass-content { |
|
|
.pass-content { |
|
|
padding-top: 16px; |
|
|
|
|
|
padding-left: 24px; |
|
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
padding-left: 68px; |
|
|
|
|
|
&::before { |
|
|
|
|
|
content: ''; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 34px; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
border-left: 1px dashed rgba(0, 0, 0, 0.1); |
|
|
|
|
|
transform: translateY(-25px); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
.pass-item { |
|
|
.pass-item { |
|
|
position: relative; |
|
|
position: relative; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
height: 44px; |
|
|
|
|
|
|
|
|
height: 50px; |
|
|
width: max-content; |
|
|
width: max-content; |
|
|
border-radius: 8px; |
|
|
|
|
|
padding: 0 20px; |
|
|
|
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
padding: 0 16px; |
|
|
background: #ffffff; |
|
|
background: #ffffff; |
|
|
margin-bottom: 8px; |
|
|
|
|
|
&.active { |
|
|
|
|
|
.shop-logo { |
|
|
|
|
|
&::before { |
|
|
|
|
|
content: ''; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 2px; |
|
|
|
|
|
height: 20px; |
|
|
|
|
|
top: 4px; |
|
|
|
|
|
left: -43px; |
|
|
|
|
|
background: #f1b33e; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
&::before, |
|
|
|
|
|
|
|
|
margin-bottom: 12px; |
|
|
&::after { |
|
|
&::after { |
|
|
position: absolute; |
|
|
|
|
|
content: ''; |
|
|
content: ''; |
|
|
border-radius: 8px; |
|
|
|
|
|
} |
|
|
|
|
|
&::before { |
|
|
|
|
|
top: 0; |
|
|
|
|
|
right: 0; |
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: -37px; |
|
|
|
|
|
width: 5px; |
|
|
|
|
|
height: 5px; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.4); |
|
|
background: #ffffff; |
|
|
background: #ffffff; |
|
|
z-index: 2; |
|
|
|
|
|
} |
|
|
} |
|
|
&:after { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
content: ''; |
|
|
|
|
|
top: -1px; |
|
|
|
|
|
right: -1px; |
|
|
|
|
|
bottom: -1px; |
|
|
|
|
|
left: -1px; |
|
|
|
|
|
background: var(--color-linear-lightgoldenyellow); |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
|
&::after { |
|
|
|
|
|
background: #516dd8; |
|
|
|
|
|
border: 1px solid #516dd8; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.shop-logo { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
z-index: 4; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
width: 24px; |
|
|
|
|
|
height: 24px; |
|
|
|
|
|
margin-right: 12px; |
|
|
|
|
|
|
|
|
|
|
|
.logo-icon { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
object-fit: contain; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.pass { |
|
|
.pass { |
|
|
position: relative; |
|
|
position: relative; |
|
|
z-index: 4; |
|
|
z-index: 4; |
|
|
@ -370,29 +324,6 @@ defineProps({ |
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.bottom { |
|
|
|
|
|
width: 264px; |
|
|
|
|
|
background: rgba(0, 0, 0, 0.02); |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
border-radius: 0 0 12px 0; |
|
|
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
|
padding-top: 25px; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.4); |
|
|
|
|
|
i { |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-family: 'font_bold'; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
|
|
padding-left: 8px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
