专栏首页每天进步一点点electron仿制百度网盘客户端2(登录界面制作)

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

效果预览

尺寸测量

百度网盘客户端的尺寸是: 主界面 w:662px h:442px 顶部header h:75px bg:#EFF2F6

开始制作

下载安装electron-vue

制作登录界面

首先将主界面 mainWindow 隐藏掉 只需要在主进程index.js 里面设置show: false就可以了 之后制作一个登录界面 创建一个login.js 在主进程index.js之中引入 login.js 代码

import {BrowserWindow} from 'electron'

let loginWindow = null;

const loginUrl = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/login` : `file://${__dirname}/index.html/#/login`;

function createLoginWindow() {
    loginWindow = new BrowserWindow({
        width: 662,
        height: 442,
        useContentSize: true,
        frame: false,
        resizable: false
    });

    loginWindow.setMenu(null);

    loginWindow.loadURL(loginUrl);
}

createLoginWindow();

创建login路由

  {path: '/login', name: 'login', component: () => import('@/view/login')},

创建登录界面

<div class="login">
  <header></header>
 <main></main>
</div>

样式代码

    * {
        padding: 0;
        margin: 0;
    }

    .login {
        width: 662px;
        height: 442px;
        border: 1px solid #999999;
        font-family: "微软雅黑";
        -webkit-user-select: none;
    }

    header {
        height: 75px;
        background-color: #EFF2F6;
        -webkit-app-region: drag;
        position: relative;
    }

图标下载

去阿里矢量素材中心下载一致的图标, 耐心掉 因为有时候很难找到一样的! 下载完毕之后丢到 assets/fonts目录下 在 login.vue中引入

import './assets/fonts/iconfont.css'

头部制作

头部代码

<header>
            <div class="logo"></div>
            <div class="menu">
                <span class="iconfont lee-setting"></span>
                <span class="iconfont lee-zuixiaohua1"></span>
                <span class="iconfont lee-close"></span>
            </div>
        </header>

头部样式

    header {
        height: 75px;
        background-color: #EFF2F6;
        -webkit-app-region: drag;
        position: relative;
    }

    header .logo {
        width: 140px;
        height: 75px;
        background: url("../../assets/img/logo@2x.png") no-repeat 0 20px;
        background-size: 140px 33px;
        margin: 0 auto;
    }

    header .menu {
        width: 100px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 0;
        text-align: right;
        padding-top: 8px;
        padding-right: 8px;
    }

    header .menu span {
        display: inline-block;
        width: 22px;
        height: 22px;
        margin-left: 5px;
        cursor: pointer;
        text-align: center;
        line-height: 22px;
    }

左侧扫码

模板代码

 <main>
            <div class="scan">
                <h2><i class="iconfont lee-erweima1"></i>扫一扫登录</h2>
                <p class="title">请使用<i>xxxxxApp</i>扫码登录 </p>
                <div class="qrcode">
                    <img src="@/assets/img/qrcode.png" alt="">
                </div>
                <span class="refresh">刷新二维码</span>
            </div>
        </main>

样式

 main {
        height: 365px;
        padding-top: 30px;
        background: #FFFFFF;
    }

    main .scan p.title {
        text-align: center;
        font-size: 14px;
        color: #666666;
        font-weight: normal;
        margin-top: 30px;
    }

    .scan p.title i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
        margin-left: 5px;
        color: #398CFF;
        cursor: pointer;
    }

    .scan p.title i:hover {
        border-bottom: 1px solid #398CFF;
    }

    main .scan h2 {
        text-align: center;
        font-size: 16px;
        font-weight: normal;
    }

    main .scan h2 i {
        margin-right: 5px;
        font-size: 14px;
    }

    .scan .qrcode {
        width: 154px;
        height: 154px;
        margin: 20px auto 0 auto;
        padding: 10px;
        border-radius: 3px;
        border: 1px solid #ECEDEE;
    }

    .scan .qrcode img {
        width: 100%;
        height: 100%;
    }

    .scan span.refresh {
        display: block;
        width: 94px;
        height: 30px;
        border: 1px solid #BAD4FD;
        margin: 22px auto 0 auto;
        font-size: 12px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        border-radius: 4px;
        color: #3482F9;
    }

右侧表单

模板代码

  <div class="form">
                <div class="login_options">
                    <div class="header">
                        <span>账号密码登录</span>
                        <i>短信快捷登录></i>
                    </div>
                    <div class="validate_msg"></div>
                    <form action="">
                        <div class="form_item"><i class="iconfont lee-account"></i><input placeholder="手机号码/邮箱/用户名" class="text" type="text">
                        </div>
                        <div class="form_item"><i class="iconfont lee-mima"></i><input class="text" placeholder="请输入密码" type="password">
                        </div>
                        <div class="form_options">
                            <label>
                                <div class="option_item"><input type="checkbox"><span class="checked"><img
                                        src="@/assets/img/checked.png" alt=""></span></div>
                                <span class="text">自动登录</span></label>
                            <label>
                                <div class="option_item"><input type="checkbox"><span class="checked"><img
                                        src="@/assets/img/checked.png" alt=""></span></div>
                                <span class="text">记住密码</span></label>
                            <i>忘记密码?</i>
                        </div>
                    </form>
                    <button type="button" class="submit">登录</button>
                    <div class="footer">
                        <i class="register">注册账号</i>
                        <div class="thirdparty">
                            <i class="iconfont lee-weixin2"></i>
                            <i class="iconfont lee-xinlangweibo1"></i>
                            <i class="iconfont lee-tubiao215"></i>
                        </div>
                    </div>
                </div>
            </div>

