<template>
    <div>
        <el-carousel :interval="3000" arrow='never' :height="bannerHeight+'px'" class='wheelplanting'>
            <el-carousel-item v-for="item in indexbanner" :key="item.id" >
                <el-col :span='24'>
                    <img ref='bannerHeight' :src="item.imgurl" alt=""  @load='imgLoad'  style="width:100%;cursor:pointer" @click="jumpurl(item)">
                </el-col>
            </el-carousel-item>
        </el-carousel>
        
        <div style="background:#FFFFFF">
            <div  class="animove" style='width:1200px;margin:0 auto'>
                <div style="text-align:center;margin:50px 0">   
                    <img src="/assets/home/ceshi.png" alt="">
                </div>
                <div style="display:flex;justify-content:space-between;flex-wrap: wrap;margin-bottom: 30px;" >
                    <div v-for='(tool,key) of toolslist' :key="key" class="biwfbg" @click="goodsdetails(tool.toolId)" v-loading='toolload'>   
                        <div style="display: flex;align-items: center;">
                            <img :src="tool.imgUrl" alt="">
                            <div style="font-size:18px;color:#000;margin: 0 5px;">
                                {{tool.name}}
                            </div>
                            <div style="padding:2px 3px;border: 1px solid #0066EB;border-radius: 3px;font-size: 14px;color: #0066EB;">
                                {{ tool.deliverType }}
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <div style="color:#595959;font-size: 14px;">
                            <P style='margin:10px 0'>
                                <img src="/assets/home/testTool/shebeileixing@2x.png" alt=""> 
                                工具类型：{{tool.toolTypeName}}
                            </P>
                            <P style='margin:10px 0'>
                                <img src="/assets/home/testTool/jiaofu@2x.png" alt=""> 
                                 交付方式：{{tool.deliverType}}
                            </P>
                            <P style='margin:10px 0'>
                                <img src="/assets/home/testTool/shijian(1)@2x.png" alt="">
                                上架时间： {{tool.onlineTime.slice(0,10)}}
                            </P>
                            <P style='margin:10px 0'>
                                <img src="/assets/home/testTool/gongsi@2x.png" alt="">
                                 服务商：{{tool.providerName}}
                            </P>
                        </div>
                        <!-- <div class="bluebg">
                            <img style='margin-top:20px;width:119px;object-fit:contain;display:inline-block'  :src="tool.img" alt="">
                            <p style="font-weight:bold;font-size:16px;margin:10px 20px">{{tool.name}}</p>
                        </div>
                        <div class='whitebg' style='font-size:14px;'>   
                            <el-divider></el-divider>
                            <div style="padding-left: 48px;">
                                <P style='margin:10px 0'> 工具类型：{{tool.toolTypeName}} </P>
                                <P style='margin:10px 0'> 交付方式：{{tool.deliverType}} </P>
                                <P style='margin:10px 0'> 上架时间： {{tool.onlineTime.slice(0,10)}}</P>
                                <P style='margin:10px 0'> 服务商：{{tool.providerName}}</P>
                            </div>
                            <div style="text-align:center;">   
                                <el-button type="primary">立即购买</el-button>
                            </div>
                        </div> -->
                    </div>
                    <!-- <div class="biwfbg" @click="goodsdetails()">   
                        <div class="bluebg">
                            <img style="margin-top:20px" src="/assets/home/base.png" alt="">
                            <p style="font-weight:bold;color: #FFFFFF;font-size:16px;margin:20px">马甲9998</p>
                        </div>
                        <div class='whitebg'>   
                            <p style="height:60px">马甲9998是北京关键科技推出的自主代码分析平台，能够快速、精准的分析出代码情况.</p>
                            <el-divider></el-divider>
                            <P style='margin:10px 0'> 工具类型：静态测试工具 </P>
                            <P style='margin:10px 0'> 交付方式：SaaS  </P>
                            <P style='margin:10px 0'> 架时间： 2021-08-18</P>
                            <P style='margin:10px 0'> 服务商：北京关键科技有限公司</P>
                            <div style="text-align:center;">   
                                <el-button type="primary"  >立即购买</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="biwfbg" @click="goodsdetails('114')">   
                        <div class="bluebg">
                            <img style="margin-top:43px" src="/assets/home/keyswan.png" alt="">
                            <p style="font-weight: bold;color: #FFFFFF;font-size:16px;margin:20px">KeySwan代码组成分析平台</p>
                        </div>
                        <div class='whitebg'>   
                            <p style="height:60px">代码组成分析平台(KeySwan)是关键科技自主研发的一款以分析代码组成的分析工具，能够量化...</p>
                            <el-divider></el-divider>
                            <P style='margin:10px 0'> 工具类型：静态测试工具 </P>
                            <P style='margin:10px 0'> 交付方式：SaaS  </P>
                            <P style='margin:10px 0'> 架时间： 2020-04-22</P>
                            <P style='margin:10px 0'> 服务商：北京关键科技有限公司</P>
                            <div style="text-align:center">   
                                <el-button type="primary"  >立即购买</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="biwfbg" @click="goodsdetails('106')">   
                        <div class="bluebg">
                            <img style="margin-top:20px" src="/assets/home/eagle.png" alt="">
                            <p style="font-weight: bold;color: #FFFFFF;font-size:16px;margin:10px">EagleEye 代码静态分析工具</p>
                        </div>
                        <div class='whitebg'>   
                            <p style="height:60px">静态代码分析为完全自主研发的静态分析工具，准确支持GJB8114、GJB5369、MISRA C等多种...</p>
                            <el-divider></el-divider>
                            <P style='margin:10px 0'> 工具类型：静态测试工具 </P>
                            <P style='margin:10px 0'> 交付方式：SaaS  </P>
                            <P style='margin:10px 0'> 架时间： 2021-08-18</P>
                            <P style='margin:10px 0'> 服务商：北京关键科技有限公司</P>
                            <div style="text-align:center">   
                                <el-button type="primary"  >立即购买</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="biwfbg" @click="goodsdetails('107')">   
                        <div class="bluebg">
                            <img style="margin-top:20px" src="/assets/home/kiter.png" alt="">
                            <p style="font-weight: bold;color: #FFFFFF;font-size:16px;margin:20px">Kinterface接口测试工具</p>
                        </div>
                        <div class='whitebg'>   
                            <p style="height:60px">接口测试工具Kinterface是一款自动化的接口有效性验证工具，具备协议一致性检测能力...</p>
                            <el-divider></el-divider>
                            <P style='margin:10px 0'> 工具类型：静态测试工具 </P>
                            <P style='margin:10px 0'> 交付方式：SaaS  </P>
                            <P style='margin:10px 0'> 架时间： 2021-08-18</P>
                            <P style='margin:10px 0'> 服务商：北京关键科技有限公司</P>
                            <div style="text-align:center">   
                                <el-button type="primary"  >立即购买</el-button>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <div style="background:#F7F7FA;padding-top:10px">   
            <div style='width:1200px;margin:0 auto;font-size:14px'>
                <div style="text-align:center;margin:50px 0">   
                    <img src="/assets/home/yunce.png" alt="">
                </div>
                <div style="display:flex;justify-content:space-between" @click="aboutusdetails">
                    <div style="text-align:center" class="rapidhatching">   
                        <img style="margin:20px 0" src="/assets/home/ling.png" alt="">
                        <p>测试工具</p>
                        <p style="margin-top:-10px">快速孵化</p>
                    </div>
                    <div style="text-align:center" class="rapidhatching">   
                        <img style="margin:20px 0" src="/assets/home/nao.png" alt="">
                        <p >测试工具</p>
                        <p style="margin-top:-10px">灵活租售</p>
                    </div>
                    <div style="text-align:center" class="rapidhatching">   
                        <img style="margin:20px 0" src="/assets/home/cha.png" alt="">
                        <p >测试人员 </p>
                        <p style="margin-top:-10px">随需随聘</p>
                    </div>
                    <div style="text-align:center" class="rapidhatching">   
                        <img style="margin:20px 0" src="/assets/home/dian.png" alt="">
                        <p>测试业务 </p>
                        <p style="margin-top:-10px">精准对接</p>
                    </div>
                    <div style="text-align:center" class="rapidhatching">   
                        <img style="margin:20px 0" src="/assets/home/fang.png" alt="">
                        <p>提升企业 </p>
                        <p style="margin-top:-10px">测试能力</p>
                    </div>
                    <div style="text-align:center;" class="rapidhatching">   
                        <img style="margin:20px 0" src="/assets/home/quan.png" alt="">
                        <p>寓训于测 </p>
                        <p style="margin-top:-10px">就业无忧</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="testtools" style="background:#FFFFFF">
            <div style='width:1200px;margin:0 auto;margin-bottom:30px'>
                <div v-if="listcrowd && listcrowd.length>0" style="text-align:center;margin:50px 0">   
                    <img src="/assets/home/ceszhong.png" alt="">
                </div>
                <div v-for='(task,key) of listcrowd' :key="key"   v-loading="crowdload" class="productbox"  @click='crowdinform(task.taskId)'>
                    <div style="width:170px;display:flex;align-items:center;">   
                        <!-- <img style='width:119px;object-fit:contain;height:119px' :src="task.icon?'https://www.keyitest.cn/'+task.icon.substr(task.icon.indexOf('g')):'/assets/home/picture.png'" alt=""> -->
                        <img style='width:119px;object-fit:contain;height:119px' :src="task.icon?task.icon:'/assets/home/picture.png'" alt="">
                    </div>
                    <div style="width:980px" >   
                        <div style="display:flex;justify-content:space-between;" class="raise">   
                            <p>{{task.projectName}}</p>
                            <p style="color:#E93A3A ;font-weight: bold">￥ {{task.price}}</p>
                        </div>
                        <el-divider></el-divider>
                        <div class="cetype">   
                            <p>测试类型：{{findLabelValueByProp(testtypelist,task.testType,'dictValue','dictLabel')}}</p>
                            <p>测试工期：{{task.period}}日</p>
                            <p>发布时间： {{task.createTime.substr(0,10)}}</p>
                            <p>已竞标人数：{{(task.companyAppCount + task.personalAppCount) == 20 ? "已满":(task.companyAppCount + task.personalAppCount) }} </p>
                            <p>技能要求：{{task.techNeed}}</p>
                            <p>驻场要求：{{findByvalue(onsiteTypelist,task.onsiteType)}}</p>
                            <p>地域要求：{{task.area}}</p>
                            <p>发布方：{{task.companyName}}</p>
                        </div>
                    </div>
                </div>
                <div style="text-align:center;margin:50px 0">   
                    <img src="/assets/home/trainxy.png" alt="">
                    <!-- <img src="/assets/home/cooperation.png" alt=""> -->
                </div>
            </div>
        </div>
        <div style="background:#0066EB">
            <div style='width:1200px;margin:0 auto;margin-bottom:30px'>
                <div class="traintext" @click='nowopen'>
                    <p>软件开发基础、软件测试专业知识、软件测试工具、真实项目实践+就业</p>
                    <p>寓训于测，就业无忧</p>
                    <p>专业性强、时间短、就业无忧、精准培训、实用为主</p>
                    <div class="opennow" >立即开启</div>
                    <img src="/assets/home/yuanx.png" alt="">
                </div>
            </div>
        </div>
        <!--  style="background:#F7F7FA;" -->
        <div class="wingool">
             <!-- <div v-if="industlist && industlist.length>0" style="text-align:center;margin:50px 0">   
                <img src="/assets/home/industry.png" alt="">
            </div> -->
            <div style='width:1200px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap'>
                <!-- autoplay='false'  自动滚动 -->
                <!-- <el-carousel :interval="4000" type="card" height="450px" trigger='click'   arrow='never'>
                    <el-carousel-item >
                        <div class="windin">   
                            <img src="/assets/home/xiton.png" alt="">
                            <p style="display:inline-block">Windows、Linux 纷纷被爆漏洞...</p>
                            <p>2021-05-21</p>
                            <el-divider></el-divider>
                            <p>一夕间，多款操作系统被爆存在安全漏洞，其中包括开发者最为常用的 Windows 和 Linux 操作系统也未能幸免。有研究人员发现，通过漏洞...</p>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item >
                        <div class="windin">   
                            <img src="/assets/home/diqiu.png" alt="">
                            <p style="display:inline-block">互联网时代下的至暗之网，从初...</p>
                            <p>2021-05-21</p>
                            <el-divider></el-divider>
                            <p>当互联网成为促进人类社会发展进程中不可或缺的重要力量时，伴随着互联网特有的无界性和隐蔽性特点，社会安全的诸多隐患也渐现...</p>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item >
                        <div class="windin">   
                            <img src="/assets/home/guan.png" alt="">
                            <p >全球大半网络瘫痪，背后原因竟来...</p>
                            <p>2021-05-21</p>
                            <el-divider></el-divider>
                            <p>这周二，当许多人像往常一样刷新网站时，突然发现页面打不开了，并且出现了“503”或者“连接失败”的提示。503错误是服务器...</p>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item >
                        <div class="windin">   
                            <img src="/assets/home/google.png" alt="">
                            <p >谷歌发布以安全为主题的Android...</p>
                            <p>2021-05-21</p>
                            <el-divider></el-divider>
                            <p>谷歌近日推出了一个以安全为主题的Android更新，修复了30多个安全漏洞，这些漏洞会导致移动用户面临一系列恶意攻击。其中最严重的...</p>
                        </div>
                    </el-carousel-item>             
                </el-carousel> ;object-fit:contain-->
                <!-- <div class="windin" style="width:250px" v-for="(item,key) of industlist" :key="key"  @click="dynamicinform(item)">   
                    <img v-if="item.picWeb" :src="item.picWeb" alt="" style="height:147px;width:250px">
                    <img v-else  src="/assets/dynamic/homedydefa.png" style="height:147px;width:250px">
                    <p style="display:inline-block;height:42px">{{item.title}}</p>
                    <p style="margin-top:0">{{item.ptime && item.ptime.slice(0,10) }}</p>
                    <el-divider></el-divider>
                    <p style="line-height:1.8">{{item.summary | ellipsis}}</p>
                </div> -->
                <!-- <div class="windin" style="width:250px">   
                    <img src="/assets/home/diqiu.png" alt="">
                    <p style="display:inline-block">互联网时代下的至暗之网，从初...</p>
                    <p>2021-05-21</p>
                    <el-divider></el-divider>
                    <p>当互联网成为促进人类社会发展进程中不可或缺的重要力量时，伴随着互联网特有的无界性和隐蔽性特点，社会安全的诸多隐患也渐现...</p>
                </div>
                <div class="windin" style="width:250px">   
                    <img src="/assets/home/guan.png" alt="">
                    <p >全球大半网络瘫痪，背后原因竟来...</p>
                    <p>2021-05-21</p>
                    <el-divider></el-divider>
                    <p>这周二，当许多人像往常一样刷新网站时，突然发现页面打不开了，并且出现了“503”或者“连接失败”的提示。503错误是服务器...</p>
                </div>
                <div class="windin" style="width:250px">   
                    <img src="/assets/home/google.png" alt="">
                    <p >谷歌发布以安全为主题的Android...</p>
                    <p>2021-05-21</p>
                    <el-divider></el-divider>
                    <p>谷歌近日推出了一个以安全为主题的Android更新，修复了30多个安全漏洞，这些漏洞会导致移动用户面临一系列恶意攻击。其中最严重的...</p>
                </div> -->
            </div>
        </div>
        <div style='width:1200px;margin:0 auto 60px auto;'>
            <div style="text-align:center;margin:50px 0">   
                <img src="/assets/home/cooperation.png" alt="">
            </div>
            <div class="cooppic">  
                <img src="/assets/home/anqu.png" alt="" title="安全玻璃盒(杭州孝道科技有限公司)">           
                <img src="/assets/home/kud.png" alt="" title="北京酷德啄木鸟信息技术有限公司">
                <img src="/assets/home/qilin.png" alt="" title="深圳市奇林软件有限公司">
            </div>
           
        </div>
        
    </div>
