<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/title6.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/Postman.png',
                        title:'Postman',
                        description:'Postman一款非常流行的API调试工具，被广泛的用于在开发过程中调试接口。Postman简单方便，而且功能强大。在开发调试网络程序时跟踪一些网络请求，能够高效的帮助后端开发人员独立进行接口测试。',
                        toolInfo:[{toolType:'接口测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://www.postman.com'
                    },
                    {
                        imgurl:'/assets/openSource/SoapUI.png',
                        title:'SoapUI',
                        description:'SoapUI是一款应用非常广泛的SOAP和REST API自动化测试工具，凭借其易于使用的图形界面，测试人员可以轻松验证基于 REST 和 SOAP 的 Web 服务，非常适合复杂的测试场景。',
                        toolInfo:[{toolType:'接口测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://www.soapui.org/'
                    },
                    {
                        imgurl:'/assets/openSource/REST-Assured.png',
                        title:'REST-Assured',
                        description:'REST-Assured是一个开源工具，用于在Java语言中测试REST API的好用工具，支持XML和JSON请求/响应，支持BDD-Given/When/Then的语法。这个框架让我们使用Java语言写接口测试用例变得容易和简单。',
                        toolInfo:[{toolType:'接口测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'http://rest-assured.io/'
                    },
                    {
                        imgurl:'/assets/openSource/JMeter.png',
                        title:'JMeter',
                        description:'JMeter是一款用于应用程序压力和性能测试的开源软件，也被广泛用于接口测试。JMeter支持REST、SOAP、HTTP、HTTPS、FTP、TCP等多种协议。JMeter 提供比较多的插件支持：https://jmeter-plugins.org/',
                        toolInfo:[{toolType:'接口测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://jmeter.apache.org/'
                    },
                    {
                        imgurl:'/assets/openSource/Apifox.png',
                        title:'Apifox',
                        description:'Apifox作为接口测试工具功能强大，可以支持API 文档定义、API 调试、API Mock、API 自动化测试。简单来说，Apifox = Postman + Swagger + Mock + JMeter。此外，Apifox 天生就是为团队协作而生的，接口云端实时同步更新，成熟的团队/项目/成员权限管理，满足各类企业的需求。',
                        toolInfo:[{toolType:'接口测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://www.apifox.cn/'
                    },
                    {
                        imgurl:'/assets/openSource/Katalon.png',
                        title:'Katalon Studio',
                        description:'Katalon Studio是一个强大而全面的自动化工具，用于API、Web、桌面测试和移动测试。Katalon Studio通过在一个包中包含所有框架、ALM集成和插件，提供了轻松的部署。将UI和API/Web服务组合到多个环境（Windows、Mac OS和Linux）的能力也是Katalon Studio在顶级API工具中的独特优势。此外，Katalon Studio还是一款无代码化的自动化测试工具，在“2020年软件测试趋势报道：无代码化的测试自动化”中有相关介绍。',
                        toolInfo:[{toolType:'接口测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://www.katalon.com/'
                    },
                    {
                        imgurl:'/assets/openSource/Karate.png',
                        title:'Karate',
                        description:'Karate是一个用于API测试的开源框架，不需要使用编程语言开发测试代码，测试人员可以通过使用特定领域的语言编写测试用例。该工具专门为自动化API测试而设计，由Intuit发布。几年前由Intuit公司创造的Karate已经发展成为具有综合能力的测试框架，覆盖了API 接口功能测试、UI自动化测试、性能测试，并提供Mocks支持。《敏捷测试：以持续测试促进持续交付》一书4.9.4节中有关于Karate测试工具的详尽介绍。',
                        toolInfo:[{toolType:'接口测试工具',version:'V7.92',system:'Linux、Windows、Solaris、BSD、Mac OS X、AmigaOS'}],
                        website: 'https://github.com/karatelabs/karate'
                    },
                ]
            }
        },
        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: 620px;
        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>