<!--
 * @Description: 登录分割线 组件,该组件后面的组件需要登录以后才能查看
 * @Date: 2021-05-06 10:54:41
-->

<template>
    <div class="see-login-button" v-if="isShow">
        <div v-if="isDesign" class="login-button--design">
            <div class="dotted" />
            <div class="txt">以下内容需要登录才能查看</div>
            <div class="dotted" />
        </div>
        <div v-else class="login-button--pc" @click="showLogin">查看更多<img src="./assets/arrow-bottom.svg"></div>
    </div>
</template>
<script>
import permissionMixin from "./permission-mixin";
export default {
    name: "see-login-button",
    mixins: [permissionMixin],
    components: {},
    inject: ["$EventBus"],
    props: {
        componentData: {
            required: false,
        },
    },
    data() {
        return {};
    },
    computed: {
        isDesign() {
            return this.componentData.commonVariable.pageType === "design";
        },
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        showLogin() {
            this.$EventBus.$emit('showLogin');
        },
    },
    destroyed() {},
};
</script>

<style lang="scss" >
.see-login-button {
    text-align: center;
    .login-button--design {
        display: flex;
        align-items: center;
        .dotted {
            flex:1;
            height: 1px;
            border: 1px dashed #999;
        }
        .txt {
            padding: 0 20px;
            color: #666;
        }
    }
    .login-button--pc {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30px 0 20px;
        font-size: 14px;
        color: #007aff;
        text-align: center;
        line-height: 22px;
        cursor: pointer;
        img {
            width: 10px;
            margin-left: 8px;
        }
    }
}
</style>