</template>
<script>
    import $ from 'jquery'
    import store from "@/store";
    import {mapGetters} from "vuex";
    import {listTools} from "@/api/toolInfo/market";
    import {crowdlist,homecrowdlist,homeindust} from "@/api/crowdsource/crowdsource";
    import {onsiteTypelist} from "@/const/dict/commondict";
    import {findByvalue, findLabelValueByProp} from "@/util/util";
    export default{
        data(){
            return{
                bannerHeight:'500',
                indexbanner:[{id:0,imgurl:'/assets/home/banner1.png',url:'/crowdsourcing'},
                            {id:1,imgurl:'/assets/home/banner2.png',url:'/market'},
                             {id:2,imgurl:'/assets/home/banner3.png',url:'/college'}],
                            //  {id:2,imgurl:'/assets/home/banner3.png',isHref:true, url:'http://train.keyitest.cn/'}],
                toolslist:[
                    {
                        "toolId": 106,
                        "providerId": null,
                        "name": "功能测试工具",
                        "toolType": 1,
                        "deliverType": "SaaS",
                        "status": null,
                        "toolDesc": "静态代码分析为完全自主研发的静态分析工具，准确支持GJB8114、GJB5369、MISRA C等多种编码规范。支持的30多种度量指标，包括：代码行数、圈复杂度、扇入扇出、注释率等。\n静态代码分析可支持Windows、Linux、麒麟等多种典型操作系统，代码无需编译即可使用静态代码分析进行静态分析，可自定义并导出中文的测试报告。",
                        "os": null,
                        "priceDesc": null,
                        "price": 0,
                        "onlineTime": "2021-04-22 21:36:15",
                        "offlineTime": null,
                        "deleteTime": null,
                        "productQA": null,
                        "tags": null,
                        "providerName": "北京关键科技有限公司",
                        "img": "https://www.keyitest.cn/group1/M00/00/06/rBT7F2HJfyaAW_MoAAAWC7s-M1c499.png",
                        "toolTypeName": "功能测试工具"
                    },
                    {
                        "toolId": 106,
                        "providerId": null,
                        "name": "性能测试工具",
                        "toolType": 1,
                        "deliverType": "SaaS",
                        "status": null,
                        "toolDesc": "静态代码分析为完全自主研发的静态分析工具，准确支持GJB8114、GJB5369、MISRA C等多种编码规范。支持的30多种度量指标，包括：代码行数、圈复杂度、扇入扇出、注释率等。\n静态代码分析可支持Windows、Linux、麒麟等多种典型操作系统，代码无需编译即可使用静态代码分析进行静态分析，可自定义并导出中文的测试报告。",
                        "os": null,
                        "priceDesc": null,
                        "price": 0,
                        "onlineTime": "2021-04-22 21:36:15",
                        "offlineTime": null,
                        "deleteTime": null,
                        "productQA": null,
                        "tags": null,
                        "providerName": "北京关键科技有限公司",
                        "img": "https://www.keyitest.cn/group1/M00/00/06/rBT7F2HJfyaAW_MoAAAWC7s-M1c499.png",
                        "toolTypeName": "性能测试工具"
                    }
                ],//工具列表
                toolload:true,
                listcrowd:[],//众包列表
                crowdload:true,
                onsiteTypelist,//驻场需求列表
                industlist:[],//行业资讯列表
            }
        },
        mounted(){
        //    let avatar='https://www.keyitest.cn/http://192.168.1.105/group1/M00/00/05/rBT7F2GI0duAF2HqAADpGOLtpuY07.jpeg'
            //工具市场
            this.getTestTool()
            // pageNum=0&pageSize=5
            homecrowdlist({portal:'kw'}).then(response => {
                // console.log('首页众包市场----',response)
                // if(response.total>5){
                //     this.listcrowd = response.rows.slice(0,5);
                // }else{
                    this.listcrowd = response.rows
                // }
                this.crowdload = false;
            }).catch(err=>{
                // console.log('异常',err)
                this.crowdload = false;
            }) 
            //行业资讯
            homeindust({portal:'kw'}).then(res=>{
                //  console.log('行业资讯----',res)
                this.industlist=res.rows
            })
            // console.log('token--',this.token)
            store.dispatch("SET_KEYSAASDICT")
            
        },
        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 60) {
                    return value.slice(0, 60) + '...'
                }
                return value
            }
        },
        computed: {
            ...mapGetters(['token','logindate','userinform','testtypelist'])
        },
        watch:{
            // bannerHeight: {
            //   handler(val, old) {
            //       console.log('old--:',val, old)  
            //      this.bannerHeight = this.$refs.bannerHeight[0].height;
            //      console.log('gao:',this.bannerHeight)    
            //   },
            //   immediate:true
            // },
        },
        methods:{
            getTestTool() {
                listTools({portal:'kw'}).then(response => {
                    // console.log('response----',response)
                    this.toolload=false
                    //  this.toolslist = response.rows
                    if(response.total>4){
                        this.toolslist = this.toolslist.concat(response.rows.slice(0,4))
                    }else{
                        this.toolslist = this.toolslist.concat(response.rows)
                    }
                    this.toolslist.forEach(item=>{
                        if (item.name == '代码静态分析工具') {
                            item.imgUrl = '/assets/home/testTool/1@2x.png'
                        }
                        if (item.name == 'C/C++单元测试工具') {
                            item.imgUrl = '/assets/home/testTool/2@2x.png'
                        }
                        if (item.name == '源代码安全检测工具') {
                            item.imgUrl = '/assets/home/testTool/6@2x.png'
                        }
                        if (item.name == '接口测试工具') {
                            item.imgUrl = '/assets/home/testTool/4@2x.png'
                        }
                        if (item.name == '功能测试工具') {
                            item.imgUrl = '/assets/home/testTool/3@2x.png'
                        }
                        if (item.name == '性能测试工具') {
                            item.imgUrl = '/assets/home/testTool/5@2x.png'
                        }
                    })
                    
                    // console.log('工具市场----',this.toolslist)
                }).catch(err=>{
                    console.log('异常',err)
                    this.toolload=false
                })
            },
            findByvalue, 
            findLabelValueByProp,
            imgLoad(){
                this.$nextTick(()=>{
                 this.bannerHeight = this.$refs.bannerHeight[0].height;
                //  console.log('图片高度:',this.bannerHeight)
                })
            },
            //工具详情页
            goodsdetails(id){
                if(id){
                    this.$router.push(`/market/tooldetails?id=${id}`)
                }else{
                    this.$message.warning('工具维护中')
                }
            },
            //核心优势跳转关于我们页
            aboutusdetails(){
                this.$router.push(`/about`)
            },
             //众包任务详情页
            crowdinform(id){              
                this.$router.push(`/crowdsourcing/crowddetails?id=${id}`)
               
            },

            //立即开启
            nowopen(){
                console.log('立即开启',)
                // this.$router.push('/college')
                window.open('http://train.keyitest.cn/')
            },
            //banner图跳转
            jumpurl(item){
                if (item.isHref) {
                    window.open(item.url)
                } else {
                    this.$router.push(item.url)
                }
            },
            //行业资讯详情
            dynamicinform(item){
                // console.log('url',url)
                // let httpurl='http://test.lovecode.cc/news'+url;
            //    this.$router.push({name:'industrydynamics',params:{id:item.id}})
            //    this.$router.push(`/news/detail?id=${item.id}`)
            //    console.log('herf000',href)     let href = 
                let { href } = this.$router.resolve({ path: `/news/detail?id=${item.id}` })   
                window.open(href,'_blank') 
            },
        },

    }
