safetyHome_wxapp/pages/complain/index.vue

<template>
	<view style="margin-top: 40rpx;">
		<view class="item">
			<view class="left">
				<image src="../../static/complain_icon_complain@2x.png" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="right">
				<view style="width:100%;height:44rpx;display: flex;justify-content: space-between;">
					<view class="name">明灯三千</view>
					<view class="topBtn" v-if="false">已处理</view>
					<view v-else class="topBtn" style="border:2rpx solid rgba(41,138,253,1);color:#298AFD;">未处理</view>
				</view>
				<view class="text">
					水龙头坏了了了了
				</view>
				<view class="img">
					<image src="../../static/opening_top_bgimage@2x.png" style="width: 180rpx;height: 180rpx;padding-right: 10rpx;margin-bottom: 10rpx;"></image>
					<image src="../../static/opening_top_bgimage@2x.png" style="width: 180rpx;height: 180rpx;padding-right: 10rpx;margin-bottom: 10rpx;"></image>
					<image src="../../static/opening_top_bgimage@2x.png" style="width: 180rpx;height: 180rpx;padding-right: 10rpx;margin-bottom: 10rpx;"></image>
					<image src="../../static/opening_top_bgimage@2x.png" style="width: 180rpx;height: 180rpx;padding-right: 10rpx;margin-bottom: 10rpx;"></image>
					<image src="../../static/opening_top_bgimage@2x.png" style="width: 180rpx;height: 180rpx;padding-right: 10rpx;margin-bottom: 10rpx;"></image>
					<image src="../../static/opening_top_bgimage@2x.png" style="width: 180rpx;height: 180rpx;padding-right: 10rpx;margin-bottom: 10rpx;"></image>
					<image src="../../static/opening_top_bgimage@2x.png" style="width: 180rpx;height: 180rpx;padding-right: 10rpx;margin-bottom: 10rpx;"></image>
					<image src="../../static/opening_top_bgimage@2x.png" style="width: 180rpx;height: 180rpx;padding-right: 10rpx;margin-bottom: 10rpx;"></image>
				</view>
				<!-- 回复信息 -->
				<view class="replay">
					<view style="width: 100%;margin: 20rpx 0rpx 20rpx 20rpx;">
						<view class="replayItem">
							<view class="replayName"><text style="font-size: 28rpx;color: #333333;font-family:PingFang SC;font-weight:bold;">物业
								</text><text style="color:rgba(51,51,51,1);">回复</text><text style="font-size: 28rpx;color: #333333;font-family:PingFang SC;font-weight:bold;margin-left: 5rpx;">肖战:</text></view>
							<view class="replayContent">换了一个新的，已经修好啦~</view>
						</view>
						<view class="replayItem">
							<view class="replayName"><text style="font-size: 28rpx;color: #333333;font-family:PingFang SC;font-weight:bold;">小赞
								</text><text style="color:rgba(51,51,51,1);">回复</text><text style="font-size: 28rpx;color: #333333;font-family:PingFang SC;font-weight:bold;margin-left: 5rpx;">肖战:</text></view>
							<view class="replayContent">换了一个新的，已经修好啦~</view>
						</view>
					</view>
				</view>
				<!-- 我要评论 -->
				<view class="bottomBtn" @tap="myTalk">我的评价</view>
				<view class="date">2020-01-21 12:31</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btnBox" @tap="myRepairs">
			我要投诉
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 我的评价
			myTalk() {
				uni.navigateTo({
					url: "./evaluateCompalin"
				})
			},
			// 我要投诉
			myRepairs() {
				uni.navigateTo({
					url: "./wantCompalin"
				})
			}
			
		}
	}
</script>

<style scoped>
	.leftBtn {
		width: 340rpx;
		height: 90rpx;
		background: rgba(102, 193, 143, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 90rpx;
	}

	.rightBtn {
		width: 340rpx;
		height: 90rpx;
		background: rgba(41, 138, 253, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 90rpx;
	}

	.btnBox {
		width: 702rpx;
		height: 90rpx;
		position: fixed;
		bottom: 56rpx;
		left: 24rpx;
		background: rgba(41, 138, 253, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 90rpx;
	}

	.date {
		width: 230rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(204, 204, 204, 1);
		margin-top: 10rpx;
		margin-left: 356rpx;
		text-align: right;
		margin-bottom: 30rpx;
	}

	.bottomBtn {
		width: 140rpx;
		height: 42rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(41, 138, 253, 1);
		opacity: 1;
		border-radius: 22rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: rgba(41, 138, 253, 1);
		text-align: center;
		margin-top: 40rpx;
		margin-left: 446rpx;
	}

	.replayItem {
		margin-top: 10rpx;
	}

	.replayContent {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 4rpx;
	}

	.replay {
		width: 586rpx;
		margin-top: 20rpx;
		background: rgba(247, 247, 247, 1);
		opacity: 1;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.text {
		width: 100%;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 30rpx;
	}
	.img {
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.img image :nth-child(3n){
		margin-right: none;
	}
	.name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);

	}

	.topBtn {
		width: 120rpx;
		height: 42rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(204, 204, 204, 1);
		opacity: 1;
		border-radius: 22rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(204, 204, 204, 1);
		text-align: center;
		line-height: 42rpx;
	}

	.item {
		width: 702rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid rgba(247, 247, 247, 1);
		display: flex;
		margin-top: 40rpx;
	}

	.left {
		width: 86rpx;
		height: 86rpx;
	}

	.right {
		width: 586rpx;
		margin-left: 30rpx;
	}
</style>