<!-- 任务中心 -->
<template>
	<view class="container">
		<view class="task_bg "></view>
		<view class="content " v-if="datas.list.length">
			<view class="cell " v-for="(item, index) in datas.list" :key="index">
				<image class="cell_icon" :src="item.url"></image>
				<view class="name  ">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import {
	onLoad
} from '@dcloudio/uni-app'
import { selectDiscSpinning } from '@/api/task/index.js'
let datas = reactive({
	list: [],
	source: null

})

onLoad(options => {
	datas.source = options.source
	getList()
})
async function getList() {
	let res = await selectDiscSpinning({ source: datas.source })
	datas.list = res.records

}
</script>

<style lang="scss">
.container {
	width: 100%;
	height: 100vh;

	.task_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		background: url('../../static/task/prize_bg.png') no-repeat top center / cover;

	}

	.content {
		z-index: 9;
		padding: 370rpx 28rpx 0 28rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;

		.cell {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(315deg, #FFFFFF 0%, #F9E3D9 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 4rpx solid #FFFFFF;
			margin-bottom: 48rpx;
			padding: 36rpx 28rpx;

			.cell_icon {
				width: 244rpx !important;
				height: 198rpx !important;
				border-radius: 16rpx !important;
				margin-bottom: 32rpx;
			}

			.name {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

		}

	}

}
</style>