FE_DQ-Client-Mini-Code/pages/guarantee/guarantee.vue

<template>
	<view class="">
		<!-- <view class="bottom-border guarantee-title">
			<view class="left-border"><text class="mgl10">我的</text></view>
		</view>
		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">			
			<view class="cu-item bg-guarantee" v-for="(item,index) in myList" :key="index">
				<navigator hover-class='none' :url="'/pages/' + item.url +'/' + item.url" class="nav-li" navigateTo
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
					<image :style="item.style" :src="item.img"></image>
					<text>{{item.name}}</text>
				</navigator>
			</view>				
		</view> -->
		
		<view class="bottom-border guarantee-title mat15">
			<view class="left-border"><text class="mgl10">业务管理</text></view>
		</view>
		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">			
			<view class="cu-item bg-guarantee" v-for="(item,index) in guaranteeList" :key="index">
				<navigator hover-class='none' :url="'/pages/' + item.url +'/' + item.url" class="nav-li" navigateTo
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
					<image :style="item.style" :src="item.img"></image>
					<text>{{item.name}}</text>
				</navigator>
			</view>				
		</view>
		
		<view class="bottom-border guarantee-title mat15">
			<view class="left-border"><text class="mgl10">业务统计</text></view>
		</view>
		<view class="cu-list grid" :class="['col-' + stagridCol,gridBorder?'':'no-border']">			
			<view class="cu-item bg-guarantee" v-for="(item,index) in statisticsList" :key="index">
				<navigator hover-class='none' :url="'/pages/' + item.url +'/' + item.url" class="nav-li" navigateTo
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
					<image :style="item.style" :src="item.img"></image>
					<text>{{item.name}}</text>
				</navigator>
			</view>				
		</view>
		
		<view class="bottom-border guarantee-title mat15">
			<view class="left-border"><text class="mgl10">流程效率</text></view>
		</view>
		<view class="cu-list grid" :class="['col-' + stagridCol,gridBorder?'':'no-border']">			
			<view class="cu-item bg-guarantee" v-for="(item,index) in efficiencyList" :key="index">
				<navigator hover-class='none' :url="'/pages/' + item.url +'/' + item.url" class="nav-li" navigateTo
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
					<image :style="item.style" :src="item.img"></image>
					<text>{{item.name}}</text>
				</navigator>
			</view>				
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// myList: [{
				// 	url: 'application',
				// 	name: '我审批的',
				// 	img: '../../static/img/db-icon1.png',
				// 	style: 'width: 58rpx;height: 61rpx;'
				// }, {
				// 	url: 'customer',
				// 	name: '我发起的',
				// 	img: '../../static/img/db-icon2.png',
				// 	style: 'width: 56rpx;height: 61rpx;'
				// }, {
				// 	url: 'customer',
				// 	name: '抄送我的',
				// 	img: '../../static/img/db-icon3.png',
				// 	style: 'width: 59rpx;height: 63rpx;'
				// }],
				guaranteeList: [{
					url: 'application',
					name: '业务申请',
					img: '../../static/img/db-icon4.png',
					style: 'width: 63rpx;height: 63rpx;'
				}, {
					url: 'investigation',
					name: '担保部调查',
					img: '../../static/img/db-icon5.png',
					style: 'width: 54rpx;height: 62rpx;'
				}, {
					url: 'asset',
					name: '资产部调查',
					img: '../../static/img/db-icon6.png',
					style: 'width: 63rpx;height: 64rpx;'
				}, {
					url: 'Information',
					name: '信息部调查',
					img: '../../static/img/db-icon7.png',
					style: 'width: 75rpx;height: 63rpx;'
				}, {
					url: 'regulation',
					name: '合规调查',
					img: '../../static/img/db-icon8.png',
					style: 'width: 73rpx;height: 68rpx;'
				}, {
					url: 'workMeeting',
					name: '工作会',
					img: '../../static/img/db-icon9.png',
					style: 'width: 66rpx;height: 64rpx;'
				}, {
					url: 'review',
					name: '贷审会',
					img: '../../static/img/db-icon10.png',
					style: 'width: 85rpx;height: 64rpx;'
				}, {
					url: 'letter',
					name: '担保函',
					img: '../../static/img/db-icon11.png',
					style: 'width: 49rpx;height: 63rpx;'
				}, {
					url: 'payment',
					name: '回款确认',
					img: '../../static/img/db-icon12.png',
					style: 'width: 64rpx;height: 64rpx;'
				}, {
					url: 'notice',
					name: '放款通知',
					img: '../../static/img/db-icon13.png',
					style: 'width: 55rpx;height: 61rpx;'
				}],
				statisticsList: [{
					url: 'statistics',
					name: '进度查询',
					img: '../../static/img/db-icon14.png',
					style: 'width: 66rpx;height: 66rpx;'
				}, {
					url: 'refuse',
					name: '拒绝查询',
					img: '../../static/img/db-icon15.png',
					style: 'width: 73rpx;height: 64rpx;'
				}],
				efficiencyList: [{
					url: 'application',
					name: '团队效率',
					img: '../../static/img/db-icon16.png',
					style: 'width: 70rpx;height: 70rpx;'
				}],
				// {
				// 	url: 'customer',
				// 	name: '个人效率',
				// 	img: '../../static/img/db-icon17.png',
				// 	style: 'width: 64rpx;height: 68rpx;'
				// }
				modalName: null,
				gridCol: 3,
				stagridCol: 2,
				gridBorder: false,
			};
		},
		methods: {
			
		}
	}
</script>

<style>
page{
	background-color: #F5F5F5;
}
</style>

<style lang="scss" scoped>
page{
	.bg-guarantee{
		color: #666;
		// image{
		// 	width: 56rpx;
		// 	height: 60rpx;
		// }
	}
	.guarantee-title{
		padding: 30rpx 30rpx;
	}
}
</style>