zx_flk_app/pages/message/deviceInfo.vue

<template>
    <view class="zx-container deviceInfo-container">
        <!-- <map style="width: 100%; height: 500px;" :latitude="latitude"
			:longitude="longitude" :markers="markers" show-location>
		</map> -->
        <view v-for="(item, index) in msgList" :key="index" class="list-item">
            <view class="time">{{ item.ctime }}</view>
            <view class="msg-wrap">
                <view class="map"></view>
                <view class="msg-text">
                    <view class="title">{{ item.title }}</view>
                    <view class="dtl-txt">{{ item.overview }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const config = require('@/common/config.js');
const http = require('@/common/http.js');
var common = require('../../common/common.js');
export default {
    data() {
        return {
            // latitude: 23.090994,
			// longitude: 113.314004,
            // markers: [{
            //     id: 1345,
            //     latitude: 23.090994,
            //     longitude: 113.314004,
            //     iconPath: 'https://qiniu.bms16.com/Fim2CWvIaWVoqPwQsJbNn-fcS-Ku',
            //     width: 30,
            //     height: 30,
            //     customCallout: {
            //         anchorY: -45, // Y轴偏移量
            //         anchorX: -100, // X轴偏移量
            //         display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
            //     },
            // }], // 标记点
            msgList: [
                // { time: '今天 13:14', title: '车辆推动报警', overview: '车辆正在被人推送，请及时查看' },
                // { time: '今天 13:14', title: '车辆推动报警', overview: '车辆正在被人推送，请及时查看' },
                // { time: '今天 13:14', title: '车辆推动报警', overview: '车辆正在被人推送，请及时查看' },
            ]
        }
    },
    onLoad(option) {
        this.queryList(option.car_id)
    },
    methods: {
        queryList(car_id) {
            http.postApi(config.API_MESSAGE_LIST, { car_id, msg_type: 'DEVICE' }, res => {
                if (res.succeed) {
                    this.msgList = res.body.data.list
                    this.msgList.map(item => {
                        item.ctime = common.formatTime(item.ctime)
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/libs/css/layout.scss";
.deviceInfo-container {
    padding: 24rpx 24rpx 150rpx;
    .list-item {
        width: 100%;
        .time {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 28rpx;
            color: #060809;
            text-align: center;
            margin: 40rpx 24rpx;
        }
        .msg-wrap {
            width: 100%;
            background: #FFFFFF;
            border-radius: 40rpx;
            padding: 8rpx;
            .map {
                width: 100%;
                height: 384rpx;
                background: url('https://qiniu.bms16.com/FufXj_x1qGs3iy7itHZ9oJ3FqG_Q');
                background-size: 100%;
            }
            .msg-text {
                padding: 32rpx 24rpx 40rpx;
                .title {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #060809;
                    margin-bottom: 16rpx;
                }
                .dtl-tet {
                    font-family: PingFangSC, PingFang SC;
                    font-size: 24rpx;
                    color: #060809;
                }
            }
        }
    }
}
</style>