xinjiangMiniProgram/pages/subPage/ballots/vote/comp/topInfo.vue

<template>
	<view class="topInfo">
		<view class="bg padding">
			<view class="status_bar"></view>
			<up-navbar  title="投票表决" :safeAreaInsetTop="true" :autoBack="true" bgColor="transparent" ></up-navbar>
			<view class="tit">{{ detailInfo.title}}</view>
			<view class="textCon">
				<view class="p">
					<view class="txt">发起人：{{ detailInfo.makerName }}</view>
					<view class="txt">创建时间：{{ detailInfo.startTime }}</view>
					<view class="txt">截止时间：{{ detailInfo.endTime }}</view>
				</view>
				<!-- <view class="status">进行中</view> -->
				<view class="status"  v-if="detailInfo.voteStatus==0" style="opacity: 0.4;">未开始</view>
				<view class="status"  v-if="detailInfo.voteStatus==1">我要投票</view>
				<view class="status"  v-if="detailInfo.voteStatus==2" style="opacity: 0.4;">已结束</view>
			</view>
		</view>
		<view class="detail padding">
			{{detailInfo.detail}}
		</view>
		<view class="padding">
			
			<view class="row flex-b">
				<view class="flex">
					<view class="radionItem">{{ detailInfo.voteType==1?'单选': '多选'}}</view>
				</view>
				<view class="checkboxs">
					<text>{{detailInfo.userHiddenType?'实名': '匿名'}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	defineProps({
		detailInfo: {
			type: Object,
			default: {}
		}
	})
</script>

<style lang="scss" scoped>
	.topInfo {
		width: 100%;
		.detail {
			font-size: 28rpx;
		}
	  .bg {
	    width: 100%;
		background: linear-gradient(0deg, #ffffff 0%, #FFD4D3 100%);
		padding-top: 90rpx;
		padding-bottom: 20rpx;
	    .tit {
			font-size: 36rpx;
			padding: 10rpx 0 20rpx 0;
			font-weight: 700;
	    }
	
	    .textCon {
			display: flex;
	      .p {
			  font-size: 24rpx;
			  color: #9C9C9C;
			  flex: 1;
			  width: 0;
	        .txt {
				margin-bottom: 14rpx;
				
	        }
	      }
	
	      .status {
			width: 110rpx;
			font-size: 22rpx;
			height: 44rpx;
			background: #DE3A26;
			border-radius: 22rpx;
			line-height: 44rpx;
			text-align: center;
			color: #fff;
	      }
	    }
	  }
	
	  .row {
		  height: 90rpx;
		  margin-bottom: 40rpx;
		  border-bottom: 1px solid #EFEFEF;
	    .flex {
			flex: 1;
			width: 0;
	      .radionItem {
			font-size: 28rpx;
			margin-right: 30rpx;
			color: $themC;
			&.hui {
				color: #9C9C9C;
			}
	      }
	    }
	
	    .checkboxs {
	      font-size: 28rpx;
		  color: $themC;
	    }
	  }
	}
</style>