jp-railway/pages/staffHome/commend.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">
						100积分
					</view>
				</view>
			</view>
			<view class="gainer">
				<img src="../../assets/img/photo.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">
						50积分
					</view>
				</view>
			</view>
			<view class="gainer">
				<img src="../../assets/img/dmr.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: 480rpx;
				font-family: 'Regular';
			}
			.integral{
				margin-top: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(230, 239, 255, 1);
				width: 164rpx;
				border-radius: 50px;
				height: 28px;
				.icon{
					width: 32rpx;
					height: 32rpx;
					img{
						width: 100%;
					}
				}
				.text{
					font-size: 12px;
					color: rgba(119, 119, 119, 1);
					font-family: 'Regular';
				}
				
			}
		}
	
	.gainer{
		img{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50px;
		}
		.name{
			text-align: center;
			color: rgba(51, 51, 51, 1);
			margin-top: 8rpx;
		}
	}
	}
</style>