【项目实训】前端页面初探索(前期探索)

前期,由于没有确定页面展示形式,于是进行了很多探索

  • 首先安装element-ui

  • 导入elemnt-plus

添加use:

  • 设置一个全局样式

  • 编写导航栏
<el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#95d475"
        text-color="#606266"
        active-text-color="#ffd04b"
        mode="horizontal"
        @select="handleSelect"
    >
      <div style = "height:30px;line-height: 60px;text-align: center;padding-left: 10px;font-size: 25px">
        <img src="../assets/2.jpg" alt="" style="width:40px;padding-right: 7px;position: relative;top:9px">
      <b style="color:black">职跃助手</b>
      </div>
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">面试经验总结</el-menu-item>
      <el-menu-item index="3" >模拟面试</el-menu-item>

样式如图:

  • 进行页面间路由

首先在index.js中编写路由逻辑

其次,在导航栏部分编写点击实现跳转页面的逻辑,即在el-menu处加router,并把index设置为相应的页面

  • 编写面试经验页

首先编写两个选择器用来选择公司岗位,然后进行确认

 需要注意,为了实现选择一个选项后,在选项框中出现该选项,要把v-model添加到data中:

实现效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/753496.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

柯桥在职学历提升|专科本科之自考本科哪些专业不考数学

一、管理类专业 这类专业综合性和理论性比较强&#xff0c;除了涉及到管理学相关的理论知识外&#xff0c;还有相应的专业知识&#xff0c;目前比较典型的专业有&#xff1a;行政管理、人力资源管理、工商管理&#xff08;现代企业管理&#xff09;、工商管理&#xff08;商务管…

【逆运动学】六轴机器人运动学逆解上位机控制

六轴机器人逆运动学上位机控制 最终效果 通过开发的上位机软件&#xff0c;实现对机械臂末端的精准操控。该软件接收输入的坐标与角度参数&#xff0c;经过算法处理计算出机械臂各关节轴的目标角度。随后&#xff0c;这些角度值被转换为对应的脉冲宽度调制&#xff08;PWM&am…

建筑物健康监测:振弦式应变计的选型与应用

在现代建筑工程中&#xff0c;建筑物健康监测(Structural Health Monitoring, SHM)越来越受到关注。通过实时监测建筑结构的状态&#xff0c;确保建筑物的安全和耐久性&#xff0c;是工程师和建筑师们面临的重要任务。振弦式应变计作为一种关键的监测工具&#xff0c;因其高精…

uni-app 自定义支付密码键盘

1.新建最贱 payKeyboard .vue <template><view class"page-total" v-show"isShow"><view class"key-list"><view class"list" v-for"(item,index) in keyList" :class"{special:item.keyCode190…

前端存储都有哪些

cookie 、sessionStorage、localStorange、http缓存 、indexDB cookie 由服务器设置&#xff0c;在客户端存储&#xff0c;然后每次发起同源请求时&#xff0c;发送给服务器端。cookie最多能存储4K数据&#xff0c;它的生存时间由expires属性指定&#xff0c;并且cookie只能被…

粮油包装生产线:智能化升级助力产业腾飞

随着科技的不断进步和产业的深入发展&#xff0c;粮油包装生产线在智能化和产业升级中扮演着越来越关键的角色。智能化不仅提升了生产线的效率和精度&#xff0c;还为实现产业升级、提升产品质量、降低成本等方面带来了革命性的变化。 一、智能化改造&#xff0c;效率大提升 传…

微信小程序开发 小白入门篇

小程序内容简介 能够知道如何创建小程序项目 微信开发者工具的使用、appID 的获取能够清楚小程序项目的基本组成结构 app.js、app.json、app.wxss、pages 文件夹能够知道小程序页面由几部分组成 wxml、wxss、json、js能够知道小程序中常见的组件如何使用 view、text、image能够…

以指标为中心,Aloudata 重塑企业数据生产力

6 月 25 日 - 6 月 26 日&#xff0c;第十届 CDIE 数字化创新博览会在上海张江科学会堂隆重举行。作为国内领先的自动化数据管理软件提供商&#xff0c;Aloudata 大应科技携自主研发的 Aloudata CAN 自动化指标平台亮相&#xff0c;全面展现了其独创的“NoETL”架构理念&#x…

