From 21228216883890194984ef5e906706d4285bf90e Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Fri, 11 Dec 2020 14:05:46 +0800
Subject: [PATCH] 弹出框组件

---
 hive-app/pages/workbench/index.vue    |   63 +++++++++++++++++++++++++++----
 hive-app/components/popover/index.vue |   14 +++++++
 2 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/hive-app/components/popover/index.vue b/hive-app/components/popover/index.vue
new file mode 100644
index 0000000..4c05734
--- /dev/null
+++ b/hive-app/components/popover/index.vue
@@ -0,0 +1,14 @@
+<template>
+	<view v-show="isShow">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default{
+		
+	}
+</script>
+
+<style>
+</style>
diff --git a/hive-app/pages/workbench/index.vue b/hive-app/pages/workbench/index.vue
index d6b8d68..89c2400 100644
--- a/hive-app/pages/workbench/index.vue
+++ b/hive-app/pages/workbench/index.vue
@@ -7,11 +7,21 @@
 		<view class="header flex align-center justify-between">
 			<text class="font-18">HIVE</text>
 			<view>
-				<image class="header-icon mr-15" src="../../static/images/search.png"></image>
-				<image class="header-icon" src="../../static/images/add.png"></image>
+				<text class="icon mr-15">&#xe6d2;</text>
+				<text class="icon" @click.stop="isShow=!isShow">&#xe600;</text>
+			</view>
+			<view class="popup-content" v-show="isShow">
+				<view>
+					<text class="icon mr-5">&#xe600;</text>
+					<text>新增会员</text>
+				</view>
+				<view class="mt-10">
+					<text class="icon mr-5">&#xe60f;</text>
+					<text>扫一扫</text>
+				</view>
 			</view>
 		</view>
-		<view class="status-bar flex justify-between mt-15">
+		<view class="condition flex justify-between mt-15">
 			<view class="flex flex-v align-center">
 				<text class="font-18 white">0</text>
 				<text class="font-16 white">预约</text>
@@ -136,23 +146,49 @@
 </template>
 
 <script>
+	export default{
+		data(){
+			return{
+				isShow:false
+			}
+		},
+		onLoad() {
+			document.addEventListener('click', () => {
+				this.isShow = false
+			}, false)
+		},
+		methods:{
+			appear(){
+				
+			}
+		}
+	}
 </script>
 
 <style>
+	@font-face {
+		font-family: texticons;
+		font-weight: normal;
+		font-style: normal;
+		src: url('//at.alicdn.com/t/font_2263696_lohq5qfkgkq.ttf') format('truetype');
+	}
+	.icon {
+		width: 20px;
+		height: 20px;
+		color: #000000;
+		text-align: center;
+		font-family: texticons;
+	}
 	page{
 		background: #F8F8F8;
 	}
 	.container{
-		padding: 0 8px;
+		padding: 0 10px;
 	}
 	.header{
 		padding: 10px 5px;
 	}
-	.header-icon{
-		width: 20px;
-		height: 20px;
-	}
-	.status-bar{
+	.condition{
 		background-color: #518EFF;
 		padding: 16px 30px;
 		border-radius: 4px;
@@ -170,4 +206,13 @@
 	.list-item{
 		width: 25%;
 	}
+	.popup-content{
+		background: #FFFFFF;
+		border: 1px solid #ABB1CC;
+		padding: 10px;
+		border-radius: 4px;
+		position: absolute;
+		right: 10px;
+		top: 35px;
+	}
 </style>

--
Gitblit v1.9.1