注册页面编写

注册页面没什么好说的，相应的路由项要增加，主页面中的按钮也要绑定

<script setup>
import {reactive} from "vue";
import router from "@/router";
import {Lock, User, Message} from "@element-plus/icons-vue";
const form=reactive(({
  username: '',
  password:'',
  password_repeat:'',
  email:'',
  code:''
}))
const rule={

}
</script>

<template>
<div style="text-align: center;margin:0 20px">
  <div style="margin-top: 100px">
    <div style="font-size: 25px;font-weight: bold">注册新用户</div>
    <div style="font-size: 14px;color:grey">欢迎注册我们的学习平台，请在下方填写相关信息</div>
  </div>
  <div style="margin-top:50px">
    <el-form :model="form" :rules="rule">
      <el-form-item>
        <el-input v-model="form.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="form.password" maxlength="10" type="password" placeholder="密码">
          <template #prefix>
            <el-icon> <Lock /> </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.password_repeat" maxlength="10" type="password" placeholder="重复密码">
          <template #prefix>
            <el-icon> <Lock /> </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.email" maxlength="10" type="text" placeholder="电子邮件地址">
          <template #prefix>
            <el-icon> <Message /> </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="10" style="width: 100%">
          <el-col :span="17">
            <el-input v-model="form.code" maxlength="10" type="password" placeholder="验证码">
              <template #prefix>
                <el-icon> <Message /> </el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :span="5">
      <el-button type="success" >获取验证码</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div style="">
      <el-button style="width: 270px" type="warning" plain>
        立即注册
      </el-button>
    </div>
    <div style="margin-top: 20px">
      <span style="font-size: 14px;color: grey;line-height: 15px">已有账号?</span>
      <el-link style="translate:0 -1px" @click="router.push('/')">立即登录</el-link>
    </div>
  </div>

</div>
</template>

<style scoped>

</style>

Component inside renders non-element root node that cannot be animated.注意这里transition报错，在所有页面的template中都要使用div包裹起来

在welcomeview中加入过渡动画

<template>
  <div style="width: 100vw;height: 100vh;overflow: hidden;display: flex">
    <div style="flex: 1;background-color: black">
      <el-image src="http://pic.bizhi360.com/bbpic/53/11153.jpg" style="width: 100%;height: 100%" fit="cover"/>
    </div>
    <div class="welcome-title">
      <div style="font-size: 30px;font-weight: bold">欢迎来到全球最大同性交友网站</div>
      <div style="margin-top: 10px;">在这里你可以学习哲学，并且与哲学之父密切交流</div>
      <div style="margin-top: 5px">在这里你可以同性交友，因为都是男的，没有学哲学的女生</div>
    </div>
    <div class="right-card">
      <router-view v-slot="{ Component }">
        <Transition name="el-fade-in-linear"  mode="out-in">
          <component :is="Component"></component>
        </Transition>
      </router-view>
    </div>
  </div>
</template>