<template>
	<view class="page-view">
		<top-return color="#FFF"></top-return>
		<view class="flex-row">
			<view class="flex-column" style="margin: 120rpx 0 0 50rpx;">
				<view class="report-title">活动</view>
				<view class="report-title">详情信息</view>
				<view class="report-subtitle">{{swapData[index].survey.name||swapData[index].vote.name}}</view>
			</view>
			<view class="bg1"></view>
			<view class="detail-image" :style="{backgroundImage:`url(${image})`}"></view>
		</view>


		<view class="card-view">
			<view class="card-item" style="width: 100%;height: 2300rpx;opacity: 0.9;"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_children', ['swapData'])
		},
		data() {
			return {
				index: '',
				image: 'https://ouch-cdn2.icons8.com/09Q_OTq1lYT1dr5CbEAtnG8KH-WNnh3fIkoN8Ehg8D8/rs:fit:256:277/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvODc3/LzUyODcyMGM0LTI0/MTEtNGU5MS04ZWM0/LTQ0ODVhOGQzMDcw/YS5wbmc.png'
			};
		},
		onLoad(param) {
			this.index = param.index
		},
		methods: {

		},
	}
</script>

<style lang="scss">
	@import 'data_pages.scss';
	@import 'top_info.scss';

	.page-view {
		background-color: $color-orange;
	}

	.bg1 {
		position: absolute;
		top: 200rpx;
		left: 450rpx;
		width: 430rpx;
		height: 430rpx;
		border-radius: 50%;
		background-color: #ff9c5a;
	}

	.detail-image {
		position: absolute;
		top: 140rpx;
		left: 430rpx;
		width: 370rpx;
		height: 350rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		z-index: 50;
	}
</style>
