|
@@ -7,270 +7,18 @@
|
|
|
<el-col :span="24" class="two">
|
|
|
<div class="loginform">
|
|
|
<el-col :span="24" class="tab">
|
|
|
- <el-col :span="5" class="title" @click="toTab(0)" :class="[activeName == '0' ? 'tab0' : 'tab1']">个人用户</el-col>
|
|
|
+ <el-col :span="5" class="title" @click="toTab(0)" :class="[activeName == '0' ? 'tab0' : 'tab1']">平台用户</el-col>
|
|
|
<el-col :span="5" class="title" @click="toTab(1)" :class="[activeName == '1' ? 'tab0' : 'tab1']">企业用户</el-col>
|
|
|
<el-col :span="5" class="title" @click="toTab(2)" :class="[activeName == '2' ? 'tab0' : 'tab1']">科研单位</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="content" v-show="activeName == '0'">
|
|
|
- <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form" label-position="left">
|
|
|
- <el-form-item label="账号" prop="account">
|
|
|
- <el-input v-model="form.account" placeholder="请输入账号">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <User />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="用户名" prop="nick_name">
|
|
|
- <el-input v-model="form.nick_name" placeholder="请输入用户名">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Avatar />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="工作单位" prop="unit">
|
|
|
- <el-input v-model="form.tel" placeholder="请输入工作单位">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <OfficeBuilding />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系电话" prop="tel">
|
|
|
- <el-input v-model="form.tel" placeholder="请输入联系电话">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Iphone />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="身份证号" prop="id_card">
|
|
|
- <el-input v-model="form.id_card" placeholder="请输入身份证号">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <ScaleToOriginal />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系邮箱" prop="email">
|
|
|
- <el-input v-model="form.email" placeholder="请输入联系邮箱">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Message />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="密码" prop="password">
|
|
|
- <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Unlock />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="确认密码" prop="refpassword">
|
|
|
- <el-input v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Unlock />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-col :span="24" class="remark">
|
|
|
- <span @click="toLogin">已有账号去登录</span>
|
|
|
- <span @click="toBack">返回首页</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="button">
|
|
|
- <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="agree">
|
|
|
- <el-checkbox v-model="isAgree"></el-checkbox>
|
|
|
- <span style="margin: 0 0 0 5px">我已阅读并同意</span><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
|
|
|
- </el-col>
|
|
|
- </el-form>
|
|
|
+ <component :is="user" :form="form" :rules="rules" :isAgree="isAgree" @toLogin="toLogin" @toBack="toBack"> </component>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="content" v-show="activeName == '1'">
|
|
|
- <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form" label-position="left">
|
|
|
- <el-form-item label="账号" prop="account">
|
|
|
- <el-input v-model="form.account" placeholder="请输入账号">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <User />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="用户名" prop="nick_name">
|
|
|
- <el-input v-model="form.nick_name" placeholder="请输入用户名">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Avatar />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="工作单位" prop="unit">
|
|
|
- <el-input v-model="form.tel" placeholder="请输入工作单位">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <OfficeBuilding />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系电话" prop="tel">
|
|
|
- <el-input v-model="form.tel" placeholder="请输入联系电话">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Iphone />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="身份证号" prop="id_card">
|
|
|
- <el-input v-model="form.id_card" placeholder="请输入身份证号">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <ScaleToOriginal />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系邮箱" prop="email">
|
|
|
- <el-input v-model="form.email" placeholder="请输入联系邮箱">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Message />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="密码" prop="password">
|
|
|
- <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Unlock />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="确认密码" prop="refpassword">
|
|
|
- <el-input v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Unlock />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-col :span="24" class="remark">
|
|
|
- <span @click="toLogin">已有账号去登录</span>
|
|
|
- <span @click="toBack">返回首页</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="button">
|
|
|
- <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="agree">
|
|
|
- <el-checkbox v-model="isAgree"></el-checkbox>
|
|
|
- <span style="margin: 0 0 0 5px">我已阅读并同意</span><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
|
|
|
- </el-col>
|
|
|
- </el-form>
|
|
|
+ <component :is="user" :form="form" :rules="rules" :isAgree="isAgree" @toLogin="toLogin" @toBack="toBack"> </component>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="content" v-show="activeName == '2'">
|
|
|
- <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form" label-position="left">
|
|
|
- <el-form-item label="账号" prop="account">
|
|
|
- <el-input v-model="form.account" placeholder="请输入账号">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <User />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="用户名" prop="nick_name">
|
|
|
- <el-input v-model="form.nick_name" placeholder="请输入用户名">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Avatar />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="工作单位" prop="unit">
|
|
|
- <el-input v-model="form.tel" placeholder="请输入工作单位">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <OfficeBuilding />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系电话" prop="tel">
|
|
|
- <el-input v-model="form.tel" placeholder="请输入联系电话">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Iphone />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="身份证号" prop="id_card">
|
|
|
- <el-input v-model="form.id_card" placeholder="请输入身份证号">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <ScaleToOriginal />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系邮箱" prop="email">
|
|
|
- <el-input v-model="form.email" placeholder="请输入联系邮箱">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Message />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="密码" prop="password">
|
|
|
- <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Unlock />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="确认密码" prop="refpassword">
|
|
|
- <el-input v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
|
|
|
- <template #prefix>
|
|
|
- <el-icon>
|
|
|
- <Unlock />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-col :span="24" class="remark">
|
|
|
- <span @click="toLogin">已有账号去登录</span>
|
|
|
- <span @click="toBack">返回首页</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="button">
|
|
|
- <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="agree">
|
|
|
- <el-checkbox v-model="isAgree"></el-checkbox>
|
|
|
- <span style="margin: 0 0 0 5px">我已阅读并同意</span><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
|
|
|
- </el-col>
|
|
|
- </el-form>
|
|
|
+ <component :is="user" :form="form" :rules="rules" :isAgree="isAgree" @toLogin="toLogin" @toBack="toBack"> </component>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -282,6 +30,8 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
+// 组件
|
|
|
+import user from './parts/user.vue';
|
|
|
// 基础
|
|
|
import type { Ref } from 'vue';
|
|
|
import { onMounted, ref, reactive } from 'vue';
|
|
@@ -351,7 +101,7 @@ const toBack = () => {
|
|
|
background-image: url(@/assets/loginbg.jpeg);
|
|
|
background-position: center center;
|
|
|
background-repeat: no-repeat;
|
|
|
- height: 590px;
|
|
|
+ height: calc(100vh - 20vh);
|
|
|
width: 100%;
|
|
|
background-size: cover;
|
|
|
display: flex;
|
|
@@ -361,7 +111,7 @@ const toBack = () => {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- height: 460px;
|
|
|
+ min-height: 460px;
|
|
|
padding: 20px 85px;
|
|
|
background: hsla(0, 0%, 100%, 0.6);
|
|
|
box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
|