canvasScreen/pages/header.vue

<template>
	<view class="header">
		<view class="header-content" @tap="helpClick()">
			<text class="iconfont icon-bangzhu" ></text>
			帮助
		</view>
		<uni-popup ref="uniPop" class="help-cont">
			<image src="../static/images/bt.png" class="help-title"></image>
			<view>
				<text class="step">第一步</text>
				<view class="step-txt">下载apk在终端设备上进行安装</view>
			</view>
			<view>
				<text class="step">第二步</text>
				<view class="step-txt">输入后台登录账号、密码进行登录</view>
			</view>
			<view>
				<text class="step">第三步</text>
				<view class="step-txt">账号登录完成后，自动绑定当前设备，您可以选择输入设备名称、设定设备方向</view>
			</view>
			<view>
				<text class="step">第四步</text>
				<view class="step-txt">根据当前推荐选择您需要的节目点击进行播放，或选择电脑登录后台管理自行发布节目内容</view>
			</view>
			<view @tap="closedClick()"><text class="iconfont icon-guanbi"></text></view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	name:'Header',
	components: {
		uniPopup
	},
	data() {
		return {
		};
	},
	methods: {
		helpClick(){
			this.$refs.uniPop.open()
		},
		closedClick(){
			this.$refs.uniPop.close()
		}
	}
};
</script>

<style scoped>
	.header-content{
		display: flex;
		padding: 61.11rpx 41.66rpx 0 41.66rpx;
		justify-content: flex-end;
		font-size: 27.77rpx;
		line-height: 27.77rpx;
		color: #fff;
	}
	.iconfont{
		color: #fff;
	}
	.icon-bangzhu{
		font-size: 27.77rpx;
		margin-top: 1.38rpx;
		margin-right: 11.11rpx;
	}
	.help-title{
		display: block;
		width: 133.33rpx;
		height: 53.47rpx;
		margin: 0 auto;
	}
	.help-cont /deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
		padding: 83.33rpx 69.44rpx 62.5rpx 69.44rpx;
		border-radius: 20.83rpx;
		overflow: initial;
	}
	.step{
		display: block;
		font-size: 27.77rpx;
		color: #0069f9;
		padding: 41.66rpx 0 20.83rpx 0;
	}
	.step-txt{
		font-size: 25rpx;
		line-height: 48.61rpx;
	}
	.icon-guanbi{
		position: absolute;
		bottom: -76.38rpx;
		left: 50%;
		font-size: 48.61rpx;
		transform: translateX(-50%);
	}
</style>