fazhidy_org_cn/pages/dishizhongxin/index.vue

<template>
    <div class="dszx">
        <!-- 页面头部 -->
        <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="dszxTop">
            <div class="search_left">
                <span>地区:</span>
                <span class="selectRegion">
                    <select name="region" id="">
                        <option value="1">--</option>
                        <option value="2">地区2</option>
                        <option value="3">地区2</option>
                    </select>
                    <select name="region" id="">
                        <option value="1">--</option>
                        <option value="2">地区1</option>
                        <option value="3">地区2</option>
                    </select>
                    <select name="region" id="">
                        <option value="1">--</option>
                        <option value="2">地区1</option>
                        <option value="3">地区2</option>
                    </select>
                </span>
                <button type="submit">搜索</button>
            </div>
            <div class="select_right">
                <img src="../../public/index/index.png" alt="">
                <p>手机扫描查询</p>
            </div>
        </div>

        <!-- 城市列表 -->
        <div class="cityList">
            <span class="listname">中心列表</span>
            <div class="jiancheng">
                <a href="#">京</a>
                <a href="#">津</a>
                <a href="#">沪</a>
                <a href="#">渝</a>
                <a href="#">冀</a>
                <a href="#">豫</a>
                <a href="#">云</a>
                <a href="#">辽</a>
                <a href="#">黑</a>
                <a href="#">湘</a>
                <a href="#">皖</a>
                <a href="#">鲁</a>
            </div>
            <ul class="cityName">
                <li class="cityNameList">
                    <div class="sheng">
                        <a href="#">北京</a>
                    </div>
                    <div class="shi">
                        <a href="#">东城区</a>
                        <a href="#">西城区</a>
                        <a href="#">朝阳区</a>
                        <a href="#">海淀区</a>
                        <a href="#">丰台区</a>
                        <a href="#">石景山区</a>
                        <a href="#">门头沟区</a>
                        <a href="#">顺义区</a>
                        <a href="#">通州区</a>
                        <a href="#">昌平区</a>
                        <a href="#">大兴区</a>
                        <a href="#">怀柔区</a>
                        <a href="#">平谷区</a>
                        <a href="#">密云区</a>
                        <a href="#">延庆区</a>
                    </div>
                </li>
                <li class="cityNameList">
                    <div class="sheng">
                        <a href="#">河北</a>
                    </div>
                    <div class="shi">
                        <a href="#">石家庄</a>
                        <a href="#">唐山市</a>
                        <a href="#">秦皇岛市</a>
                        <a href="#">邯郸市</a>
                        <a href="#">邢台市</a>
                        <a href="#">保定市</a>
                        <a href="#">张家口市</a>
                        <a href="#">承德市</a>
                        <a href="#">沧州市</a>
                        <a href="#">廊坊市</a>
                        <a href="#">衡水市</a>
                    </div>
                </li>
                <li class="cityNameList">
                    <div class="sheng">
                        <a href="#">河南</a>
                    </div>
                    <div class="shi">
                        <a href="#">郑州市</a>
                        <a href="#">开封市</a>
                        <a href="#">洛阳市</a>
                        <a href="#">平顶山市</a>
                        <a href="#">安阳市</a>
                        <a href="#">鹤壁市</a>
                        <a href="#">新乡市</a>
                        <a href="#">许昌市</a>
                        <a href="#">漯河市</a>
                        <a href="#">三门峡市</a>
                        <a href="#">南阳市</a>
                        <a href="#">商丘市</a>
                    </div>
                </li>
            </ul>
        </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'


</script>

