pc网页版软测宝
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1420 lines
51 KiB

12 months ago
<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>
12 months ago
<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]
12 months ago
})
// 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)
}
},
12 months ago
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>