uniapp 以下代码 内置浏览器样式
和运行到手机上样式有偏差 小车距离不一致<template>
<view class="wapper">
<!
-- <view class="bg
-image"></view>
-->
<image class="bg
-image" src="/static/home/bus/bg
-image.png" mode="widthFix" style="width
: 100%;" />
<!
-- 自定义导航栏
-->
<view class="custom
-navbar"
:style="{ paddingTop
: statusBarHeight + 'px' }">
<view class="navbar
-content">
<!
-- 左侧返回按钮
-->
<view class="back
-btn" @click="handleBack">
<image src="/static/home/bus/back
-icon.png" mode="aspectFit" style="width
: 48rpx;height
: 48rpx;" />
</view>
<!
-- 中
间标题
-->
<text class="title">{{busLineBase.name}}</text>
</view>
</view>
<view class="wapper
-content"
:style="{ paddingTop
: statusBarHeight +50 + 'px' }">
<view class="line_info">
<view class="site">
<text class="from">{{busLineBase.startSn}}</text>
<view class="arrow">
<text class="to">{{busLineBase.endSn}}</text>
</view>
</view>
<view class="tit">
<view class="time_s">
<text class="time
-text">{{busLineBase.firstTime}}</text>
</view>
<view class="time_e">
<text class="time
-text">{{busLineBase.lastTime}}</text>
</view>
<text class="price">票价
: {{busLineBase.price}}</text>
</view>
</view>
<view class="distance
-class">
<view class="station">
<view class="station
-title">
<view class="station
-name">候车站</view>
<view class="station
-content">
<view class="active">动漫大厦</view>
<view class="underline"></view>
</view>
</view>
</view>
<view class="distance">
<view class="time">
<text class="time_title" v
-if="haveBus">1
2分钟</text>
<text v
-else>暂无车辆时
间</text>
</view>
<text class="arr">5站/
2.4km</text>
</view>
</view>
</view>
<view class="site_list">
<scroll
-view class="wapper_sitelist" scroll
-x="true">
<view v
-for="(item, index) in stateBus">
<div class="bus_road"
:style="{marginLeft
:item.order*48+'px'}"></div>
</view>
<view class="road">
<view class='part' v
-for="(item, index) in siteList" @click="showActive(index, item.siteName)">
<view class='name'>
<view>
<view class="dot_p"
:class="{'dot_p_show'
: ind === index}"></view>
<view class='dot_r' v
-if="index!=siteList.length
-1"></view>
</view>
<view class='dot_d'
:class="{'dot_d_show'
: ind === index}"></view>
<text class='text'
:class="{'text_show'
: ind === index}">
{{index +1}}
<text class="text
-dir">
{{item.sn}}
</text>
</text>
</view>
</view>
</view>
</scroll
-view>
</view>
</view>
</template>
<script>
import {
getRealTimeBusLine
} from '@/request/bus.js'
export default {
data() {
return {
ind
: 5,
siteId
: "",
lineName
: "二号线",
siteName
: "动漫园站",
siteList
: [],
busLineBase
: [],
stateBus
: [],
time_s
: '',
time_e
: '',
from
: '',
busPosition
: [0, 5, 11],
to
: '',
isActive
: false,
lineId
: '',
siteNum
: '0',
haveBus
: true,
// 保留原有数据项...
}
},
onLoad(options) {
// 获取路由参数
const {
statusBarHeight
} = uni.getSystemInfoSync()
this.statusBarHeight = statusBarHeight
this.lineId = options.lineId
this.lat = options.lat
this.lng = options.lng
this.getLineDetail()
// 使用uni
-app地图API
// this.loadLineInfo()
},
methods
: {
async getLineDetail() {
var res = await getRealTimeBusLine({
lineId
: this.lineId,
lat
: this.lat,
lng
: this.lng
})
if (res.code == 0) {
console.log(res)
this.siteList = res.data.busInfStop
this.busLineBase = res.data.busLineBase
this.stateBus = res.data.stateBus
this.ind = res.data.targetOrder
}
},
showActive(index, siteName) {
this.ind = index
this.text = siteName
var TF = false
for (let i = 0; i <= this.busPosition.length; i++) {
if (index + 1 > this.busPosition[i]) {
// this.haveBus = true
this.siteNum = index + 1
- this.busPosition[i]
TF = true
}
}
if (TF === false) {
// this.haveBus = false
}
},
handleBack() {
uni.navigateBack()
},
async loadLineInfo() {
try {
// 使用uni
-app请求API
const res = await uni.request({
url
: `https
://restapi.amap.com/v3/bus/linename`,
data
: {
key
: 'cd0bbe150380e1
263de
209abf4
25745b',
city
: '天津',
keywords
: this.lineName,
extensions
: 'all'
}
})
if (res.data.status === '1') {
this.processLineData(res.data.lineinfo[0])
}
} catch (e) {
console.error('公交线路加载失败', e)
}
},
processLineData(tips) {
// 数据处理逻辑（与
Vue版相同）
this.from = tips.start_stop + '
-'
this.to = tips.end_stop
this.lineId = tips.id
// 其他数据处理...
},
// 保留showActive
和changeDirect方法...
}
}
</script>
<style>
page {
background
-color
: #f5f5f5;
}
</style>
<style scoped>
.bg
-image {
position
: absolute;
}
.custom
-navbar {
position
: fixed;
top
: 0;
left
: 0;
width
: 100%;
z
-index
: 1000;
/* 自定义背景色 */
/* 自定义阴影 */
}
.navbar
-content {
height
: 44px;
/* 标准导航栏高度 */
display
: flex;
align
-items
: center;
padding
: 0 15px;
}
.title {
flex
: 1;
text
-align
: center;
font
-size
: 17px;
font
-weight
: bold;
color
: #333;
/* 标题颜色 */
}
.back
-btn {
width
: 24px;
height
: 24px;
}
.right
-area {
width
: 40px;
text
-align
: right;
}
.info_wapper {
height
: 156px;
/* background
: #36A3F9; */
/* background
: url(@/static/home/bus/detail
-bg.png) left no
-repeat; */
padding
: 15px;
color
: black;
position
: absolute;
z
-index
: 9;
width
: 100%;
}
.line_info {
position
: relative;
/* display
: flex; */
}
.site {
font
-size
: 3
2rpx;
color
: black;
margin
-bottom
: 10px;
text
-align
: left;
display
: flex;
margin
-left
: 30px;
}
.from {
/* padding
-left
: 5
2rpx; */
color
: black;
}
.arrow {
background
: url(@/static/home/bus/single.png) left no
-repeat;
background
-size
: 14px 5px;
margin
-left
: 10px;
color
: black;
}
.to {
padding
-left
: 26px;
color
: black;
}
.time_s {
background
: url(@/static/home/bus/start.png) left no
-repeat;
background
-size
: 18px 18px;
justify
-self
: baseline;
}
.time_e {
background
: url(@/static/home/bus/end.png) left no
-repeat;
background
-size
: 18px 18px;
margin
-left
: 15px;
}
.price {
margin
-left
: 15px;
}
.tit {
color
: #fff;
font
-size
: 26rpx;
/* padding
-left
: 5
2rpx; */
margin
-bottom
: 10px;
height
: 21px;
color
: #333;
display
: flex;
align
-items
: baseline;
margin
-left
: 30px;
}
.distance
-class {
border
-radius
: 15px;
/* box
-shadow
: 0 4rpx 1
2rpx rgba(0, 0, 0, 0.1); */
background
: url(@/static/home/bus/distance
-bg.png) center no
-repeat;
background
-size
: cover;
height
: 160px;
position
: absolute;
z
-index
: 999;
left
: 20px;
right
: 20px;
}
.distance {
color
: #B7BABB;
line
-height
: 20px;
text
-align
: center;
display
: flex;
flex
-direction
: column;
align
-items
: center;
position
: relative;
z
-index
: 99;
/* align
-items
: baseline; */
}
.time {
color
: aquamarine;
}
.station {
margin
-left
: 20px;
color
: #353738;
padding
: 10px;
}
.station
-title {
display
: flex;
align
-items
: baseline;
}
.station
-name {
margin
-right
: 15px;
}
.station
-content {
padding
-top
: 10px;
/* padding
-left
: 20rpx; */
position
: relative;
/* padding
-right
: 50rpx; */
/* 确保文字在下划线上方 */
z
-index
: 2;
justify
-content
: center;
display
: flex;
align
-items
: center;
/* 文字在上层 */
}
.underline {
position
: absolute;
bottom
: 2px;
height
: 3px;
background
: linear
-gradient(to right, rgb(110,
207, 169), rgb(110,
224, 176));
/* 下划线颜色 */
border
-radius
: 3px;
z
-index
: -1;
width
: 80%;
align
-items
: center;
justify
-content
: center;
display
: flex;
/* margin
-left
: 30rpx; */
/* width
: 60rpx; */
/* 下划线在文字下方 */
}
.active {
color
: black;
/* 激活状态文字颜色 */
font
-weight
: bold;
/* font
-size
: 36rpx; */
}
.time {
float
: left;
width
: 40%;
font
-size
: 26rpx;
/* height
: 130rpx; */
line
-height
: 40px;
}
.time {
font
-size
: 36rpx;
color
: #353738;
}
.time
-text {
margin
-left
: 25px;
}
.time_title {
color
: rgb(14, 170, 11
2);
font
-weight
: bold;
}
.arr {
float
: left;
/* width
: 20%; */
font
-size
: 30rpx;
color
: rgb(14, 170, 11
2);
}
.site_list {
/* margin
: 15px; */
/* box
-shadow
: 0 4rpx 1
2rpx rgba(0, 0, 0, 0.1); */
background
-color
: white;
border
-radius
: 15px;
margin
-top
: 150px;
padding
-left
: 15px;
padding
-right
: 15px;
padding
-top
: 15px;
padding
-bottom
: 10px;
background
: url(@/static/home/bus/site
-bg.png) center no
-repeat;
position
: absolute;
z
-index
: 999;
left
: 20px;
right
: 20px;
background
-size
: cover;
/* 让背景图片覆盖整个视口 */
}
.site_list .wapper_sitelist {
width
: 100%;
overflow
-x
: scroll;
position
: relative;
-webkit
-overflow
-scrolling
: touch;
display
: flex;
}
.bus_road {
background
: url(@/static/home/bus/bus.png) no
-repeat center;
background
-size
: 28px
28px;
width
: 28px;
height
: 14px;
position
: absolute;
z
-index
: 1;
margin
-top
: 4px;
left
: 14px;
}
.road {
display
: flex;
}
.wapper_sitelist
::-webkit
-scrollbar {
display
: none;
}
/deep/
::-webkit
-scrollbar {
display
: none;
width
: 0;
height
: 0;
}
.part {
padding
: 10px;
display
: flex;
flex
-direction
: row;
text
-align
: center;
justify
-content
: center;
}
.site_list .dot_r {
margin
-top
: 25px;
position
: absolute;
top
: 3px;
height
: 3px;
background
: linear
-gradient(to right, rgb(110,
207, 169), rgb(110,
224, 176));
/* 下划线颜色 */
border
-radius
: 3rpx;
z
-index
: 1;
width
: 48px;
align
-items
: center;
justify
-content
: center;
display
: flex;
}
.site_list .name {
margin
-top
: 28px;
display
: flex;
flex
-direction
: column;
align
-items
: center;
}
.site_list .text {
display
: flex;
text
-align
: center;
margin
-left
: 5px;
}
.site_list .text_show {
display
: flex;
text
-align
: center;
margin
-left
: 5px;
color
: rgb(14, 170, 11
2);
font
-weight
: bold;
}
.site_list .dot_show {
background
: url(@/static/home/bus/position_red.png) no
-repeat center;
background
-size
: 14px 18px;
}
.site_list .dot_d_show {
border
-radius
: 50%;
width
: 16px;
height
: 16px;
background
-color
: rgba(110,
207, 169, 0.5);
position
: absolute;
z
-index
: 99999;
top
: 21px;
margin
-left
: 8px;
display
: flex;
align
-items
: center;
justify
-content
: center;
}
.road
-class {
display
: flex;
}
.dot_p {
border
-radius
: 50%;
width
: 8px;
height
: 8px;
background
-color
: rgb(110,
207, 169);
position
: absolute;
z
-index
: 99999;
top
: 25px;
display
: flex;
align
-items
: center;
justify
-content
: center;
/* margin
-left
: 10rpx; */
}
.dot_p_show {
border
-radius
: 50%;
width
: 8px;
height
: 8px;
background
-color
: rgb(14, 170, 11
2);
position
: absolute;
z
-index
: 99999;
top
: 25px;
display
: flex;
align
-items
: center;
justify
-content
: center;
}
.text
-dir{
margin
-top
: 5px;
writing
-mode
: vertical
-rl;
letter
-spacing
: 3px;
}
</style>
订阅专栏 解锁全文
扫一扫
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
