<template>
    <div class="userAbility">
        <img class="banner" src="/assets/ability/applybanner.png" />
        <div class="searchBox container">
            <el-input v-model="searchVal" placeholder="请输入关键字，如：测试工程师"></el-input>
            <div class="searchbtn">搜索</div>
        </div>
        <div class="contentBox container">
            <div class="jianliboxitem" v-for="it in peopleList" :key="it.url">
                <div class="jlboxtop">
                    <img class="jlboxtopimg" :src="it.url" alt="" />
                    <div class="jlboxtoptit">{{ it.name }}</div>
                    <div class="jlboxtopzc">{{ it.zhicheng }}</div>
                    <div class="jlboxtopcon">{{ it.zhicheng }}</div>
                </div>
                <div class="jlboxbottom">
                    <div class="jlboxbottoml jlboxbottomlbor">
                        <img class="jlboxbottomlimg" src="/assets/ability/daxue.png" alt="" />
                        {{ it.school }}
                    </div>
                    <div class="jlboxbottoml">
                        <img class="jlboxbottomlimg" src="/assets/ability/zhuanye.png" alt="" />
                        {{ it.maj }}
                    </div>
                </div>
                <div class="addressBox">
                    <img src="/assets/ability/posion.png" alt="">
                    西安</div>
            </div>
        </div>
        <div class="pavan container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            searchVal: '',
            peopleList: [
                {
                    url: '/assets/ability/people1.png',
                    name: '杨**',
                    zhicheng: 'JAVA后端研发工程师',
                    school: '河南科技大学',
                    maj: '软件工程专业',
                },
                {
                    url: '/assets/ability/people2.png',
                    name: '赵**',
                    zhicheng: 'Web全栈开发工程师',
                    school: '西安科技大学',
                    maj: '软件工程专业',
                },
                {
                    url: '/assets/ability/people3.png',
                    name: '杨**',
                    zhicheng: 'JAVA研发工程师',
                    school: '阜阳师范大学',
                    maj: '软件工程专业',
                },
                {
                    url: '/assets/ability/people4.png',
                    name: '王**',
                    zhicheng: '嵌入式工程师',
                    school: '西安科技大学',
                    maj: '软件工程专业',
                },
            ],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        }
    },
    mounted() {},

    computed: {
        ...mapGetters(['userinform', 'token']),
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
        },
    },
}
</script>

<style scoped>
.container {
    width: 1200px;
    margin: auto;
}
.searchBox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -28px;
    margin-bottom: 50px;
}
.pavan {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
    margin-top: 35px;
}
.searchbtn {
    width: 100px;
    height: 45px;
    background: #0066eb;
    border-radius: 0px 4px 4px 0px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 45px;
    text-align: center;
}
.el-input {
    width: 648px;
    height: 45px;
}
.searchBox >>> .el-input__inner {
    height: 45px;
    background: #ffffff;
    border-radius: 4px 0px 0px 4px;
    border: 1px solid #e6e7eb;
}
.contentBox {
    display: grid;
    grid-template-columns: 280px 280px 280px 280px;
    justify-content: space-between;
}
.jianliboxitem {
    width: 280px;
    height: 300px;
    background: #ffffff;
    box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.1s linear;
    margin-bottom: 25px;
    position: relative;
}
.addressBox {
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 500;
    font-size: 13px;
    color: #999999;
    display: flex;
    align-items: center;
}
.addressBox img {
    width: 13px;
    height: 13px;
    margin-right: 5px;
}
.jianliboxitem:hover {
    transform: translateY(-15px);
}
.jlboxtop {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.jlboxtopimg {
    width: 88px;
    height: 88px;
    border-radius: 50%;
}
.jlboxtoptit {
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    margin: 15px 0;
}
.jlboxtopzc {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
}
.jlboxtopcon {
    margin-top: 15px;
    width: 85%;
    font-weight: 500;
    font-size: 14px;
    color: #808080;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}
.jlboxbottom {
    width: 100%;
    height: 47px;
    border-top: 1px solid #ebebeb;
    display: flex;
    align-items: center;
}
.jlboxbottoml {
    height: 16px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
    color: #737373;
}
.jlboxbottomlbor {
    box-sizing: border-box;
    border-right: 1px solid #e6e6e6;
}
.jlboxbottomlimg {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
</style>