diff --git a/src/api/user/user.js b/src/api/user/user.js
index c67d56e..02399b7 100644
--- a/src/api/user/user.js
+++ b/src/api/user/user.js
@@ -41,8 +41,8 @@ export const userIdenService = (id) => {
   return request.post('/user/personal/info?id=' + id)
 }
 //修改身份信息
-export const userIdenChangeService = (jsonData) => {
-  return request.post('', jsonData, {
+export const userIdenChangeService = (dataToSend) => {
+  return request.post('/user/update/PersonalInfo', dataToSend, {
     headers: { 'Content-Type': 'application/json;charset=UTF-8' },
   })
 }
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 9ff67ca..f4901ac 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -5,7 +5,7 @@ import { reqLogin, getUserInfo } from '@/api/user/index'
 // 引入登录参数类型
 import { loginType, loginResponseType } from '@/api/user/types'
 // 引入ElementPlus通知插件
-import { ElNotification } from 'element-plus'
+import { ElMessage, ElNotification } from 'element-plus'
 import { getTime } from '@/utils/time'
 import { LoginStoreType } from '../modules/type/types'
 // 引入设置token的方法
@@ -15,7 +15,6 @@ import { constantRoute } from '@/router/routers'
 import permissionStore from './permission'
 // 引入路由
 import {
-  userRegisterService,
   userLoginService,
   userGetInfoService,
   userPhoneLoginService,
@@ -37,10 +36,15 @@ const useUserStore = defineStore(
       // 登录事件
       async userLogin(data: loginType) {
         console.log(data, 'pinia')
-        const res: loginResponseType = await userLoginService(data)
-        this.token = res.data.token as string
-        console.log(res, '传回的值1')
+        const res: loginResponseType = await userLoginService(data).catch(
+          (error) => {
+            ElMessage.error(error.response.data.message)
+            console.log(error, 'error')
+          },
+        )
+
         if (res.code === 200) {
+          this.token = res.data.token as string
           SET_TKOEN('TOKEN', this.token)
           // localStorage.setItem('TOKEN', this.token)
           ElNotification({
@@ -51,19 +55,20 @@ const useUserStore = defineStore(
           return 'ok'
         } else {
           console.log(res, '33333')
-          ElNotification({
-            // type: 'error',
-            message: res.message,
-          })
+          // ElNotification({
+          //   // type: 'error',
+          //   message: res.message,
+          // })
+          ElMessage.error(res.message)
           return Promise.reject(new Error(res.data.message))
         }
       },
       //手机号登录
       async userPhoneLogin(data: loginType) {
         const res: loginResponseType = await userPhoneLoginService(data)
-        this.token = res.data.token as string //接收返回的token
         console.log(res, 11111)
         if (res.code === 200) {
+          this.token = res.data.token as string //接收返回的token
           SET_TKOEN('TOKEN', this.token)
           // localStorage.setItem('TOKEN', this.token)
           ElNotification({
@@ -75,7 +80,7 @@ const useUserStore = defineStore(
         } else {
           ElNotification({
             type: 'error',
-            message: res.data.message,
+            message: res.message,
           })
           return Promise.reject(new Error(res.data.message))
         }
diff --git a/src/views/course/CourseObjectives.vue b/src/views/course/CourseObjectives.vue
index 87b0412..2a660ac 100644
--- a/src/views/course/CourseObjectives.vue
+++ b/src/views/course/CourseObjectives.vue
@@ -1,9 +1,121 @@
-<template>
-  <div>课程目标</div>
-</template>
-
 <script lang="ts" setup>
 import {} from 'vue'
+// import allclass from '@/assets/images/allclass.png'
 </script>
 
-<style lang="scss" scoped></style>
+<template>
+  <el-row :gutter="20">
+    <el-col :span="8">
+      <div class="grid-content main">
+        <div class="title"><p>|&nbsp;&nbsp;课程总目标</p></div>
+        <div class="ac_content">
+          <div class="ma_content">
+            通过本课程的学习，使学生进一步了解计算机的工作原理，更好地理解和应用计算机，掌
+            握用计算机处理问题的方法和技能:培养学生分析问题、解决问题的能力以及编制程序实现算
+            法的能力。
+          </div>
+        </div>
+      </div>
+
+      <div class="grid-content picture">
+        <div class="title"><p>|&nbsp;&nbsp;课程总目标</p></div>
+        <div class="ac_pic"></div>
+      </div>
+    </el-col>
+    <el-col :span="16">
+      <div class="grid-content object">
+        <div class="title"><p>|&nbsp;&nbsp;课程分目标</p></div>
+        <div class="slice"></div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<style>
+.el-row {
+  margin-bottom: 20px;
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+}
+.ac_content {
+  background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%);
+  border-radius: 29px 29px 29px 29px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 206px;
+}
+.ma_content {
+  height: 160px;
+  font-family: Inter, Inter;
+  font-weight: 400;
+  font-size: 16px;
+  color: #333333;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  margin-left: 33px;
+  margin-right: 33px;
+}
+.ac_pic {
+  height: 488px;
+  background: linear-gradient(180deg, #ffe9c7 0%, #ffffff 100%);
+  border-radius: 29px 29px 29px 29px;
+}
+img {
+  order: -1;
+}
+.object {
+  height: 857px;
+  background: linear-gradient(180deg, #4984ff 0%, #74deff 100%);
+  border-radius: 29px 29px 29px 29px;
+}
+.slice {
+  height: 791px;
+  background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%);
+  border-radius: 29px 29px 29px 29px;
+}
+.picture {
+  height: 553px;
+  margin-top: 28px;
+  border-radius: 29px 29px 29px 29px;
+  background-image: linear-gradient(to right, #f9e397, #ffa674);
+}
+.main {
+  height: 272px;
+  border-radius: 29px 29px 29px 29px;
+  background-image: linear-gradient(to right, #4984ff, #74deff);
+  display: flex;
+  justify-content: end;
+}
+.title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+p {
+  height: 29px;
+  font-family: Inter, Inter;
+  font-weight: bold;
+  margin-left: 34px;
+  font-size: 24px;
+  color: #ffffff;
+  line-height: 28px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+</style>
diff --git a/src/views/group/index.vue b/src/views/group/index.vue
index 4fc55f6..6978e96 100644
--- a/src/views/group/index.vue
+++ b/src/views/group/index.vue
@@ -1,181 +1,6 @@
+<script setup></script>
 <template>
-  <div class="container">
-    <div class="main">
-      <div class="head">
-        <img src="../src/assets/static/image/demo.png" alt="" />
-        <div class="title">智慧物业管理平台</div>
-      </div>
-      <!-- 登录内容区域 -->
-      <div class="login">
-        <div class="login-options">
-          <div
-            class="login-item"
-            v-for="(item, index) in loginitems"
-            :key="item.id"
-            :class="current === index ? 'move' : ''"
-            @click="change(index)"
-          >
-            {{ item.text }}
-          </div>
-        </div>
-        <div class="con">
-          <div class="con-item" v-if="current == 0">
-            <div class="input-items">
-              <input
-                type="text"
-                v-model="phonevalue"
-                placeholder="输入手机号"
-              />
-            </div>
-            <div class="input-items">
-              <input type="text" v-model="codevalue" placeholder="输入验证码" />
-              <div class="getcode" @click="getcode">
-                <p v-if="isok == 1">获取验证码</p>
-                <p v-else>{{ countTime }}</p>
-              </div>
-            </div>
-            <div class="login-btn" @click="login">登录</div>
-          </div>
-          <div class="con-item" v-if="current == 1">
-            <div class="input-items">
-              <input
-                type="text"
-                v-model="phonevalue"
-                placeholder="输入手机号"
-              />
-            </div>
-            <el-input
-              v-model="passwordinput"
-              style="height: 41px; border: 0; outline: none"
-              type="password"
-              placeholder="输入密码"
-              show-password
-            />
-            <div class="reset" @click="gotoforgetPassword">重置密码></div>
-            <div class="login-btn" @click="login">登录</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <div></div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      imageUrl: '',
-    }
-  },
-  methods: {
-    previewImage(event) {
-      const input = event.target
-      const reader = new FileReader()
-      reader.onload = () => {
-        this.imageUrl = reader.result
-      }
-      reader.readAsDataURL(input.files[0])
-    },
-  },
-}
-</script>
-
-<style>
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
-.main {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-.head {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-.head .title {
-  font-size: 22px;
-  font-weight: 600;
-}
-.head img {
-  width: 300px;
-  height: 200px;
-}
-.move {
-  color: #f5b90f;
-  padding-bottom: 5px;
-  font-weight: 600;
-  border-bottom: 2px solid #f5b90f;
-}
-.login-options {
-  margin: 20px 0 10px 0;
-  display: flex;
-  align-items: center;
-}
-.login {
-  width: 300px;
-  display: flex;
-  flex-direction: column;
-}
-.login-item {
-  box-sizing: border-box;
-  padding-bottom: 5px;
-  margin-right: 10px;
-}
-.input-items {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  height: 40px;
-  margin: 10px 0;
-}
-input {
-  padding-left: 10px;
-  outline: none;
-  padding-right: 10px;
-  border: 0;
-  font-size: 14px;
-}
-.getcode {
-  margin-right: 5px;
-}
-.con-item {
-  position: relative;
-}
-.getcode p {
-  width: 80px;
-  height: 25px;
-  text-align: center;
-  background-color: #f5b90f;
-  color: #fff;
-  font-size: 12px;
-  line-height: 25px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-.login-btn {
-  width: 100%;
-  height: 30px;
-  border-radius: 5px;
-  text-align: center;
-  line-height: 30px;
-  color: #fff;
-  margin: 45px 0;
-  background-color: #f5b90f;
-  cursor: pointer;
-}
-.reset {
-  position: absolute;
-  right: 0;
-  color: #f5b90f;
-  font-size: 12px;
-  margin: 10px 0;
-}
-</style>
+<style></style>
diff --git a/src/views/home/components/Class.vue b/src/views/home/components/Class1.vue
similarity index 100%
rename from src/views/home/components/Class.vue
rename to src/views/home/components/Class1.vue
diff --git a/src/views/home/components/Class2.vue b/src/views/home/components/Class2.vue
new file mode 100644
index 0000000..62a7f03
--- /dev/null
+++ b/src/views/home/components/Class2.vue
@@ -0,0 +1,108 @@
+<script setup>
+import conheader from '@/views/home/components/ConHeader.vue'
+const courses = [
+  {
+    name: 'Vue.js Basics',
+    image: 'vuejs-basics.jpg',
+    hours: 20,
+  },
+  {
+    name: 'Reac',
+    image: 'react-fundamentals.jpg',
+    hours: 25,
+  },
+  {
+    name: 'Reacts',
+    image: 'react-fundamentals.jpg',
+    hours: 25,
+  },
+  {
+    name: 'React Fund',
+    image: 'react-fundamentals.jpg',
+    hours: 25,
+  },
+]
+</script>
+<template>
+  <div class="info_container" style="width: 214px; height: 326px">
+    <conheader title="我的科目"></conheader>
+    <div class="info_content" style="width: 214px; height: 264px">
+      <div class="course-list">
+        <div
+          v-for="(course, index) in courses"
+          :key="index"
+          class="course-item"
+        >
+          <img :src="course.image" alt="course image" class="course-image" />
+          <div class="course-info">
+            <p class="course-name">{{ course.name }}</p>
+            <p class="course-hours">{{ course.hours }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.class {
+  background: #ffffff;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 6px 6px 6px 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.info_container {
+  display: flex;
+  justify-content: space-between;
+}
+.info_content {
+  display: flex;
+  justify-content: space-between;
+}
+.course-list {
+  display: flex;
+  flex-direction: column;
+  width: 132px;
+  height: 48px;
+}
+.course-item {
+  display: flex;
+  margin: 10px;
+}
+
+.course-image {
+  width: 48px;
+  height: 48px;
+  margin-right: 16px;
+}
+
+.course-info {
+  display: flex;
+  flex-direction: column;
+  width: 75px;
+  height: 46px;
+}
+
+.course-name {
+  font-family: Inter, Inter;
+  font-weight: normal;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.course-hours {
+  font-family: Inter, Inter;
+  font-weight: 400;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.4);
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+</style>
diff --git a/src/views/home/components/Info.vue b/src/views/home/components/Info.vue
index 5f2de25..e021807 100644
--- a/src/views/home/components/Info.vue
+++ b/src/views/home/components/Info.vue
@@ -1,26 +1,16 @@
 <script setup>
 import conheader from '@/views/home/components/ConHeader.vue'
-import { onMounted, ref } from 'vue'
-// import { getTeaUserService } from '@/api/user/userinfo'
-// const userList = ref([])
-// const getUserList = async () => {
-//   const res = await getTeaUserService()
-//   userList.value = res.data
-// }
-// getUserList()
-import { toRaw } from 'vue'
+import { onMounted, ref, computed } from 'vue'
 import { userIdenService, userIdenChangeService } from '@/api/user/user.js'
 import { Edit } from '@element-plus/icons-vue'
-
+import { ElMessage } from 'element-plus'
 const props = defineProps({
   data: {
     type: Object,
   },
 })
 const id = props.data.id
-console.log(id.value, 'id')
 const formModel = ref()
-// console.log(formModel.value, 'value')
 const loading = ref()
 //抽屉true
 const editDialogVisible = ref(false)
@@ -28,12 +18,23 @@ const editForm = ref({
   name: '',
   content: '',
 })
-const editRowIndex = ref(null)
+const readonlyField = computed(() => editForm.value.name)
+const editRowIndex = ref()
 const openEditDialog = (row) => {
   editForm.value = { ...row }
   editRowIndex.value = formModel.value.indexOf(row)
   editDialogVisible.value = true
 }
+//确认时将表单数据回显
+const saveEdit = () => {
+  console.log(editRowIndex.value, 'rowww')
+  const index = editRowIndex.value
+  if (index !== -1) {
+    formModel.value[index] = { ...editForm.value }
+  }
+  console.log(editRowIndex.value, 'edit')
+  editDialogVisible.value = false
+}
 //取消
 const cancelEdit = () => {
   editDialogVisible.value = false
@@ -43,52 +44,103 @@ const cancelEdit = () => {
     content: '',
   }
 }
-//确认时将表单数据回显
-const saveEdit = () => {
-  if (editRowIndex.value !== null) {
-    //将dialog中的内容替换掉drawer中的内容
-    console.log(editRowIndex.value)
-    formModel.value.splice(editRowIndex, 1, { ...editForm })
-    // editRowIndex.value = null
-    console.log(editForm.value, 'edit')
-    console.log(editForm.value, 'formModel')
-  }
-  editDialogVisible.value = false
-}
+const identInfo = ref()
 //获取身份信息
-const data1 = ref()
 const getInfo = async (id) => {
   const res = await userIdenService(id)
-  // formModel.value = res.data
-  data1.value = toRaw(res.data)
-  // console.log(data1.value.name, 'pin')
+  identInfo.value = res
+  return res
 }
+console.log()
 onMounted(() => {
+  // getInfo(id)
   getInfo(id)
+    .then((res) => {
+      // 在这里可以访问在 getData 函数中返回的结果
+      console.log(res.data, '000000')
+      identInfo.value = res.data
+      // 假数据
+      if (res.data.roleId === 1) {
+        formModel.value = [
+          { par: 'name', name: '姓名', content: res.data.name },
+          { par: 'sex', name: '性别', content: res.data.sex },
+          { par: 'nationality', name: '民族', content: res.data.nationality },
+          { par: 'profession', name: '专业', content: res.data.profession },
+          { par: 'education', name: '学历', content: res.data.education },
+          { par: 'degree', name: '学位', content: res.data.degree },
+          {
+            par: 'professionalTitle',
+            name: '职称',
+            content: res.data.professionalTitle,
+          },
+          {
+            par: 'emergencyContact',
+            name: '手机号',
+            content: res.data.emergencyContact,
+          },
+          {
+            par: 'joinWorkTime',
+            name: '参加工作时间',
+            content: res.data.joinWorkTime,
+          },
+          {
+            par: 'politicalStatus',
+            name: '政治面貌',
+            content: res.data.politicalStatus,
+          },
+        ]
+      } else if (res.data.roleId === 2) {
+        formModel.value = [
+          { par: 'name', name: '姓名', content: res.data.name },
+          { par: 'sex', name: '性别', content: res.data.sex },
+          { par: 'nationality', name: '民族', content: res.data.nationality },
+          { par: 'number', name: '学号', content: res.data.number },
+          { par: 'birthday', name: '生日', content: res.data.birthday },
+          { par: 'phone', name: '手机号', content: res.data.phone },
+          { par: 'faculty', name: '院系', content: res.data.faculty },
+          { par: 'major', name: '专业', content: res.data.major },
+          { par: 'year_age', name: '入学年份', content: res.data.year_age },
+          { par: 'class_name', name: '班级', content: res.data.class_name },
+        ]
+      }
+      // else {
+      //   formModel.value = [
+      //     { name: '姓名', content: res.data.name },
+      //     { name: '性别', content: res.data.id },
+      //     { name: '学号', content: 9.9 },
+      //     { name: '小米电脑', content: 9.9 },
+      //     { name: '小米电脑', content: 9.9 },
+      //     { name: '小米电脑', content: 9.9 },
+      //     { name: '小米电脑', content: 9.9 },
+      //     { name: '小米电脑', content: 9.9 },
+      //     { name: '小米电脑', content: 9.9 },
+      //   ]
+      // }
+    })
+    .catch((error) => {
+      console.error(error)
+    })
 })
-console.log(toRaw(data1), '2222222222')
-//假数据
-formModel.value = [
-  { name: '名字', content: 9.9 },
-  { name: 'iPhone', content: 9.9 },
-  { name: '小米电脑', content: 9.9 },
-  { name: '小米电脑', content: 9.9 },
-  { name: '小米电脑', content: 9.9 },
-  { name: '小米电脑', content: 9.9 },
-  { name: '小米电脑', content: 9.9 },
-  { name: '小米电脑', content: 9.9 },
-  { name: '小米电脑', content: 9.9 },
-]
 // 编辑1
-// import type { DrawerProps } from 'element-plus'
 const drawer2 = ref(false)
 const direction = ref('rtl')
 function cancelClick() {
   drawer2.value = false
 }
-function confirmClick() {
+const data1 = ref()
+const confirmClick = () => {
   drawer2.value = false
-  userIdenChangeService()
+  data1.value = formModel.value
+  const values = {}
+  data1.value.map((item) => (values[item.par] = item.content))
+  const dataToSend = {
+    ...values,
+    roleId: identInfo.value.roleId,
+    id: identInfo.value.id,
+  }
+  userIdenChangeService(dataToSend).then(() => {
+    ElMessage.success('修改成功')
+  })
 }
 </script>
 <template>
@@ -105,14 +157,14 @@ function confirmClick() {
                 <el-table-column prop="name" label="标题"></el-table-column>
                 <el-table-column prop="content" label="内容"></el-table-column>
                 <el-table-column label="操作">
-                  <template #default="{ row, $index }">
+                  <template #default="{ row }">
                     <el-button
                       type="primary"
                       class="el-icon-edit"
                       :icon="Edit"
                       plain
                       circle
-                      @click="openEditDialog(row, $index)"
+                      @click="openEditDialog(row)"
                     ></el-button>
                   </template>
                 </el-table-column>
@@ -130,6 +182,7 @@ function confirmClick() {
           v-model="editDialogVisible"
           title="详细信息"
           style="width: 800px; text-align: center"
+          :readonly-field="readonlyField"
         >
           <el-form :model="editForm" label-width="80px">
             <el-form-item label="名称" prop="name">
@@ -139,7 +192,7 @@ function confirmClick() {
               <el-input v-model="editForm.content"></el-input>
             </el-form-item>
           </el-form>
-          <template v-slot:footer>
+          <template #footer>
             <div>
               <el-button @click="cancelEdit">取消</el-button>
               <el-button type="primary" @click="saveEdit">保存</el-button>
diff --git a/src/views/home/components/Status.vue b/src/views/home/components/Status.vue
index bde7a7b..aee3a41 100644
--- a/src/views/home/components/Status.vue
+++ b/src/views/home/components/Status.vue
@@ -2,7 +2,7 @@
 import add from '@/assets/images/add.png'
 // import { Plus } from '@element-plus/icons-vue'
 import { userChangeService } from '@/api/user/user.js'
-import { client, tool } from '@/utils/img'
+import { tool } from '@/utils/img'
 const dialogFormVisible = ref(false)
 import { ref } from 'vue'
 const props = defineProps({
@@ -55,25 +55,16 @@ const openFileInput = () => {
         imageUrl.value = reader.result
       }
       reader.readAsDataURL(file)
+      changeInfo()
     }
   }
   document.body.appendChild(input)
   input.click()
   document.body.removeChild(input)
 }
-// const upload = async (option) => {
-//   console.log(option, 88888)
-//   const res = await tool.oss.upload(option.file) // console.log(res.url)
-//   imageUrl.value = res.url
-//   // imgUrl.value = formModel.value.img
-//   console.log(imageUrl.value, 1111155)
-// }
 const upload = async (option) => {
-  // console.log(option)
   const res = await tool.oss.upload(option.file)
-  // console.log(res.url)
   imageUrl.value = res.url
-  //  imgUrl.value = formModel.value.img
   console.log(imageUrl.value)
 }
 //修改用户信息
@@ -106,22 +97,16 @@ const changeInfo = async () => {
         @click="dialogFormVisible = true"
       >
         <div class="name">{{ props.data.username }}</div>
-        <div class="iden">身份:某某专业教师</div>
       </div>
     </div>
   </div>
   <el-dialog
     v-model="dialogFormVisible"
     title="登录信息"
-    style="
-      width: 800px;
-      text-align: center;
-      /* display: flex;
-      justify-content: center; */
-    "
+    style="width: 800px; text-align: center"
   >
     <el-form :model="form" style="" :data="form" :rules="rules">
-      <el-form-item label="姓名" :label-width="formLabelWidth">
+      <el-form-item label="用户名" :label-width="formLabelWidth">
         <el-input v-model="form.username" autocomplete="off" />
       </el-form-item>
 
diff --git a/src/views/home/components/Student.vue b/src/views/home/components/Student1.vue
similarity index 100%
rename from src/views/home/components/Student.vue
rename to src/views/home/components/Student1.vue
diff --git a/src/views/home/components/Student2.vue b/src/views/home/components/Student2.vue
new file mode 100644
index 0000000..716789c
--- /dev/null
+++ b/src/views/home/components/Student2.vue
@@ -0,0 +1,97 @@
+<script setup>
+import conheader from '@/views/home/components/ConHeader.vue'
+import { ref } from 'vue'
+const name = ['Aa', 'Bb', 'Cc', 'Dd']
+const getRandomColor = () => {
+  // 生成随机的颜色值
+  return '#' + Math.floor(Math.random() * 16777215).toString(16)
+}
+const drawer2 = ref(false)
+const direction = ref('rtl')
+function cancelClick() {
+  drawer2.value = false
+}
+function confirmClick() {
+  drawer2.value = false
+}
+</script>
+<template>
+  <div class="info_container" style="width: 222px; height: 174px">
+    <conheader title="已分组别" v-model="drawer2">
+      <div>编辑</div>
+      <template #drawer>
+        <el-drawer v-model="drawer2" :direction="direction">
+          <template #header>
+            <h4>78</h4>
+          </template>
+          <template #default>
+            <div></div>
+          </template>
+          <template #footer>
+            <div style="flex: auto">
+              <el-button @click="cancelClick">cancel</el-button>
+              <el-button type="primary" @click="confirmClick">
+                confirm
+              </el-button>
+            </div>
+          </template>
+        </el-drawer>
+      </template>
+    </conheader>
+    <div class="info_content" style="width: 194px; height: 112px">
+      <div
+        v-for="(item, index) in name"
+        :key="index"
+        class="stu_color"
+        :style="{ backgroundColor: getRandomColor() }"
+      >
+        {{ item }}
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.stu {
+  background: #ffffff;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 6px 6px 6px 6px;
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+}
+.info_container {
+  display: flex;
+  justify-content: space-between;
+}
+.info_content {
+  width: 194px;
+  height: 112px;
+  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px; /* 设置元素之间的间隔 */
+  grid-row-gap: 16px;
+}
+.stu_color {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 49px;
+  height: 48px;
+  border-radius: 40px 40px 40px 40px;
+  font-family: Inter, Inter;
+  font-weight: normal;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  transition: background-color 0.3s;
+}
+.stu_color:hover {
+  background-color: #f2f2f2; /* 鼠标移入时的背景色变化 */
+  filter: brightness(1.1);
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f892985..8f53111 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -3,8 +3,10 @@ import status from '@/views/home/components/Status.vue'
 import welcome from './components/Welcome.vue'
 import Info from './components/Info.vue'
 import echarts from './components/Echarts.vue'
-import Class from './components/Class.vue'
-import Student from './components/Student.vue'
+import Class1 from './components/Class1.vue'
+import Student1 from './components/Student1.vue'
+import Class2 from './components/Class2.vue'
+import Student2 from './components/Student2.vue'
 import useUserStore from '@/store/modules/user'
 import { ref, onMounted } from 'vue'
 import { toRaw } from 'vue'
@@ -14,15 +16,29 @@ const userStore = useUserStore()
 const username = ref()
 const data = ref(null)
 const flag = ref(false)
+const role = ref(null)
+const rightVisible = ref(false)
 const getData = async () => {
-  await userStore.getUserInfo().then((response) => {
-    const res = toRaw(response.result.data)
-    username.value = res.username
-    data.value = res
-    flag.value = true
-    console.log(data.value, 333333)
-  })
+  await userStore
+    .getUserInfo()
+    .then((response) => {
+      const res = toRaw(response.result.data)
+      username.value = res.username
+      data.value = res
+      flag.value = true
+      role.value = data.value.roles[0]
+      if (role.value === '老师') {
+        rightVisible.value = true
+      } else {
+        rightVisible.value = false
+      }
+      // console.log(data.value.roles[0], 333333)
+    })
+    .catch((error) => {
+      console.log(error)
+    })
 }
+
 onMounted(() => {
   getData()
 })
@@ -40,13 +56,22 @@ onMounted(() => {
         <echarts></echarts>
       </div>
     </div>
-    <div class="right">
+    <div v-if="rightVisible" class="right">
+      <status :data="data" v-if="flag"></status>
+      <div class="class" style="width: 278px; height: 388px">
+        <Class1></Class1>
+      </div>
+      <div class="stu" style="width: 278px; height: 236px">
+        <Student1></Student1>
+      </div>
+    </div>
+    <div v-else class="right">
       <status :data="data" v-if="flag"></status>
       <div class="class" style="width: 278px; height: 388px">
-        <Class></Class>
+        <Class2></Class2>
       </div>
       <div class="stu" style="width: 278px; height: 236px">
-        <Student></Student>
+        <Student2></Student2>
       </div>
     </div>
   </div>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 42287d5..28911ae 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -20,7 +20,6 @@
           v-if="isRegister"
         >
           <h1>Hello</h1>
-          <!-- <h2>同学！</h2> -->
           <div class="taggle">
             <h2 @click="isToggle = true">账号</h2>
             <h2 @click="isToggle = false">手机号</h2>
@@ -66,14 +65,7 @@
                 :prefix-icon="Phone"
                 placeholder="请输入手机号"
                 size="large"
-                style="
-                  flex: 1;
-                  /* height: 40px;
-                  line-height: 40px;
-                  border: 1px solid #dcdfe6;
-                  width: 50%;
-                  color: #dcdfe6; */
-                "
+                style="flex: 1"
               />
             </el-form-item>
             <el-form-item prop="code" class="content">
@@ -156,8 +148,10 @@
                 :prefix-icon="Check"
                 size="large"
                 show-repassword
+                @change="checkPasswordMatch"
               ></el-input>
             </el-form-item>
+
             <el-form-item>
               <el-button
                 size="large"
@@ -168,6 +162,15 @@
                 注册
               </el-button>
             </el-form-item>
+            <el-form-item class="flex">
+              <el-link
+                type="info"
+                :underline="false"
+                @click="isRegister = true"
+              >
+                登录
+              </el-link>
+            </el-form-item>
           </div>
           <!-- 手机号注册 -->
           <div v-else>
@@ -212,7 +215,7 @@
                   size="large"
                   class="login-btn"
                   type="primary"
-                  @click="phoneSubmit"
+                  @click="phoneChange"
                 >
                   注册
                 </el-button>
@@ -229,26 +232,47 @@
                   show-password
                 ></el-input>
               </el-form-item>
-              <el-form-item class="codeVerify">
-                <el-button
-                  class="code"
-                  @click="phoneSubmit"
-                  style="
-                    margin-left: 650px;
-                    background-color: #5577ff;
-                    color: #fff;
-                  "
+              <el-form-item>
+                <div
+                  style="display: flex; justify-content: space-between; flex: 1"
                 >
-                  确认
-                </el-button>
+                  <el-button
+                    class="code"
+                    @click="phoneReturn"
+                    style="
+                      background-color: #5577ff;
+                      color: #fff;
+                      justify-content: center;
+                    "
+                  >
+                    返回
+                  </el-button>
+                </div>
+                <div style="display: flex; justify-content: end; flex: 1">
+                  <el-button
+                    class="code"
+                    @click="phoneSubmit"
+                    style="
+                      background-color: #5577ff;
+                      color: #fff;
+                      justify-content: center;
+                    "
+                  >
+                    确认
+                  </el-button>
+                </div>
               </el-form-item>
             </div>
+            <el-form-item class="flex">
+              <el-link
+                type="info"
+                :underline="false"
+                @click="isRegister = true"
+              >
+                登录
+              </el-link>
+            </el-form-item>
           </div>
-          <el-form-item class="flex">
-            <el-link type="info" :underline="false" @click="isRegister = true">
-              登录
-            </el-link>
-          </el-form-item>
         </el-form>
       </el-col>
       <el-col :span="12" :xs="0"></el-col>
@@ -334,17 +358,6 @@ const rules = {
       message: '密码长度最小六位最大十五位',
       trigger: ['change', 'blur'],
     },
-    {
-      validater: (rule, value, callback) => {
-        //判断value和password是否一致
-        if ((value = formModel.value.password)) {
-          callback(new Error('两次输入的密码不一致'))
-        } else {
-          callback()
-        }
-      },
-      trigger: ['change', 'blur'],
-    },
   ],
   phone: [
     { required: true, message: '手机号不能为空', trigger: 'blur' },
@@ -361,10 +374,6 @@ const rules = {
 //验证码倒计时--没搞定
 const countdown = ref(0)
 let timer
-const startCountdown = () => {
-  countdown.value = 60 // 设置倒计时初始值
-  timer = setInterval(updateCountdown, 1000) // 每秒更新倒计时
-}
 const updateCountdown = () => {
   if (countdown.value > 0) {
     countdown.value--
@@ -395,12 +404,23 @@ watch(isToggle, () => {
     code: '',
   }
 })
+//确认密码
+const passwordMatchError = ref('')
+const checkPasswordMatch = () => {
+  if (formModel.value.password !== formModel.value.repassword) {
+    // passwordMatchError.value = '两次输入的密码不一致'
+    ElMessage('两次输入的密码不一致')
+  } else {
+    passwordMatchError.value = ''
+  }
+}
 //账号注册表单写成json格式
 const handleSubmit = async () => {
-  try {
-    // 执行注册逻辑
-    await form.value.validate()
-    console.log('开始注册')
+  // 执行注册逻辑
+  await form.value.validate()
+  console.log('开始注册')
+  if (formModel.value.password === formModel.value.repassword) {
+    // 密码校验通过，可以进行注册操作
     const dataToSend = {
       username: formModel.value.username,
       password: formModel.value.password,
@@ -412,14 +432,18 @@ const handleSubmit = async () => {
     console.log(jsonData)
     // 发送数据到服务器或其他操作
     userRegisterService(jsonData)
-    // 注册成功后跳转到指定页面
-    ElMessage.success('注册成功')
-    //    // 切换到登录
-    isRegister.value = true
-  } catch (error) {
-    // 处理错误信息
-    // 显示错误信息给用户
-    ElMessage.error('Oops, this is a error message.')
+      .then(() => {
+        // 注册成功后跳转到指定页面
+        ElMessage.success('注册成功')
+        //    // 切换到登录
+        isRegister.value = true
+      })
+      .catch((error) => {
+        ElMessage.error(error.response.data.message)
+      })
+  } else {
+    // 密码校验不通过
+    passwordMatchError.value = '两次输入的密码不一致'
   }
 }
 // const userGetInfoService
@@ -429,89 +453,90 @@ const codeSubmit = async () => {
   await form.value.validate()
   console.log('开始发起注册验证码')
   const phoness = formModel.value.phone
-  // const jsonData = JSON.stringify(dataToSend)
-  // console.log(phoness)
-  // 发送手机号到服务器或其他操作
-  const res = userCodeRegisterService(phoness)
-  console.log(res)
-  userCodeRegisterService(phoness).then((response) => {
-    codecode.value = response.data
-    console.log(codecode.value)
-  })
+  userCodeRegisterService(phoness)
+    .then((response) => {
+      codecode.value = response.data
+      console.log(codecode.value)
+    })
+    .catch((error) => {
+      console.log(error.message, 'error')
+    })
 }
 //手机号注册
+const phoneChange = () => {
+  console.log('开始手机号注册')
+  isinfo.value = false
+}
+//注册中的返回
+const phoneReturn = () => {
+  isinfo.value = true
+}
 const phoneSubmit = async () => {
   await form.value.validate()
-  console.log('开始手机号注册')
-  try {
-    // 执行注册逻辑
-    if (formModel.value.code == codecode.value) {
-      isinfo.value = false
-      const dataToSend = {
-        phone: formModel.value.phone,
-        password: formModel.value.password,
-      }
-      const jsonData = JSON.stringify(dataToSend)
-      // 发送手机号到服务器或其他操作
-      await userPhoneRegisterService(jsonData)
-      console.log(jsonData)
-      // 注册成功后跳转到指定页面
-      isinfo.value = false
+  // 执行注册逻辑
+  if (formModel.value.code == codecode.value) {
+    isinfo.value = false
+    const dataToSend = {
+      phone: formModel.value.phone,
+      password: formModel.value.password,
     }
-  } catch (error) {
-    // 处理错误信息
-    // 显示错误信息给用户
-    ElMessage.error('注册失败返回错误信息')
+    const jsonData = JSON.stringify(dataToSend)
+    // 发送手机号到服务器或其他操作
+    userPhoneRegisterService(jsonData)
+      .then(() => {
+        // 注册成功后跳转到指定页面
+        ElMessage.success('注册成功')
+        //    // 切换到登录
+        isRegister.value = true
+      })
+      .catch((error) => {
+        ElMessage.error(error.response.data.message)
+      })
   }
 }
-
 //账号登录接口
 const login = async () => {
   // 等待校验通过
   await form.value.validate()
+  isBtnLoading.value = true
   try {
-    isBtnLoading.value = true
-    await userStore.userLogin(formModel.value)
-    isBtnLoading.value = false
-    $router.push('/home')
-    if ($route.query.redirect) {
-      $router.push($route.query.redirect as string)
-    } else {
-      $router.push('/')
-    }
+    await userStore.userLogin(formModel.value).then(() => {
+      isBtnLoading.value = false
+      $router.push('/home')
+      if ($route.query.redirect) {
+        $router.push($route.query.redirect as string)
+      } else {
+        $router.push('/')
+      }
+    })
   } catch (error) {
     isBtnLoading.value = false
-    console.log(error, '111111')
   }
 }
 
 //手机号登录
-// const log = ref()
 const phoneLogin = async () => {
   // 等待校验通过
   await form.value.validate()
-  try {
-    isBtnLoading.value = true
-    if (formModel.value.code == codecode.value) {
-      const phones = formModel.value.phone
-      // console.log(dataToSend)
-      userStore.userPhoneLogin(phones)
-      // console.log(res)
-      // .then((response) => {
-      //   log.value = response.data
-      //   console.log(log.value)
-      // })
-      // await userStore.userPhoneLogin(dataToSend)
-    }
-    isBtnLoading.value = false
-    $router.push('/home')
-    if ($route.query.redirect) {
-      $router.push($route.query.redirect as string)
-    } else {
-      $router.push('/')
-    }
-  } catch (error) {
-    isBtnLoading.value = false
+  isBtnLoading.value = true
+  if (formModel.value.code == codecode.value) {
+    const phones = formModel.value.phone
+    // console.log(dataToSend)
+    userStore
+      .userPhoneLogin(phones)
+      .then(() => {
+        isBtnLoading.value = false
+        $router.push('/home')
+        if ($route.query.redirect) {
+          $router.push($route.query.redirect as string)
+        } else {
+          $router.push('/')
+        }
+      })
+      .catch((error) => {
+        isBtnLoading.value = false
+        ElMessage.error(error.response.data.message)
+      })
   }
 }
 const keyDown = (e: any) => {
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
index 6d4c443..4ce7196 100644
--- a/src/views/message/index.vue
+++ b/src/views/message/index.vue
@@ -1,107 +1,5 @@
 <template>
-  <div>
-    <el-button type="primary" @click="openDrawer">Open Drawer</el-button>
-
-    <el-drawer
-      title="Drawer Title"
-      v-model:visible="drawerVisible"
-      :direction="drawerDirection"
-      :width="drawerWidth"
-    >
-      <el-table :data="formModel" style="width: 100%">
-        <el-table-column prop="name" label="Name"></el-table-column>
-        <el-table-column prop="content" label="Content">
-          <template #default="{ row }">
-            <el-button type="text" @click="openEditDialog(row)">Edit</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-drawer>
-
-    <el-dialog v-model:visible="editDialogVisible">
-      <el-form :model="editForm" label-width="80px">
-        <el-form-item label="Name" prop="name">
-          <el-input v-model="editForm.name"></el-input>
-        </el-form-item>
-        <el-form-item label="Content" prop="content">
-          <el-input v-model="editForm.content"></el-input>
-        </el-form-item>
-      </el-form>
-
-      <template v-slot:footer>
-        <div>
-          <el-button @click="cancelEdit">Cancel</el-button>
-          <el-button type="primary" @click="saveEdit">Save</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
+  <div>消息</div>
 </template>
 
-<script>
-import { reactive } from 'vue'
-
-export default {
-  setup() {
-    const data = reactive([
-      { name: 'Macbook', content: 9.9 },
-      { name: 'iPhone', content: 9.9 },
-      { name: '小米电脑', content: 9.9 },
-      { name: '小米电脑', content: 9.9 },
-      { name: '小米电脑', content: 9.9 },
-      { name: '小米电脑', content: 9.9 },
-      { name: '小米电脑', content: 9.9 },
-      { name: '小米电脑', content: 9.9 },
-      { name: '小米电脑', content: 9.9 },
-    ])
-
-    const drawerVisible = reactive(false)
-    const drawerDirection = reactive('ltr')
-    const drawerWidth = reactive('500px')
-    const editDialogVisible = reactive(false)
-    const editForm = reactive({
-      name: '',
-      content: '',
-    })
-    let editRowIndex = null
-
-    const openDrawer = () => {
-      drawerVisible.value = true
-    }
-
-    const openEditDialog = (row) => {
-      editForm.name = row.name
-      editForm.content = row.content
-      editRowIndex = data.indexOf(row)
-      editDialogVisible.value = true
-    }
-
-    const cancelEdit = () => {
-      editDialogVisible.value = false
-      editForm.name = ''
-      editForm.content = ''
-    }
-
-    const saveEdit = () => {
-      if (editRowIndex !== null) {
-        data.splice(editRowIndex, 1, { ...editForm })
-        editRowIndex = null
-      }
-      editDialogVisible.value = false
-    }
-
-    return {
-      formModel: data,
-      drawerVisible,
-      drawerDirection,
-      drawerWidth,
-      editDialogVisible,
-      editForm,
-      openDrawer,
-      openEditDialog,
-      cancelEdit,
-      saveEdit,
-    }
-  },
-}
-</script>
+<script></script>
diff --git a/src/views/portal/courseHomepage.vue b/src/views/portal/courseHomepage.vue
index 65390e1..127d483 100644
--- a/src/views/portal/courseHomepage.vue
+++ b/src/views/portal/courseHomepage.vue
@@ -1,173 +1,7 @@
 <template>
-  <div id="your-element-selector" style="width: 100%; height: 100vh"></div>
-
-  <div class="login_container">
-    <el-row>
-      <el-col
-        :span="12"
-        :xs="24"
-        style="
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-        "
-      >
-        <el-form
-          class="loin_form"
-          :model="loginForm"
-          ref="formRules"
-          :rules="rules"
-        >
-          <h1>Hello</h1>
-          <h2>同学！</h2>
-          <el-form-item prop="username">
-            <el-input
-              v-model="loginForm.username"
-              :prefix-icon="User"
-              size="large"
-            ></el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input
-              v-model="loginForm.password"
-              type="password"
-              :prefix-icon="Lock"
-              size="large"
-              show-password
-            ></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              :loading="isBtnLoading"
-              size="large"
-              class="login-btn"
-              type="primary"
-              @click="login"
-            >
-              登录
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-      <el-col :span="12" :xs="0"></el-col>
-    </el-row>
-  </div>
+  <div></div>
 </template>
 
-<script lang="ts" setup>
-import { reactive, ref, onMounted, onUnmounted } from 'vue'
-import { User, Lock } from '@element-plus/icons-vue'
-import useUserStore from '@/store/modules/user'
-import { useRouter, useRoute } from 'vue-router'
-let loginForm = reactive({ username: 'admin', password: '111111' })
-// 引入登录仓库
-let userStore = useUserStore()
-// 引入路由
-const $router = useRouter()
-const $route = useRoute()
-const isBtnLoading = ref<boolean>(false)
-// 获取form实例
-const formRules = ref<any>(null)
-// 添加校验规则
-const rules = {
-  username: [
-    { required: true, message: '用户名不能为空', trigger: 'blur' },
-    {
-      max: 10,
-      min: 5,
-      message: '用户名长度最小五位最大十位',
-      trigger: ['change', 'blur'],
-    },
-  ],
-  password: [
-    { required: true, message: '密码不能为空', trigger: 'blur' },
-    {
-      max: 15,
-      min: 6,
-      message: '密码长度最小六位最大十五位',
-      trigger: ['change', 'blur'],
-    },
-  ],
-}
-const login = async () => {
-  // 等待校验通过
-  await formRules.value.validate()
-  try {
-    isBtnLoading.value = true
-    await userStore.userLogin(loginForm)
-    isBtnLoading.value = false
-    if ($route.query.redirect) {
-      $router.push($route.query.redirect as string)
-    } else {
-      $router.push('/')
-    }
-  } catch (error) {
-    isBtnLoading.value = false
-  }
-}
-const keyDown = (e: any) => {
-  //如果是回车则执行登录方法
-  if (e.keyCode == 13) {
-    //需要执行的登录方法
-    login()
-  }
-}
-onMounted(() => {
-  //@ts-expect-error 修复ts校验VANTA不存在GLOBE属性 已经cdn引入
-  VANTA.GLOBE({
-    el: '#your-element-selector',
-    mouseControls: true,
-    touchControls: true,
-    gyroControls: false,
-    minHeight: 200.0,
-    minWidth: 200.0,
-    scale: 1.0,
-    scaleMobile: 1.0,
-    color: 0x5adc,
-    color2: 0x1efc,
-    size: 0.8,
-    backgroundColor: 0xffffff,
-  })
-  window.addEventListener('keydown', keyDown)
-})
-onUnmounted(() => {
-  window.removeEventListener('keydown', keyDown, false)
-})
-</script>
+<script lang="ts" setup></script>
 
-<style lang="scss" scoped>
-.login_container {
-  width: 100%;
-  height: 100vh;
-  position: absolute;
-  top: 0;
-  // background: url('../../assets/images/background.jpg') no-repeat;
-  .loin_form {
-    position: relative;
-    top: 30vh;
-    width: 80%;
-    // background: url('../../assets/images/login_form.png') no-repeat;
-    // background-size: cover;
-    // background-color: #5577ff;
-    background: rgba(255, 255, 255, 0.1);
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    padding: 40px;
-    border-radius: 10px;
-    box-shadow: 7px 7px 42px rgba(0, 0, 0, 0.17);
-    h1 {
-      font-size: 40px;
-      color: #5577ff;
-    }
-    h2 {
-      font-size: 20px;
-      color: #5577ff;
-      margin: 20px 0;
-    }
-    .login-btn {
-      width: 100%;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/views/student/index.vue b/src/views/student/index.vue
index 4516860..74c4ecc 100644
--- a/src/views/student/index.vue
+++ b/src/views/student/index.vue
@@ -1,536 +1,30 @@
-<script setup></script>
 <template>
-  <div id="your-element-selector" style="width: 100%; height: 100vh"></div>
-
-  <div class="login_container">
-    <!-- <el-row>
-      <el-col
-        :span="12"
-        :xs="24"
-        style="
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-        "
-      >
-        <el-form
-          class="loin_form"
-          :model="loginForm"
-          ref="formRules"
-          :rules="rules"
-        >
-          <h1>Hello</h1>
-          <h2>同学！</h2>
-          <el-form-item prop="username">
-            <el-input
-              v-model="loginForm.username"
-              :prefix-icon="User"
-              size="large"
-            ></el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input
-              v-model="loginForm.password"
-              type="password"
-              :prefix-icon="Lock"
-              size="large"
-              show-password
-            ></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              :loading="isBtnLoading"
-              size="large"
-              class="login-btn"
-              type="primary"
-              @click="login"
-            >
-              登录
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-      <el-col :span="12" :xs="0"></el-col>
-    </el-row> -->
-    <el-row>
-      <el-col
-        :span="12"
-        :xs="24"
-        style="
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-        "
-      >
-        <el-form
-          class="loin_form"
-          v-if="isRegister"
-          :model="loginForm"
-          ref="form"
-          :rules="rules"
-        >
-          <h1>Hello</h1>
-          <!-- <h2>同学！</h2> -->
-          <div class="taggle">
-            <h2 @click="isToggle = true">账号</h2>
-            <h2 @click="isToggle = false">手机号</h2>
-          </div>
-          <!-- 账号登录 -->
-          <div v-if="isToggle">
-            <el-form-item prop="username">
-              <el-input
-                v-model="loginForm.username"
-                :prefix-icon="User"
-                size="large"
-              ></el-input>
-            </el-form-item>
-            <el-form-item prop="password">
-              <el-input
-                v-model="loginForm.password"
-                type="password"
-                :prefix-icon="Lock"
-                size="large"
-                show-password
-              ></el-input>
-            </el-form-item>
-          </div>
-          <!-- 手机号登录 -->
-          <div v-else>
-            <el-form-item prop="phone">
-              <el-input
-                v-model="formModel.phone"
-                :prefix-icon="Phone"
-                size="large"
-                placeholder="请输入手机号"
-              ></el-input>
-            </el-form-item>
-            <el-form-item prop="code" class="content">
-              <!-- <el-input
-                v-model="loginForm.password"
-                type="password"
-                :prefix-icon="Lock"
-                size="large"
-                show-password
-              ></el-input> -->
-              <input
-                type="text"
-                v-model="loginForm.code"
-                placeholder="请输入验证码"
-                size="large"
-                style="
-                  flex: 1;
-                  height: 40px;
-                  line-height: 40px;
-                  border: 1px solid #dcdfe6;
-                  /* color: #dcdfe6; */
-                "
-              />
-              <div class="p" v-if="countdown > 0">
-                <p>{{ countdown }} 秒</p>
-              </div>
-              <button
-                class="code"
-                v-if="countdown <= 0"
-                @click="startCountdown"
-                :disabled="countdown > 0"
-              >
-                发送验证码
-              </button>
-            </el-form-item>
-          </div>
-          <el-form-item>
-            <el-button
-              :loading="isBtnLoading"
-              size="large"
-              class="login-btn"
-              type="primary"
-              @click="login"
-            >
-              登录
-            </el-button>
-          </el-form-item>
-          <el-form-item class="flex">
-            <el-link type="info" :underline="false" @click="isRegister = false">
-              注册 →
-            </el-link>
-          </el-form-item>
-        </el-form>
-        <!-- 注册 -->
-        <el-form
-          class="loin_form"
-          :model="formModel"
-          ref="form"
-          :rules="rules"
-          v-else
-        >
-          <h1>Hello</h1>
-          <div class="taggle">
-            <h2 @click="isToggle = true">账号</h2>
-            <h2 @click="isToggle = false">手机号</h2>
-          </div>
-          <!-- 账号注册 -->
-          <div v-if="isToggle">
-            <el-form-item prop="username">
-              <el-input
-                v-model="formModel.username"
-                :prefix-icon="User"
-                size="large"
-              ></el-input>
-            </el-form-item>
-            <el-form-item prop="password">
-              <el-input
-                v-model="formModel.password"
-                type="password"
-                :prefix-icon="Lock"
-                size="large"
-                show-password
-              ></el-input>
-            </el-form-item>
-            <el-form-item prop="repassword">
-              <el-input
-                v-model="formModel.repassword"
-                type="password"
-                :prefix-icon="Check"
-                size="large"
-                show-repassword
-              ></el-input>
-            </el-form-item>
-          </div>
-          <!-- 手机号注册 -->
-          <div v-else>
-            <el-form-item prop="phone">
-              <el-input
-                v-model="formModel.phone"
-                :prefix-icon="Phone"
-                size="large"
-                placeholder="请输入手机号"
-              ></el-input>
-            </el-form-item>
-            <el-form-item prop="code">
-              <!-- <el-input
-                v-model="loginForm.password"
-                type="password"
-                :prefix-icon="Lock"
-                size="large"
-                show-password
-              ></el-input> -->
-              <input
-                type="text"
-                v-model="loginForm.code"
-                placeholder="请输入验证码"
-                size="large"
-                style="
-                  flex: 1;
-                  line-height: 40px;
-                  height: 40px;
-                  border: 1px solid #dcdfe6;
-                  /* color: #dcdfe6; */
-                "
-              />
-              <div class="p" v-if="countdown > 0">
-                <p>{{ countdown }} 秒</p>
-              </div>
-
-              <button
-                class="code"
-                v-if="countdown <= 0"
-                @click="startCountdown"
-                :disabled="countdown > 0"
-              >
-                发送验证码
-              </button>
-            </el-form-item>
-          </div>
-          <!-- <h2>老师！</h2> -->
-          <!-- <el-form-item prop="username">
-            <el-input
-              v-model="loginForm.username"
-              :prefix-icon="User"
-              size="large"
-            ></el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input
-              v-model="loginForm.password"
-              type="password"
-              :prefix-icon="Lock"
-              size="large"
-              show-password
-            ></el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input
-              v-model="loginForm.password"
-              type="password"
-              :prefix-icon="Lock"
-              size="large"
-              show-password
-            ></el-input>
-          </el-form-item> -->
-          <el-form-item>
-            <el-button
-              :loading="isBtnLoading"
-              size="large"
-              class="login-btn"
-              type="primary"
-              @click="register"
-            >
-              注册
-            </el-button>
-          </el-form-item>
-          <el-form-item class="flex">
-            <el-link type="info" :underline="false" @click="isRegister = true">
-              登录 →
-            </el-link>
-          </el-form-item>
-        </el-form>
-      </el-col>
-      <el-col :span="12" :xs="0"></el-col>
-    </el-row>
+  <div>
+    <!-- Dialog组件 -->
+    <Dialog
+      v-model="dialogVisible"
+      @confirm="collectData"
+      :name="readonlyName"
+      :age="readonlyAge"
+    />
   </div>
 </template>
 
-<script lang="ts" setup>
-import {
-  reactive,
-  ref,
-  onMounted,
-  onUnmounted,
-  onBeforeUnmount,
-  watch,
-} from 'vue'
-import { User, Lock, Phone, Check } from '@element-plus/icons-vue'
-import useUserStore from '@/store/modules/user'
-import { useRouter, useRoute } from 'vue-router'
-import { userRegisterService } from '@/api/user/index'
-//注册登录切换
-const isRegister = ref(true)
-//账号手机号切换
-const isToggle = ref(true)
-
-//注册model，需要从后台获取接口中的字段,用于提交的form对象
-const formModel = ref({
-  username: '',
-  password: '',
-  repassword: '',
-  phone: '',
-})
+<script setup>
+import { ref, readonly } from 'vue'
 
-//登录
-let loginForm = reactive({ username: 'admin', password: '111111' })
-// 引入登录仓库
-let userStore = useUserStore()
-// 引入路由
-const $router = useRouter()
-const $route = useRoute()
-const isBtnLoading = ref<boolean>(false)
-// 获取form实例
-const formRules = ref<any>(null)
-// 添加校验规则
-const rules = {
-  username: [
-    { required: true, message: '用户名不能为空', trigger: 'blur' },
-    {
-      max: 10,
-      min: 5,
-      message: '用户名长度最小五位最大十位',
-      trigger: ['change', 'blur'],
-    },
-  ],
-  password: [
-    { required: true, message: '密码不能为空', trigger: 'blur' },
-    {
-      pattern: /^\S{6,15}$/,
-      // pattern用于配置正则校验
-      max: 15,
-      min: 6,
-      message: '密码长度最小六位最大十五位',
-      trigger: ['change', 'blur'],
-    },
-  ],
-  repassword: [
-    { required: true, message: '密码不能为空', trigger: 'blur' },
-    {
-      pattern: /^\S{6,15}$/,
-      // pattern用于配置正则校验
-      max: 15,
-      min: 6,
-      message: '密码长度最小六位最大十五位',
-      trigger: ['change', 'blur'],
-    },
-    {
-      validater: (rule, value, callback) => {
-        //判断value和password是否一致
-        if ((value = loginForm.value.password)) {
-          callback(new Error('两次输入的密码不一致'))
-        } else {
-          callback()
-        }
-      },
-      trigger: ['change', 'blur'],
-    },
-  ],
-  phone: [
-    { required: true, message: '手机号不能为空', trigger: 'blur' },
-    {
-      pattern: /^1[3456789]\d{9}$/,
-      message: '手机号格式不正确',
-      trigger: 'blur',
-      // pattern用于配置正则校验
-    },
-  ],
-}
+const dialogVisible = ref(false) // 控制Dialog的显示与隐藏
+const name = ref('John') // 可修改字段
+const age = ref(25) // 可修改字段
 
-//验证码倒计时
-const countdown = ref(0)
-let timer
-const startCountdown = () => {
-  countdown.value = 60 // 设置倒计时初始值
-  timer = setInterval(updateCountdown, 1000) // 每秒更新倒计时
-}
+const readonlyName = readonly(name) // 将name字段设置为只读
+const readonlyAge = readonly(age) // 将age字段设置为只读
 
-const updateCountdown = () => {
-  if (countdown.value > 0) {
-    countdown.value--
-  } else {
-    clearInterval(timer) // 清除计时器
-  }
-}
-onBeforeUnmount(() => {
-  clearInterval(timer) // 组件销毁前清除计时器，避免内存泄漏
-})
+const collectData = () => {
+  // 在这里可以收集Dialog中的其他可修改字段的数据
+  // ...
 
-//form注册预校验
-const form = ref()
-//注册成功前进行校验
-const register = async () => {
-  await form.value.validate()
-  // console.log('开始注册')
-  await userRegisterService(formModel.value)
-  // ElMessage.success('注册成功')
-  isRegister.value = false
+  console.log(readonlyName.value) // 可以访问只读字段的值
+  console.log(readonlyAge.value) // 可以访问只读字段的值
 }
-//切换时重置表单
-watch(isRegister, () => {
-  formModel.value = {
-    username: '',
-    password: '',
-    repassword: '',
-    phone: '',
-  }
-})
-const login = async () => {
-  // 等待校验通过
-  await formRules.value.validate()
-  try {
-    isBtnLoading.value = true
-    await userStore.userLogin(loginForm)
-    isBtnLoading.value = false
-    if ($route.query.redirect) {
-      $router.push($route.query.redirect as string)
-    } else {
-      $router.push('/')
-    }
-  } catch (error) {
-    isBtnLoading.value = false
-  }
-}
-const keyDown = (e: any) => {
-  //如果是回车则执行登录方法
-  if (e.keyCode == 13) {
-    //需要执行的登录方法
-    login()
-  }
-}
-onMounted(() => {
-  //@ts-expect-error 修复ts校验VANTA不存在GLOBE属性 已经cdn引入
-  VANTA.GLOBE({
-    el: '#your-element-selector',
-    mouseControls: true,
-    touchControls: true,
-    gyroControls: false,
-    minHeight: 200.0,
-    minWidth: 200.0,
-    scale: 1.0,
-    scaleMobile: 1.0,
-    color: 0x5adc,
-    color2: 0x1efc,
-    size: 0.8,
-    backgroundColor: 0xffffff,
-  })
-  window.addEventListener('keydown', keyDown)
-})
-onUnmounted(() => {
-  window.removeEventListener('keydown', keyDown, false)
-})
 </script>
-
-<style lang="scss" scoped>
-.login_container {
-  width: 100%;
-  height: 100vh;
-  position: absolute;
-  top: 0;
-
-  // background: url('../../assets/images/background.jpg') no-repeat;
-  .loin_form {
-    position: relative;
-    top: 30vh;
-    width: 80%;
-    // background: url('../../assets/images/login_form.png') no-repeat;
-    // background-size: cover;
-    // background-color: #5577ff;
-    background: rgba(255, 255, 255, 0.1);
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    padding: 40px;
-    border-radius: 10px;
-    box-shadow: 7px 7px 42px rgba(0, 0, 0, 0.17);
-    .taggle {
-      display: flex;
-      justify-content: space-between;
-    }
-    h1 {
-      font-size: 40px;
-      color: #5577ff;
-    }
-    h2 {
-      font-size: 20px;
-      color: #5577ff;
-      margin: 20px 0;
-    }
-    .login-btn {
-      width: 100%;
-    }
-    .p {
-      height: 40px;
-      text-align: center;
-      line-height: 40px;
-      width: 90px;
-    }
-    .code {
-      height: 40px;
-      width: 100px;
-      border: 1px solid #dcdfe6;
-      // background-color: #dcdfe6;
-      color: #000;
-      background: #ffffff;
-      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-      border-radius: 6px 6px 6px 6px;
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: none;
-      line-height: 40px;
-    }
-  }
-  .el-form-item {
-    flex-wrap: none;
-  }
-  .content {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-</style>