jp-railway/pages/staffHome/staffHome.vue

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

		<view class="grid">
			<u-grid :col="3" :border="false">
				<u-grid-item  @click="ckList2()" v-if="false" >
					<view class="icon icon0">
						<img src="../../assets/img/tdry.png" alt="">
					</view>
					<view class="grid-text">荣誉列表</view>
				</u-grid-item>
				<u-grid-item  @click="gotoUrl('pages/staffHome/teamHonor/teamHonor?type=my')" >
					<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   @click="gotoUrl('pages/staffHome/teamHonor/teamHonor?type=team')" >
					<view class="icon icon0">
						<img src="../../assets/img/tdry.png" alt="">
					</view>
					<view class="grid-text">团队荣誉</view>
				</u-grid-item>
				<u-grid-item   @click="gotoUrl('pages/staffHome/filesonic')">
					<view class="icon icon1">
						<img src="../../assets/img/fxkj.png" alt="">
					</view>
					<view class="grid-text">分享空间</view>
				</u-grid-item>
				<u-grid-item  @click="gotoUrl('pages/staffHome/activityCenter/activityCenter')">
					<view class="icon icon 2">
						<img src="../../assets/img/hdzx.png" alt="">
					</view>
					<view class="grid-text">活动中心</view>
				</u-grid-item>
				<u-grid-item  @click="gotoUrl('pages/staffHome/activityReward/activityReward')">
					<view class="icon icon3">
						<img src="../../assets/img/hdjl.png" alt="">
					</view>
					<view class="grid-text">活动奖励</view>
				</u-grid-item>
				<u-grid-item    @click="gotoUrl('pages/mine/points/rankingList')" >
					<view class="icon icon4">
						<img src="../../assets/img/phb.png" alt="">
					</view>
					<view class="grid-text">排行榜</view>
				</u-grid-item>
				<u-grid-item  v-if="false" @click="gotoUrl('pages/mine/points/pointsExchange/pointsExchange')" >
					<view class="icon icon5">
						<img src="../../assets/img/jfyh.png" alt="">
					</view>
					<view class="grid-text">积分兑换</view>
				</u-grid-item>
				
              <u-grid-item >
              	<view class="icon icon6">
              		<img src="../../assets/img/dcsb.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 {
				noticeList:[
					"9dbeddd2-a863-42d0-a145-260fe008bdbb",//	个人荣誉0
					"412eff92-a443-42f7-98c6-5c67d9e64ad8",//	集体荣誉1	
					
				],
			}
		},
		onShow(){
			
		},
		methods: {
			ckList2(){
				var url="/pages/news/list";
				uni.navigateTo({
					url:url
				})
			},
			ckList(id,title){
				var url="/pages/news/news?id="+id+"&title="+title;
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</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%);
		}
		.icon6{
			background: linear-gradient(180deg, rgba(189,172,255,1) 0%,rgba(162,139,255,1) 100%);
		}

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