<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/title2.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/Codacy.png',title:'Codacy',description:'Codacy是一款企业级安全保障工具，能够完成静态分析（安全和性能检查）、代码重复率、代码复杂性和测试覆盖率等分析，支持多种语言（Scala、Java、Java、Python、Ruby、PHP）、上千条规则和灵活定制，能够分析不同分支、忽视不相关的问题保持分析结果简洁、管理用户角色和权限等。',
                    toolInfo:[{toolType:'源代码扫描工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],website: 'https://www.codacy.com/'},
                    {imgurl:'/assets/openSource/LGTM.png',title:'LGTM',description:'LGTM是一款开源且高效的代码审查工具，可通过变体分析检查代码中的常见漏洞与披露（CVE），同时支持几乎所有主要编程语言，包括 C/C++、Go、Java、JavaScript/TypeScript、C# 以及 Python 等。LGTM 首先使用 CodeQL 技术识别问题、解决问题，并扫描类似的代码模式以避免出现进一步威胁。',
                    toolInfo:[{toolType:'源代码扫描工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],website: 'https://lgtm.com/'},
                    {imgurl:'/assets/openSource/SonarQube.png',title:'SonarQube',description:'SonarQube 是最著名的静态代码分析工具之一，旨在清理并保护 DevOps 工作流及代码。通过对代码质量的持续分析，SonarQube 会定期检查以检测出 bug 及安全问题。SonarQube支持 27 种编程语言，包括 Java、Python、C#、C/C++、Swift、PHP、COBOL 以及 JavaScript 等，并能在 GitHub、Azure DevOps 等 repo 中直接分析代码，在代码审查期间提供即时反馈。',
                    toolInfo:[{toolType:'安全性测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],website: 'https://www.sonarqube.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>