shuju_ui/qs_zhaoshang/pages/zdpages/count/timeprogress.vue

<template>
	<view class="timepro">
		<view class="flex0">
			<view class="zhanline"></view>
			<view class="time_top">
				<!-- <time-year @bindDateChange="bindDateChange" fields='month' textAlign='right' timetxt='选择日期'></time-year> -->
				<view class="time_btn" @click="getCuiFn">一键催报</view>
			</view>
		</view>
		<view class="tablebox">
			<table border='0' class='table'>
				<thead class='thead'> 
					<tr class="tr_one">  
						<th style="width: 351rpx;">
							<view class="tit">未汇报项目</view>
							<view class="num co1">12</view>
						</th>
						<th style="width: 351rpx;">
							<view class="tit">已汇报项目</view>
							<view class="num co2">12</view>
						</th>
						<!-- <th style="width: 200rpx;">年度完成投资(万元)</th> -->
					</tr>
				</thead>
				
				<tbody class="tbody">
					<tr v-for="(item,index) in list" :key="index">
						<td style="width: 351rpx;" >{{item.name}}</td>
						<td style="width: 351rpx;" class='co1'>{{item.a}}未汇报项目</td>
					</tr>
					<!-- <div class="shax" v-if="list.length>0">
						{{wtdt}}
					</div>
					<div class="shax" v-else><span>暂无数据</span></div> -->
					<!-- 查看更多 -->
					<view class="listmore">
						查看更多
						<image :src="moredimg"></image>
					</view>
				</tbody>
					
			</table>
		</view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="cuiflag"></view>
		<view class="fixedbox" v-if="cuiflag">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">一键催报</view>
			<view class="boxs">
				<view class="c34 f16 fw " style="text-align: center;">您确认要一键催报未汇报单位吗？</view>
			</view>
			<view class="fixedbtn" @click="getSubmit">确认</view>
		</view>
	</view>
</template>

<script>
	import timeYear from "@/components/timedata/timeyear.vue"
	export default{
		components:{
			timeYear,
		},
		data(){
			return{
				list:[{'name':'项目名称'},{'name':'项目名称'},{'name':'项目名称'},{'name':'项目名称'},{'name':'项目名称'}],
				wtdt:'',
				moredimg:require('@/static/images/new/index/mored.png'),
				closeimg:require('@/static/images/close.png'),
				cuiflag:false
			}
		},
		methods:{
			bindDateChange(){
				
			},
			getClose(){
				this.cuiflag=false;
			},
			getCuiFn(){
				this.cuiflag=true;
			}
		}
	}
</script>

<style lang="scss" scoped>
.timepro{display: flex;flex-direction: column;height: 100vh;
.time_top{display: flex;align-items: center;justify-content:space-between;padding: 20rpx 24rpx;}
	.time_btn{width: 168rpx;height: 60rpx;background: #FD5001;border-radius: 10rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;font-weight: 500;
color: #FFFFFF;}
}
// 表格
.tablebox{padding:10rpx 24rpx 0;flex: 1;display: flex;flex-direction: column;overflow: hidden;
	 th{padding:10rpx 8rpx;box-sizing: border-box;font-size: 28rpx;color: #343434;font-weight: bold;text-align: center;
		.num{font-size: 24rpx;margin-top: 8rpx;
		&.co1{color: #FE3155;}
		&.co2{color:#1686F6;}
		}
	 }
	}
	.table{border-spacing: 0;width: 100%;display: flex;flex-direction: column;overflow: hidden;}
	.thead{width: 100%;background-color: #F1F1F1;flex: 0 0 auto;border-radius: 10rpx;
	
	}
	.tbody {flex: 1;overflow: auto;}
	.tbody td{height: 120rpx;box-sizing: border-box;padding: 24rpx 14rpx;font-weight: 500;color: #343434;font-size: 28rpx;border-bottom: 2rpx solid #CDCDCD;text-align: center;word-break: break-all;
		&.co1{color: #FE3155;}
		&.co2{color:#1686F6;}
	
	}
	// 更多
.listmore{display: flex;align-items: center;justify-content: center;font-size: 30rpx;color: #aaaaaa;font-weight: 500;padding: 40rpx 24rpx;
	image{width: 24rpx;height: 24rpx;margin-left: 12rpx;}
}

.fixedbox{box-sizing: border-box;padding:42rpx 46rpx 60rpx;min-height: auto;
	.choseimg{top: 50rpx;}
	.boxs{padding: 60rpx 0 70rpx;}
	.fixedbtn{width:100%;height: 80rpx;background: #FF6400;
	border-radius: 10rpx;display: flex;align-items: center;justify-content: center;font-size: 32rpx;font-weight: bold;color: #FFFFFF;
		&.btn1{background-color: #20ACCF;margin-bottom: 36rpx;}
	}
}
</style>