<style lang="less">
.set-permanent {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    &.show {
        display: flex;
    }
    &.hide {
        display: none;
    }
    .panel-mask {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
    }
    .content {
        position: absolute;
        bottom: 88rpx;
        right: 34rpx;
        width: 640rpx;
        height: 448rpx;
        .tip-image {
            width: 640rpx;
            height: 350rpx;
        }
        .little-box {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0px;
            margin-top: 18rpx;
            width: 168rpx;
            height: 80rpx;
            border-radius: 20rpx;
            background: #ffffff;
            .text {
                font-family: PingFang SC;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: #8b949e;
            }
            .little-img{
                margin-left: 8rpx;
                width: 24rpx;
                height: 24rpx;
            }
        }
    }
}
</style>

<template>
    <cover-view
        class="{{'set-permanent '+(show?'show':'hide')}}"
        v-on:touchmove.stop="stopProgration"
    >
        <cover-view
            class="panel-mask"
            v-on:click="closePanel"
        ></cover-view>
        <cover-view class="content">
            <cover-image
                class="tip-image"
                src="{{ h5StaticPath }}set-permanent.png"
            ></cover-image>
            <cover-view class="little-box">
                <cover-view class="text">设为常驻 </cover-view>
                <cover-image class="little-img" :src="h5StaticPath+'/arrow.svg'"></cover-image>
            </cover-view>
        </cover-view>

    </cover-view>
</template>

<script>
import wepy from '@wepy/core'
import config from '@config'
import { mapState } from '@wepy/x'
import store from '@/store'

wepy.component({
  store,
  data: {
    h5StaticPath: config.h5StaticPath + '/page-officehome/'
  },
  props: {
    data: Object,
    show: Boolean
  },
  computed: {
    ...mapState({ userInfo: state => state.user.userInfo })
  },
  created() {

  },
  methods: {
    closePanel() {
      this.$emit('component-permanent-panel-close')
    },
    stopProgration() { }
  }
})
</script>


<config>
{
  
}
</config>
