fazyqjczx_org_cn/pages/renyuanchaxun/index.vue

<template>
    <div class="rycx">
        <!-- 页面头部 -->
        <HomePageHead></HomePageHead>
        <!-- 页面导航 -->
        <HomePageNavigation></HomePageNavigation>

        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <div class="inner">
                <span class="location">当前位置:</span>
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item>
                        <NuxtLink to="/">首页</NuxtLink>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <NuxtLink to="/">人员查询</NuxtLink>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>

        <!-- 人员查询内容 -->
        <div class="rycxContent">
            <div class="contentLeft">
                <div class="conLeft">
                    <div class="topTitle">
                        <img src="../../public/index/search.png" alt="">
                        查询相关工作人员或外聘人员
                    </div>
                    <div class="con_text">请输入您要查询的工作人员/外聘人员姓名或证件编号</div>
                    <el-form :model="form" label-width="auto" style="max-width: 375px">
                        <el-form-item label="人员类型：">
                            <el-select v-model="form.region" placeholder="请选择人员类型">
                                <el-option label="不限" value="shanghai" />
                                <el-option label="调研员" value="beijing" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="人员姓名：">
                            <el-input v-model="form.name" placeholder="请输入人员姓名" />
                        </el-form-item>
                        <el-form-item label="证件编号：">
                            <el-input v-model="form.cardID" placeholder="请输入证件编号" />
                        </el-form-item>
                    </el-form>
                    <div class="submit">
                        <button class="submitBtn">提交</button>
                    </div>
                </div>
                <div class="conRight">
                    <img src="../../public/index/index.png" alt="">
                    <div>手机扫描查询</div>
                </div>
            </div>
            <div class="contentRight">
                <div class="right_part1">
                    <div class="part1Title">车辆查询</div>
                    <div class="part1Text">请输入相关工作车辆或车牌号</div>
                    <input type="text" name="" id="" placeholder="车牌">
                    <input type="text" name="" id="" placeholder="车型">
                    <div class="btnBox">
                        <button class="cxbtn">查询</button>
                        <button class="rebtn">重置</button>
                    </div>
                </div>
                <div class="right_part1">
                    <div class="part1Title">选题查询</div>
                    <div class="part1Text">请输入你想要查询的选题</div>
                    <div class="selectBox">
                        <span>地区:</span>
                        <select name="" id="">
                            <option value="shanghai">--</option>
                            <option value="beijing">地区1</option>
                            <option value="guangzhou">地区2</option>
                        </select>
                        <select name="" id="">
                            <option value="shanghai">--</option>
                            <option value="beijing">地区1</option>
                            <option value="guangzhou">地区2</option>
                        </select>
                        <select name="" id="">
                            <option value="shanghai">--</option>
                            <option value="beijing">地区1</option>
                            <option value="guangzhou">地区2</option>
                        </select>
                    </div>
                    <input type="text" name="" id="" placeholder="选题名称">
                    <div class="btnBox">
                        <button class="cxbtn">查询</button>
                        <button class="rebtn">重置</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面底部 -->
        <HomeFoot></HomeFoot>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

const form = ref({
    name: '',
    region: '',
    cardID: '',
})

</script>

