You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
yanzong_qianduan/pages/news/park/index.vue

144 lines
3.1 KiB

<template>
<view class="park">
<view class="park-navbar">
<u-navbar title="停车指引" :border-bottom="false" :background="background"></u-navbar>
</view>
<view class="park-hd">
<view class="a">{{cityInfo.shop_name}}</view>
<view class="b"><u-icon name="map" style="margin-right: 10rpx;"></u-icon>{{cityInfo.address}}</view>
</view>
<view class="park-bd">
<view class="a">停车攻略</view>
<view class="b">
<view class="store">{{cityInfo.parking_name}}<text>推荐</text></view>
<view class="btn" @click="openMap()">导航</view>
</view>
<view class="c" v-html="cityInfo.parking_desc"></view>
</view>
</view>
</template>
<script>
// import img from "@/static/news/login-bg.png"
export default {
data() {
return {
currentIndex: 0,
background: {
background: `url(${this.$picUrl}/static/news/login-bg.png) center top no-repeat`,
// background: 'url('+ img+') center top no-repeat',
backgroundSize: '100%',
},
cityInfo: {},
}
},
onLoad() {
this.cityInfo = uni.getStorageSync("cityInfo");
},
methods: {
openMap() {
uni.openLocation({
latitude: Number(this.cityInfo.latitude),
longitude: Number(this.cityInfo.longitude)
})
},
}
}
</script>
<style lang="scss" scoped>
.park{
width: 100%;
background: url(https://www.royaum.com.cn/static/news/login-bg.png) center 0 no-repeat;
background-size: 100% auto;
min-height: 100vh;
&-hd{
width: 698rpx;
height: 184rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 60rpx;
padding: 40rpx 50rpx;
box-sizing: border-box;
.a{
font-size: 28rpx;
font-weight: 500;
color: #000000;
}
.b{
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #818181;
margin-top: 20rpx;
}
}
&-bd{
width: 698rpx;
background: #FFFFFF;
border-radius: 8rpx;
margin: 0 auto;
margin-top: 20rpx;
padding: 30rpx 30rpx;
box-sizing: border-box;
overflow: hidden;
.a{
font-size: 32rpx;
font-weight: 500;
color: #000000;
}
.b{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
font-weight: 400;
color: #818181;
margin-top: 20rpx;
.store{
display: flex;
align-items: center;
text{
width: 96rpx;
height: 40rpx;
background: #FF5F5F;
border-radius: 10rpx;
text-align: center;
line-height: 40rpx;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
display: block;
margin-left: 5rpx;
}
}
.btn{
width: 138rpx;
text-align: center;
line-height: 53rpx;
background: #FFFFFF;
border-radius: 53rpx;
opacity: 1;
border: 1px solid #E9E9E9;
font-size: 28rpx;
font-weight: 400;
color: #535353;
}
}
.c{
padding: 30rpx 0;
.p{
line-height: 50rpx;
font-size: 28rpx;
color: #666;
text{
color: #999;
margin-right: 20rpx;
}
}
}
}
}
</style>