fazhidy_org_cn/pages/diaoyanxuanti/index.vue

<template>
    <div class="dyxt">
        <!-- 页面头部 -->
        <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="leftTitle">
                    <a href="#">所有选题</a>
                </div>
                <ul class="leftList">
                    <li class="leftListItem">关于营口仙人岛祥烽旅游开发有限公司员工王勇的死亡赔偿纠纷一事进行调研核实</li>
                    <li class="leftListItem">关于营口仙人岛祥烽旅游开发有限公司员工王勇的死亡赔偿纠纷一事进行调研核实</li>
                    <li class="leftListItem">关于营口仙人岛祥烽旅游开发有限公司员工王勇的死亡赔偿纠纷一事进行调研核实</li>
                    <li class="leftListItem">关于营口仙人岛祥烽旅游开发有限公司员工王勇的死亡赔偿纠纷一事进行调研核实</li>
                    <li class="leftListItem">关于营口仙人岛祥烽旅游开发有限公司员工王勇的死亡赔偿纠纷一事进行调研核实</li>
                    <li class="leftListItem">关于营口仙人岛祥烽旅游开发有限公司员工王勇的死亡赔偿纠纷一事进行调研核实</li>
                </ul>
                <div class="leftBtn">
                    <a href="#">更多选题请联系客服</a>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="contentRight">
                <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 class="right_part1">
                    <div class="part1Title">车辆查询</div>
                    <div class="part2Text">请输入相关工作车辆或车牌号</div>
                    <p class="textList">
                        车牌：
                        <input type="text" name="" id="">
                    </p>
                    <p class="textList">
                        车型：
                        <input type="text" name="" id="">
                    </p>
                    <div class="btnBox1">
                        <button class="cxbtn">查询</button>
                    </div>
                </div>
            </div>
        </div>

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

