uniapp nvue 发送信息样式问题

<template>
	<view :style="{width: windowWidth + 'px', height: windowHeight + 'px', 'background-color': '#000'}">

		<view class="goback" @click="goback" :style="{top: (statusBarHeight + 10) + 'px'}">
			<uni-icons type="arrowleft" size="16"></uni-icons>
		</view>

		<video :style="{width: windowWidth + 'px', height: windowHeight + 'px'}" :src="video" :autoplay="false" :controls="false"></video>
		<scroll-view scroll-y="true" class="box" :style="{width: (windowWidth - 100) + 'px'}">
			<view class="item" v-for="(i, k) in items">
				<rich-text class="node" :nodes="i | node"  ></rich-text>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	var app = getApp()

	var self



	export default {
		data() {
			return {
				statusBarHeight: 0,
				windowWidth: 0,
				windowHeight: 0,
				video: 'http://huiketang-app.oss-cn-chengdu.aliyuncs.com/app/book/1600930349671_529.mp4',
				items: []

			}
		},

		filters: {

			node (val) {
				return  [{
					name: 'div',
					attrs: {
						style: 'color: #fff'
					},
					children: [{
						name: 'span',
						attrs: {style: 'color:#f60'},
						children: [
						{
							type: 'text',
							text: val.title + ': '
						}
						]
					},
					{
						type: 'text',
						text: val.text
					}
					]
				}]

			},
		},
		onLoad() {
			self = this
			/*长宽播放,加返回按键*/
			var systemInfo = uni.getSystemInfoSync()
			self.statusBarHeight = systemInfo.statusBarHeight
			self.windowWidth = systemInfo.windowWidth
			self.windowHeight = systemInfo.windowHeight

			for(var i = 0; i< 10; i++) {
				self.items.push({title: `名字名字名字${i}`, text: '内容内内容内容容内容内容内容内容内容内容内容内容内容内容内容内容'})
			}
		},

		onReady() {

		},

		onUnload() {
		},

		methods: {

			/*goback*/
			goback() {
				uni.navigateBack()
			}

		}
	}
</script>

<style>
	.goback {
		position: fixed;
		background-color: rgba(255, 255, 255, 0.4);
		z-index: 991;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		left: 15px;
		justify-content: center;
		align-items: center;
		padding-right: 2px;
	}


	.box {
		position: absolute;
		z-index: 990;
		padding-left: 10px;
		padding-top: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		border-radius: 5px;
		bottom: 30px;
		left: 10px;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.6);
		height: 200px;
	}

	.item {
		color: #FFFFFF;
		background-color: rgba(0, 0, 0, 0.6);
		margin-bottom: 10px;
		border-radius: 4px;
		position: relative;

	}

	.node {
		position: relative;
		top:-10px;
		font-size: 14px;
		line-height: 20px;
		background-color: rgba(0,0,0,0);
		padding-left: 5px;
		padding-right: 5px;
	}
</style>

  

posted @ 2020-10-17 17:26  福超  阅读(280)  评论(0编辑  收藏  举报