<template>
    <div class="action-popover" style="position:fixed;bottom:60px">
      <popover placement="top" style="margin: 20px;">
        <div class="popover-ctn popover-demo-content" slot="content">
          <div class="action-in-content" style="margin-bottom: 5px" @click="backLayer(1)">
            <div class="action-item-ctn">
                <i class="iconfont">&#xe143;</i>
            </div>
            <p>返回上一级目录</p>
          </div>
          <div class="action-in-content" @click="backLayer(0)">
            <div class="action-item-ctn">
                <i class="iconfont">&#xe16b;</i>
            </div>
            <p>回到主界面</p>
          </div>
        </div>
        <div class="fixed-menu btn btn-default">
            <i class="iconfont">&#xe16b;</i>
        </div>
      </popover>
    </div>
</template>

<script>
import { Popover, Icon } from 'vux'
export default {
    name: 'Popovers',
    components: {
        Popover,
        Icon
    },
    data () {
        return {
            value: ''
        }
    },
    methods: {
        backLayer (layer) {
            this.$EventBus.$emit('backLayer', layer)
        }
    }
}
</script>

<style lang="less" scoped>
.popover-ctn {
    background: rgb(252, 252, 252);
    box-shadow: 5px 5px 5px #888888;
    padding: 15px 5px 5px 5px;
    .action-in-content {
        display: flex;
        .action-item-ctn {
            width:35px;
            height:35px;
            padding:5px;
            border-radius: 50px;
            background: #59acfa;
            text-align: center;
            i {
                font-size: 20px;
                line-height: 25px;
                color: white
            }
        }
        p {
            line-height: 35px;
            margin-left: 5px;
        }
    }
}

.fixed-menu {
    width:40px;
    height:40px;
    border: none;
    margin:0 0 0 40px;
    padding:5px;
    border-radius: 50px;
    background: #59acfa;
    i {
        font-size: 23px;
        line-height: 30px;
        color: white;
    }
}

</style>