<style lang="less" scoped>
@media screen and (min-width: 1401px) {
    .dszx {
        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;
            }
        }

        .dszxTop {
            width: 1400PX;
            margin: 0 auto;
            height: auto;
            // height: 200PX;
            display: flex;
            justify-content: space-between;

            .search_left {
                margin-top: 0;
                width: 70%;
                padding-top: 25PX;

                span {
                    font-size: 16PX;
                    color: #333;
                    font-weight: 900;
                    padding: 0 15PX;
                }

                .selectRegion {
                    margin: 0 40PX;

                    select {
                        width: 177PX;
                        height: 30PX;
                        line-height: 30PX;
                        font-size: 14PX;
                        color: #555;
                        font-family: "微软雅黑", "microsoft yahei";
                        margin: 0 15PX;
                        padding: 0 15PX;
                        box-sizing: border-box;
                        outline: none;
                        border-color: #ccc;
                        border-radius: 5PX;
                    }
                }

                button {
                    width: 98PX;
                    height: 34PX;
                    font-size: 14PX;
                    font-weight: 400;
                    font-family: "微软雅黑", "microsoft yahei";
                    border-radius: 5PX;
                    color: #fff;
                    background-color: #337ab7;
                    border: none;
                    border-color: #2e6da4;
                    margin-left: 40PX;
                }

            }

            .select_right {
                margin-top: 0;
                width: 25%;
                text-align: center;

                img {
                    width: 280PX;
                    height: 280PX;
                }

                p {
                    text-align: center;
                    font-size: 16PX;
                    color: #333;
                    padding: 0 15PX;
                }
            }
        }

        .cityList {
            width: 1400PX;
            height: auto;
            border: 1PX solid #ccc;
            border-bottom: none;
            position: relative;
            margin: 20PX auto;

            .listname {
                width: 150PX;
                height: 50PX;
                line-height: 50PX;
                font-size: 30PX;
                color: #000;
                font-weight: bold;
                text-align: center;
                position: absolute;
                top: -25PX;
                left: 20PX;
                background: #fff;
            }

            .jiancheng {
                width: 100%;
                height: auto;
                padding: 30PX;
                border-bottom: 1PX solid #ccc;
                box-sizing: border-box;

                a {
                    font-size: 16PX;
                    padding: 0 8PX;
                    color: #000;
                }

                a:hover {
                    color: #297aff;
                }
            }

            .cityName {
                width: 100%;
                height: auto;
                box-sizing: border-box;

                .cityNameList {
                    width: 100%;
                    min-height: 40PX;
                    line-height: 40PX;
                    font-size: 16PX;
                    height: auto;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    border-bottom: 1PX solid #ccc;

                    .sheng {
                        width: 19%;
                        text-align: center;
                        font-size: 20PX;
                        line-height: 200%;

                        a {
                            color: #000;
                        }
                    }

                    .shi {
                        width: 80%;
                        line-height: 40PX;
                        font-size: 16PX;
                        border-left: 1PX solid #ccc;
                        padding: 0 10PX;
                        box-sizing: border-box;

                        a {
                            color: #000;
                            padding: 0 7PX;
                        }

                        a:hover {
                            color: #297aff;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .dszx {
        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;
            }
        }

        .dszxTop {
            width: 1400px;
            margin: 0 auto;
            height: auto;
            // height: 200px;
            display: flex;
            justify-content: space-between;

            .search_left {
                margin-top: 0;
                width: 70%;
                padding-top: 25px;

                span {
                    font-size: 16px;
                    color: #333;
                    font-weight: 900;
                    padding: 0 15px;
                }

                .selectRegion {
                    margin: 0 40px;

                    select {
                        width: 177px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 14px;
                        color: #555;
                        font-family: "微软雅黑", "microsoft yahei";
                        margin: 0 15px;
                        padding: 0 15px;
                        box-sizing: border-box;
                        outline: none;
                        border-color: #ccc;
                        border-radius: 5px;
                    }
                }

                button {
                    width: 98px;
                    height: 34px;
                    font-size: 14px;
                    font-weight: 400;
                    font-family: "微软雅黑", "microsoft yahei";
                    border-radius: 5px;
                    color: #fff;
                    background-color: #337ab7;
                    border: none;
                    border-color: #2e6da4;
                    margin-left: 40px;
                }

            }

            .select_right {
                margin-top: 0;
                width: 25%;
                text-align: center;

                img {
                    width: 280px;
                    height: 280px;
                }

                p {
                    text-align: center;
                    font-size: 16px;
                    color: #333;
                    padding: 0 15px;
                }
            }
        }

        .cityList {
            width: 1400px;
            height: auto;
            border: 1px solid #ccc;
            border-bottom: none;
            position: relative;
            margin: 20px auto;

            .listname {
                width: 150px;
                height: 50px;
                line-height: 50px;
                font-size: 30px;
                color: #000;
                font-weight: bold;
                text-align: center;
                position: absolute;
                top: -25px;
                left: 20px;
                background: #fff;
            }

            .jiancheng {
                width: 100%;
                height: auto;
                padding: 30px;
                border-bottom: 1px solid #ccc;
                box-sizing: border-box;

                a {
                    font-size: 16px;
                    padding: 0 8px;
                    color: #000;
                }

                a:hover {
                    color: #297aff;
                }
            }

            .cityName {
                width: 100%;
                height: auto;
                box-sizing: border-box;

                .cityNameList {
                    width: 100%;
                    min-height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    height: auto;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    border-bottom: 1px solid #ccc;

                    .sheng {
                        width: 19%;
                        text-align: center;
                        font-size: 20px;
                        line-height: 200%;

                        a {
                            color: #000;
                        }
                    }

                    .shi {
                        width: 80%;
                        line-height: 40px;
                        font-size: 16px;
                        border-left: 1px solid #ccc;
                        padding: 0 10px;
                        box-sizing: border-box;

                        a {
                            color: #000;
                            padding: 0 7px;
                        }

                        a:hover {
                            color: #297aff;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .dszx {
        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;
            }
        }

        .dszxTop {
            width: 1400px;
            margin: 0 auto;
            height: auto;
            // height: 200px;
            display: flex;
            justify-content: space-between;

            .search_left {
                margin-top: 0;
                width: 70%;
                padding-top: 25px;

                span {
                    font-size: 16px;
                    color: #333;
                    font-weight: 900;
                    padding: 0 15px;
                }

                .selectRegion {
                    margin: 0 40px;

                    select {
                        width: 177px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 14px;
                        color: #555;
                        font-family: "微软雅黑", "microsoft yahei";
                        margin: 0 15px;
                        padding: 0 15px;
                        box-sizing: border-box;
                        outline: none;
                        border-color: #ccc;
                        border-radius: 5px;
                    }
                }

                button {
                    width: 98px;
                    height: 34px;
                    font-size: 14px;
                    font-weight: 400;
                    font-family: "微软雅黑", "microsoft yahei";
                    border-radius: 5px;
                    color: #fff;
                    background-color: #337ab7;
                    border: none;
                    border-color: #2e6da4;
                    margin-left: 40px;
                }

            }

            .select_right {
                margin-top: 0;
                width: 25%;
                text-align: center;

                img {
                    width: 280px;
                    height: 280px;
                }

                p {
                    text-align: center;
                    font-size: 16px;
                    color: #333;
                    padding: 0 15px;
                }
            }
        }

        .cityList {
            width: 1400px;
            height: auto;
            border: 1px solid #ccc;
            border-bottom: none;
            position: relative;
            margin: 20px auto;

            .listname {
                width: 150px;
                height: 50px;
                line-height: 50px;
                font-size: 30px;
                color: #000;
                font-weight: bold;
                text-align: center;
                position: absolute;
                top: -25px;
                left: 20px;
                background: #fff;
            }

            .jiancheng {
                width: 100%;
                height: auto;
                padding: 30px;
                border-bottom: 1px solid #ccc;
                box-sizing: border-box;

                a {
                    font-size: 16px;
                    padding: 0 8px;
                    color: #000;
                }

                a:hover {
                    color: #297aff;
                }
            }

            .cityName {
                width: 100%;
                height: auto;
                box-sizing: border-box;

                .cityNameList {
                    width: 100%;
                    min-height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    height: auto;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    border-bottom: 1px solid #ccc;

                    .sheng {
                        width: 19%;
                        text-align: center;
                        font-size: 20px;
                        line-height: 200%;

                        a {
                            color: #000;
                        }
                    }

                    .shi {
                        width: 80%;
                        line-height: 40px;
                        font-size: 16px;
                        border-left: 1px solid #ccc;
                        padding: 0 10px;
                        box-sizing: border-box;

                        a {
                            color: #000;
                            padding: 0 7px;
                        }

                        a:hover {
                            color: #297aff;
                        }
                    }
                }
            }
        }
    }
}
</style>