fzxfb_org_cn/components/zoom/renyuanchaxun.vue

<template>
    <!-- 页面头部 -->
    <HomePageHead></HomePageHead>
    <!-- 导航栏 -->
    <HomePageNavigation></HomePageNavigation>
    <!-- 面包屑导航 -->
    <div class="breadcrumb-box">
        <div class="inner">
            <span class="location">当前位置：</span>
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item>
                    <NuxtLink to="/">首页</NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="phone_breadcrumb_text">人员查询</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <!-- 查询 -->
    <div class="search-box">
        <div class="search-left-box">
            <!--查询结果-->
            <div class="search-left-box-result">
                <!--未查询到结果-->
                <div class="no-result-box" v-if="showResult == 1">
                    <div class="no-result-image">
                        <img src="@/public/search/rc.jpg" alt="">
                    </div>
                    <div class="no-result-content">
                        <div class="no-result-title">sorry请您确认后再查询</div>
                        <div class="no-result-text">您可以通过以下方式继续访问……</div>
                        <div class="no-result-button" @click="returnSearchPage">返回查询页</div>
                    </div>
                </div>
                <!--人员详情-->
                <div v-if="showResult == 2">
                    <div class="result-box">
                        <div class="result-title">{{resultData.xingming}}</div>
                        <div class="result-content">
                            <div class="result-content-left">
                                <div><span>性&emsp;&emsp;别：</span>{{resultData.sex}}</div>
                                <div><span>出生年月：</span>{{resultData.csnyFormatted}}</div>
                                <div><span>证件编号：</span>{{resultData.zhengshuno}}</div>
                                <div><span>工作范围：</span>{{resultData.gzfw}}</div>
                                <div><span>职&emsp;&emsp;务：</span>{{resultData.zhiwu}}</div>
                            </div>
                            <div class="result-content-right">
                                <img :src="resultData.face">
                            </div>
                        </div>
                    </div>
                    <!--显示个人选题-->
                    <div class="result-topic-box" v-if="showResult == 2">
                        <div class="result-topic-title">
                            <div>个人选题</div>
                        </div>
                        <div class="result-topic-content" v-for="item in personTopicList" :key="item.id">
                            <h3>{{item.title}}</h3>
                            <div class="result-topic-content-main">
                                <div>同行人员：{{item.txry_name}}</div>
                                <div>{{item.organization}}</div>
                            </div>
                            <div class="result-topic-content-bottom">
                                <div>发布时间：{{item.updated_at}}</div>
                                <div>结束时间：{{item.due_time}}</div>
                                <div>申报人：{{item.real_name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--人员查询表单-->
            <div class="search-left-reset-button" v-if="showResult == 2 || showResult == 1">
                <div @click="resetPersonQuery">重新查询</div>
            </div>
            <div class="search-left-box-form">
                <div class="search-form1-left-box">
                    <div class="search-form1-title">
                        <img src="@/public/search/search.png" alt="">
                        查询相关工作人员或外聘人员
                    </div>
                    <div class="search-form1-text">请输入您要查询的工作人员/外聘人员姓名或证件编号</div>
                    <!-- <div class="search-form1-input-box">
                        <div class="inputText">人员类型：</div>
                        <el-select v-model="personType" placeholder="" popper-class="custom-select-dropdown">
                            <el-option label="不限" value="0" />
                            <el-option label="调研员" value="1" />
                            <el-option label="法制监督员" value="2" />
                            <el-option label="特邀评论员" value="3" />
                            <el-option label="特邀观察员" value="4" />
                            <el-option label="特邀编辑" value="5" />
                            <el-option label="信息员" value="6" />
                            <el-option label="特约通讯员" value="7" />
                            <el-option label="普法宣传员" value="8" />
                            <el-option label="工作证" value="9" />
                            <el-option label="其它工作人员" value="10" />
                            <el-option label="法制调解员" value="11" />
                            <el-option label="法制调查员" value="12" />
                            <el-option label="舆情监测员" value="13" />
                        </el-select>
                    </div> -->
                    <div class="search-form1-input-box">
                        <div class="inputText">人员姓名：</div>
                        <el-input v-model="personName" placeholder="" />
                    </div>
                    <div class="search-form1-input-box">
                        <div class="inputText">证件编号：</div>
                        <el-input v-model="personNumber" placeholder="" />
                    </div>
                    <div class="search-form1-submit-button">
                        <button @click="getPersonInfo">提交</button>
                    </div>
                </div>
                <div class="search-form1-wx">
                    <img src="@/public/search/rycx.png">
                    <div>手机扫描查询</div>
                </div>
            </div>
        </div>
        <div class="search-right-box">
            <!--车辆查询-->
            <div class="search-right-box-form">
                <h3>车辆查询</h3>
                <div class="search-right-form-text">请输入相关工作车辆或车牌号</div>
                <div class="search-right-input-box">
                    <el-input v-model="carLicense" placeholder="车牌" />
                </div>
                <div class="search-right-input-box">
                    <el-input v-model="carModel" placeholder="车型" />
                </div>
                <div class="search-right-button-box">
                    <button class="submit-button" @click="getCarQuery">查询</button>
                    <button class="reset-button" @click="resetCarQuery">重置</button>
                </div>
            </div>
            <!--选题查询-->
            <div class="search-right-box-form">
                <h3>选题查询</h3>
                <div class="search-right-form-text">
                    请输入您想要查询的选题
                </div>
                <div class="search-right-select-box">
                    地区：
                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px"
                        popper-class="custom-select-dropdown">
                        <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
                            @click="change(item.id)" :value="item.id" />
                    </el-select>
                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large" style="width: 120px"
                        popper-class="custom-select-dropdown">
                        <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
                            @click="change1(item.id)" :value="item.id" />
                    </el-select>
                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large" style="width: 120px"
                        popper-class="custom-select-dropdown">
                        <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" @click="change2(item.id)"/>
                    </el-select>
                </div>
                <div class="search-right-input-box">
                    <el-input v-model="topicTitle" placeholder="选题名称" />
                </div>
                <div class="search-right-button-box">
                    <button class="submit-button" @click="getTopicList">查询</button>
                    <button class="reset-button" @click="resetTopicQuery">重置</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面底部 -->
    <HomeFoot></HomeFoot>
</template>
<script setup>
//1.页面依赖 start ---------------------------------------->
import { onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem, ElMessage, ElInput, ElSelect, ElOption } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
const nuxtApp = useNuxtApp();
const route = useRoute();
//1.页面依赖 end ---------------------------------------->
//2.展示行政区划 start ---------------------------------------->
//let areaList = ref("")
//2.1 省
let province = ref("")
let provinceid = ref("")
let provinceList = ref("")
//2.2 市
let city = ref("")
let cityid = ref("")
let cityList = ref("")
//2.3 县
let region = ref("")
let regionid = ref("")
let regionList = ref("")
//2.4选择市
let change = async (id) => {
    provinceid.value = id;
    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    cityList.value = shengData.data;
    regionList.value = [];// 清空县 
}
//2.5选择县
let change1 = async (id) => {
    cityid.value = id;
    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    regionList.value = xianData.data;
}
let change2 = async (id) => {
    regionid.value = id;
}
onMounted(async () => {
    //从客户端获取行政区划
    try {
        const { $webUrl, $CwebUrl } = useNuxtApp();
        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
            headers: {
                'Content-Type': 'application/json',
                'Userurl': $CwebUrl,
                'Origin': $CwebUrl
            }
        });
        const result2 = await response2.json();
        provinceList.value = result2.data;
    } catch (error) {
        console.error('获取行政区划数据失败:', error);
    }
    const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
    const parentElement = document.querySelector('.nav_in');
    if (targetElement && parentElement) {
        const targetRect = targetElement.getBoundingClientRect();
        const parentRect = parentElement.getBoundingClientRect();
        const distanceToParentLeft = targetRect.left - parentRect.left;
        const navigationElement = document.querySelector('.partOne .navigationOne');
        if (navigationElement) {
            navigationElement.scrollLeft = distanceToParentLeft - 66;
        }
    }
})
//2.展示行政区划 end ---------------------------------------->
//3.表单 start---------------------------------------->
//3.1人员查询 start ---------------------------------------->
let personType = ref("0")//人员类型（当前人员类型暂时忽略，只传递默认值0）
let personName = ref("");//人员姓名
let personNumber = ref("");//证件编号
//显示查询结果
let showResult = ref(0)//0=不显示查询窗口 1=查无此人 2=查询成功
//人员查询结果
let resultData = ref({});
//人员的证书编号
let personId = ref("");
//人员调研选题列表
let personTopicList = ref([]);
//查询人员详情
let getPersonInfo = async (id) => {
    if(personNumber.value == ""){
        ElMessage.error("必须输入证件编号！")
    }else{
        //获得人员详情
        const personList = await requestDataPromise('/public/getPersonList', {
            method: 'POST',
            body: {
                'ssxmid': "10",
                'zhengshuno':personNumber.value,
                'name':personName.value,
                'rylx':personType.value
            },
        });
        if(personList.code == 200){
            //查询成功
            //console.log(personList)
            //测试证书编号 FZNC220068
            //查询到正确结果
            showResult.value = 2;
            resultData.value = personList.data[0];
            if (resultData.value.csny) {
                const dateParts = resultData.value.csny.split("-");
                if (dateParts.length === 3) {
                    resultData.value.csnyFormatted = `${dateParts[0]}年${dateParts[1]}月${dateParts[2]}日`;
                } else {
                    resultData.value.csnyFormatted = resultData.value.csny;
                }
            }
            personId.value = personList.data[0].zhengshuno;
            getPersonTopicList();
        }else{
            //查无此人
            showResult.value = 1;
        }
    }
}
//获得调研选题列表
const getPersonTopicList = async () => {
    //获得调研选题列表
    const personList = await requestDataPromise('/web/getWebsiteResearchTopic', {
        method: 'GET',
        query: {
            'title':"",
            'province_id':"",
            'city_id':"",
            'county_id':"",
            'number':personId.value,
            'page':1,
            'page_size':1
        },
    });
    if(personList.code == 200){
        //查询成功
        console.log(getPersonTopicList)
        personTopicList.value = personList.data.rows;
    }else{
        //查询失败
        console.log(personList.message)
    }
}
//返回查询页
let returnSearchPage = () => {
    showResult.value = 0;
}
//页面初始化
if(route.query.zhengshuno||route.query.zhengshuno==""){
    //路由中含有证书编号，开始查询
    const routerZhengshuno = route.query.zhengshuno || "";
    const routerName = route.query.name || "";
    const routerRylx = route.query.rylx || "0";
    personType.value = routerRylx;
    personName.value = routerName;
    personNumber.value = routerZhengshuno;
    //查询人员身份详情
    getPersonInfo();
    //查询关联的调研选题
}
//3.1人员查询 end ---------------------------------------->
//3.2车辆查询 start ---------------------------------------->
let carLicense = ref("");//车牌
let carModel = ref("");//车型
//跳转到车辆查询
const getCarQuery = () => {
    navigateTo({
        path: '/list-cheliangchaxun.html',
        query: { 
            chepaihao: carLicense.value,
            chexing: carModel.value,
        }
    })
}
//重置车辆查询
let resetCarQuery = () => {
    carLicense.value = "";
    carModel.value = "";
}
//3.2车辆查询 end ---------------------------------------->
//3.3选题查询 start ---------------------------------------->
let topicTitle = ref("");//选题名称
const getTopicList = () => {
    navigateTo({
        path: '/list-diaoyanxuanti.html',
        query: { 
            provinceid: provinceid.value,//省代码
            cityid:cityid.value,//市代码
            regionid:regionid.value,//县代码
            title:topicTitle.value,//选题名称
        }
    })
}
//重置选题查询
const resetTopicQuery = () => {
    provinceid.value = "";
    cityid.value = "";
    regionid.value = "";
    topicTitle.value = "";
}
//重置人员查询
const resetPersonQuery = () => {
    personName.value = "";
    personNumber.value = "";
    personType.value = "0";
    showResult.value = 0;
    personTopicList.value = [];
}
//3.3选题查询 end ---------------------------------------->
//3.表单 end---------------------------------------->
</script>
<style lang="less" scoped>
    //面包屑
    .breadcrumb-box {
        width: 1400px;
        margin: 0 auto;
        .inner {
            width: 100%;
            height: 22px;
            margin-top: 20px;
            margin-bottom: 20px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 20px;
            color: #666666;
            line-height: 23px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            align-items: center;
            border-bottom: 1px dashed #ccc;
            margin-bottom: 10px;
            padding: 20px 20px 20px 0;
            box-sizing: border-box;
            a {
                font-size: 16px;
                line-height: 20px;
                font-weight: normal !important;
                &:hover {
                    color: #333
                }
            }
            span {
                font-size: 16px;
                color: #000;
                line-height: 20px;
                &.location {
                    line-height: 20px;
                }
            }
        }
    }
    //搜索
    .search-box {
        width: 1400px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .search-left-box {
            width: 60%;
            box-sizing: border-box;
            .no-result-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                height: auto;
                overflow: hidden;
                background: #027dc3;
                padding: 50px;
                margin-bottom: 20px;
                box-sizing: border-box;
                .no-result-image {
                    width: 50%;
                    img {
                        width: 288px;
                        height: 288px;
                        margin: 0 auto;
                        display: block;
                    }
                }
                .no-result-content {
                    width: 50%;
                    .no-result-title {
                        display: block;
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        overflow: hidden;
                        font-size: 16px;
                        color: #fff;
                        text-align: center;
                        font-weight: bold;
                        font-size: 18px;
                    }
                    .no-result-text {
                        display: block;
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        overflow: hidden;
                        font-size: 16px;
                        color: #fff;
                        text-align: center;
                    }
                    .no-result-button {
                        display: block;
                        width: 100px;
                        height: 40px;
                        line-height: 40px;
                        background: #f36420;
                        margin: 20px auto;
                        text-align: center;
                        color: #fff;
                        font-size: 16px;
                        cursor: pointer;
                    }
                }
            }
            .search-left-box-result {
                .result-box {
                    .result-title {
                        display: block;
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        font-size: 18px;
                        color: #000;
                        a {
                            font-size: 18px;
                            color: #000;
                        }
                    }
                    .result-content {
                        margin: 20px 0;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .result-content-left {
                            width: 50%;
                            div {
                                display: flex;
                                width: 100%;
                                height: 40px;
                                line-height: 40px;
                                padding-left: 70px;
                                font-size: 16px;
                                color: #000;
                            }
                        }
                        .result-content-right {
                            width: 50%;
                            text-align: center;
                            img {
                                width: 120px;
                                height: 166px;
                                margin-top: 10px;
                            }
                        }
                    }
                }
                .result-topic-box {
                    margin: 20px 0;
                    .result-topic-title {
                        border-bottom: 1px solid #ccc;
                        >div {
                            width: 100px;
                            height: 40px;
                            text-align: center;
                            line-height: 40px;
                            background: #007aff;
                            color: #fff;
                            font-size: 16px;
                        }
                    }
                    .result-topic-content {
                        border-bottom: 1px solid #ccc;
                        margin: 20px 0;
                        h3 {
                            font-size: 18px;
                            font-weight: bold;
                        }
                        .result-topic-content-main {
                            width: 99%;
                            height: auto;
                            overflow: hidden;
                            border: 1px solid #ccc;
                            margin: 10px 0;
                            padding: 10px;
                            box-sizing: border-box;
                            >div {
                                display: block;
                                width: 100%;
                                height: auto;
                                line-height: 30px;
                                font-size: 16px;
                                color: #000;
                            }
                        }
                        .result-topic-content-bottom {
                            display: flex;
                            align-items: center;
                            div {
                                padding: 0 10px;
                                font-size: 14px;
                                color: #000;
                                line-height: 30px;
                            }
                        }
                    }
                }
            }
            .search-left-reset-button {
                width: 100%;
                height: 40px;
                line-height: 40px;
                margin-top: 40px;
                >div {
                    width: 100px;
                    height: 40px;
                    text-align: center;
                    background: #007aff;
                    color: #fff;
                    font-size: 16px;
                    cursor: pointer;
                }
            }
            .search-left-box-form {
                width: 100%;
                height: auto;
                overflow: hidden;
                border: 1px solid #333;
                padding: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
                .search-form1-left-box {
                    .search-form1-title {
                        display: flex;
                        align-items: center;
                        font-size: 19px;
                        color: #000;
                        img {
                            display: block;
                            width: 24px;
                            height: 24px;
                            float: left;
                            margin-right: 10px;
                        }
                    }
                    .search-form1-text {
                        width: 100%;
                        height: auto;
                        line-height: 30px;
                        margin: 20px 0;
                        font-size: 16px;
                        color: #333;
                    }
                    .search-form1-input-box {
                        display: flex;
                        align-items: center;
                        margin-bottom: 20px;
                        div.inputText {
                            display: block;
                            color: #333;
                            font-size: 16px;
                            white-space: nowrap;
                        }
                        input {
                            height: 40px;
                            line-height: 40px;
                        }
                        :deep(.el-input__wrapper) {
                            height: 40px;
                            line-height: 40px;
                            border: 1px solid #000;
                            box-shadow: none;
                            border-radius: 2px;
                            font-size: 16px;
                            color: #333;
                        }
                        :deep(.el-select__wrapper) {
                            height: 40px;
                            line-height: 40px;
                            border: 1px solid #000;
                            box-shadow: none;
                            border-radius: 2px;
                            font-size: 16px;
                            color: #333;
                        }
                        :deep(.el-input__inner) {
                            color: #000;
                        }
                        :deep(.el-select__placeholder) {
                            color: #000;
                        }
                    }
                }
                .search-form1-wx {
                    width: 38%;
                    img {
                        width: 100%;
                    }
                    >div {
                        display: block;
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        font-size: 16px;
                        color: #333;
                        text-align: center;
                    }
                }
            }
        }
        .search-right-box {
            width: 38%;
            box-sizing: border-box;
            .search-right-box-form {
                h3 {
                    width: 100%;
                    line-height: 40px;
                    font-size: 18px;
                    color: #000;
                }
                .search-right-form-text {
                    display: block;
                    width: 100%;
                    height: 70px;
                    line-height: 70px;
                    text-align: center;
                    font-size: 16px;
                    color: #333;
                }
                .search-right-input-box {
                    margin-bottom: 20px;
                    :deep(.el-input__wrapper) {
                        height: 40px;
                        line-height: 40px;
                        border: 1px solid #000;
                        box-shadow: none;
                        border-radius: 2px;
                        font-size: 16px;
                        color: #333;
                    }
                    :deep(.el-select__wrapper) {
                        height: 40px;
                        line-height: 40px;
                        border: 1px solid #000;
                        box-shadow: none;
                        border-radius: 2px;
                        font-size: 16px;
                        color: #333;
                    }
                    :deep(.el-input__inner) {
                        color: #000;
                    }
                }
                .search-right-button-box {
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;
                    button:first-child {
                        margin-right: 20px;
                    }
                    .submit-button {
                        display: block;
                        width: 90px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        font-size: 16px;
                        color: #fff;
                        background: #027dc3;
                        outline: none;
                        border: none;
                        cursor: pointer;
                    }
                    .reset-button {
                        display: block;
                        width: 90px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        font-size: 16px;
                        background: #ccc;
                        border: 1px solid #027dc3;
                        color: #027dc3;
                        outline: none;
                        cursor: pointer;
                    }
                }
                .search-right-select-box {
                    word-break: keep-all;
                    white-space: nowrap;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: bold;
                    font-size: 16px;
                    margin-bottom: 20px;
                    :deep(.el-select__wrapper) {
                        margin-left: 10px;
                    }
                    :deep(.el-select__placeholder) {
                        color: #000;
                    }
                }
            }
        }
        .search-form1-submit-button {
            text-align: center;
            button {
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background: #027dc3;
                color: #fff;
                font-size: 16px;
                margin: 0 auto;
                display: block;
                border: none;
                cursor: pointer;
            }
        }
    }
    .breadcrumb-box {
        width: 1400PX;
        margin: 0px auto 0px;
    }
    .el-breadcrumb {
        height: 22PX;
        line-height: 22PX;
    }
    .breadcrumb-box .inner span.location {
        font-size: 16PX;
        ;
        height: 22PX;
        ;
        line-height: 22PX;
        font-weight: normal;
    }
    .breadcrumb-box .inner a {
        font-size: 16PX;
        ;
        height: 22PX;
        line-height: 22PX;
        display: inline-block;
        font-weight: normal;
    }
    .breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
        font-size: 16PX;
        ;
        height: 22PX;
        line-height: 22PX;
        font-weight: normal;
    }
    .breadcrumb-box:deep(.el-icon) {
        width: 16PX;
        height: 16PX;
    }
    .breadcrumb-box .inner span {
        font-size: 16PX;
        ;
        height: 22PX;
        line-height: 22PX;
    }
    .search-box {
        overflow: hidden;
        width: 1400PX;
        .search-left-box {
            width: 60%;
            .no-result-box {
                padding: 40PX;
                margin-bottom: 20PX;
                .no-result-image {
                    img {
                        width: 288PX;
                        height: 288PX;
                    }
                }
                .no-result-content {
                    width: 50%;
                    .no-result-title {
                        height: auto;
                        line-height: 22PX;
                        font-size: 18PX;
                    }
                    .no-result-text {
                        height: auto;
                        margin-top: 11PX;
                        line-height: 22PX;
                        font-size: 16PX;
                    }
                    .no-result-button {
                        width: 100PX;
                        height: 40PX;
                        line-height: 40PX;
                        margin: 20PX auto;
                        font-size: 16PX;
                    }
                }
            }
            .search-left-box-result {
                .result-box {
                    .result-title {
                        height: 40PX;
                        line-height: 40PX;
                        font-size: 18PX;
                        a {
                            font-size: 18PX;
                        }
                    }
                    .result-content {
                        margin: 20PX 0;
                        .result-content-left {
                            div {
                                height: 40PX;
                                line-height: 40PX;
                                padding-left: 70PX;
                                font-size: 16PX;
                            }
                        }
                        .result-content-right {
                            width: 50%;
                            img {
                                width: 120PX;
                                height: 166PX;
                                margin-top: 10PX;
                            }
                        }
                    }
                }
                .result-topic-box {
                    margin: 20PX 0;
                    .result-topic-title {
                        border-bottom: 1PX solid #ccc;
                        >div {
                            width: 100PX;
                            height: 40PX;
                            line-height: 40PX;
                            font-size: 16PX;
                        }
                    }
                    .result-topic-content {
                        border-bottom: 1PX solid #ccc;
                        margin: 20PX 0;
                        h3 {
                            font-size: 18PX;
                        }
                        .result-topic-content-main {
                            border: 1PX solid #ccc;
                            margin: 10PX 0;
                            padding: 10PX;
                            >div {
                                width: 100%;
                                line-height: 30PX;
                                font-size: 16PX;
                            }
                        }
                        .result-topic-content-bottom {
                            div {
                                padding: 0 10PX;
                                font-size: 14PX;
                                line-height: 30PX;
                            }
                        }
                    }
                }
            }
            .search-left-reset-button {
                width: 100%;
                height: 40PX;
                line-height: 40PX;
                margin-top: 40PX;
                >div {
                    width: 100PX;
                    height: 40PX;
                    font-size: 16PX;
                }
            }
            .search-left-box-form {
                width: 100%;
                border: 1PX solid #333;
                padding: 20PX;
                .search-form1-left-box {
                    .search-form1-title {
                        font-size: 19PX;
                        img {
                            width: 24PX;
                            height: 24PX;
                            margin-right: 10PX;
                        }
                    }
                    .search-form1-text {
                        line-height: 30PX;
                        margin: 20PX 0;
                        font-size: 16PX;
                    }
                    .search-form1-input-box {
                        margin-bottom: 20PX;
                        div.inputText {
                            font-size: 16PX;
                        }
                        input {
                            height: 40PX;
                            line-height: 40PX;
                        }
                        :deep(.el-input__wrapper) {
                            height: 40PX;
                            line-height: 40PX;
                            border: 1PX solid #000;
                            border-radius: 2PX;
                            font-size: 16PX;
                        }
                        :deep(.el-select__wrapper) {
                            height: 40PX;
                            line-height: 40PX;
                            border: 1PX solid #000;
                            border-radius: 2PX;
                            font-size: 16PX;
                        }
                    }
                }
                .search-form1-wx {
                    >div {
                        height: 30PX;
                        line-height: 30PX;
                        font-size: 16PX;
                    }
                }
            }
        }
        .search-right-box {
            .search-right-box-form {
                h3 {
                    line-height: 40PX;
                    font-size: 18PX;
                }
                .search-right-form-text {
                    height: 70PX;
                    line-height: 70PX;
                    font-size: 16PX;
                }
                .search-right-input-box {
                    margin-bottom: 20PX;
                    :deep(.el-input__wrapper) {
                        height: 40PX;
                        line-height: 40PX;
                        border: 1PX solid #000;
                        border-radius: 2PX;
                        font-size: 16PX;
                    }
                    :deep(.el-select__wrapper) {
                        height: 40PX;
                        line-height: 40PX;
                        border: 1PX solid #000;
                        border-radius: 2PX;
                        font-size: 16PX;
                    }
                }
                .search-right-button-box {
                    margin-bottom: 20PX;
                    button:first-child {
                        margin-right: 20PX;
                    }
                    .submit-button {
                        width: 90PX;
                        height: 40PX;
                        line-height: 40PX;
                        font-size: 16PX;
                        color: #fff;
                    }
                    .reset-button {
                        width: 90PX;
                        height: 40PX;
                        line-height: 40PX;
                        font-size: 16PX;
                        border: 1PX solid #027dc3;
                    }
                }
                .search-right-select-box {
                    font-size: 16PX;
                    margin-bottom: 20PX;
                    :deep(.el-select__wrapper) {
                        margin-left: 10PX;
                    }
                }
            }
        }
        .search-form1-submit-button {
            button {
                width: 100PX;
                height: 40PX;
                line-height: 40PX;
                font-size: 16PX;
            }
        }
    }
    .custom-select-dropdown .el-select-dropdown__item {
        font-size: 16PX;
        color: #333;
    }
    .custom-select-dropdown .el-select-dropdown__item:hover {
        background-color: #027dc3;
        color: #fff;
    }
    .search-left-box {
        width: 60%;
    }
    .breadcrumb-box .inner {
        height: 22PX;
        margin-top: 20PX;
        margin-bottom: 20PX;
        font-size: 20PX;
        line-height: 23PX;
        margin-bottom: 10PX;
        padding: 20PX 20PX 20PX 0;
    }
    @media screen and (min-width: 1401px) {
        .search-right-box :deep(.el-select .el-select__wrapper) {
            min-height: 40PX !important;
            height: 40PX !important;
            padding: 10PX 10PX;
            font-size: 14PX;
        }
        .search-right-box :deep(.el-select__caret) {
            font-size: 18PX;
        }
        .custom-select-dropdown .el-select-dropdown__item {
            height: 33PX;
            line-height: 33PX;
            font-size: 14PX;
        }
    }
    @media screen and (max-width: 1400px) {
        .breadcrumb-box {
            width: 100%;
            margin: 0px auto 0px;
            box-sizing: border-box;
            padding: 0px 10px;
        }
        .newsList {
            width: 100%;
            box-sizing: border-box;
            padding: 0px 10px;
            margin: 0px auto 0px;
        }
        .search-box {
            width: 100%;
            box-sizing: border-box;
            padding: 0px 10px;
            margin: 0px auto 0px;
        }
        .search-box {
            display: block;
        }
        .search-left-box {
            width: 60%;
            float: left;
        }
        .search-right-box {
            float: right;
        }
        .search-box .search-right-box .search-right-box-form .search-right-select-box {
            word-break: keep-all;
            white-space: nowrap;
        }
        .search-box .search-left-box .search-left-box-form .search-form1-wx {
            margin-left: 11PX;
        }
    }
    @media screen and (min-width: 801px) and (max-width: 1400px) {
        //你的样式
        .search-right-box :deep(.el-select .el-select__wrapper) {
            min-height: 40PX !important;
            height: 40PX !important;
            padding: 10PX 10PX;
            font-size: 14PX;
        }
        .custom-select-dropdown .el-select-dropdown__item {
            height: 33PX;
            line-height: 33PX;
            font-size: 14PX;
        }
    }
    @media screen and (max-width: 800px) {
        //你的样式
        .search-left-box {
            width: 100%;
            float: none;
        }
        .breadcrumb-box :deep(.el-icon) {}
        .breadcrumb-box .inner span.location,
        .breadcrumb-box .inner span {
            font-size: 24px;
        }
        .breadcrumb-box .inner a {
            font-size: 24px;
            height: 55px;
            line-height: 55px;
        }
        .breadcrumb-box .phone_breadcrumb_text :deep(.el-breadcrumb__inner) {
            font-size: 24px;
            height: 55px;
            line-height: 55px;
        }
        .search-box .search-left-box .dytlt {
            height: 50px;
            line-height: 50px;
            margin: 0px auto 30px;
            border-bottom: 1px solid #ccc;
        }
        .search-box .search-left-box .dytlt a {
            float: left;
            width: auto;
            padding: 0px 10px;
            height: 50px;
            font-size: 26px;
        }
        .search-box .search-left-box .pagesnav {
            margin: 30px 0 50px 0;
        }
        .search-box .search-left-box .pagesnav a {
            padding: 10px 16px;
            margin-left: 0px;
            font-size: 20px;
            border-radius: 14px;
        }
        .search-box .search-left-box .xtlist li {
            height: 50px;
            line-height: 50px;
            font-size: 20px;
        }
        .search-box .search-right-box {
            width: 100%;
            float: none;
        }
        .search-box .search-right-box .search-right-box-form h3 {
            line-height: 50px;
            font-size: 26px;
        }
        .search-box .search-right-box .search-right-box-form .search-right-form-text {
            height: 80px;
            line-height: 80px;
            font-size: 26px;
        }
        .search-box .search-right-box .search-right-box-form .search-right-select-box {
            font-size: 24px;
            margin-bottom: 30px;
        }
        :deep(.el-select .el-select__wrapper) {
            min-height: 50px !important;
            height: 50px !important;
            box-sizing: border-box;
        }
        .search-box .search-right-box .search-right-box-form .search-right-input-box {
            margin-bottom: 30px;
        }
        .search-right-input-box :deep(.el-input__wrapper) {
            height: 50px !important;
            line-height: 50px !important;
            font-size: 16px !important;
        }
        .search-right-input-box :deep(.el-input__wrapper) {
            height: 55px !important;
        }
        .search-box .search-right-box .search-right-box-form .search-right-button-box .submit-button {
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 26px;
            margin-right: 30px;
        }
        .search-box .search-right-box .search-right-box-form .search-right-button-box .reset-button {
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 26px;
        }
        .search-box .search-left-box {
            width: 100%;
            float: none;
        }
        .search-box .search-left-box .search-left-box-form .search-form1-left-box .search-form1-title {
            font-size: 26px;
        }
        .search-box .search-left-box .search-left-box-form .search-form1-left-box .search-form1-text {
            line-height: 33px;
            font-size: 24px;
            margin: 20px auto;
        }
        .search-box .search-left-box .search-left-box-form .search-form1-left-box .search-form1-input-box {
            margin-bottom: 20px;
        }
        .search-box .search-left-box .search-left-box-form .search-form1-left-box .search-form1-input-box div.inputText {
            font-size: 24px;
        }
        .search-box .search-left-box .search-left-box-form .search-form1-left-box .search-form1-input-box :deep(.el-input__wrapper) {
            height: 50px;
            line-height: 50px;
        }
        .search-box .search-left-box .search-left-box-form .search-form1-wx {}
        .search-box .search-right-box .search-right-box-form h3 {
            line-height: 40px;
            font-size: 28px;
            margin-top: 55px;
        }
        .search-box .search-right-box .search-right-box-form .search-right-form-text {
            height: 80px;
            line-height: 80px;
            font-size: 26px;
        }
        .search-box .search-right-box .search-right-box-form .search-right-input-box-2 .inputText {
            font-size: 24px;
        }
        .search-box .search-right-box .search-right-box-form .search-right-input-box-2 :deep(.el-input__wrapper) {
            height: 50px;
            line-height: 50px;
        }
        .search-box .search-form1-submit-button button {
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
        }
        .search-box .search-right-box .search-right-box-form .search-right-button-box .submit-button {
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 24px
        }
        .search-box .search-right-box .search-right-box-form .search-right-button-box .reset-button {
            height: 50px;
            width: 100px;
            line-height: 50px;
            font-size: 24px
        }
        .search-box .search-right-box .search-right-box-form .search-right-input-box {
            margin-bottom: 20px;
            overflow: hidden;
        }
        .search-box .search-right-box .search-right-box-form .search-right-input-box :deep(.el-input .el-input__wrapper) {
            height: 50px;
        }
    }
    @media screen and (max-width: 500px) {
        .search-box .search-left-box .search-left-box-form {
            width: 100%;
            display: block;
            overflow: hidden;
        }
        .search-form1-left-box {
            width: 100%;
        }
        .search-form1-wx {
            width: 100%;
            margin-left: 0px;
        }
        .search-box .search-left-box .search-left-box-form .search-form1-wx {
            width: 55%;
            float: none;
            margin: 20px auto;
        }
    }
    @media screen and (max-width: 400px) {
        :deep(.el-select .el-select__wrapper) {
            min-height: 66px !important;
            height: 66px !important;
        }
    }
</style>
<style>
    @media screen and (min-width: 801px) and (max-width: 1400px) {
        .custom-select-dropdown .el-select-dropdown__empty {
            font-size: 16PX;
            height: 33PX;
            line-height: 33PX;
        }
    }
    @media screen and (min-width: 1401px) {
        .custom-select-dropdown .el-select-dropdown__empty {
            font-size: 16PX;
            height: 33PX;
            line-height: 33PX;
        }
    }
</style>