<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/title3.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-weight: bold;color: #1A1A1A;margin:22px 0;">工具名称：{{item.title}}</p>
                                <p style="margin:0 30px;text-align:left;font-size: 14px;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/JUnit.png',
                        title:'JUnit',
                        description:'JUnit是一个为Java编程语言设计的开源单元测试框架，由 Kent Beck 和Erich Gamma建立，它是单元测试框架家族中的一个，这些框架被统称为xUnit，JUnit是xUnit家族中最为成功的一个。JUnit有它自己的扩展生态圈，多数Java的开发环境都已经集成了JUnit作为单元测试的工具。JUnit的最新版本是JUnit5，它不再是一个单一的JAR包，而是由JUnit platform（平台）、JUnit Jupiter 和JUnit Vintage这3部分组成。',
                        toolInfo:[{toolType:'单元测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://junit.org/junit5/'
                    },
                    {
                        imgurl:'/assets/openSource/TestNG.png',
                        title:'TestNG',
                        description:'TestNG是另一个为Java编程语言设计的开源单元测试框架，是一个受JUnit和NUnit启发而来的测试框架，但它引入了一些新功能，使其更强大、更容易使用，例如：核心特性是多线程测试执行，测试代码是否是多线程安全的；提供注释支持；支持数据驱动测试(使用@DataProvider)；支持参数化测试；强大的执行模型（不再有TestSuite）；支持各种工具和插件(Eclipse，IDEA，Maven等…)；嵌入BeanShell以获得更多的灵活性；用于运行时和日志记录的默认JDK函数(没有依赖关系)。',
                        toolInfo:[{toolType:'单元测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://testng.org/'
                    },
                    {
                        imgurl:'/assets/openSource/GoogleTest.png',
                        title:'GoogleTest',
                        description:'GoogleTest是一个跨平台的(Liunx、Mac OS X、Windows 、Cygwin 、Windows CE and Symbian ) C++单元测试框架，由google公司发布，为在不同平台上为编写C++测试而开发的。它提供了丰富的断言、致命和非致命判断、参数化、“死亡测试”等等。例如：测试用例本身就是一个exe工程，编译之后可以直接运行，非常的方便。编写测试案例变的非常简单（使用一些简单的宏如TEST），让我们将更多精力花在测试用例设计上。提供了强大丰富的断言的宏，用于对各种不同检查点的检查。提高了丰富的命令行参数对脚本运行进行一系列的设置。',
                        toolInfo:[{toolType:'单元测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://github.com/google/googletest'
                    },
                    {
                        imgurl:'/assets/openSource/Pytest.png',
                        title:'Pytest',
                        description:'pytest是一个非常成熟的全功能的支持Python语言的单元自动化测试框架。简单灵活，容易上手，支持参数化；能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动化测试，以及接口自动化测试（pytest集成requests）。',
                        toolInfo:[{toolType:'单元测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'http://pytest.org/'
                    },
                    {
                        imgurl:'/assets/openSource/Unittest.png',
                        title:'Unittest',
                        description:'unittest是Python自带的一个单元测试框架，无需安装，使用简便，引入包 import unittest 即可使用。unittest单元测试框架作为python的标准库，是其他单元测试框架的基础。',
                        toolInfo:[{toolType:'单元测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'http://docs.python.org/zh-cn/3/library/unittest.html'
                    },
                    {
                        imgurl:'/assets/openSource/JMockit.png',
                        title:'JMockit',
                        description:'JMockit是一个用于Java语言单元测试的开源Mock工具，包含了工具和API集合。Jmockit可以和junit和TestNG配合使用编写单元测试。JMockit支持类级别整体mock和部分方法重写，以及实例级别整体mock和部分mock，可以mock静态方法、私有变量及局部方法。这个工具还具有统计单元测试代码覆盖率的功能，提供了三种类型的代码覆盖率，如行覆盖率、路径覆盖率和数据覆盖率。',
                        toolInfo:[{toolType:'单元测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'http://jmockit.org/'
                    },
                    {
                        imgurl:'/assets/openSource/Jacoco.png',
                        title:'Jacoco',
                        description:'Jacoco是一个开源的免费Java代码覆盖工具，由EclEmma创建，其使用方法很灵活，可以嵌入到Ant、Maven中；可以作为Eclipse插件，可以使用其Java Agent技术监控Java程序等等。很多第三方的工具提供了对JaCoCo的集成，如sonar、Jenkins等。JaCoCo包含了多种尺度的覆盖率计数器：指令级覆盖(Instructions,C0coverage)、分支（Branches,C1coverage）、圈复杂度(CyclomaticComplexity)、行覆盖(Lines)、方法覆盖(non-abstract methods)、类覆盖(classes)',
                        toolInfo:[{toolType:'单元测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'http://jmockit.org/'
                    },
                    {
                        imgurl:'/assets/openSource/EvoSuite.png',
                        title:'EvoSuite',
                        description:'EvoSuite是由英国Sheffield（谢菲尔德）等大学联合开发的一种开源工具，用于自动生成测试用例集，生成的测试用例均符合Junit的标准，可直接在Junit中运行，并得到了Google和Yourkit的支持。通过使用此自动测试工具能够在保证代码覆盖率的前提下极大地提高测试人员的开发效率。但是只能辅助测试，并不能完全取代人工，测试用例的正确与否还需人工判断。',
                        toolInfo:[{toolType:'单元测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://www.evosuite.org/'
                    },
                    {
                        imgurl:'/assets/openSource/DiffblueCover.png',
                        title:'Diffblue Cover',
                        description:'Diffblue Cover是一个自动化的单元测试编写工具，通过分析Java应用程序编写反映当前行为的单元测试，提高测试覆盖率，并帮助开发人员在将来的代码更改中发现回归缺陷。',
                        toolInfo:[{toolType:'单元测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://plugins.jetbrains.com/plugin/14946-diffblue-cover/'
                    },
                ]
            }
        },
        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: 680px;
        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>