页面修改-尽责形式

pages.json

@@ -255,6 +255,10 @@
 		}, {
 			"path": "pages/news/giftpage",
 			"style": {
+				"titleNView": false,
+				"navigationStyle": "custom",
+				"navigationBarBackgroundColor": "#1DC379",
+				"navigationBarTextStyle": "white",
 				"navigationBarTitleText": "捐资捐物",
 				"enablePullDownRefresh": false
 			}
@@ -275,6 +279,17 @@
 				"enablePullDownRefresh": false
 			}
 
+		}, {
+			"path": "pages/duty/giftpage1/giftpage1",
+			"style": {
+				"titleNView": false,
+				"navigationStyle": "custom",
+				"navigationBarBackgroundColor": "#FFFFFF",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "捐资捐物",
+				"enablePullDownRefresh": false
+			}
+
 		}
 	],
 	"globalStyle": {

pages/duty/dutyexplain.vue

@@ -5,13 +5,17 @@
 				<image src="/static/images/ic_arrow_left_black.png" mode="aspectFill" @click="closePage()"></image>
 				<text>尽责形式</text>
 			</view>
-			<image class="title-img" src="../../static/images/ic_explan_title_bg.png" mode="aspectFill"></image>
+			<view class="title-img-box">
+				<image class="img-left" src="/static/images/ic_duty_plan_left.png" mode="aspectFill"></image>
+				<image class="img-center" src="../../static/images/ic_explan_title_bg.png" mode="aspectFill"></image>
+				<image class="img-right" src="/static/images/ic_duty_plan_right.png" mode="aspectFill"></image>
+			</view>
 			<view class="box-content">
 				<view class="item-content">
 					<block v-for="(item,index) in list" :key="index">
 						<view class="box-item" @click="openPage(item)">
 							<image :src="imgUrl+item.titlePhoto" mode="scaleToFill"></image>
-							<rich-text :nodes="item.description" class="txt"></rich-text>
+							<!-- <rich-text :nodes="item.description" class="txt"></rich-text> -->
 						</view>
 					</block>
 				</view>
@@ -80,8 +84,11 @@
 					//捐资捐物
 					//二维码
 					uni.navigateTo({
-						url: '/pages/news/giftpage?desc=' + item.content
-					})
+						url: '/pages/duty/giftpage1/giftpage1?desc=' + item.content
+					});
+					// uni.navigateTo({
+					// 	url: '/pages/news/giftpage?desc=' + item.content
+					// })
 				} else {
 					uni.navigateTo({
 						url: '/pages/duty/activitytypelist?id=' + id + '&desc=' + content + '&title=' + title +
@@ -124,7 +131,7 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		width: 25%;
+		width: 95%;
 	}
 
 	.box-item .txt {
@@ -144,17 +151,19 @@
 
 	.item-content {
 		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
+		flex-direction: column;
+		justify-content: flex-start;
 		align-items: center;
-		flex-wrap: wrap;
 		align-self: flex-start;
-		margin-top: 80rpx;
+		margin-top: 40rpx;
+		width: 100%;
+		overflow-y: auto;
+		height: 95%;
 	}
 
 	.box-item image {
-		width: 80rpx;
-		height: 80rpx;
+		width: 100%;
+		height: 212rpx;
 	}
 
 	.box {
@@ -186,6 +195,33 @@
 		z-index: 3;
 	}
 
+	.title-img-box {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		align-self: center;
+		position: absolute;
+		top: 340rpx;
+		z-index: 3;
+		width: 100%;
+
+		.img-left {
+			width: 76rpx;
+			height: 96rpx;
+		}
+
+		.img-center {
+			width: 360rpx;
+			height: 100rpx;
+		}
+
+		.img-right {
+			width: 76rpx;
+			height: 96rpx;
+		}
+	}
+
 	.box-content {
 		width: 95%;
 		height: 65%;
@@ -199,7 +235,6 @@
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
-		overflow-y: auto;
 		flex-wrap: wrap;
 	}
 

pages/duty/giftpage1/giftpage1.vue

@@ -0,0 +1,322 @@
+<template>
+	<view class="page">
+		<view class="content">
+			<view class="state-bar">
+				<image src="/static/images/ic_arrow_left_black.png" mode="aspectFill" @click="closePage()"></image>
+				<text>捐资捐物</text>
+			</view>
+			<image style="width: 100%;margin-top: 124rpx;height: 307rpx;" src="/static/images/ic_gift_title_bg.png"
+				mode="aspectFill">
+			</image>
+			<view class="desc-box">
+				<image class="desc-img" src="/static/images/ic_gift_center_bg.png" mode="aspectFill"></image>
+				<rich-text class="desc-content" :nodes="desc"></rich-text>
+				<view class="desc-btn" @click="openPage()">我要捐款</view>
+			</view>
+		</view>
+		<pageLoading v-if="showPageLoading"></pageLoading>
+	</view>
+</template>
+
+<script>
+	import pageLoading from '@/components/loading/pageLoading.vue';
+	export default {
+		components: {
+			pageLoading
+		},
+		data() {
+			return {
+				list: [],
+				showPageLoading: false,
+				token: '',
+				imgUrl: this.$api.common.imgUrl,
+				desc: '',
+			}
+		},
+		onLoad(res) {
+			this.desc = res.desc
+		},
+		onShow() {
+			this.token = getApp().globalData.token
+		},
+		methods: {
+			closePage() {
+				uni.navigateBack()
+			},
+
+			openPage() {
+				//捐资捐物
+				var _self = this
+				uni.navigateTo({
+					url: '/pages/news/giftpage?desc=' + _self.desc
+				})
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		height: 100%;
+	}
+
+	.page {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		overflow: hidden;
+		height: 100%;
+		background-image: url('/static/images/ic_gift_bg.png');
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+	}
+
+	.content {
+		width: 100%;
+		position: relative;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.box-item {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 95%;
+	}
+
+	.box-item .txt {
+		margin-top: 10rpx;
+		font-size: 30rpx;
+		display: -webkit-box;
+		text-overflow: ellipsis;
+		-webkit-line-clamp: 1;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		color: #0c8d66;
+	}
+
+	.box-item:nth-of-type(n+5) {
+		margin-top: 40rpx;
+	}
+
+	.item-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+		align-self: flex-start;
+		margin-top: 40rpx;
+		width: 100%;
+		overflow-y: auto;
+		height: 95%;
+	}
+
+	.box-item image {
+		width: 100%;
+		height: 212rpx;
+	}
+
+	.box {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		position: relative;
+		height: 100%;
+		// height: 1920rpx;
+		// width: 90%;
+		// position: absolute;
+		top: 300rpx;
+		// left: 50%;
+		// transform: translate(-50%, 0);
+		// -webkit-transform: translate(-50%, 0);
+		// box-shadow: 0rpx 7rpx 33rpx 16rpx rgba(188, 226, 204, 0.15);
+		// border-radius: 30rpx;
+
+
+	}
+
+	.title-img {
+		align-items: center;
+		align-self: center;
+		width: 360rpx;
+		height: 100rpx;
+		position: absolute;
+		top: 340rpx;
+		z-index: 3;
+	}
+
+	.title-img-box {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		align-self: center;
+		position: absolute;
+		top: 340rpx;
+		z-index: 3;
+		width: 100%;
+
+		.img-left {
+			width: 76rpx;
+			height: 96rpx;
+		}
+
+		.img-center {
+			width: 360rpx;
+			height: 100rpx;
+		}
+
+		.img-right {
+			width: 76rpx;
+			height: 96rpx;
+		}
+	}
+
+	.box-content {
+		width: 95%;
+		height: 65%;
+		align-self: center;
+		position: absolute;
+		top: 360rpx;
+		padding-top: 60rpx;
+		background: #ffffff;
+		border-radius: 20rpx;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.tab-bar {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		padding-top: 15rpx;
+
+		.tab-active {
+			text-align: center;
+			font-size: 40rpx;
+			font-weight: bold;
+			color: #00821E;
+		}
+
+		.tab-default {
+			text-align: center;
+			font-size: 40rpx;
+			font-weight: 200;
+			color: #00821E;
+		}
+	}
+
+	.title-box {
+		width: 100%;
+		height: 100%;
+		background-image: url('/static/images/ic_gift_bg.png');
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+	}
+
+	.state-bar {
+		position: fixed;
+		top: 0%;
+		left: 0%;
+		width: 100%;
+		margin: 45rpx 0rpx;
+		height: 100rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		color: black;
+
+		image {
+			width: 50rpx;
+			height: 50rpx;
+			margin-left: 20rpx;
+		}
+
+		text {
+			font-size: 40rpx;
+			align-self: center;
+			text-align: center;
+			width: 100%;
+			margin-left: -70rpx;
+		}
+	}
+
+
+	.container-box {
+		display: flex;
+		flex-direction: column;
+		padding: 20rpx;
+		margin-top: 20rpx;
+
+		.container-item {
+			display: flex;
+			flex-direction: column;
+
+			.container-title {
+				display: flex;
+				flex-direction: row;
+				padding: 20rpx 10rpx;
+				background: #EDFCED;
+
+				text {
+					background: #00821E;
+					border-radius: 50%;
+					width: 45rpx;
+					min-width: 45rpx;
+					height: 45rpx;
+					min-height: 45rpx;
+					text-align: center;
+					color: white;
+					margin-right: 20rpx;
+				}
+			}
+
+			.container-content {
+				padding: 20rpx;
+
+			}
+		}
+	}
+
+	.desc-box {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		.desc-img {
+			width: 601rpx;
+			height: 430rpx;
+		}
+
+		.desc-content {
+			margin-top: 12rpx;
+			font-size: 24rpx;
+			font-family: Microsoft YaHei UI;
+			font-weight: 400;
+			color: #29A255;
+			width: 601rpx;
+			line-height: 48rpx;
+		}
+
+		.desc-btn {
+			width: 100%;
+			height: 75rpx;
+			color: white;
+			text-align: center;
+			line-height: 75rpx;
+			background: #00AE7E;
+			border-radius: 75rpx;
+			margin-top: 60rpx;
+		}
+	}
+</style>

pages/news/giftpage.vue

@@ -1,9 +1,11 @@
 <template>
 	<view class="page">
 		<view class="content">
-			<rich-text :nodes="desc" class="desc"></rich-text>
-			<image src="/static/images/ic_gift_1.png" mode="widthFix"></image>
-			<image src="/static/images/ic_gift_2.png" mode="widthFix"></image>
+			<view class="state-bar">
+				<image src="/static/images/ic_arrow_left.png" mode="aspectFill" @click="closePage()"></image>
+				<text></text>
+			</view>
+			<image src="/static/images/ic_gift_1.png" style="width: 100%;height:100%;" mode="widthFix"></image>
 		</view>
 	</view>
 </template>
@@ -19,7 +21,9 @@
 			this.desc = res.desc
 		},
 		methods: {
-
+			closePage() {
+				uni.navigateBack()
+			}
 		}
 	}
 </script>
@@ -50,7 +54,31 @@
 		padding: 20rpx;
 	}
 
-	image {
+	.state-bar {
+		position: fixed;
+		top: 0%;
+		left: 0%;
 		width: 100%;
+		margin: 45rpx 0rpx;
+		height: 100rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		color: black;
+		z-index: 2;
+
+		image {
+			width: 50rpx;
+			height: 50rpx;
+			margin-left: 20rpx;
+		}
+
+		text {
+			font-size: 40rpx;
+			align-self: center;
+			text-align: center;
+			width: 100%;
+			margin-left: -70rpx;
+		}
 	}
 </style>