ROBOT-APP/code/HBX/pages/native/datalist/detailPage.nvue

<template>
	<view class="media-item view" >
		<view class="list" >
			<view class="top" @click="changeO">
				<view class="t-v1">
					<view
						:class="newsItem.alarmLevel == 0 ?'bg1' :newsItem.alarmLevel == 1 ? 'bg2' :newsItem.alarmLevel == 2 ?'bg3' :newsItem.alarmLevel == 3 ?'bg4':'bg5'">
					</view>
					<text class="c1">{{newsItem.pointName}}</text>
				</view>
			</view>
			<view class="center" @click="changeO">
				<view class="c-v1">
					<text class="icon">&#xe608;</text>
					<text class="name">{{newsItem.time}}</text>
				</view>
				<text class="c4">{{newsItem.result}}</text>
			</view>
			<view v-if="newsItem.show && info.length >0" class="swipers">
				    <swiper class="swiper-box" :indicator-dots="true" indicator-color="#0581FD">
				        <swiper-item v-for="(item ,index) in info" :key="index" @click="imgpre">
				            <image @load="(e) =>loadimg(item)" :lazy-load="true" class="swiper-box" :src="item"></image>
				        </swiper-item>
				    </swiper>
			</view>
		</view>
		
	<!-- 	<image src="http://192.168.1.144:8088/app/data/getImage?path=/2022/1/19/1138/CCD/16412819490000_440189026_20220119092221.jpg" mode=""></image> -->
	</view>
</template>

<script>
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "iconfont",
		'src': "url('/static/iconfont.ttf')"
	})
	import {api_config} from '@/config.js'
	export default {
		props: {
			newsItem: {
				type: Object,
				default: function(e) {
					return {}
				}
			},
			type: {
				type: [Number, String],
				default: ''
			},
		},
		data(){
			return {
				info:[]
			}
			
		},
		mounted() {
			this.$set(this.newsItem,'show',false)
			this.newsItem.show = false
			this.newsItem.image ? this.info.push((api_config+'/app/data/getImage?path='+this.newsItem.image)) :''
			this.newsItem.infrared ? this.info.push(api_config+'/app/data/getImage?path='+this.newsItem.infrared) :''
		},
		methods: {
			imgpre(){
				uni.previewImage({
					urls:this.info,
				})
			},
			loadimg(e){
				
			},
			changeO() {
				this.$set(this.newsItem,'show',!this.newsItem.show)
			},
		}
	}
</script>

<style scoped lang="scss">
	.swipers{
		margin-top: 10rpx;
		.swiper-box{
			height: 400rpx;
			width: 680rpx;
		}
	}
	.icon {
		font-family: iconfont;
		font-size: 12px;
		color: #666666;
	}

	.bg1 {
		width: 11rpx;
		height: 11rpx;
		background: #31B643;
		border-radius: 50%;
	}

	.bg2 {
		width: 11rpx;
		height: 11rpx;
		background: #2F86EC;
		border-radius: 50%;
	}

	.bg3 {
		width: 11rpx;
		height: 11rpx;
		background: #F9D25C;
		border-radius: 50%;
	}

	.bg4 {
		width: 11rpx;
		height: 11rpx;
		background: #EC782F;
		border-radius: 50%;
	}

	.bg5 {
		width: 11rpx;
		height: 11rpx;
		background: #E80F0F;
		border-radius: 50%;
	}

	.media-item {
		background-color: #fff;
		margin-top: 20rpx;

		.c1 {
			font-size: 30rpx;
			color: #000000;
			padding-left: 5rpx;
		}

		.c2 {
			font-size: 30rpx;
			color: #999;
		}

		.c2 {
			font-size: 30rpx;
			color: #999;
		}

		.c4 {
			font-size: 28rpx;
			margin-top: 15rpx;
			color: #299F48;
		}

		.list {
			margin: 10rpx;
			padding: 20rpx;

			.top {
				flex-direction: row;
				justify-content: space-between;

				.t-v1 {
					flex-direction: row;
					align-items: center;
				}
			}

			.center {
				padding-left: 5rpx;
				flex-direction: row;
				text-overflow: ellipsis;
				justify-content: space-between;

				.c-v1 {
					flex-direction: row;
					margin-top: 15rpx;
					align-items: center;
				}

				.name {
					font-size: 26rpx;
					padding-left: 8rpx;
					color: #666;
				}
			}

			.bottom {
				flex-direction: row;
				justify-content: space-between;

				.ic {
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.code {
					text-overflow: ellipsis;
					lines: 1;
					font-size: 30rpx;
					margin-left: 8rpx;
					color: #999;
					width: 300rpx;
				}

				.icon {
					margin-right: 0;
				}
			}
		}
	}
</style>