星油云站
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.

139 lines
2.9 KiB

5 years ago
<template>
<view class="my-card my-cell radius">
<view class="flex ">
<view class="icon-self flex-sub margin-xs">
<image src="https://www.51xingka.net/LSMOIL/static/img/oil.png" height="100px" width="100px" mode="widthFix"></image>
</view>
<view class="flex-quadruple">
<view class="navigation" @tap="openMap">
10.2km|
<image class="icon-self" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=907966196,3433585328&fm=11&gp=0.jpg"
mode=""></image>
导航
</view>
<view class="text-cut" style="width: 400upx;">
<text class="strong">
中国石化(紫云路)
</text>
</view>
<view class="">
<text class="">
营业时间00:00-23:59(紫云路)
</text>
</view>
<view class="text-cut" style="width: 400upx;">
<text class="">
经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西200米.....
</text>
</view>
<view class="padding-top-xs">
<text class="strong padding-right font-16">
0#柴油
</text>
<text>市场价 </text>
<text class="s-rich">6.5</text>
</view>
<view class="padding-bottom-xs">
<text class="color-999 font-12">更新时间2020-05-07,具体油价与工作人员确定</text>
</view>
</view>
</view>
<PriceList />
</view>
</template>
<script>
import PriceList from './PriceList'
export default {
components: {
PriceList
},
data() {
return {
nodes: [{
name: 'div',
attrs: {
class: 'div-class',
style: 'line-height: 60px; color: red; text-align:center;'
},
children: [{
type: 'text',
text: 'Hello&nbsp;uni-app!'
}]
}],
strings: '<div style="text-align:center;"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/></div>'
}
},
methods: {
// 打开map地图
openMap() {
let that = this
uni.openLocation({
latitude: 117,
longitude: 21,
name: '江西景德镇',
address: '九龙路1188号',
scale: 12,
success: function() {
console.log('success');
},
fail: (error) => {
console.log('error')
console.log(error)
},
complete: () => {
console.log('made')
},
});
var map = uni.createMapContext('map');
map.moveToLocation();
},
}
}
</script>
<style>
.bottom-part {
width: 750upx;
position: absolute;
bottom: 60rpx;
}
.icon-self {
width: 1rem;
height: 1rem;
}
.my-card,
.my-cell {
background-color: #fff;
position: relative;
}
.oil-card-price {
max-width: 4rem;
margin: auto;
}
.free-money {
color: #FE0505;
max-width: 3rem;
font-size: 12px;
line-height: 12px;
}
.navigation {
position: absolute;
right: 16px;
}
</style>