MiniPrograms/subpkg/datalist/workdata.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;">{{workData[index].work.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', ['workData'])
		},
		data() {
			return {
				index: '',
				image: 'https://ouch-cdn2.icons8.com/L7XZ0sgjVoRcfTOPCIQaYDAjSFWSuLHiH__hrCVy_CQ/rs:fit:439:456/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNTM2/L2M3ZmQyOTdiLTgz/ODEtNGQzYy1hNzk1/LWY1MmY3ZWUyMjIw/YS5wbmc.png'
			};
		},
		onLoad(param) {
			this.index = param.index
		},
		methods: {

		},
	}
</script>

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

	.page_title {
		font-size: 75rpx;
		font-family: YSfont;
		color: #FFF;
	}

	.page_subtitle {
		font-size: 40rpx;
		font-family: YSfont;
		color: #FFF;
	}

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

	.detail_image {
		position: absolute;
		top: 170rpx;
		left: 430rpx;
		width: 330rpx;
		height: 360rpx;
		background-size: 100%; //背景图片自适应
		background-repeat: no-repeat;
		z-index: 50;
	}
</style>