个人表头

src/components/CtDialog/index.vue

@@ -101,7 +101,7 @@ const dialogWidth = computed(() => {
   return arr[+props.widthType]
 })
 const handleClose = () => {
-  emits('update:visible', false)
+  // emits('update:visible', false)
   emits('close', false)
 }
 const handleSave = () => {

src/styles/personal/navBar.css

@@ -0,0 +1,421 @@
+@charset "UTF-8";
+.header-login-btn {
+  position: relative;
+}
+
+.header-login-btn:hover .header-login-desc {
+  display: block;
+}
+
+.header-login-btn:hover:after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -12px;
+  height: 12px;
+  z-index: 1;
+  background: transparent;
+}
+
+.header-login-desc {
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 34px;
+  margin-left: -114px;
+  background: #ffffff;
+  box-shadow: 0px 16px 40px 0px rgba(153, 153, 153, 0.3), 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
+  z-index: 2;
+  font-size: 14px;
+  text-align: left;
+  padding: 16px 18px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  font-weight: normal;
+}
+
+.header-login-desc:before {
+  content: " ";
+  position: absolute;
+  left: 50%;
+  margin-left: -4px;
+  top: -8px;
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid #fff;
+}
+
+.header-login-desc .login-desc-title {
+  font-weight: 500;
+  color: #333333;
+  line-height: 20px;
+  display: block;
+}
+
+.header-login-desc .login-desc-list {
+  margin-top: 4px;
+}
+
+.header-login-desc .login-desc-list li {
+  margin: 8px 0 0 0;
+  display: block;
+  font-size: 13px;
+  color: #333333;
+  text-align: left;
+  height: 26px;
+  line-height: 26px;
+}
+
+.header-login-desc .login-desc-list .login-desc-icon {
+  display: inline-block;
+  height: 26px;
+  width: 26px;
+  margin-right: 8px;
+  vertical-align: middle;
+  background: url(https://img.bosszhipin.com/static/file/2022/7rf2cut4bc1669274264900.png) 0 0/26px auto no-repeat;
+}
+
+.header-login-desc .login-desc-list .login-desc-icon.desc-icon-chat {
+  background-position: 0 0;
+}
+
+.header-login-desc .login-desc-list .login-desc-icon.desc-icon-match {
+  background-position: 0 -26px;
+}
+
+.header-login-desc .login-desc-list .login-desc-icon.desc-icon-info {
+  background-position: 0 -52px;
+}
+
+.header-resume-new .header-resume-tip {
+  z-index: 2;
+  display: none;
+}
+
+.header-resume-new a:hover .header-resume-tip {
+  display: none;
+}
+
+.header-nav-group {
+  margin: 0 5px;
+  float: none;
+}
+
+.header-nav-group li {
+  margin: 0;
+  position: relative;
+}
+
+.header-nav-group .header-nav-dot {
+  display: inline-block;
+  width: 2px;
+  height: 2px;
+  border-radius: 100%;
+  background: #fff;
+  vertical-align: middle;
+}
+
+.user-nav .header-login-btn {
+  vertical-align: middle;
+}
+
+.user-nav .nav-resume-tools {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.user-nav .nav-resume-tools > a {
+  display: inline-block;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 20px;
+  height: auto;
+  padding: 3px 7px;
+  vertical-align: middle;
+  border-radius: 4px;
+  margin-right: 8px;
+  border: 1px solid transparent;
+}
+
+.user-nav .nav-resume-tools > a:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.user-nav .nav-resume-tools:hover .nav-resume-box {
+  display: block;
+}
+
+.user-nav .nav-resume-box {
+  display: none;
+  position: absolute;
+  top: 49px;
+  right: 0;
+  z-index: 1;
+  padding: 4px;
+  background: #ffffff;
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  border: 1px solid #ededed;
+}
+
+.user-nav .nav-resume-box ul {
+  overflow: hidden;
+}
+
+.user-nav .nav-resume-box li {
+  display: block;
+  float: left;
+  text-align: center;
+  width: 120px;
+  margin: 4px;
+  border-radius: 8px;
+}
+
+.user-nav .nav-resume-box li a {
+  border: 1px solid transparent;
+  transition: all 0.2s linear;
+  border-radius: 8px;
+}
+
+.user-nav .nav-resume-box li:hover a {
+  border: 1px solid transparent;
+  border: 1px solid rgba(0, 190, 189, 0.5);
+}
+
+.user-nav .nav-resume-box li:hover span {
+  color: #00a6a7;
+}
+
+.user-nav .header-resume-new + .nav-resume-box .resume-box-update {
+  display: block;
+}
+
+.user-nav .nav-resume-box .resume-box-update {
+  display: none;
+}
+
+.user-nav .nav-resume-box li.resume-box-boss {
+  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.user-nav .nav-resume-box li.resume-box-geek {
+  background: linear-gradient(180deg, #ffe4c2 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.user-nav .nav-resume-box li.resume-box-geek a:before {
+  background-position: 0 -60px;
+}
+
+.user-nav .nav-resume-box li.resume-box-upload a:before {
+  background-position: 0 -120px;
+}
+
+.user-nav .nav-resume-box li.resume-box-update {
+  position: relative;
+  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.user-nav .nav-resume-box li.resume-box-update:after {
+  content: "解析成功";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  font-size: 12px;
+  background: rgba(0, 166, 167, 0.1);
+  display: inline-block;
+  padding: 2px 4px;
+  line-height: 16px;
+  background: #00bebd;
+  border-radius: 0px 8px 0px 8px;
+  color: #fff;
+}
+
+.user-nav .nav-resume-box li.resume-box-update a:before {
+  background-position: 0 -180px;
+}
+
+.user-nav .nav-resume-box li.resume-box-resume {
+  background: linear-gradient(180deg, #a6ffe7 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.user-nav .nav-resume-box li.resume-box-resume a:before {
+  background-position: 0 -240px;
+}
+
+.user-nav .nav-resume-box li.resume-box-upload {
+  background: linear-gradient(180deg, #a4e5ff 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.user-nav .nav-resume-box li a {
+  display: block;
+  padding: 20px 0 10px;
+}
+
+.user-nav .nav-resume-box li a:before {
+  content: " ";
+  display: block;
+  margin: 0 auto;
+  width: 60px;
+  height: 60px;
+  background: url(https://img.bosszhipin.com/static/file/2023/d1mkjebr121695198610640.png) 0 0/60px auto no-repeat;
+}
+
+.user-nav .nav-resume-box li span {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #222222;
+  line-height: 20px;
+  margin-top: 12px;
+  transition: all 0.2s linear;
+}
+
+.user-nav .nav-resume-box li p {
+  font-size: 12px;
+  color: #999999;
+  line-height: 17px;
+  margin-top: 4px;
+}
+
+ader-img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.v-btn {
+  text-transform: none;
+}
+
+.banner {
+  z-index: var(--zIndex-nav) !important;
+  color: #fff;
+}
+
+.banner .left {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.hover:hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.innerBox {
+  position: relative;
+  width: 1184px;
+  max-width: 1184px;
+  margin: 0 auto;
+  align-items: center;
+}
+
+.nav-logo {
+  float: left;
+}
+
+.nav-city {
+  float: left;
+  position: relative;
+  cursor: pointer;
+  height: 49px;
+  line-height: 49px;
+  color: #fff;
+  margin-left: 50px;
+}
+
+.nav-city-selected {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 84px;
+  vertical-align: middle;
+}
+
+.switchover-city {
+  color: #fff;
+  margin-left: 10px;
+}
+
+.nav {
+  font-size: 0;
+  float: left;
+  margin-left: 50px;
+  height: 49px;
+  line-height: 49px;
+}
+
+.nav ul {
+  display: flex;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.nav ul li {
+  text-align: center;
+  font-size: 14px;
+  margin: 0 5px;
+  list-style: none;
+}
+
+.nav li a {
+  display: block;
+  padding: 0 5px;
+  position: relative;
+  text-decoration: none;
+  color: #fff;
+}
+
+.user-nav {
+  position: absolute;
+  right: 0;
+  height: 49px;
+  line-height: 49px;
+}
+
+.user-nav .nav-resume-tools > a {
+  display: inline-block;
+  font-weight: 500;
+  color: #fff;
+  line-height: 20px;
+  height: auto;
+  padding: 3px 7px;
+  vertical-align: middle;
+  border-radius: 4px;
+  margin-right: 8px;
+  border: 1px solid transparent;
+}
+
+.user-nav .btns .btn-outline {
+  border-radius: 8px;
+  text-align: center;
+  font-size: 14px;
+  height: 26px;
+  line-height: 26px;
+  min-width: 0;
+  padding: 0 11px;
+  margin-left: 14px;
+  background-color: transparent;
+}
+
+.user-nav .btn {
+  display: inline-block;
+  box-sizing: content-box;
+  border: 1px solid #fff;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+
+.user-nav a {
+  text-decoration: none;
+}

src/styles/personal/navBar.scss

@@ -0,0 +1,373 @@
+.header-login-btn {
+  position: relative;
+}
+.header-login-btn:hover .header-login-desc {
+  display: block;
+}
+.header-login-btn:hover:after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -12px;
+  height: 12px;
+  z-index: 1;
+  background: transparent;
+}
+.header-login-desc {
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 34px;
+  margin-left: -114px;
+  background: #ffffff;
+  box-shadow: 0px 16px 40px 0px rgba(153, 153, 153, 0.3),
+    0px 2px 10px 0px rgba(0, 0, 0, 0.08);
+  z-index: 2;
+  font-size: 14px;
+  text-align: left;
+  padding: 16px 18px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  font-weight: normal;
+}
+.header-login-desc:before {
+  content: " ";
+  position: absolute;
+  left: 50%;
+  margin-left: -4px;
+  top: -8px;
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid #fff;
+}
+.header-login-desc .login-desc-title {
+  font-weight: 500;
+  color: #333333;
+  line-height: 20px;
+  display: block;
+}
+.header-login-desc .login-desc-list {
+  margin-top: 4px;
+}
+.header-login-desc .login-desc-list li {
+  margin: 8px 0 0 0;
+  display: block;
+  font-size: 13px;
+  color: #333333;
+  text-align: left;
+  height: 26px;
+  line-height: 26px;
+}
+.header-login-desc .login-desc-list .login-desc-icon {
+  display: inline-block;
+  height: 26px;
+  width: 26px;
+  margin-right: 8px;
+  vertical-align: middle;
+  background: url(https://img.bosszhipin.com/static/file/2022/7rf2cut4bc1669274264900.png)
+    0 0 / 26px auto no-repeat;
+}
+.header-login-desc .login-desc-list .login-desc-icon.desc-icon-chat {
+  background-position: 0 0;
+}
+.header-login-desc .login-desc-list .login-desc-icon.desc-icon-match {
+  background-position: 0 -26px;
+}
+.header-login-desc .login-desc-list .login-desc-icon.desc-icon-info {
+  background-position: 0 -52px;
+}
+.header-resume-new .header-resume-tip {
+  z-index: 2;
+  display: none;
+}
+.header-resume-new a:hover .header-resume-tip {
+  display: none;
+}
+.header-nav-group {
+  margin: 0 5px;
+  float: none;
+}
+.header-nav-group li {
+  margin: 0;
+  position: relative;
+}
+.header-nav-group .header-nav-dot {
+  display: inline-block;
+  width: 2px;
+  height: 2px;
+  border-radius: 100%;
+  background: #fff;
+  vertical-align: middle;
+}
+.user-nav .header-login-btn {
+  vertical-align: middle;
+}
+.user-nav .nav-resume-tools {
+  display: inline-block;
+  vertical-align: middle;
+}
+.user-nav .nav-resume-tools > a {
+  display: inline-block;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 20px;
+  height: auto;
+  padding: 3px 7px;
+  vertical-align: middle;
+  border-radius: 4px;
+  margin-right: 8px;
+  border: 1px solid transparent;
+}
+.user-nav .nav-resume-tools > a:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+}
+.user-nav .nav-resume-tools:hover .nav-resume-box {
+  display: block;
+}
+.user-nav .nav-resume-box {
+  display: none;
+  position: absolute;
+  top: 49px;
+  right: 0;
+  z-index: 1;
+  padding: 4px;
+  background: #ffffff;
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  border: 1px solid #ededed;
+}
+.user-nav .nav-resume-box ul {
+  overflow: hidden;
+}
+.user-nav .nav-resume-box li {
+  display: block;
+  float: left;
+  text-align: center;
+  width: 120px;
+  margin: 4px;
+  border-radius: 8px;
+}
+.user-nav .nav-resume-box li a {
+  border: 1px solid transparent;
+  transition: all 0.2s linear;
+  border-radius: 8px;
+}
+.user-nav .nav-resume-box li:hover a {
+  border: 1px solid transparent;
+  border: 1px solid rgba(0, 190, 189, 0.5);
+}
+.user-nav .nav-resume-box li:hover span {
+  color: #00a6a7;
+}
+.user-nav .header-resume-new + .nav-resume-box .resume-box-update {
+  display: block;
+}
+.user-nav .nav-resume-box .resume-box-update {
+  display: none;
+}
+.user-nav .nav-resume-box li.resume-box-boss {
+  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
+}
+.user-nav .nav-resume-box li.resume-box-geek {
+  background: linear-gradient(180deg, #ffe4c2 0%, rgba(255, 255, 255, 0) 100%);
+}
+.user-nav .nav-resume-box li.resume-box-geek a:before {
+  background-position: 0 -60px;
+}
+.user-nav .nav-resume-box li.resume-box-upload a:before {
+  background-position: 0 -120px;
+}
+.user-nav .nav-resume-box li.resume-box-update {
+  position: relative;
+  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
+}
+.user-nav .nav-resume-box li.resume-box-update:after {
+  content: "解析成功";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  font-size: 12px;
+  background: rgba(0, 166, 167, 0.1);
+  display: inline-block;
+  padding: 2px 4px;
+  line-height: 16px;
+  background: #00bebd;
+  border-radius: 0px 8px 0px 8px;
+  color: #fff;
+}
+.user-nav .nav-resume-box li.resume-box-update a:before {
+  background-position: 0 -180px;
+}
+.user-nav .nav-resume-box li.resume-box-resume {
+  background: linear-gradient(180deg, #a6ffe7 0%, rgba(255, 255, 255, 0) 100%);
+}
+.user-nav .nav-resume-box li.resume-box-resume a:before {
+  background-position: 0 -240px;
+}
+.user-nav .nav-resume-box li.resume-box-upload {
+  background: linear-gradient(180deg, #a4e5ff 0%, rgba(255, 255, 255, 0) 100%);
+}
+.user-nav .nav-resume-box li a {
+  display: block;
+  padding: 20px 0 10px;
+}
+.user-nav .nav-resume-box li a:before {
+  content: " ";
+  display: block;
+  margin: 0 auto;
+  width: 60px;
+  height: 60px;
+  background: url(https://img.bosszhipin.com/static/file/2023/d1mkjebr121695198610640.png)
+    0 0 / 60px auto no-repeat;
+}
+.user-nav .nav-resume-box li span {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #222222;
+  line-height: 20px;
+  margin-top: 12px;
+  transition: all 0.2s linear;
+}
+.user-nav .nav-resume-box li p {
+  font-size: 12px;
+  color: #999999;
+  line-height: 17px;
+  margin-top: 4px;
+}
+ader-img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.v-btn {
+  text-transform: none;
+}
+.banner {
+  z-index: var(--zIndex-nav) !important;
+  color: #fff;
+  .left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+.hover:hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.03);
+}
+.innerBox {
+  position: relative;
+  width: 1184px;
+  max-width: 1184px;
+  margin: 0 auto;
+  align-items: center;
+  // &::before {
+  //   content: "";
+  //   height: 49px;
+  //   width: 726px;
+  //   position: absolute;
+  //   display: block;
+  //   left: 0 196px;
+  //   top: 0;
+  //   z-index: -1;
+  // }
+}
+.nav-logo {
+  float: left;
+}
+.nav-city {
+  float: left;
+  position: relative;
+  cursor: pointer;
+  height: 49px;
+  line-height: 49px;
+  color: #fff;
+  margin-left: 50px;
+}
+.nav-city-selected {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 84px;
+  vertical-align: middle;
+}
+.switchover-city {
+  // font-size: 12px;
+  color: #fff;
+  margin-left: 10px;
+}
+.nav {
+  font-size: 0;
+  float: left;
+  margin-left: 50px;
+  height: 49px;
+  line-height: 49px;
+}
+.nav ul {
+  display: flex;
+  white-space: nowrap;
+  vertical-align: top;
+}
+.nav ul li {
+  text-align: center;
+  font-size: 14px;
+  margin: 0 5px;
+  list-style: none;
+}
+.nav li a {
+  display: block;
+  padding: 0 5px;
+  position: relative;
+  text-decoration: none;
+  color: #fff;
+}
+.user-nav {
+  position: absolute;
+  right: 0;
+  // display: inline-block;
+  height: 49px;
+  line-height: 49px;
+}
+.user-nav .nav-resume-tools > a {
+  display: inline-block;
+  font-weight: 500;
+  color: #fff;
+  line-height: 20px;
+  height: auto;
+  padding: 3px 7px;
+  vertical-align: middle;
+  border-radius: 4px;
+  margin-right: 8px;
+  border: 1px solid transparent;
+}
+.user-nav .btns .btn-outline {
+  border-radius: 8px;
+  text-align: center;
+  font-size: 14px;
+  height: 26px;
+  line-height: 26px;
+  min-width: 0;
+  padding: 0 11px;
+  margin-left: 14px;
+  background-color: transparent;
+}
+.user-nav .btn {
+  display: inline-block;
+  box-sizing: content-box;
+  border: 1px solid #fff;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+.user-nav a {
+  text-decoration: none;
+}

src/views/Home/components/personal.vue

@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <div>个人用户首页</div>
-    <v-btn color="primary" class="white--text mt-2" min-width="298" @click="changeRole">切换为企业用户</v-btn>
-    <!-- 加入公司/新建公司 -->
-    <Dialog :visible="show" :footer="true" title="企业注册" widthType="1">
-      <enterpriseRegister ref="enterpriseRegisterRef"></enterpriseRegister>
-    </Dialog>
-  </div>
-</template>
-<script setup>
-import Dialog from '@/components/CtDialog'
-import enterpriseRegister from '@/views/enterprise/components/register.vue'
-import { ref } from 'vue';
-defineOptions({ name:'personal-index'})
-import { useRouter } from 'vue-router'
-const router = useRouter()
-
-const userType = ref(1) // 0企业用户、1个人用户
-const show = ref(false)
-const changeRole = () => {
-  if (userType.value) {
-    show.value = true
-  } else {
-    router.push({ path: '/' })
-  }
-}
-</script>
-<style lang="scss" scoped>
-
-</style>

src/views/Home/index.vue

@@ -7,8 +7,8 @@
 <script setup>
 defineOptions({ name:'home-index'})
 import { ref } from 'vue';
-import enterprise from './components/enterprise.vue'
-import personal from './components/personal.vue'
+import enterprise from './enterprise/index.vue'
+import personal from './personal/index.vue'
 const type = ref(0)
 </script>
 <style lang="scss" scoped>

src/views/Home/personal/components/navBar.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div
+      class="banner"
+      density="compact"
+      style="padding-left: 0px;background-color: #00897B;height: 50px;"
+    >
+      <div class="innerBox">
+        <div class="nav-logo">
+          <v-img src="../../../../assets/logo.png"  aspect-ratio="16/9" cover :width="90"></v-img>
+        </div>
+        <div class="nav-city">
+          <p class="nav-city-box">
+            <v-icon color="#fff">mdi-map-marker</v-icon>
+            <span class="nav-city-selected">广州</span>
+            <span class="switchover-city nav-city-selected">[切换城市]</span>
+          </p>
+        </div>
+        <div class="nav">
+          <ul>
+            <li v-for="k in list" :key="k.text" class="white--text mt-1">
+              <a href="">{{ k.text }}</a>
+            </li>
+          </ul>
+        </div>
+        <div class="user-nav white--text">
+          <!-- <div class="btns">
+            <span class="nav-resume-tools">
+              <a href="" class="link-sign-resume">我要找工作</a>
+              <a href="" class="link-scan">我要招聘</a>
+              <div class="nav-resume-box"></div>
+            </span>
+            <v-btn rounded color="#fff" size="small">登录</v-btn>
+          </div> -->
+        </div>
+        <div class="d-flex user-nav">
+          <span style="cursor: pointer;">消息</span>
+          <v-menu open-on-hover>
+            <template v-slot:activator="{ props }">
+              <div class="d-flex ml-5 align-center" v-bind="props">
+                <v-avatar>
+                  <v-img alt="John" src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
+                </v-avatar>
+                <div class="ml-2">游客</div>
+              </div>
+            </template>
+
+            <v-list>
+              <v-list-item v-for="(item, index) in items" :key="index" @click="item.change">
+                <v-list-item-title>{{ item.title }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+      </div>
+    </div>
+    <Dialog :visible="show" :footer="true" title="企业注册" widthType="1" @close="show = false">
+      <enterpriseRegister ref="enterpriseRegisterRef"></enterpriseRegister>
+    </Dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+defineOptions({ name: 'personal-navbar' })
+import Dialog from '@/components/CtDialog'
+import enterpriseRegister from '@/views/enterprise/components/register.vue'
+defineProps({
+  sticky: {
+    type: Boolean,
+    default: true
+  }
+})
+const list = ref([
+  { text: '首页', path: '' },
+  { text: '职位', path: '' },
+  { text: '公司', path: '' }
+])
+
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const userType = ref(1) // 0企业用户、1个人用户
+const show = ref(false)
+const changeRole = () => {
+  if (userType.value) {
+    show.value = true
+  } else {
+    router.push({ path: '/' })
+  }
+}
+
+const items = ref([
+  // { title: '个人中心', change: changeRole },
+  // { title: '消息通知', change: changeRole },
+  { title: '切换为招聘者', change: changeRole },
+  { title: '退出登录', change: changeRole }
+])
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/personal/navBar.scss'
+</style>

src/views/Home/personal/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <NavBar></NavBar>
+    <div>个人用户首页</div>
+  </div>
+</template>
+<script setup>
+import NavBar from './components/navBar.vue'
+defineOptions({ name:'personal-index'})
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/login/index.vue

@@ -44,11 +44,12 @@
         </div>
       </div>
     </div>
+    <v-snackbar v-model="tips.show" :color="tips.color" :timeout="1500" location="top">{{ tips.text }}</v-snackbar>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import passwordFrom from './components/passwordPage.vue'
 import phoneFrom from './components/phonePage.vue'
 import qrCode from './components/qrCode.vue'
@@ -72,12 +73,20 @@ const phoneRef = ref()
 const passRef = ref()
 const loginLoading = ref(false)
 const userStore = userLocaleStore()
+const tips = reactive({
+  show: false,
+  color: '',
+  text: ''
+})
 const handleLogin = async () => {
   const { valid } = await phoneRef.value.phoneForm.validate()
   if (!valid) return
   loginLoading.value = true
   try {
     await userStore.handleLogin(phoneRef.value.loginData)
+    tips.color = 'success'
+    tips.text = '登录成功'
+    tips.show = true
     router.push({ path: '/home' })
   } catch (error) {
     console.log(error, 'error-login')