个人中心

src/layout/spacePage.vue

@@ -17,8 +17,73 @@
                     <button class="btn3" @click="handlePasswordClick">密码管理</button>
                 </div>
                 <div class="rightBoxes">
-                    <div class="topBox"></div>
-                    <div class="bottomBox"></div>
+                    <div class="topBox">
+                        <el-form style="margin:30px 0 0 200px;" :rules="rules" :model="formModel" ref="formRef"
+                            size="large" autocomplete="off">
+                            <el-form-item prop="username" class="custom-form-item">
+                                <div class="left" style="width: 60px;color: #fbfdfd;">
+                                    用户账号
+                                </div>
+                                <div class="right">
+                                    <el-input v-model="formModel.username" style="border-color: #20bec8;"></el-input>
+                                </div>
+                            </el-form-item>
+                            <el-form-item prop="name" class="custom-form-item">
+                                <div style="display: flex; align-items: center; color: pink">
+                                    <div class="left" style="width: 60px;color: #fbfdfd;">
+                                        姓名
+                                    </div>
+                                    <div class="right">
+                                        <el-input v-model="formModel.name" style="border-color: #20bec8;"></el-input>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                            <el-form-item prop="clssid" class="custom-form-item">
+                                <div class="left" style="width: 60px;color: #fbfdfd;">
+                                    班级
+                                </div>
+                                <div class="right">
+                                    <el-input v-model="formModel.clssid" style="border-color: #20bec8;"></el-input>
+                                </div>
+                            </el-form-item>
+
+                        </el-form>
+                    </div>
+                    <div class="bottomBox">
+                        <el-form size="large" style="margin:30px 0 0 265px;" :rules="rules" :model="formModel">
+                            <el-form-item prop="studentNumb">
+                                <div style="display: flex; align-items: center;">
+                                    <div class="left" style="width: 60px;color: #fbfdfd;">
+                                        学号
+                                    </div>
+                                    <div class="right">
+                                        <el-input v-model="formModel.studentNumb"
+                                            style="border-color: #20bec8"></el-input>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                            <el-form-item prop="mobile">
+                                <div style="display: flex; align-items: center;">
+                                    <div class="left" style="width: 60px;color: #fbfdfd;">
+                                        手机号
+                                    </div>
+                                    <div class="right">
+                                        <el-input v-model="formModel.mobile" style="border-color: #20bec8"></el-input>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                            <el-form-item prop="score">
+                                <div style="display: flex; align-items: center;">
+                                    <div class="left" style="width: 60px;color: #fbfdfd;">
+                                        成绩
+                                    </div>
+                                    <div class="right">
+                                        <el-input v-model="formModel.score" style="border-color: #20bec8"></el-input>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                        </el-form>
+                    </div>
                 </div>
             </div>
         </div>
@@ -43,6 +108,7 @@ const loginFn = () => {
 const handleHomeClick = () => {
     // 处理首页按钮点击逻辑，如路由跳转
     console.log('首页按钮被点击');
+    router.push('/studyPage')
 };
 const handleRecordClick = () => {
     console.log('学习/成绩记录按钮被点击');
@@ -50,6 +116,51 @@ const handleRecordClick = () => {
 const handlePasswordClick = () => {
     console.log('密码管理按钮被点击');
 };
+
+const formRef = ref();
+const formModel = ref({
+    username: "",
+    name: "",
+    clssid: '',
+    studentNumb: "",
+    mobile: '',
+    score: ''
+});
+const rules = {
+    username: [
+        { required: true, message: "请输入用户名", trigger: "blur" },
+        {
+            min: 5,
+            max: 30,
+            message: "用户名长度最小五位最大三十位",
+            trigger: ["change", "blur"],
+        },
+    ],
+    studentNumb: [
+        { required: true, message: "请输入学号", trigger: "blur" },
+        {
+            min: 5,
+            max: 11,
+            message: "学号长度最小五位最大十一位",
+            trigger: ["change", "blur"],
+        },
+    ],
+    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+    clssid: [
+        { required: true, message: "请选择所属班级", trigger: "blur" },
+    ],
+    mobile: [
+        { required: true, message: "请输入手机号", trigger: "blur" },
+        {
+            pattern: /^1[3-9]\d{9}$/,
+            message: "手机号格式不正确",
+            trigger: ["change", "blur"],
+        },
+    ],
+    score:[
+        { required: true, message: "成绩", trigger: "blur" },
+    ]
+};
 </script>
 
 <style lang="less" scoped>
@@ -151,6 +262,7 @@ const handlePasswordClick = () => {
                 height: 40px;
                 line-height: 40px;
             }
+
             .btn1,
             .btn2,
             .btn3 {
@@ -178,6 +290,7 @@ const handlePasswordClick = () => {
                 left: 26%;
                 top: 360px;
             }
+
             .btn3 {
                 position: absolute;
                 left: 22%;
@@ -206,6 +319,15 @@ const handlePasswordClick = () => {
                 // justify-content: center;
                 // align-items: center;
                 transform: skewX(15deg);
+
+                .el-input {
+                    width: 450px;
+                    height: 50px;
+                }
+
+                :deep(.el-form-item__error) {
+                    left: 90px;
+                }
             }
 
             .bottomBox {
@@ -221,6 +343,14 @@ const handlePasswordClick = () => {
                 // align-items: center;
                 transform: skewX(15deg);
 
+                .el-input {
+                    width: 450px;
+                    height: 50px;
+                }
+
+                :deep(.el-form-item__error) {
+                    left: 90px;
+                }
             }