sooka_consult_uniapp/pages/handleAffairs/handleAffairs.vue

<template>
	<view>
			<view class="gpfwNav">
				<ul >
					<li v-for="(item,index) in gridtTypeLits" :key="index" >
						<image :src="'http://127.0.0.1:8080'+item.fileUrl" @click="querygrid(item)">{{item.name}}</image>
					</li>
					</ul>
			</view>
	</view>

</template>

<script>
	import {
		getList
	} from '@/api/handleAffairs/gridType.js';

	export default {
		data() {
			return {
				gridtTypeLits: [],
			};
		},
		created() {
			this.getList();
		},
		methods: {
			querygrid(item){
				console.log(item)
					uni.setStorageSync('id', item.id)
				    uni.navigateTo({
				        url: '/pages/gridQuery/gridQuery',
					
				    });
			},
			getList() {
				const _that = this
				let query = {yesOrNoShow: "0"};
				getList(query).then(res =>{
				 _that.gridtTypeLits = res.rows
				 console.log(res)
				});
				
			},
		}
	}
</script>
<style scoped>
.gpfwNav ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.gpfwNav ul li {
    margin: 20rpx 2.5% 30rpx 2.5%;
    font-size: 30rpx;
    color: #333;
    width: 20%;
    text-align: center;
}

.gpfwNav ul li view {
    width: 80rpx;
    height: 80rpx;
    margin: 0 auto 20rpx auto;
    border-radius: 20rpx;
    text-align: center;
    line-height: 80rpx;
}

.gpfwNav ul li view em {
    font-size: 50rpx;
    color: #fff;
}

.gpfwNav ul li view.lvxd {
    background: -webkit-linear-gradient(#eca6a6, #fd8585);
    background: -o-linear-gradient(#eca6a6, #fd8585);
    background: -moz-linear-gradient(#eca6a6, #fd8585);
    background: linear-gradient(#eca6a6, #fd8585);
}

.gpfwNav ul li view.xlzx {
    background: -webkit-linear-gradient(#bab3ec, #8170ff);
    background: -o-linear-gradient(#bab3ec, #8170ff);
    background: -moz-linear-gradient(#bab3ec, #8170ff);
    background: linear-gradient(#bab3ec, #8170ff);
}

.gpfwNav ul li view.xswz {
    background: -webkit-linear-gradient(#afd0ec, #61c5ff);
    background: -o-linear-gradient(#afd0ec, #61c5ff);
    background: -moz-linear-gradient(#afd0ec, #61c5ff);
    background: linear-gradient(#afd0ec, #61c5ff);
}

.gpfwNav ul li view.gxs {
    background: -webkit-linear-gradient(#c1fdc9, #57f5a1);
    background: -o-linear-gradient(#c1fdc9, #57f5a1);
    background: -moz-linear-gradient(#c1fdc9, #57f5a1);
    background: linear-gradient(#c1fdc9, #57f5a1);
}

.gpfwNav ul li view.more {
    background: -webkit-linear-gradient(#46aef7, #1dd5e6);
    background: -o-linear-gradient(#46aef7, #1dd5e6);
    background: -moz-linear-gradient(#46aef7, #1dd5e6);
    background: linear-gradient(#46aef7, #1dd5e6);
}
</style>