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.
307 lines
6.1 KiB
307 lines
6.1 KiB
<template>
|
|
<view class="moreCould">
|
|
<view class="topbanner">
|
|
<image class="topbannerimg" src="http://image.keyitest.cn/static/index/renliwb/cloudbanner2.png" mode="">
|
|
</image>
|
|
<view class="topCon">
|
|
<view class="topConT">
|
|
关键云员工
|
|
</view>
|
|
<view class="topConTB">
|
|
真实有效的软件人才库，名校毕业
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="searchBox">
|
|
<div class="input">
|
|
<u-input v-model="queryParams.keyword" clearable border />
|
|
</div>
|
|
<view class="searchbtn" @click="search">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
<div class="contentBox">
|
|
<view class="jianliboxitem" v-for="it in peopleList" :key="it.user_id">
|
|
<view class="address">
|
|
<image src="http://image.keyitest.cn/static/index/renliwb/cloudicon6.png" mode=""></image>
|
|
{{it.city && it.city.split('-')[1]}}
|
|
</view>
|
|
<view class="jlboxtop">
|
|
<image class="jlboxtopimg" :src="it.avatar" alt="" />
|
|
<view class="jlboxtoptit">{{it.name}}</view>
|
|
<view class="jlboxtopzc">{{it.testSkills}}</view>
|
|
<view class="jlboxtopzcC">{{it.personalAdvantage}}</view>
|
|
</view>
|
|
<view class="jlboxbottom">
|
|
<view class="jlboxbottoml jlboxbottomlbor">
|
|
<image class="jlboxbottomlimg" src="../../../static/crowd/daxue.png" alt="" />
|
|
<text>{{it.college}}</text>
|
|
</view>
|
|
<view class="jlboxbottoml">
|
|
<image class="jlboxbottomlimg" src="../../../static/crowd/zhuanye.png" alt="" />
|
|
<text>{{it.major}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
peopleList: [],
|
|
total: 0,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
keyword: '',
|
|
},
|
|
base: this.http.baseUrl
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getList()
|
|
},
|
|
onReachBottom() {
|
|
if (this.queryParams.pageNum * this.queryParams.pageSize < this.total) {
|
|
this.queryParams.pageNum += 1
|
|
this.getList()
|
|
}
|
|
},
|
|
methods: {
|
|
search() {
|
|
this.queryParams.pageNum = 1
|
|
this.queryParams.pageSize = 10
|
|
this.peopleList=[]
|
|
this.getList()
|
|
},
|
|
getList() {
|
|
this.http.quickGet(
|
|
`/tester/cert/cloudEmps?pageSize=${this.queryParams.pageSize}&pageNum=${this.queryParams.pageNum}&keyword=${this.queryParams.keyword}`,
|
|
true).then(res => {
|
|
this.peopleList = [...this.peopleList, ...res.data.rows]
|
|
this.total = res.data.total
|
|
this.peopleList.forEach(it => {
|
|
if (it.avatar.indexOf('/prod-api') == -1) {
|
|
it.avatar = this.base + it.avatar
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.moreCould {
|
|
.topbanner {
|
|
height: 250rpx;
|
|
margin-bottom: 43rpx;
|
|
margin-top: 25rpx;
|
|
position: relative;
|
|
padding: 0 25rpx;
|
|
box-sizing: border-box;
|
|
|
|
.topbannerimg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.topCon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 60rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.topConT {
|
|
font-weight: bold;
|
|
font-size: 42rpx;
|
|
color: #FFFFFF;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.topConTB {
|
|
font-weight: 500;
|
|
font-size: 25rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.searchBox {
|
|
padding: 0 25rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.input {
|
|
flex: 1;
|
|
height: 60rpx;
|
|
|
|
::v-deep .u-input {
|
|
background: #FFFFFF !important;
|
|
border-radius: 4rpx 0rpx 0rpx 4rpx !important;
|
|
border: 1px solid #E6E7EB !important;
|
|
height: 60rpx !important;
|
|
}
|
|
|
|
::v-deep .u-input__input {
|
|
min-height: 60rpx !important;
|
|
}
|
|
}
|
|
|
|
.searchbtn {
|
|
width: 140rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
background: #0066EB;
|
|
border-radius: 0rpx 4rpx 4rpx 0rpx;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.contentBox {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 0 25rpx;
|
|
box-sizing: border-box;
|
|
|
|
.jianliboxitem {
|
|
width: 338rpx;
|
|
height: 380rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 34rpx 6rpx rgba(14, 97, 205, 0.1);
|
|
border-radius: 6rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
transition: all .1s linear;
|
|
margin-bottom: 24rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.address {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
|
|
image {
|
|
width: 15rpx;
|
|
height: 19rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.jlboxtop {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.jlboxtopimg {
|
|
width: 105rpx;
|
|
height: 105rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.jlboxtoptit {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
margin: 10rpx 0;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.jlboxtopzc {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
color: #333333;
|
|
text-align: center;
|
|
}
|
|
|
|
.jlboxtopzcC {
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
color: #808080;
|
|
margin-top: 20rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
|
|
.jlboxbottom {
|
|
width: 100%;
|
|
height: 55rpx;
|
|
border-top: 1px solid #EBEBEB;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.jlboxbottoml {
|
|
height: 100%;
|
|
width: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
color: #808080;
|
|
|
|
}
|
|
|
|
.jlboxbottoml text {
|
|
max-width: 120rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
.jlboxbottomlbor {
|
|
box-sizing: border-box;
|
|
border-right: 1px solid #EBEBEB;
|
|
}
|
|
|
|
.jlboxbottomlimg {
|
|
width: 17rpx;
|
|
height: 16rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |