xs/xs-app/components/read/readPage.vue

<template>
	<view v-html="book_title" :style="{
		fontSize:`${config.read_config.fontSizeList[read_setting_data.fontSizeIndex]*1.5}px`,
		lineHeight:`${config.read_config.lineHeight * config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
		color:`${font_color}`
	}"></view>
	<view class="inner-box">
		<view class="book-inner"
			v-html="text_content"
			:style="{
				fontSize: `${config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
				lineHeight: `${config.read_config.lineHeight * config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
				color:`${font_color}`
		}"></view>
		<!-- <image src="../../static/logo.png"></image> -->
	</view>
</template>
	
<script setup lang="ts">
	import {defineProps, ref, watch} from 'vue'
	import { ReadSetting } from '../../stores/readSetting';
	import { config } from '../../config/config';
	import { log } from '../../framework/log';
	import { tools } from '../../framework/tools';
	
	let  {text_content,book_title} =  defineProps(['text_content','book_title'])
	
	let read_setting_data = ReadSetting().getReadSetting()
	
	let font_color = ref(tools.getFontColorByMode(read_setting_data.readMode))
	
	function showTopLoading(){
	}
	
	function showBottomLoading(){
			
	}
	
	watch(async () => ReadSetting().data.readMode, // 监听的数据源
		(newVal, oldVal) => {
			 font_color.value = tools.getFontColorByMode(ReadSetting().data.readMode)
		}
	);
	defineExpose({ showBottomLoading,showTopLoading });
</script>

<style lang="scss" scoped>
	.inner-box {
		flex: 1 1 auto;
		overflow: hidden;
		.book-inner {
			text-indent: 2em;
			text-align: justify;
		}
		padding: 5%;
	}
</style>