<template>
    <div>
        <img style="width:100%" src="/assets/openSource/title.png" alt="">
        <div class="tytool">
            <div style="display:flex">              
                <div class="typetext">工具类型</div>
                <el-tabs v-if="tooltypelist.length>0"  v-model="toolType" @tab-click="showDataTypeChage">
                    <!-- dictValue dictLabel -->
                    <el-tab-pane label="全部" name="''"></el-tab-pane>
                    <el-tab-pane v-for="(item,key) of tooltypelist" :key="key" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
                </el-tabs>
            </div>
            <div v-if='toolslist && toolslist.length>0'>
                <div v-for='(tool,key) of toolslist' :key="key" class="productbox" :style="{padding:officialwebsite?'':'10px 0 5px 18px'}" @click="toolsinform(tool.toolId)">
                    <div style="width:160px;display:flex;align-items:center;">   
                        <img :src="tool.imgurl">
                    </div>
                    <div style="width:970px" >   
                        <div style="display:flex;justify-content:space-between;align-items: center;" class="raise">   
                            <p>{{tool.title}}</p>
                            <a style="color:#0066EB;text-decoration: none;" :href="tool.website" target="_blank">{{tool.website}}</a>
                        </div>
                        <el-divider></el-divider>
                        <p :title="tool.description"
                            style="font-size:14px;color: #1a1a1a;margin-bottom:5px;line-height:1.8">{{tool.description | ellipsis}}</p>
                        <div class="cetype">   
                            <p>工具类型：{{tool.toolInfo.toolType}} </p>
                            <p>当前版本： {{tool.toolInfo.version}}</p>
                            <p>支持操作系统：{{tool.toolInfo.system}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else>   
                <el-empty ></el-empty>
            </div>
            <div  v-if="officialwebsite && total>10" style='width:100%;margin-top:30px;text-align: center;'>
                <el-pagination background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
            <!--  :page-sizes="[3, 6, 30]" sizes,-->
            <div v-if="!officialwebsite && total>3" style='width:100%;margin-top:30px;text-align: center;'>
                <el-pagination background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"              
                    :page-size="pageSize"
                    layout="total,  prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {listTools} from "@/api/toolInfo/market";
    export default{
        data(){
            return{
                // loading:true,
                toolType:null,//工具类型
                deliverType:null,//支付方式
                toolslist:[],//工具数组
                tooltypelist: [
                    {dictLabel: '源代码扫描工具'},
                    {dictLabel: '单元测试工具'},
                    {dictLabel: '功能测试工具'},
                    {dictLabel: '压力测试工具'},
                    {dictLabel: '接口测试工具'},
                    {dictLabel: '安全性测试工具'},
                ],
                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/'
                    },
                    {
                        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/'
                    },
                    {
                        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/'
                    },
                    {
                        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'
                    },
                ],
                currentPage:1,
                total:'',
                pageNum:1,
                pageSize:10,
                officialwebsite:true,//是否官网
            }
        },
        computed: {
            // ...mapGetters(['paytypelist','tooltypelist'])
        },
        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 150) {
                    return value.slice(0, 150) + '...'
                }
                return value
            }
        },
        mounted(){
            this.toolslist = this.toolList
            // let currentrout=this.$route.path;
            // if(currentrout!=='/market'){
            //     this.officialwebsite=false;
            //     this.pageSize=3
            // }
            // this.getList()      
        },
        methods:{
            /** 查询列表 */
            getList() {
                this.loading = true;
                let data={
                     toolType:this.toolType,
                     deliverType:this.deliverType,
                     pageNum:this.pageNum,
                     pageSize:this.pageSize,
                     status: 1
                };
                Object.keys(data).forEach(keyd=>{
                    if(!data[keyd] || data[keyd]=='' || data[keyd]=='0' || data[keyd]=="''") { delete data[keyd]; }
                })
                listTools(data).then(response => {
                    this.toolslist = response.rows;
                    this.total = response.total;
                    this.loading = false;
                }).catch(err=>{
                })
            },
            //工具方式
            showDataTypeChage(data){
                // this.getList()
                this.toolslist = []
                if (data.label === '全部') {
                    this.toolslist = this.toolList
                } else {
                    this.toolList.forEach(item=>{
                        if (item.toolInfo.toolType === data.label) {
                            this.toolslist.push(item)
                        }
                    })
                }
            },
            //支付方式
            payTypeChage(){
                this.getList()      
            },
            //工具详情
            toolsinform(id){
                // if(this.officialwebsite){
                    // this.$router.push(`./openSource/openSourceTooldetails?id=${id}`)
                // }else{
                //     this.$router.push(`/console/mytooldetails?id=${id}`)
                // }
            },
            //分页
            handleSizeChange(val) {
                 this.pageSize=val;
                this.getList();
            },
            //当前页码
            handleCurrentChange(val) {
                this.pageNum=val;
                this.getList();
            }
        },

    }
</script>
<style scoped>
    .tytool{
        width:1200px;
        margin:30px auto;
    }
    .notytool{
        width:1200px;
        margin-left:30px;
    }
    .tytool>>>.el-tabs__item.is-top:last-child {
        padding-right: 20px;
    }
    .notytool>>>.el-tabs__item.is-top:last-child {
        padding-right: 20px;
    }
    .el-tabs>>>.el-tabs__nav-wrap::after{
        background-color:transparent;
    }
    .el-tabs>>>.el-tabs__item{
        color: #4D4D4D;
    }
    .el-tabs>>>.el-tabs__active-bar{
        background-color:transparent;
    }
    .el-tabs>>>.el-tabs__item.is-active{
        background:#0066EB;
        color:#fff;
        border:none;
        border-radius: 4px;
    }
    .tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left:22px;
    }
    .tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) {
        padding-right:18px;
    }
    .tytool>>>.el-divider--horizontal{
        margin:5px 0 15px 0
    }
    .notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left:22px;
    }
    .notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) {
        padding-right:18px;
    }
    .notytool>>>.el-divider--horizontal{
        margin:-5px 0 5px 0
    }
    .typetext{
        color: #4D4D4D;
        font-weight: bold;
        height:40px;
        line-height:40px;
        margin-right:20px;
        font-size:17px;
    }
    .productbox>>>.el-divider--horizontal{
        margin:0px
    }
    .cetype{
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        color: #666666;
    }
    .productbox{
        /* width: 1200px; */
        /* height: 110px; */
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);
        border-radius: 4px;
        padding:20px 20px 10px 20px;
        display:flex;
        justify-content: space-between;
        margin-bottom:30px;
        cursor:pointer;
    }
    .cetype p{
        /* width:200px; */
        font-size:14px;
        margin:10px 0
    }
    .raise :nth-child(1){
        font-weight: bold;
    }
    .productbox:hover .raise p:nth-child(1){
        /* color:#0066EB */
    }
    .productbox:hover{
          transform: scale(1.01);
          transition: 1s;
          box-shadow: 0px 2px 8px 0px #87898d;
     }
     @media screen and (max-width: 1500px){
        .productbox{
            width:1100px;
            padding:25px 20px 10px 18px!important
        }

     }
</style>