WenWuGuanJia/shouhu_fenbao/xunCha/jiLu.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="历史记录" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="tit_box">
			<view class="pm_tit">事件图片</view>
			<view class="pm_tit">文物名称</view>
			<view class="pm_tit">本体状况</view>
			<view class="pm_tit">构件状况</view>
			<view class="pm_tit">安全状况</view>
			<view class="pm_tit">其他</view>
		</view>
		<view class="xx_box">
			<view class="xx_item" v-for="(item, index) in information" :key="item.index">
				<view><image style="width: 100rpx; height: 80rpx" :src="item.image"></image></view>
				<view>{{ item.name }}</view>
				<view class="">
					{{ item.condition }}
					<uni-icons v-if="item.condition == '异常'" type="down" size="20" color="#f2c8a2"></uni-icons>
				</view>
				<view :class="{ active: item.member == '异常' }">
					{{ item.member }}
					<uni-icons v-if="item.member == '异常'" type="down" size="20" color="#f2c8a2"></uni-icons>
				</view>
				<view :class="{ active: item.secure == '异常' }">
					{{ item.secure }}
					<uni-icons @click="recordBtn" v-if="item.secure == '异常'" type="down" size="20" color="#f2c8a2"></uni-icons>
				</view>
				<view :class="{ active: item.other == '异常' }">
					{{ item.other }}
					<uni-icons v-if="item.other == '异常'" type="down" size="20" color="#f2c8a2"></uni-icons>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="center" :closeable="true" bgColor="#f9dbbf" round="5">
			<view class="pop_box">
				<view class="top_tit">
					<view class="">异常原因</view>
					<view class="">异常程度</view>
					<view class="">异常情况描述</view>
				</view>
				<view class="top_item">
					<view class="">构件丢失</view>
					<view class="">紧急</view>
					<view class="">XX构件丢失</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			// 信息列表
			information: [
				{
					image: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/sh_top.png',
					name: '周文学宅',
					condition: '正常',
					member: '正常',
					secure: '异常',
					other: '正常'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/sh_top.png',
					name: '王清祥宅',
					condition: '正常',
					member: '正常',
					secure: '正常',
					other: '正常'
				}
			]
		};
	},
	methods: {
		recordBtn() {
			this.show = true;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style>
.box {
	height: 100%;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100% 100%;
}
.tit_box {
	display: flex;
	align-items: center;
	height: 75rpx;
	justify-content: space-around;
	margin-top: 30rpx;
	background: url('/static/img/sj_top_bg.png') no-repeat;
	background-size: 100% 100%;
}

.pm_tit {
	font-size: 26rpx;
	font-weight: 400;
	line-height: 40rpx;
}
.xx_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
	font-size: 30rpx;
	line-height: 44rpx;
	padding: 0 10rpx 0 10rpx;
}
.active {
	color: #de1f1f !important;
}
.xx_box {
	margin-top: 40rpx;
	margin-left: 20rpx;
}
.pop_box {
	width: 635rpx;
	height: 280rpx;
	padding: 60rpx 40rpx 40rpx 40rpx;
	font-size: 30rpx;
	font-weight: 600;
}
.top_tit {
	display: flex;
	justify-content: space-between;
	color: black;
}
.top_item {
	display: flex;
	justify-content: space-between;
	color: red;
	margin-top: 20rpx;
}
</style>