zx_flk_app/pages/message/deviceInfo.vue

<template>
    <view class="zx-container deviceInfo-container">
        <view v-for="(item, index) in msgList" :key="index" class="list-item">
            <view class="time">{{ item.time }}</view>
            <view class="msg-wrap">
                <view class="map"></view>
                <view class="msg-text">
                    <view class="title">{{ item.title }}</view>
                    <view class="dtl-txt">{{ item.msg }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const config = require('@/common/config.js');
const http = require('@/common/http.js');
export default {
    data() {
        return {
            msgList: [
                { time: '今天 13:14', title: '车辆推动报警', msg: '车辆正在被人推送，请及时查看' },
                { time: '今天 13:14', title: '车辆推动报警', msg: '车辆正在被人推送，请及时查看' },
                { time: '今天 13:14', title: '车辆推动报警', msg: '车辆正在被人推送，请及时查看' },
            ]
        }
    },
    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) {
                    console.log(111, res.body)
                }
            })
        }
    }
}
</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>