NewZkgj/pages/mine/reportExcel/dayReport.vue

<template>
	<view class="pages">
		<!-- 导航栏 -->
		<view class="nav-header">
			<u-navbar  title="数智工牌日报" titles="05.02"></u-navbar>
		</view>
		<!-- 日报内容部分 -->
		<view class="container">
			<!-- 头部日报卡 -->
			<view class="c-head-card">
				<view class="c-title-text">
					桃源避暑山庄新型项目数智工牌日报
					<text class="date">01月27日</text>
				</view>
				<view class="creative-time">
					生成时间：2022-01-27 22:00
				</view>
			</view>
			
			<!-- 循环渲染的数据 -->
			<view class="dateList">
				<!--  -->
				<view class="arrs">
					<block v-for="(data, index) in 11" :key="index">
						<view class="arrs-items">
							<view class="left">
								{{ index+1 }}
							</view>
							<view class="right">
								<view class="r-title">
									<text>接待量：</text>
									<text class="num">879次</text>
								</view>
								<view class="r-box">
									<view class="r-box-item">
										<text>接待量</text><text>100</text>
									</view>	
									<view class="r-box-item">
										<text>有效接待</text><text>100</text>
									</view>	
									<view class="r-box-item-lang">
										<view>有效接待率<text>80%</text></view>
										<view class="contrast">对比昨天<text class="down">-5%</text></view>
									</view>	
								</view>
								<view class="ranking">
									<block v-for="(rank, rankIndex) in 3" :key="rankIndex">
										<view class="ranking-item">
											<view class="serial">
												{{ rankIndex+1 }}
											</view>
											<view class="lside">
												产品设计
											</view>
											<view class="rside">
												(100%)
											</view>
										</view>
									</block>
								</view>	
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.pages {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		
		.nav-header {
			flex-shrink: 0;
		}
		
		.container {
			padding: 30rpx 30rpx 0;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			
			.c-head-card {
				padding: 30rpx;
				width: 100%;
				height: 252rpx;
				border: 2rpx solid #000000;
				border-radius: 12rpx;
				box-shadow: 10rpx 10rpx #2671E2;
				display: flex;
				flex-direction: column;
				
				.c-title-text {
					position: relative;
					flex-grow: 1;
					font-size: 48rpx;
					color: #303030;
					
					.date {
						position: absolute;
						right: 0;
						bottom: 6rpx;
						font-size: 30rpx;
						color: #303030;
					}
				}
				
				.creative-time {
					margin: 20rpx 0 0 0;
					flex-shrink: 0;
					
				}
				
			}
			
			
			.dateList {
				width: 100%;
				
				.arrs {
					width: 100%;
					
					.arrs-items {
						margin: 40rpx 0 0 0;
						display: flex;
						
						.left {
							flex-shrink: 0;
							margin-right: 12rpx;
							width: 48rpx;
							height: 44rpx;
							display: flex;
							justify-content: center;
							border-radius: 8rpx;
							border: 1rpx solid #999999;
							font-size: 32rpx;
						}
						
						.right {
							flex-grow: 1;
							
							.r-title {
								font-size: 32rpx;
								height: 44rpx;
								display: flex;
								align-items: center;
								
								.num {
									font-size: 34rpx;
									
								}
							}
							
							.r-box {
								padding: 21rpx 0 0 0;
								display: flex;
								flex-wrap: wrap;
								
								.r-box-item {
									margin-right: 24rpx;
								}
								
								.r-box-item-lang {
									margin-top: 19rpx;
									width: 100%;
									display: flex;
									align-items: center;
									
									.contrast {
										margin: 0 0 0 24rpx;
										display: flex;
										align-items: center;
									}
									
									.down {
										color: #43CD80;
										font-size: 34rpx;
									}
									
									.up {
										font-size: 34rpx;
										color: #E7483C;
									}
								}
							}
							
							.ranking {
								padding: 21rpx 0 0 0;
								display: flex;
								flex-direction: column;
								
								.ranking-item {
									margin-bottom: 22rpx;
									display: flex;
									align-items: center;
									font-size: 30rpx;
									
									.serial {
										flex-shrink: 0;
										width: 42rpx;
										height: 42rpx;
										background: #2671E2;
										border-radius: 50%;
										display: flex;
										justify-content: center;
										align-items: center;
										color: #fff;
									}
									
									.lside {
										margin: 0 20rpx;
										color: #505050;
										
									}
									
									.rside {
										flex-shrink: 0;
										font-size: 32rpx;
									}
								}
							}
							
						}
					}
				}
			}
		}
	}
</style>