智能简历平台Plus——面试问答系统UI制作（1）

Vue.js 是一个流行的前端框架，具有许多优点：

• 简单易学： Vue.js 的核心库只关注视图层，并且易于逐步采用。它提供了简单的 API 和设计良好的文档，使得新手可以快速上手，并且有助于更复杂的单页面应用程序（SPA）开发。

• 双向数据绑定： Vue.js 提供了简洁的双向数据绑定机制，通过 v-model 指令可以轻松实现数据的同步更新，极大地简化了 DOM 操作和状态管理的复杂性。

• 组件化开发： Vue.js 鼓励组件化的开发方式，每个 Vue 组件都是一个独立的、可复用的组件单元。组件可以嵌套使用，并且可以拥有自己的状态和方法，使得代码结构更加清晰、可维护性更高。

• 灵活性： Vue.js 是渐进式的框架，可以作为库来逐步应用到项目中，也可以搭配现有的项目使用。它易于集成到其他项目中，无论是从头开始开发新项目还是改进现有项目，都能提供灵活的解决方案。

• 轻量级高性能： Vue.js 被设计为尽可能小且高效。它的大小和性能表现非常优秀，渲染速度快，响应式能力强，能够有效地处理大规模的数据操作和复杂的视图组件。

---

具体代码

首先需要导入组件

import SimulatorPage from '@/components/SimulatorPage.vue';

将 SimulatorPage.vue 设置为 /SimulatorPage 路径下的页面

{
        path: '/SimulatorPage',
        name: 'SimulatorPage',
        component: SimulatorPage
    },

在HomePage设置按钮

<button @click="goToSimulatorPage" class="SimulatorPage-button">面试模拟</button>


 goToSimulatorPage(){
      // 在这里实现跳转到模拟器页面的逻辑
      this.$router.push('/SimulatorPage'); // 使用 Vue Router 实现路由跳转到编辑简历页面
    },


.SimulatorPage-button {
  width: 200px;
  height: 100px;
  background-color: #81b975;
  color: white; /* 设置按钮文字颜色 */
  border: none; /* 移除按钮的边框 */
  border-radius: 10px; /* 设（）置按钮的圆角 */
  cursor: pointer; /* 设置鼠标悬停样式为手型 */
  /* 使用绝对定位 */
  position: absolute;
  bottom: 50px; /* 距离页面底部50px */
  left: 25%; 
  transform: translateX(-50%); /* 将按钮向左移动自身宽度的一半，实现水平居中 */
  /* 文字 */
  font-weight: bold;
  font-size: 25px; /* 设置字体大小 */
}
.SimulatorPage-button:hover {
  background-color:#4a6a43e4;
}

这样就实现了页面的跳转

---

提示框设置

<div class="tip" v-if="tipVisible">
      <h2>大模型面试问题模拟器</h2>
      <p><strong>欢迎使用智简PLUS工作面试问答大模型对话模拟器！</strong><br>我们的模拟器是专为准备工作面试的人员设计的，旨在提供一个互动式平台，帮助用户练习和改进他们的面试技能。利用先进的大模型技术，我们模拟了真实的面试场景，用户可以与模型进行对话，回答常见的面试问题，并获得实时的反馈和建议。</p>
      <button @click="close">Close</button>
    </div>

对话框内容设置

<textarea id="userInput" v-model="inputText" placeholder="请输入你的回答"></textarea>
    <button @click="inputDialog" class="inputDialog-button">发送</button>

按钮设置

<div class="container" v-if="buttonVisible">
      <button @click="civilService" class="civilService-button">考公</button>
      <button @click="educationalResources" class="educationalResources-button">教资</button>
      <button @click="bank" class="bank-button">银行</button>
      <button @click="enterprise" class="enterprise-button">企业管理</button>
    </div>

具体问题设置（以考公为例）

<!-- 考公 -->
    <div class="civilQuestion" v-if="civilServiceVisible">
      <div class="question">
        <button @click="handleCivilQuestion('civilQuestion1')" class="civilQuestion1">问题一</button>
        <p><strong>你认为什么是成为一名优秀公务员的关键特质</strong><br></p>
      </div>
      <div class="question">
        <button @click="handleCivilQuestion('civilQuestion2')" class="civilQuestion2">问题二</button>
        <p><strong>举一个你在团队合作中发挥关键作用的例子。</strong><br></p>
      </div>
      <div class="question">
        <button @click="handleCivilQuestion('civilQuestion3')" class="civilQuestion3">问题三</button>
        <p><strong>你如何看待个人利益与公共利益之间的关系?</strong><br></p>
      </div>
      <div class="question">
        <button @click="handleCivilQuestion('civilQuestion4')" class="civilQuestion4">问题四</button>
        <p><strong>你为什么想要加入公务员队伍?</strong><br></p>
      </div>
      <div class="question">
        <button @click="handleCivilQuestion('civilQuestion5')" class="civilQuestion5">问题五</button>
        <p><strong>你的长远职业规划是什么？</strong><br></p>
      </div>
    </div>

当选中某一问题时，显示问题

 <div class="text-container" v-if="showText">
      <p>{{ displayMessage }}</p>
    </div>

显示输入内容

<div class="response-area" v-if="responseAreaVisibility">
      <p><strong>你的回复：</strong><br></p>
      <p v-for="(message, index) in response" :key="index">{{ message }}</p>
      <p><strong>{{ simulator }}</strong><br></p>
      <p>{{ responseMessage }}</p>
    </div>

后续尽请期待~