miniprogram-jituan/brief/brief.vue

<template>
	<view class="brief_body" :style="'background-image:url('+ back +')'">
		<view v-for="(item, i) in p" :key="i">
			<view class="paragraph" v-if="item.context" v-text="item.context"></view>
			<image v-if="item.url"
				:style=" item.style ? 'width:'+ item.style.w +'px;height:' + item.style.h + 'px' : '' " :src="item.url"
				@load="e=>imageload(e,i)" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref
	} from "vue";
	import config from "../../config/index.js";
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	onShareAppMessage(() => {})
	onShareTimeline(() => {})
	const props = defineProps({
		page: String
	})
	const p = ref([]);
	const back = ref("");
	const info = uni.getSystemInfoSync();
	uni.request({
		url: config.base + props.page + ".json?" + Date.now(),
		success: r => {
			if (r.statusCode !== 200) return
			p.value = r.data.list || [];
			back.value = r.data.background || "";
		}
	})

	function imageload(v, i) {
		const w = info.windowWidth;
		const h = v.detail.height / v.detail.width * w;
		p.value[i].style = {
			w,
			h
		};
	}
</script>

<style lang="scss">
	.brief_body {
		font-size: 0;
		background-position: 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100vh;
		overflow-y: auto;


		.paragraph {
			font-size: 16px;
			padding: .5em;
			text-indent: 2em;
			line-height: 1.5em;
		}
	}
</style>