zz--front/pages2/wd/help.vue

<template>
	<view style="position: relative;">
		<u-navbar  title="助学活动" background="{ background: '#ffffff',opacity:0.4; }"></u-navbar>
		<view style="width: 100%;position: fixed;top: 0;z-index: 300;">
			<image src="/static/bg_help.jpg" style="width: 100%;" mode="widthFix"></image>
		</view>
		<view style="padding: 20rpx;" :style="'margin-top:'+imgHeight+'px'">
			<view class="activity_box" v-for="(item,index) in list" :key="index">
				<view class="box_title">
					“免费学”公益助学进行时
				</view>
				<view>
					<image  src="http://192.168.0.222:8080/img/banner.png" style="width: 100%;height: 330rpx;"></image>
				</view>
				<u-row >
					<u-col span="6" >
						<view class="box_title">
							2021-04-22至2021-05-01
						</view>
					</u-col>
					<u-col span="6" text-align="right">
						<view style="padding: 8rpx;">
							<view class="boxbtn">
								立即参与
							</view>
						</view>
					</u-col>
				</u-row>
		
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[1,1,1,1,1,1,1,1,1,1],
				imgHeight:0
			}
		},
		onLoad(option) {
			
		},
		onShow(){
			let w = uni.getSystemInfoSync().windowWidth
			this.imgHeight = w/(750/375)-68 
			console.log(w,33)
			console.log(this.imgHeight,33)
		},
		methods: {
			
		
		},
		
	}
</script>
<style>
	.u-border-bottom:after, .u-border-left:after, .u-border-right:after, .u-border-top-bottom:after, .u-border-top:after, .u-border:after{
		border:none !important;
	}

	
</style>
<style scope>
	.boxbtn{
		width: 132rpx;
		height: 40rpx;
		background: rgba(249, 96, 10, 0.6);
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		float: right;
		text-align: center;
		line-height: 40rpx;
		
	}
	.box_title{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2F4379;
		padding: 15rpx;
	}
	.activity_box{
		width: 100%;
		height: 466rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx;
		position: relative;
		margin-bottom: 20rpx;
	}
	
page {
		background: #FFFFFF;
	}
</style>