<template>
	<view class="container">

		<view class="header">

			<view class="" style="width: 60rpx;height: 60rpx;">
				<image style="width: 60rpx;height: 60rpx;" src="../../static/tabbar/sfp_active.png" mode=""></image>
			</view>
			<text>SFP</text>
		</view>
		<view class="content-box">
			<view class="content" v-for="(item,index) in remList" :key="index"  style="width: 50%;justify-content: center;">
				<view class="">
					<view class="content-box-item" @click="gotobach(item)">
						<view class="" style="width: 60rpx;height: 60rpx;text-align: center;padding-bottom: 10rpx;">
							<image style="width: 60rpx;height: 60rpx;"  :src="item.icon" mode=""></image>
						</view>
						<text>{{item.text}}</text>
					</view>
				</view>
				
				
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				remList: [{
						link:'',
						icon: '../../static/SFP/Slice63.png',
						text: 'SFP智能财策'
					},
					{
						link:'',
						icon: '../../static/SFP/Slice65.png',
						text: '产品库'
					},
					{
						link:'/pages/product/finance-calculator',
						icon: '../../static/SFP/Slice64.png',
						text: '金融计算器'
					},
					{
						link:'',
						icon: '../../static/SFP/Slice62.png',
						text: '法律工具'
					}
				]
			}
		},
		methods:{
			gotobach(item){
				if(item.link == ''){
					uni.showToast({
						title: '此功能暂未开放!',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				uni.navigateTo({
					url:item.link
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
	}
.content-box{
	display: flex;width: 100%;flex-wrap: wrap;
	margin-top: 40rpx;
}
	.content {
		display: flex;
		.content-box-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
		}
	
	}
</style>
