project-shenyangk11
/
sy_k11_H_base_daoshi_vue_ts
forked from common/base_daoshi_vue_ts
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 🚀 周边交通

pull/2/head
liyongle 3 years ago
parent
76ad580f85
commit
34230cc941
4 changed files with 482 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 463
      src/components/Traffic/Traffic.vue
  2. 135
      src/components/Traffics/Traffics.vue
  3. 2
      src/components/TypeBtnList/TypeBtnList.vue
  4. 26
      src/views/Parking/Parking.vue

463
src/components/Traffic/Traffic.vue
View File

@ -1,5 +1,464 @@
<template>
<div></div>
<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"></script>
<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>

135
src/components/Traffics/Traffics.vue
View File

@ -1,135 +0,0 @@
<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>
<div class="right">
<div class="title">{{ $t('road') + ':' }}</div>
<div class="road-list">
<div v-for="item in list" :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: #68b753"></div>
<div>{{ switchLanguage(item, 'name') }}</div>
</div>
<div class="road">
<div class="w" style="background: #f5bd44"></div>
<div>{{ switchLanguage(item, 'name') }}</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</template>
<script setup lang="ts">
import { switchLanguage } from '@/plugins/switchLanguage'
const list = [
{
name: '畅通',
nameEn: 'Clear',
color: '#68B753'
},
{
name: '缓行',
nameEn: 'Slow',
color: '#F5BD44'
},
{
name: '拥堵',
nameEn: 'Jam',
color: '#E53F3B'
},
{
name: '非常拥堵',
nameEn: 'Very Congested',
color: '#A91A1F'
}
]
</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;
}
}
.right {
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 {
margin-bottom: 48px;
.name {
margin-right: 40px;
font-size: 20px;
font-family: 'font_bold';
color: #736661;
font-style: normal;
font-weight: 700;
line-height: 28px;
}
}
}
}
}
</style>

2
src/components/TypeBtnList/TypeBtnList.vue
View File

@ -45,7 +45,7 @@ function changeType(item: TypeItem, index: number) {
display: flex;
h4 {
width: 96px;
// width: 96px;
height: 40px;
font-size: 24px;
font-family: 'font_regular';

26
src/views/Parking/Parking.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="parking-container">
<div class="tabs">
<div v-for="(item, index) of tabs" :key="item" class="tab-item" @click="handleTab(index)">
<span class="text" :class="{ active: tabIdx === index }">{{ item }}</span>
<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>
@ -47,7 +47,20 @@ import ScrollView from '@/base/ScrollView/ScrollView.vue'
const CarInfo = defineAsyncComponent(() => import('@/components/CarInfo/CarInfo.vue'))
const Traffic = defineAsyncComponent(() => import('@/components/Traffic/Traffic.vue'))
const tabs = ['车牌号找车', '车位号找车', '周边交通'] as const
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
@ -77,14 +90,15 @@ getParkingInfo().then(({ data }) => {
<style lang="scss" scoped>
.parking-container {
position: relative;
position: absolute;
top: 140px;
z-index: 20;
padding-top: 140px;
// padding-top: 140px;
.tabs {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
width: 1920px;
margin-bottom: 64px;
.tab-item {
display: flex;

Write Preview
Loading…
Cancel
Save