fazhidy_org_cn/pages/hexinwangzhan/index.vue

<template>
    <div class="hxwz">
        <!-- 页面头部 -->
        <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="webSite">
            <div class="webSiteList">
                <div class="webSiteText">
                    <a href="#">登录</a>
                    <a href="#">本网概况</a>
                    <a href="#">联系我们</a>
                    <a href="#">会员服务</a>
                    <a href="#">网站地图</a>
                </div>
                <div class="webSiteImg">
                    <a href="#">
                        <img src="../../public/index/fznc.jpg" alt="">
                        <!-- </a>
                    <a href="#"> -->
                        <span>法治内参</span>
                    </a>
                </div>
            </div>
            <div class="webSiteList">
                <div class="webSiteImg">
                    <a href="#">
                        <img src="../../public/index/fznc.jpg" alt="">
                    </a>
                    <a href="#">
                        <span>法治内参</span>
                    </a>
                </div>
                <div class="webSiteText">
                    <a href="#">登录</a>
                    <a href="#">本网概况</a>
                    <a href="#">联系我们</a>
                    <a href="#">会员服务</a>
                    <a href="#">网站地图</a>
                </div>
            </div>
            <div class="webSiteList">
                <div class="webSiteText">
                    <a href="#">登录</a>
                    <a href="#">本网概况</a>
                    <a href="#">联系我们</a>
                    <a href="#">会员服务</a>
                    <a href="#">网站地图</a>
                </div>
                <div class="webSiteImg">
                    <a href="#">
                        <img src="../../public/index/fznc.jpg" alt="">
                    </a>
                    <a href="#">
                        <span>法治内参</span>
                    </a>
                </div>
            </div>
            <div class="webSiteList">
                <div class="webSiteImg">
                    <a href="#">
                        <img src="../../public/index/fznc.jpg" alt="">
                    </a>
                    <a href="#">
                        <span>法治内参</span>
                    </a>
                </div>
                <div class="webSiteText">
                    <a href="#">登录</a>
                    <a href="#">本网概况</a>
                    <a href="#">联系我们</a>
                    <a href="#">会员服务</a>
                    <a href="#">网站地图</a>
                </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'


</script>

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

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

            .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;
            }
        }

        //网站列表
        .webSite {
            width: 1400PX;
            overflow: hidden;
            margin: 20PX auto;

            .webSiteList {
                width: 50%;
                height: auto;
                float: left;
                padding: 20PX 80PX;
                border-bottom: 1PX dashed #ccc;
                box-sizing: border-box;

                .webSiteText {
                    float: left;
                    width: 50%;
                    height: auto;
                    padding: 10PX 0;
                    box-sizing: border-box;

                    a {
                        display: block;
                        float: left;
                        width: 50%;
                        height: 40PX;
                        line-height: 40PX;
                        font-size: 16PX;
                        color: #333;
                        text-align: center;

                        &:first-child {
                            width: 100%;
                        }
                    }
                }

                .webSiteImg {
                    width: 50%;
                    height: auto;
                    float: left;

                    a {
                        width: 100%;
                        text-align: center;

                        img {
                            display: block;
                            width: 220PX;
                            height: 150PX;
                        }

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

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

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

            .inner {
                width: 100%;
                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;
            }
        }

        //网站列表
        .webSite {
            width: 100%;
            overflow: hidden;
            margin: 20PX auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .webSiteList {
                width: 50%;
                height: auto;
                // float: left;
                // padding: 20px 80px;
                padding: 20PX 0;
                border-bottom: 1PX dashed #ccc;
                box-sizing: border-box;
                overflow: hidden;


                .webSiteText {
                    float: left;
                    width: 50%;
                    height: auto;
                    padding: 10PX 0;
                    box-sizing: border-box;

                    a {
                        display: block;
                        float: left;
                        width: 50%;
                        height: 40PX;
                        line-height: 40PX;
                        font-size: 16PX;
                        color: #333;
                        text-align: center;

                        &:first-child {
                            width: 100%;
                        }
                    }
                }

                .webSiteImg {
                    width: 50%;
                    height: auto;
                    float: left;

                    a {
                        width: 220PX;

                        img {
                            display: block;
                            width: 220PX;
                            height: 150PX;
                        }

                        span {
                            display: block;
                            height: 30PX;
                            line-height: 30PX;
                            text-align: center;
                            font-size: 16PX;
                            color: #333;
                        }
                    }
                }
            }
        }
    }
}

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

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

            .inner {
                width: 100%;
                border: 1px solid #ccc;
                color: #000;
                font-size: 32px;
                margin: 0 auto;

                .location {
                    margin-right: 40px;
                    width: 200px;
                    height: 44px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 32px;
                    color: #000;
                    line-height: 46px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

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

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

            :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: 32px;
                color: #000;
                line-height: 46px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        //网站列表
        .webSite {
            width: 100%;
            overflow: hidden;
            margin: 20px auto;

            .webSiteList {
                width: 100%;
                height: auto;
                float: left;
                padding: 20px 60px;
                border-bottom: 1px dashed #ccc;
                box-sizing: border-box;

                .webSiteText {
                    float: right;
                    width: 50%;
                    height: auto;

                    a {
                        display: block;
                        float: left;
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        font-size: 30px;
                        color: #333;
                        text-align: center;

                        &:first-child {
                            width: 100%;
                        }
                    }
                }

                .webSiteImg {
                    width: 50%;
                    height: auto;
                    float: left;

                    a {
                        width: 100%;
                        text-align: center;

                        img {
                            display: block;
                            width: 100%;
                        }

                        span {
                            display: block;
                            width: 100%;
                            height: 60px;
                            line-height: 60px;
                            text-align: center;
                            font-size: 32px;
                            color: #333;
                        }
                    }
                }
            }
        }
    }
}
</style>