jp-railway/pages/staffHome/teamHonor/badgeDetails.vue

<template>
	<view>
		<u-navbar title="徽章详情"></u-navbar>
		<!-- 荣誉名称 -->
		<view class="honor-name">
			<view class="icon">
				<img src="../../../assets/img/honorPic1.png" alt="">
			</view>
			<view class="name">
				荣誉名称
			</view>
			<view class="explain">
				荣誉说明荣誉说明荣誉说明荣誉说明荣
			</view>
		</view>
		<!-- 荣誉记录 -->
		<view class="record">
			<view class="record-title">
				<view class="rec">

				</view>
				<view class="text">
					荣誉记录
				</view>
			</view>

			<view class="commend-box">
				<view class="commend-content">
					<view class="title">
						综合办公室
					</view>
					<view class="commendation">
						荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明
					</view>
					<view class="integral">
						<view class="flex">
							<view class="icon">
								<img src="../../../assets/img/riFill-copper-diamond-fill@2x.png" alt="">
							</view>
							<view class="text">
								每人20~50积分
							</view>
						</view>
						<view class="date">
							2023-01-15
						</view>
					</view>
				</view>
				
			</view>
			<view class="commend-box">
				<view class="commend-content">
					<view class="title">
						党建科
					</view>
					<view class="commendation">
						荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明
					</view>
					<view class="integral">
						<view class="flex">
							<view class="icon">
								<img src="../../../assets/img/riFill-copper-diamond-fill@2x.png" alt="">
							</view>
							<view class="text">
								每人20~50积分
							</view>
						</view>
						<view class="date">
							2023-01-15
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page{
		font-family: 'Regular';
	}
	// 荣誉名称
	.honor-name {
		background-color: #fff;
		padding: 32rpx 0;
		text-align: center;
    
		.icon {
			img {
				width: 136rpx;
				height: 140rpx;
			}
		}

		.name {
			color: rgba(51, 51, 51, 1);
			font-size: 18px;
		}

		.explain {
			color: rgba(119, 119, 119, 1);
			margin-top: 24rpx;

		}
	}

	// 荣誉记录
	.record {
		margin-top: 26px;
		padding: 0 32rpx;

		.record-title {
			display: flex;
			align-items: center;
			margin-bottom: 19px;
           color: rgba(51, 51, 51, 1);
            font-size: 18px;
			line-height: 18px;
			font-family: 'Regular';
			.rec {
				width: 4px;
				height: 16px;
				background-color: rgba(31, 74, 153, 1);
				margin-right: 4px;
			}
		}


		.commend-box {
			background-color: #fff;
			border-radius: 8px;
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
            margin-bottom: 12px;
			.commend-content {
				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					line-height: 23px;
					font-family: 'Medium';
				}

				.commendation {
					color: rgba(119, 119, 119, 1);
					font-size: 12px;
					line-height: 17px;
					margin-top: 4rpx;
					
				}

				.integral {
					margin-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.flex{
						display: flex;
						border-radius: 50px;
						height: 28px;
						font-size: 24rpx;
						background-color: rgba(230, 239, 255, 1);
						justify-content: center;
						align-items: center;
						padding: 0 16rpx;
						.icon {
							width: 32rpx;
							height: 32rpx;
						
							img {
								width: 100%;
							}
						}
						
						.text {
							font-size: 24rpx;
							color: rgba(119, 119, 119, 1);
						}
					}

				}
				.date{
					color: rgba(153, 153, 153, 1);
					font-size: 12px;
				}
			}

			
		}
	}
</style>