</script>
<style scoped>
  .wheelplanting{
    z-index:0;
    position:relative;
    
  }
  .bluebg{
      /* background: linear-gradient(45deg, #2978EE, #0066EB); */
      width:280px;
      height:200px;
      border-radius:4px;
      text-align:center;
      box-shadow: 0px 2px 8px 0px rgb(54 61 67 / 10%);
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      /* line-height: 150px; */
  }
  .el-divider--horizontal{
      margin:15px 0;
  }
  .whitebg{
      background:#FFFFFF;
      width:280px;
      height:210px;
      border-radius:4px;
      text-align:center;
      padding-top: 20px;
      /* padding: 20px 30px 0px 20px; */
      box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);
      text-align:left;
      margin-bottom:30px;
      color: #333333;
      cursor:pointer;
      font-size:14px
  }
    .animove{
	    position:relative;
        animation-name:mymove;
        animation-duration:1s;
        -webkit-animation-name:mymove;
        -webkit-animation-duration:1s; /* Safari 和 Chrome */
    }  
    @keyframes mymove
    {
    from {left:-300px;}
    to {left:0px;}
    }
    @-webkit-keyframes mymove /* Safari and Chrome */
    {
    from {left:-300px;}
    to {left:0px;}
    }
    .testtools{
	    position:relative;
        animation-name:movetop;
        animation-duration:2s;
        -webkit-animation-name:movetop;
        -webkit-animation-duration:2s; /* Safari 和 Chrome */
    }  
    @keyframes movetop
    {
        from {top:1000px;}
        to {top:0px;}
    }
    @-webkit-keyframes movetop /* Safari and Chrome */
    {
        from {top:1000px;}
        to {top:0px;}
    }
    .biwfbg{
        width: 320px;
        height: 175px;
        padding: 30px;
        background: #FFFFFF;
        box-shadow: 0px 4px 34px 6px rgba(14,97,205,0.1);
        border-radius: 4px;
        margin-bottom: 30px;
        cursor:pointer;
    }
  .biwfbg:hover{
    transform:translateY(-10px);
    transition: 1s;
  }
   
  .whitebg>>>.el-button{
    margin-top:20px;
    /* margin-left:57px; */
    width:140px;
    height:40px;
    font-size:18px;
    color:rgba(255,255,255,1);
    background: linear-gradient(45deg, #2978EE, #0066EB);
    border:none;
    border-radius:6px;
    /* line-height:40px;     */
  }
  .productbox{
        /* width: 1200px; */
        /* height: 110px; */
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);
        border-radius: 4px;
        padding:25px 0 10px 18px;
        display:flex;
        margin-bottom:30px;
        cursor: pointer;
  }
    .raise p:nth-child(1){
            font-weight: bold;
            color: #1A1A1A;
    }
    .productbox:hover .raise p:nth-child(1){
        color:#0066EB;
    }
    .productbox:hover{
        transform: scale(1.01);
        transition: 1s;
    }
    .rapidhatching{
        cursor: pointer;
        color:#1A1A1A;
        
    }
    .rapidhatching:hover p{
         color:#0066EB;
    }
    .cetype{
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap
    }
    .cetype p{
        width:200px;
        font-size:14px;
        margin:10px 0
    }
    .cetype p:nth-child(1){
        width:260px;
    }
    .cetype p:nth-child(5){
        width:260px;
    }
    .productbox>>>.el-divider--horizontal{
        margin:8px
    }
    .traintext{
        margin-top:70px;
        display:inline-block;
        cursor:pointer;
    }
    .traintext p:nth-child(1){
        font-size: 19px;
        font-weight: 400;
        color: #FFFFFF;
    }
    .traintext p:nth-child(2){
        font-size: 68px;
        font-weight: bold;
        color: #FFFFFF;
        margin:25px 0
    }
    .traintext p:nth-child(3){
       font-size: 19px;
        font-weight: 400;
        color: #FFFFFF;
    }
    .opennow{
        width: 186px;
        height: 48px;
        background: #FFFFFF;
        box-shadow: 0px 1px 13px 0px rgba(12, 54, 110, 0.31);
        border-radius: 24px;
        font-size: 24px;
        font-weight: bold;
        color: #0066EB;
        line-height:48px;
        text-align:center;
        
    }
    .traintext img{
        margin-top:-300px;
        margin-bottom:-5px
    }
    .cooppic{
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap
    }
    .cooppic img{
        margin:0 20px 30px 0;
        opacity: 0.5;
        transition: 0.3s;
        cursor: pointer;
        width:232px;
        height:66px;
        /* transition: all 0.25s ease 0s;
        transform: translate3d(-1942px, 0px, 0px); */
    }
    .cooppic img:hover{
        opacity:1;
    }
    .windin{
        /* width:250px; */
        /* height:330px; */
        /* width: 100%; */
        background:#FFFFFF;
        box-shadow: 0px 2px 9px 0px rgba(54, 61, 67, 0.11);
        border-radius: 4px;
        padding:15px 15px 5px 15px;
        margin:30px 0;
        display:inline-block;
        cursor:pointer;
    }
    .windin :nth-child(2){
        font-size:16px;
        font-weight:bold;
        color:#1A1A1A;
    }
    .windin:hover :nth-child(2){
         color:#0066EB;
    }
    .windin :nth-child(n+3){
        font-size:14px;
    }
    .windin>>>.el-divider--horizontal{
        width: 32px;
        height: 2px;
        background: #0066EB;
        border-radius: 1px;
    }
    .wingool>>>.el-carousel__container{
        width:1200px;
        margin-left:50px

    }
    .wingool>>>.el-carousel__item--card{
        width:280px;
        /* height:400px; */
    }
    .wingool>>>.el-carousel__item, .el-carousel__mask{
        left: 100px;
    }
    .wingool>>>.el-carousel__button{
        border-radius: 50%;
        width: 12px;
        height:12px;
        background: #CCCCCC;
    }
    .wingool>>>.el-carousel__indicators--outside button{
       opacity: 1
    }
    .wingool>>>.el-carousel__indicator.is-active button{
         background: #0066EB;
    }
    .wingool>>>.el-carousel__indicators--outside{
        margin-bottom:30px
    }
</style>