prevent_drowning_app/news/pages/notice/detail.vue

<template>
  <view class="detail">
	<view class="detop">
		<swiper  class="swiper" :current="current" circular :indicator-color="incolorh" :indicator-active-color="activecolorh" :indicator-dots="indicatorDotsh" :autoplay="autoplayh" >
			<swiper-item v-for="(ite,idx) in bannlist" :key="idx">
				<image :src="banner" class="bannerimg"></image>
			</swiper-item>
		</swiper>
		<image :src="preimg" class="preimg imgbtn" @tap="preFn"></image>
		<image :src="nextimg" class="nextimg imgbtn" @tap="nextFn"></image>
	</view>	
	<view class="txtbox">
		<view class="flex1 mb12">
			<view class="tit mb10">比对分析结果</view>
			<view class="txts flex">
				<view class="flex1">
					<view class="txtlist"><text class="tab">孩子姓名</text><text>：</text>王宇宁</view>
					<view class="txtlist"><text class="tab">身份证号</text><text>：</text>340824201503270246</view>
					<view class="txtlist"><text class="tab">学校名称</text><text>：</text>第一人民小学</view>
					<view class="txtlist"><text class="tab">班级名称</text><text>：</text>三年级 2 班</view>
					<view class="txtlist"><text class="tab">相似度</text><text>：</text><text class="cofe">92%</text></view>
				</view>
				<image :src="banner" class="headimg" @click="getPreview(0)"></image>
			</view>
			<view style="padding: 36rpx 0;">
				<view class="texts">目标对象首次出现在监控画面的时间为 <text class="co02">2025 年 7 月 29 日 16:40:12</text>，地点为城东公园人工湖东侧浅水区边缘（该区域为社区公示的 “夏季易溺水风险点”，周边设有 “禁止戏水” 警示牌）。​
				</view>
				<view class="texts">系统通过算法监控画面中人物的身高约 1.3 米、衣着红色条纹T恤、蓝色短裤、齐耳短发等关键信息，与家长上传的孩子资料特征匹<text class="co02">配度达 92%</text>。结合孩子行为及环境特征，判定当前存在 “水边戏水” 风险。
				</view>
			</view>
			
		</view>
		<view class="flex0 flexcj">
			<view class="btns btna">
				<image :src="btna"></image>不是我的孩子
			</view>
			<view class="btns btnb">
				<image :src="btnb"></image>是我的孩子
			</view>
		</view>
	</view>
	<loading></loading>
  </view>
</template>

<script>
import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
import {getDictionaryFn} from "@/api/mine/register.js"
  export default {
	components:{},
	data(){
		return{ 
			banner:require('@/static/images/home/banner.png'),
			preimg:require('@/news/images/notice/pre.png'),
			nextimg:require('@/news/images/notice/next.png'),
			btna:require('@/news/images/notice/btna.png'),
			btnb:require('@/news/images/notice/btnb.png'),
			autoplayh:false,
			incolorh:'#E6E6E6',
			activecolorh:'#A7A7A7',
			indicatorDotsh: false,
			current:0,
			id:'',
			bannlist:[{tit:'1'},{tit:'1'},{tit:'1'},]
		}
	},
	onShow() {
		
	},
    onLoad: function(e) {
		if(e.type==1){
			uni.setNavigationBarTitle({
				title:"系统通知"
			})
		}else{
			uni.setNavigationBarTitle({
				title:"防溺通知"
			})
		}
		// this.init();
		// this.getDataFn()
    },
	methods:{
		checkPermi,checkRole,
		preFn(){
			this.current = (this.current - 1 + this.bannlist.length) % this.bannlist.length;
		},
		nextFn(){
			this.current = (this.current + 1) % this.bannlist.length;
		},
		getPreview(idx,arr) {
			var newArr=[];
			// arr.forEach(ite=>{
			// 	var ds=this.baseUrl+ite
			// 	newArr.push(ds)
			// })
			newArr[0]=this.banner
			uni.previewImage({
				urls: newArr,
				current:idx,
				success: function(data) {},
				fail: function(err) {}
			});
		},
		init(){
			//工单类型
			getDictionaryFn('work_order_type').then(res => {
				if (res.code == 200) {
					this.gdList = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getDataFn(){
			getworkInfoList(this.id).then(res=>{
				
			})
				
		},
		
		
		
	}
  }
</script>
<style lang="scss" scoped>
.detail{min-height: 100vh;background: #ffffff;display: flex;flex-direction: column;
	padding: 20rpx 24rpx 24rpx;
}
.detop{position: relative;width: 100%;height: 298rpx;flex: 0 0 auto;
	.imgbtn{width: 44rpx;height: 44rpx;position: absolute;top: 50%;margin-top: -22rpx;
		&.preimg{left: 24rpx;}
		&.nextimg{right: 24rpx;}
	}
}
.txtbox{background: #F4F6F8;margin-top: 26rpx;flex: 1;padding:24rpx 24rpx 50rpx;border-radius: 20rpx;display: flex;flex-direction: column;
	.tit{font-size: 30rpx;color: #000000;}
	.txts{padding-bottom: 24rpx;border-bottom: 2rpx dashed #C6C6C6;;
		.txtlist{font-weight: 500;font-size: 26rpx;color: #000000;display: flex;line-height: 46rpx;
		text{flex: 0 0 auto;}
			.tab{min-width: 108rpx;text-align-last: justify;display: inline-block;flex: 0 0 auto;}
			.coa{}
		}
		.headimg{width: 198rpx;height: 208rpx;flex: 0 0 auto;margin-top: 10rpx;}
	}
	.texts{text-indent: 2rem;font-weight: 500;font-size: 26rpx;color: #323232;line-height: 46rpx;}
	.btns{display: flex;align-items: center;justify-content: center;
height: 88rpx;border-radius: 20rpx;font-weight: bold;
font-size: 26rpx;color: #FFFFFF;flex: 1;
		&.btna{background: #FFA20A;margin-right: 26rpx;
			image{width: 30rpx;height: 32rpx;margin-right: 20rpx;}
		}
		&.btnb{background: #0256FD;
			image{width: 30rpx;height: 24rpx;margin-right: 20rpx;}
		}
	}
}
.swiper{
	width: 100%;height: 298rpx;border-radius: 10rpx;overflow: hidden;
	image{width: 100%;height: 298rpx;}
}
</style>