效果预览

WEB 端效果

移动端效果

技术方案

vue3 + vite + Element Plus + VueRouter + UnoCSS + TS + vueUse + AutoImport

技术要点

响应式设计

移动端：图片切换为绝对定位，下移一层，成为背景图片

    <el-imageclass="w-screen h-screen lt-md:position-absolute! z--1 left-0 top-0"src="/imgs/coding.jpeg"fit="cover"/>

el-input 中添加自定义图标组件

需在 vue 中使用 JSX，详见 https://blog.csdn.net/weixin_41192489/article/details/143787392

<el-input v-model="form.account" :prefix-icon="getIcon('mdi:account')" />

<script setup lang="tsx">
import Icon from '@/components/Icon.vue'
const getIcon = (icon: string) => <Icon icon={icon} />
</script> 

代码实现

<script setup lang="tsx">
import Icon from '@/components/Icon.vue'
const getIcon = (icon: string) => <Icon icon={icon} />const form = reactive({ account: '', password: '', remember: false })let loginWay_list = [{ icon: 'mdi:wechat', color: '#07cd66' },{ icon: 'flat-color-icons:phone-android' },{ icon: 'icon-park:tencent-qq' }
]
</script><template><div class="flex"><el-imageclass="w-screen h-screen lt-md:position-absolute! z--1 left-0 top-0"src="/imgs/coding.jpeg"fit="cover"/><div class="flex items-center justify-center w-full h-screen"><!-- 登录表单 --><div class="max-w-360px bg-white p-10 lt-md:rounded lt-md:shadow"><div class="text-28px font-bold text-center p-6">EC 编程俱乐部</div><el-form :model="form"><el-form-item><el-input v-model="form.account" :prefix-icon="getIcon('mdi:account')" /></el-form-item><el-form-item><el-input v-model="form.password" :prefix-icon="getIcon('wpf:password1')" /></el-form-item><div class="flex justify-between items-center"><div><el-checkbox v-model="form.remember" label="自动登录" size="large" /></div><div><el-link type="primary" :underline="false">忘记密码</el-link><el-text type="primary"> / </el-text><el-link type="primary" :underline="false">注册</el-link></div></div><el-form-item><el-button type="primary" class="w-full">登录</el-button></el-form-item></el-form><el-divider><span class="text-10px">其他登录方式</span></el-divider><div class="flex justify-around"><Iconv-for="(item, index) in loginWay_list":key="index":icon="item.icon":style="{color: item.color}"class="inline-block text-24px cursor-pointer"/></div></div></div></div>
</template><style scoped lang="scss"></style><route lang="yaml">
meta:layout: none
</route>