bjquanjiang
/
pinganxiaoyuan
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
平安校园
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
273 Revize
1 Větev
127 MiB
 
 
 
 
 
 
Strom: 58f135e58c
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „58f135e58c“
${ noResults }
pinganxiaoyuan/monitorMobile/pages/earlyWarning/index.vue

789 řádky
19 KiB
Surový Blame Historie 

  1. <template>

  2. 	<view class="warningBox">

  3. 		<!-- 头部背景 -->

  4. 		<view class="headerBox">

  5. 			<!-- <view class="">

  6. 				<image src="@/static/image/earlyWarning/back.png" mode="aspectFill"></image>

  7. 			</view> -->

  8. 

  9. 			<view class="logo">

  10. 				<image :src="logo" mode="heightFix"></image>

  11. 			</view>

  12. 			<view class="logoTitle">

  13. 				{{title}}

  14. 			</view>

  15. 		</view>

  16. 		<view class="contentBox">

  17. 			<view class="warningInfo">

  18. 				<view class="searchBox">

  19. 					<view class="searchLine" @click="openSearch">

  20. 						<view class="searchLabels">

  21. 							<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/screen.png" mode="">

  22. 							</image>

  23. 							<image v-show="isShowSearch" src="@/static/image/earlyWarning/screenActive.png" mode="">

  24. 							</image>

  25. 							<text class="labels">筛选</text>

  26. 							<view class="values">{{searchValue}}</view>

  27. 						</view>

  28. 

  29. 						<view class="arrow">

  30. 							<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode="">

  31. 							</image>

  32. 							<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image>

  33. 						</view>

  34. 					</view>

  35. 					<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch">

  36. 						<view class="content" @click.stop="isSelect">

  37. 							<u-row justify="space-between" gutter="10">

  38. 								<u-col span="7">

  39. 									<view class="demo-layout" @click="toOpen">

  40. 										<view class="left-layout">

  41. 											<text>{{searchForm.$alarmType || '预警类型'}}</text>

  42. 										</view>

  43. 										<view class="right-layout">

  44. 											<image style="width: 30rpx;height:30rpx;"

  45. 												src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>

  46. 										</view>

  47. 									</view>

  48. 								</u-col>

  49. 								<u-col span="5">

  50. 									<view class="demo-layout" @click="toOpenSelect">

  51. 										<view class="left-layout">

  52. 											<text>{{searchForm.$warnHand || '处理状态'}}</text>

  53. 										</view>

  54. 										<view class="right-layout">

  55. 											<image style="width: 30rpx;height:30rpx;"

  56. 												src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>

  57. 										</view>

  58. 									</view>

  59. 								</u-col>

  60. 							</u-row>

  61. 							<u-row style="margin-top:10px;" justify="space-between" gutter="10">

  62. 								<u-col span="12">

  63. 									<view class="demo-layout" @click="toOpenmanjor">

  64. 										<view class="left-layout">

  65. 											<text>{{searchForm.$cameraId || '预警摄像头'}}</text>

  66. 										</view>

  67. 										<view class="right-layout">

  68. 											<image style="width: 30rpx;height:30rpx;"

  69. 												src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>

  70. 										</view>

  71. 									</view>

  72. 								</u-col>

  73. 							</u-row>

  74. 							<u-row style="margin-top:10px;" justify="space-between" gutter="10">

  75. 								<u-col span="12">

  76. 									<uni-datetime-picker v-model="searchForm.tick" type="datetimerange">

  77. 										<view class="demo-layout">

  78. 											<view class="startBox">

  79. 												{{searchForm.StartTick || '开始时间'}}

  80. 											</view>

  81. 											<text>至</text>

  82. 											<view class="endBox">

  83. 												{{searchForm.EndTick || '结束时间'}}

  84. 											</view>

  85. 											<view class="timeIcon">

  86. 												<image style="width: 30rpx;height:30rpx;"

  87. 													src="@/static/image/earlyWarning/calendar.png" mode=""></image>

  88. 											</view>

  89. 										</view>

  90. 									</uni-datetime-picker>

  91. 

  92. 								</u-col>

  93. 							</u-row>

  94. 							<view class="btnBox">

  95. 								<view class="leftBtn" @click="clearform">

  96. 									重置

  97. 								</view>

  98. 								<view class="rightBtn" @click="onsubmit">

  99. 									确认

  100. 								</view>

  101. 							</view>

  102. 						</view>

  103. 					</view>

  104. 

  105. 				</view>

  106. 				<view class="tableBox">

  107. 					<u-empty marginTop="100rpx" :show="warnList.length == 0&&status == 'nomore'" mode="list"

  108. 						text="暂无数据"></u-empty>

  109. 					<!-- <u-pull-refresh :refreshing="refreshing" @refresh="onRefresh"> -->

  110. 					<!-- <scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true"

  111. 						@refresher-pull="onRefresh" @refresher-refresh="doRefresh" @refresher-restore="restore"

  112. 						@refresher-abort="abort"> -->

  113. 					<u-list :loading="isLoading" refresher-enabled :refresher-triggered="isTriggered"

  114. 						@refresher-pull="onRefresh" @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">

  115. 						<u-list-item v-for="(item, index) in warnList" :key="index">

  116. 							<view class="liBox">

  117. 								<view class="headerCard">

  118. 									<view class="schoolName">

  119. 										{{item.sceneName || '--'}}

  120. 									</view>

  121. 									<view class="statusBox" :class="[item.warnHand == 1?'handle':'nohandle']">

  122. 										{{item.warnHand == 1 ? '已处理' : '未处理'}}

  123. 									</view>

  124. 								</view>

  125. 								<view class="topCard">

  126. 									<view class="pic">

  127. 										<image :src="item.snapshotUrl" mode="aspectFill"

  128. 											@click="previewImage(item.snapshotUrl,index)"></image>

  129. 									</view>

  130. 									<view class="rightCard">

  131. 										<u-row>

  132. 											<u-col span="6">

  133. 												<view class="midContent">

  134. 													姓名：--

  135. 												</view>

  136. 											</u-col>

  137. 											<u-col span="6">

  138. 												<view class="midContent">

  139. 													系部：--

  140. 												</view>

  141. 											</u-col>

  142. 										</u-row>

  143. 										<u-row style="margin-top: 20rpx;">

  144. 											<u-col span="6">

  145. 												<view class="midContent">

  146. 													专业：--

  147. 												</view>

  148. 											</u-col>

  149. 											<u-col span="6">

  150. 												<view class="midContent">

  151. 													班级：{{item.personSetName || '--'}}

  152. 												</view>

  153. 											</u-col>

  154. 										</u-row>

  155. 

  156. 									</view>

  157. 								</view>

  158. 								<view class="midCard">

  159. 									<view class="secondCard">

  160. 										<image style="width: 30rpx;height: 30rpx;"

  161. 											src="@/static/image/earlyWarning/warnType.png" mode=""></image>

  162. 										<view class="txt">

  163. 											预警类型：{{item.alarmTypeDesc || '--'}}

  164. 										</view>

  165. 									</view>

  166. 									<view class="thirdCard">

  167. 										<image style="width: 30rpx;height: 30rpx;"

  168. 											src="@/static/image/earlyWarning/warnVideo.png" mode=""></image>

  169. 										<view class="txt">

  170. 											预警摄像头：{{item.cameraName || '--'}}

  171. 										</view>

  172. 									</view>

  173. 

  174. 								</view>

  175. 								<view class="btoCard">

  176. 									<view class="btoContent">

  177. 										时间：{{item.tick}}

  178. 									</view>

  179. 									<view class="rightBox btoBox" @click="toDetail(item)">

  180. 										<view class="txt">

  181. 											查看

  182. 										</view>

  183. 									</view>

  184. 								</view>

  185. 							</view>

  186. 						</u-list-item>

  187. 						<u-loadmore :status="status" />

  188. 					</u-list>

  189. 					<!-- </scroll-view> -->

  190. 					<!-- </u-pull-refresh> -->

  191. 				</view>

  192. 				<selectSearch ref="selectSearchBox" :cellVisible="false" v-model="searchForm.alarmType"

  193. 					:options="warnOption" :title.sync="searchForm.$alarmType" placeholder="预警类型"

  194. 					search-placeholder="预警类型" />

  195. 				<selectSearch ref="selectmanjorBox" :cellVisible="false" v-model="searchForm.cameraId"

  196. 					:options="[{value:'',label:'全部'},...allOptions.monitorList]" :title.sync="searchForm.$cameraId" placeholder="预警摄像头"

  197. 					search-placeholder="预警摄像头" />

  198. 				<selectRadio ref="selectRadioBox" :cellVisible="false" v-model="searchForm.warnHand"

  199. 					:options="handOption" :title.sync="searchForm.$warnHand" placeholder="处理状态" />

  200. 			</view>

  201. 		</view>

  202. 	</view>

  203. </template>

  204. 

  205. <script>

  206. 	import selectRadio from "@/components/selectRadio.vue"

  207. 	import selectSearch from "@/components/selectSearch.vue"

  208. 	import {

  209. 		page, //获取列表

  210. 		warnType, //获取预警类型

  211. 	} from '@/api/warn/index.js'

  212. 	export default {

  213. 		components: {

  214. 			selectRadio,

  215. 			selectSearch

  216. 		},

  217. 		data() {

  218. 			return {

  219. 				title: '',

  220. 				logo: '',

  221. 				searchValue: '全部',

  222. 				isShowSearch: false,

  223. 				isTriggered: true,

  224. 				searchForm: {

  225. 					alarmType: '',

  226. 					$alarmType: '全部',

  227. 					warnHand: '',

  228. 					$warnHand: '',

  229. 					cameraId: '',

  230. 					$cameraId: '',

  231. 					tick: [],

  232. 					StartTick: '',

  233. 					EndTick: '',

  234. 					pageNum: 1,

  235. 					pageSize: 10

  236. 				},

  237. 				warnOption: [{

  238. 					label: '全部',

  239. 					value: ''

  240. 				}],

  241. 				creamaData: [],

  242. 				handOption: [{

  243. 						label: '已处理',

  244. 						value: 1

  245. 					},

  246. 					{

  247. 						label: '未处理',

  248. 						value: 0

  249. 					},

  250. 				],

  251. 				warnList: [],

  252. 				isLoading: false,

  253. 				finished: false,

  254. 				refreshing: false,

  255. 				status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了

  256. 			}

  257. 		},

  258. 		watch: {

  259. 			"searchForm.tick"() {

  260. 				console.log('日期时间:', this.searchForm.tick);

  261. 

  262. 				if (this.searchForm.tick && this.searchForm.tick.length > 0) {

  263. 					this.searchForm.StartTick = this.searchForm.tick[0]

  264. 					this.searchForm.EndTick = this.searchForm.tick[1]

  265. 				}

  266. 

  267. 			},

  268. 		},

  269. 		onLoad() {

  270. 			// console.log(this.sysInfo,111)

  271. 			// 获取logo和平台名称

  272. 			const sysInfo = uni.getStorageSync('sysInfo');

  273. 			let titleObj = sysInfo.find(e=>e.configKey == 'SYS_NAME')

  274. 			if(titleObj)this.title = titleObj.configValue

  275. 			let logoObj = sysInfo.find(e=>e.configKey == 'SYS_LOGO')

  276. 			if(logoObj)this.logo = logoObj.configValue

  277. 			// 获取预警类型

  278. 			this.getWarnTypeList()

  279. 			// 隐藏导航栏

  280. 			this.loadmore()

  281. 		},

  282. 		onPullDownRefresh() {

  283. 			uni.stopPullDownRefresh()

  284. 			this.status = 'loadmore'

  285. 			this.searchForm.pageNum = 1;

  286. 			this.warnList = []

  287. 			this.loadmore()

  288. 		},

  289. 		methods: {

  290. 			selectChange(e) {

  291. 				console.log(e, 2323)

  292. 			},

  293. 			// 预览图片

  294. 			previewImage(url, index) {

  295. 				// 使用uni.previewImage API 进行图片预览

  296. 				uni.previewImage({

  297. 					current: index, // 当前显示图片索引

  298. 					urls: [url] // 需要预览的图片链接列表

  299. 				});

  300. 			},

  301. 			clearform() {

  302. 				this.searchForm = {

  303. 					alarmType: '',

  304. 					$alarmType: '全部',

  305. 					warnHand: '',

  306. 					$warnHand: '',

  307. 					cameraId: '',

  308. 					$cameraId: '',

  309. 					tick: [],

  310. 					StartTick: '',

  311. 					EndTick: '',

  312. 					pageNum: 1,

  313. 					pageSize: 10

  314. 				}

  315. 				// this.isShowSearch = false;

  316. 			},

  317. 			onsubmit() {

  318. 				let arr = []

  319. 				for (let key in this.searchForm) {

  320. 					if (['$alarmType','$cameraId', '$warnHand', 'StartTick', 'EndTick'].includes(key)) {

  321. 						if (Object.hasOwnProperty.call(this.searchForm, key) && this.searchForm[key]) {

  322. 							arr.push(this.searchForm[key])

  323. 						}

  324. 					}

  325. 				}

  326. 				this.searchValue = arr.join('，');

  327. 				this.isShowSearch = false;

  328. 				this.status = 'loadmore'

  329. 				this.searchForm.pageNum = 1;

  330. 				this.warnList = []

  331. 				this.loadmore()

  332. 			},

  333. 			// 获取预警类型

  334. 			getWarnTypeList() {

  335. 				warnType({}).then(res => {

  336. 					let {

  337. 						code,

  338. 						data

  339. 					} = res;

  340. 

  341. 					if (code == 200) {

  342. 						let arr = data.map(item => {

  343. 							return {

  344. 								label: item.name,

  345. 								value: item.code

  346. 							};

  347. 						})

  348. 						this.warnOption = [...this.warnOption, ...arr]

  349. 						// this.warnOption.unshift({

  350. 						// 	label: '全部',

  351. 						// 	value: ''

  352. 						// })

  353. 					}

  354. 				});

  355. 

  356. 

  357. 			},

  358. 			// 获取摄像头

  359. 			// creamaData

  360. 			// 跳转详情页面

  361. 			toDetail(row) {

  362. 				uni.navigateTo({

  363. 					url: '/pages/earlyWarning/detail?id=' + row.id

  364. 				});

  365. 			},

  366. 			// 预警类型弹框筛选

  367. 			toOpen() {

  368. 				this.$refs.selectSearchBox.show = true;

  369. 			},

  370. 			// 预警摄像头弹框筛选

  371. 			toOpenmanjor() {

  372. 				this.$refs.selectmanjorBox.show = true;

  373. 			},

  374. 			// 处理情况筛选

  375. 			toOpenSelect() {

  376. 				this.$refs.selectRadioBox.show = true;

  377. 			},

  378. 			// 打开筛选框

  379. 			openSearch() {

  380. 				this.isShowSearch = !this.isShowSearch;

  381. 			},

  382. 			isSelect() {

  383. 

  384. 			},

  385. 			scrolltolower() {

  386. 				if (this.status == 'loading' || this.status == 'nomore') {

  387. 					return;

  388. 				}

  389. 				this.searchForm.pageNum += 1;

  390. 				this.loadmore()

  391. 			},

  392. 			loadmore() {

  393. 				if (this.status != 'loadmore') return

  394. 				this.status = 'loading'

  395. 				this.isLoading = true;

  396. 				delete this.searchForm.tick

  397. 				page(this.searchForm).then(res => {

  398. 					if (res?.code === 200) {

  399. 						this.warnList = [...this.warnList, ...res?.data?.list];

  400. 						this.isLoading = false;

  401. 						// 获取到的总条数>=接口总条数

  402. 						if (this.warnList.length >= res.data.total) {

  403. 							this.status = 'nomore'

  404. 						} else {

  405. 							this.status = 'loadmore'

  406. 						}

  407. 					}

  408. 

  409. 				})

  410. 			}

  411. 		}

  412. 	}

  413. </script>

  414. 

  415. <style lang="scss" scoped>

  416. 	.warningBox {

  417. 		height: 100%;

  418. 

  419. 		.headerBox {

  420. 			/*#ifdef H5*/

  421. 			height: 272rpx;

  422. 			background: url("@/static/image/earlyWarning/logoBack.png") no-repeat center center / cover;

  423. 

  424. 			/*#endif*/

  425. 			/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/

  426. 			height: 340rpx;

  427. 			background: url("@/static/image/earlyWarning/back.png") no-repeat center center / cover;

  428. 			/*#endif*/

  429. 			position: relative;

  430. 

  431. 			image {

  432. 				width: 100%;

  433. 				height: 100%;

  434. 

  435. 			}

  436. 

  437. 			.logo {

  438. 

  439. 

  440. 				image {

  441. 					height: 46rpx;

  442. 				}

  443. 

  444. 

  445. 

  446. 				image {

  447. 					height: 46rpx;

  448. 				}

  449. 

  450. 				position: absolute;

  451. 				left: 36rpx;

  452. 				/*#ifdef H5*/

  453. 				top: 55rpx;

  454. 				/*#endif*/

  455. 				/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/

  456. 				top: 110rpx;

  457. 				/*#endif*/

  458. 			}

  459. 			.logoTitle {

  460. 				position: absolute;

  461. 				left: 36rpx;

  462. 				/*#ifdef H5*/

  463. 				top: 150rpx;

  464. 				/*#endif*/

  465. 				/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/

  466. 				top: 170rpx;

  467. 				/*#endif*/

  468. 				font-family: 'Alimama ShuHeiTi';

  469. 				font-weight: 700;

  470. 				color: #2388FF;

  471. 				font-size: 50rpx;

  472. 				letter-spacing: 6%;

  473. 				text-shadow: #fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0, #fff 0 -1px 0;

  474. 			}

  475. 		}

  476. 

  477. 		.contentBox {

  478. 			/*#ifdef H5*/

  479. 			height: calc(100% - 303rpx);

  480. 			/*#endif*/

  481. 			/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/

  482. 			height: calc(100% - 375rpx);

  483. 

  484. 			/*#endif*/

  485. 			.warningInfo {

  486. 				width: 100%;

  487. 				height: 100%;

  488. 				background: #F6F8FA;

  489. 

  490. 				.u-modal__title {

  491. 					color: #000000;

  492. 				}

  493. 			}

  494. 

  495. 			.searchBox {

  496. 				// height: calc(100% - 360rpx);

  497. 				position: relative;

  498. 

  499. 				.searchLine {

  500. 					height: 88rpx;

  501. 					display: flex;

  502. 					align-items: center;

  503. 					justify-content: space-between;

  504. 					padding: 0 15px;

  505. 					box-sizing: border-box;

  506. 					background: #fff;

  507. 					font-size: 28rpx;

  508. 

  509. 					.searchLabels {

  510. 						display: flex;

  511. 						align-items: center;

  512. 						width: calc(100% - 34rpx);

  513. 

  514. 						image {

  515. 							width: 40rpx;

  516. 							height: 40rpx;

  517. 							flex-shrink: 1;

  518. 						}

  519. 

  520. 						.labels {

  521. 							width: 70rpx;

  522. 							display: block;

  523. 							color: #333333;

  524. 							margin-left: 10rpx;

  525. 							flex-shrink: 1;

  526. 						}

  527. 

  528. 						.values {

  529. 							width: calc(100% - 40rpx - 50rpx);

  530. 							color: #2388FF;

  531. 							font-weight: 700;

  532. 							margin-left: 18rpx;

  533. 							overflow: hidden;

  534. 							word-wrap: break-word;

  535. 							white-space: pre-wrap;

  536. 							display: -webkit-box;

  537. 							-webkit-box-orient: vertical;

  538. 							-webkit-line-clamp: 1;

  539. 						}

  540. 					}

  541. 

  542. 

  543. 					.arrow {

  544. 						// text-align: right;

  545. 						// flex-shrink: 1;

  546. 

  547. 						image {

  548. 							width: 34rpx;

  549. 							height: 34rpx;

  550. 						}

  551. 					}

  552. 

  553. 					.leftSearchBox {

  554. 						display: flex;

  555. 						align-items: center;

  556. 						width: calc(100% - 40px);

  557. 

  558. 						.searchLabel {

  559. 							flex-shrink: 1;

  560. 							color: #333333;

  561. 							width: 80px;

  562. 						}

  563. 

  564. 						.searchValue {

  565. 							width: calc(100% - 60px);

  566. 							margin-left: 10px;

  567. 							color: #2388FF;

  568. 							overflow: hidden;

  569. 							word-wrap: break-word;

  570. 							white-space: pre-wrap;

  571. 							display: -webkit-box;

  572. 							-webkit-box-orient: vertical;

  573. 							-webkit-line-clamp: 1;

  574. 						}

  575. 					}

  576. 				}

  577. 

  578. 				.searchDialog {

  579. 					position: absolute;

  580. 					z-index: 990;

  581. 					top: 89rpx;

  582. 					width: 100%;

  583. 					height: calc(100vh - 375rpx - 60rpx);

  584. 					font-size: 26rpx;

  585. 					background: rgba(0, 0, 0, 0.2);

  586. 

  587. 					.content {

  588. 						background: #FFFFFF;

  589. 						padding: 15px;

  590. 						box-sizing: border-box;

  591. 						border-top: 1px solid rgba(0, 0, 0, 0.1);

  592. 

  593. 						.demo-layout {

  594. 							height: 80rpx;

  595. 							border-radius: 8rpx;

  596. 							background: #F5F5F5;

  597. 							display: flex;

  598. 							justify-content: space-between;

  599. 							align-items: center;

  600. 							padding: 0 10px;

  601. 							box-sizing: border-box;

  602. 

  603. 							.left-layout {

  604. 								color: #777777;

  605. 							}

  606. 

  607. 							.right-layout {}

  608. 

  609. 							.startBox {

  610. 								color: #777777;

  611. 							}

  612. 

  613. 							text {

  614. 								color: #777777;

  615. 							}

  616. 

  617. 							.endBox {

  618. 								color: #777777;

  619. 							}

  620. 

  621. 							.timeIcon {}

  622. 						}

  623. 					}

  624. 

  625. 					.btnBox {

  626. 						display: flex;

  627. 						align-items: center;

  628. 						margin-top: 15px;

  629. 

  630. 						.leftBtn {

  631. 							width: 50%;

  632. 							height: 74rpx;

  633. 							line-height: 74rpx;

  634. 							border: 1px solid #ccc;

  635. 							border-radius: 12rpx;

  636. 							color: #333333;

  637. 							text-align: center;

  638. 

  639. 						}

  640. 

  641. 						.rightBtn {

  642. 							width: 50%;

  643. 							height: 74rpx;

  644. 							line-height: 74rpx;

  645. 							border: 1px solid #2388FF;

  646. 							border-radius: 12rpx;

  647. 							color: #fff;

  648. 							text-align: center;

  649. 							background: #2388FF;

  650. 							margin-left: 15rpx;

  651. 						}

  652. 					}

  653. 				}

  654. 			}

  655. 

  656. 			.tableBox {

  657. 				height: 100%;

  658. 				padding: 30rpx;

  659. 				box-sizing: border-box;

  660. 				// height: 600px;

  661. 				padding-bottom: 30px;

  662. 

  663. 

  664. 				.liBox {

  665. 					background: #fff;

  666. 					padding: 0 30rpx;

  667. 					box-sizing: border-box;

  668. 					border-radius: 20rpx;

  669. 					margin-bottom: 30rpx;

  670. 					font-family: 'PingFang SC';

  671. 

  672. 					.headerCard {

  673. 						display: flex;

  674. 						justify-content: space-between;

  675. 						align-items: center;

  676. 						padding: 24rpx 0;

  677. 

  678. 						.schoolName {

  679. 							font-size: 32rpx;

  680. 							font-weight: 700;

  681. 							font-family: 'PingFang SC';

  682. 							color: #333333;

  683. 							overflow: hidden;

  684. 							word-wrap: break-word;

  685. 							white-space: pre-wrap;

  686. 							// font-size: 14px;

  687. 							display: -webkit-box;

  688. 							-webkit-box-orient: vertical;

  689. 							-webkit-line-clamp: 1;

  690. 						}

  691. 

  692. 						.statusBox {

  693. 							width: 100rpx;

  694. 							flex-shrink: 1;

  695. 							text-align: center;

  696. 							font-size: 24rpx;

  697. 							border-radius: 8rpx;

  698. 							color: #fff;

  699. 							padding: 8rpx 12rpx;

  700. 							font-family: 'PingFang SC';

  701. 						}

  702. 

  703. 						.handle {

  704. 							background: rgba(15, 175, 118, 0.1);

  705. 							color: #0FAF76;

  706. 						}

  707. 

  708. 						.nohandle {

  709. 							background: rgba(239, 45, 45, 0.1);

  710. 							color: rgba(239, 45, 45, 1);

  711. 						}

  712. 					}

  713. 

  714. 					.topCard {

  715. 						display: flex;

  716. 						border-top: 1px solid rgba(0, 0, 0, 0.1);

  717. 						align-items: center;

  718. 						padding: 20rpx 0;

  719. 

  720. 						.pic {

  721. 							width: 120rpx;

  722. 							height: 120rpx;

  723. 

  724. 							image {

  725. 								width: 120rpx;

  726. 								height: 120rpx;

  727. 								border-radius: 4px;

  728. 							}

  729. 						}

  730. 

  731. 						.rightCard {

  732. 							margin-left: 20rpx;

  733. 							font-size: 26rpx;

  734. 							font-family: 'PingFang SC';

  735. 							width: calc(100% - 140rpx);

  736. 						}

  737. 					}

  738. 

  739. 					.midCard {

  740. 						font-size: 26rpx;

  741. 

  742. 						.secondCard,

  743. 						.thirdCard {

  744. 							display: flex;

  745. 							align-items: center;

  746. 

  747. 

  748. 							.txt {

  749. 								font-size: 26rpx;

  750. 								font-family: 'PingFang SC';

  751. 								margin-left: 10rpx;

  752. 								color: #333333;

  753. 							}

  754. 						}

  755. 

  756. 						.thirdCard {

  757. 							margin-top: 18rpx;

  758. 						}

  759. 					}

  760. 

  761. 					.btoCard {

  762. 						border-top: 1px solid rgba(0, 0, 0, 0.1);

  763. 						margin-top: 20rpx;

  764. 						padding: 20rpx 0;

  765. 						display: flex;

  766. 						justify-content: space-between;

  767. 						align-items: center;

  768. 						font-size: 26rpx;

  769. 						font-family: 'PingFang SC';

  770. 

  771. 						.rightBox {

  772. 							.txt {

  773. 								width: 120rpx;

  774. 								height: 60rpx;

  775. 								line-height: 60rpx;

  776. 								font-family: 'PingFang SC';

  777. 								text-align: center;

  778. 								background: #2388FF;

  779. 								color: #fff;

  780. 								border-radius: 80rpx;

  781. 							}

  782. 						}

  783. 					}

  784. 				}

  785. 

  786. 			}

  787. 		}

  788. 	}

  789. </style>