<template>
    <div style="background:#F5F5F7">
        <img style="width:100%" src="/assets/openSource/title.png" alt="">
        <div class="animotop" style="">
            <div  class="animove cardPubClass">
                <div style="text-align:center;padding:50px 0">
                    <img src="/assets/openSource/title1.png" alt="">
                </div>
                <div class="toolBoxs"> 
                    <div v-for="(item,index) in toolList" :key="index">
                        <div class="boxContent">
                            <img :src="item.imgurl" style="width:570px;height:224px;" alt="">
                            <div>
                                <p style="font-size: 20px;font-family: Microsoft YaHei;font-weight: bold;color: #1A1A1A;margin:22px 0;">工具名称：{{item.title}}</p>
                                <p style="margin:0 30px;text-align:left;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #333333;line-height: 28px;">工具描述：{{item.description}}</p>
                            </div>
                            <div class="dividerClass">
                                <el-divider></el-divider>
                            </div>
                            <div class="toolInfo" v-for="(tool, index2) in item.toolInfo" :key="index2">
                                <div style="margin-bottom:10px;">
                                    <span>
                                        <img style="margin-right: 8px;vertical-align: middle;" src="/assets/openSource/shebeileixing.png" alt="">
                                        工具类型：{{tool.toolType}}
                                    </span> 
                                    <span style="margin-left: 24px;">
                                        <img style="margin-right: 8px;vertical-align: middle;" src="/assets/openSource/banbengengxin.png" alt="">
                                        当前版本：{{tool.version}}
                                    </span>
                                </div>
                                <div>
                                    <span>
                                        <img style="margin-right: 8px;vertical-align: middle;" src="/assets/openSource/caozuoxitong.png" alt="">
                                        支持操作系统：{{tool.system}}
                                    </span> 
                                </div>
                            </div>
                            <div class="websiteClass" @click="openUrl(item.website)">
                                官网：{{item.website}}<i class="el-icon-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                toolList: [
                    {
                        imgurl:'/assets/openSource/Metasploit.png',
                        title:'Metasploit',
                        description:'Metasploit是一个开源的、先进且广泛使用的渗透测试框架，具有许多渗透方案的模拟功能，用于离散任务的元模块，如网络分段测试，能够发现超过1500种漏洞。',
                        toolInfo:[{toolType:'安全性测试工具',version:'V7.92',system:'Linux'}],
                        website: 'https://www.metasploit.com/'},
                    {
                        imgurl:'/assets/openSource/NMap.png',
                        title:'NMap',
                        description:'NMap是Network Mapper的缩写。它是一个免费和开源的安全检查工具，用于网络调查和安全评估，如检查开放的端口、监督管理检修时间表、观察主机或管理的正常运行时间。它支持Linux、Windows、Mac OS、AmigaOS等，可用于弄清组织上有哪些主机可以使用、正在运行什么工作框架和版本、正在使用什么样的捆绑通道/防火墙等。',
                        toolInfo:[{toolType:'安全性测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://nmap.org/'},
                    {
                        imgurl:'/assets/openSource/SQLmap.png',
                        title:'SQLmap',
                        description:'SQLmap是一个开源的、流行的且强大的渗透测试工具，用于识别那些影响各种数据集的SQL滥用和SQL注入漏洞。它具有一个强大的漏洞扫描引擎，支持大量的数据库服务，包括MySQL、Oracle、PostgreSQL、MS SQL Server等。此外，该测试工具支持六种类型的SQL注入方法。',
                        toolInfo:[{toolType:'安全性测试工具',version:'V7.92',system:'Linux OS X、AmigaOS'}],
                        website: 'https://sqlmap.org/'
                    },
                    {
                        imgurl:'/assets/openSource/W3af.png',
                        title:'W3af',
                        description:'W3af是一个Python开发的、流行且高效的Web应用渗透测试平台。可以用来检测网络应用程序中的200多种安全问题，包括SQL注入、跨站脚本、缓冲区溢出漏洞、CSRF漏洞、可猜测凭证、未处理的应用错误和不安全的DAV配置等等。它有一个图形和控制中心的用户界面，适用于Windows、Linux和Mac OS。',
                        toolInfo:[{toolType:'安全性测试工具',version:'V7.92',system:'Linux OS X、AmigaOS'}],
                        website: 'http://w3af.org/'
                    },
                    {
                        imgurl:'/assets/openSource/ZAP.png',
                        title:'ZAP',
                        description:'ZAP（Zed Attack Proxy）是一个由OWASP开发的、毫无保留的开源网络应用程序安全扫描工具。ZAP支持Windows、Unix/Linux和Mac OS，能够发现网络应用中的各种安全漏洞，支持Web Socket、基于REST的API和动态SSL证书、强制浏览、拦截代理它安装和使用都简单，那些刚接触应用安全的人和专业的渗透分析员都能使用。',
                        toolInfo:[{toolType:'安全性测试工具',version:'V7.92',system:'Linux OS X、AmigaOS'}],
                        website: 'https://www.zaproxy.org/'
                    },
                ]
            }
        },
        methods: {
            openUrl (url) {
                window.open(url,'_blank')
            }
        }
    }
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}
    .cardPubClass {
        width:1200px;
        margin:0 auto
    }
    .toolBoxs {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .boxContent {
        width: 570px;
        height: 590px;
        text-align: center;
        background: #FFFFFF;
        border: 1px solid #D5DBE4;
        position: relative;
        margin-bottom: 40px;
    }
    .dividerClass {
        margin: 0 30px;
    }
    .dividerClass /deep/ .el-divider--horizontal{
        margin:15px 0;
    }
    .toolInfo {
        text-align: left;
        margin-left: 30px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }
    .websiteClass {
        width: 511px;
        height: 32px;
        line-height:32px;
        margin:0 auto;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        background: #5596EB;
        position: absolute;
        bottom: 30px;
        left: 30px;
    }
    .websiteClass:hover {
        transition: .5s;
        cursor: pointer;
        background: #196cd8;
    }
    .el-icon-right {
        margin-left: 10px;
    }
    .animotop{
	    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;}
    }
</style>