<template>
    <div class="latest">
        <p>
            <span class="title">最新动态</span>
            <span class="more" @click="jump('dynamicList')">更多>></span>
        </p>
        <div class="content">
            <div v-for="item of val" @click="jump('newsPage')">
                <p class="name" :title="item.name">{{item.name}}</p>
                <p class="other">
                    <span class="time">{{item.time}}</span>
                    <span class="person" :title="item.person">发布机构：{{item.person}}</span>
                </p>
                <hr>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            val:
                [
                    {
                        name: '天津麒麟正式更名为麒麟软件 国产操作系统主力军吹响出征号角！',
                        time: '2020-02-26 12:13:13',
                        person: '中国软件'
                    },
                    {
                        name: 'PK生态系列线上公开课已全面上线啦！',
                        time: '2020-02-19 12:23:44',
                        person: '飞腾PHYTIUM'
                    },
                    {
                        name: '助力复工复产，中国系统推出智能体温检测系统',
                        time: '2020-02-18 12:13:00',
                        person: '中国电子'
                    },
                    {
                        name: '2019湖南(长沙)网络安全·智能制造大会震撼来袭！',
                        time: '2019-12-17 12:00:23',
                        person: '湖南发布'
                    },
                    {
                        name: '中国系统打造一体化数字底座 赋能城市治理现代化',
                        time: '2019-11-14 11:23:44',
                        person: '中共陕西省委网信办'
                    },
                    {
                        name: '院士大咖纵论湘江，和你一起共谋网络安全·智能制造发展大计',
                        time: '2019-11-08 12:23:22',
                        person: '湖南省人民政府'
                    }
                ]

        }
    },
    created() {
    },
    mounted(){
    },
    methods: {
        jump(path) {
            this.$router.push({name: path});
        }
    },
    components: {
    },
    watch: {
    }
}
</script>
<style scoped>
    .latest{
        margin: 40px 40px 0 40px;
        background: #ffffff;
        height: 560px;
        overflow: hidden;
    }
    .latest>p{
        padding: 30px 30px 20px 30px;
        position: relative;
    }
    .latest .title{
        font-size: 20px;
        color: #233b6e;
        cursor: default;
    }
    .latest .more{
        font-size: 14px;
        color: #666;
        position: absolute;
        right: 30px;
        cursor: pointer;
    }
    .latest .content{
        height: 450px;
        padding: 0 30px 0 30px;
    }
    .latest .content>div{
        cursor: pointer;
    }
    .latest .content .name{
        font-size: 16px;
        color: #4877e6;
        margin-top: 15px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    .latest .content .other{
        font-size: 14px;
        color: #808080;
        margin: 8px 0 8px 0;
        position: relative;
    }
    .latest .content .person{
        position: absolute;
        right: 0px;
        display: inline-block;
        width: 160px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
</style>
