<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/title4.png" alt="">
                </div>
                <div class="toolBoxs"> 
                    <!-- 页面有数据后删除 -->
                    <div style="margin:0 auto;">
                        <el-empty description="暂无数据"></el-empty>
                    </div>
                    <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/JUnit.png',
                    //     title:'JUnit',
                    //     description:'JUnit是一个为Java编程语言设计的开源单元测试框架，由 Kent Beck 和 Erich Gamma建立，它是单元测试框架家族中的一个，这些框架被统称为xUnit，JUnit是xUnit 家族中最为成功的一个。JUnit 有它自己的 Junit 扩展生态圈，多数 Java 的开发环境都已经集成了 JUnit 作为单元测试的工具。JUnit 的最新版本是JUnit 5，它不再是一个单一的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/'
                    // },
                ]
            }
        },
        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>