MiniPrograms/subpkg/datalist/examdata.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;">{{examData[index].examInfo.name}}</view>
			</view>
			<view class="bg1"></view>
			<view class="detail_image1" :style="{backgroundImage:`url(${image1})`}"></view>
			<view class="detail_image2" :style="{backgroundImage:`url(${image2})`}"></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', ['examData'])
		},
		data() {
			return {
				index: '',
				image1: 'https://ouch-cdn2.icons8.com/PvGwCISfYx-NAQwl4UsdY2QXtMMiNDB6LllqLZ4jGoA/rs:fit:367:456/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNzg1/LzhiM2MwZWU2LWFl/ODMtNDM2Mi05MGQy/LTBmMDk0N2M4N2E1/OC5wbmc.png',
				image2: 'https://ouch-cdn2.icons8.com/I-PEjM-V1LXrgVE1_yaPi7LY2XrgFXgKmEvBD3r1h_Y/rs:fit:484:456/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvMzcy/LzA0ZDY3Y2NlLTM3/YTUtNGE3OC1iZTVi/LTY4MzgyYTQ2YmUz/Zi5wbmc.png'
			};
		},
		onLoad(param) {
			this.index = param.index
		},
		methods: {

		},
	}
</script>

<style lang="scss">
	.page_view {
		background-color: $color-pink;
	}

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

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

	.detail_image1 {
		position: absolute;
		top: 180rpx;
		left: 580rpx;
		width: 300rpx;
		height: 350rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		z-index: 51;
	}

	.detail_image2 {
		position: absolute;
		top: 230rpx;
		left: 380rpx;
		width: 300rpx;
		height: 350rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		z-index: 50;
	}
</style>