fazhidy_org_cn/pages/jieshaoxinchaxun/index.vue

<template>
    <div class="jsxcx">
        <!-- 页面头部 -->
        <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">
                <p>
                    <span class="title">介绍信编号：</span>
                    <input type="text">
                    <span class="example">(查看位置示例)</span>
                    <button class="btn">搜索</button>
                </p>
            </div>
            <!-- 右侧 -->
            <div class="contentRight">
                <img src="../../public/index/index.png" alt="">
                <p>手机扫描查询</p>
            </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) {
    .jsxcx {
        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: 70%;
                height: auto;
                overflow: hidden;
                font-size: 16PX;

                p {
                    margin-top: 20PX;
                    display: flex;
                    height: 34PX;
                    line-height: 34PX;

                    .title {
                        font-size: 16PX;
                        font-weight: 900;
                        width: 163PX;
                        text-align: right;
                        margin-right: 30PX;
                        color: #333;
                    }

                    input {
                        width: 300PX;
                        border: 1PX solid #ccc;
                        margin-right: 100PX;
                        outline: none;
                        padding-left: 10PX;
                    }

                    .example {
                        font-size: 14PX;
                        color: #337ab3;
                        margin-right: 120PX;
                    }

                    .btn {
                        width: 90PX;
                        color: #fff;
                        background-color: #337ab3;
                        border: none;
                        border-radius: 4PX;
                    }
                }
            }

            .contentRight {
                width: 28%;
                text-align: center;

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

                p {
                    font-size: 16PX;
                    color: #333;
                }
            }
        }
    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .jsxcx {
        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: 70%;
                height: auto;
                overflow: hidden;
                font-size: 16PX;

                p {
                    margin-top: 20PX;
                    display: flex;
                    height: 34PX;
                    line-height: 34PX;

                    .title {
                        font-size: 16PX;
                        font-weight: 900;
                        width: 163PX;
                        text-align: right;
                        margin-right: 30PX;
                        color: #333;
                    }

                    input {
                        width: 300PX;
                        border: 1PX solid #ccc;
                        margin-right: 100PX;
                        outline: none;
                        padding-left: 10PX;
                    }

                    .example {
                        font-size: 14PX;
                        color: #337ab3;
                        margin-right: 120PX;
                    }

                    .btn {
                        width: 90PX;
                        color: #fff;
                        background-color: #337ab3;
                        border: none;
                        border-radius: 4PX;
                    }
                }
            }

            .contentRight {
                width: 28%;
                text-align: center;

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

                p {
                    font-size: 16PX;
                    color: #333;
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .jsxcx {
        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: 70%;
                height: auto;
                overflow: hidden;
                font-size: 16px;

                p {
                    margin-top: 20px;
                    display: flex;
                    height: 34px;
                    line-height: 34px;

                    .title {
                        font-size: 16px;
                        font-weight: 900;
                        width: 163px;
                        text-align: right;
                        margin-right: 30px;
                        color: #333;
                    }

                    input {
                        width: 300px;
                        border: 1px solid #ccc;
                        margin-right: 100px;
                        outline: none;
                        padding-left: 10px;
                    }

                    .example {
                        font-size: 14px;
                        color: #337ab3;
                        margin-right: 120px;
                    }

                    .btn {
                        width: 90px;
                        color: #fff;
                        background-color: #337ab3;
                        border: none;
                        border-radius: 4px;
                    }
                }
            }

            .contentRight {
                width: 28%;
                text-align: center;

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

                p {
                    font-size: 16px;
                    color: #333;
                }
            }
        }
    }
}
</style>