页面构建

monitorMobile/components/tki-tree/style.css

@@ -0,0 +1,151 @@
+.tki-tree-mask {
+  position: fixed;
+  top: 0rpx;
+  right: 0rpx;
+  bottom: 0rpx;
+  left: 0rpx;
+  z-index: 9998;
+  background-color: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: all 0.3s ease;
+  visibility: hidden;
+}
+.tki-tree-mask.show {
+  visibility: visible;
+  opacity: 1;
+}
+.tki-tree-cnt {
+  position: fixed;
+  top: 0rpx;
+  right: 0rpx;
+  bottom: 0rpx;
+  left: 0rpx;
+  z-index: 9999;
+  top: 160rpx;
+  transition: all 0.3s ease;
+  transform: translateY(100%);
+}
+.tki-tree-cnt.show {
+  transform: translateY(0);
+}
+.tki-tree-bar {
+  background-color: #fff;
+  height: 72rpx;
+  padding-left: 20rpx;
+  padding-right: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  border-bottom-width: 1rpx !important;
+  border-bottom-style: solid;
+  border-bottom-color: #f5f5f5;
+  font-size: 32rpx;
+  color: #757575;
+  line-height: 1;
+}
+.tki-tree-bar-confirm {
+  color: #07bb07;
+}
+.tki-tree-view {
+  position: absolute;
+  top: 0rpx;
+  right: 0rpx;
+  bottom: 0rpx;
+  left: 0rpx;
+  top: 72rpx;
+  background-color: #fff;
+  padding-top: 20rpx;
+  padding-right: 20rpx;
+  padding-bottom: 20rpx;
+  padding-left: 20rpx;
+}
+.tki-tree-view-sc {
+  height: 100%;
+  overflow: hidden;
+}
+.tki-tree-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 26rpx;
+  color: #757575;
+  line-height: 1;
+  height: 0;
+  opacity: 0;
+  transition: 0.2s;
+  position: relative;
+  overflow: hidden;
+}
+.tki-tree-item.show {
+  height: 80rpx;
+  opacity: 1;
+}
+.tki-tree-item.showchild:before {
+  transform: rotate(90deg);
+}
+.tki-tree-item.last:before {
+  opacity: 0;
+}
+.tki-tree-icon {
+  width: 26rpx;
+  height: 26rpx;
+  margin-right: 8rpx;
+}
+.tki-tree-label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  line-height: 1.2;
+}
+.tki-tree-check {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tki-tree-check-yes,
+.tki-tree-check-no {
+  width: 20px;
+  height: 20px;
+  border-top-left-radius: 20%;
+  border-top-right-radius: 20%;
+  border-bottom-right-radius: 20%;
+  border-bottom-left-radius: 20%;
+  border-top-width: 1rpx;
+  border-left-width: 1rpx;
+  border-bottom-width: 1rpx;
+  border-right-width: 1rpx;
+  border-style: solid;
+  border-color: #07bb07;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+.tki-tree-check-yes-b {
+  width: 12px;
+  height: 12px;
+  border-top-left-radius: 20%;
+  border-top-right-radius: 20%;
+  border-bottom-right-radius: 20%;
+  border-bottom-left-radius: 20%;
+  background-color: #07bb07;
+}
+.tki-tree-check .radio {
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+.tki-tree-check .radio .tki-tree-check-yes-b {
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+.hover-c {
+  opacity: 0.6;
+}

monitorMobile/components/tki-tree/tki-tree.vue

@@ -0,0 +1,302 @@
+<template xlang="wxml">
+	<view class="tki-tree">
+		<view class="tki-tree-mask" :class="{'show':showTree}" @tap="_cancel"></view>
+		<view class="tki-tree-cnt" :class="{'show':showTree}">
+			<view class="tki-tree-bar">
+				<view class="tki-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消</view>
+				<view class="tki-tree-bar-title" :style="{'color':titleColor}">{{title}}</view>
+				<view class="tki-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">确定</view>
+			</view>
+			<view class="tki-tree-view">
+				<scroll-view class="tki-tree-view-sc" :scroll-y="true">
+					<block v-for="(item, index) in treeList" :key="index">
+						<view class="tki-tree-item" :style="[{
+							paddingLeft: item.rank*15 + 'px',
+							zIndex: item.rank*-1 +50
+						}]"
+						 :class="{
+							border: border === true,
+							show: item.show,
+							last: item.lastRank,
+							showchild: item.showChild,
+							open: item.open,
+						}">
+							<view class="tki-tree-label" @tap.stop="_treeItemTap(item, index)">
+								<image class="tki-tree-icon" :src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"></image>
+								{{item.name}}
+							</view>
+							<view class="tki-tree-check" @tap.stop="_treeItemSelect(item, index)" v-if="selectParent?true:item.lastRank">
+								<view class="tki-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}" :style="{'border-color':confirmColor}">
+									<view class="tki-tree-check-yes-b" :style="{'background-color':confirmColor}"></view>
+								</view>
+								<view class="tki-tree-check-no" v-else :class="{'radio':!multiple}" :style="{'border-color':confirmColor}"></view>
+							</view>
+						</view>
+					</block>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tki-tree",
+		props: {
+			range: {
+				type: Array,
+				default: function() {
+					return []
+				}
+			},
+			idKey: {
+				type: String,
+				default: 'id'
+			},
+			rangeKey: {
+				type: String,
+				default: 'label'
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			multiple: { // 是否可以多选
+				type: Boolean,
+				default: false
+				// default: true
+			},
+			selectParent: { //是否可以选父级
+				type: Boolean,
+				default: false
+			},
+			foldAll: { //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
+				type: Boolean,
+				default: false
+			},
+			confirmColor: { // 确定按钮颜色
+				type: String,
+				default: '' // #07bb07
+			},
+			cancelColor: { // 取消按钮颜色
+				type: String,
+				default: '' // #757575
+			},
+			titleColor: { // 标题颜色
+				type: String,
+				default: '' // #757575
+			},
+			currentIcon: { // 展开时候的ic
+				type: String,
+				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg=='
+			},
+			defaultIcon: { // 折叠时候的ic
+				type: String,
+				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC'
+			},
+			lastIcon: { // 没有子集的ic
+				type: String,
+				default: ''
+			},
+			border: { // 是否有分割线
+				type: Boolean,
+				default: false
+			},
+		},
+		data() {
+			return {
+				showTree: false,
+				treeList: [],
+				selectIndex: -1,
+			}
+		},
+		computed: {},
+		methods: {
+			_show() {
+				this.showTree = true
+			},
+			_hide() {
+				this.showTree = false
+			},
+			_cancel() {
+				this._hide()
+				this.$emit("cancel", '');
+			},
+			_confirm() {
+				// 处理所选数据
+				let rt = [],
+					obj = {};
+				this.treeList.forEach((v, i) => {
+					if (this.treeList[i].checked) {
+						obj = {}
+						obj.parents = this.treeList[i].parents
+						obj = Object.assign(obj, this.treeList[i].source)
+						// 移除子元素
+						delete obj.children
+						rt.push(obj)
+					}
+				})
+				this._hide()
+				this.$emit("confirm", rt);
+			},
+			//扁平化树结构
+			_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
+				list.forEach(item => {
+					this.treeList.push({
+						id: item[this.idKey],
+						name: item[this.rangeKey],
+						source: item,
+						parentId, // 父级id数组
+						parents, // 父级id数组
+						rank, // 层级
+						showChild: false, //子级是否显示
+						open: false, //是否打开
+						show: rank === 0, // 自身是否显示
+						hideArr: [],
+						orChecked: item.checked ? item.checked : false,
+						checked: item.checked ? item.checked : false,
+					})
+					if (Array.isArray(item.children) && item.children.length > 0) {
+						// console.log(item)
+						let parentid = [...parentId],
+							parentArr = [...parents],
+							childrenid = [...childrenid];
+						delete parentArr.children
+						parentid.push(item[this.idKey]);
+						parentArr.push({
+							[this.idKey]: item[this.idKey],
+							[this.rangeKey]: item[this.rangeKey]
+						})
+						this._renderTreeList(item.children, rank + 1, parentid, parentArr);
+					} else {
+						this.treeList[this.treeList.length - 1].lastRank = true;
+					}
+				})
+				// console.log(list)
+			},
+			// 处理默认选择
+			_defaultSelect() {
+				this.treeList.forEach((v, i) => {
+					if (v.checked) {
+						this.treeList.forEach((v2, i2) => {
+							if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
+								v2.show = true
+								if (v.parentId.includes(v2.id)) {
+									v2.showChild = true;
+									v2.open = true;
+								}
+							}
+						})
+					}
+				})
+			},
+			// 点击
+			_treeItemTap(item, index) {
+				if (item.lastRank === true) {
+					//点击最后一级时触发事件
+					this.treeList[index].checked = !this.treeList[index].checked
+					this._fixMultiple(index)
+					return;
+				}
+				let list = this.treeList;
+				let id = item.id;
+				item.showChild = !item.showChild;
+				item.open = item.showChild ? true : !item.open;
+				list.forEach((childItem, i) => {
+					if (item.showChild === false) {
+						//隐藏所有子级
+						if (!childItem.parentId.includes(id)) {
+							return;
+						}
+						if (!this.foldAll) {
+							if (childItem.lastRank !== true && !childItem.open) {
+								childItem.showChild = false;
+							}
+							// 为隐藏的内容添加一个标记
+							if (childItem.show) {
+								childItem.hideArr[item.rank] = id
+							}
+						} else {
+							if (childItem.lastRank !== true) {
+								childItem.showChild = false;
+							}
+						}
+						childItem.show = false;
+					} else {
+						// 打开子集
+						if (childItem.parentId[childItem.parentId.length - 1] === id) {
+							childItem.show = true;
+						}
+						// 打开被隐藏的子集
+						if (childItem.parentId.includes(id) && !this.foldAll) {
+							// console.log(childItem.hideArr)
+							if (childItem.hideArr[item.rank] === id) {
+								childItem.show = true;
+								if (childItem.open && childItem.showChild) {
+									childItem.showChild = true
+								} else {
+									childItem.showChild = false
+								}
+								childItem.hideArr[item.rank] = null
+							}
+							// console.log(childItem.hideArr)
+						}
+					}
+				})
+				// console.log(this.treeList)
+			},
+			_treeItemSelect(item, index) {
+				this.treeList[index].checked = !this.treeList[index].checked
+				this._fixMultiple(index)
+			},
+			// 处理单选多选
+			_fixMultiple(index) {
+				if (!this.multiple) {
+					// 如果是单选
+					this.treeList.forEach((v, i) => {
+						if (i != index) {
+							this.treeList[i].checked = false
+						} else {
+							this.treeList[i].checked = true
+						}
+					})
+				}
+			},
+			// 重置数据
+			_reTreeList() {
+				this.treeList.forEach((v, i) => {
+					this.treeList[i].checked = v.orChecked
+				})
+			},
+			_initTree(range = this.range){
+				this.treeList = [];
+				this._renderTreeList(range);
+				this.$nextTick(() => {
+					this._defaultSelect(range)
+				})
+			}
+		},
+		watch: {
+			range(list) {
+				this._initTree(list);
+			},
+			multiple() {
+				if (this.range.length) {
+					this._reTreeList();
+				}
+			},
+			selectParent() {
+				if (this.range.length) {
+					this._reTreeList();
+				}
+			},
+		},
+		mounted() {
+			this._initTree();
+		}
+	}
+</script>
+
+<style scoped>
+	@import "./style.css";
+</style>