样式代码

.form {
        padding-right: 30px;
        padding-left: 10px;
    }

    .form .validate_msg {
        height: 37px;
    }

    .form .header {
        display: flex;
    }

    .form .header i {
        font-style: normal;
        color: #3482F9;
        cursor: pointer;
        margin-left: auto;
        font-size: 12px;
    }

    .form input, .form button {
        outline: none;
    }

    .form input.text {
        height: 40px;
        width: 290px;
        border: 1px solid #C7C7C7;
        padding-left: 35px;
        border-radius: 1px;
    }

    .form .form_item {
        margin-bottom: 16px;
        position: relative;
    }
    .form .form_item:nth-last-child(2){
        /*margin-bottom: 10px;*/
    }

    .form .form_item i {
        position: absolute;
        font-size: 16px;
        top: 12px;
        left: 10px;
        color: #000000;
    }

    .form .form_options {
        display: flex;
    }

    .form .form_options i {
        margin-left: auto;
        font-style: normal;
        font-size: 12px;
        color: #3482F9;
        cursor: pointer;
        position: relative;
        top:3px;
    }

    .form .form_options i:hover {
        text-decoration: underline;
    }

    .login_options .option_item {
        display: inline-block;
        width: 13px;
        height: 13px;
        margin-right: 5px;
        position: relative;
        border: 1px solid #B3B3B3;
        vertical-align: middle;
        cursor: pointer;
        top: -1px;
    }

    .login_options .option_item input {
        opacity: 0;
    }

    .login_options span.text {
        display: inline-block;
        margin-right: 14px;
        font-size: 13px;
    }

    .login_options .option_item span.checked {
        position: absolute;
        top: -5px;
        right: -1px;
        font-weight: bold;
        display: inline-block;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

    .form_options label {
        cursor: pointer;
    }

    .option_item span.checked img {
        width: 100%;
        height: 100%;
    }

    input[type="checkbox"] + span {
        opacity: 0;
    }

    input[type="checkbox"]:checked + span {
        opacity: 1;
    }

    button.submit {
        margin-top: 25px;
        width: 100%;
        height: 38px;
        background-color: #398CFF;
        color: #FFFFFF;
        border:none;
        border-radius: 3px;
        font-size: 16px;
        font-family: 微软雅黑;
    }

    .form .footer{
        display: flex;
        position: absolute;
        bottom: 15px;
        width:300px;
    }

    .form .footer i.register{
        font-style: normal;
        font-size: 13px;
        color: #3482F9;
        cursor: pointer;

    }
    .form .footer i.register:hover{
        text-decoration: underline;
    }
    .form .footer div{
        margin-left: auto;
        color:#5D9BFA;
    }
    .form .footer div i{
        display: inline-block;
        margin-left: 10px;
        width:20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
        font-size: 18px;
    }
    .form .footer div i:hover{
        background-color: #EBF3FF;
    }

完结

到这里就完成了,没有制作短信登录的界面!

声明:

本项目只用于学习使用,请不要用于商业用途,项目中使用的百度网盘的Logo只作为学习使用!

下载代码

github: https://github.com/lihaotian0... 码云地址: https://gitee.com/leehaotian/... qq群: 814270669

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • electron仿制qq(2) 主界面制作

    制作从头开始 最后会将写好的组件放到一起的! 之前写了好几天的纯css 有点累 本章中将使用sass 如果代码太长 会分两个或多个章节写 代码中会有详细的注释...

    李昊天
  • electron制作聊天界面(仿制qq)

    这里解释一下为什么有一个paddingRight 因为我们的滚动条是5px 如果不加 在滚动条显示的时候页面会抖动

    李昊天
  • vue中使用viewerjs

    删掉生成的项目里面的helloWord.vue 修改路由 创建一个index.vue

    李昊天
  • JQuery实现聊天对话框

    skylark
  • electron仿制qq(2) 主界面制作

    制作从头开始 最后会将写好的组件放到一起的! 之前写了好几天的纯css 有点累 本章中将使用sass 如果代码太长 会分两个或多个章节写 代码中会有详细的注释...

    李昊天
  • span不如div的地方

    页面中产生格式化的效果,我一般比较喜欢用span,因为其本身就是inline的,但是,在进行精细控制时就不行了,比如我想要这个效果,每行由三个部分构成:时间,柱...

    用户1075292
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习
  • 我的markdown样式

    剑行者
  • CSS3绘图实战-Nut团队标志

    css每一代都会有革命性的更新,尽管目前还有一部分浏览器没有支持CSS3,就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋,一些早期不敢想象的东西,如今...

    练小习
  • 谈响应式web设计代码实现

    在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用i...

    RP道貌不岸然

扫码关注云+社区

领取腾讯云代金券