ROBOT-APP/code/HBX/pages/webview/popSelect.vue

<template>
	<view @click="close" class="mask">
	<view class="wrapper">
		<text class="iconTop">&#xe649;</text>
		<view class="list">
			<view class="li" @click="scan">
				<text class="icon">&#xe891;</text>
				<text class="t1">扫一扫</text>
			</view>
			<view class="li" @click="creatTask">
				<text class="icon">&#xe64a;</text>
				<text class="t1">创建任务</text>
			</view>
			<view class="li" @click="goUrl">
				<text class="icon">&#xe6a7;</text>
				<text class="t1">关注机器人</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	var domModule = weex.requireModule('dom');

	domModule.addRule('fontFace', {
		'fontFamily': "iconfont",
		'src': "url('/static/iconfont.ttf')"
	})
	export default {
		data(){
			return {

			}
		},
		mounted() {

		},
		methods:{
			close() {
				uni.navigateBack()
			},
			goUrl(){
				this.close()
				uni.navigateTo({
					url:'/pages/native/robot'
				})
			},
			creatTask(){
				this.close()
				uni.navigateTo({
					url:'/pages/webview/popupHome',
				})
			},
			scan() {
				this.close()
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					},
					fail: (e) => {
						console.log(e)
					}
				});
			},
		}
	}
</script>
<style>
	page {
		background: transparent;
	}
</style>
<style scoped lang="scss">

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.iconTop{
		font-family: iconfont;
		color: #484848;
		text-align: right;
		display: flex;
		font-size: 20px;
		margin-bottom: -22rpx;
		margin-left: 180rpx;
	}
	.icon {
		font-family: iconfont;
		font-size: 22px;
		color: #fff;
		opacity: 0.7;
	}
	.wrapper{
		position: absolute;
		top: 130rpx;
		right: 20rpx;
		.list{
			background: #484848;
			padding: 10rpx 0;
			border-radius: 20rpx;
			.li{
				padding: 15rpx 20rpx;
				margin-top: 14rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.t1{
					color: #fff;
					font-size: 28rpx;
					margin-left: 20rpx;
					border-bottom:1px solid #4D4C4C;
				}
			}
		}
	}
</style>