jp-railway/pages/staffHome/staffHome.vue

<template>
	<view>
		<u-navbar title="职工之家"></u-navbar>
		<view class="banner">
			<view class="">
				2023年度荆州市地方铁路优先公司
			</view>
			<view class="">
				企业文化建设获奖名单
			</view>
		</view>

		<view class="grid">
			<u-grid :col="3" :border="false">
				<u-grid-item>
					<view class="icon">
						<img src="../../assets/img/riFill-vip-crown-2-fill@2x.png" alt="">
					</view>
					<view class="grid-text">公司表彰</view>
				</u-grid-item>
				<u-grid-item>
					<view class="icon icon0">
						<img src="../../assets/img/tdry.png" alt="">
					</view>
					<view class="grid-text">团队荣誉</view>
				</u-grid-item>
				<u-grid-item>
					<view class="icon icon1">
						<img src="../../assets/img/fxkj.png" alt="">
					</view>
					<view class="grid-text">分享空间</view>
				</u-grid-item>
				<u-grid-item>
					<view class="icon icon 2">
						<img src="../../assets/img/hdzx.png" alt="">
					</view>
					<view class="grid-text">活动中心</view>
				</u-grid-item>
				<u-grid-item>
					<view class="icon icon3">
						<img src="../../assets/img/hdjl.png" alt="">
					</view>
					<view class="grid-text">活动奖励</view>
				</u-grid-item>
				<u-grid-item>
					<view class="icon icon4">
						<img src="../../assets/img/phb.png" alt="">
					</view>
					<view class="grid-text">排行榜</view>
				</u-grid-item>
				<u-grid-item>
					<view class="icon icon5">
						<img src="../../assets/img/jfyh.png" alt="">
					</view>
					<view class="grid-text">积分兑换</view>
				</u-grid-item>

			</u-grid>
		</view>


		<tabbar current="1"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/Tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.banner {
		margin: 32rpx;
		background: url(../../assets/img/banner.png) no-repeat;
		background-size: 100% 200rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 40rpx;
		text-align: center;
		padding: 44rpx 0;
		font-family: 'Medium';
	}

	.grid {
		font-family: 'Regular';
		.icon {
			width: 96rpx;
			height: 96rpx;
			border-radius: 8px;
			background: linear-gradient(180deg, rgba(134, 198, 255, 1) 0%, rgba(76, 161, 255, 1) 100%);
			display: flex;
			align-items: center;
			text-align: center;
			justify-content: center;

			img {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.icon0 {
			background: linear-gradient(180deg, rgba(255, 212, 119, 1) 3%, rgba(255, 186, 88, 1) 100%);
		}

		.icon1 {
			background: linear-gradient(180deg, rgba(103, 226, 232, 1) 2%, rgba(54, 202, 209, 1) 100%);
		}

		.icon2 {
			background: linear-gradient(180deg, rgba(189, 172, 255, 1) 0%, rgba(162, 139, 255, 1) 100%);
		}

		.icon3 {
			background: linear-gradient(180deg, rgba(255, 168, 118, 1) 0%, rgba(255, 152, 92, 1) 100%);
		}

		.icon4 {
			background: linear-gradient(180deg, rgba(134, 198, 255, 1) 0%, rgba(76, 161, 255, 1) 100%);
		}

		.icon5 {
			background: linear-gradient(180deg, rgba(103, 226, 232, 1) 2%, rgba(54, 202, 209, 1) 100%);
		}

		.grid-text {
			margin-top: 16rpx;
		}
	}
</style>