|
|
|
|
<template>
|
|
|
|
|
<view class="my-bg" style="display: flex;flex-direction: column;height: 100vh;">
|
|
|
|
|
<cu-custom class="main-totextbar bg-main-oil" bgColor="bg-main-oil">
|
|
|
|
|
<block slot="content">附近油站</block>
|
|
|
|
|
</cu-custom>
|
|
|
|
|
|
|
|
|
|
<view class="fixed-top-site">
|
|
|
|
|
<view class="cu-bar search bg-white">
|
|
|
|
|
<view class="search-form round">
|
|
|
|
|
<text class="cuIcon-search"></text>
|
|
|
|
|
<input @focus="InputFocus" confirm-type="search" @input="onInput" @confirm="onSearch"
|
|
|
|
|
@blur="InputBlur" v-model="siteName" :adjust-position="false" type="text" placeholder="加油站名称" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="action" @tap="toMap">
|
|
|
|
|
<image class="icon shadow-blur round icon-gasstation"
|
|
|
|
|
src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png" mode=""></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- <view class="placeholder-hidden">
|
|
|
|
|
<view class="cu-bar search bg-white">
|
|
|
|
|
<view class="search-form round">
|
|
|
|
|
<text class="cuIcon-search"></text>
|
|
|
|
|
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
|
|
|
|
|
placeholder="加油站名称" confirm-type="search" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="action" @tap="toMap">
|
|
|
|
|
<image class="icon shadow-blur round icon-gasstation"
|
|
|
|
|
src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png" mode=""></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
<!-- 筛选开始 -->
|
|
|
|
|
<scroll-view class="screentop bg-white" style="flex: 1;">
|
|
|
|
|
<view class="">
|
|
|
|
|
<sl-filter v-if="isFilterData" reflexTitle ref="slFilter" :productCodeList="productCodeList" :areaCodeList="areaCodeList"
|
|
|
|
|
@result="filterRes" :menuList="menuList"></sl-filter>
|
|
|
|
|
<!-- <sl-filter reflexTitle ref="slFilter" @result="filterRes" :menuList="menuList"></sl-filter> -->
|
|
|
|
|
</view>
|
|
|
|
|
<view class="bg-white min-height-50 padding-top" v-if="siteList.length>0">
|
|
|
|
|
<site-item v-for="(item,index) in siteList" :key="item.id" :site-item="item" :first="index==0"
|
|
|
|
|
:listHeight="listHeight" class="cu-list menu-avatar cu-item" @tap="toDetail(item)">
|
|
|
|
|
</site-item>
|
|
|
|
|
<view class="placeholder-hidden">
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="" v-else>
|
|
|
|
|
<my-empty :contentTitle="contentTitle"></my-empty>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
<view class="bg-white">
|
|
|
|
|
<uni-load-more status="more"></uni-load-more>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import StationItem from '@/components/site-item/site-item.vue'
|
|
|
|
|
import oilSiteApi from '@/api/oil-site.js'
|
|
|
|
|
import slFilter from '@/components/sl-filter/sl-filter.vue'
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
StationItem,
|
|
|
|
|
slFilter
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
filterData: {
|
|
|
|
|
// oilProductCode: '0#'
|
|
|
|
|
},
|
|
|
|
|
isFilterData:false,
|
|
|
|
|
contentTitle: '您当前位置附近没有油站,可以点击左上角-距离-选择其他省市进行查看。',
|
|
|
|
|
loadStatus: 'load',
|
|
|
|
|
listHeight: 160,
|
|
|
|
|
areaCodeList: [],
|
|
|
|
|
siteName: '',
|
|
|
|
|
menuList: [{
|
|
|
|
|
title: '距离',
|
|
|
|
|
isMutiple: false,
|
|
|
|
|
key: 'distance',
|
|
|
|
|
detailList: [{
|
|
|
|
|
title: "全部",
|
|
|
|
|
value: ''
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "20Km",
|
|
|
|
|
value: 20
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "30Km",
|
|
|
|
|
value: 30
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "50Km",
|
|
|
|
|
value: 50
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "省市",
|
|
|
|
|
value: 10
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '油品',
|
|
|
|
|
key: 'oilProductCode',
|
|
|
|
|
isMutiple: false,
|
|
|
|
|
detailList: [{
|
|
|
|
|
title: "全部",
|
|
|
|
|
value: ""
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "0#",
|
|
|
|
|
value: "0#"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "-10#",
|
|
|
|
|
value: "-10#"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "-20#",
|
|
|
|
|
value: "-20#"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "-35#",
|
|
|
|
|
value: "-35#"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "LNG",
|
|
|
|
|
value: "LNG"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// title: '油品',
|
|
|
|
|
// key: 'oilProductCode',
|
|
|
|
|
// isMutiple: false,
|
|
|
|
|
// detailList: {全部:[{
|
|
|
|
|
// title: "全部",
|
|
|
|
|
// value: ""
|
|
|
|
|
// }],
|
|
|
|
|
// 柴油:[{
|
|
|
|
|
// title: "0#",
|
|
|
|
|
// value: "0#"
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: "-10#",
|
|
|
|
|
// value: "-10#"
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: "-20#",
|
|
|
|
|
// value: "-20#"
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: "-35#",
|
|
|
|
|
// value: "-35#"
|
|
|
|
|
// }],
|
|
|
|
|
// 天然气:[{
|
|
|
|
|
// title: "LNG",
|
|
|
|
|
// value: "LNG"
|
|
|
|
|
// }]}
|
|
|
|
|
// },
|
|
|
|
|
{
|
|
|
|
|
title: '距离优先',
|
|
|
|
|
isMutiple: false,
|
|
|
|
|
key: 'comprehensiveSort',
|
|
|
|
|
detailList: [{
|
|
|
|
|
title: "距离优先",
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "价格优先",
|
|
|
|
|
value: 2
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
// menuList: uni.getStorageSync('filterData') ? uni.getStorageSync('filterData') : [
|
|
|
|
|
// {
|
|
|
|
|
// title: '渠道',
|
|
|
|
|
// isMutiple: false,
|
|
|
|
|
// key: 'channelCode',
|
|
|
|
|
// detailList: [{
|
|
|
|
|
// title: "全部",
|
|
|
|
|
// value: ""
|
|
|
|
|
// }]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: '距离',
|
|
|
|
|
// isMutiple: false,
|
|
|
|
|
// key: 'distance',
|
|
|
|
|
// detailList: [{
|
|
|
|
|
// title: "默认",
|
|
|
|
|
// value: 20
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: "20Km",
|
|
|
|
|
// value: 20
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: "30Km",
|
|
|
|
|
// value: 30
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: "50Km",
|
|
|
|
|
// value: 50
|
|
|
|
|
// }
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: '0#轻柴油',
|
|
|
|
|
// key: 'oilProductCode',
|
|
|
|
|
// isMutiple: false,
|
|
|
|
|
// detailList: [{
|
|
|
|
|
// title: "全部",
|
|
|
|
|
// value: ""
|
|
|
|
|
// }]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// title: '品牌',
|
|
|
|
|
// key: 'siteBrand',
|
|
|
|
|
// isSort: true,
|
|
|
|
|
// isMutiple: false,
|
|
|
|
|
// detailList: [{
|
|
|
|
|
// title: "全部",
|
|
|
|
|
// value: ""
|
|
|
|
|
// }]
|
|
|
|
|
// }
|
|
|
|
|
// ],
|
|
|
|
|
siteList: [],
|
|
|
|
|
InputBottom: 0,
|
|
|
|
|
show: false,
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
isLoadMore: false, //是否加载中
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
loadStatus: {
|
|
|
|
|
deep: true,
|
|
|
|
|
immediate: true,
|
|
|
|
|
handler: function(val, oldVal) {
|
|
|
|
|
if (val.status == 'load') {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.getSiteList()
|
|
|
|
|
}, 100)
|
|
|
|
|
} else {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '到底啦',
|
|
|
|
|
icon: 'none'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
this.refreshLocation()
|
|
|
|
|
if (!uni.getStorageSync('filterData')) {
|
|
|
|
|
this.getFilterData()
|
|
|
|
|
} else {
|
|
|
|
|
this.isFilterData=true
|
|
|
|
|
}
|
|
|
|
|
this.getSiteList()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onPullDownRefresh() {
|
|
|
|
|
this.filterRes(this.filterData)
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
uni.stopPullDownRefresh()
|
|
|
|
|
}, 600);
|
|
|
|
|
},
|
|
|
|
|
onReachBottom() {
|
|
|
|
|
if (this.loadStatus == 'load') {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.getSiteList()
|
|
|
|
|
}, 100)
|
|
|
|
|
} else {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '到底啦',
|
|
|
|
|
icon: 'none'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
filterRes(val) {
|
|
|
|
|
this.filterData = val
|
|
|
|
|
this.currentPage = 1
|
|
|
|
|
this.siteList = []
|
|
|
|
|
this.getSiteList()
|
|
|
|
|
},
|
|
|
|
|
getFilterData() {
|
|
|
|
|
let menuList = [{
|
|
|
|
|
title: '渠道',
|
|
|
|
|
isMutiple: false,
|
|
|
|
|
key: 'channelCode',
|
|
|
|
|
detailList: [{
|
|
|
|
|
title: "全部",
|
|
|
|
|
value: ""
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '0#轻柴油',
|
|
|
|
|
key: 'oilProductCode',
|
|
|
|
|
isMutiple: false,
|
|
|
|
|
detailList: [{
|
|
|
|
|
title: "全部",
|
|
|
|
|
value: ""
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '品牌',
|
|
|
|
|
key: 'siteBrand',
|
|
|
|
|
isSort: true,
|
|
|
|
|
isMutiple: false,
|
|
|
|
|
detailList: [{
|
|
|
|
|
title: "全部",
|
|
|
|
|
value: ""
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
oilSiteApi.getCheckInfo().then(res => {
|
|
|
|
|
if (res.code == 20000) {
|
|
|
|
|
uni.setStorageSync('productCodeList', res.data.productCodeList)
|
|
|
|
|
uni.setStorageSync('areaCodeList', res.data.areaCodeList)
|
|
|
|
|
this.areaCodeList = uni.getStorageSync('areaCodeList')
|
|
|
|
|
let channelCodes = []
|
|
|
|
|
res.data.channelCodes.map(item => {
|
|
|
|
|
channelCodes.push({
|
|
|
|
|
title: item.name,
|
|
|
|
|
value: item.id
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
let productCodes = []
|
|
|
|
|
res.data.productCodes.map(item => {
|
|
|
|
|
productCodes.push({
|
|
|
|
|
title: item.name,
|
|
|
|
|
value: item.id
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
let siteBrands = []
|
|
|
|
|
res.data.siteBrands.map(item => {
|
|
|
|
|
siteBrands.push({
|
|
|
|
|
title: item.name,
|
|
|
|
|
value: item.id
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
menuList[0].detailList = menuList[0].detailList.concat(channelCodes)
|
|
|
|
|
menuList[1].detailList = menuList[1].detailList.concat(productCodes)
|
|
|
|
|
menuList[2].detailList = menuList[2].detailList.concat(siteBrands)
|
|
|
|
|
uni.setStorageSync('filterData', this.menuList);
|
|
|
|
|
if (uni.getStorageSync('areaCodeList')) {
|
|
|
|
|
this.areaCodeList = uni.getStorageSync('areaCodeList')
|
|
|
|
|
} else {
|
|
|
|
|
this.areaCodeList = res.data.areaCodeList
|
|
|
|
|
}
|
|
|
|
|
// this.$forceUpdate();
|
|
|
|
|
}
|
|
|
|
|
this.isFilterData = true
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
onSelected(e) {
|
|
|
|
|
// console.log(e)
|
|
|
|
|
},
|
|
|
|
|
refreshLocation() {
|
|
|
|
|
uni.getLocation({
|
|
|
|
|
type: 'wgs84',
|
|
|
|
|
success: function(res) {
|
|
|
|
|
uni.setStorageSync('location', res)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getSiteList() {
|
|
|
|
|
this.refreshLocation()
|
|
|
|
|
|
|
|
|
|
let data1 = {
|
|
|
|
|
currentPage: this.currentPage,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
params: { //类型:Object 必有字段 备注:// 筛选对象
|
|
|
|
|
clientBelong:'BAICHUAN',
|
|
|
|
|
sort: "juli", //类型:String 必有字段 备注:// 智能排序 ( price:价格最低 juli:距离最近 ) 默认距离排序
|
|
|
|
|
siteName: this.siteName,
|
|
|
|
|
...uni.getStorageSync('location'),
|
|
|
|
|
// ...this.filterData
|
|
|
|
|
siteBrand: this.siteName ? '' : this.filterData
|
|
|
|
|
.siteBrand, // 备注:// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
|
|
|
|
|
channelCode: this.siteName ? '' : this.filterData
|
|
|
|
|
.channelCode, // 备注:// 渠道编码 ( OIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
|
|
|
|
|
oilProductCode: this.siteName ? '' : this.filterData
|
|
|
|
|
.oilProductCode, // 备注:// 油号选择 ( 0# 92# 92#)
|
|
|
|
|
provinceCode: this.filterData.provinceCode,
|
|
|
|
|
cityCode: this.filterData.cityCode,
|
|
|
|
|
areaCode: this.filterData.areaCode,
|
|
|
|
|
distance: this.filterData.distance,
|
|
|
|
|
comprehensiveSort: this.filterData.comprehensiveSort ? this.filterData.comprehensiveSort : 1
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
if (!uni.getStorageSync('Authorization')) {
|
|
|
|
|
oilSiteApi.readOnlySites(data1).then(res => {
|
|
|
|
|
if (res.code == 20000) {
|
|
|
|
|
this.siteList = this.siteList.concat(res.data.list)
|
|
|
|
|
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量,则表示此为最后一页
|
|
|
|
|
this.loadStatus = 'nomore'
|
|
|
|
|
} else {
|
|
|
|
|
this.currentPage++
|
|
|
|
|
this.loadStatus = 'load'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
oilSiteApi.getSiteLists(data1).then(res => {
|
|
|
|
|
if (res.code == 20000) {
|
|
|
|
|
this.siteList = this.siteList.concat(res.data.list)
|
|
|
|
|
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量,则表示此为最后一页
|
|
|
|
|
this.loadStatus = 'nomore'
|
|
|
|
|
} else {
|
|
|
|
|
this.currentPage++
|
|
|
|
|
this.loadStatus = 'load'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
toDetail(item) {
|
|
|
|
|
let itemS = encodeURIComponent(JSON.stringify(item));
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
// console.log(err)
|
|
|
|
|
},
|
|
|
|
|
success: () => {
|
|
|
|
|
// console.log('err')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// if (uni.getStorageSync('user')) {
|
|
|
|
|
// uni.navigateTo({
|
|
|
|
|
// url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
|
|
|
|
|
// fail: (err) => {
|
|
|
|
|
// // console.log(err)
|
|
|
|
|
// },
|
|
|
|
|
// success: () => {
|
|
|
|
|
// // console.log('err')
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// } else {
|
|
|
|
|
// uni.showModal({
|
|
|
|
|
// title: '请您登录',
|
|
|
|
|
// content: "登录佰川加油才可以加油 |˛˙꒳˙)♡",
|
|
|
|
|
// confirmText: '去登陆',
|
|
|
|
|
// success: (res) => {
|
|
|
|
|
// if (res.confirm) {
|
|
|
|
|
// uni.reLaunch({
|
|
|
|
|
// url: '../../../BagAuth/pages/login/login?loginType=true'
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
nameSelect(value, item) {
|
|
|
|
|
this.title2 = item.text
|
|
|
|
|
// console.log(item)
|
|
|
|
|
},
|
|
|
|
|
typeSelect(value, item) {
|
|
|
|
|
// console.log(item)
|
|
|
|
|
this.title1 = item.text
|
|
|
|
|
},
|
|
|
|
|
optionSelect(value, item) {
|
|
|
|
|
// console.log(item)
|
|
|
|
|
this.title3 = item.text
|
|
|
|
|
},
|
|
|
|
|
toMap() {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/BagStation/pages/stationMap/stationMap',
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
InputFocus(e) {
|
|
|
|
|
this.InputBottom = e.detail.height
|
|
|
|
|
// console.log(e.detail)
|
|
|
|
|
// console.log(this.InputBottom)
|
|
|
|
|
},
|
|
|
|
|
InputBlur(e) {
|
|
|
|
|
this.InputBottom = 0
|
|
|
|
|
// console.log(this.InputBottom)
|
|
|
|
|
// console.log(e.detail)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
onInput() {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.currentPage = 1
|
|
|
|
|
this.siteList = []
|
|
|
|
|
this.getSiteList()
|
|
|
|
|
}, 100)
|
|
|
|
|
},
|
|
|
|
|
onSearch() {
|
|
|
|
|
this.currentPage = 1
|
|
|
|
|
this.siteList = []
|
|
|
|
|
this.getSiteList()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.icon-gasstation {
|
|
|
|
|
width: 1.2rem;
|
|
|
|
|
height: 1.2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.placeholder-hidden {
|
|
|
|
|
/* min-height: 95upx; */
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fixed-top-site {
|
|
|
|
|
/* top: 120rpx; */
|
|
|
|
|
z-index: 4;
|
|
|
|
|
/* position: fixed; */
|
|
|
|
|
width: 750upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.min-height-50 {
|
|
|
|
|
min-height: 50vh;
|
|
|
|
|
}
|
|
|
|
|
</style>
|