<template>
    <div>
        <!-- 轮播图 -->
        <el-carousel :interval="3000" arrow="never" height="500px" class="wheelplanting" trigger="click">
            <el-carousel-item v-for="item in indexbanner" :key="item.imgurl" style="position: relative">
                <el-col :span="24">
                    <!-- <el-button type="primary" class="lunbobtn">测试</el-button> -->
                    <img
                        ref="bannerHeight"
                        :src="item.imgurl"
                        alt=""
                        
                        style="width: 100%; height: 500px; object-fit: cover; cursor: pointer"
                        @click="jumpurl(item)"
                    />
                </el-col>
            </el-carousel-item>
        </el-carousel>
        <!-- 金刚区+测试工具 -->
        <div style="background: rgb(247, 247, 250)">
            <div class="animove" style="width: 1200px; margin: 0 auto; padding-top: 30px">
                <!-- <div class="productbox" style="height: 100px; margin-top: -50px; padding: 0 20px; justify-content: space-around;box-shadow: 0px 5px 26px 2px rgba(39, 86, 143, 0.08);">
          <div class="software" @click="goTopnav('/market')">
            <img src="/assets/homepage/coppru.png" alt="" />
            <div class="productboxptibox">
              <div class="productboxpti">测试工具</div>
              <div class="productboxpinfo">多样化测试工具全方位服务</div>
            </div>
          </div>
          <div style="width: 1px; height: 52px; background: #ebebeb; margin: 24px"></div>
          <div class="software" @click="goTopnav('/crowdsourcing')">
            <img src="/assets/homepage/csdh.png" alt="" />
            <div class="productboxptibox">
              <div class="productboxpti">众包服务</div>
              <div class="productboxpinfo">竞标报名众包任务</div>
            </div>
          </div>
          <div style="width: 1px; height: 52px; background: #ebebeb; margin: 24px"></div>
          <div class="software" @click="goTopnav('/ability')">
            <img src="/assets/homepage/perso.png" alt="" />
            <div class="productboxptibox">
              <div class="productboxpti">人才服务</div>
              <div class="productboxpinfo">IT软件人才库覆盖多省市</div>
            </div>
          </div>
          <div style="width: 1px; height: 52px; background: #ebebeb; margin: 24px"></div>
          <div class="software" @click="goTopnav('/college')">
            <img src="/assets/homepage/peixunguanli.png" alt="" />
            <div class="productboxptibox">
              <div class="productboxpti">培训服务</div>
              <div class="productboxpinfo">专业培训软件测试人才</div>
            </div>
          </div>
        </div> -->
                <!-- 测试工具 -->
                <div class="titlesty" style="margin-bottom: 0; margin-top: 0px">
                    <img src="/assets/homepage/rihhj.png" alt="" />
                    <p>专业的测试工具</p>
                    <img src="/assets/homepage/lesftt.png" alt="" />
                </div>
                <div style="text-align: center; color: #595959; margin: 20px 0 70px 0; font-size: 16px">
                    专业的测试工具，全方位服务软件质量
                </div>
                <div style="display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px">
                    <div
                        class="newbiwfbg"
                        v-for="tool of toolslist.slice(0, 3)"
                        :key="tool.name"
                        @click="goodsdetails(tool.toolId)"
                        v-loading="toolload"
                    >
                        <div class="biwfbg">
                            <div style="display: flex; align-items: center">
                                <!-- <img :src="tool.imgUrl" alt="" /> -->
                                <div style="font-size: 18px; color: #000; margin-right: 7px; font-weight: bold">
                                    {{ 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>
                            <p style="color: #333333; font-size: 14px; line-height: 27px">
                                {{ tool.toolDesc | toolsmarket }}
                            </p>
                            <p class="bottoncon" style="color: #737373; font-size: 14px">
                                <span style="margin-right: 10px">工具类型：{{ tool.toolTypeName }}</span>
                                <span>上架时间： {{ tool.onlineTime.slice(0, 10) }}</span>
                            </p>
                            <div class="arrow">→</div>
                        </div>
                    </div>
                    <div
                        class="newbiwfbg2"
                        v-for="tool of toolslist.slice(3, 6)"
                        :key="tool.name"
                        @click="goodsdetails(tool.toolId)"
                        v-loading="toolload"
                    >
                        <div class="biwfbg">
                            <div style="display: flex; align-items: center">
                                <!-- <img :src="tool.imgUrl" alt="" /> -->
                                <div style="font-size: 18px; color: #000; margin-right: 7px; font-weight: bold">
                                    {{ 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>
                            <p style="color: #333333; font-size: 14px; line-height: 27px">
                                {{ tool.toolDesc | toolsmarket }}
                            </p>
                            <p class="bottoncon" style="color: #737373; font-size: 14px">
                                <span style="margin-right: 10px">工具类型：{{ tool.toolTypeName }}</span>
                                <span>上架时间： {{ tool.onlineTime.slice(0, 10) }}</span>
                            </p>
                            <div class="arrow">→</div>
                        </div>
                    </div>
                </div>

                <div class="titlesty" @click="nextpage('tool')" style="margin: -20px 10px 0 0">
                    <p style="color: #0066eb; font-size: 14px; font-weight: 500">查看更多工具 ></p>
                </div>
            </div>
        </div>
        <!-- 众包任务 -->
        <div style="background: #f7f7fa; padding: 10px 0 50px 0">
            <div style="width: 1200px; margin: 0 auto; font-size: 14px">
                <div class="titlesty" style="margin-bottom: 0">
                    <img src="/assets/homepage/rihhj.png" alt="" />
                    <p>测试众包任务</p>
                    <img src="/assets/homepage/lesftt.png" alt="" />
                </div>
                <div style="text-align: center; color: #595959; margin: 20px 0 50px 0; font-size: 16px">
                    企业发布测试任务，多人竞标报名任务
                </div>
                <div style="display: flex; justify-content: space-between">
                    <!-- <div class="bgguk">
            <div style="margin: 50px 40px">
              <p style="color: #000000; font-size: 25px; margin: 0">软件众包服务</p>
              <div style="width: 24px; height: 4px; background: #1472ec; margin: 15px 0"></div>
              <p style="margin-bottom: 0px">企业发布测试任务需求</p>
              <p style="margin-top: 10px">多人竞标报名任务</p>
            </div>
            <div class="facj" @click="nextpage('crowd')">
              <div class="bluebtn">发布任务</div>
              <div class="whitebtn" style="background: #ffffff; color: #0066eb; margin-left: 14px">查看更多</div>
            </div>
          </div> -->
                    <div class="bggukright">
                        <div
                            v-for="task of listcrowd"
                            :key="task.taskId"
                            v-loading="crowdload"
                            style="width: 100%; padding: 10px 30px 10px 18px"
                            class="productbox taskboxTransform marginbotta"
                            @click="crowdinform(task.taskId)"
                        >
                            <div style="width: 170px; display: flex; align-items: center">
                                <img
                                    v-if="task.testType.split(',')[0] == 'static'"
                                    style="width: 106px; object-fit: contain; height: 106px"
                                    src="/assets/crowd/jtcs.png"
                                    alt=""
                                />
                                <img
                                    v-else-if="task.testType.split(',')[0] == 'function'"
                                    style="width: 106px; object-fit: contain; height: 106px"
                                    src="/assets/crowd/gncs.png"
                                    alt=""
                                />
                                <img
                                    v-else-if="task.testType.split(',')[0] == 'performance'"
                                    style="width: 106px; object-fit: contain; height: 106px"
                                    src="/assets/crowd/xncs.png"
                                    alt=""
                                />
                                <img
                                    v-else-if="task.testType.split(',')[0] == 'security'"
                                    style="width: 106px; object-fit: contain; height: 106px"
                                    src="/assets/crowd/aqcs.png"
                                    alt=""
                                />
                                <img
                                    v-else-if="task.testType.split(',')[0] == 'reliability'"
                                    style="width: 106px; object-fit: contain; height: 106px"
                                    src="/assets/crowd/kkxcs.png"
                                    alt=""
                                />
                                <img
                                    v-else-if="task.testType.split(',')[0] == 'development'"
                                    style="width: 106px; object-fit: contain; height: 106px"
                                    src="/assets/crowd/ycrw.png"
                                    alt=""
                                />
                                <img
                                    v-else
                                    style="width: 106px; object-fit: contain; height: 106px"
                                    src="/assets/crowd/qtcs.png"
                                    alt=""
                                />
                            </div>
                            <div style="width: 980px">
                                <div style="display: flex; justify-content: space-between" class="raise">
                                    <p style="font-size: 18px; margin: 10px 0; font-weight: bold; color: #1a1a1a">
                                        {{ task.projectName }}
                                    </p>
                                    <p style="font-size: 16px; color: #e93a3a; font-weight: bold; margin: 10px 0">
                                        <span style="font-size: 13px">￥ </span>{{ task.price }}
                                    </p>
                                </div>
                                <el-divider></el-divider>
                                <!-- <div class="cetype">
                                    <p>
                                        任务类型：{{
                                            findLabelValueByProp(tasktypelist, task.testType, 'dictValue', 'dictLabel')
                                        }}
                                    </p>
                                    <p>任务工期：{{ task.period }}天</p>
                                    <p>发布时间： {{ task.createTime.substr(0, 10) }}</p>
                                    <p>技能要求：{{ task.techNeed }}</p>

                                    <p>
                                        共招<span style="color: #0066eb">{{ task.needPerson }}</span
                                        >人 / 已报名
                                        <span style="color: #0066eb">{{
                                            task.companyAppCount + task.personalAppCount
                                        }}</span
                                        >人
                                    </p>

                                    <div style="display: flex">
                                        状态：
                                        <div class="isBm" v-if="task.taskStatus == 0">报名中</div>
                                        <div class="isBmjs" v-else>报名结束</div>
                                    </div>
                                </div> -->
                                <div class="cetype">
                                    <p>
                                        任务类型：
                                        {{
                                            findLabelValueByProp(tasktypelist, task.testType, 'dictValue', 'dictLabel')
                                        }}
                                    </p>
                                    <p>任务工期：{{ task.period }}天</p>
                                    <p>发布时间： {{ task.createTime.substr(0, 10) }}</p>
                                    <p>
                                        共招<span style="color: #0066eb">{{ task.needPerson }}</span
                                        >人 / 已报名
                                        <span style="color: #0066eb">{{
                                            task.companyAppCount + task.personalAppCount
                                        }}</span
                                        >人
                                        <!-- 当前报名人数/计划招募人数：<span style="color:#4485ee">
                                    {{
                                    task.companyAppCount + task.personalAppCount == 20
                                        ? '已满'
                                        : task.companyAppCount + task.personalAppCount
                                }}/{{task.needPerson}}
                                </span> -->
                                    </p>
                                    <p>技能要求：{{ task.techNeed | limittechNeed }}</p>
                                    <p>驻场要求：{{ findByvalue(onsiteTypelist, task.onsiteType) }}</p>
                                    <p>地域要求：{{ task.area }}</p>
                                    <!-- <p>发布方：{{ task.companyName }}</p> -->
                                    <div style="display: flex">
                                        状态：
                                        <!-- <div class="isBm" v-if="task.taskStatus == 0">报名中</div>
                                        <div class="isBmjs" v-else>报名结束</div> -->
                                        <div class="isBm" v-if="task.processStatus == 0">报名中</div>
                                        <div class="isBm" v-else-if="task.processStatus == 1" style="background: #F0EBFD; color: #6445FD">实施中</div>
                                        <div class="isBm" v-else-if="task.processStatus == 2" style="background: #DEF3FD; color: #1E83F9">待验收</div>
                                        <div class="isBm" v-else-if="task.processStatus == 3" style="background: #fceae3; color: #fe4d40">待结算</div>
                                        <div class="isBm" v-else-if="task.processStatus == 4" style="background: #DEFDEF; color: #12B378">已完成</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 人才服务项目 -->
        <div style="background: #ffffff">
            <div style="width: 1200px; margin: 0 auto; font-size: 14px">
                <div class="titlesty" style="margin-bottom: 0">
                    <img src="/assets/homepage/rihhj.png" alt="" />
                    <p>人才服务项目</p>
                    <img src="/assets/homepage/lesftt.png" alt="" />
                </div>
                <div style="text-align: center; color: #595959; margin: 20px 0 50px 0; font-size: 16px">
                    IT人才服务、专业团队、快速响应、高效交付
                </div>
                <div style="display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center">
                    <div class="statictosol">
                        <img
                            style="width: 68px; height: 36px; position: absolute; top: 0; left: 0"
                            src="/assets/ability/rem.png"
                            alt=""
                        />
                        <div class="solimgbox"><img src="/assets/ability/cs.png" alt="" /></div>

                        <p class="solcontp">测试工程师</p>
                        <!-- <p style="color:#808080;font-size:16px;margin:-5px 0 30px 0">测试工程师人才派遣</p> -->
                    </div>
                    <div class="statictosol">
                        <img
                            style="width: 68px; height: 36px; position: absolute; top: 0; left: 0"
                            src="/assets/ability/rem.png"
                            alt=""
                        />
                        <div class="solimgbox"><img src="/assets/ability/java.png" alt="" /></div>

                        <p class="solcontp">JAVA开发工程师</p>
                        <!-- <p style="color:#808080;font-size:16px;margin:-5px 0 30px 0">JAVA开发工程师人才派遣 </p> -->
                    </div>
                    <div class="statictosol">
                        <div class="solimgbox"><img src="/assets/ability/c++.png" alt="" /></div>

                        <p class="solcontp">C++开发工程师</p>
                        <!-- <p style="color:#808080;font-size:16px;margin:-5px 0 30px 0">C++开发工程师人才派遣 </p> -->
                    </div>
                    <div class="statictosol">
                        <div class="solimgbox"><img src="/assets/ability/net.png" alt="" /></div>

                        <p class="solcontp">Web前端开发工程师</p>
                        <!-- <p style="color:#808080;font-size:16px;margin:-5px 0 30px 0">Web前端开发工程师人才派遣</p> -->
                    </div>
                    <div class="statictosol">
                        <div class="solimgbox"><img src="/assets/ability/qrs.png" alt="" /></div>

                        <p class="solcontp">嵌入式工程师</p>
                        <!-- <p style="color:#808080;font-size:16px;margin:-5px 0 30px 0">嵌入式工程师人才派遣 </p> -->
                    </div>
                    <div class="statictosol">
                        <div class="solimgbox"><img src="/assets/ability/php.png" alt="" /></div>

                        <p class="solcontp">PHP开发工程师</p>
                        <!-- <p style="color:#808080;font-size:16px;margin:-5px 0 30px 0">PHP开发工程师人才派遣</p> -->
                    </div>
                    <div class="statictosol">
                        <div class="solimgbox"><img src="/assets/ability/ityw.png" alt="" /></div>

                        <p class="solcontp">IT运维/实施工程师</p>
                        <!-- <p style="color:#808080;font-size:16px;margin:-5px 0 30px 0">IT运维/实施工程师人才派遣</p> -->
                    </div>
                    <div class="statictosol">
                        <div class="solimgbox"><img src="/assets/ability/pyth.png" alt="" /></div>
                        <p class="solcontp">Python工程师</p>
                        <!-- <p style="color:#808080;font-size:16px;margin:-5px 0 30px 0">Python工程师人才派遣</p> -->
                    </div>
                    <!-- <div class="seeg"> 查看更多 </div> -->
                </div>
                <div class="titlesty" @click="nextpage('erson')" style="margin: 10px 0 35px 0">
                    <p style="color: #0066eb; font-size: 14px; font-weight: 500">查看更多项目 ></p>
                </div>
            </div>
        </div>
        <!-- 校企 -->
        <div class="baschool">
            <div style="width: 1200px; margin: 0px auto; font-size: 14px">
                <div class="titlesty" style="margin-bottom: 0">
                    <img src="/assets/homepage/rihhj.png" alt="" />
                    <p>校企培训服务</p>
                    <img src="/assets/homepage/lesftt.png" alt="" />
                </div>
                <div style="text-align: center; color: #595959; margin: 20px 0 50px 0; font-size: 16px">
                    培养专业测试人才，培养企业需要的人才
                </div>

                <div class="xiaoqibox">
                    <div
                        @mouseenter="xqmouseEnter(1)"
                        :class="{ isActice: xqval == 1 }"
                        class="xiaoqiboxitem xiaoqiboxitem1"
                    >
                        <div class="xiaoqiboxitemtop">
                            <img class="xiaoqiboxitemtopsmall" src="/assets/xq/img_1.png" alt="" />
                        </div>
                        <div class="xiaoqiboxitembottom">
                            <div class="textcontent">
                                <div class="textcontenttitle">智能软件创新班</div>
                                <div class="textcontentcon">培训静态测试、单元测试、配置项测试、系统测试等课程...</div>
                            </div>
                            <div class="textcontentbtn">
                                <div class="textcontentbtnleft" @click="nextpage('scjool')">在线报名</div>
                                <div class="textcontentbtnright" @click="nextpage('scjool')">查看详情</div>
                            </div>
                        </div>
                        <img class="itemlogo" src="/assets/xq/logo_1.png" />
                    </div>
                    <div
                        @mouseenter="xqmouseEnter(2)"
                        :class="{ isActice: xqval == 2 }"
                        class="xiaoqiboxitem xiaoqiboxitem2"
                    >
                        <div class="xiaoqiboxitemtop">
                            <img class="xiaoqiboxitemtopsmall" src="/assets/xq/img_2.png" alt="" />
                        </div>
                        <div class="xiaoqiboxitembottom">
                            <div class="textcontent">
                                <div class="textcontenttitle">软件测试创新班</div>
                                <div class="textcontentcon">培训静态测试、单元测试、配置项测试、测试管理等课程...</div>
                            </div>
                            <div class="textcontentbtn">
                                <div class="textcontentbtnleft" @click="nextpage('scjool')">在线报名</div>
                                <div class="textcontentbtnright" @click="nextpage('scjool')">查看详情</div>
                            </div>
                        </div>
                        <img class="itemlogo" src="/assets/xq/logo_2.png" />
                    </div>
                    <div
                        @mouseenter="xqmouseEnter(3)"
                        :class="{ isActice: xqval == 3 }"
                        class="xiaoqiboxitem xiaoqiboxitem3"
                    >
                        <div class="xiaoqiboxitemtop">
                            <img class="xiaoqiboxitemtopsmall" src="/assets/xq/img_3.png" alt="" />
                        </div>
                        <div class="xiaoqiboxitembottom">
                            <div class="textcontent">
                                <div class="textcontenttitle">信创测试创新班</div>
                                <div class="textcontentcon">培训静态测试、单元测试、配置项测试、测试管理等课程...</div>
                            </div>
                            <div class="textcontentbtn">
                                <div class="textcontentbtnleft" @click="nextpage('scjool')">在线报名</div>
                                <div class="textcontentbtnright" @click="nextpage('scjool')">查看详情</div>
                            </div>
                        </div>
                        <img class="itemlogo" src="/assets/xq/logo_3.png" />
                    </div>
                    <div
                        @mouseenter="xqmouseEnter(4)"
                        :class="{ isActice: xqval == 4 }"
                        class="xiaoqiboxitem xiaoqiboxitem4"
                    >
                        <div class="xiaoqiboxitemtop">
                            <img class="xiaoqiboxitemtopsmall" src="/assets/xq/img_4.png" alt="" />
                        </div>
                        <div class="xiaoqiboxitembottom">
                            <div class="textcontent">
                                <div class="textcontenttitle">可信软件测试班</div>
                                <div class="textcontentcon">培训静态测试、单元测试、配置项测试、测试管理等课程...</div>
                            </div>
                            <div class="textcontentbtn">
                                <div class="textcontentbtnleft" @click="nextpage('scjool')">在线报名</div>
                                <div class="textcontentbtnright" @click="nextpage('scjool')">查看详情</div>
                            </div>
                        </div>
                        <img class="itemlogo" src="/assets/xq/logo_4.png" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 平台核心服务优势 -->
        <div style="background: #ffffff; padding-top: 10px">
            <div style="width: 1200px; margin: 0 auto; font-size: 14px">
                <div class="titlesty" style="margin: 30px 0 10px 0">
                    <img src="/assets/homepage/rihhj.png" alt="" />
                    <p>平台核心服务优势</p>
                    <img src="/assets/homepage/lesftt.png" alt="" />
                </div>
                <div style="text-align: center; color: #595959; margin: 20px 0 30px 0; font-size: 16px">
                    平台为企业、为客户提供安全可靠的软件服务
                </div>
                <div style="display: flex; justify-content: space-between" @click="aboutusdetails">
                    <div style="text-align: center" class="rapidhatching">
                        <img style="margin: 15px 0 10px 0" src="/assets/home/ling.png" alt="" />
                        <p>测试工具快速孵化</p>
                    </div>
                    <div style="text-align: center" class="rapidhatching">
                        <img style="margin: 15px 0 10px 0" src="/assets/home/nao.png" alt="" />
                        <p>测试工具灵活租售</p>
                    </div>
                    <div style="text-align: center" class="rapidhatching">
                        <img style="margin: 15px 0 10px 0" src="/assets/home/cha.png" alt="" />
                        <p>软件人员随需随聘</p>
                    </div>
                    <div style="text-align: center" class="rapidhatching">
                        <img style="margin: 15px 0 10px 0" src="/assets/home/dian.png" alt="" />
                        <p>测试业务精准对接</p>
                    </div>
                    <div style="text-align: center" class="rapidhatching">
                        <img style="margin: 15px 0 10px 0" src="/assets/home/fang.png" alt="" />
                        <p>提升企业测试能力</p>
                    </div>
                    <div style="text-align: center" class="rapidhatching">
                        <img style="margin: 15px 0 10px 0" src="/assets/home/quan.png" alt="" />
                        <p>校区合作专业培训</p>
                    </div>
                </div>
                <div class="titlesty" style="margin: 60px 0 10px 0">
                    <img src="/assets/homepage/rihhj.png" alt="" />
                    <p>合作企业</p>
                    <img src="/assets/homepage/lesftt.png" alt="" />
                </div>
                <div style="text-align: center; color: #595959; margin: 20px 0 50px 0; font-size: 16px">
                    为企业提供专业服务，解决企业软件测试问题
                </div>
                <div style="display: flex; justify-content: space-between">
                    <div class="uanb">
                        <p>
                            <span style="color: #0066eb; font-size: 28px; font-weight: bold">1000+</span>
                            <span style="color: #1a1a1a; font-size: 18px">个企业</span>
                        </p>
                        <p style="color: #666666; font-size: 15px">关键科技服务企业超过1000家，为企业提供软件服务</p>
                        <p>
                            <span style="color: #0066eb; font-size: 28px; font-weight: bold">50+</span>
                            <span style="color: #1a1a1a; font-size: 18px">个城市</span>
                        </p>
                        <p style="color: #666666; font-size: 15px">软件服务覆盖全国多个省市，服务城市超过50多个</p>
                        <p>
                            <span style="color: #0066eb; font-size: 28px; font-weight: bold">2000+</span>
                            <span style="color: #1a1a1a; font-size: 18px">个人才</span>
                        </p>
                        <p style="color: #666666; font-size: 15px">优秀软件专业人才库，为企业提供大量人才服务</p>
                    </div>
                    <div class="fasjs">
                        <img src="/assets/ability/pater1.png" alt="" />
                        <img src="/assets/ability/pater2.png" alt="" />
                        <img src="/assets/ability/pater3.png" alt="" />
                        <img src="/assets/ability/pater4.png" alt="" />
                        <img src="/assets/ability/pater5.png" alt="" />
                        <img src="/assets/ability/pater6.png" alt="" />
                        <img src="/assets/ability/pater7.png" alt="" />
                        <img src="/assets/ability/pater8.png" alt="" />
                        <img src="/assets/ability/pater9.png" alt="" />
                        <img src="/assets/ability/pater10.png" alt="" />
                        <img src="/assets/ability/pater11.png" alt="" />
                        <img src="/assets/ability/pater12.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 注册 -->
        <div
            class="baschool"
            style="
                background-image: url('/assets/homepage/tuve.png');
                height: 220px;
                margin-top: 60px;
                text-align: center;
                color: #ffffff;
                padding-bottom: 0px;
            "
        >
            <p style="font-size: 28px; font-weight: bold; margin-bottom: 10px">选软件测试就上关键科技云平台</p>
            <p style="font-size: 15px">为众多企业提供软件测试服务，立即注册，免费试用，体验软件测试服务</p>
            <div class="facj" style="margin: 30px auto; width: 100px">
                <div @click="nextreg" class="whitebtn" style="background: #ffffff; color: #0066eb">立即注册</div>
            </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'
import mixin from '@/mixin/index.js'

export default {
    mixins: [mixin],

    data() {
        return {
            bannerHeight: '500',
            indexbanner: [
                { id: 2, imgurl: '/assets/home/bannernew3.png', url: '/crowdsourcing' },
                // { id: 0, imgurl: '/assets/home/bannernew1.png', url: '/ability' },
                // { id: 1, imgurl: '/assets/home/bannernew2.png', url: '/market' },
            ],
            toolslist: [], //工具列表
            toolload: true,
            listcrowd: [], //众包列表
            crowdload: true,
            onsiteTypelist, //驻场需求列表
            industlist: [], //行业资讯列表
            xqval: 1,
        }
    },
    mounted() {
        //工具市场
        this.getTestTool()
        // pageNum=0&pageSize=5
        homecrowdlist({ pageNum: 1, pageSize: 4 })
            .then((response) => {
                // console.log('首页众包市场----',response)
                if (response.total > 4) {
                    this.listcrowd = response.rows.slice(0, 4)
                } 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: {
        toolsmarket(value) {
            if (!value) return ''
            if (value.length > 70) {
                return value.slice(0, 65) + '...'
            }
            return value
        },
        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: {
        // topnav点击跳转
        goTopnav(url) {
            this.$router.push(url)
        },
        // 校企手风琴
        xqmouseEnter(val) {
            this.xqval = val
        },
        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 = response.rows.slice(0, 6)
                    const iconArr = [
                        '/assets/home/testTool/3@2x.png',
                        '/assets/home/testTool/5@2x.png',
                        '/assets/home/testTool/new.png',
                        '/assets/home/testTool/6@2x.png',
                        '/assets/home/testTool/new2.png',
                        '/assets/home/testTool/4@2x.png',
                    ]
                    this.toolslist.forEach((item, i) => {
                        item.imgUrl = iconArr[i]
                        // 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) {
            this.$router.push(`/market`)
            // this.$message({
            //   message: '即将上线，敬请期待',
            //   type: 'info',
            //   duration: 1000,
            // })
            // 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}`)
        },
        nextpage(type) {
            if (type == 'tool') {
                // this.$message({
                //   message: '即将上线，敬请期待',
                //   type: 'info',
                //   duration: 1000,
                // })
                this.$router.push(`/market`)
            } else if (type == 'crowd') {
                this.$router.push(`/crowdsourcing`)
            } else if (type == 'erson') {
                this.$router.push(`/ability`)
            } else if (type == 'scjool') {
                // this.$message({
                //   message: '即将上线，敬请期待',
                //   type: 'info',
                //   duration: 1000,
                // })
                this.$router.push(`/college`)
            }
        },
        //立即开启
        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')
        },
        nextreg() {
            this.$router.push(`/login?type=reg`)
        },
    },
}
</script>
<style scoped>
.lunbobtn {
    position: absolute;
    top: 52%;
    left: 30%;
}
.wheelplanting {
    z-index: 0;
    position: relative;
}
.el-carousel--horizontal {
    overflow: hidden;
}
.wheelplanting >>> .el-carousel__indicators--horizontal {
    bottom: 60px;
}
.wheelplanting >>> .el-carousel__button {
    width: 44px;
    height: 5px;
    border-radius: 2px 2px 2px 3px;
}
.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;
    }
}
.newbiwfbg {
    height: 255px;
    display: flex;
    align-items: flex-end;
}
.newbiwfbg2 {
    height: 255px;
    display: flex;
    align-items: flex-start;
}
.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;
    transition: all 0.2s linear;
    overflow: hidden;
}
.bottoncon {
    opacity: 1;
    transition: all 0.2s ease-in-out;
}
.arrow {
    width: 80px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #0066eb;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    color: #0066eb;
    transition: all 0.2s ease-in-out;
    opacity: 0;
}

.biwfbg:hover {
    /* transform: translateY(-20px); */
    height: 200px;
}
.biwfbg:hover .bottoncon {
    opacity: 0;
}
.biwfbg:hover .arrow {
    opacity: 1;
    transform: translateY(-20px);
}

.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;
    cursor: pointer;
    /* box-shadow: 0px 5px 26px 2px rgba(39, 86, 143, 0.08); */
    border-radius: 6px;
}
.raise p:nth-child(1) {
    font-weight: bold;
    color: #1a1a1a;
}
.productbox:hover .raise p:nth-child(1) {
    color: #0066eb;
}
/* .productbox:hover {
  transform: scale(1.03);
  transition: 1s;
} */

.taskboxTransform {
    transition: all 0.2s linear;
}
.taskboxTransform:hover {
    /* transform: translate3d(0, 0, 2px); */
    box-shadow: 0px 5px 26px 2px rgba(39, 86, 143, 0.08);
    transform: scale(1.03);
}
.rapidhatching {
    cursor: pointer;
    color: #1a1a1a;
    font-size: 15px;
}
.rapidhatching:hover p {
    color: #0066eb;
}
.cetype {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cetype p, .cetype div {
    width: 200px;
    font-size: 14px;
    margin: 10px 0;
    font-weight: 500;
    color: #4d4d4d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cetype p:nth-child(1),
.cetype p:nth-child(5) {
    width: 260px;
}
.cetype p:nth-child(4),
.cetype p:nth-child(8) {
    width: 230px;
}
.cetype div:nth-child(1),
.cetype div:nth-child(5) {
    width: 260px;
}
.cetype div:nth-child(4),
.cetype div:nth-child(8) {
    width: 230px;
}
.cetype .isBm {
    width: 56px !important;
    height: 24px;
    background: #FDF2DE;
    border-radius: 12px;
    color: #FA8717;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    margin-top: 0px;
}
.cetype .isBmjs {
    width: 69px !important;
    height: 24px;
    background: #FDEBEB;
    border-radius: 12px;
    color: #FD4545;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    margin-top: 0px;
}

.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;
}
.software {
    display: flex;
    align-items: center;
    color: #666666;
    /* margin: 0 20px; */
}
.productboxptibox {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.productboxpti {
    font-weight: 800;
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 8px;
}
.productboxpinfo {
    font-weight: 500;
    font-size: 16px;
    color: #666666;
}
.software img {
    margin-right: 20px;
}
.titlesty {
    margin: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.titlesty p {
    font-size: 32px;
    color: #1a1a1a;
    font-weight: bold;
    margin: 0 15px;
}
.bgguk {
    height: 623px;
    width: 250px;
    background-image: url('/assets/homepage/copxu.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
.bggukright {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}
.marginbotta {
    margin-bottom: 9px;
}
.facj {
    display: flex;
    width: 220px;
    margin: 380px auto 0 auto;
    justify-content: center;
    cursor: pointer;
}
.facj div {
    width: 100px;
    height: 34px;
    background: #1472ec;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
}
.statictosol {
    position: relative;
    width: 280px;
    height: 240px;
    background: #ffffff;
    box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 24px;
    transition: all 0.2s linear;
}
.statictosol:hover {
    transform: translateY(-15px);
}

.solimgbox {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.solcontp {
    width: 100%;
    height: 87px;
    border-top: 1px solid #f0f0f0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: unset !important;
    font-size: 18px;
    color: #1a1a1a;
}
.statictosol img {
    width: 90px;
    height: 90px;
}
.baschool {
    margin: 0 auto;
    height: 625px;
    width: 100%;
    background-image: url('/assets/homepage/schoolbg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 1px 0 30px 0;
}
.xake {
    width: 524px;
    height: 400px;
    background-image: url('/assets/homepage/xkak.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
.tobgim {
    width: 206px;
    height: 266px;
    background-image: url('/assets/homepage/chbg.png');
    background-size: 100% 266px;
    background-repeat: no-repeat;
    padding-top: 30px;
}
.uanb {
    width: 480px !important;
    height: 280px;
    background-image: url('/assets/homepage/bgyuu.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 30px;
    box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1);
    box-sizing: border-box;
}
.fasjs {
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    width: 693px;
    /* margin-left: 20px; */
}
.fasjs img {
    width: 221px;
    height: 63px;
    transition: all 0.2s linear;
    box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1);
}
.fasjs img:hover {
    transform: scale(1.05);
}
/* 手风琴 */
.xiaoqibox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 400px;
    overflow: hidden;
}
.xiaoqiboxitem1 {
    background: url('/assets/xq/big_1.png') 100% 100% no-repeat;
}
.xiaoqiboxitem1 .xiaoqiboxitembottom {
    background: url('/assets/xq/small_1.png') 100% 100% no-repeat;
}
.xiaoqiboxitem2 {
    background: url('/assets/xq/big_2.png') 100% 100% no-repeat;
}
.xiaoqiboxitem2 .xiaoqiboxitembottom {
    background: url('/assets/xq/small_2.png') 100% 100% no-repeat;
}
.xiaoqiboxitem3 {
    background: url('/assets/xq/big_3.png') 100% 100% no-repeat;
}
.xiaoqiboxitem3 .xiaoqiboxitembottom {
    background: url('/assets/xq/small_3.png') 100% 100% no-repeat;
}
.xiaoqiboxitem4 {
    background: url('/assets/xq/big_4.png') 100% 100% no-repeat;
}
.xiaoqiboxitem4 .xiaoqiboxitembottom {
    background: url('/assets/xq/small_4.png') 100% 100% no-repeat;
}

.xiaoqiboxitem {
    overflow: hidden;
    width: 206px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 5px;
}
.xiaoqiboxitemtop {
    width: 100%;
    height: 140px;
}
.xiaoqiboxitemtopsmall {
    width: 100%;
    height: 100%;
    transition: all 0.2s linear;
}
.xiaoqiboxitembottom {
    flex: 1;
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
    transition: all 0.2s linear;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.textcontenttitle {
    font-weight: bold;
    font-size: 19px;
    color: #ffffff;
    margin-bottom: 24px;
}
.textcontentcon {
    font-weight: 500;
    font-size: 14px;
    color: #ededed;
}
.itemlogo {
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: 170px;
    height: 34px;
    transition: all 0.2s linear;
}
.textcontentbtn {
    width: 100%;
    display: flex;
    opacity: 0;
}
.textcontentbtnleft {
    width: 150px;
    height: 34px;
    background: #0066eb;
    border-radius: 4px;
    line-height: 34px;
    color: #ffffff;
    text-align: center;
    margin-right: 15px;
    cursor: pointer;
}
.textcontentbtnright {
    width: 150px;
    height: 34px;
    background: #ffffff;
    border-radius: 4px;
    line-height: 34px;
    color: #0066eb;
    text-align: center;
    cursor: pointer;
}
.isActice {
    transition: all 0.2s linear;
}
.isActice {
    width: 524px;
}
.isActice .xiaoqiboxitemtop {
    height: 102px;
    border: 1px solid rgba(242, 242, 242, 0.3);
}
.isActice .xiaoqiboxitemtopsmall {
    opacity: 0;
}
.isActice .xiaoqiboxitembottom {
    background: unset;
}
.isActice .itemlogo {
    left: 30px;
    top: 30px;
    width: 228px;
    height: 46px;
}
.isActice .textcontentbtn {
    opacity: 1;
}
.isActice .textcontenttitle {
    font-size: 22px;
}
.isActice .textcontentcon {
    font-size: 15px;
}
/* 按钮变色 */
.bluebtn:hover {
    background: #2a83f7 !important;
}
.whitebtn:hover {
    background: #ecf5ff !important;
}
.textcontentbtnleft:hover {
    background: #2a83f7 !important;
}
.textcontentbtnright:hover {
    background: #ecf5ff !important;
}
</style>