<template>
    <div>
        <div class="notice container ">
            <span>通知</span>
            <!-- <el-link href="" target="_blank" :underline="false" v-for="i in 4" :key="i"
                >习近平同德国欧盟领导人共同举行会晤</el-link
            > -->

            <!-- <div class="box">
                <div
                    class="animate"
                    v-for="n in inform"
                    :key="n.id"
                    @click="$router.push({ name: 'article', query: { id: n.id } })"
                >
                    {{ n.title }}
                </div>
            </div> -->
            <div class="con">
                <div class="wrap">
                    <ul id="marquee">
                        <li
                            v-for="n in inform"
                            :key="n.id"
                            @click="$router.push({ name: 'article', query: { id: n.id, typeId: 1108 } })"
                        >
                            {{ n.title }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            inform: []
        };
    },

    created() {
        this.$http.get('/article/all', { query: { mainType: '通知通告', status: 'PASS' } }).then(res => {
            this.inform = res.content;
        });
    },
    methods: {
        move() {
            // 获取内容区宽度
            let width = document.getElementById('marquee').scrollWidth;
            let marquee = document.getElementById('marquee');
            let speed = 100; // 位移距离
            // 设置位移
            setInterval(function() {
                speed = speed - 1;
                // 如果位移超过文字宽度，则回到起点

                if (-speed >= width) {
                    speed = 1000;
                }
                marquee.style.transform = 'translateX(' + speed + 'px)';
            }, 40);
        }
    },
    mounted: function() {
        this.move();
    }
};
</script>
<style lang="less" scoped>
.notice {
    padding: 40px 0 22px;
    height: 17px;
    line-height: 17px;
    display: flex;
    span {
        font-size: 13px;
        color: #bf1616;
        margin-right: 13px;
    }
    .el-link {
        font-size: 13px;
        font-weight: 400;
        color: #7a7c80;
    }
    .el-link + .el-link {
        margin-left: 30px;
    }
}
.box {
    // margin: 0 auto;
    // border: 1px solid #ff6700;
    width: 90%;
    overflow: hidden;
}
.animate {
    cursor: pointer;
    padding-left: 40px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    // margin-right: 30px;
    /* 动画时间10秒，动画名称worldsLoop，动画速度从头到尾一样，无限循环，正常播放 */
    animation: 30s wordsLoop linear 3s infinite normal;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(1000px);
        -webkit-transform: translateX(1000px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(1000px);
        -webkit-transform: translateX(1000px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        // background-color: #5c7c99;
    }
}
.con {
    font-size: 12px;
    color: #000;
    margin-left: 10px;
    width: 90%;
    cursor: pointer;
    // border: 1px solid #000;
    // line-height: 30px;
    overflow: hidden;
}
// .wrap {
//     overflow: hidden;
//     color: red;
// }
#box {
    height: 100%;
}
ul,
li {
    margin: 0;
    padding: 0;
}
ul {
    white-space: nowrap;
    margin: 0 10px;
}
li {
    height: 100%;
    list-style: none;
    margin-right: 50px;
    display: inline-block;
}
</style>
