learning-system-mobile/pages/plus/index.vue

<template>
	<view class="content" :class="{'active':active}" style="height: 100vh;">
		<view style="padding: 140rpx 32rpx 0 26rpx;color: #8a8a8a;overflow: auto;">
			<view style="text-align: center;font-size: 44upx;padding-bottom:50rpx; color: #666;">京东方大学堂内容发布须知</view>
			<view>
				<!-- <u-parse :content="context"></u-parse> -->
				<view style="line-height: 50upx;white-space:pre-line;margin-bottom: 20upx;" v-for="(item,index) in context" :key="index">{{item}}</view>
				<!-- <view style="display: flex;margin-bottom: 10rpx;">
					<view style="margin-right: 10rpx;">
						1.
					</view>
					<view>
						文章内容要求导向正确，内容健康向上，观点鲜明，结构完整，语句流畅。
					</view>
				</view>
				<view style="display: flex;margin-bottom: 10rpx;">
					<view style="margin-right: 10rpx;">
						2.
					</view>
					<view>
						所发布内容应为本人原创，或在不对他人构成侵权的基础上进行转载且注明原作者及出处。
					</view>
				</view>
				<view style="display: flex;margin-bottom: 10rpx;"> -->
			<!-- 		<view style="margin-right: 10rpx;">
						3.
					</view>
					<view>
						在尊重作者观点和论述的完整性的基础上，管理员保留对内容的编辑权和删改权。若不同意删改，请在来信中特别注明。
					</view>
				</view> -->
			</view>
			<view style="height: 50px;"></view>
		</view>
		<view class="tabbar-box-wrap">
			<view class="tabbar-box">
				<view class="tabbar-box-item" @tap="goToPage('addArticle')">
					<!-- <image class="box-image" src="../../static/images/release.png" mode="aspectFit"></image> -->
					<image class="box-image" src="../../static/images/icon/article2.png" mode="aspectFit"></image>
					<!-- <u-icon  style="flex-direction: column;" name="file-text" color="#2979ff" size="30"></u-icon> -->
					<view class="explain">写文章</view>
				</view>

				<view class="tabbar-box-item" @click="goToPage('addQuestion')">
					<!-- <image class="box-image" src="../../static/images/video.png" mode="aspectFit"></image> -->
					<image class="box-image" src="../../static/images/icon/question2.png" mode="aspectFit"></image>
					<!-- <u-icon  style="flex-direction: column;" name="order" color="#2979ff" size="30"></u-icon> -->
					<view class="explain">提问题</view>
				</view>
				<view class="tabbar-box-item" @click="goToPage('feedback')">
					<!-- <image class="box-image" src="../../static/images/qa.png" mode="aspectFit"></image> -->
					<image class="box-image" src="../../static/images/icon/disagree2.png" mode="aspectFit"></image>
					<!-- <u-icon style="flex-direction: column;" name="error-circle" color="#2979ff" size="30"></u-icon> -->
					<view class="explain">提意见</view>
				</view>

			</view>
		</view>
		<view style="height: 100px;"></view>
	</view>
</template>

<script>
	import apiProtocol from '@/api/modules/protocol.js';
	export default {
		data() {
			return {
				active: false,
				context:[],
			};
		},
		onLoad() {
			this.getprotocol();
		},
		onShow() {
			// setTimeout(() => {
			this.active = true;
			// }, 500);
		},
		onHide() {
			this.active = false;
		},
		methods: {
			getprotocol() {
				apiProtocol.query(1).then(res => {
					if (res.status == 200) {
						let list = res.result.content.split('\n');
						this.context = list;
					}
				})
			},
			goToPage(url) {
				if (!url) return;
				uni.navigateTo({
					url
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		width: 100%;
		/* #ifdef H5 */
		// height: calc(100vh - var(--window-bottom) - var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		transition: opacity 0.3s;
		background: #ffffff;
		opacity: 0;
		&.active {
			opacity: 1;
		}

		.logo {
			position: relative;
			margin-top: -400upx;
			width: 200upx;
			height: 200upx;
			// z-index: -1;
			opacity: 0;
			transition: opacity 0.3s;

			&.active {
				opacity: 1;
			}
		}
	}

	.tabbar-box-wrap {
		position: fixed;
		width: 100%;
		padding: 50upx;
		box-sizing: border-box;
		bottom: 90upx;
		left: 0;

		.tabbar-box {
			position: relative;
			display: flex;
			width: 100%;
			background: #fff;
			border-radius: 20upx;
			padding: 15upx 20upx;
			box-sizing: border-box;
			z-index: 2;
			box-shadow: 0px 2px 5px 3px rgba(101,101,101, 0.1);

			&:after {
				content: '';
				position: absolute;
				bottom: -16upx;
				left: 0;
				right: 0;
				margin: auto;
				width: 50upx;
				height: 50upx;
				transform: rotate(45deg);
				background: #fff;
				z-index: 1;
				box-shadow: 2px 2px 5px 3px rgba(101,101,101, 0.1);
				border-radius: 2px;
			}

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #ffffff;
				border-radius: 20upx;
				z-index: 2;
			}

			.tabbar-box-item {
				// position: relative;
				width: 100%;
				// color: #007AFF;
				z-index: 3;
				margin: 20upx;
				text-align: center;
				font-size: $uni-font-size-base;
                .explain{
					margin-top: 10upx;
					font-size: 24upx;
					font-weight: 600;
					color: #333333;
				}
				.box-image {
					width: 30px;
					height: 30px;
				}
			}
		}
	}
</style>