当前位置: 首页 > Web前端 > HTML5

Electron仿百度网盘客户端2(登录界面制作)

时间:2023-04-05 19:17:41 HTML5

效果预览大小测量百度网盘客户端大小为:主界面w:662pxh:442pxtopheaderh:75pxbg:#EFF2F6开始制作下载安装electron-vue制作登录界面先隐藏主界面mainWindow只需要在主界面index.js进程中设置show:false然后做一个登录界面创建一个login.js在主进程index.js中引入login.js代码import{BrowserWindow}from'electron'letloginWindow=null;constloginUrl=process.env.NODE_ENV==='开发'?`http://localhost:9080/#/login`:`file://${__dirname}/index.html/#/login`;functioncreateLoginWindow(){loginWindow=newBrowserWindow({width:662,height:442,useContentSize:true,frame:false,resizable:false});loginWindow.setMenu(null);loginWindow.loadURL(loginUrl);}createLoginWindow();创建登录路由{path:'/login',name:'login',component:()=>import('@/view/login')},创建登录界面

样式代码*{padding:0;保证金:0;}.login{宽度:662px;高度:442px;边框:1px实心#999999;font-family:"微软雅黑";-webkit-用户选择:无;}header{高度:75px;背景色:#EFF2F6;-webkit-app-region:拖动;位置:相对;}图标下载去阿里矢量素材中心下载一样的图标,耐心点,有时候很难找到一样的!下载后丢到assets/fonts目录下,importimport'./assets/fontsinlogin.vue/iconfont.css'header制作header代码
head样式header{height:75px;背景色:#EFF2F6;-webkit-app-region:拖动;位置:相对;}header.logo{宽度:140px;高度:75px;背景:url("../../assets/img/logo@2x.png")no-repeat020px;background-size:140px33px;margin:0auto;}header.menu{width:100px;height:30px;position:absolute;right:0;top:0;text-align:right;padding-top:8px;padding-right:8px;}header.menuspan{display:inline-block;width:22px;height:22px;margin-left:5px;-height:22px;}左扫码模板代码

扫一扫登录

请使用xxxxxApp扫码登录

刷新二维码样式main{height:365px;填充顶部:30px;背景:#FFFFFF;}main.scanp.title{文本对齐:居中;字体大小:14px;颜色:#666666;字体粗细:正常;顶部边距:30px;}.scanp.titlei{显示:内联块;字体样式:正常;右边距:5px;左边距:5px;颜色:#398CFF;游标:指针;}.scanp.titlei:hover{border-bottom:1pxsolid#398CFF;}main.scanh2{文本对齐:居中;字体大小:16px;字体粗细:正常;}main.scanh2i{margin-right:5px;字体大小:14px;}.scan.qrcode{宽度:154px;高度:154px;边距:20px自动0自动;填充:10px;边界半径:3px;边框:1px实心#ECEDEE;}.scan.qrcodeimg{宽度:100%;高度:100%;}.scanspan.refresh{显示:块;宽度:94px;高度:30px;边框:1px实心#BAD4FD;边距:22px自动0自动;字体大小:12px;文本对齐:居中;行高:30px;半径:4px;颜色:#3482F9;}右侧表单模板代码账号密码登录短信快捷登录>忘记密码?登录注册账号样式代码.form{padding-right:30px;左填充:10px;}.form.validate_msg{高度:37px;}.form.header{显示:flex;}.form.headeri{字体样式:正常;颜色:#3482F9;游标:指针;左边距:自动;字体大小:12px;}.forminput,.formbutton{outline:none;}.forminput.text{高度:40px;宽度:290px;边框:1px实心#C7C7C7;左填充:35px;边界半径:1px;}.form.form_item{margin-bottom:16px;位置:相对;}.form.form_item:nth-last-child(2){/*margin-bottom:10px;*/}.form.form_itemi{position:absolute;字体大小:16px;顶部:12px;左:10px;颜色:#000000;}.form.form_options{显示:flex;}.form.form_optionsi{margin-left:auto;字体样式:正常;字体大小:12px;颜色:#3482F9;游标:指针;位置:相对;顶部:3px;}.form.form_optionsi:hover{文本装饰:下划线;}.login_options.option_item{显示:内联块;宽度:13px;高度:13px;右边距:5px;位置:相对;边框:1px实心#B3B3B3;垂直对齐:中间;游标:指针;顶部:-1px;}.login_options.option_item输入{不透明度:0;}.login_optionsspan.text{显示:内联块;右边距:14px;字体大小:13px;}.login_options.option_itemspan.checked{位置:绝对;顶部:-5px;右:-1px;字体粗细:粗体;显示:内联块;宽度:13px;高度:13px;游标:指针;}.form_optionslabel{光标:指针;}.option_itemspan.checkedimg{宽度:100%;高度:100%;}input[type="checkbox"]+span{不透明度:0;}input[type="checkbox"]:checked+span{不透明度:1;}button.submit{margin-top:25px;宽度:100%;高度:38px;背景色:#398CFF;颜色:#FFFFFF;边框:无;边界半径:3px;字体大小:16px;字体系列:微软雅黑;}.form.footer{显示:flex;位置:绝对;底部:15px;宽度:300px;}。形式.footeri.register{font-style:normal;字体大小:13px;颜色:#3482F9;游标:指针;}.form.footeri.register:hover{文本装饰:下划线;}.form.footerdiv{margin-left:auto;颜色:#5D9BFA;}.form.footerdivi{显示:内联块;左边距:10px;宽度:20px;高度:20px;文本对齐:居中;行高:20px;游标:指针;字体大小:18px;}.form.footerdivi:hover{背景颜色:#EBF3FF;}到此结束,没有短信登录的界面!免责声明:本项目仅供学习使用,请勿用于商业用途,项目中使用的百度网盘标识仅供学习使用!下载代码github:https://github.com/lihaotian0...代码云地址:https://gitee.com/leehaotian/...qq群:814270669