newjzred/pages/index/love.vue

<template>
	<view class="content">
		<view class="love">
			<image src="../../static/img/love-top.png" mode="widthFix" class="love-top"></image>
		</view>
		<view class="item-wrapper" style="height: 318rpx;padding: 70rpx 34rpx 0;margin-top: 60rpx;">
			<view class="item-tit">
				线上捐款
			</view>
			<view class="item-info">
				荆州市红十字会现已开通线上捐款通道 ,点击下方按钮可直接进行线上捐款。
			</view>
			<view class="item-btn flex">
				<view class="item-btn-btn" @click="goto()">
					立即捐款
				</view>
			</view>
		</view>
		<view class="item-wrapper" style="height: 259rpx;padding:75rpx 34rpx 40rpx 34rpx;">
			<view class="item-tit">
				银行转账
			</view>
			<view class="item-info">
				<view class="info-item">
					<view class="left-name">
						<view class="">
							户
						</view>
						<view class="">
							开
						</view>
						<view class="">
							名
						</view>
					</view>
					：荆州市红十字会
				</view>
				<view class="info-item">
					<view class="left-name">
						<view class="">
							银
						</view>
						<view class="">
							行
						</view>
						<view class="">
							账
						</view>
						<view class="">
							户
						</view>
					</view>
					：566457531072
				</view>
				<view class="info-item">
					<view class="left-name">
						<view class="">
							开
						</view>
						<view class="">
							户
						</view>
						<view class="">
							行
						</view>
					</view>
					：中国银行荆州分行营业部
				</view>
			</view>
		</view>
		<view class="item-wrapper" style="height: 259rpx;padding:75rpx 34rpx 40rpx 34rpx;margin-bottom: 0;">
			<view class="item-tit">
				线下捐物
			</view>
			<view class="item-info">
				<view class="info-item">
					<view class="left-name">
						<view class="">
							负
						</view>
						<view class="">
							责
						</view>
						<view class="">
							人
						</view>
					</view>
					：高楠清
				</view>
				<view class="info-item">
					<view class="left-name">
						<view class="">
							咨
						</view>
						<view class="">
							询
						</view>
						<view class="">
							电
						</view>
						<view class="">
							话
						</view>
					</view>
					：0716-4163849
				</view>
				<view class="info-item">
					<view class="left-name">
						<view class="">
							地
						</view>
						<view class="">
							址
						</view>
					</view>
					：荆州市沙市区关沮镇青藜路128号
				</view>
			</view>

		</view>
		<view class="love">
			<image src="../../static/img/love-btm.png" mode="widthFix" class="love-top"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
goto() {
	uni.navigateTo({
		url:'/pages/applic/contribution'
	})
}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
		height: auto;
		background-color: #f9f2ea;
	}

	.love {
		.love-top {
			width: 750rpx;
		}

		width: 750rpx;
	}

	.item-wrapper {
		width: 636rpx;
		margin: 0 auto 76rpx;
		border: 1px dashed #C9101B;
		background: #fff;
		border-radius: 10px;
		position: relative;

		.item-tit {
			border: 1px solid #da0000;
			width: 260rpx;
			height: 70rpx;
			background: #fff;
			border-radius: 35rpx;
			text-align: center;
			line-height: 70rpx;
			font-size: 34rpx;
			font-weight: bold;
			color: #da0000;
			position: absolute;
			top: -28rpx;
			left: 0;
			right: 0;
			margin: auto;
			box-shadow: 7rpx 5rpx 5rpx #c9c6cd;
		}

		.item-info {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ed4530;
			line-height: 49rpx;
			// background: linear-gradient(0deg, #C9101B 0%, #F24D33 99.267578125%);
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			width: 100%;

			.info-item {
				display: flex;

				.left-name {
					width: 130rpx;
					// display: inline-block;
					display: flex;
					justify-content: space-between;
				}
			}

		}

		.item-btn {
			justify-content: center;
			align-items: center;
			height: 72rpx;
			position: absolute;
			bottom: 50rpx;
			width: 568rpx;

			.xcb {
				width: 80rpx;
				height: 50rpx;
			}

			.item-btn-btn {
				width: 412rpx;
				height: 72rpx;
				margin: 0 10rpx;
				background: #d70000;
				border-radius: 20rpx;
				line-height: 72rpx;
				text-align: center;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.tab-wrap {
			padding: 53rpx 40rpx 28rpx 33rpx;
			height: 410rpx;

			.tab-item {
				line-height: 45rpx;
				height: 45rpx;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ed4530;
				// background: linear-gradient(0deg, #C9101B 0%, #F24D33 99.267578125%);
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
		}

	}
</style>