jp-railway/pages/oawork/index.vue

<template>
	<view>
		<u-navbar title="办公OA">
			
		</u-navbar>
		<view class="mainBody">
			<view class="mainItem" v-for="(info,i) in  list" :key="i" >
				<view class="name">{{info.name}}</view>
				<view class="grid">
					<u-grid :col="3" :border="false">
						<u-grid-item   v-for="(item,index) in info.list" :key="index"   	@click="gotoItem(info,item)" >
							<view class="gridItem" :style="item.bgColor?item.bgColor:info.bgColor">
								<img :src="item.img?item.img:info.img" alt="">
								
							</view>
							<view class="grid-text">{{item.name}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<u-divider  bg-color="#F2F4F4"  >已经到底了</u-divider>
		
	</view>
</template>

<script>
	var img1 =require("@/assets/img/oawork/riFill-file-4-fill.svg")
	var img2 =require("@/assets/img/oawork/riFill-edit-box-fill.svg")
	var img3 =require("@/assets/img/oawork/if-stamp.svg")
	var img4 =require("@/assets/img/oawork/riFill-file-list-2-fill.svg")
	var img5 =require("@/assets/img/oawork/riFill-numbers-fill.svg")
	
	var bg1 =require("@/assets/img/oawork/bg1.png")
	var bg2 =require("@/assets/img/oawork/bg2.png")
	
	
	export default {
		data() {
			return {
				list:[
					{
						name:"公文提报",
						img:img1,
						url:"/pages/oawork/business/list",
						bgColor:"background: linear-gradient(90deg, rgba(82,222,216,1) 0%,rgba(89,196,196,1) 50%,rgba(22,164,167,1) 100%);",
						list:[
							{
								name:"发文申请",
								type:"oa2"
							},
							{
								name:"合同审核表",
								type:"oa3"
							},
							{
								name:"收文处理专门笺",
								type:"oa6"
							}
						],
					},
					{
						name:"申请提交",
						img:img2,
						url:"/pages/oawork/business/list",
						bgColor:"background-color: rgba(0, 185, 98, 1);",
						
						list:[
							{
								name:"打印机维护",
								type:"oa1"
							},
							{
								name:"计算机维护",
								type:"oa4"
							},
							{
								name:"公司申请单",
								type:"oa5"
							},
							{
								name:"外出登记单",
								type:"oa7"
							},
							{
								name:"网络信息发布",
								type:"oa8"
							},
							{
								name:"用车申请",
								type:"oa9"
							},
							{
								name:"运输生产事项",
								type:"oa10"
							}
						],
					},
					{
						name:"代办审批",
						url:"/pages/oawork/approve/list",
						img:img3,
						bgColor:"background-color: rgba(22, 119, 255, 1);",
						
						list:[
							{
								name:"公文类型1",
								type:"oa1"
							},
							{
								name:"公文类型1",
								type:"oa2"
							},
							{
								name:"公文类型1",
								type:"oa3"
							}
						],
					},
					{
						name:"运输指标",
						img:img3,
						bgColor:"background-color: rgba(22, 119, 255, 1);",
						
						list:[
							{
								name:"数据明细",
								type:"oaoao1",
								url:"/pages/oawork/data1",
								img:img4,
								bgColor:"background: url("+bg2+");",
								
							},
							{
								name:"数据分析",
								type:"oaoao1",
								url:"/pages/oawork/data1",
								img:img5,
								//bgColor:"background: radial-gradient(1.1496160000000002% 1.089584% at -8.7% -3.6999999999999997%, rgba(163,221,255,1) 0%,rgba(144,116,255,1) 100%);",
								bgColor:"background: url("+bg1+");",
								
							}
						],
					}
				]
			}
		},
		methods: {
			gotoItem(info,item){
				uni.navigateTo({
					url:(item.url?item.url:info.url)+"?oatype="+item.type
				})
			}
		}
	}
</script>


<style  lang="scss" scoped >
	.mainBody{
		.mainItem{
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			line-height: 40rpx;
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			margin: 32rpx;
			padding: 24rpx 32rpx;
			//display: flex;
			//justify-content: space-between;
			.name{
				font-size: 36rpx;
			}
			.grid{
				.gridItem{
					width: 80rpx;
					height: 80rpx;
					border-radius: 8px;
					display: flex;
					margin-bottom: 8rpx;
					justify-content: center;
					align-items: center;
					img{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
			.left{
				
			}
		}
	}
</style>