<style lang="less" scoped>
@media screen and (min-width: 1401px) {
    .rycx {
        font-family: '微软雅黑', Microsoft YaHei;

        //导航条
        .breadcrumb {
            width: 100%;
            height: 30PX;
            line-height: 30PX;
            margin-top: 20PX;
            margin-bottom: 20PX;

            .inner {
                width: 1400PX;
                border: 1PX solid #ccc;
                color: #000;
                font-size: 16PX;
                margin: 0 auto;

                .location {
                    margin-right: 20PX;
                    width: 100PX;
                    height: 22PX;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16PX;
                    color: #000;
                    line-height: 23PX;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            :deep(.el-breadcrumb__separator) {
                color: #000;
                font-weight: bold;
                margin: 0 9PX;
            }

            :deep(.el-breadcrumb) {
                display: inline-block;
                vertical-align: -4PX;
            }

            :deep(.el-breadcrumb__inner a),
            :deep(.el-breadcrumb__inner.is-link) {
                color: #000;
                font-weight: 400;
                text-decoration: none;
                transition: var(--el-transition-color);
            }

            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) {
                color: #000;
            }

            span {
                font-weight: 400;
                font-size: 16PX;
                color: #000;
                line-height: 23PX;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .rycxContent {
            width: 1400PX;
            margin: 20PX auto;
            display: flex;
            justify-content: space-between;

            .contentLeft {
                display: flex;
                width: 60%;
                height: 405PX;
                // height: auto;
                overflow: hidden;
                border: 1PX solid #333;
                padding: 20PX;
                box-sizing: border-box;

                .conLeft {
                    width: 60%;

                    .topTitle {
                        font-size: 19PX;
                        color: #000;

                        img {
                            width: 24PX;
                            height: 24PX;
                            margin-right: 10PX;
                            vertical-align: -4PX;
                        }
                    }

                    .con_text {
                        // width: 100%;
                        height: auto;
                        line-height: 30PX;
                        margin: 20PX 0;
                        font-size: 16PX;
                        color: #333;
                    }

                    .submit {
                        width: 100%;
                        margin-top: 20PX;
                        text-align: center;

                        .submitBtn {
                            width: 100PX;
                            height: 40PX;
                            line-height: 40PX;
                            text-align: center;
                            font-size: 16PX;
                            color: #fff;
                            background-color: #027dc3;
                            border: none;
                        }
                    }

                    :deep(.el-form-item__label) {
                        font-size: 16PX;
                        color: #333;
                        line-height: 40PX;
                    }

                    :deep(.el-select__wrapper) {
                        min-height: 40PX;
                    }

                    :deep(.el-input__inner) {
                        height: 38PX;
                    }

                    // :deep(.el-input) {
                    //     --el-input-border-color: #333;
                    //     --el-input-hover-border-color: #333;
                    //     --el-input-clear-hover-color: #333;
                    //     --el-input-focus-border-color: #333;
                    // }

                }

                .conRight {
                    width: 38%;
                    height: auto;
                    float: right;
                    overflow: hidden;
                    margin-top: 30PX;
                    margin-left: 20PX;

                    img {
                        width: 100%;
                    }

                    div {
                        width: 100%;
                        text-align: center;
                        font-size: 16PX;
                        color: #333;
                        line-height: 30PX;
                    }
                }
            }

            .contentRight {
                width: 38%;

                .right_part1 {
                    .part1Title {
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                        line-height: 40PX;
                        font-size: 18PX;
                        color: #000;
                    }

                    .part1Text {
                        display: block;
                        width: 100%;
                        height: 70PX;
                        line-height: 70PX;
                        text-align: center;
                        font-size: 16PX;
                        color: #333;
                    }

                    .selectBox {
                        width: 100%;
                        height: 70PX;
                        line-height: 70PX;
                        text-align: center;
                        font-size: 16PX;
                        color: #333;

                        span {
                            font-weight: 700;
                            margin-right: 10PX;
                        }

                        select {
                            min-width: 90PX;
                            height: 34PX;
                            line-height: 34PX;
                            padding: 0 10PX;
                            box-sizing: border-box;
                            margin-right: 10PX;
                            outline: none;
                            border-radius: 4PX;
                            border-color: #ccc;
                        }
                    }

                    input {
                        width: 90%;
                        height: 40PX;
                        line-height: 40PX;
                        font-size: 16PX;
                        color: #333;
                        padding-left: 10PX;
                        outline: none;
                        margin-bottom: 20PX;
                    }

                    .btnBox {
                        width: 220PX;
                        height: auto;
                        overflow: hidden;
                        margin: 20PX auto;

                        .cxbtn {
                            float: left;
                            display: block;
                            width: 90PX;
                            height: 40PX;
                            line-height: 40PX;
                            text-align: center;
                            font-size: 16PX;
                            color: #fff;
                            background: #027dc3;
                            outline: none;
                            border: none;
                        }

                        .rebtn {
                            background: #ccc;
                            border: 1PX solid #027dc3;
                            color: #027dc3;
                            float: right;
                            display: block;
                            width: 90PX;
                            height: 40PX;
                            line-height: 40PX;
                            text-align: center;
                            font-size: 16PX;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .rycx {
        font-family: '微软雅黑', Microsoft YaHei;

        //导航条
        .breadcrumb {
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 20px;
            margin-bottom: 20px;

            .inner {
                width: 1400px;
                border: 1px solid #ccc;
                color: #000;
                font-size: 16px;

                .location {
                    margin-right: 20px;
                    width: 100px;
                    height: 22px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #000;
                    line-height: 23px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            :deep(.el-breadcrumb__separator) {
                color: #000;
                font-weight: bold;
                margin: 0 9px;
            }

            :deep(.el-breadcrumb) {
                display: inline-block;
                vertical-align: -4px;
            }

            :deep(.el-breadcrumb__inner a),
            :deep(.el-breadcrumb__inner.is-link) {
                color: #000;
                font-weight: 400;
                text-decoration: none;
                transition: var(--el-transition-color);
            }

            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) {
                color: #000;
            }

            span {
                font-weight: 400;
                font-size: 16px;
                color: #000;
                line-height: 23px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .rycxContent {
            width: 1400px;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;

            .contentLeft {
                display: flex;
                width: 60%;
                height: 405px;
                // height: auto;
                overflow: hidden;
                border: 1px solid #333;
                padding: 20px;
                box-sizing: border-box;

                .conLeft {
                    width: 60%;

                    .topTitle {
                        font-size: 19px;
                        color: #000;

                        img {
                            width: 24px;
                            height: 24px;
                            margin-right: 10px;
                            vertical-align: -4px;
                        }
                    }

                    .con_text {
                        // width: 100%;
                        height: auto;
                        line-height: 30px;
                        margin: 20px 0;
                        font-size: 16px;
                        color: #333;
                    }

                    .submit {
                        width: 100%;
                        margin-top: 20px;
                        text-align: center;

                        .submitBtn {
                            width: 100px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            font-size: 16px;
                            color: #fff;
                            background-color: #027dc3;
                            border: none;
                        }
                    }

                    :deep(.el-form-item__label) {
                        font-size: 16px;
                        color: #333;
                        line-height: 40px;
                    }

                    :deep(.el-select__wrapper) {
                        min-height: 40px;
                    }

                    :deep(.el-input__inner) {
                        height: 38px;
                    }

                    // :deep(.el-input) {
                    //     --el-input-border-color: #333;
                    //     --el-input-hover-border-color: #333;
                    //     --el-input-clear-hover-color: #333;
                    //     --el-input-focus-border-color: #333;
                    // }

                }

                .conRight {
                    width: 38%;
                    height: auto;
                    float: right;
                    overflow: hidden;
                    margin-top: 30px;
                    margin-left: 20px;

                    img {
                        width: 100%;
                    }

                    div {
                        width: 100%;
                        text-align: center;
                        font-size: 16px;
                        color: #333;
                        line-height: 30px;
                    }
                }
            }

            .contentRight {
                width: 38%;

                .right_part1 {
                    .part1Title {
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                        line-height: 40px;
                        font-size: 18px;
                        color: #000;
                    }

                    .part1Text {
                        display: block;
                        width: 100%;
                        height: 70px;
                        line-height: 70px;
                        text-align: center;
                        font-size: 16px;
                        color: #333;
                    }

                    .selectBox {
                        width: 100%;
                        height: 70px;
                        line-height: 70px;
                        text-align: center;
                        font-size: 16px;
                        color: #333;

                        span {
                            font-weight: 700;
                            margin-right: 10px;
                        }

                        select {
                            min-width: 90px;
                            height: 34px;
                            line-height: 34px;
                            padding: 0 10px;
                            box-sizing: border-box;
                            margin-right: 10px;
                            outline: none;
                            border-radius: 4px;
                            border-color: #ccc;
                        }
                    }

                    input {
                        width: 90%;
                        height: 40px;
                        line-height: 40px;
                        font-size: 16px;
                        color: #333;
                        padding-left: 10px;
                        outline: none;
                        margin-bottom: 20px;
                    }

                    .btnBox {
                        width: 220px;
                        height: auto;
                        overflow: hidden;
                        margin: 20px auto;

                        .cxbtn {
                            float: left;
                            display: block;
                            width: 90px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            font-size: 16px;
                            color: #fff;
                            background: #027dc3;
                            outline: none;
                            border: none;
                        }

                        .rebtn {
                            background: #ccc;
                            border: 1px solid #027dc3;
                            color: #027dc3;
                            float: right;
                            display: block;
                            width: 90px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .rycx {
        font-family: '微软雅黑', Microsoft YaHei;

        //导航条
        .breadcrumb {
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 20px;
            margin-bottom: 20px;

            .inner {
                width: 1400px;
                border: 1px solid #ccc;
                color: #000;
                font-size: 16px;

                .location {
                    margin-right: 20px;
                    width: 100px;
                    height: 22px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #000;
                    line-height: 23px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            :deep(.el-breadcrumb__separator) {
                color: #000;
                font-weight: bold;
                margin: 0 9px;
            }

            :deep(.el-breadcrumb) {
                display: inline-block;
                vertical-align: -4px;
            }

            :deep(.el-breadcrumb__inner a),
            :deep(.el-breadcrumb__inner.is-link) {
                color: #000;
                font-weight: 400;
                text-decoration: none;
                transition: var(--el-transition-color);
            }

            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover),
            :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) {
                color: #000;
            }

            span {
                font-weight: 400;
                font-size: 16px;
                color: #000;
                line-height: 23px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .rycxContent {
            width: 1400px;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;

            .contentLeft {
                display: flex;
                width: 60%;
                height: 405px;
                // height: auto;
                overflow: hidden;
                border: 1px solid #333;
                padding: 20px;
                box-sizing: border-box;

                .conLeft {
                    width: 60%;

                    .topTitle {
                        font-size: 19px;
                        color: #000;

                        img {
                            width: 24px;
                            height: 24px;
                            margin-right: 10px;
                            vertical-align: -4px;
                        }
                    }

                    .con_text {
                        // width: 100%;
                        height: auto;
                        line-height: 30px;
                        margin: 20px 0;
                        font-size: 16px;
                        color: #333;
                    }

                    .submit {
                        width: 100%;
                        margin-top: 20px;
                        text-align: center;

                        .submitBtn {
                            width: 100px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            font-size: 16px;
                            color: #fff;
                            background-color: #027dc3;
                            border: none;
                        }
                    }

                    :deep(.el-form-item__label) {
                        font-size: 16px;
                        color: #333;
                        line-height: 40px;
                    }

                    :deep(.el-select__wrapper) {
                        min-height: 40px;
                    }

                    :deep(.el-input__inner) {
                        height: 38px;
                    }

                    // :deep(.el-input) {
                    //     --el-input-border-color: #333;
                    //     --el-input-hover-border-color: #333;
                    //     --el-input-clear-hover-color: #333;
                    //     --el-input-focus-border-color: #333;
                    // }

                }

                .conRight {
                    width: 38%;
                    height: auto;
                    float: right;
                    overflow: hidden;
                    margin-top: 30px;
                    margin-left: 20px;

                    img {
                        width: 100%;
                    }

                    div {
                        width: 100%;
                        text-align: center;
                        font-size: 16px;
                        color: #333;
                        line-height: 30px;
                    }
                }
            }

            .contentRight {
                width: 38%;

                .right_part1 {
                    .part1Title {
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                        line-height: 40px;
                        font-size: 18px;
                        color: #000;
                    }

                    .part1Text {
                        display: block;
                        width: 100%;
                        height: 70px;
                        line-height: 70px;
                        text-align: center;
                        font-size: 16px;
                        color: #333;
                    }

                    .selectBox {
                        width: 100%;
                        height: 70px;
                        line-height: 70px;
                        text-align: center;
                        font-size: 16px;
                        color: #333;

                        span {
                            font-weight: 700;
                            margin-right: 10px;
                        }

                        select {
                            min-width: 90px;
                            height: 34px;
                            line-height: 34px;
                            padding: 0 10px;
                            box-sizing: border-box;
                            margin-right: 10px;
                            outline: none;
                            border-radius: 4px;
                            border-color: #ccc;
                        }
                    }

                    input {
                        width: 90%;
                        height: 40px;
                        line-height: 40px;
                        font-size: 16px;
                        color: #333;
                        padding-left: 10px;
                        outline: none;
                        margin-bottom: 20px;
                    }

                    .btnBox {
                        width: 220px;
                        height: auto;
                        overflow: hidden;
                        margin: 20px auto;

                        .cxbtn {
                            float: left;
                            display: block;
                            width: 90px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            font-size: 16px;
                            color: #fff;
                            background: #027dc3;
                            outline: none;
                            border: none;
                        }

                        .rebtn {
                            background: #ccc;
                            border: 1px solid #027dc3;
                            color: #027dc3;
                            float: right;
                            display: block;
                            width: 90px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}
</style>