deepblues
3 years ago
34 changed files with 1265 additions and 81 deletions
@ -1 +1,16 @@ |
|||
{"code":200,"msg":"操作成功","data":{"title":"泊车介绍","titleEn":"Parking information","content":"1月9日，中共中央总书记、国家主席、中央军委主席习近平在中国共产党第二十届中央纪律检查委员会第二次全体会议上发表重要讲话。李强、赵乐际、王沪宁、蔡奇、丁薛祥、李希出席会议。新华社记者 张领 摄\n二十届中央纪委二次全会公报强调，时刻保持解决大党独有难题的清醒和坚定，坚定不移推动健全全面从严治党体系我们党作为长期执政的马克思主义政党和世界上第一大政党，党的远大目标和历史使命，党的队伍的庞大规模和广泛分布，党面临的重大风险和严峻挑战，都决定了只有整体地而不是局部地、系统地而不是零碎地、持久地而不是短暂地、高标准地而不是一般化地全面从严治党，才能把我们党建设好。","contentEn":"Parking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking information","fileList":["/iotFile/2023/04/18/3EbfJy1GEkeIUtpK3AwWB.png"],"qrFileList":[{"name":"二维码","nameEn":"QR code","fileUrl":"/iotFile/2023/04/18/97JzNgLukcEbLdBDKhWj1.png"}]}} |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": { |
|||
"title": "泊车介绍", |
|||
"titleEn": "Parking information", |
|||
"content": "1月9日，中共中央总书记、国家主席、中央军委主席习近平在中国共产党第二十届中央纪律检查委员会第二次全体会议上发表重要讲话。李强、赵乐际、王沪宁、蔡奇、丁薛祥、李希出席会议。新华社记者 张领 摄\n二十届中央纪委二次全会公报强调，时刻保持解决大党独有难题的清醒和坚定，坚定不移推动健全全面从严治党体系我们党作为长期执政的马克思主义政党和世界上第一大政党，党的远大目标和历史使命，党的队伍的庞大规模和广泛分布，党面临的重大风险和严峻挑战，都决定了只有整体地而不是局部地、系统地而不是零碎地、持久地而不是短暂地、高标准地而不是一般化地全面从严治党，才能把我们党建设好。", |
|||
"contentEn": "Parking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking informationParking information", |
|||
"fileList": ["/iotFile/2023/04/18/3EbfJy1GEkeIUtpK3AwWB.png"], |
|||
"qrFileList": [{ |
|||
"name": "二维码", |
|||
"nameEn": "QR code", |
|||
"fileUrl": "/iotFile/2023/04/18/97JzNgLukcEbLdBDKhWj1.png" |
|||
}] |
|||
} |
|||
} |
|||
|
|||
|
Before Width: | Height: | Size: 176 KiB After Width: | Height: | Size: 172 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 146 KiB |
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 578 B |
|
After Width: | Height: | Size: 76 KiB |
@ -0,0 +1,139 @@ |
|||
<template> |
|||
<div class="car-info-wrapper"> |
|||
<div class="masker" @click="close"></div> |
|||
<div class="car-content"> |
|||
<img src="" class="car-img" alt="" /> |
|||
<div class="car"> |
|||
<div class="car-group mr120"> |
|||
<span class="tip">车牌号</span> |
|||
<span class="text">辽A88888</span> |
|||
</div> |
|||
<div class="car-group mr120"> |
|||
<span class="tip">车位号</span> |
|||
<span class="text">E-666</span> |
|||
</div> |
|||
<div class="car-group"> |
|||
<span class="tip">停车时长</span> |
|||
<span class="text">1小时</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"> |
|||
defineProps({ |
|||
carInfo: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
} |
|||
}) |
|||
|
|||
const emits = defineEmits(['close', 'go']) |
|||
function close() { |
|||
emits('close') |
|||
} |
|||
function go() { |
|||
emits('go') |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.car-info-wrapper { |
|||
position: fixed; |
|||
z-index: 20; |
|||
background: rgb(0 0 0 / 50%); |
|||
inset: 0; |
|||
.masker { |
|||
position: absolute; |
|||
inset: 0; |
|||
z-index: 2; |
|||
} |
|||
.car-content { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 3; |
|||
width: 717px; |
|||
border-radius: 16px; |
|||
transform: translate3d(-50%, -50%, 0); |
|||
} |
|||
.close-icon { |
|||
position: absolute; |
|||
top: -50px; |
|||
right: -50px; |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
.car-img { |
|||
width: 717px; |
|||
height: 403px; |
|||
} |
|||
.car { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 48px 56px; |
|||
background: #fff; |
|||
} |
|||
.car-group { |
|||
display: flex; |
|||
flex-direction: column; |
|||
&.mr120 { |
|||
margin-right: 120px; |
|||
} |
|||
.tip { |
|||
padding-bottom: 16px; |
|||
font-size: 20px; |
|||
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: #fff; |
|||
background: #d4a866; |
|||
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,108 @@ |
|||
<template> |
|||
<div class="result-container"> |
|||
<ScrollView class="myScoll" :list="list" :pull-up="false"> |
|||
<div class="shop_list"> |
|||
<div v-for="item in list" :key="item.shopCode" class="shop_item" @click="show(item)"> |
|||
<div class="left"> |
|||
<img v-lazy="item.logoUrl" alt="" /> |
|||
</div> |
|||
<div class="info"> |
|||
<div class="name">{{ switchLanguage(item, 'shopName') }}</div> |
|||
<div class="right"> |
|||
<img src="@/assets/images/search/position.png" alt="" /> |
|||
<div class="hose_num">{{ item.houseNumber }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ScrollView> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useRootStore } from '@/store/root' |
|||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|||
type ShopList = { |
|||
list: Shop[] |
|||
} |
|||
defineProps<ShopList>() |
|||
const store = useRootStore() |
|||
function show(item: Shop) { |
|||
store.SET_SHOP(item) |
|||
store.SET_SHOW_DETAIL(true) |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.result-container { |
|||
width: 714px; |
|||
height: 694px; |
|||
padding-top: 64px; |
|||
padding-left: 65px; |
|||
background: #fff; |
|||
border-radius: 12px; |
|||
.myScoll { |
|||
overflow: hidden; |
|||
height: 630px; |
|||
} |
|||
.shop_list { |
|||
display: grid; |
|||
gap: 32px 180px; |
|||
grid-template-columns: 1fr 1fr; |
|||
padding-bottom: 10px; |
|||
.shop_item { |
|||
@include fl(); |
|||
|
|||
width: 192px; |
|||
height: 80px; |
|||
.left { |
|||
@include fl(center); |
|||
|
|||
width: 80px; |
|||
height: 80px; |
|||
margin-right: 16px; |
|||
background: #fff; |
|||
border: 1px solid rgb(155 140 133 / 50%); |
|||
border-radius: 4px; |
|||
img { |
|||
width: 64px; |
|||
height: 64px; |
|||
} |
|||
} |
|||
.info { |
|||
width: 96px; |
|||
height: 60px; |
|||
.name { |
|||
@include no-wrap; |
|||
|
|||
width: 96px; |
|||
height: 32px; |
|||
margin-bottom: 6px; |
|||
font-size: 24px; |
|||
font-family: 'font_bold'; |
|||
color: #736661; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
} |
|||
.right { |
|||
@include fl(); |
|||
img { |
|||
width: 18px; |
|||
height: 18px; |
|||
margin-right: 4px; |
|||
} |
|||
.hose_num { |
|||
font-size: 14px; |
|||
font-family: 'font_bold'; |
|||
color: #9b8c85; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 22px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,464 @@ |
|||
<template> |
|||
<transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut"> |
|||
<div class="traffic-container"> |
|||
<div class="left"> |
|||
<img class="bg" src="@/assets/images/traffic.png" alt="" /> |
|||
<div class="qing_1"> |
|||
<svg width="637" height="242" viewBox="0 0 637 242" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M626.5 0H637L25.5 241.5L0 237L626.5 0Z" :fill="roadList[6].color" /> |
|||
</svg> |
|||
</div> |
|||
<div class="qing_2"> |
|||
<svg width="659" height="234" viewBox="0 0 659 234" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M649 0.5H658.5L25.5 234L0 229L649 0.5Z" :fill="roadList[7].color" /> |
|||
</svg> |
|||
</div> |
|||
<div class="qing_bg"> |
|||
<svg width="700" height="246" viewBox="0 0 700 246" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M657 0L700 1L94.9994 245.5L0 226.5L657 0Z" fill="white" /> |
|||
</svg> |
|||
</div> |
|||
<div class="label qing">青年大桥</div> |
|||
<div class="bo_1"> |
|||
<svg width="805" height="174" viewBox="0 0 805 174" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M0 2.5L9 0.5L804.5 165L782 174L0 2.5Z" :fill="roadList[5].color" /> |
|||
</svg> |
|||
</div> |
|||
<div class="bo_2"> |
|||
<svg width="819" height="163" viewBox="0 0 819 163" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M0.5 1.5L7 0L818.5 155.5L801.5 162.5L0.5 1.5Z" :fill="roadList[4].color" /> |
|||
</svg> |
|||
</div> |
|||
<div class="bo_bg"> |
|||
<svg width="856" height="185" viewBox="0 0 856 185" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M0 8.5L34.5 0.5L855.5 152L773 184.5L0 8.5Z" fill="white" /> |
|||
</svg> |
|||
</div> |
|||
<div class="label bo">博览路</div> |
|||
<div class="jiu_1"> |
|||
<svg width="669" height="147" viewBox="0 0 669 147" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M659.5 0L668.5 0.5L17.5 147L0.5 144L659.5 0Z" :fill="roadList[2].color" /> |
|||
</svg> |
|||
</div> |
|||
<div class="jiu_2"> |
|||
<svg width="681" height="145" viewBox="0 0 681 145" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M672.5 0.5L680.5 1L18.5 144.5L0 141L672.5 0.5Z" :fill="roadList[1].color" /> |
|||
</svg> |
|||
</div> |
|||
<div class="jiu_bg"> |
|||
<svg width="718" height="151" viewBox="0 0 718 151" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M681.5 0L717.473 3.23145L68.5 151L0 139L681.5 0Z" fill="white" /> |
|||
</svg> |
|||
</div> |
|||
<div class="label jiu">九龙街</div> |
|||
<div class="shen_1"> |
|||
<svg width="622" height="72" viewBox="0 0 622 72" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M0.5 1.5L6.5 0.5L622 67.5L611.5 72L0.5 1.5Z" :fill="roadList[1].color" /> |
|||
</svg> |
|||
</div> |
|||
<div class="shen_2"> |
|||
<svg width="626" height="67" viewBox="0 0 626 67" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M0 1L5 0L625.5 62.5L616.5 66.5L0 1Z" :fill="roadList[0].color" /> |
|||
</svg> |
|||
</div> |
|||
<div class="shen_bg"> |
|||
<svg width="650" height="78" viewBox="0 0 650 78" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M0.5 5.5L26.5169 0.5L649.504 61L611 78L0.5 5.5Z" fill="white" /> |
|||
</svg> |
|||
</div> |
|||
<div class="label shen">沈水路</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="title">{{ $t('road') + ':' }}</div> |
|||
<div class="road-list"> |
|||
<div v-for="item in statusList" :key="item.name" class="road"> |
|||
<div class="w" :style="'background:' + item.color"></div> |
|||
<div class="type">{{ switchLanguage(item, 'name') }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="info-container"> |
|||
<div class="item"> |
|||
<div class="name">博览路：</div> |
|||
<div class="road" style="margin-right: 24px"> |
|||
<div class="w" :style="'background:' + roadList[4].color"></div> |
|||
<div class="type">{{ switchLanguage(roadList[4], 'status') }}</div> |
|||
</div> |
|||
<div class="road"> |
|||
<div class="w" :style="'background:' + roadList[5].color"></div> |
|||
<div class="type">{{ switchLanguage(roadList[5], 'status') }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="name">九龙街：</div> |
|||
<div class="road" style="margin-right: 24px"> |
|||
<div class="w" :style="'background:' + roadList[2].color"></div> |
|||
<div class="type">{{ switchLanguage(roadList[2], 'status') }}</div> |
|||
</div> |
|||
<div class="road"> |
|||
<div class="w" :style="'background:' + roadList[3].color"></div> |
|||
<div class="type">{{ switchLanguage(roadList[3], 'status') }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="name">沈水路：</div> |
|||
<div class="road" style="margin-right: 24px"> |
|||
<div class="w" :style="'background:' + roadList[0].color"></div> |
|||
<div class="type">{{ switchLanguage(roadList[0], 'status') }}</div> |
|||
</div> |
|||
<div class="road"> |
|||
<div class="w" :style="'background:' + roadList[1].color"></div> |
|||
<div class="type">{{ switchLanguage(roadList[1], 'status') }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="name">青年大桥：</div> |
|||
<div class="road" style="margin-right: 24px"> |
|||
<div class="w" :style="'background:' + roadList[6].color"></div> |
|||
<div class="type">{{ switchLanguage(roadList[6], 'status') }}</div> |
|||
</div> |
|||
<div class="road"> |
|||
<div class="w" :style="'background:' + roadList[7].color"></div> |
|||
<div class="type">{{ switchLanguage(roadList[7], 'status') }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue' |
|||
|
|||
const statusList = [ |
|||
{ |
|||
name: '畅通', |
|||
nameEn: 'Clear', |
|||
color: '#68B753' |
|||
}, |
|||
{ |
|||
name: '缓行', |
|||
nameEn: 'Slow', |
|||
color: '#F5BD44' |
|||
}, |
|||
{ |
|||
name: '拥堵', |
|||
nameEn: 'Jam', |
|||
color: '#E53F3B' |
|||
}, |
|||
{ |
|||
name: '非常拥堵', |
|||
nameEn: 'Congested', |
|||
color: '#A91A1F' |
|||
} |
|||
] |
|||
|
|||
const roadList = ref([ |
|||
{ |
|||
roadName: '沈水路', |
|||
direction: '东向西', |
|||
color: '#68B753', |
|||
status: '畅通', |
|||
statusEn: 'Clear' |
|||
}, |
|||
{ |
|||
roadName: '沈水路', |
|||
direction: '西向东', |
|||
color: '#68B753', |
|||
status: '畅通', |
|||
statusEn: 'Clear' |
|||
}, |
|||
{ |
|||
roadName: '九龙街', |
|||
direction: '南向北', |
|||
color: '#68B753', |
|||
status: '畅通', |
|||
statusEn: 'Clear' |
|||
}, |
|||
{ |
|||
roadName: '九龙街', |
|||
direction: '北向南', |
|||
color: '#68B753', |
|||
status: '畅通', |
|||
statusEn: 'Clear' |
|||
}, |
|||
{ |
|||
roadName: '博览路', |
|||
direction: '东向西', |
|||
color: '#68B753', |
|||
status: '畅通', |
|||
statusEn: 'Clear' |
|||
}, |
|||
{ |
|||
roadName: '博览路', |
|||
direction: '西向东', |
|||
color: '#68B753', |
|||
status: '畅通', |
|||
statusEn: 'Clear' |
|||
}, |
|||
{ |
|||
roadName: '青年大街', |
|||
direction: '南向北', |
|||
color: '#68B753', |
|||
status: '畅通', |
|||
statusEn: 'Clear' |
|||
}, |
|||
{ |
|||
roadName: '青年大街', |
|||
direction: '北向南', |
|||
color: '#68B753', |
|||
status: '畅通', |
|||
statusEn: 'Clear' |
|||
} |
|||
]) |
|||
|
|||
const resList = [ |
|||
{ |
|||
roadName: '九龙街', |
|||
sectionDesc: '南向北', |
|||
status: '拥堵', |
|||
speed: 21.37, |
|||
distance: 740 |
|||
}, |
|||
{ |
|||
roadName: '青年大街', |
|||
sectionDesc: '南向北', |
|||
status: '拥堵', |
|||
speed: 21.38, |
|||
distance: 730 |
|||
} |
|||
] |
|||
|
|||
resList.forEach(item => { |
|||
switch (item.roadName) { |
|||
case '沈水路': |
|||
item.sectionDesc === '东向西' ? changeStatus(item.status, roadList.value[0]) : changeStatus(item.status, roadList.value[1]) |
|||
break |
|||
case '九龙街': |
|||
item.sectionDesc === '南向北' ? changeStatus(item.status, roadList.value[2]) : changeStatus(item.status, roadList.value[3]) |
|||
break |
|||
case '博览路': |
|||
item.sectionDesc === '东向西' ? changeStatus(item.status, roadList.value[4]) : changeStatus(item.status, roadList.value[5]) |
|||
break |
|||
case '青年大街': |
|||
item.sectionDesc === '南向北' ? changeStatus(item.status, roadList.value[6]) : changeStatus(item.status, roadList.value[7]) |
|||
break |
|||
|
|||
default: |
|||
break |
|||
} |
|||
}) |
|||
|
|||
function changeStatus(status: string, item: any) { |
|||
switch (status) { |
|||
case '畅通': |
|||
item.status = '畅通' |
|||
item.statusEn = 'Clear' |
|||
item.color = '#68B753' |
|||
break |
|||
case '缓行': |
|||
item.status = '缓行' |
|||
item.statusEn = 'Slow' |
|||
item.color = '#F5BD44' |
|||
break |
|||
case '拥堵': |
|||
item.status = '拥堵' |
|||
item.statusEn = 'Jam' |
|||
item.color = '#E53F3B' |
|||
break |
|||
case '严重拥堵': |
|||
item.status = '非常拥堵' |
|||
item.statusEn = 'Congested' |
|||
item.color = '#A91A1F' |
|||
break |
|||
|
|||
default: |
|||
break |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.traffic-container { |
|||
@include fl(flex-start, flex-start); |
|||
|
|||
position: fixed; |
|||
top: 306px; |
|||
left: 112px; |
|||
.left { |
|||
position: relative; |
|||
width: 1218px; |
|||
height: 600px; |
|||
.bg { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 236px; |
|||
z-index: 10; |
|||
width: 693px; |
|||
height: 420px; |
|||
} |
|||
.qing { |
|||
position: absolute; |
|||
top: 350px; |
|||
left: 890px; |
|||
transform: rotate(-23.66deg); |
|||
} |
|||
.qing_1 { |
|||
position: absolute; |
|||
top: 249px; |
|||
left: 545px; |
|||
z-index: 15; |
|||
} |
|||
.qing_2 { |
|||
position: absolute; |
|||
top: 249px; |
|||
left: 502px; |
|||
z-index: 15; |
|||
} |
|||
.qing_bg { |
|||
position: absolute; |
|||
top: 248px; |
|||
left: 488px; |
|||
z-index: 14; |
|||
} |
|||
.bo { |
|||
position: absolute; |
|||
top: 390px; |
|||
left: 279px; |
|||
transform: rotate(13.14deg); |
|||
} |
|||
.bo_1 { |
|||
position: absolute; |
|||
top: 308.5px; |
|||
left: 29px; |
|||
z-index: 7; |
|||
} |
|||
.bo_2 { |
|||
position: absolute; |
|||
top: 304px; |
|||
left: 49.5px; |
|||
z-index: 7; |
|||
} |
|||
.bo_bg { |
|||
position: absolute; |
|||
top: 303.5px; |
|||
left: 24px; |
|||
z-index: 6; |
|||
} |
|||
.jiu { |
|||
position: absolute; |
|||
top: 245px; |
|||
left: 155px; |
|||
transform: rotate(-12.85deg); |
|||
} |
|||
.jiu_1 { |
|||
position: absolute; |
|||
top: 206px; |
|||
left: 41.5px; |
|||
z-index: 9; |
|||
} |
|||
.jiu_2 { |
|||
position: absolute; |
|||
top: 204.5px; |
|||
left: 13px; |
|||
z-index: 9; |
|||
} |
|||
.jiu_bg { |
|||
position: absolute; |
|||
top: 204px; |
|||
left: 0; |
|||
z-index: 8; |
|||
} |
|||
.shen { |
|||
position: absolute; |
|||
top: 205px; |
|||
left: 950px; |
|||
transform: rotate(6.52deg); |
|||
} |
|||
.shen_1 { |
|||
position: absolute; |
|||
top: 212px; |
|||
left: 574.5px; |
|||
z-index: 5; |
|||
} |
|||
.shen_2 { |
|||
position: absolute; |
|||
top: 210px; |
|||
left: 586px; |
|||
z-index: 5; |
|||
} |
|||
.shen_bg { |
|||
position: absolute; |
|||
top: 209.5px; |
|||
left: 568.5px; |
|||
z-index: 4; |
|||
} |
|||
.label { |
|||
font-size: 36px; |
|||
font-family: 'font_regular'; |
|||
color: #595447; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 44px; |
|||
} |
|||
} |
|||
.right { |
|||
margin-top: 80px; |
|||
margin-left: 59px; |
|||
.title { |
|||
margin-bottom: 24px; |
|||
font-size: 28px; |
|||
font-family: 'font_bold'; |
|||
color: #736661; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 36px; |
|||
} |
|||
.road-list { |
|||
@include fl(); |
|||
|
|||
margin-bottom: 48px; |
|||
} |
|||
.road { |
|||
@include fl(); |
|||
|
|||
margin-right: 40px; |
|||
.w { |
|||
width: 20px; |
|||
height: 20px; |
|||
margin-right: 8px; |
|||
} |
|||
.type { |
|||
font-size: 20px; |
|||
font-family: 'font_regular'; |
|||
color: #9b8c85; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 28px; |
|||
} |
|||
} |
|||
.info-container { |
|||
width: 452px; |
|||
height: 356px; |
|||
padding: 40px 48px 12px; |
|||
background: #fff; |
|||
border-radius: 16px; |
|||
.item { |
|||
@include fl(); |
|||
|
|||
margin-bottom: 48px; |
|||
.name { |
|||
width: 100px; |
|||
margin-right: 40px; |
|||
font-size: 20px; |
|||
font-family: 'font_bold'; |
|||
color: #736661; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 28px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,3 +1,5 @@ |
|||
import { request } from '../../http' |
|||
//找车
|
|||
export const getFindCar = (license: string) => request<CarInfo>({ url: `/ThirdPark/GetPlaceInfo?carCode=${license}` }) |
|||
|
|||
export const getParkingInfo = () => request<ParkingInfo>({ url: `/JSON/getParkingInfo.json` }) |
|||
|
|||
@ -0,0 +1,8 @@ |
|||
declare interface ParkingInfo { |
|||
title: string |
|||
titleEn: string |
|||
content: string |
|||
contentEn: string |
|||
fileList: string[] |
|||
qrFileList: Array<{ name: string; nameEn: string; fileUrl: string }> |
|||
} |
|||
@ -1,22 +1,198 @@ |
|||
<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"> |
|||
<div class="tabs"> |
|||
<div v-for="(item, index) of tabs" :key="item.title" class="tab-item" @click="handleTab(index)"> |
|||
<span class="text" :class="{ active: tabIdx === index }">{{ switchLanguage(item, 'title') }}</span> |
|||
<div v-if="index !== tabs.length - 1" class="line"></div> |
|||
</div> |
|||
</div> |
|||
<div v-if="tabIdx !== 2" 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></EffectFade> |
|||
</div> |
|||
<h1 class="title">{{ switchLanguage(parkingInfo, 'title') }}</h1> |
|||
<ScrollView class="parking-scroll" scrollbar :list="switchLanguage(parkingInfo, 'content')"> |
|||
<div class="intro">{{ switchLanguage(parkingInfo, 'content') }}</div> |
|||
</ScrollView> |
|||
</div> |
|||
</div> |
|||
<Traffic v-else /> |
|||
</div> |
|||
<CarInfo v-if="showCarDetail" @close="showCarDetail = false" @go="onConfirm" /> |
|||
</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 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' |
|||
const CarInfo = defineAsyncComponent(() => import('@/components/CarInfo/CarInfo.vue')) |
|||
const Traffic = defineAsyncComponent(() => import('@/components/Traffic/Traffic.vue')) |
|||
|
|||
const { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, searchMethod, LICENSE } = useParkingKeyboard() |
|||
const tabs = [ |
|||
{ |
|||
title: '车牌号寻车', |
|||
titleEn: 'License Plate Number' |
|||
}, |
|||
{ |
|||
title: '车位号找车', |
|||
titleEn: 'Parking Lot Number' |
|||
}, |
|||
{ |
|||
title: '周边交通', |
|||
titleEn: 'Surrounding Transportation' |
|||
} |
|||
] as const |
|||
const tabIdx = ref(0) |
|||
function handleTab(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, changeSearchMethod } = |
|||
useParkingKeyboard() |
|||
const { confirm, loading, showCarDetail, result } = useFindCar() |
|||
|
|||
function onConfirm() { |
|||
plate.value = LICENSE |
|||
confirm(plateToString.value) |
|||
} |
|||
|
|||
const parkingInfo = shallowRef<ParkingInfo>({} as ParkingInfo) |
|||
getParkingInfo().then(({ data }) => { |
|||
parkingInfo.value = data ?? {} |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.parking-container { |
|||
position: absolute; |
|||
top: 140px; |
|||
z-index: 20; |
|||
// padding-top: 140px; |
|||
.tabs { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 1920px; |
|||
margin-bottom: 64px; |
|||
.tab-item { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 24px; |
|||
color: #84754e; |
|||
font-weight: 400; |
|||
} |
|||
.text { |
|||
position: relative; |
|||
display: block; |
|||
padding-bottom: 10px; |
|||
line-height: 32px; |
|||
&.active { |
|||
&::before { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
height: 4px; |
|||
background-color: #84754e; |
|||
content: ''; |
|||
} |
|||
} |
|||
} |
|||
.line { |
|||
width: 2px; |
|||
height: 26px; |
|||
margin: -5px 40px 0; |
|||
background: #84754e; |
|||
} |
|||
} |
|||
.content { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin: 0 226px; |
|||
.content-left { |
|||
width: 900px; |
|||
height: 400px; |
|||
padding-top: 40px; |
|||
padding-left: 14px; |
|||
background: rgb(0 0 0 / 4%); |
|||
border-radius: 16px; |
|||
} |
|||
.content-right { |
|||
overflow: hidden; |
|||
width: 540px; |
|||
background: rgb(255 255 255 / 40%); |
|||
border-radius: 8px; |
|||
.parking-carousel { |
|||
position: relative; |
|||
width: 540px; |
|||
height: 304px; |
|||
margin-bottom: 40px; |
|||
background-color: #fff; |
|||
:deep(.stay-tuned) { |
|||
height: 200px; |
|||
} |
|||
} |
|||
.title { |
|||
margin: 0 48px 12px; |
|||
font-size: 24px; |
|||
color: #595447; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
} |
|||
|
|||
.parking-scroll { |
|||
position: relative; |
|||
overflow: hidden; |
|||
height: 238px; |
|||
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; |
|||
text-align: justify; |
|||
color: #736661; |
|||
line-height: 28px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue