前期,由于没有确定页面展示形式,于是进行了很多探索
- 首先安装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中:
实现效果如下: