登录页面编写

my-project-frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "my-project-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
         "element-plus": "^2.7.2",
         "vue": "^3.3.4",
         "vue-router": "^4.3.2"

my-project-frontend/package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.7.2",
     "vue": "^3.3.4",
     "vue-router": "^4.3.2"

my-project-frontend/src/views/WelcomeView.vue

@@ -13,9 +13,8 @@
       <div style="margin-top: 10px" >在这里你可以学习如何使用java,如何搭建网址,并且与java之父深入交流</div>
       <div style="margin-top: 5px" >在这里你可以同性交友,因为都是男的,没有学java的女生</div>
     </div>
-
    <div class="right-card">
-
+    <router-view/>
    </div>
   </div>
 

my-project-frontend/src/views/welcome/LoginPage.vue

@@ -1,9 +1,59 @@
 <script setup>
+import { User , Lock} from '@element-plus/icons-vue'
+import {reactive} from "vue";
 
+const from = reactive({
+  username: '',
+  password: '',
+  remember: false
+})
 </script>
 
 <template>
-  <div>我是登录页面</div>
+  <div style="text-align: center ; margin: 0 20px" >
+    <div style="margin-top: 150px">
+      <div style="font-size: 25px ; font-weight: bold">登录</div>
+      <div style="font-size: 14px;color: gray">在进入系统之前,请先输入用户名和密码进行登录</div>
+    </div>
+    <div style="margin-top: 50px">
+      <el-form v-model="from">
+        <el-form-item>
+          <el-input v-model="from.username" maxlength="10" type="text" placeholder="用户名/邮箱">
+            <template #prefix>
+              <el-icon><User/></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="from.password" maxlength="20" placeholder="密码">
+            <template #prefix>
+              <el-icon><Lock /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-row>
+          <el-col :span="12" style="text-align: left">
+            <el-form-item>
+              <el-checkbox v-model="from.remember" label="记住我"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" style="text-align: right">
+            <el-link>忘记密码?</el-link>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div style="margin-top: 40px">
+      <el-button style="width: 270px" type="success" plain>立即登录</el-button>
+    </div>
+    <el-divider>
+      <span style="font-size: 13px ; color: gray">没有账户?</span>
+    </el-divider>
+    <div>
+      <el-button style="width: 270px" type="warning" plain>立即注册</el-button>
+    </div>
+
+  </div>
 
 </template>