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

<template>
	<view>
		<u-navbar title="团队荣誉"></u-navbar>
		<view class="tabs">
			<u-tabs bar-width="60" inactive-color="#777777" active-color="#018bb9" height="88" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		
		<view class="commend-box">
			<view class="commend-content">
				<view class="title">
					综合办公室
				</view>
				<view class="commendation">
					荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明
				</view>
				<view class="integral">
					<view class="icon">
						<img src="../../../assets/img/riFill-copper-diamond-fill@2x.png" alt="">
					</view>
					<view class="text">
						每人20~50积分
					</view>
				</view>
			</view>
			<view class="gainer">
				<img src="../../../assets/img/honorPic1.png" alt="">
				<view class="name">
					荣誉名称
				</view>
			</view>
		</view>
		
		<view class="commend-box">
			<view class="commend-content">
				<view class="title">
					党建科
				</view>
				<view class="commendation">
					荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明荣誉说明
				</view>
				<view class="integral">
					<view class="icon">
						<img src="../../../assets/img/riFill-copper-diamond-fill@2x.png" alt="">
					</view>
					<view class="text">
						每人20~50积分
					</view>
				</view>
			</view>
			<view class="gainer">
				<img src="../../../assets/img/honorPic2.png" alt="">
				<view class="name">
					荣誉名称
				</view>
			</view>
		</view>
		<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '荣誉类型'
				}, {
					name: '荣誉类型',
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		background-color: rgba(255, 255, 255, 1);
		/deep/.u-tabs{
			width: 408rpx;
		}
		margin-bottom: 24rpx;
	}
	
	.commend-box{
		background-color: #fff;
		border-radius: 8px;
	    margin: 0 32rpx 24rpx 32rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		.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;
				width: 430rpx;
			}
			.integral{
				font-family: 'Regular';
				margin-top: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(230, 239, 255, 1);
				width: 260rpx;
				border-radius: 50px;
				height: 28px;
				font-size: 24rpx;
				.icon{
					width: 32rpx;
					height: 32rpx;
					img{
						width: 100%;
					}
				}
				.text{
					font-size: 24rpx;
					color: rgba(119, 119, 119, 1);
				}
				
			}
		}
	
	.gainer{
			
		img{
			width: 136rpx;
			height: 140rpx;
			border-radius: 50px;
		}
		.name{
			text-align: center;
			color: rgba(51, 51, 51, 1);
			font-family: 'Regular';
		
		}
	}
	}
</style>