xjc-vue/src/views/xjc-integratedmachine/environment/ai_interview/ai_career_interview.vue

<template>
    <div class="ai_career_interview">
        <head-component :headinfo=headinfo></head-component>
        <div class="page-content">
            <div class="page-box">
                <div>
                    <div class="two-page">
                        <div class="two-page-search">
                            <el-input
                                    v-model="form.name"
                                    style="width: 1484px;height: 84px"
                                    placeholder="请输入你要访谈的职业"
                                    @input="byKeyword"
                            >
                                <template #suffix>
                                    <span style="font-size: 38px;color: #444040;margin-left: 37px;">
                                      X
                                    </span>
                                </template>
                            </el-input>
                            <div @click="byKeyword">
                                开始查询
                            </div>
                        </div>
                    </div>
                    <div style="overflow: auto;height: 720px;margin-top: 16px">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <div class="result-box" v-if="occupationList.length>0">
                                <div class="two-page-result">
                                    <div v-for="(item,index) in occupationList"
                                         :class="[item.selected?'item-result-box-active':'item-result-box']"
                                         @click="toDetail(item)">
                                        <div v-html="item.name"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="hot-search">
                            <div class="title">热门搜索：</div>
                            <div style="display: flex;flex-wrap:wrap;
                        margin-top: 11px;margin-left: 119px;margin-right: 91px">
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">教师</div>
                                <div class="search-item">心理咨询师</div>
                                <div class="search-item">实施运维工程师</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">教师</div>
                                <div class="search-item">心理咨询师</div>
                                <div class="search-item">实施运维工程师</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                            </div>
                        </div>
                        <div class="hot-search">
                            <div class="title">历史查询：</div>
                            <div style="display: flex;flex-wrap:wrap;
                        margin-top: 11px;margin-left: 119px;margin-right: 91px">
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">教师</div>
                                <div class="search-item">心理咨询师</div>
                                <div class="search-item">实施运维工程师</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">教师</div>
                                <div class="search-item">心理咨询师</div>
                                <div class="search-item">实施运维工程师</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                                <div class="search-item">计算机软件工程技术人员</div>
                            </div>
                        </div>
                    </div>

                </div>
                <drag_component></drag_component>
            </div>
        </div>
    </div>

</template>

<script setup>
    import {onMounted, ref} from "vue";
    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
    import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
    const headinfo = ref({})
    import {getOccupationByKeyword} from "@/api/xjc-integratedmachine/environment/occupation.js";

    const router = useRouter()

    const form = ref({
        name: null
    })

    // 职业列表
    const occupationList = ref([])

    function setHeadinfo(){
        headinfo.value = {
            title: 'AI生涯访谈',
            user: {
                avatar: '头像路径',
                nickName: '张三'
            },
            backUrl : '/xjc-integratedmachine/environment/index'
        }
    }

    // 定义一个函数，用于将关键词变为红色
    function highlightKeywords(text, keywords) {
        // 遍历关键词列表
        keywords.forEach(keyword => {
            // 使用正则表达式匹配关键词，并替换为带有红色样式的HTML标签
            // 这里使用全局匹配标志'g'，以确保替换所有出现的关键词
            // console.log("keywords", keywords)
            let regex = new RegExp(keyword, 'g');
            text = text.replace(regex, `<span style="color: #0DE6A1;">${keyword}</span>`);
            // console.log("text", text)
        });
        return text;
    }

    function byKeyword() {
        if(form.value.name){
            getOccupationByKeyword(form.value).then(resp => {
                resp.list.map(item => {
                    item.selected = false;
                    let keyWord = form.value.name
                    item.name = highlightKeywords(item.name, [keyWord]);
                })

                occupationList.value = resp.list
            })
        }else{
            occupationList.value = []
        }
    }

    function toDetail(row) {
        router.push({
            path: '/xjc-integratedmachine/environment/ai_career_interview_chat',
            query: {
                id: row.id
            }
        })
    }


    onMounted(() => {
        setHeadinfo()
    })

</script>

<style scoped lang="scss">
    p{
        margin: 0;
        padding: 0;
    }
    .ai_career_interview{
        background: url('@/assets/images/login/login-home-background.png') no-repeat;
        background-size: 1920px 1080px;
        z-index:10;
        width: 100%;
        height: 1080px;
        .page-content {
            width: 100%;
            height: 980px;
            position: absolute;
            top: 100px;
            bottom: 0;
        }
        .page-box{
            width: 1832px;
            height: 910px;
            background: #FFFFFF;
            border-radius: 35px 35px 35px 35px;
            margin: 13px auto 0;
            padding-top: 25px;
            position: relative;

        }

    }


    .two-page {
        display: flex;
        flex-direction: column;
        align-items: center;

        .two-page-search {
            display: flex;

            margin-top: 57px;

            ::v-deep .el-input__inner {
                font-size: 24px;
                margin-left: 34px;
            }

            ::v-deep .el-input__suffix {
                font-size: 100px;
                width: 100px;
                height: 100px;

            }

            ::v-deep .el-input__wrapper {
                background: #E2E2E2;
                box-shadow: none;
                height: 84px;
                width: 1484px;
            }
            div{
                width: 170px;
                height: 84px;
                background: linear-gradient( 180deg, #73EE71 0%, #0ACB63 100%);
                border-radius: 0px 5px 5px 0px;

                font-weight: 400;
                font-size: 24px;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .result-box {
        width: 1484px;
        /*height: 750px;*/
        /*overflow: auto;*/

        .two-page-result {
            display: flex;
            flex-wrap: wrap;
            /*justify-content: space-between;*/
            align-items: center;

            .item-result-box-active {
                min-width: 320px;
                height: 92px;
                background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
                box-shadow: inset 0px -2px 7px 0px #1E410E;
                border-radius: 5px 5px 5px 5px;
                border: 1px solid #A2F57F;
                font-weight: 400;
                font-size: 30px;
                color: #0DE6A1;
                line-height: 90px;
                text-align: center;
                margin-left: 50px;
                margin-right: 50px;
                margin-top: 32px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .item-result-box {
                min-width: 320px;
                height: 92px;
                background: #E0EEF4;
                border-radius: 5px 5px 5px 5px;
                font-weight: 400;
                font-size: 30px;
                color: #000000;
                line-height: 90px;
                text-align: center;
                margin-left: 50px;
                margin-right: 50px;
                margin-top: 32px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .item-result-box:hover {
                min-width: 320px;
                height: 92px;
                background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
                box-shadow: inset 0px -2px 7px 0px #1E410E;
                border-radius: 5px 5px 5px 5px;
                border: 1px solid #A2F57F;
                font-weight: 400;
                font-size: 30px;
                color: #000000;
                line-height: 90px;
                text-align: center;
                margin-left: 50px;
                margin-top: 32px;
                padding-left: 20px;
                padding-right: 20px;
            }
        }
    }

    .hot-search {
        .title{
            height: 52px;
            /*margin-top: 16px;*/
            margin-left: 123px;
            font-weight: bold;
            font-size: 24px;
            color: #333333;
            line-height: 52px;
            letter-spacing: 3px;
            text-align: left;
            font-style: normal;
            text-transform: none;

        }
    }

    .search-item{
        height: 80px;
        border-radius: 5px;
        border: 1px solid #B3B3B3;
        margin-right: 26px;
        margin-bottom: 26px;
        padding: 0 44px;
        font-weight: 400;
        font-size: 24px;
        color: #333333;
        display: flex;
        align-items: center;
        letter-spacing: 3px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
</style>