7-5

pages/donate/donateDetail.vue

@@ -4,198 +4,301 @@
 			<image src="../../static/images/bgi2.png" mode=""></image>
 			<view class="title clamp">夏天的清凉阳光孤儿院物资爱心捐赠活动</view>
 			<view class="tip">
-				<view class=""></view>基本信息
+				<view class=""></view>
+				基本信息
 			</view>
 			<view class="base-info">
 				<view class="item">
-					<text>捐赠进度</text><text class="status">30%</text>
+					<text>捐赠进度</text>
+					<text class="status">30%</text>
 				</view>
 				<view class="item">
-					<text>创立时间</text>2021年6月10日
+					<text>创立时间</text>
+					2021年6月10日
 				</view>
 				<view class="item">
-					<text>开始时间</text>2021年6月10日
+					<text>开始时间</text>
+					2021年6月10日
 				</view>
 				<view class="item">
-					<text>结束时间</text>2021年6月10日
+					<text>结束时间</text>
+					2021年6月10日
 				</view>
 			</view>
 			<view class="dynamic flex">
-				<view class="left">
-					实时动态
-				</view>
+				<view class="left">实时动态</view>
 				<view class="right flex">
 					<view>捐赠时间：2021年06月10日</view>
-					<view>捐赠人：<text>李**</text></view>
+					<view>
+						捐赠人：
+						<text>李**</text>
+					</view>
 					<view class="clamp" style="width: 500rpx;">捐赠数量：帐篷[100]顶,帐篷[100]顶,帐篷[100]顶，帐篷[100]顶</view>
 				</view>
 			</view>
 		</view>
 		<view class="content">
 			<view class="content-nav flex">
-				<view class="nav-item" v-for="(item, index) in navList" :key="index" :class="{'active': currentIndex === index}" @click="navClick(index)">
-					{{item}}
+				<view class="nav-item" v-for="(item, index) in navList" :key="index" :class="{ active: currentIndex === index }" @click="navClick(index)">{{ item }}</view>
+			</view>
+		</view>
+
+		<view v-if="currentIndex === 0">
+			<view class="item-detail" ref="swiperItemOne">
+				<view class="tip">
+					<view class=""></view>
+					捐赠介绍
+				</view>
+				<view class="item-content">内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍， 内容介绍内容介绍内容介绍内。</view>
+				<view class="tip">
+					<view class=""></view>
+					项目需求
+				</view>
+				<view class="item-needs">
+					<view class="need-item">
+						<view class="">
+							帐篷类（帐篷）：
+							<text>500</text>
+							顶
+						</view>
+						<view class="">
+							最低需求捐赠数：
+							<text>500</text>
+							顶
+						</view>
+						<view class="">
+							物资捐赠要求：
+							<text>全新</text>
+						</view>
+					</view>
+					<view class="need-item">
+						<view class="">
+							帐篷类（帐篷）：
+							<text>500</text>
+							顶
+						</view>
+						<view class="">
+							最低需求捐赠数：
+							<text>500</text>
+							顶
+						</view>
+						<view class="">
+							物资捐赠要求：
+							<text>全新</text>
+						</view>
+					</view>
 				</view>
 			</view>
 		</view>
-		<swiper   :interval="3000" :duration="500" :current="currentIndex">
-			<swiper-item>
-				<view class="swiper-item">555</view>
-			</swiper-item>
-			<swiper-item>
-				<view class="swiper-item">666</view>
-			</swiper-item>
-		</swiper>
+		<view v-else class="">
+			
+		</view>
 		<view class="btn-wrapper flex">
-			<view class="btn1">
+			<view class="btn1 btn">
 				实时进展
 			</view>
-			<view class="btn2">
+			<view class="btn2 btn">
 				我要捐款
 			</view>
 		</view>
-	</view>
-</template>
-
+	</view>
+</template>
+
 <script>
