liyongle
3 years ago
16 changed files with 391 additions and 27 deletions
|
After Width: | Height: | Size: 578 B |
|
After Width: | Height: | Size: 76 KiB |
@ -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,135 @@ |
|||
<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> |
|||
Loading…
Reference in new issue