monitorMobile/pages.json

@@ -128,6 +128,12 @@
 				"navigationBarTitleText": "处理结果"
 			}
 		},
+		{
+			"path": "pages/monitor/index",
+			"style": {
+				"navigationBarTitleText": "监控管理"
+			}
+		},
 		// 我的
 		{
 			"path": "pages/my/index",

monitorMobile/pages/earlyWarning/components/inspectionCenter.vue

@@ -460,7 +460,7 @@
 		padding: 10px;
 		box-sizing: border-box;
 		// height: 600px;
-		padding-bottom: 50px;
+		padding-bottom: 30px;
 
 
 		.liBox {
@@ -547,7 +547,7 @@
 						margin-top: 18rpx;
 
 						.txt {
-							font-size: 28rpx;
+							font-size: 26rpx;
 							color: #333333;
 						}
 					}

monitorMobile/pages/earlyWarning/components/warningInfo.vue

@@ -2,14 +2,14 @@
 	<view class="warningInfo">
 		<view class="searchBox">
 			<view class="searchLine">
-				<view class="leftSearchBox">
+				<!-- <view class="leftSearchBox">
 					<view class="searchLabel">
 						筛选条件:
 					</view>
 					<view class="searchValue">
 
 					</view>
-				</view>
+				</view> -->
 				<view class="searchShow" @click="openSearch">
 					<image v-show="isShowSearch==false" style="width:20px;height:20px;"
 						src="@/static/image/earlyWarning/screen.png" mode="">
@@ -17,6 +17,13 @@
 					<image v-show="isShowSearch" style="width:20px;height:20px;"
 						src="@/static/image/earlyWarning/screenActive.png" mode="">
 					</image>
+					<text class="labels">筛选</text>
+					<text class="values">周界入侵，未处理，2024-8-24 18:06:12 - 2024-8-24 18:06:12</text>
+					<view class="arrow">
+						<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode="">
+						</image>
+						<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image>
+					</view>
 				</view>
 			</view>
 			<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch">
@@ -85,88 +92,70 @@
 			<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
 				<u-list-item v-for="(item, index) in warnList" :key="index">
 					<view class="liBox">
+						<view class="headerCard">
+							<view class="schoolName">
+								学校名称学校名称学校名称学校名称
+							</view>
+							<view class="statusBox" :class="[item.warnHand == 1?'handle':'nohandle']">
+								{{item.warnHand == 1 ? '已处理' : '未处理'}}
+							</view>
+						</view>
 						<view class="topCard">
 							<view class="pic">
 								<image src="@/static/image/earlyWarning/warnBack.png" mode="aspectFill"></image>
 							</view>
 							<view class="rightCard">
-								<view class="firstCard">
-									<view class="schoolName">
-										学校名称学校名称学校名称学校名称
-									</view>
-									<view class="statusBox" :class="[item.warnHand == 1?'handle':'nohandle']">
-										{{item.warnHand == 1 ? '已处理' : '未处理'}}
-									</view>
-								</view>
-								<view class="secondCard">
-									<image style="width: 30rpx;height: 30rpx;"
-										src="@/static/image/earlyWarning/warnType.png" mode=""></image>
-									<view class="txt">
-										警告类型：周界入侵
-									</view>
-								</view>
-								<view class="thirdCard">
-									<image style="width: 30rpx;height: 30rpx;"
-										src="@/static/image/earlyWarning/warnVideo.png" mode=""></image>
-									<view class="txt">
-										警告摄像头：厨房（良景）
-									</view>
-								</view>
+								<u-row>
+									<u-col span="6">
+										<view class="midContent">
+											姓名：杨云
+										</view>
+									</u-col>
+									<u-col span="6">
+										<view class="midContent">
+											系部：安环部
+										</view>
+									</u-col>
+								</u-row>
+								<u-row style="margin-top: 20rpx;">
+									<u-col span="6">
+										<view class="midContent">
+											专业：环艺
+										</view>
+									</u-col>
+									<u-col span="6">
+										<view class="midContent">
+											班级：第二班
+										</view>
+									</u-col>
+								</u-row>
+
 							</view>
 						</view>
 						<view class="midCard">
-							<u-row>
-								<u-col span="6">
-									<view class="midContent">
-										姓名：杨云
-									</view>
-								</u-col>
-								<u-col span="6">
-									<view class="midContent">
-										系部：安环部
-									</view>
-								</u-col>
-							</u-row>
-							<u-row>
-								<u-col span="6">
-									<view class="midContent">
-										专业：环艺
-									</view>
-								</u-col>
-								<u-col span="6">
-									<view class="midContent">
-										班级：第二班
-									</view>
-								</u-col>
-							</u-row>
-							<u-row>
-								<u-col span="12">
-									<view class="midContent">
-										时间：2024-08-15 11:59:12
-									</view>
-								</u-col>
-							</u-row>
-						</view>
-						<view class="btoCard">
-							<view class="leftBox btoBox" @click="toDetail(item)">
-								<image src="@/static/image/earlyWarning/detail.png" mode=""></image>
+							<view class="secondCard">
+								<image style="width: 30rpx;height: 30rpx;"
+									src="@/static/image/earlyWarning/warnType.png" mode=""></image>
 								<view class="txt">
-									查看
+									警告类型：周界入侵
 								</view>
 							</view>
-							<view class="midBox btoBox" @click="toHandle(item)">
-								<image v-if="item.warnHand == 1" src="@/static/image/earlyWarning/handle.png" mode="">
-								</image>
-								<image v-if="item.warnHand == 0" src="@/static/image/earlyWarning/handleDisabled.png"
-									mode=""></image>
-								<view :class="[item.warnHand == 1?'txt':'disabled']">
-									处理
+							<view class="thirdCard">
+								<image style="width: 30rpx;height: 30rpx;"
+									src="@/static/image/earlyWarning/warnVideo.png" mode=""></image>
+								<view class="txt">
+									警告摄像头：厨房（良景）
 								</view>
 							</view>
-							<view class="rightBox btoBox" @click="deleteClick">
-								<image src="@/static/image/earlyWarning/delete.png" mode=""></image>
+
+						</view>
+						<view class="btoCard">
+							<view class="btoContent">
+								时间：2024-08-15 11:59:12
+							</view>
+							<view class="rightBox btoBox" @click="toDetail">
 								<view class="txt">
-									删除
+									查看
 								</view>
 							</view>
 						</view>
@@ -175,12 +164,6 @@
 				<u-loadmore :status="status" />
 			</u-list>
 		</view>
-		<u-modal :show="showDelete" :title="deleteTitle" :showCancelButton="true" @confirm="confirmDelete"
-			@cancel="cancelDelete">
-			<view class="slot-content">
-				<text style="text-align: center;">是否确定删除该预警吗?</text>
-			</view>
-		</u-modal>
 		<selectSearch ref="selectSearchBox" :cellVisible="false" :value.sync="searchForm.alarmType"
 			:options="[{value:1,label:'qinshi1'},{value:2,label:'qinshi2'}]" title="预警类型" search-place-holder="预警类型" />
 		<selectRadio ref="selectRadioBox" :cellVisible="false" :value.sync="searchForm.warnHand"
@@ -198,9 +181,6 @@
 		},
 		data() {
 			return {
-				showDelete: false,
-				deleteTitle: '提示',
-				deleteContent: '是否确定删除该预警吗?',
 				isShowSearch: false,
 				searchForm: {
 					alarmType: '警告类型',
@@ -309,24 +289,6 @@
 			this.loadmore()
 		},
 		methods: {
-			cancelDelete() {
-				this.showDelete = false;
-			},
-			deleteClick() {
-				this.showDelete = true;
-			},
-			confirmDelete() {
-				this.showDelete = false;
-			},
-			// 跳转处理页面
-			toHandle(row) {
-				if (row.warnHand == 1) {
-					uni.navigateTo({
-						url: '/pages/earlyWarning/handlingSuggestions'
-					});
-				}
-
-			},
 			// 跳转详情页面
 			toDetail(row) {
 				uni.navigateTo({
@@ -376,6 +338,8 @@
 	.warningInfo {
 		width: 100%;
 		height: 100%;
+		background: #F6F8FA;
+
 		.u-modal__title {
 			color: #000000;
 		}
@@ -394,6 +358,43 @@
 			box-sizing: border-box;
 			background: #fff;
 
+			.searchShow {
+				display: flex;
+				align-items: center;
+				font-size: 28rpx;
+				width: 100%;
+
+				.labels {
+					width: 90rpx;
+					display: block;
+					color: #333333;
+					margin-left: 10rpx;
+					flex-shrink: 1;
+				}
+
+				.values {
+					// width: calc(100% - 30rpx - 34rpx);
+					color: #2388FF;
+					font-weight: 700;
+					margin-left: 18rpx;
+					overflow: hidden;
+					word-wrap: break-word;
+					white-space: pre-wrap;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 1;
+				}
+
+				.arrow {
+					text-align: right;
+
+					image {
+						width: 34rpx;
+						height: 34rpx;
+					}
+				}
+			}
+
 			.leftSearchBox {
 				display: flex;
 				align-items: center;
@@ -425,14 +426,16 @@
 			z-index: 990;
 			top: 89rpx;
 			width: 100%;
-			height: calc(100vh - 375rpx - 100rpx);
+			height: calc(100vh - 375rpx - 60rpx);
 			font-size: 26rpx;
 			background: rgba(0, 0, 0, 0.2);
 
+
 			.content {
 				background: #FFFFFF;
 				padding: 15px;
 				box-sizing: border-box;
+				border-top: 1px solid rgba(0, 0, 0, 0.1);
 
 				.demo-layout {
 					height: 80rpx;
@@ -502,134 +505,118 @@
 		padding: 10px;
 		box-sizing: border-box;
 		// height: 600px;
-		padding-bottom: 50px;
+		padding-bottom: 30px;
 
 
 		.liBox {
 			background: #fff;
-			padding: 20px 15px;
+			padding: 0 26rpx;
 			box-sizing: border-box;
-			border-radius: 20px;
+			border-radius: 20rpx;
 			margin-bottom: 10px;
 
+			.headerCard {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 24rpx 0;
+
+				.schoolName {
+					font-size: 32rpx;
+					font-weight: 700;
+					color: #333333;
+					overflow: hidden;
+					word-wrap: break-word;
+					white-space: pre-wrap;
+					// font-size: 14px;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 1;
+				}
+
+				.statusBox {
+					width: 100rpx;
+					flex-shrink: 1;
+					text-align: center;
+					height: 50rpx;
+					line-height: 50rpx;
+					font-size: 26rpx;
+					border-radius: 8rpx;
+					color: #fff;
+				}
+
+				.handle {
+					background: rgba(15, 175, 118, 0.1);
+					color: #0FAF76;
+				}
+
+				.nohandle {
+					background: rgba(239, 45, 45, 0.1);
+					color: rgba(239, 45, 45, 1);
+				}
+			}
+
 			.topCard {
 				display: flex;
+				border-top: 1px solid rgba(0, 0, 0, 0.1);
+				align-items: center;
+				padding: 20rpx 0;
 
 				.pic {
 
 					image {
-						width: 160rpx;
-						height: 160rpx;
+						width: 120rpx;
+						height: 120rpx;
 						border-radius: 4px;
 					}
 				}
 
 				.rightCard {
 					margin-left: 20rpx;
-
-					.firstCard {
-						display: flex;
-						justify-content: space-between;
-						align-items: center;
-						margin-bottom: 20rpx;
-
-						.schoolName {
-							font-size: 32rpx;
-							font-weight: 700;
-							color: #333333;
-							overflow: hidden;
-							word-wrap: break-word;
-							white-space: pre-wrap;
-							// font-size: 14px;
-							display: -webkit-box;
-							-webkit-box-orient: vertical;
-							-webkit-line-clamp: 1;
-						}
-
-						.statusBox {
-							width: 140rpx;
-							flex-shrink: 1;
-							text-align: center;
-							height: 50rpx;
-							line-height: 50rpx;
-							font-size: 28rpx;
-							border-radius: 8rpx;
-							color: #fff;
-						}
-
-						.handle {
-							background: rgba(15, 175, 118, 0.1);
-							color: #0FAF76;
-						}
-
-						.nohandle {
-							background: rgba(239, 45, 45, 0.1);
-							color: rgba(239, 45, 45, 1);
-						}
-					}
-
-					.secondCard,
-					.thirdCard {
-						display: flex;
-						align-items: center;
-						margin-top: 18rpx;
-
-						.txt {
-							font-size: 28rpx;
-							margin-left: 10rpx;
-							color: #333333;
-						}
-					}
+					font-size: 28rpx;
+					width: calc(100% - 140rpx);
 				}
 			}
 
 			.midCard {
 				font-size: 28rpx;
 
-				.midContent {
+				.secondCard,
+				.thirdCard {
+					display: flex;
+					align-items: center;
+
+
+					.txt {
+						font-size: 26rpx;
+						margin-left: 10rpx;
+						color: #333333;
+					}
+				}
+
+				.thirdCard {
 					margin-top: 18rpx;
 				}
 			}
 
 			.btoCard {
 				border-top: 1px solid rgba(0, 0, 0, 0.1);
-				margin-top: 30rpx;
-				padding: 18px 0 0 0;
+				margin-top: 20rpx;
+				padding: 20rpx 0;
 				display: flex;
-				justify-content: center;
+				justify-content: space-between;
 				align-items: center;
+				font-size: 26rpx;
 
-				.btoBox {
-					width: 33.3%;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					position: relative;
-
-					image {
-						width: 40rpx;
-						height: 40rpx;
-						margin-right: 15rpx;
-					}
-				}
-
-				.btoBox:not(:last-child)::before {
-					content: '';
-					display: block;
-					width: 1px;
-					height: 100%;
-					background: rgba(0, 0, 0, 0.1);
-					position: absolute;
-					right: 0px;
-				}
-
-				.midBox {
+				.rightBox {
 					.txt {
-						color: #333333;
-					}
-
-					.disabled {
-						color: #777777;
+						width: 120rpx;
+						height: 60rpx;
+						line-height: 60rpx;
+						text-align: center;
+						background: #2388FF;
+						color: #fff;
+						border-radius: 80rpx;
 					}
 				}
 			}

monitorMobile/pages/earlyWarning/detail.vue

@@ -246,7 +246,11 @@
 		background: #fff;
 
 		.title {
+			color: #2388FF;
 			font-size: 30rpx;
+			height: 88rpx;
+			line-height: 88rpx;
+			background: rgba(35, 136, 255, 0.06);
 		}
 
 		.cli {

monitorMobile/pages/earlyWarning/handlingSuggestions.vue

@@ -63,6 +63,12 @@
 			background: #fff;
 			padding: 20rpx 30rpx;
 			box-sizing: border-box;
+			::v-deep .u-form-item__body__left__content__label{
+				margin-left: 8rpx!important;
+			}
+			::v-deep .u-form-item__body__right{
+				margin-top: 24rpx!important;
+			}
 		}
 		.btn {
 			width: 100%;
@@ -73,6 +79,11 @@
 			.u-button--primary {
 				background: #2388FF;
 			}
+			.u-button {
+				height:90rpx;
+				font-size: 32rpx;
+				font-weight: 700;
+			}
 		}
 	}
 </style>

monitorMobile/pages/earlyWarning/index.vue

@@ -2,23 +2,29 @@
 	<view class="warningBox">
 		<!-- 头部背景 -->
 		<view class="headerBox">
-			<image :src="modelObj.backgroundImg"></image>
-			<view class="selectModel" @click="showSelectModel = true">
+			<!-- <view class="">
+				<image src="@/static/image/earlyWarning/back.png" mode="aspectFill"></image>
+			</view> -->
+
+			<view class="logo">
+				<image src="@/static/image/earlyWarning/logo.png" mode="heightFix"></image>
+			</view>
+			<!-- <view class="selectModel" @click="showSelectModel = true">
 				<view class="modelName">
 					{{modelObj.name}}
 				</view>
 				<image src="@/static/image/earlyWarning/down.png"></image>
 			</view>
-			<u-popup :show="showSelectModel" @close="close" @open="open" mode="top">
+			<u-popup :show="showSelectModel" @close="close" @open="open" mode="bottom">
 				<view class="selectPopupBox">
 					<view class="modelLi" :class="item.id == isActive ? 'active' : ''" @click="modelChange(item)"
 						v-for="(item,i) in modelList">
 						{{item.name}}
 					</view>
 				</view>
-			</u-popup>
+			</u-popup> -->
 		</view>
-		<view class="contentBox">
+		<view class="contentBox" @touchmove.stop @touch.stop>
 			<warningInfo v-if="isActive == '1'"></warningInfo>
 			<inspectionCenter v-else></inspectionCenter>
 		</view>
@@ -30,7 +36,7 @@
 <script>
 	import warningInfo from "./components/warningInfo.vue"
 	import inspectionCenter from "./components/inspectionCenter.vue"
-	
+
 	export default {
 		components: {
 			warningInfo,
@@ -84,7 +90,7 @@
 				// 		break;
 				// }
 			},
-			
+
 		}
 	}
 </script>
@@ -94,50 +100,25 @@
 		height: 100%;
 
 		.headerBox {
-			height: 380rpx;
-			// background: url("@/static/image/earlyWarning/warnBack.png") no-repeat center center / cover;
+			height: 340rpx;
+			background: url("@/static/image/earlyWarning/back.png") no-repeat center center / cover;
+
 			position: relative;
 
 			image {
 				width: 100%;
 				height: 100%;
-			}
 
-			.selectModel {
-				position: absolute;
-				left: 60rpx;
-				top: 108rpx;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.modelName {
-					font-size: 34rpx;
-					color: #fff;
-					font-family: PingFang SC;
-					margin-right: 20rpx;
-				}
-
-				image {
-					width: 24rpx;
-					height: 12rpx;
-				}
 			}
 
-			.selectPopupBox {
-				padding: 0 10px;
-				box-sizing: border-box;
-
-				.modelLi {
-					height: 100rpx;
-					line-height: 100rpx;
-					text-align: center;
-					border-bottom: 1px solid #efecec;
+			.logo {
+				image {
+					height: 46rpx;
 				}
 
-				.active {
-					color: rgb(35, 136, 255);
-				}
+				position: absolute;
+				left: 36rpx;
+				top: 110rpx;
 			}
 		}
 

monitorMobile/pages/monitor/index.vue

@@ -0,0 +1,600 @@
+<template>
+	<view class="inspectionCenter">
+		<view class="searchBox">
+			<view class="searchLine">
+				<view class="leftSearchBox">
+					<view class="searchLabel">
+						筛选条件:
+					</view>
+					<view class="searchValue">
+
+					</view>
+				</view>
+				<view class="searchShow" @click="openSearch">
+					<image v-show="isShowSearch==false" style="width:20px;height:20px;"
+						src="@/static/image/earlyWarning/screen.png" mode="">
+					</image>
+					<image v-show="isShowSearch" style="width:20px;height:20px;"
+						src="@/static/image/earlyWarning/screenActive.png" mode="">
+					</image>
+				</view>
+			</view>
+			<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch">
+				<view class="content" @click.stop="isSelect">
+					<u-row justify="space-between" gutter="10">
+						<u-col span="7">
+							<view class="demo-layout" @click="toOpen">
+								<view class="left-layout">
+									<text>{{searchForm.alarmType}}</text>
+								</view>
+								<view class="right-layout">
+									<image style="width: 30rpx;height:30rpx;"
+										src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>
+								</view>
+							</view>
+
+							<!-- <jp-select-plus ref="selectPlus" :isShow="false" color="#2388FF" placeholder="请选择"
+									isSearch v-model="va3" :list="listc"></jp-select-plus> -->
+						</u-col>
+						<u-col span="5">
+							<view class="demo-layout" @click="toOpenSelect">
+								<view class="left-layout">
+									<text>{{searchForm.warnHand}}</text>
+								</view>
+								<view class="right-layout">
+									<image style="width: 30rpx;height:30rpx;"
+										src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>
+								</view>
+							</view>
+						</u-col>
+					</u-row>
+					<u-row style="margin-top:10px;" justify="space-between" gutter="10">
+						<u-col span="12">
+							<uni-datetime-picker v-model="searchForm.tick" type="datetimerange">
+								<view class="demo-layout">
+									<view class="startBox">
+										{{searchForm.StartTick}}
+									</view>
+									<text>至</text>
+									<view class="endBox">
+										{{searchForm.EndTick}}
+									</view>
+									<view class="timeIcon">
+										<image style="width: 30rpx;height:30rpx;"
+											src="@/static/image/earlyWarning/calendar.png" mode=""></image>
+									</view>
+								</view>
+							</uni-datetime-picker>
+
+						</u-col>
+					</u-row>
+					<view class="btnBox">
+						<view class="leftBtn">
+							重置
+						</view>
+						<view class="rightBtn">
+							确认
+						</view>
+					</view>
+				</view>
+			</view>
+
+		</view>
+		<view class="tableBox">
+			<u-empty marginTop="100rpx" :show="false" mode="warnList" text="暂无数据"></u-empty>
+			<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
+				<u-list-item v-for="(item, index) in warnList" :key="index">
+					<view class="liBox">
+						<view class="topCard">
+							<view class="pic">
+								<image src="@/static/image/earlyWarning/warnBack.png" mode="aspectFill"></image>
+								<view class="resolvingPower">
+									2560*1440
+								</view>
+							</view>
+							<view class="rightCard">
+								<view class="firstCard">
+									<view class="schoolName">
+										摄像头ID：SXT001
+									</view>
+								</view>
+								<view class="secondCard">
+
+									<view class="txt">
+										摄像头名称：厨房（良景）
+									</view>
+								</view>
+								<view class="thirdCard">
+
+									<view class="txt">
+										设备IP：192.168.10.130
+									</view>
+								</view>
+							</view>
+						</view>
+
+						<view class="btoCard">
+							<view class="leftBox btoBox">
+								<image src="@/static/image/earlyWarning/school.png" mode=""></image>
+								<view class="txt">
+									所属学校：演示学校
+								</view>
+							</view>
+							<view class="rightBox btoBox" @click="deleteClick">
+								<view class="txt">
+									播放
+								</view>
+							</view>
+						</view>
+					</view>
+				</u-list-item>
+				<u-loadmore :status="status" />
+			</u-list>
+		</view>
+		<u-modal :show="showDelete" :title="deleteTitle" :showCancelButton="true" @confirm="confirmDelete"
+			@cancel="cancelDelete">
+			<view class="slot-content">
+				<text style="text-align: center;">是否确定删除该预警吗?</text>
+			</view>
+		</u-modal>
+		<selectSearch ref="selectSearchBox" :cellVisible="false" :value.sync="searchForm.alarmType"
+			:options="[{value:1,label:'qinshi1'},{value:2,label:'qinshi2'}]" title="预警类型" search-place-holder="预警类型" />
+		<selectRadio ref="selectRadioBox" :cellVisible="false" :value.sync="searchForm.warnHand"
+			:options="[{value:1,label:'loudong1'},{value:2,label:'loudong2'}]" title="楼栋" />
+	</view>
+</template>
+
+<script>
+	import selectRadio from "@/components/selectRadio.vue"
+	import selectSearch from "@/components/selectSearch.vue"
+	export default {
+		components: {
+			selectRadio,
+			selectSearch,
+
+		},
+		data() {
+			return {
+				showDelete: false,
+				deleteTitle: '提示',
+				deleteContent: '是否确定删除该预警吗?',
+				isShowSearch: false,
+				searchForm: {
+					alarmType: '警告类型',
+					warnHand: '处理状态',
+					tick: [],
+					StartTick: '开始时间',
+					EndTick: '结束时间',
+				},
+				warnList: [{
+					warnHand: 1
+				}, {
+					warnHand: 0
+				}, {
+					warnHand: 1
+				}, {
+					warnHand: 1
+				}, {
+					warnHand: 1
+				}, {}, {}, {}, {}, ],
+				isLoading: false,
+				status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
+				listc: [{
+						code: 1,
+						name: 'dasda'
+					}, {
+						code: 2,
+						name: 'dasda'
+					},
+					{
+						code: 3,
+						name: 'dasda'
+					},
+					{
+						code: 4,
+						name: 'dasda'
+					},
+					{
+						code: 5,
+						name: 'dasda'
+					},
+					{
+						code: 6,
+						name: 'dasda'
+					},
+					{
+						code: 7,
+						name: 'dasda'
+					},
+					{
+						code: 8,
+						name: 'dasda'
+					},
+					{
+						code: 9,
+						name: 'dasda'
+					},
+					{
+						code: 10,
+						name: 'dasda'
+					},
+					{
+						code: 11,
+						name: 'dasda'
+					},
+					{
+						code: 12,
+						name: 'dasda'
+					},
+					{
+						code: 13,
+						name: '你好'
+					}
+				]
+			}
+		},
+		watch: {
+			"searchForm.tick"() {
+				console.log('日期时间:', this.searchForm.tick);
+
+				if (this.searchForm.tick && this.searchForm.tick.length > 0) {
+					this.searchForm.StartTick = this.searchForm.tick[0]
+					this.searchForm.EndTick = this.searchForm.tick[1]
+				}
+
+			},
+		},
+		filters: {
+			// statusChange(val) {
+			// 	switch (val) {
+			// 		case 'todo':
+			// 			return '我的待办'
+			// 			break;
+			// 		case 'send':
+			// 			return '由我发起'
+			// 			break;
+			// 		case 'done':
+			// 			return '我的已办'
+			// 			break;
+			// 		default:
+
+			// 	}
+			// },
+		},
+		onLoad() {
+			// 隐藏导航栏
+			this.loadmore()
+		},
+		methods: {
+			cancelDelete() {
+				this.showDelete = false;
+			},
+			deleteClick() {
+				this.showDelete = true;
+			},
+			confirmDelete() {
+				this.showDelete = false;
+			},
+			// 跳转处理页面
+			toHandle(row) {
+				if (row.warnHand == 1) {
+					uni.navigateTo({
+						url: '/pages/earlyWarning/handlingSuggestions'
+					});
+				}
+
+			},
+			// 跳转详情页面
+			toDetail(row) {
+				uni.navigateTo({
+					url: '/pages/earlyWarning/detail'
+				});
+			},
+			// 预警类型弹框筛选
+			toOpen() {
+				this.$refs.selectSearchBox.show = true;
+			},
+			// 处理情况筛选
+			toOpenSelect() {
+				this.$refs.selectRadioBox.show = true;
+			},
+			// 打开筛选框
+			openSearch() {
+				this.isShowSearch = !this.isShowSearch;
+			},
+			isSelect() {
+
+			},
+			scrolltolower() {
+				this.loadmore()
+			},
+			loadmore() {
+				if (this.status != 'loadmore') return
+				this.status = 'loading'
+				setTimeout(() => {
+					for (let i = 0; i < 1; i++) {
+						this.warnList.push({}, {})
+					}
+					// 获取到的总条数>=接口总条数
+					if (this.warnList.length >= 14) {
+						this.status = 'nomore'
+					} else {
+						this.status = 'loadmore'
+					}
+				}, 2000)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	// .contentBox {
+	// 	height: calc(100% - 375rpx);
+	.inspectionCenter {
+		width: 100%;
+		height: 100%;
+
+		.u-modal__title {
+			color: #000000;
+		}
+	}
+
+	.searchBox {
+		// height: calc(100% - 360rpx);
+		position: relative;
+
+		.searchLine {
+			height: 88rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 15px;
+			box-sizing: border-box;
+			background: #fff;
+
+			.leftSearchBox {
+				display: flex;
+				align-items: center;
+				width: calc(100% - 40px);
+
+				.searchLabel {
+					flex-shrink: 1;
+					color: #333333;
+					width: 80px;
+				}
+
+				.searchValue {
+					width: calc(100% - 60px);
+					margin-left: 10px;
+					color: #2388FF;
+					overflow: hidden;
+					word-wrap: break-word;
+					white-space: pre-wrap;
+					// font-size: 14px;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 1;
+				}
+			}
+		}
+
+		.searchDialog {
+			position: absolute;
+			z-index: 990;
+			top: 89rpx;
+			width: 100%;
+			height: calc(100vh - 375rpx - 100rpx);
+			font-size: 26rpx;
+			background: rgba(0, 0, 0, 0.2);
+
+			.content {
+				background: #FFFFFF;
+				padding: 15px;
+				box-sizing: border-box;
+
+				.demo-layout {
+					height: 80rpx;
+					border-radius: 8rpx;
+					background: #F5F5F5;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 0 10px;
+					box-sizing: border-box;
+
+					.left-layout {
+						color: #777777;
+					}
+
+					.right-layout {}
+
+					.startBox {
+						color: #777777;
+					}
+
+					text {
+						color: #777777;
+					}
+
+					.endBox {
+						color: #777777;
+					}
+
+					.timeIcon {}
+				}
+			}
+
+			.btnBox {
+				display: flex;
+				align-items: center;
+				margin-top: 15px;
+
+				.leftBtn {
+					width: 50%;
+					height: 74rpx;
+					line-height: 74rpx;
+					border: 1px solid #BABABA;
+					border-radius: 12rpx;
+					color: #333333;
+					text-align: center;
+
+				}
+
+				.rightBtn {
+					width: 50%;
+					height: 74rpx;
+					line-height: 74rpx;
+					border: 1px solid #2388FF;
+					border-radius: 12rpx;
+					color: #fff;
+					text-align: center;
+					background: #2388FF;
+					margin-left: 15rpx;
+				}
+			}
+		}
+	}
+
+	.tableBox {
+		height: 100%;
+		padding: 10px;
+		box-sizing: border-box;
+		// height: 600px;
+		padding-bottom: 30px;
+
+
+		.liBox {
+			background: #fff;
+			padding: 20px 15px;
+			box-sizing: border-box;
+			border-radius: 20px;
+			margin-bottom: 10px;
+
+			.topCard {
+				display: flex;
+
+				.pic {
+					position: relative;
+
+					image {
+						width: 310rpx;
+						height: 220rpx;
+						border-radius: 4px;
+					}
+
+					.resolvingPower {
+						position: absolute;
+						top: 15rpx;
+						right: 15rpx;
+						background: #000000;
+						color: #fff;
+						padding: 8rpx;
+						box-sizing: border-box;
+						font-size: 20rpx;
+						border-radius: 4rpx;
+					}
+				}
+
+				.rightCard {
+					margin-left: 20rpx;
+					margin-top: 15rpx;
+
+					.firstCard {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-bottom: 60rpx;
+
+						.schoolName {
+							font-size: 32rpx;
+							font-weight: 700;
+							color: #333333;
+							overflow: hidden;
+							word-wrap: break-word;
+							white-space: pre-wrap;
+							// font-size: 14px;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							-webkit-line-clamp: 1;
+						}
+
+						.statusBox {
+							width: 140rpx;
+							flex-shrink: 1;
+							text-align: center;
+							height: 50rpx;
+							line-height: 50rpx;
+							font-size: 28rpx;
+							border-radius: 8rpx;
+							color: #fff;
+						}
+
+						.handle {
+							background: rgba(15, 175, 118, 0.1);
+							color: #0FAF76;
+						}
+
+						.nohandle {
+							background: rgba(239, 45, 45, 0.1);
+							color: rgba(239, 45, 45, 1);
+						}
+					}
+
+					.secondCard,
+					.thirdCard {
+						display: flex;
+						align-items: center;
+						margin-top: 18rpx;
+
+						.txt {
+							font-size: 26rpx;
+							color: #333333;
+						}
+					}
+				}
+			}
+
+			.midCard {
+				font-size: 28rpx;
+
+				.midContent {
+					margin-top: 18rpx;
+				}
+			}
+
+			.btoCard {
+				border-top: 1px solid rgba(0, 0, 0, 0.1);
+				margin-top: 30rpx;
+				padding: 18px 0 0 0;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.btoBox {
+					// width: 33.3%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					position: relative;
+
+					image {
+						width: 40rpx;
+						height: 40rpx;
+						margin-right: 15rpx;
+					}
+				}
+
+				.rightBox {
+					width: 180rpx;
+					height: 74rpx;
+					background: #2388FF;
+					color: #fff;
+					border-radius: 80rpx;
+				}
+			}
+		}
+
+	}
+
+	// }
+</style>