WenWuGuanJia/shouhu_fenbao/yuJing/yuJing.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="scarch_box">
			<u-search
				@custom="search"
				:actionStyle="{ color: '#985741', fontSize: '28rpx', fontWeight: 'bold' }"
				height="25"
				shape="square"
				placeholder="输入关键字"
				v-model.trim="value"
			></u-search>
		</view>
		<view class="map_tit">
			<image style="width: 186rpx; height: 40rpx" src="/static/img/right_img.png"></image>
			<view class="">事件图片</view>
			<image style="width: 186rpx; height: 40rpx" src="/static/img/left_img.png"></image>
		</view>
		<view class="monitor_box">
			<view class="monitor_item"><image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/jk1.png"></image></view>
		</view>
		<view class="star">
			<view class="tit">待处理</view>
			<view class="num_box">3</view>
		</view>
		<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 in information" :key="item.index">
				<view><image style="width: 140rpx; height: 85rpx" :src="item.image"></image></view>
				<view style="width: 130rpx">{{ item.time }}</view>
				<view class="">{{ item.problem }}</view>
				<view class="">{{ item.duration }}</view>
				<view class="">{{ item.level }}</view>
				<view class="">{{ item.level }}</view>
			</view>
		</view>
		<!-- 描述 -->
		<view class="btm_box">
			<view style="margin-top: 20rpx">
				<u--textarea cursorSpacing="10" height="80" v-model.trim="textVal" placeholder="预警描述及情况:" placeholderStyle="color:red"></u--textarea>
			</view>
			<!-- 		<view style="margin-top: 20rpx">
				<u--textarea height="50" v-model.trim="textVal" placeholder="影响范围:" placeholderStyle="color:red"></u--textarea>
			</view>
			<view style="margin-top: 20rpx">
				<u--textarea height="50" v-model.trim="textVal" placeholder="建议处理方法:" placeholderStyle="color:red"></u--textarea>
			</view>
			<view class="star2"><view class="tit2">其他相关信息</view></view>
			<view style="margin-top: 20rpx">
				<u--textarea height="50" v-model.trim="textVal" placeholder="预警的触发条件:" placeholderStyle="color:red"></u--textarea>
			</view>
			<view style="margin-top: 20rpx">
				<u--textarea height="50" v-model.trim="textVal" placeholder="历史记录:" placeholderStyle="color:red"></u--textarea>
			</view> -->
			<view class="menu_box">
				<view class="item" @click="menuBtn(index)" :class="{ active: index == menuIndex }" v-for="(item, index) in menuList" :key="item.index">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuIndex: 0,
			// 信息列表
			information: [
				{
					image: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/sh_top.png',
					time: '2024-2-1 10:20:05',
					problem: '疑似明火',
					duration: 'xx文物',
					level: '省级'
				}
			],
			menuList: [
				{
					title: '误报'
				},
				{
					title: '情况上报'
				}
			]
		};
	},
	methods: {
		menuBtn(i) {
			this.menuIndex = i;
		}
	}
};
</script>

<style>
.box {
	height: auto;
	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-size: 100% 100%;
}
view.data-v-09988a29,
scroll-view.data-v-09988a29,
swiper-item.data-v-09988a29 {
	background-color: #fce3c4 !important;
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #fce3c4 !important;
	border-radius: 0;
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #fce3c4 !important;
}
.scarch_box {
	width: 600rpx;
	height: 82rpx;
	margin: auto;
	padding: 15rpx 0 0 30rpx;
	background-image: url('/static/img/search_bg1.png');
	background-size: 100% 100%;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 125rpx;
	margin-top: 50rpx;
	font-size: 32rpx;
	font-family: Songti SC, Songti SC;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.monitor_box {
	width: 90%;
	height: 280rpx;
	padding: 20rpx;
	margin: auto;
	margin-top: 40rpx;
	border-radius: 10rpx;
	background-color: #f2c8a2;
}
.monitor_item {
	width: 100%;
	height: 100%;
}
.tit {
	font-size: 30rpx;
	letter-spacing: 6rpx;
	text-align: center;
	font-weight: 600;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.star {
	width: 180rpx;
	height: 60rpx;
	display: flex;
	justify-content: space-evenly;
	margin-left: 42rpx;
	margin-top: 50rpx;
	text-align: center;
	line-height: 55rpx;
	background: url('/static/img/dt_bg2.png') no-repeat;
	background-size: 100% 100%;
}
.num_box {
	font-size: 32rpx;
	color: #db0303;
	font-weight: 600;
}
.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_box {
	width: 90%;
	margin-top: 40rpx;
	margin-left: 30rpx;
}
.xx_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
	font-size: 28rpx;
	color: #444444;
	line-height: 44rpx;
}
.btm_box {
	width: 90%;
	margin: auto;
}
.tit2 {
	width: 90%;
	margin: auto;
	margin-top: 30rpx;
	font-size: 32rpx;
	letter-spacing: 6rpx;
	text-align: center;
	font-weight: 700;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.star2 {
	width: 300rpx;
	height: 76rpx;
	text-align: center;
	line-height: 76rpx;
	background: url('/static/img/dt_bg2.png') no-repeat;
	background-size: 100% 100%;
}
.menu_box {
	display: flex;
	margin: auto;
	margin-top: 50rpx;
	width: 80%;
	justify-content: space-around;
}
.item {
	width: 200rpx;
	height: 70rpx;
	font-size: 30rpx;
	text-align: center;
	color: #934b36;
	line-height: 70rpx;
	background: url('/static/img/dt_bg2.png') no-repeat;
	background-size: 100% 100%;
}
.active {
	background: url('/static/img/dt_bg1.png') no-repeat !important;
	background-size: 100% 100% !important;
}
</style>