<template>
    <div>
        <img style="width:100%" src="/assets/home/hangdo.png" alt="">
        <div class="dyanimtop" style='width:1200px;margin:30px auto;'>
            <div class="productbox" v-for="(item,key) of industlist" :key="key"  @click="dynamicinform(item)">
                <div style="display:flex;align-items:center;margin-right:20px">   
                    <!-- object-fit:contain -->
                    <img v-if="item.picWeb" :src="item.picWeb" alt="" style="height:170px;width:220px;" >
                    <img v-else src="/assets/dynamic/dydeau.png" style="height:170px;width:220px;">
                </div>
                <div style="margin-left:15px;cursor:pointer">     
                    <p style="font-weight: bold;margin-bottom:0px;color:#172b4d;font-size:18px">{{item.title}}</p>
                    <!-- <el-divider></el-divider> -->
                    <p title='item.summary'  style="font-size:14px;margin-bottom:5px;cursor:pointer;line-height:1.8;color:#a8acb9">{{item.summary | ellipsis}}</p>
                    <p style="font-size:14px;color:#a8acb9">发布时间：{{item.ptime && item.ptime.slice(0,10) }}</p>                 
                </div>
            </div>
            <!-- <div class="productbox">
                <div style="display:flex;align-items:center;margin-right:20px">   
                    <img src="/assets/dynamic/keber.png" alt="">
                </div>
                <div style="margin-right:20px;cursor:pointer">     
                    <p style="font-weight: bold;margin-bottom:-10px;font-size:18px">Kubernetes 7周年：它为什么如此受欢迎？</p>
                    <p style="font-size:14px;">发布时间：2021-07-29</p>                 
                    <el-divider></el-divider>
                    <p title="今年 6 月 7 日，Kubernetes 迎来 7 周年。七年前，当谷歌宣布 Kubernetes 项目时，谁也不曾想到它会取得如此大的成功。作为后起之秀，Kubernetes 打败了 Docker，成为容器编程领域的事实标准，改变了整个容器市场的格局。当今，Kubernetes 已经成为广受认可的基础设施领域工业标准，变成云计算平台上的主角。"
                        style="font-size:14px;margin-bottom:5px;cursor:pointer">今年 6 月 7 日，Kubernetes 迎来 7 周年。七年前，当谷歌宣布 Kubernetes 项目时，谁也不曾想到它会取得如此大的成功。作为后起之秀，Kubernetes 打败了 Docker，成为容器编程领域的事实标准，改变了整个容器市场的格局。当今，Kubernetes 已经成为广受认可的基础设施领域工业标准，变成云计算平台上的主角。</p>
                </div>
            </div>
            <div class="productbox">
                <div style="display:flex;align-items:center;margin-right:20px">   
                    <img src="/assets/dynamic/zhiwe.png" alt="">
                </div>
                <div style="margin-right:20px;cursor:pointer">     
                    <p style="font-weight: bold;margin-bottom:-10px;font-size:18px">全球大半网络瘫痪，背后原因竟来自这家无名小公司</p>
                    <p style="font-size:14px;">发布时间：2021-07-29</p>                 
                    <el-divider></el-divider>
                    <p title="这周二，当许多人像往常一样刷新网站时，突然发现页面打不开了，并且出现了“503”或者“连接失败”的提示。503错误是服务器不可访问时给用户端的一种状态。这其中包括了Reddit、Spotify、卫报、纽约时报等高流量网站，甚至连英国政府官网都被波及了。乍看之下，还真不能从中招的网站中找到什么规律。 不仅包括了新闻、社交、音乐等类型平台，而且在地域上也覆盖了美国、英国、北欧。"
                        style="font-size:14px;margin-bottom:5px;cursor:pointer">这周二，当许多人像往常一样刷新网站时，突然发现页面打不开了，并且出现了“503”或者“连接失败”的提示。503错误是服务器不可访问时给用户端的一种状态。这其中包括了Reddit、Spotify、卫报、纽约时报等高流量网站，甚至连英国政府官网都被波及了。乍看之下，还真不能从中招的网站中找到什么规律。 不仅包括了新闻、社交、音乐等类型平台，而且在地域上也覆盖了美国、英国、北欧。</p>
                </div>
            </div>
            <div class="productbox">
                <div style="display:flex;align-items:center;margin-right:20px">   
                    <img src="/assets/dynamic/point.png" alt="">
                </div>
                <div style="margin-right:20px;cursor:pointer">     
                    <p style="font-weight: bold;margin-bottom:-10px;font-size:18px">美国网络安全企业向阿联酋出售iMessage漏洞利用工具</p>
                    <p style="font-size:14px;">发布时间：2021-07-29</p>                 
                    <el-divider></el-divider>
                    <p  title="MIT 科技评论》周三援引知情人士的话称：美国网络安全公司 Accuvant 开发一款 iMessage 漏洞利用工具，并将之出售给了为阿联酋工作的美国雇佣兵。作为阿布扎比“Karma”间谍项目的一部分，据称有数百人遭到了侵入。"
                        style="font-size:14px;margin-bottom:5px">MIT 科技评论》周三援引知情人士的话称：美国网络安全公司 Accuvant 开发一款 iMessage 漏洞利用工具，并将之出售给了为阿联酋工作的美国雇佣兵。作为阿布扎比“Karma”间谍项目的一部分，据称有数百人遭到了侵入。</p>
                </div>
            </div>
            <div class="productbox">
                <div style="display:flex;align-items:center;margin-right:20px">   
                    <img src="/assets/dynamic/micro.png" alt="">
                </div>
                <div style="margin-right:20px;cursor:pointer">     
                    <p style="font-weight: bold;margin-bottom:-10px;font-size:18px">微软Azure默认Linux配置曝出严重的远程代码执行漏洞</p>
                    <p style="font-size:14px;">发布时间：2021-07-29</p>                 
                    <el-divider></el-divider>
                    <p title="Wiz 安全研究团队近日指出，他们在诸多流行的 Azure 服务中，发现了开放管理基础设施(OMI)软件代理中存在的一系列严重漏洞。问题在于当 Azure 客户在云端设置 Linux 虚拟机服务时，OMI 代理会在他们不知情的情况下自动部署。"
                        style="font-size:14px;margin-bottom:5px">Wiz 安全研究团队近日指出，他们在诸多流行的 Azure 服务中，发现了开放管理基础设施(OMI)软件代理中存在的一系列严重漏洞。问题在于当 Azure 客户在云端设置 Linux 虚拟机服务时，OMI 代理会在他们不知情的情况下自动部署。</p>
                </div>
            </div>
            <div class="productbox">
                <div style="display:flex;align-items:center;margin-right:20px">   
                    <img src="/assets/dynamic/didi.png" alt="">
                </div>
                <div style="margin-right:20px;cursor:pointer">     
                    <p style="font-weight: bold;margin-bottom:-10px;font-size:18px">七部门进驻滴滴，开展安全检查！工信部回应：继续强化APP治理</p>
                    <p style="font-size:14px;">发布时间：2021-07-29</p>                 
                    <el-divider></el-divider>
                    <p  title="7月16日下午，国家互联网信息办公室发布消息称：网络安全审查办公室有关负责同志表示，按照网络安全审查工作安排，国家网信办会同公安部、国家安全部、自然资源部、交通运输部、税务总局、市场监管总局等部门联合进驻滴滴出行科技有限公司，开展网络安全审查。"
                        style="font-size:14px;margin-bottom:5px">7月16日下午，国家互联网信息办公室发布消息称：网络安全审查办公室有关负责同志表示，按照网络安全审查工作安排，国家网信办会同公安部、国家安全部、自然资源部、交通运输部、税务总局、市场监管总局等部门联合进驻滴滴出行科技有限公司，开展网络安全审查。</p>
                </div>
            </div>
            <div class="productbox">
                <div style="display:flex;align-items:center;margin-right:20px">   
                    <img src="/assets/dynamic/goole.png" alt="">
                </div>
                <div style="margin-right:20px;cursor:pointer">     
                    <p style="font-weight: bold;margin-bottom:-10px;font-size:18px">谷歌发布以安全为主题的Android更新</p>
                    <p style="font-size:14px;">发布时间：2021-07-29</p>                 
                    <el-divider></el-divider>
                    <p title="谷歌近日推出了一个以安全为主题的Android更新，修复了30多个安全漏洞，这些漏洞会导致移动用户面临一系列恶意攻击。其中最严重的是媒体框架中的一个漏洞，该漏洞可能导致Android 8.1和9设备上的特权提升，或Android 10和11上的信息泄露。该漏洞被跟踪为 CVE-2021-0519。"
                        style="font-size:14px;margin-bottom:5px">谷歌近日推出了一个以安全为主题的Android更新，修复了30多个安全漏洞，这些漏洞会导致移动用户面临一系列恶意攻击。其中最严重的是媒体框架中的一个漏洞，该漏洞可能导致Android 8.1和9设备上的特权提升，或Android 10和11上的信息泄露。该漏洞被跟踪为 CVE-2021-0519。</p>
                </div>
            </div>
            <div class="productbox">
                <div style="display:flex;align-items:center;margin-right:20px">   
                    <img src="/assets/dynamic/sanliu.png" alt="">
                </div>
                <div style="margin-right:20px;cursor:pointer">     
                    <p style="font-weight: bold;margin-bottom:-10px;font-size:18px">360推出无广告极速版，用户会买账吗？</p>
                    <p style="font-size:14px;">发布时间：2021-07-29</p>                 
                    <el-divider></el-divider>
                    <p  title="在免费和无广告弹窗上，360安全卫士做出了自己的让步。7月20日，360安全卫士正式发布“极速版”，主打“永久免费、无弹窗广告”，聚焦简单操作与纯净视觉体验。过去，“360弹窗小王子”的称呼在市场上广为流传，那么此次极速版，真的能做到永久免费且无广告吗？没了广告，360又靠什么赚钱？"
                        style="font-size:14px;margin-bottom:5px">在免费和无广告弹窗上，360安全卫士做出了自己的让步。7月20日，360安全卫士正式发布“极速版”，主打“永久免费、无弹窗广告”，聚焦简单操作与纯净视觉体验。过去，“360弹窗小王子”的称呼在市场上广为流传，那么此次极速版，真的能做到永久免费且无广告吗？没了广告，360又靠什么赚钱？</p>
                </div>
            </div> :current-page="currentPage"-->
            <div v-if="total>10" style='width:100%;margin-top:30px;text-align: center;'>
                <el-pagination background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"        
                    :page-sizes="[10, 20, 30]"
                    :page-size="queryParams.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        
    </div>
