<template>
	<view class="content">
		<view class="list">
			<view class="item" v-for="(item, index) in childrenArr" :key="index">
				<view class="item-number"><text>0{{index + 1}}</text></view>
				<view class="nowrap item-name">{{item.title}}</view>
				<view class="nowrap item-text">{{item.subtitle}}</view>
				<view class="item-more">
					<view class="item-more-name" @click="onNav(item.id)">点击查看详情</view>
					<view class="footer-tool-label-icon"><u-icon name="arrow-right" size="16" /></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import { bigfive } from '@/apis/interfaces/index.js'
	export default {
		data() {
			return {
				childrenArr: []
			}
		},
        onLoad() {
        },
		onShow() {
			const parentData = JSON.parse(decodeURIComponent(this.$Route.query.children))
			this.childrenArr = parentData
		},
		methods: {
			// 跳转
			onNav(id){
				this.$Router.push({name: 'businessInfo', params:{bigFive:id}})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list {padding: $padding; box-sizing: border-box;}
	.item {background-color: #ffffff; border-radius: $radius; position: relative;padding: $padding; box-sizing: border-box; overflow: hidden; margin-bottom: $margin;}
	.item-name {font-weight: bold; font-size: $title-size + 8; color: #c92453;}
	.item-text {font-size: $title-size; color: #111111; line-height: 54rpx; padding: $padding 0;}
	.item-more {color: #666666; border-top: 2rpx solid #eeeeee;display: flex; line-height: 44rpx; font-size: $title-size; padding-top: $padding;}
	.item-more-name {flex: 1;}
	.footer-tool-label-icon {line-height: 44rpx; padding-top: 4rpx; font-weight: 600;}
	.item-number {background-color: #fea6cd; position: absolute; right: 0; top: 0; color: #c92553; font-weight: bold; font-size: $title-size + 2; border-radius: 0 $radius 0 $radius + 20; overflow: hidden; padding: 0 $padding - 20rpx 0 $padding - 10;}
	.item-number::after {position: absolute; content: ''; bottom: -48%; left: -78%; background-color: #ffc8e7; width: 200%; height: 100%; z-index: 9; border-radius: 100%;transform: rotate(45deg);}
	.item-number text {transform: rotate(45deg); display: inline-block; margin: 5rpx 0 10rpx;}
</style>