jzred/pages/donate/donateDetail.vue

<template>
	<view class="detail">
		<view class="top">
			<image src="../../static/images/bgi2.png" mode=""></image>
			<view class="title clamp">夏天的清凉阳光孤儿院物资爱心捐赠活动</view>
			<view class="tip">
				<view class=""></view>
				基本信息
			</view>
			<view class="base-info">
				<view class="item">
					<text>捐赠进度</text>
					<text class="status">30%</text>
				</view>
				<view class="item">
					<text>创立时间</text>
					2021年6月10日
				</view>
				<view class="item">
					<text>开始时间</text>
					2021年6月10日
				</view>
				<view class="item">
					<text>结束时间</text>
					2021年6月10日
				</view>
			</view>
			<view class="dynamic flex">
				<view class="left">实时动态</view>
				<view class="right flex">
					<view>捐赠时间：2021年06月10日</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>
			</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>
		<view v-else class="">
			
		</view>
		<view class="btn-wrapper flex">
			<view class="btn1 btn">
				实时进展
			</view>
			<view class="btn2 btn">
				我要捐款
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navList: ['捐赠详情', '捐赠反馈'],
			currentIndex: 0,
			swiperHeight: 0
		};
	},
	methods: {
		navClick(index) {
			this.currentIndex = index;
		},
		
	}
};
</script>

<style lang="scss" scoped>
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: #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;
			font-family: PingFang SC;
			font-weight: 500;
			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;
			}
		}
	}
}
.content {
	.content-nav {
		height: 82rpx;
		background: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		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>