liyongle
3 years ago
26 changed files with 934 additions and 58 deletions
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 658 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 735 B |
|
After Width: | Height: | Size: 729 B |
|
After Width: | Height: | Size: 492 B |
|
After Width: | Height: | Size: 492 B |
@ -0,0 +1,172 @@ |
|||
<template> |
|||
<div class="car-info-wrapper"> |
|||
<div class="masker" @click="close"></div> |
|||
<div class="car-content"> |
|||
<img :src="carInfo.carImage" class="car-img" alt="" /> |
|||
<div class="car"> |
|||
<div class="car-group mr120"> |
|||
<span class="tip">车牌号</span> |
|||
<span class="text">{{ carInfo.carCode }}</span> |
|||
</div> |
|||
<div class="car-group mr120"> |
|||
<span class="tip">车位号</span> |
|||
<span class="text">{{ carInfo.spaceNo }}</span> |
|||
</div> |
|||
<div v-if="carInfo.parkingTime" class="car-group"> |
|||
<span class="tip">停车时长</span> |
|||
<span class="text">{{ carInfo.parkingTime }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="go" @click="go"> |
|||
<svg class="go-icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path |
|||
d="M28.9853 7.64401L23.6663 26.259L19.1063 17.139L10.6508 13.7565L28.9853 7.64401ZM32.0843 3.45001L3.87533 12.852C3.72933 12.9004 3.60174 12.9925 3.50985 13.1159C3.41796 13.2392 3.36621 13.3878 3.36163 13.5416C3.35705 13.6953 3.39984 13.8467 3.48422 13.9754C3.5686 14.104 3.69047 14.2035 3.83333 14.2605L16.9328 19.5L23.5703 32.775C23.6379 32.9102 23.7447 33.0218 23.8767 33.0953C24.0088 33.1687 24.16 33.2005 24.3104 33.1866C24.4609 33.1726 24.6037 33.1136 24.72 33.0171C24.8363 32.9206 24.9208 32.7913 24.9623 32.646L33.0428 4.36651C33.0803 4.23513 33.0811 4.09603 33.0453 3.96421C33.0094 3.83239 32.9382 3.71286 32.8394 3.61853C32.7406 3.5242 32.6179 3.45865 32.4846 3.42895C32.3513 3.39925 32.2123 3.40653 32.0828 3.45001H32.0843Z" |
|||
fill="white" |
|||
/> |
|||
</svg> |
|||
<div class="line"></div> |
|||
GO |
|||
</div> |
|||
<svg class="close-icon" width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" @click="close"> |
|||
<rect width="100" height="100" rx="50" fill="#C7C2B7" /> |
|||
<path |
|||
d="M50 47.172L59.9 37.272L62.728 40.1L52.828 50L62.728 59.9L59.9 62.728L50 52.828L40.1 62.728L37.272 59.9L47.172 50L37.272 40.1L40.1 37.272L50 47.172Z" |
|||
fill="white" |
|||
/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import Message from '@/base/Message/Message' |
|||
import { useRootStore } from '@/store/root' |
|||
import { useRouter } from 'vue-router' |
|||
const store = useRootStore() |
|||
const router = useRouter() |
|||
const props = defineProps({ |
|||
carInfo: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
} |
|||
}) |
|||
|
|||
const emits = defineEmits(['close']) |
|||
function close() { |
|||
emits('close') |
|||
} |
|||
function go() { |
|||
const info = window.Map_QM.pathPark({ shopNum: props.carInfo.spaceNo }) |
|||
|
|||
if (info?.node) { |
|||
const floor: any = store.buildingList[0].floorList.find(item => item.floorOrder === info.floor)?.floor |
|||
const shop = { |
|||
shopCode: '', |
|||
shopName: props.carInfo.spaceNo, |
|||
floorOrder: info.floor, |
|||
floor, |
|||
logoUrl: props.carInfo.carImage, |
|||
yaxis: info.node |
|||
} |
|||
store.SET_SHOP(shop) |
|||
router.push('/nav') |
|||
} else { |
|||
Message({ text: `暂未查到相关信息`, type: 'success' }) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.car-info-wrapper { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
width: 1920px; |
|||
height: 1080px; |
|||
background: rgb(142 144 145 / 50%); |
|||
|
|||
.masker { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 2; |
|||
width: 1920px; |
|||
height: 1080px; |
|||
} |
|||
.car-content { |
|||
position: absolute; |
|||
top: 112px; |
|||
left: 528px; |
|||
z-index: 3; |
|||
width: 564px; |
|||
height: 856px; |
|||
background: #fff; |
|||
border-radius: 16px; |
|||
} |
|||
.close-icon { |
|||
position: absolute; |
|||
top: -50px; |
|||
right: -50px; |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
.car-img { |
|||
width: 717px; |
|||
height: 403px; |
|||
border-radius: 16px 16px 0 0; |
|||
} |
|||
.car { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 48px 56px; |
|||
margin-top: -3px; |
|||
background: #efeeea; |
|||
} |
|||
.car-group { |
|||
display: flex; |
|||
flex-direction: column; |
|||
&.mr120 { |
|||
margin-right: 120px; |
|||
} |
|||
.tip { |
|||
padding-bottom: 16px; |
|||
font-size: 20px; |
|||
font-family: 'font_regulars'; |
|||
color: #736661; |
|||
line-height: 28px; |
|||
} |
|||
.text { |
|||
font-size: 28px; |
|||
font-family: 'font_bold'; |
|||
color: #595447; |
|||
font-weight: 700; |
|||
line-height: 36px; |
|||
} |
|||
} |
|||
.go { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100px; |
|||
font-size: 36px; |
|||
text-align: center; |
|||
color: #faeba9; |
|||
background: linear-gradient(159.19deg, #c4b280 13.77%, #a89866 96.7%); |
|||
border-radius: 0 0 16px 16px; |
|||
font-weight: 700; |
|||
line-height: 44px; |
|||
.go-icon { |
|||
width: 36px; |
|||
height: 36px; |
|||
} |
|||
.line { |
|||
width: 1px; |
|||
height: 20px; |
|||
margin: 0 24px; |
|||
border: 1px solid rgb(255 255 255 / 50%); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,136 @@ |
|||
<template> |
|||
<div class="picture-container"> |
|||
<div> |
|||
<swiper |
|||
v-if="acList.length" |
|||
:modules="[Autoplay]" |
|||
:observer="true" |
|||
:loop="acList.length > 1" |
|||
:autoplay="acList.length !== 1 ? { delay: 5000, disableOnInteraction: false } : false" |
|||
class="myswiper" |
|||
> |
|||
<swiper-slide v-for="item in acList" :key="item.activityId"> |
|||
<img :src="item.fileUrl" /> |
|||
</swiper-slide> |
|||
</swiper> |
|||
<img v-else class="empty" src="@/assets/images/empty_big.svg" alt="" /> |
|||
</div> |
|||
<div class="info"> |
|||
<div class="name"></div> |
|||
<ScrollView :list="[]" class="myscroll"> |
|||
<div class="intro"></div> |
|||
</ScrollView> |
|||
<div v-if="qrList && qrList.length" class="qr-container"> |
|||
<div class="item"> |
|||
<img src="" alt="" /> |
|||
<div class="name"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { Swiper, SwiperSlide } from 'swiper/vue' |
|||
import { Autoplay } from 'swiper' |
|||
import 'swiper/css' |
|||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|||
|
|||
interface Props { |
|||
acList: Activity[] |
|||
qrList: Activity[] |
|||
} |
|||
|
|||
defineProps<Props>() |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
:deep(.bscroll-vertical-scrollbar) { |
|||
width: 6px; |
|||
height: 120px !important; |
|||
background: rgb(0 0 0 / 3%); |
|||
border-radius: 6px; |
|||
opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
background: rgb(0 0 0 / 6%) !important; |
|||
border: none !important; |
|||
border-radius: 6px !important; |
|||
} |
|||
} |
|||
.picture-container { |
|||
@include fl(); |
|||
|
|||
position: fixed; |
|||
top: 268px; |
|||
left: 56px; |
|||
width: 1808px; |
|||
height: 576px; |
|||
background: #fff; |
|||
border-radius: 16px; |
|||
.myswiper { |
|||
width: 1024px; |
|||
height: 576px; |
|||
margin-right: 48px; |
|||
border-radius: 16px; |
|||
img { |
|||
width: 1024px; |
|||
height: 576px; |
|||
border-radius: 16px; |
|||
} |
|||
} |
|||
.empty { |
|||
width: 1024px; |
|||
height: 576px; |
|||
border-radius: 16px; |
|||
} |
|||
.info { |
|||
margin: 40px 0; |
|||
.name { |
|||
margin-bottom: 24px; |
|||
font-size: 24px; |
|||
font-family: 'font_bold'; |
|||
color: #534f46; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
} |
|||
.myscroll { |
|||
overflow: hidden; |
|||
width: 708px; |
|||
height: 308px; |
|||
.intro { |
|||
width: 688px; |
|||
font-size: 14px; |
|||
font-family: 'font_regular'; |
|||
white-space: pre-wrap; |
|||
color: #615c59; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 28px; |
|||
} |
|||
} |
|||
.qr-container { |
|||
@include fl(); |
|||
.item { |
|||
width: 80px; |
|||
height: 102px; |
|||
margin-right: 24px; |
|||
text-align: center; |
|||
.img { |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-bottom: 8px; |
|||
} |
|||
.name { |
|||
font-size: 12px; |
|||
font-family: 'font_regular'; |
|||
color: #615c59; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,36 +1,71 @@ |
|||
import { ref, shallowRef } from 'vue' |
|||
import { ref } from 'vue' |
|||
import { getFindCar } from '@/http/api/parking' |
|||
import { HTTP_CODE } from '@/enums' |
|||
import { isLicensePlate } from '@/utils/utils' |
|||
import { useRootStore } from '@/store/root' |
|||
import { useRouter } from 'vue-router' |
|||
import { HTTP_CODE } from '@/enums' |
|||
import Message from '@/base/Message/Message' |
|||
|
|||
export const useFindCar = () => { |
|||
const showCarDetail = ref(false) |
|||
const loading = ref(false) |
|||
const result = shallowRef<CarInfo>() |
|||
async function confirm(plate: string) { |
|||
if (!isLicensePlate(plate)) { |
|||
Message({ text: '车牌错误,请重新输入', type: 'success' }) |
|||
return |
|||
} |
|||
if (loading.value) { |
|||
return |
|||
} |
|||
try { |
|||
loading.value = true |
|||
const { code, msg, data } = await getFindCar(plate) |
|||
if (code === HTTP_CODE.ERR_OK) { |
|||
result.value = data |
|||
showCarDetail.value = true |
|||
} else { |
|||
const result = ref<CarInfo>() |
|||
const store = useRootStore() |
|||
const router = useRouter() |
|||
async function confirm(plate: string, type: number) { |
|||
if (!type) { |
|||
if (!isLicensePlate(plate)) { |
|||
Message({ text: '车牌错误,请重新输入', type: 'success' }) |
|||
return |
|||
} |
|||
if (loading.value) { |
|||
return |
|||
} |
|||
try { |
|||
loading.value = true |
|||
const { code, msg, data } = await getFindCar(plate) |
|||
if (code === HTTP_CODE.ERR_OK) { |
|||
if (data) { |
|||
result.value = { ...data, carCode: plate, parkingTime: toHoursAndMinutes(Number(data.parkingTime)) } |
|||
showCarDetail.value = true |
|||
} |
|||
return |
|||
} |
|||
Message({ text: msg, type: 'success' }) |
|||
} catch (error) { |
|||
Message({ text: error as string, type: 'success' }) |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} else { |
|||
if (!plate.length) { |
|||
Message({ type: 'success', text: '请输入正确的车位号' }) |
|||
return |
|||
} |
|||
const info = window.Map_QM.pathPark({ shopNum: plate }) |
|||
if (info?.node) { |
|||
const floor: any = store.buildingList[0].floorList.find(item => item.floorOrder === info.floor)?.floor |
|||
const shop = { |
|||
shopCode: '', |
|||
shopName: plate, |
|||
floorOrder: info.floor, |
|||
floor, |
|||
logoUrl: '/static/img/tcjf.png', |
|||
yaxis: info.node |
|||
} |
|||
store.SET_SHOP(shop) |
|||
router.push('/nav') |
|||
} else { |
|||
Message({ text: `暂未查到相关信息`, type: 'success' }) |
|||
} |
|||
} catch (error) { |
|||
Message({ text: error as string, type: 'success' }) |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 格式化停车时间
|
|||
function toHoursAndMinutes(totalMinutes: number) { |
|||
const hours = Math.floor(totalMinutes / 60) |
|||
const minutes = totalMinutes % 60 |
|||
return `${hours > 0 ? `${hours}小时` : ''}${minutes > 0 ? ` ${minutes}分钟` : ''}` |
|||
} |
|||
return { loading, result, showCarDetail, confirm } |
|||
} |
|||
|
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<div class="art-container"> |
|||
<div class="name">艺术装置</div> |
|||
<div class="nameEn">ARTWORK</div> |
|||
<ScrollView class="myScroll" :list="[]" scroll-x> |
|||
<div style="display: inline-block"> |
|||
<div class="lists"> |
|||
<ArtItem /> |
|||
</div> |
|||
</div> |
|||
</ScrollView> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|||
import ArtItem from './ArtItem.vue' |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
:deep(.bscroll-vertical-scrollbar) { |
|||
width: 500px; |
|||
height: 1px !important; |
|||
background: rgb(0 0 0 / 10%); |
|||
border-radius: 1px; |
|||
opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
height: 2px !important; |
|||
background: #e00068 !important; |
|||
border: none !important; |
|||
border-radius: 1px !important; |
|||
} |
|||
} |
|||
.art-container { |
|||
position: fixed; |
|||
top: 172px; |
|||
left: 60px; |
|||
.name { |
|||
font-size: 24px; |
|||
font-family: 'font_bold'; |
|||
color: #534f46; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
} |
|||
.nameEn { |
|||
margin-bottom: 40px; |
|||
font-size: 14px; |
|||
font-family: 'font_bold'; |
|||
color: #534f46; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 22px; |
|||
} |
|||
.myScroll { |
|||
overflow: hidden; |
|||
width: 1864px; |
|||
height: 610px; |
|||
.lists { |
|||
display: grid; |
|||
grid-template-rows: 1fr 1fr; |
|||
gap: 24px 24px; |
|||
grid-auto-flow: column; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<div class="art-item"> |
|||
<img class="pic" src="" alt="" /> |
|||
<div class="info"> |
|||
<div class="top"> |
|||
<div> |
|||
<div class="title"></div> |
|||
<div class="titleEn"></div> |
|||
</div> |
|||
<img src="@/assets/images/art/go.svg" alt="" /> |
|||
</div> |
|||
<ScrollView :list="[]" class="intro-scroll"> |
|||
<div class="intro"></div> |
|||
</ScrollView> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
:deep(.bscroll-vertical-scrollbar) { |
|||
width: 6px; |
|||
height: 120px !important; |
|||
background: rgb(0 0 0 / 3%); |
|||
border-radius: 6px; |
|||
opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
background: rgb(0 0 0 / 6%) !important; |
|||
border: none !important; |
|||
border-radius: 6px !important; |
|||
} |
|||
} |
|||
.art-item { |
|||
@include fl(); |
|||
|
|||
width: 834px; |
|||
height: 270px; |
|||
background: #fff; |
|||
border-radius: 16px; |
|||
.pic { |
|||
width: 480px; |
|||
height: 270px; |
|||
margin-right: 40px; |
|||
border-radius: 16px; |
|||
} |
|||
.info { |
|||
width: 296px; |
|||
.top { |
|||
@include fl(space-between); |
|||
|
|||
margin-bottom: 16px; |
|||
.title { |
|||
@include no-wrap; |
|||
|
|||
width: 190px; |
|||
font-size: 20px; |
|||
font-family: 'font_bold'; |
|||
color: #534f46; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 28px; |
|||
} |
|||
.titleEn { |
|||
@include no-wrap; |
|||
|
|||
width: 190px; |
|||
font-size: 14px; |
|||
font-family: 'font_bold'; |
|||
color: #615c59; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 22px; |
|||
} |
|||
img { |
|||
width: 88px; |
|||
height: 36px; |
|||
} |
|||
} |
|||
.intro-scroll { |
|||
overflow: hidden; |
|||
width: 296px; |
|||
height: 166px; |
|||
.intro { |
|||
font-size: 12px; |
|||
font-family: 'font_regular'; |
|||
color: #8e9090; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,22 +1,212 @@ |
|||
<template> |
|||
<PlateInput :list="plate" :search-method="searchMethod" :space-length="inputLength" @confirm="onConfirm" @handle-energy="handleEnergy"> |
|||
<Loading v-if="loading" fill="#fff" :size="20" /> |
|||
</PlateInput> |
|||
<PlateKeyboard @del="del" @handle-keyboard="handleKeyboard" /> |
|||
<div class="parking-container"> |
|||
<switchtab |
|||
class="switch-btn" |
|||
:width="436" |
|||
:height="68" |
|||
:wrapper-width="872" |
|||
:wrapper-height="68" |
|||
direction="row" |
|||
:list="list" |
|||
@click="handleSwitch" |
|||
/> |
|||
<div class="content"> |
|||
<div class="content-left"> |
|||
<PlateInput |
|||
:list="plate" |
|||
:search-method="searchMethod" |
|||
:space-length="inputLength" |
|||
@confirm="onConfirm" |
|||
@handle-energy="handleEnergy" |
|||
> |
|||
<Loading v-if="loading" fill="#fff" :size="20" /> |
|||
</PlateInput> |
|||
<PlateKeyboard :search-methods="searchMethod" @del="del" @handle-keyboard="handleKeyboard" /> |
|||
</div> |
|||
<div class="content-right"> |
|||
<div class="parking-carousel"> |
|||
<EffectFade v-slot="{ item }" :list="parkingInfo.fileList"> |
|||
<img class="img" :src="item" alt="" /> |
|||
</EffectFade> |
|||
</div> |
|||
<div class="info"> |
|||
<h1 class="title">{{ switchLanguage(parkingInfo, 'title') }}</h1> |
|||
<ScrollView class="parking-scroll" scrollbar :list="switchLanguage(parkingInfo, 'content')" :pull-up="false"> |
|||
<div class="intro">{{ switchLanguage(parkingInfo, 'content') }}</div> |
|||
</ScrollView> |
|||
</div> |
|||
<div class="qr-container"> |
|||
<img src="" alt="" /> |
|||
<div class="name">寻车扫码</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<CarInfo v-if="showCarDetail" :car-info="result" @close="showCarDetail = false" /> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, shallowRef, defineAsyncComponent } from 'vue' |
|||
import { useFindCar } from '@/composables/useFindCar' |
|||
import { useParkingKeyboard } from '@/composables/useParkingKeyboard' |
|||
import { getParkingInfo } from '@/http/api/parking' |
|||
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
|||
import PlateInput from '@/components/PlateInput/PlateInput.vue' |
|||
import PlateKeyboard from '@/components/PlateKeyboard/PlateKeyboard.vue' |
|||
import Loading from '@/base/Loading/Loading.vue' |
|||
import EffectFade from '@/components/EffectFade/EffectFade.vue' |
|||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|||
import switchtab from '@/components/SwitchTab/SwitchTab.vue' |
|||
const CarInfo = defineAsyncComponent(() => import('@/components/CarInfo/CarInfo.vue')) |
|||
const { switchLanguage } = useSwitchLanguage() |
|||
const list = [ |
|||
{ |
|||
name: '车牌号寻车', |
|||
en: 'LICENSE PLATE', |
|||
icon: require('../../assets/images/parking/pate_icon.svg'), |
|||
iconSel: require('../../assets/images/parking/pate_icon_ac.svg') |
|||
}, |
|||
{ |
|||
name: '车位号找车', |
|||
en: 'PARKING SPACE', |
|||
icon: require('../../assets/images/parking/space_icon.svg'), |
|||
iconSel: require('../../assets/images/parking/space_icon_ac.svg') |
|||
} |
|||
] |
|||
const tabIdx = ref(0) |
|||
function handleSwitch(index: number) { |
|||
tabIdx.value = index |
|||
if (index === 0) { |
|||
plate.value = LICENSE.slice() |
|||
changeSearchMethod('车牌') |
|||
} else if (index === 1) { |
|||
plate.value = [] |
|||
changeSearchMethod('车位') |
|||
} |
|||
} |
|||
|
|||
const { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, searchMethod, LICENSE } = useParkingKeyboard() |
|||
const { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, searchMethod, LICENSE, changeSearchMethod } = |
|||
useParkingKeyboard() |
|||
const { confirm, loading, showCarDetail, result } = useFindCar() |
|||
|
|||
function onConfirm() { |
|||
plate.value = LICENSE |
|||
confirm(plateToString.value) |
|||
confirm(plateToString.value, tabIdx.value) |
|||
if (tabIdx.value === 0) { |
|||
plate.value = LICENSE |
|||
} else { |
|||
plate.value = [] |
|||
} |
|||
} |
|||
|
|||
const parkingInfo = shallowRef<ParkingInfo>({} as ParkingInfo) |
|||
getParkingInfo().then(({ data }) => { |
|||
parkingInfo.value = data ?? {} |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.parking-container { |
|||
position: fixed; |
|||
top: 180px; |
|||
left: 96px; |
|||
z-index: 20; |
|||
.switch-btn { |
|||
position: fixed; |
|||
top: 220px; |
|||
left: 96px; |
|||
} |
|||
.content { |
|||
@include fl(flex-start, flex-start); |
|||
.content-left { |
|||
margin-top: 228px; |
|||
margin-right: 136px; |
|||
} |
|||
.content-right { |
|||
position: relative; |
|||
width: 720px; |
|||
background: rgb(255 255 255 / 40%); |
|||
border-radius: 16px; |
|||
.parking-carousel { |
|||
position: relative; |
|||
width: 720px; |
|||
height: 405px; |
|||
background-color: #fff; |
|||
border-radius: 16px; |
|||
:deep(.stay-tuned) { |
|||
height: 200px; |
|||
} |
|||
.img { |
|||
width: 540px; |
|||
height: 405px; |
|||
border-radius: 16px; |
|||
} |
|||
} |
|||
.info { |
|||
width: 560px; |
|||
height: 300px; |
|||
padding-top: 32px; |
|||
background: rgb(255 255 255 / 60%); |
|||
border-radius: 0 0 0 16px; |
|||
.title { |
|||
margin: 0 48px 12px; |
|||
font-size: 24px; |
|||
font-family: 'font_bold'; |
|||
color: #595447; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
} |
|||
|
|||
.parking-scroll { |
|||
position: relative; |
|||
overflow: hidden; |
|||
height: 182px; |
|||
margin: 0 18px 40px 48px; |
|||
:deep(.bscroll-vertical-scrollbar) { |
|||
width: 6px !important; |
|||
height: 120px !important; |
|||
background: rgb(0 0 0 / 3%) !important; |
|||
opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
height: 40px !important; |
|||
background: #fff !important; |
|||
border: none !important; |
|||
box-shadow: 0 8px 20px rgb(0 0 0 / 10%) !important; |
|||
} |
|||
} |
|||
.intro { |
|||
padding-right: 24px; |
|||
font-size: 14px; |
|||
font-family: 'font_regular'; |
|||
text-align: justify; |
|||
white-space: pre-wrap; |
|||
color: #736661; |
|||
line-height: 28px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.qr-container { |
|||
position: absolute; |
|||
right: 32px; |
|||
bottom: 104px; |
|||
width: 96px; |
|||
height: 120px; |
|||
text-align: center; |
|||
img { |
|||
width: 96px; |
|||
height: 96px; |
|||
margin-bottom: 10px; |
|||
} |
|||
.name { |
|||
font-size: 12px; |
|||
font-family: 'font_regular'; |
|||
color: #615c59; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<switchtab |
|||
class="switch-btn" |
|||
:width="364" |
|||
:height="68" |
|||
:wrapper-width="728" |
|||
:wrapper-height="68" |
|||
direction="row" |
|||
:list="list" |
|||
@click="handleSwitch" |
|||
/> |
|||
<PictureText v-if="isCurrent" :ac-list="[]" :qr-list="[]" /> |
|||
<img v-else class="tra" src="" alt="" /> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue' |
|||
import switchtab from '@/components/SwitchTab/SwitchTab.vue' |
|||
import PictureText from '@/components/PictureText/PictureText.vue' |
|||
|
|||
const list = [ |
|||
{ |
|||
name: '商场介绍', |
|||
en: 'INTRODUCE', |
|||
icon: require('../../assets/images/traffic/mall_icon.svg'), |
|||
iconSel: require('../../assets/images/traffic/mall_icon_ac.svg') |
|||
}, |
|||
{ |
|||
name: '交通信息', |
|||
en: 'TRAFFIC INFORMATION', |
|||
icon: require('../../assets/images/traffic/traffic_icon.svg'), |
|||
iconSel: require('../../assets/images/traffic/traffic_icon_ac.svg') |
|||
} |
|||
] |
|||
|
|||
const isCurrent = ref(false) |
|||
//切换控制 |
|||
function handleSwitch() { |
|||
isCurrent.value = !isCurrent.value |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.switch-btn { |
|||
position: fixed; |
|||
top: 152px; |
|||
left: 56px; |
|||
} |
|||
|
|||
.mall-service-container { |
|||
position: fixed; |
|||
top: 268px; |
|||
left: 56px; |
|||
width: 1808px; |
|||
height: 576px; |
|||
background: #fff; |
|||
border-radius: 16px; |
|||
} |
|||
|
|||
.tra { |
|||
position: fixed; |
|||
top: 268px; |
|||
left: 56px; |
|||
width: 1808px; |
|||
height: 576px; |
|||
border-radius: 16px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue