MiniPrograms/subpkg/datalist/swapdata.vue

<template>
	<view class="page_view">
		<top-return color="#FFF"></top-return>
		<view class="flex_row">
			<view class="flex_cloumn" style="margin: 120rpx 0 0 50rpx;">
				<view class="page_title">活动</view>
				<view class="page_title">详情信息</view>
				<view class="page_subtitle" style="margin-top: 30rpx;">{{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">
	.page_view {
		background-color: $color-orange;
	}

	.page_title {
		font-size: 55rpx;
		font-weight: bold;
		transform: skew(-15deg);
		color: #FFF;
	}
	.page_subtitle {
		font-size: 34rpx;
		font-weight: bold;
		transform: skew(-15deg);
		color: #FFF;
	}

	.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>