注册界面主框架

components.d.ts

@@ -14,6 +14,7 @@ declare module '@vue/runtime-core' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
@@ -28,6 +29,7 @@ declare module '@vue/runtime-core' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']

src/layouts/auth.vue

@@ -2,6 +2,8 @@
 
 <template>
 
+  <router-view />
+
 </template>
 
 <style scoped lang="scss">

src/views/auth/login.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-
+  <h1>login</h1>
 </template>
 
 <style scoped lang="scss">

src/views/auth/register.vue

@@ -1,8 +1,110 @@
-<script setup lang="ts"></script>
+
+
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue'
+onMounted(() => {
+  const avatar = document.getElementById('avatar')
+  const box_card = document.getElementsByClassName('box-card')[0] as HTMLElement
+  if (avatar && box_card) {
+    //r_main到浏览器左边距离+自身宽度的一半-头像宽度的一半
+    avatar.style.left = (box_card.clientWidth - 100) / 2 + 'px'
+  }
+  window.addEventListener('resize', () => {
+    if (avatar) {
+      avatar.style.left = (box_card.clientWidth - 100) / 2 + 'px'
+    }
+  })
+})
+const form = reactive({
+  name: '',
+  paw: '',
+  paw1: '',
+})
+</script>
 
 <template>
+  <div id="r_main">
+    <div style="position: relative;">
+      <div id="avatar">
+        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                   :size="100" />
+      </div>
+
+      <el-card class="box-card">
 
+        <el-form :model="form"
+                 label-position="top">
+          <el-form-item label="用户名">
+            <el-input v-model="form.name" />
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input type="password"
+                      v-model="form.paw" />
+          </el-form-item>
+          <el-form-item label="确认密码">
+            <el-input type="password"
+                      v-model="form.paw1" />
+          </el-form-item>
+          <el-form-item>
+            <el-checkbox>
+              <span>我已阅读并同意</span>
+              <el-link type="primary"
+                       href="#">《用户协议》</el-link>
+            </el-checkbox>
+          </el-form-item>
+          <el-form-item label="验证码">
+            <el-button type="info"
+                       style="width: 100%;">点击进行验证</el-button>
+          </el-form-item>
+        </el-form>
+        <el-divider />
+        <el-button type="primary"
+                   style="width:100%;">注册</el-button>
+        <br>
+        <div>
+          <el-button type="text"
+                     style="float:right;">已有账号？去登录</el-button>
+        </div>
+        <br>
+      </el-card>
+    </div>
+    &nbsp;
+    <el-card class="box-card">
+      <h3>明天在想写点什么</h3>
+    </el-card>
+  </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped >
+#avatar {
+  top: 0px;
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: avatar 1s ease-in-out infinite;
+}
+@keyframes avatar {
+  0% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+.box-card {
+  min-width: 400px;
+  height: 500px;
+  margin-top: 50px;
+  padding-top: 50px;
+}
+#r_main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>