questionFeedBack.vue 3.3 KB
<template>
	<view style="padding: 20rpx 32rpx;">
		<view class="questionFeedBack">
			<view class="questionNameWrap">
				<text>第二季度税务报表单据</text>
				<!-- 条件判断是否已办理,注意颜色切换(待办理、已办理、已解决)-->
				<view 
					class="questionStatus" 
					:style="{
						background:status == 1 ? ' #fffbe8' : status == 2 ? ' #f7f8fa' : '#cbe0ff',
						color:status == 1 ? ' #fa700c' : status == 2 ? ' #323233' : '#2e7ff9'}"
				>
					{{status == 1 ? '待办理' : status == 2 ? '已办理' : '已解决'}}
				</view>
			</view>
			<view class="roomName">
				财务科
			</view>
			<view class="imgList">
				<image src="../../static/image/del/ic_90@2x.png" mode=""></image>
				<image src="../../static/image/del/ic_90@2x.png" mode=""></image>
				<image src="../../static/image/del/ic_90@2x.png" mode=""></image>
			</view>
			<view class="questionContent">
				税务报表已经提交了,什么时候可以查询的到相应信息从时间上可以追溯到20世纪30年代;最为典型的是30年代英国一则判例。1935年,英国上议院议员汤姆林爵士针对“税务局长 。
			</view>
			<view class="questionTime">
				2020/12/12
			</view>
			<!-- 条件判断是否已办理,已办理显示此项 -->
			<view class="userInfo">
				<view class="infoItem">
					人员名称:张某人
				</view>
				<view class="infoItem">
					职位:销售总经理
				</view>
				<view class="infoItem">
					手机号:182023569652
				</view>
			</view>
			<!-- 条件判断是否已办理,未办理显示此项 -->
			<!-- 底部按钮区域 -->
			<view class="loginBtnWrap">
				<view class="loginBtn">
					{{status == 3 ? '已解决' : '解决'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				status:3
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $uni-bg-color-hui;
	}
	.questionFeedBack{
		background: $uni-bg-bai-color;
		border-radius: 20rpx;
		padding: 32rpx;
		.questionNameWrap{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{font-size: 34rpx;}
			.questionStatus{
				width: 100rpx;
				height: 40rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: $uni-font-size-24;
			}
		}
		.roomName{
			font-size: $uni-font-size-26;
			color: $uni-text-color-hui;
		}
		.imgList{
			display: flex;
			flex-wrap: wrap;
			image{width: 198rpx;height: 194rpx;margin-right: 14rpx;margin-top: 20rpx;}
			image:nth-of-type(3n){margin-right:0;}
		}
		.questionContent{
			padding-top: 32rpx;
			font-size: $uni-font-size-28;
			color: $uni-text-color-hui;
			line-height: 48rpx;
		}
		.questionTime{
			padding-top: 32rpx;
			text-align: right;
			font-size: $uni-font-size-26;
			color: $uni-text-color-hui;
		}
		.userInfo{
			padding: 0 32rpx 32rpx 32rpx;
			margin-top: 32rpx;
			background: #f7f8fa;
			border-radius: 20rpx;
			.infoItem{
				padding-top: 32rpx;
			}
		}
		/* 底部按钮区域 */
		.loginBtnWrap{
			padding-top: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.loginBtn{
				width: 686rpx;
				height: 88rpx;
				background: $uni-bg-main-color;
				border-radius: 96rpx;
				text-align: center;
				color: $uni-bg-bai-color;
				line-height: 88rpx;
				font-size: $uni-font-size-32;
			}
		}
	}
</style>