[feat][ai生涯访谈][聊天静态页面]

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

@@ -18,7 +18,7 @@
                                     </span>
                                 </template>
                             </el-input>
-                            <div>
+                            <div @click="byKeyword">
                                 开始查询
                             </div>
                         </div>
@@ -96,6 +96,8 @@
     const headinfo = ref({})
     import {getOccupationByKeyword} from "@/api/xjc-integratedmachine/environment/occupation.js";
 
+    const router = useRouter()
+
     const form = ref({
         name: null
     })
@@ -120,10 +122,10 @@
         keywords.forEach(keyword => {
             // 使用正则表达式匹配关键词，并替换为带有红色样式的HTML标签
             // 这里使用全局匹配标志'g'，以确保替换所有出现的关键词
-            console.log("keywords", keywords)
+            // console.log("keywords", keywords)
             let regex = new RegExp(keyword, 'g');
             text = text.replace(regex, `<span style="color: #0DE6A1;">${keyword}</span>`);
-            console.log("text", text)
+            // console.log("text", text)
         });
         return text;
     }
@@ -135,15 +137,25 @@
                     item.selected = false;
                     let keyWord = form.value.name
                     item.name = highlightKeywords(item.name, [keyWord]);
-                    console.log(" item.name", item.name)
-                    // 遍历数据数组，并处理每个字符串
                 })
 
                 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()
     })

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

@@ -1,11 +1,151 @@
 <template>
-    AI生涯访谈2
+    <div class="ai_career_interview_chat">
+        <div class="left-box">
+            <div class="profile">
+                <img  src="@/assets/images/environment/ai-career-profile.png" alt="404">
+            </div>
+            <div class="introduce-text">
+                在生涯访谈中，通过与不同职业人物对话，可以了解不同职业的发展前景、职业要求，为尽早规划职业发展 xxxx
+                <p>访谈时你可以提出以下问题：</p>
+            </div>
+            <div class="question-list">
+                <p class="question-list-item">您为什么要选择这一职业？</p>
+                <p class="question-list-item">这项职业每天的核心任务是什么？</p>
+                <p class="question-list-item">这项职业的工作环境如何？（室内/室外，办公室/工厂，团队工作/独自工作等）</p>
+                <p class="question-list-item">从事这项职业需要哪些学历、证书、经验或关键能力？</p>
+                <p class="question-list-item">这项职业在招聘或晋升时，更看重哪些个人特质或阶段特征？</p>
+                <p class="question-list-item">大学里哪些专业与这项职业直接相关？</p>
+                <p class="question-list-item">为了从事这项职业，在校期间应做哪些具体准备？</p>
+                <p class="question-list-item">请分享一个最有成就感的项目/瞬间，以及一次印象深刻的挫折，您从中学到的关键经验是什么？</p>
+                <p class="question-list-item">这项职业未来的发展前景如何？</p>
+                <p class="question-list-item">这项职业进一步提升的途径有哪些？（培训、证书、项目、学历等）</p>
+                <p class="question-list-item">如果未来的我将选择从事该职业，您会给我哪些具体建议？</p>
+                <p class="question-list-item">请用时间轴描述一个典型工作日从上班到下班的详细流程？</p>
+            </div>
+
+        </div>
+
+        <div class="center-box">
+            <div class="center-header">
+                <div style="margin-left: 30px"></div>
+                <div>小新老师</div>
+                <div class="header-exit-btn">退出</div>
+            </div>
+            <div class="chat-box"></div>
+        </div>
+    </div>
 </template>
 
 <script setup>
+    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+    import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+    import {onMounted, ref} from "vue";
+    const router = useRouter()
+    const route = useRoute()
 
+    const param = route.query
 </script>
 
-<style scoped>
+<style  scoped lang="scss">
+    p{
+        margin: 0;
+        padding: 0;
+    }
+    .ai_career_interview_chat{
+        background: url('@/assets/images/environment/ai-career-background.png') no-repeat;
+        background-size: 1920px 1080px;
+        z-index:10;
+        width: 100%;
+        height: 1080px;
+        display: flex;
+
+        .left-box{
+            /*position: absolute;*/
+            margin-top: 18px;
+            margin-left: 44px;
+            width: 428px;
+            height: 1044px;
+            background: rgba(255,255,255,0.4);
+            border-radius: 10px 10px 10px 10px;
+            .profile {
+                img{
+                    width: 117px;
+                    height: 136px;
+                    margin-top: 48px;
+                    margin-left: 145px;
+                }
+            }
+            .introduce-text{
+                width: 392px;
+                margin-left: 14px;
+                font-weight: 400;
+                font-size: 28px;
+                color: #7D7C7C;
+                line-height: 40px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+            .question-list{
+                width: 392px;
+                height: 500px;
+                overflow: auto;
+                margin-left: 14px;
+                font-weight: 400;
+                font-size: 28px;
+                color: #7D7C7C;
+                line-height: 40px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+                .question-list-item{
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .center-box{
+            width: 1390px;
+            height: 1044px;
+            margin-top: 18px;
+            margin-left: 14px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 10px 10px 10px 10px;
+            .center-header{
+                width: 1390px;
+                height: 95px;
+                background: #D8F9F2;
+                border-radius: 10px 10px 0px 0px;
+                font-weight: bold;
+                font-size: 30px;
+                color: #333333;
+                line-height: 52px;
+                letter-spacing: 3px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .header-exit-btn{
+                    width: 136px;
+                    height: 74px;
+                    background: #FB5451;
+                    border-radius: 10px 10px 10px 10px;
+                    font-weight: 400;
+                    font-size: 24px;
+                    color: #FFFFFF;
+                    /*text-align: center;*/
+                    font-style: normal;
+                    text-transform: none;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 30px;
+                }
+            }
+
+        }
+    }
 
 </style>