</template>
<script>
    import $ from 'jquery'
    import {homeindust} from "@/api/crowdsource/crowdsource";
    export default{
        data(){
            return{
                // currentPage:1,
                // 总条数
                total: 0,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                },
                industlist:[],//行业资讯
            }
        },
        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length >200) {
                    return value.slice(0,200) + '...'
                }
                return value
            }
        },
        mounted(){
            this.getList();
            // $(function(){
            //     $("body").flowUp('.productbox', { transalteY: 350, duration: 1 });
            // });

        },
        methods:{
            getList(){
                homeindust(this.queryParams).then(res=>{
                    // console.log('行业资讯----',res)
                    this.industlist=res.rows;
                    this.total = res.total;
                })
            },
            //行业资讯详情
            dynamicinform(item){
                // console.log('url',item)
                //  let httpurl='http://test.lovecode.cc/news'+url;
            //    this.$router.push({name:'industrydynamics',params:{id:item.id}})
            //    this.$router.push(`/news/detail?id=${item.id}`)
                let { href } = this.$router.resolve({ path: `/news/detail?id=${item.id}` })   
                window.open(href,'_blank') 
            },
            //分页
            handleSizeChange(val) {
                this.queryParams.pageSize=val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.queryParams.pageNum=val;
                this.getList();
                // console.log(`当前页: ${val}`);
            }

        },

    }
</script>
<style scoped> 
    .dyanimtop{
	    position:relative;
        animation-name:fandtop;
        animation-duration:1s;
        -webkit-animation-name:fandtop;
        -webkit-animation-duration:1s; /* Safari 和 Chrome */
    }  
    @keyframes fandtop
    {
        from {top:500px;}
        to {top:0px;}
    }
    @-webkit-keyframes fandtop /* Safari and Chrome */
    {
        from {top:500px;}
        to {top:0px;}
    }
    .productbox{
        /* background: #ecf0f1; */
        background: #FFFFFF;
        /* box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1); */
        border-radius:2px;
        padding:25px;
        display:flex;
        margin-bottom:30px;
        cursor:pointer;
        border:1px solid #ebeef3;
    }
    .productbox>>>.el-divider--horizontal{
        margin:0px
    }
    .productbox:hover p:nth-child(1) {
        color:#0066EB
    }
    /* transform: scale(1.2) */
    /* .productbox:hover{
          transform: scale(1.01);
          box-shadow: 0px 2px 8px 0px #87898d;
          background: #FFFFFF;
          transition: 1s;
     } */
</style>