任务列表

pages.json

@@ -10,6 +10,12 @@
 				"navigationBarTitleText": "创建情境",
 				"enablePullDownRefresh": false
 			}
+		},{
+			"path": "pages/mission/mission",
+			"style": {
+			  "navigationBarTitleText": "任务",
+				"enablePullDownRefresh": false
+			}
 		}
   ],
 	"globalStyle": {

pages/mission/components/mission-list/list-item.vue

@@ -0,0 +1,119 @@
+<template>
+	<view class="mission-list-item">
+		<view v-if="true" class="time">
+			<text class="com-text">2020-11-26 15:33:08</text>
+		</view>
+		<view class="card">
+	    <view class="top-box">
+				<view class="bg-box">
+					<text>改善中</text>
+				</view>
+	    	<text class="title">柜子上方50cm不能遮住喷水器</text>
+	    	<view class="row">
+	    		<view class="col">
+	    			<image class="com-icon" src="/static/creatingSituations/icon上移.png"></image>
+	    			<text class="com-text">第3/9次查核计划</text>
+	    		</view>	
+	    		<view class="col">
+	    			<image class="com-icon" src="/static/creatingSituations/icon上移.png"></image>
+	    			<text class="com-text">分诊处（门诊）</text>
+	    		</view>
+	    	</view>
+	    </view>
+			<view class="bottom-box">
+				<text class="com-text">情境名称：环境设施安全</text>
+				<text class="com-text">改善人：张晴晴</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="less">
+	.mission-list-item {
+		margin-top:15rpx;
+		overflow: hidden;
+		
+		.time {
+			height: 47.5rpx;
+			line-height: 45rpx;
+			padding-left: 25rpx;
+		}
+		
+		.card {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			height: 203.75rpx;
+			background-color: #fff;
+			padding: 0 25rpx;
+			
+			.top-box {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				flex: 1;
+				margin-top: 35rpx;
+				margin-bottom: 28.12rpx;
+			}
+			
+			.title {
+				line-height: 45rpx;
+				font-size: 25rpx;
+				font-weight: bold;
+				color: #292C33;
+			}
+			
+			.row {
+				display: flex;
+				align-items: center;
+				
+				.col {
+					display: flex;
+					align-items: center;
+					height: 20rpx;
+					
+					&:first-child {
+						margin-right: 50rpx;
+					}
+					.com-icon {
+						margin-right: 9.37rpx;
+						width: 20rpx;
+						height: 20rpx;
+					}
+				}
+			}
+			.bottom-box {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				height: 70rpx;
+				border-top: 0.62rpx solid #DADEE6;
+			}
+			
+			.bg-box {
+				position: absolute;
+				top: 0;
+				right: 0;
+				width: 112.5rpx;
+				height: 35rpx;
+				background-image: url('~@/static/mission/active-bg.png');
+				background-size: 100% 100%;
+				text-align: center;
+				
+				>text {
+					line-height: 35rpx;
+					font-size: 17.5rpx;
+					color: #fff;
+				}
+			}
+		}
+		
+		.com-text {
+			font-size: 22.5rpx;
+			color: #666F80;
+		}
+	}
+</style>

pages/mission/components/mission-list/mission-list.vue

@@ -0,0 +1,21 @@
+<template>
+	<view class="mission-list">
+		<list-item />
+	</view>
+</template>
+
+<script>
+	// 任务列表
+	import listItem from './list-item.vue';
+	export default {
+		components: {
+			listItem
+		}
+	}
+</script>
+
+<style lang="less">
+	.mission-list {
+		height: 100%;
+	}
+</style>

pages/mission/mission.vue

@@ -0,0 +1,33 @@
+<template>
+	<view class="mission-page">
+	  <!-- 任务列表 -->
+	  <mission-list />
+		
+	</view>
+</template>
+
+<script>
+	// 任务
+	import missionList from './components/mission-list/mission-list.vue'
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		},
+		components: {
+			missionList
+		}
+	}
+</script>
+
+<style lang="less">
+ .mission-page {
+	 height: 100%;
+	 background-color: #F5F6FA;
+	 overflow: hidden;
+ }
+</style>