bjquanjiang
/
pinganxiaoyuan
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
平安校园
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
268 提交
1 分支
127 MiB
 
 
 
 
 
 
目录树: ff104fb0c1
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'ff104fb0c1'
${ noResults }
pinganxiaoyuan/monitorMobile/pages/earlyWarning/index.vue

788 行
19 KiB
原始文件 Blame 文件历史 

  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. 										演示学校

  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. 			let titleObj = this.sysInfo.find(e=>e.configKey == 'SYS_NAME')

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

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

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

  276. 			// 获取预警类型

  277. 			this.getWarnTypeList()

  278. 			// 隐藏导航栏

  279. 			this.loadmore()

  280. 		},

  281. 		onPullDownRefresh() {

  282. 			uni.stopPullDownRefresh()

  283. 			this.status = 'loadmore'

  284. 			this.searchForm.pageNum = 1;

  285. 			this.warnList = []

  286. 			this.loadmore()

  287. 		},

  288. 		methods: {

  289. 			selectChange(e) {

  290. 				console.log(e, 2323)

  291. 			},

  292. 			// 预览图片

  293. 			previewImage(url, index) {

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

  295. 				uni.previewImage({

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

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

  298. 				});

  299. 			},

  300. 			clearform() {

  301. 				this.searchForm = {

  302. 					alarmType: '',

  303. 					$alarmType: '全部',

  304. 					warnHand: '',

  305. 					$warnHand: '',

  306. 					cameraId: '',

  307. 					$cameraId: '',

  308. 					tick: [],

  309. 					StartTick: '',

  310. 					EndTick: '',

  311. 					pageNum: 1,

  312. 					pageSize: 10

  313. 				}

  314. 				// this.isShowSearch = false;

  315. 			},

  316. 			onsubmit() {

  317. 				let arr = []

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

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

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

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

  322. 						}

  323. 					}

  324. 				}

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

  326. 				this.isShowSearch = false;

  327. 				this.status = 'loadmore'

  328. 				this.searchForm.pageNum = 1;

  329. 				this.warnList = []

  330. 				this.loadmore()

  331. 			},

  332. 			// 获取预警类型

  333. 			getWarnTypeList() {

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

  335. 					let {

  336. 						code,

  337. 						data

  338. 					} = res;

  339. 

  340. 					if (code == 200) {

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

  342. 							return {

  343. 								label: item.name,

  344. 								value: item.code

  345. 							};

  346. 						})

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

  348. 						// this.warnOption.unshift({

  349. 						// 	label: '全部',

  350. 						// 	value: ''

  351. 						// })

  352. 					}

  353. 				});

  354. 

  355. 

  356. 			},

  357. 			// 获取摄像头

  358. 			// creamaData

  359. 			// 跳转详情页面

  360. 			toDetail(row) {

  361. 				uni.navigateTo({

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

  363. 				});

  364. 			},

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

  366. 			toOpen() {

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

  368. 			},

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

  370. 			toOpenmanjor() {

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

  372. 			},

  373. 			// 处理情况筛选

  374. 			toOpenSelect() {

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

  376. 			},

  377. 			// 打开筛选框

  378. 			openSearch() {

  379. 				this.isShowSearch = !this.isShowSearch;

  380. 			},

  381. 			isSelect() {

  382. 

  383. 			},

  384. 			scrolltolower() {

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

  386. 					return;

  387. 				}

  388. 				this.searchForm.pageNum += 1;

  389. 				this.loadmore()

  390. 			},

  391. 			loadmore() {

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

  393. 				this.status = 'loading'

  394. 				this.isLoading = true;

  395. 				delete this.searchForm.tick

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

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

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

  399. 						this.isLoading = false;

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

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

  402. 							this.status = 'nomore'

  403. 						} else {

  404. 							this.status = 'loadmore'

  405. 						}

  406. 					}

  407. 

  408. 				})

  409. 			}

  410. 		}

  411. 	}

  412. </script>

  413. 

  414. <style lang="scss" scoped>

  415. 	.warningBox {

  416. 		height: 100%;

  417. 

  418. 		.headerBox {

  419. 			/*#ifdef H5*/

  420. 			height: 272rpx;

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

  422. 

  423. 			/*#endif*/

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

  425. 			height: 340rpx;

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

  427. 			/*#endif*/

  428. 			position: relative;

  429. 

  430. 			image {

  431. 				width: 100%;

  432. 				height: 100%;

  433. 

  434. 			}

  435. 

  436. 			.logo {

  437. 

  438. 

  439. 				image {

  440. 					height: 46rpx;

  441. 				}

  442. 

  443. 

  444. 

  445. 				image {

  446. 					height: 46rpx;

  447. 				}

  448. 

  449. 				position: absolute;

  450. 				left: 36rpx;

  451. 				/*#ifdef H5*/

  452. 				top: 55rpx;

  453. 				/*#endif*/

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

  455. 				top: 110rpx;

  456. 				/*#endif*/

  457. 			}

  458. 			.logoTitle {

  459. 				position: absolute;

  460. 				left: 36rpx;

  461. 				/*#ifdef H5*/

  462. 				top: 150rpx;

  463. 				/*#endif*/

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

  465. 				top: 170rpx;

  466. 				/*#endif*/

  467. 				font-family: 'Alimama ShuHeiTi';

  468. 				font-weight: 700;

  469. 				color: #2388FF;

  470. 				font-size: 50rpx;

  471. 				letter-spacing: 6%;

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

  473. 			}

  474. 		}

  475. 

  476. 		.contentBox {

  477. 			/*#ifdef H5*/

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

  479. 			/*#endif*/

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

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

  482. 

  483. 			/*#endif*/

  484. 			.warningInfo {

  485. 				width: 100%;

  486. 				height: 100%;

  487. 				background: #F6F8FA;

  488. 

  489. 				.u-modal__title {

  490. 					color: #000000;

  491. 				}

  492. 			}

  493. 

  494. 			.searchBox {

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

  496. 				position: relative;

  497. 

  498. 				.searchLine {

  499. 					height: 88rpx;

  500. 					display: flex;

  501. 					align-items: center;

  502. 					justify-content: space-between;

  503. 					padding: 0 15px;

  504. 					box-sizing: border-box;

  505. 					background: #fff;

  506. 					font-size: 28rpx;

  507. 

  508. 					.searchLabels {

  509. 						display: flex;

  510. 						align-items: center;

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

  512. 

  513. 						image {

  514. 							width: 40rpx;

  515. 							height: 40rpx;

  516. 							flex-shrink: 1;

  517. 						}

  518. 

  519. 						.labels {

  520. 							width: 70rpx;

  521. 							display: block;

  522. 							color: #333333;

  523. 							margin-left: 10rpx;

  524. 							flex-shrink: 1;

  525. 						}

  526. 

  527. 						.values {

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

  529. 							color: #2388FF;

  530. 							font-weight: 700;

  531. 							margin-left: 18rpx;

  532. 							overflow: hidden;

  533. 							word-wrap: break-word;

  534. 							white-space: pre-wrap;

  535. 							display: -webkit-box;

  536. 							-webkit-box-orient: vertical;

  537. 							-webkit-line-clamp: 1;

  538. 						}

  539. 					}

  540. 

  541. 

  542. 					.arrow {

  543. 						// text-align: right;

  544. 						// flex-shrink: 1;

  545. 

  546. 						image {

  547. 							width: 34rpx;

  548. 							height: 34rpx;

  549. 						}

  550. 					}

  551. 

  552. 					.leftSearchBox {

  553. 						display: flex;

  554. 						align-items: center;

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

  556. 

  557. 						.searchLabel {

  558. 							flex-shrink: 1;

  559. 							color: #333333;

  560. 							width: 80px;

  561. 						}

  562. 

  563. 						.searchValue {

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

  565. 							margin-left: 10px;

  566. 							color: #2388FF;

  567. 							overflow: hidden;

  568. 							word-wrap: break-word;

  569. 							white-space: pre-wrap;

  570. 							display: -webkit-box;

  571. 							-webkit-box-orient: vertical;

  572. 							-webkit-line-clamp: 1;

  573. 						}

  574. 					}

  575. 				}

  576. 

  577. 				.searchDialog {

  578. 					position: absolute;

  579. 					z-index: 990;

  580. 					top: 89rpx;

  581. 					width: 100%;

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

  583. 					font-size: 26rpx;

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

  585. 

  586. 					.content {

  587. 						background: #FFFFFF;

  588. 						padding: 15px;

  589. 						box-sizing: border-box;

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

  591. 

  592. 						.demo-layout {

  593. 							height: 80rpx;

  594. 							border-radius: 8rpx;

  595. 							background: #F5F5F5;

  596. 							display: flex;

  597. 							justify-content: space-between;

  598. 							align-items: center;

  599. 							padding: 0 10px;

  600. 							box-sizing: border-box;

  601. 

  602. 							.left-layout {

  603. 								color: #777777;

  604. 							}

  605. 

  606. 							.right-layout {}

  607. 

  608. 							.startBox {

  609. 								color: #777777;

  610. 							}

  611. 

  612. 							text {

  613. 								color: #777777;

  614. 							}

  615. 

  616. 							.endBox {

  617. 								color: #777777;

  618. 							}

  619. 

  620. 							.timeIcon {}

  621. 						}

  622. 					}

  623. 

  624. 					.btnBox {

  625. 						display: flex;

  626. 						align-items: center;

  627. 						margin-top: 15px;

  628. 

  629. 						.leftBtn {

  630. 							width: 50%;

  631. 							height: 74rpx;

  632. 							line-height: 74rpx;

  633. 							border: 1px solid #ccc;

  634. 							border-radius: 12rpx;

  635. 							color: #333333;

  636. 							text-align: center;

  637. 

  638. 						}

  639. 

  640. 						.rightBtn {

  641. 							width: 50%;

  642. 							height: 74rpx;

  643. 							line-height: 74rpx;

  644. 							border: 1px solid #2388FF;

  645. 							border-radius: 12rpx;

  646. 							color: #fff;

  647. 							text-align: center;

  648. 							background: #2388FF;

  649. 							margin-left: 15rpx;

  650. 						}

  651. 					}

  652. 				}

  653. 			}

  654. 

  655. 			.tableBox {

  656. 				height: 100%;

  657. 				padding: 30rpx;

  658. 				box-sizing: border-box;

  659. 				// height: 600px;

  660. 				padding-bottom: 30px;

  661. 

  662. 

  663. 				.liBox {

  664. 					background: #fff;

  665. 					padding: 0 30rpx;

  666. 					box-sizing: border-box;

  667. 					border-radius: 20rpx;

  668. 					margin-bottom: 30rpx;

  669. 					font-family: 'PingFang SC';

  670. 

  671. 					.headerCard {

  672. 						display: flex;

  673. 						justify-content: space-between;

  674. 						align-items: center;

  675. 						padding: 24rpx 0;

  676. 

  677. 						.schoolName {

  678. 							font-size: 32rpx;

  679. 							font-weight: 700;

  680. 							font-family: 'PingFang SC';

  681. 							color: #333333;

  682. 							overflow: hidden;

  683. 							word-wrap: break-word;

  684. 							white-space: pre-wrap;

  685. 							// font-size: 14px;

  686. 							display: -webkit-box;

  687. 							-webkit-box-orient: vertical;

  688. 							-webkit-line-clamp: 1;

  689. 						}

  690. 

  691. 						.statusBox {

  692. 							width: 100rpx;

  693. 							flex-shrink: 1;

  694. 							text-align: center;

  695. 							font-size: 24rpx;

  696. 							border-radius: 8rpx;

  697. 							color: #fff;

  698. 							padding: 8rpx 12rpx;

  699. 							font-family: 'PingFang SC';

  700. 						}

  701. 

  702. 						.handle {

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

  704. 							color: #0FAF76;

  705. 						}

  706. 

  707. 						.nohandle {

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

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

  710. 						}

  711. 					}

  712. 

  713. 					.topCard {

  714. 						display: flex;

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

  716. 						align-items: center;

  717. 						padding: 20rpx 0;

  718. 

  719. 						.pic {

  720. 							width: 120rpx;

  721. 							height: 120rpx;

  722. 

  723. 							image {

  724. 								width: 120rpx;

  725. 								height: 120rpx;

  726. 								border-radius: 4px;

  727. 							}

  728. 						}

  729. 

  730. 						.rightCard {

  731. 							margin-left: 20rpx;

  732. 							font-size: 26rpx;

  733. 							font-family: 'PingFang SC';

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

  735. 						}

  736. 					}

  737. 

  738. 					.midCard {

  739. 						font-size: 26rpx;

  740. 

  741. 						.secondCard,

  742. 						.thirdCard {

  743. 							display: flex;

  744. 							align-items: center;

  745. 

  746. 

  747. 							.txt {

  748. 								font-size: 26rpx;

  749. 								font-family: 'PingFang SC';

  750. 								margin-left: 10rpx;

  751. 								color: #333333;

  752. 							}

  753. 						}

  754. 

  755. 						.thirdCard {

  756. 							margin-top: 18rpx;

  757. 						}

  758. 					}

  759. 

  760. 					.btoCard {

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

  762. 						margin-top: 20rpx;

  763. 						padding: 20rpx 0;

  764. 						display: flex;

  765. 						justify-content: space-between;

  766. 						align-items: center;

  767. 						font-size: 26rpx;

  768. 						font-family: 'PingFang SC';

  769. 

  770. 						.rightBox {

  771. 							.txt {

  772. 								width: 120rpx;

  773. 								height: 60rpx;

  774. 								line-height: 60rpx;

  775. 								font-family: 'PingFang SC';

  776. 								text-align: center;

  777. 								background: #2388FF;

  778. 								color: #fff;

  779. 								border-radius: 80rpx;

  780. 							}

  781. 						}

  782. 					}

  783. 				}

  784. 

  785. 			}

  786. 		}

  787. 	}

  788. </style>