弹出框组件

li-guang

2020-12-11 21228216883890194984ef5e906706d4285bf90e

弹出框组件

 hive-app/components/popover/index.vue

New file
@@ -0,0 +1,14 @@
<template>
    <view v-show="isShow">
        <slot></slot>
    </view>
</template>

<script>
    export default{
		
    }
</script>

<style>
</style>

 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>