Vue3商城后台管理实战-用户登录界面设计-编程知识

Vue3商城后台管理实战-用户登录界面设计

界面设计

此时界面的预览效果如下：
在这里插入图片描述

登录界面的完整代码如下：

<script setup>
import {reactive} from "@vue/reactivity";const form = reactive({username: "",password: "",
})const onSubmit = () => {}
</script><template><el-row class="min-h-screen bg-blue-700"><el-col :span="16" class="flex items-center justify-center"><div><h1 class="font-bold text-5xl text-light-50 mb-4">用户登录</h1><p class="text-light-50">zdppy + vue3 实现的商城后台管理系统</p></div></el-col><el-col :span="8" class="bg-slate-100"><h2>欢迎回来</h2><div><span></span><span>账号密码登录</span><span></span></div><el-form :model="form"><el-form-item><el-input v-model="form.username" placeholder="请输入用户名"/></el-form-item><el-form-item><el-input v-model="form.password" placeholder="请输入密码"/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form></el-col></el-row>
</template><style scoped></style>

左侧布局和样式调整

核心代码：

<el-col :span="16" class="flex items-center justify-center"><div><h1 class="font-bold text-5xl text-light-50 mb-4">用户登录</h1><p class="text-gray-200 text-1xl">zdppy + vue3 实现的商城后台管理系统</p></div>
</el-col>

效果预览：
在这里插入图片描述

右侧布局初步调整

核心代码：

<el-col :span="8" class="bg-slate-100 flex items-center justify-center flex-col"><h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2><div><span></span><span>账号密码登录</span><span></span></div><el-form :model="form"><el-form-item><el-input v-model="form.username" placeholder="请输入用户名"/></el-form-item><el-form-item><el-input v-model="form.password" placeholder="请输入密码"/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form>
</el-col>

此时效果预览如下：
在这里插入图片描述

此时登录界面的完整代码如下：

<script setup>
import {reactive} from "@vue/reactivity";const form = reactive({username: "",password: "",
})const onSubmit = () => {}
</script><template><el-row class="min-h-screen bg-blue-700"><el-col :span="16" class="flex items-center justify-center"><div><h1 class="font-bold text-5xl text-light-50 mb-4">用户登录</h1><p class="text-gray-200 text-1xl">zdppy + vue3 实现的商城后台管理系统</p></div></el-col><el-col :span="8" class="bg-slate-100 flex items-center justify-center flex-col"><h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2><div><span></span><span>账号密码登录</span><span></span></div><el-form :model="form"><el-form-item><el-input v-model="form.username" placeholder="请输入用户名"/></el-form-item><el-form-item><el-input v-model="form.password" placeholder="请输入密码"/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form></el-col></el-row>
</template><style scoped></style>

此时登录界面的完整预览效果如下：
在这里插入图片描述

实现登录提示样式

核心代码：

实现flex布局：flex items-center justify-center
设置垂直方向的外边距：my-5
设置文本颜色：text-gray-300
设置flex容器中盒子的间距：space-x-2
设置固定高度：h-[1px]
设置宽度：w-16
设置背景：bg-gray-200

<div class="flex items-center justify-center my-5 text-gray-300 space-x-2"><span class="h-[1px] w-16 bg-gray-200"></span><span>账号密码登录</span><span class="h-[1px] w-16 bg-gray-200"></span>
</div>

此时右侧的渲染效果如下：
在这里插入图片描述

设置表单布局

核心代码：

设置固定宽度：class="w-[250px]"
设置圆角按钮：round
设置按钮样式：class="w-[250px] bg-blue-700"
设置密码输入框：v-model="form.password" type="password"

<el-form :model="form" class="w-[250px]"><el-form-item><el-input v-model="form.username" placeholder="请输入用户名"/></el-form-item><el-form-item><el-input v-model="form.password" type="password" placeholder="请输入密码"/></el-form-item><el-form-item><el-button round class="w-[250px] bg-blue-700" type="primary" @click="onSubmit">登录</el-button></el-form-item>
</el-form>

此时右侧渲染效果如下：
在这里插入图片描述

最终代码

完整代码：

<script setup>
import {reactive} from "@vue/reactivity";const form = reactive({username: "",password: "",
})const onSubmit = () => {}
</script><template><el-row class="min-h-screen bg-blue-700"><el-col :span="16" class="flex items-center justify-center"><div><h1 class="font-bold text-5xl text-light-50 mb-4">用户登录</h1><p class="text-gray-200 text-1xl">zdppy + vue3 实现的商城后台管理系统</p></div></el-col><el-col :span="8" class="bg-slate-100 flex items-center justify-center flex-col"><h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2><div class="flex items-center justify-center my-5 text-gray-300 space-x-2"><span class="h-[1px] w-16 bg-gray-200"></span><span>账号密码登录</span><span class="h-[1px] w-16 bg-gray-200"></span></div><el-form :model="form" class="w-[250px]"><el-form-item><el-input v-model="form.username" placeholder="请输入用户名"/></el-form-item><el-form-item><el-input v-model="form.password" type="password" placeholder="请输入密码"/></el-form-item><el-form-item><el-button round class="w-[250px] bg-blue-700" type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form></el-col></el-row>
</template><style scoped></style>