admin/LingXi-CRM
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

ui: change index page layout

Browse Source
This commit is contained in:
zchengo
2023-01-28 11:02:05 +08:00
parent af35a83526
commit 5662823714
4 changed files with 76 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/Index.vue
+36 -21
View File
@@ -1,26 +1,19 @@
<template>
<div class="container">
<div class="header">
<img src="../assets/logo.svg" style="width: 80px;height: 80px;filter: drop-shadow(2px 2px 6px #79bbff);" />
<span class="title">ZO<b style="color: #1283FF;">C</b>RM</span>
</div>
<div class="content">
<div class="main">
<transition name="fade">
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
</transition>
</div>
<div class="footer">
<div class="links">
<a href="https://github.com/zchengo/crm">开源地址</a>
<a href="https://github.com/zchengo/crm/blob/main/LICENSE">许可证</a>
<a href="https://mail.qq.com/">企鹅邮箱</a>
<a-row>
<a-col :span="14">
<div class="back"></div>
</a-col>
<a-col :span="10">
<div class="form">
<transition name="fade">
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
</transition>
</div>
<div class="copyright">Copyright © 2022 www.zocrm.cloud</div>
</div>
</div>
</a-col>
</a-row>
</div>
</template>
@@ -32,7 +25,29 @@
.container {
width: 100%;
height: 100vh;
background: #F0F2F5;
background: #FFFFFF;
}
.back {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f9f9fb;
background-image: url('../assets/back.png');
background-size: 75% 75%;
background-position: center;
background-repeat: no-repeat;
}
.form {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header {
web/src/views/Login.vue
+11 -1
View File
@@ -1,5 +1,8 @@
<template>
<a-form :model="formData" name="normal_login" class="login-form" @finish="onLogin" @finishFailed="onLoginFailed">
<a-form :model="formData" @finish="onLogin" @finishFailed="onLoginFailed" style="width: 65%;">
<a-form-item>
<div class="title">账号登录</div>
</a-form-item>
<a-form-item name="email" :rules="[{ required: true, message: '请输入邮箱!' }]">
<a-input v-model:value="formData.email" size="large" placeholder="邮箱">
<template #prefix>
@@ -98,6 +101,13 @@ const initSysData = () => {
</script>
<style scoped>
.title {
color: #303133;
font-size: 30px;
line-height: 65px;
font-weight: 500;
}
.site-form-item-icon {
color: rgba(0, 0, 0, .45);
}
web/src/views/Pass.vue
+14 -4
View File
@@ -1,5 +1,8 @@
<template>
<a-form ref="passFormRef" :model="formData" layout="vertical" @finish="onSubmit" :rules="rules">
<a-form ref="passFormRef" :model="formData" layout="vertical" style="width: 65%;" @finish="onSubmit" :rules="rules">
<a-form-item>
<div class="title">密码重置</div>
</a-form-item>
<a-form-item name="email">
<a-input v-model:value="formData.email" size="large" placeholder="邮箱" />
</a-form-item>
@@ -16,8 +19,10 @@
<a-input-password v-model:value="formData.password2" size="large" placeholder="确认密码" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" size="large" style="width: 50%;">确定</a-button>
<a-button type="link" style="width: 50%;" @click="onLogin">使用已有账户登录</a-button>
<a-button type="primary" html-type="submit" size="large" style="width: 100%;">确定</a-button>
</a-form-item>
<a-form-item>
已想起密码？<a @click="onLogin"> 直接登录</a>
</a-form-item>
</a-form>
</template>
@@ -107,5 +112,10 @@ const onLogin = () => {
</script>
<style scoped>
.title {
color: #303133;
font-size: 30px;
line-height: 65px;
font-weight: 500;
}
</style>
web/src/views/Register.vue
+15 -4
View File
@@ -1,5 +1,9 @@
<template>
<a-form ref="registerFormRef" :model="formData" layout="vertical" @finish="onRegister" :rules="rules">
<a-form ref="registerFormRef" :model="formData" style="width: 65%;" layout="vertical" @finish="onRegister"
:rules="rules">
<a-form-item>
<div class="title">账号注册</div>
</a-form-item>
<a-form-item name="email">
<a-input v-model:value="formData.email" size="large" placeholder="邮箱" />
</a-form-item>
@@ -16,8 +20,10 @@
<a-input-password v-model:value="formData.password2" size="large" placeholder="确认密码" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" size="large" style="width: 50%;">注册</a-button>
<a-button type="link" style="width: 50%;" @click="onLogin">使用已有账户登录</a-button>
<a-button type="primary" html-type="submit" size="large" style="width: 100%;">注册</a-button>
</a-form-item>
<a-form-item>
已有账号？<a @click="onLogin"> 直接登录</a>
</a-form-item>
</a-form>
</template>
@@ -115,5 +121,10 @@ const onLogin = () => {
</script>
<style scoped>
.title {
color: #303133;
font-size: 30px;
line-height: 65px;
font-weight: 500;
}
</style>