vue-cil搭建项目

目录 一、使用 HbuilderX 快速搭建一个 vue-cli 项目 1.需要的环境——Node.js 2.搭建Vue-cil项目 二、组件路由 1.安装vue-router 2.创建router目录 3.使用路由 4.在main.js中配置路由 vue-cli 官方提供的一个脚手架&#xff0c;用于快速生成一个 vue 的项目模板&#xff1b;…

【机器学习】Whisper:开源语音转文本(speech-to-text)大模型实战

目录 一、引言 二、Whisper 模型原理 2.1 模型架构 2.2 语音处理 2.3 文本处理 三、Whisper 模型实战 3.1 环境安装 3.2 模型下载 3.3 模型推理 3.4 完整代码 3.5 模型部署 四、总结 一、引言 上一篇对​​​​​​​ChatTTS文本转语音模型原理和实战进行了讲解&a…

Charles网络抓包工具安装和web抓包(一)

目录 概述 抓包工具对比 安装 下载 web抓包配置 按键说明 前言-与正文无关 ​ 生活远不止眼前的苦劳与奔波&#xff0c;它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界中&#xff0c;我们往往容易陷入工作的漩涡&#xff0c;忘记了停下脚步&#…

Kubernetes Prometheus 系例 | kubernetes 部署 Kafka exporter监控Kafka集群

prometheus 监控 kafka 常见的有两种开源方案&#xff1b; 部署 exporter 或 jmx 配置监控。 项目地址&#xff1a; kafka_exporter&#xff1a;https://github.com/danielqsj/kafka_exporter jmx_exporter&#xff1a;https://github.com/prometheus/jmx_exporter 本文采用kaf…

布尔运算00

题目链接 布尔运算 题目描述 注意点 运算符的数量不超过 19 个布尔表达式由 0 (false)、1 (true)、& (AND)、 | (OR) 和 ^ (XOR) 符号组成算出有几种可使该表达式得出 result 值的括号方法 解答思路 可以使用动态规划根据左右两侧区间不同结果相应组合数量计算得出当前…

WINDOWS+PHP+Mysql+Apache环境中部署SQLi-Labs、XSS-Labs、UPload-Labs、DVWA、pikachu等靶场环境

web渗透测试学习&#xff0c;需要自己搭建一些靶场&#xff0c;本人主要介绍在WINDOWSPHPMysqlApache环境中部署SQLi-Labs、XSS-Labs、UPload-Labs、DVWA、pikachu等靶场环境。以下是靶场代码下载的链接&#xff1a; pikachu靶场代码 链接&#xff1a;https://pan.baidu.com/s…

C++——string类用法指南

一、前言 在C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c;但是这些库函数与字符串是分离的&#xff0c;不太符合OOP的思想&#xff0c;而且底层空间需要用户自己管理&#xff0c;稍…

RAGOnMedicalKG:大模型结合知识图谱的RAG实现

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 大模型应用向开发路径&#xff1a;AI代理工作流大模型应用开发实用开源项目汇总大模…

数据可视化如何为智慧农业带来变革

数据可视化如何为智慧农业保驾护航&#xff1f;随着农业现代化的深入推进&#xff0c;智慧农业应运而生&#xff0c;通过集成物联网、大数据、人工智能等先进技术&#xff0c;实现农业生产的数字化、智能化和高效化。而在这一过程中&#xff0c;数据可视化技术作为重要的工具&a…

文本分析|小白教程

在信息爆炸的时代&#xff0c;文本数据无处不在&#xff0c;如何从这些海量的文字中提炼出有价值的信息呢&#xff1f;答案就是——文本分析。文本分析&#xff0c;简单来说&#xff0c;就是对文本数据进行深度的研究和分析。它能够从看似普通的文字中&#xff0c;提取出主题、…

Git之checkout/reset --hard/clean -f区别(四十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

第6章_libmodbus使用

文章目录 第6章 libmodbus使用6.1 libmodbus开发库6.1.1 功能概要6.1.2 源码获取6.1.3 源码阅读1. 新建工程2. 同步文件3.打开工程4. 操作示例5. 快捷键 6.1.4 libmodbus与应用程序的关系 6.2 libmodbus源代码解析6.2.1 核心函数6.2.2 框架分析与数据结构6.2.3 情景分析1. 初始…