safetyHome_wxapp/pages/index/detail.vue

<!-- 物业公告信息详情 -->
<template>
	<view class="pageBg">
		<image src="../../static/announcement_bgimage@2x.png" style="width: 100%;height: 100%;"></image>
		<view class="content">
			<view style="display: flex;" :style="{marginTop:phoneHeight + 'px'}">
				<view style="width: 48rpx;height: 48rpx;margin-left: 24rpx;margin-top: 18rpx;" @tap="back">
					<image src="../../static/icon_back@2x(1).png" style="width: 100%;height: 100%;"></image>
				</view>
					<view class="topTitle" >物业公告</view>
			</view>
				<view class="infoBox">
					<view class="infoTitle">
						停电通知
					</view>
					<view class="infoDate">
						<view style="">2020-02-02</view>
						<view>阅读 15</view>
					</view>
					<view class="main">
						<text style="margin-top: 20rpx;">
							尊敬的各位业主/住户：
							因本小区主自来水管网阀门损坏需紧急停水抢修，今日下午15：30分进行临时对本小区临时停水，开始对自来水的主管道阀门进行紧急抢修更换。届时本小区11号楼2号楼3号楼的生活用水将受影响，预计在晚20：00左右管道维修完毕后恢复正常供水，因自来水管道阀门更换抢修工作给您生活带来的不便敬请谅解，感谢您对我们物业服务工作的理解和支持。特此通知！
						</text>
					
					</view>
				</view>
				<view  class="company">青海旺业物业有限公司</view>
				<view class="date">
					2020年02月02日
				</view>
		</view>
	

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneHeight: 0, //手机状态栏的高度
			}
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods:{
			// 返回上个页面
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped>
	.date{
		width: 90%;
		height: 40rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(41,138,253,1);
		margin: 0 auto;
		position: absolute;
		bottom: 160rpx;
		left: 88rpx;
	}
	.company{
		width: 90%;
		height: 40rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(41,138,253,1);
		margin: 0 auto;
		position: absolute;
		bottom: 206rpx;
		left: 88rpx;
	}
	.content{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.main {
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-top:2rpx solid rgba(244,244,244,1);
	}
	
	.infoDate {
		width: 90%;
		height: 34rpx;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 20rpx;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);

	}

	.infoTitle {
		width: 132rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);
		margin-top: 180rpx;
		margin-left: 30rpx;
	}

	.infoBox {
		width: 80%;
		height: 900rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 46rpx;
		/* border: 1rpx solid #333333; */
		/* background-color: #FFFFFF; */
	}

	.pageBg {
		width: 100%;
		height: 100vh;
		/* background-image: url(../../static/announcement_bgimage@2x.png); */
		background-size: 100% 100%;

	}

	.topTitle {
		width: 140rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color:rgba(255,255,255,1);
		/* color: #333333; */
		margin: 0 auto;
		padding-top: 20rpx;
	}
</style>