<script setup>
import { ref, onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem } 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) {
    .dyxt {
        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 {
                width: 60%;
                height: auto;
                overflow: hidden;

                .leftTitle {
                    width: 100%;
                    height: 40PX;
                    line-height: 40PX;
                    margin: 0PX auto 20PX;
                    border-bottom: 1PX solid #ccc;

                    a {
                        display: block;
                        width: 100PX;
                        height: 40PX;
                        background: #007aff;
                        color: #fff;
                        font-size: 16PX;
                        text-align: center;

                    }
                }

                .leftList {
                    width: 100%;
                    height: auto;
                    overflow: hidden;

                    .leftListItem {
                        list-style: none;
                        height: 40PX;
                        line-height: 40PX;
                        overflow: hidden;
                        border-bottom: 1PX solid #ccc;
                        color: #333;
                        font-size: 12PX;
                    }
                }

                .leftBtn {
                    width: 140PX;
                    height: 35PX;
                    line-height: 35PX;
                    border: 1PX solid #ddd;
                    margin: 10PX auto;
                    text-align: center;
                    font-size: 14PX;

                    a {
                        padding: 0PX 5PX;
                        color: #000;
                        text-align: center;
                    }
                }

                .leftBtn:hover {
                    background-color: #ccc;

                    a {
                        color: #007aff;
                    }
                }
            }

            .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: 40PX;
                        line-height: 40PX;
                        text-align: center;
                        font-size: 16PX;
                        color: #333;
                    }

                    .part2Text {
                        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: 35PX;
                        line-height: 35PX;
                        font-size: 14PX;
                        color: #333;
                        padding-left: 10PX;
                        outline: none;
                        margin: 0 auto;
                        margin-bottom: 20PX;
                        border: 1PX solid #ccc;
                        border-radius: 4PX;
                    }

                    .textList {
                        width: 100%;
                        font-size: 16PX;

                        input {
                            width: 60%;
                            border: none;
                            border: 1PX solid #333;
                            border-radius: 0PX;
                        }
                    }

                    .btnBox {
                        width: 110PX;
                        height: auto;
                        overflow: hidden;
                        margin: 0 auto;

                        .cxbtn {
                            float: left;
                            display: block;
                            width: 50PX;
                            height: 35PX;
                            line-height: 35PX;
                            text-align: center;
                            color: #fff;
                            background: #027dc3;
                            outline: none;
                            border: none;
                            border-radius: 4PX;
                        }

                        .rebtn {
                            background: #5bc0de;
                            border: 1PX solid #5bc0de;
                            color: #fff;
                            float: right;
                            display: block;
                            width: 50PX;
                            height: 35PX;
                            line-height: 35PX;
                            text-align: center;
                            border-radius: 4PX;
                        }
                    }

                    .btnBox1 {
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                        margin: 0 auto;
                        text-align: center;

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

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .dyxt {
        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 {
                width: 60%;
                height: auto;
                overflow: hidden;

                .leftTitle {
                    width: 100%;
                    height: 40PX;
                    line-height: 40PX;
                    margin: 0PX auto 20PX;
                    border-bottom: 1PX solid #ccc;

                    a {
                        display: block;
                        width: 100PX;
                        height: 40PX;
                        background: #007aff;
                        color: #fff;
                        font-size: 16PX;
                        text-align: center;

                    }
                }

                .leftList {
                    width: 100%;
                    height: auto;
                    overflow: hidden;

                    .leftListItem {
                        list-style: none;
                        height: 40PX;
                        line-height: 40PX;
                        overflow: hidden;
                        border-bottom: 1PX solid #ccc;
                        color: #333;
                        font-size: 12PX;
                    }
                }

                .leftBtn {
                    width: 140PX;
                    height: 35PX;
                    line-height: 35PX;
                    border: 1PX solid #ddd;
                    margin: 10PX auto;
                    text-align: center;
                    font-size: 14PX;

                    a {
                        padding: 0PX 5PX;
                        color: #000;
                        text-align: center;
                    }
                }

                .leftBtn:hover {
                    background-color: #ccc;

                    a {
                        color: #007aff;
                    }
                }
            }

            .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: 40PX;
                        line-height: 40PX;
                        text-align: center;
                        font-size: 16PX;
                        color: #333;
                    }

                    .part2Text {
                        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: 35PX;
                        line-height: 35PX;
                        font-size: 14PX;
                        color: #333;
                        padding-left: 10PX;
                        outline: none;
                        margin: 0 auto;
                        margin-bottom: 20PX;
                        border: 1PX solid #ccc;
                        border-radius: 4PX;
                    }

                    .textList {
                        width: 100%;
                        font-size: 16PX;

                        input {
                            width: 60%;
                            border: none;
                            border: 1PX solid #333;
                            border-radius: 0PX;
                        }
                    }

                    .btnBox {
                        width: 110PX;
                        height: auto;
                        overflow: hidden;
                        margin: 0 auto;

                        .cxbtn {
                            float: left;
                            display: block;
                            width: 50PX;
                            height: 35PX;
                            line-height: 35PX;
                            text-align: center;
                            color: #fff;
                            background: #027dc3;
                            outline: none;
                            border: none;
                            border-radius: 4PX;
                        }

                        .rebtn {
                            background: #5bc0de;
                            border: 1PX solid #5bc0de;
                            color: #fff;
                            float: right;
                            display: block;
                            width: 50PX;
                            height: 35PX;
                            line-height: 35PX;
                            text-align: center;
                            border-radius: 4PX;
                        }
                    }

                    .btnBox1 {
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                        margin: 0 auto;
                        text-align: center;

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

@media screen and (max-width: 800px) {
    .dyxt {
        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 {
                width: 60%;
                height: auto;
                overflow: hidden;

                .leftTitle {
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    margin: 0px auto 20px;
                    border-bottom: 1px solid #ccc;

                    a {
                        display: block;
                        width: 100px;
                        height: 40px;
                        background: #007aff;
                        color: #fff;
                        font-size: 16px;
                        text-align: center;

                    }
                }

                .leftList {
                    width: 100%;
                    height: auto;
                    overflow: hidden;

                    .leftListItem {
                        list-style: none;
                        height: 40px;
                        line-height: 40px;
                        overflow: hidden;
                        border-bottom: 1px solid #ccc;
                        color: #333;
                        font-size: 12px;
                    }
                }

                .leftBtn {
                    width: 140px;
                    height: 35px;
                    line-height: 35px;
                    border: 1px solid #ddd;
                    margin: 10px auto;
                    text-align: center;

                    a {
                        padding: 0px 5px;
                        color: #000;
                        text-align: center;
                    }
                }

                .leftBtn:hover {
                    background-color: #ccc;

                    a {
                        color: #007aff;
                    }
                }
            }

            .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: 40px;
                        line-height: 40px;
                        text-align: center;
                        font-size: 16px;
                        color: #333;
                    }

                    .part2Text {
                        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: 35px;
                        line-height: 35px;
                        font-size: 14px;
                        color: #333;
                        padding-left: 10px;
                        outline: none;
                        margin: 0 auto;
                        margin-bottom: 20px;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                    }

                    .textList {
                        width: 100%;
                        font-size: 16px;

                        input {
                            width: 60%;
                            border: none;
                            border: 1px solid #333;
                            border-radius: 0px;
                        }
                    }

                    .btnBox {
                        width: 110px;
                        height: auto;
                        overflow: hidden;
                        margin: 0 auto;

                        .cxbtn {
                            float: left;
                            display: block;
                            width: 50px;
                            height: 35px;
                            line-height: 35px;
                            text-align: center;
                            color: #fff;
                            background: #027dc3;
                            outline: none;
                            border: none;
                            border-radius: 4px;
                        }

                        .rebtn {
                            background: #5bc0de;
                            border: 1px solid #5bc0de;
                            color: #fff;
                            float: right;
                            display: block;
                            width: 50px;
                            height: 35px;
                            line-height: 35px;
                            text-align: center;
                            border-radius: 4px;
                        }
                    }

                    .btnBox1 {
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                        margin: 0 auto;
                        text-align: center;

                        .cxbtn {
                            width: 90px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            font-size: 16px;
                            color: #fff;
                            background: #027dc3;
                            outline: none;
                            border: none;
                        }
                    }
                }
            }
        }
    }
}
</style>