<template>
    <div class="component-notice-main">
        <div class="component-notice" @click="popupVisible = true">
            <div class="notice-title">
                <img src="../../static/images/laba.svg"/>公告：
            </div>
            <div class="notice-con" :style="{'-webkit-line-clamp': data.contentNum}">{{data.content}}</div>
        </div>
        <mt-popup v-model="popupVisible">
            <div class="notice-popup-con">
                <h1>公告</h1>
                {{data.content}}
            </div>
            <div @click="popupVisible = false" class="notice-popup-btn">
                <img src="../../static/images/closed.svg" width="35"/>
            </div>
        </mt-popup>
    </div>
</template>

<script type="text/ecmascript-6">
    import {Popup} from 'mint-ui';
    export default {
        props: {
            data: '',
        },
        data() {
            return {
                popupVisible: false
            };
        }
    };
</script>