|
|
|
<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="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 }}</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' },
|
|
|
|
],
|
|
|
|
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]
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
// 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)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
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>
|