-	export default {
-		data() {
-			return {
-				navList: ['捐赠详情','捐赠反馈'],
-				currentIndex: 0
-			}
+export default {
+	data() {
+		return {
+			navList: ['捐赠详情', '捐赠反馈'],
+			currentIndex: 0,
+			swiperHeight: 0
+		};
+	},
+	methods: {
+		navClick(index) {
+			this.currentIndex = index;
 		},
-		methods: {
-			navClick(index) {
-				this.currentIndex = index
-			}
-		}
-	}
-</script>
-
+		
+	}
+};
+</script>
+
 <style lang="scss" scoped>
-	.top {
-		height: 863rpx;
-		background-color: #fff;
-		border-top: 1rpx solid #f6f6f6;
-		padding-top: 33rpx;
-		margin-bottom: 20rpx;
-		image {
-			display: block;
-			width: 680rpx;
-			height: 375rpx;
-			border-radius: 20rpx;
-			margin: 0 auto ;
-			background-color: red;
-		}
-		.title {
-			width: 580rpx;
-			font-size: 32rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #333333;
-			line-height: 1;
-			padding-top: 28rpx;
-			padding-left: 42rpx;
-			margin-bottom: 39rpx;
-		}
-		.base-info {
-			font-size: 27rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #999999;
-			line-height: 1;
-			display: flex;
-			padding: 0 56rpx;
-			flex-wrap: wrap;
-			.item {
-				width: 50%;
-				padding-bottom: 40rpx;
-				.status {
-					color: red;
-					font-weight: bold;
-				}
-				text {
-					font-size: 26rpx;
-					font-family: PingFang SC;
-					font-weight: 500;
-					color: #666666;
-					display: inline-block;
-					margin-right: 15rpx;
-				}
-			}	
-		}
-		.dynamic {
-			width: 666rpx;
-			height: 111rpx;
-			background: #EFEFEF;
-			border-radius: 10rpx;
-			margin: 5rpx auto 0;
-			.left {
-				width: 115rpx;
-				height: 111rpx;
-				background: #5C93FC;
-				border-radius: 10rpx 0px 0px 10rpx;
-				font-size: 28rpx;
+page {
+	width: 100%;
+}
+.top {
+	height: 863rpx;
+	background-color: #fff;
+	border-top: 1rpx solid #f6f6f6;
+	padding-top: 33rpx;
+	margin-bottom: 20rpx;
+	image {
+		display: block;
+		width: 680rpx;
+		height: 375rpx;
+		border-radius: 20rpx;
+		margin: 0 auto;
+		background-color: red;
+	}
+	.title {
+		width: 580rpx;
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+		line-height: 1;
+		padding-top: 28rpx;
+		padding-left: 42rpx;
+		margin-bottom: 39rpx;
+	}
+	.base-info {
+		font-size: 27rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #999999;
+		line-height: 1;
+		display: flex;
+		padding: 0 56rpx;
+		flex-wrap: wrap;
+		.item {
+			width: 50%;
+			padding-bottom: 40rpx;
+			.status {
+				color: red;
+				font-weight: bold;
+			}
+			text {
+				font-size: 26rpx;
 				font-family: PingFang SC;
 				font-weight: 500;
-				color: #FFFFFF;
-				line-height: 34rpx;
-				padding: 22rpx 29rpx;
+				color: #666666;
+				display: inline-block;
 				margin-right: 15rpx;
 			}
-			.right {
-				font-size: 22rpx;
-				font-family: PingFang SC;
-				font-weight: 400;
-				color: #333333;
-				line-height: 1;
-				padding: 12rpx 0;
-				flex-direction: column;
-				justify-content: space-between;
-				text {
-					color: red;
-					font-weight: bold;
-				}
-			}
 		}
 	}
-	.content {
-		.content-nav {
-			height: 82rpx;
-			background: #FFFFFF;
-			font-size: 30rpx;
+	.dynamic {
+		width: 666rpx;
+		height: 111rpx;
+		background: #efefef;
+		border-radius: 10rpx;
+		margin: 5rpx auto 0;
+		.left {
+			width: 115rpx;
+			height: 111rpx;
+			background: #5c93fc;
+			border-radius: 10rpx 0px 0px 10rpx;
+			font-size: 28rpx;
 			font-family: PingFang SC;
 			font-weight: 500;
-			color: #999999;
-			line-height: 82rpx;
-			justify-content: space-around;
-			.active {
-				border-bottom: 4rpx solid #FA7E67;
-				color: #FA7E67;
+			color: #ffffff;
+			line-height: 34rpx;
+			padding: 22rpx 29rpx;
+			margin-right: 15rpx;
+		}
+		.right {
+			font-size: 22rpx;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #333333;
+			line-height: 1;
+			padding: 12rpx 0;
+			flex-direction: column;
+			justify-content: space-between;
+			text {
+				color: red;
 				font-weight: bold;
 			}
 		}
-		
 	}
-	.tip {
-		margin-left: 42rpx;
+}
+.content {
+	.content-nav {
+		height: 82rpx;
+		background: #ffffff;
 		font-size: 30rpx;
 		font-family: PingFang SC;
-		font-weight: bold;
-		color: #333333;
-		line-height: 1;
-		margin-bottom: 34rpx;
-		view {
-			display: inline-block;
-			width: 4rpx;
-			height: 30rpx;
-			background: #FA7E67;
-			border-radius: 2rpx;
-			margin-right: 9rpx;
-			position: relative;
-			bottom: -2rpx;
-			
+		font-weight: 500;
+		color: #999999;
+		line-height: 82rpx;
+		justify-content: space-around;
+		.active {
+			border-bottom: 4rpx solid #fa7e67;
+			color: #fa7e67;
+			font-weight: bold;
+		}
+	}
+}
+.tip {
+	margin-left: 42rpx;
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #333333;
+	line-height: 1;
+	margin-bottom: 34rpx;
+	view {
+		display: inline-block;
+		width: 4rpx;
+		height: 30rpx;
+		background: #fa7e67;
+		border-radius: 2rpx;
+		margin-right: 9rpx;
+		position: relative;
+		bottom: -2rpx;
+	}
+}
+.btn-wrapper {
+	.btn {
+		width: 50%;
+		text-align: center;
+		height: 99rpx;
+		line-height: 99rpx;
+		font-size: 34rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #ffffff;
+	}
+	.btn1 {
+		background-color: #f7c03e;
+	}
+	.btn2 {
+		background-color: #fa7e67;
+	}
+}
+.item-detail {
+	padding-top: 42rpx;
+	.item-content {
+		padding: 0 78rpx 0 48rpx;
+		font-size: 26rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #666666;
+		line-height: 44rpx;
+		margin-bottom: 32rpx;
+	}
+	.item-needs {
+		.need-item {
+			width: 666rpx;
+			height: 150rpx;
+			background: #f3f3f3;
+			border-radius: 10rpx;
+			margin: 0 auto;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #333333;
+			margin-bottom: 10rpx;
+			padding-top: 20rpx;
+			padding-left: 13rpx;
+			line-height: 1;
+			view {
+				margin-bottom: 15rpx;
+				text {
+					color: #e80000;
+				}
+			}
 		}
-	}
+	}
+}
 </style>