任务卡片 首页滚动

pages.json

@@ -95,8 +95,10 @@
 			"path":"components/windFarmcard/WindFarmcard",
 			"style":{}
 		}
-		
-		
+        ,{
+            "path" : "components/task/taskCard/taskCard",
+            "style" : {}
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/task/Task.vue

@@ -1,207 +1,256 @@
 <template>
 	<view class="content">
 		<cu-custom bgColor="bg-blacks" :isBack="false">
-		    <block slot="right">
-				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
-			</block>
-			<block slot="right">	
-					<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
-						<view class="cu-tag looknumber" style="margin-top: -2%;">
-							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
-						</view>
-					</view>
-			</block>
-			<block slot="right">
-					
-			</block>
-		    <block slot="content">{{address}}</block>
+			<block slot="right"><image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image></block>
 			<block slot="right">
-				<view class="plus" @tap="showModal" data-target="viewModal">+</view>
+				<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
+					<view class="cu-tag looknumber" style="margin-top: -2%;">
+						<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
+					</view>
+				</view>
 			</block>
+			<block slot="right"></block>
+			<block slot="content">{{ address }}</block>
+			<block slot="right"><view class="plus" @tap="showModal" data-target="viewModal">+</view></block>
 		</cu-custom>
 		<!-- 抽屉组件 -->
-		<div>
-			<drawer ref="drawer"></drawer>
-		</div>
-		<div class="plusDrawer" @tap="hideModal">
-			<plusDrawer ref="plusDrawer"></plusDrawer>
-		</div>
+		<div><drawer ref="drawer"></drawer></div>
+		<div class="plusDrawer" @tap="hideModal"><plusDrawer ref="plusDrawer"></plusDrawer></div>
+
+		<!-- 任务组件 -->
+		<view class="taskcard solid">
+			<view class="tasktab" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)"><view class="cu-tag" :class="'line-white'">任务一</view></view>
+
+			<view class="taskcontent solids-bottom  flex align-center" style="color: #FFFFFF;" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)">
+				<view class="flex-subs text-center"><view class="padding">用于摘要或阅读文本页面默认字号</view></view>
+			</view>
+
+			<view class="taskbutton align-center padding">
+				<button class="cu-btn ">确认</button>
+				<button class="cu-btn ">取消</button>
+			</view>
+		</view>
+
+		<!-- 任务组件 -->
+		<view class="taskcard solid">
+			<view class="tasktab" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)"><view class="cu-tag" :class="'line-white'">任务二</view></view>
+
+			<view class="taskcontent solids-bottom  flex align-center" style="color: #FFFFFF;" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)">
+				<view class="flex-subs text-center"><view class="padding">用于摘要或阅读文本页面默认字号</view></view>
+			</view>
+
+			<view class="taskbutton align-center  padding">
+				<button class="cu-btn ">确认</button>
+				<button class="cu-btn ">取消</button>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import res from '../../common/data.json';
-	import drawer from '../../components/drawer/threeLineDrawer.vue'
-	import plusDrawer from '../../components/drawer/plusDrawer.vue';
-	
-	export default {
-		components: {
-			"drawer": drawer,
-			plusDrawer: plusDrawer
+import res from '../../common/data.json';
+import drawer from '../../components/drawer/threeLineDrawer.vue';
+import plusDrawer from '../../components/drawer/plusDrawer.vue';
+
+export default {
+	components: {
+		drawer: drawer,
+		plusDrawer: plusDrawer
+	},
+	data: function() {
+		return {
+			taskName: '任务',
+			badge: 22,
+			inconList: ['form', 'favor', 'question', 'edit'],
+			modalName: null,
+			address: '宁夏新能源公司',
+			drawerList: [
+				{
+					name: '首页'
+				},
+				{
+					name: '状态监视'
+				},
+				{
+					name: '矩阵监视'
+				},
+				{
+					name: '风场监视'
+				},
+				{
+					name: '人员监视'
+				}
+			],
+			plusDrawerList: [
+				{
+					name: '宁夏新能源公司',
+					windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
+				},
+				{
+					name: '牛首山风电场',
+					windPowerStationId: 'NSS_FDC'
+				},
+				{
+					name: '香山风电场',
+					windPowerStationId: 'XS_FDC'
+				},
+				{
+					name: '石板泉风电场',
+					windPowerStationId: 'SBQ_FDC'
+				},
+				{
+					name: '青山风电场',
+					windPowerStationId: 'QS_FDC'
+				},
+				{
+					name: '麻黄山风电场',
+					windPowerStationId: 'MHS_FDC'
+				}
+			]
+		};
+	},
+	onHide() {
+		this.$refs.drawer.closeDrawer();
+		this.hideModal();
+	},
+	onShow() {
+		this.windPowerStationId = uni.getStorageSync('windPowerStationId');
+		this.address = this.getWindPowerStationNameToSessionStorage();
+	},
+	methods: {
+		openDrawer: function() {
+			this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+		},
+		closeDrawer: function() {
+			this.drawerIsShow = false;
+		},
+		pushWindPowerStationNameToSessionStorage(windpowerstationName) {
+			uni.setStorageSync('windpowerstationName', windpowerstationName);
+			//sessionStorage.setItem('windpowerstationName', windpowerstationName);
+			//alert("v"+ sessionStorage.getItem("windpowerstationName"));
+			//this.common.goback('/pages/index/Index');
 		},
-		data:function(){
-			return{
-				badge: 22,
-				inconList:["form","favor","question","edit"],
-				modalName:null,
-				address: '宁夏新能源公司',
-				drawerList: [{
-						"name": "首页"
-					},
-					{
-						"name": "状态监视"
-					},
-					{
-						"name": "矩阵监视"
-					},
-					{
-						"name": "风场监视"
-					},
-					{
-						"name": "人员监视"
-					},
-				],
-				plusDrawerList: [{
-						name: '宁夏新能源公司',
-						windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
-					},
-					{
-						name: '牛首山风电场',
-						windPowerStationId: 'NSS_FDC'
-					},
-					{
-						name: '香山风电场',
-						windPowerStationId: 'XS_FDC'
-					},
-					{
-						name: '石板泉风电场',
-						windPowerStationId: 'SBQ_FDC'
-					},
-					{
-						name: '青山风电场',
-						windPowerStationId: 'QS_FDC'
-					},
-					{
-						name: '麻黄山风电场',
-						windPowerStationId: 'MHS_FDC'
-					}
-				],
-				
-			}
+		getWindPowerStationNameToSessionStorage() {
+			uni.getStorageSync('windpowerstationName');
+			return uni.getStorageSync('windpowerstationName');
 		},
-		onHide() {
-			this.$refs.drawer.closeDrawer();
-			this.hideModal();
+		openDrawer: function() {
+			this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
 		},
-		onShow(){
-			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
-			this.address = this.getWindPowerStationNameToSessionStorage();
+		showModal(e) {
+			this.modalName = e.currentTarget.dataset.target;
+			this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
 		},
-		methods:{
-			openDrawer:function(){
-				this.$refs.drawer.openDrawer(250,this.drawerList,this.inconList);
-			},
-			closeDrawer:function(){
-				this.drawerIsShow=false;
-			},
-			pushWindPowerStationNameToSessionStorage(windpowerstationName) {
-				uni.setStorageSync('windpowerstationName', windpowerstationName);
-				//sessionStorage.setItem('windpowerstationName', windpowerstationName);
-				//alert("v"+ sessionStorage.getItem("windpowerstationName"));
-				//this.common.goback('/pages/index/Index');
-			},
-			getWindPowerStationNameToSessionStorage() {
-				uni.getStorageSync('windpowerstationName');
-				return uni.getStorageSync('windpowerstationName');
-			},
-			openDrawer: function() {
-				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
-			},
-			showModal(e) {
-				this.modalName = e.currentTarget.dataset.target;
-				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
-			},
-			hideModal() {
-				this.modalName = null;
-				this.$refs.plusDrawer.hideModal(this.modalName);
-			},
+		hideModal() {
+			this.modalName = null;
+			this.$refs.plusDrawer.hideModal(this.modalName);
 		}
-	};
+	}
+};
 </script>
 
 <style>
-	body {
-		font-family: '方正兰亭细黑_GBK';
-		font-size: 20px;
-		color: silver;
-		background: #000;
-	}
-	
-	@font-face {
-		font-family: '方正兰亭细黑_GBK';
-		src: url(../../static/fzltxh.TTF);
-	}
-	
-	page {
-		background-color: #1f1f1f;
-		font-family: '方正兰亭细黑_GBK';
-		overflow-x: hidden;
-	}
-	
-	.top {
-		width: 100%;
-		height: 130upx;
-		padding-top: 5upx;
-		background-color: #1f1f1f;
-		position: fixed;
-		top: 0px;
-		left: 0px;
-		z-index: 100;
-	}
+body {
+	font-family: '方正兰亭细黑_GBK';
+	font-size: 20px;
+	color: silver;
+	background: #fff;
+}
 
-	.threeLine {
-		width: 50px;
-		height: 45px;
-		float: left;
-	}
+@font-face {
+	font-family: '方正兰亭细黑_GBK';
+	src: url(../../static/fzltxh.TTF);
+}
 
-	.text {
-		width: calc(100% - 100px);
-		height: 45px;
-		float: left;
-		user-select: text;
-		-webkit-user-select: text;
-		-moz-user-select: text;
-		-ms-user-select: text;
-		color: silver;
-		line-height: 45px;
-		margin-top: 11px;
-		font-size: 18px;
-	}
+page {
+	background-color: #1f1f1f;
+	font-family: '方正兰亭细黑_GBK';
+	overflow-x: hidden;
+}
 
-	.notice {
-		width: 50px;
-		height: 45px;
-		float: left;
-	}
+.top {
+	width: 100%;
+	height: 130upx;
+	padding-top: 5upx;
+	background-color: #1f1f1f;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	z-index: 100;
+}
 
-	.plus {
-		width: 30px;
-		height: 45px;
-		float: right;
-		color: white;
-		font-size: 35px;
-		line-height: 45px;
-		text-align: right;
-		margin-right: 2.5%;
-	}
-	
-	.textWindpowerstation{
-		width: 180px;
-		height: 45px;
-		float: left;
-		text-align: center;
-		margin-left: 18px;
-	}
-	
+.threeLine {
+	width: 50px;
+	height: 45px;
+	float: left;
+}
+
+.text {
+	width: calc(100% - 100px);
+	height: 45px;
+	float: left;
+	user-select: text;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	color: silver;
+	line-height: 45px;
+	margin-top: 11px;
+	font-size: 18px;
+}
+
+.notice {
+	width: 50px;
+	height: 45px;
+	float: left;
+}
+
+.plus {
+	width: 30px;
+	height: 45px;
+	float: right;
+	color: white;
+	font-size: 35px;
+	line-height: 45px;
+	text-align: right;
+	margin-right: 2.5%;
+}
+
+.textWindpowerstation {
+	width: 180px;
+	height: 45px;
+	float: left;
+	text-align: center;
+	margin-left: 18px;
+}
+.taskcard {
+	margin-left: 10%;
+	width: 80%;
+	height: 200px;
+	margin-top: 3%;
+	 border:2px solid white;
+}
+.tasktab {
+	height: 30px;
+	width: 100%;
+	margin-left: 3%;
+	margin-top: 3%;
+}
+.taskcontent {
+	height: 100px;
+}
+.taskbutton {
+	width: 100%;
+	height: 50px;
+}
+.cu-tag {
+	float: left;
+}
+.solids-bottom::after {
+	border-bottom: 0px solid #eee;
+}
+.cu-btn {
+	float: right;
+	margin-left: 3px;
+}
 </style>