WenWuGuanJia/xueYuan_fenbao/wenWu/ShiPin.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" :title="list.title" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view style="width: 92%; margin: auto">
			<view class="group_13">
				<video class="myVideo" enable-play-gesture="true" id="myVideo" :src="list.video" controls></video>
			</view>
			<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 30rpx">
				<view lines="1" class="text_4">投稿人：{{ list.from }}</view>

				<view class="text_25">{{ list.publish_at }}</view>
			</view>

			<view v-if="list.content != null" class="text_5">
				<u-parse :content="list.content"></u-parse>
			</view>
			<view v-else class="">
				<u-empty text="暂无介绍" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			list: {}
		};
	},
	onLoad(o) {
		that = this;
		this.getContentDetail(o.id);
	},
	methods: {
		getContentDetail(id) {
			this.$api.getContentDetail({ main_body_id: 1, id: id }, function (res) {
				// console.log(res, '视频详情');
				if (res.code == 1) {
					that.list = res.data;
				}
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png');
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100% 100%;
	padding-bottom: 50rpx;
	background-color: #fff9e9;
	min-height: 100%;
	height: auto;
}
.group_13 {
	width: 100%;
	height: 420rpx;
}
.myVideo {
	width: 100%;
	height: 100%;
}
.text_4 {
	width: 112rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: #727070;
	font-size: 26rpx;
	font-family: SourceHanSansCN-Bold;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}

.text_5 {
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: justifyLeft;
	line-height: 48rpx;
	margin: 44rpx 0 0 16rpx;
	text-indent: 2rem;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.text_25 {
	font-size: 26rpx;
	color: #727070;
	margin-top: 10rpx;
	font-weight: 400;
}
</style>