interfaz de inicio de sesión QQ de imitación electrónica

Primero mire la interfaz de inicio de sesión de qq:

Listo para desarrollar

Haz una ventana primero

Código de proceso principal:

import {BrowserWindow, webContents, app, ipcMain} from 'electron'

LoginWindow();    //暂时调用

ipcMain.on('quitApp', () => {
    app.quit();
});

function LoginWindow() {
    const loginURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/login` : `file://${__dirname}/index.html/#/login`;
    const loginWindow = new BrowserWindow({
        width: 430,
        height: 328,
        alwaysOnTop: true,
        modal: true,
        frame: false,
        darkTheme: true,
        resizable: false,
        minimizable: false,
        maximizable: false,
        transparent: true,
        webPreferences: {
            devTools: false,
        }
    });


    loginWindow.setMenu(null);
    loginWindow.loadURL(loginURL);
}

Diseño básico de la interfaz.

Primero hagamos una interfaz como esta

Código de página:

<template>
    <div class="mainWindow">
        <header class="header"></header>
        <main>
            <div class="bg"></div>
            <div class="body"></div>
        </main>
        <footer class="footer"></footer>
    </div>
</template>

<script>
    import '@/assets/css/login.css'

    export default {
      
    }
</script>

Código de estilo:

/**
取消全部的外边距和内边距
 */
* {
    padding: 0;
    margin: 0;
}

/*设置窗口的样式*/
.mainWindow {
    cursor: pointer;    /*设置手型*/
    border: 1px solid red;  /*加一个边框 调试样式 最后要删除或者更改**/
    width: 428px;   /*设置宽度  必须要和主进程中设置的一样 不能大于主进程中设置的宽度 否则会出现滚动条*/
    height: 326px;  /*设置高度  必须要和主进程中设置的一样 不能大于主进程中设置的高度 否则会出现滚动条*/
    position: relative; /*设置为相对定位*/
    border-radius: 4px; /*设置圆角*/
}

/**
header的样式 header中只会有一个关闭按钮 处于右上角
 */
.mainWindow header.header {
    position: absolute; /*设置绝对定位 因为背景在他下面*/
    height: 30px;   /*设置高度*/
    background: rgba(0, 0, 0, 0.5); /*暂时设置的 后面要删除或者更改*/
    border-radius: 4px 4px 0 0; /*给header的左上角 右上角设置圆角 不然会出现很尴尬的页面*/
    width: 428px;   /* 因为设置了绝对定位 设置宽度*/
}

/**
背景
 */
.mainWindow main .bg {
    height: 124px;  /*设置高度*/
    width: 428px;   /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    border-radius: 4px 4px 0 0; /*给左上角 右上角设置圆角 不然会出现很尴尬的页面 这里和header重合在一起了*/
    background: blue;  /*暂时设置的 后面要删除或者更改*/
}

/**
放置表单的元素
 */
.mainWindow main .body {
    width: 428px;  /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    height: 172px;  /*设置高度 这里的高度是 主窗口(326) - footer(30) - 背景(124) 因为header设置了绝对定位 所以不用关 */
    background: green;  /*暂时设置的 后面要删除或者更改*/
}

.mainWindow footer.footer {
    position: absolute; /* 设置绝对定位 要让他处于窗口的最底部*/
    height: 30px; /*设置高度 */
    background: red;  /*暂时设置的 后面要删除或者更改*/
    bottom: 0;  /*让footer处于底部*/
    width: 428px; /* 因为设置了绝对定位 设置宽度*/
}

Arrastrar ventana

Tenga cuidado de no usar el arrastre incorporado. ¡Tenemos que implementarlo nosotros mismos! ¡
Agregue el siguiente código a la página para lograr el arrastre!

data() {
            return {
                windowX: 0,
                windowY: 0,
            }
        },
        mounted() {
            let win = this.$electron.remote.getCurrentWindow();

            document.addEventListener('mousedown', function (e) {
                this.windowX = e.x;
                this.windowY = e.y;
                document.addEventListener('mousemove', moveEvent);
            });

            document.addEventListener('mouseup', function () {
                this.windowX = 0;
                this.windowY = 0;
                document.removeEventListener('mousemove', moveEvent)
            });

            function moveEvent(e) {

                win.setPosition(e.screenX - this.windowX, e.screenY - this.windowY)
            }
        }

Establecer imagen de fondo

Modifique el .bg en css para:

.mainWindow main .bg {
    height: 124px;  /*设置高度*/
    width: 428px;   /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    border-radius: 4px 4px 0 0; /*给左上角 右上角设置圆角 不然会出现很尴尬的页面 这里和header重合在一起了*/
    background: url("../images/login-back.gif") 10px;
    background-size: 100%;
}

Después de la finalización, el efecto es el siguiente:

Hacer top

El logotipo y la minimización en la parte superior no se realizarán, solo haga un botón de cierre,
vaya a la biblioteca de iconos de Alibaba para descargar el archivo de fuente, colóquelo en el directorio de activos / fuentes
y agréguelo a la página:

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

código de encabezado:

 <header class="header">
            <span class="iconfont icon-guanbi1"></span>
 </header>

Tenga en cuenta que el archivo css se agrega en el encabezado css .mainWindow header.header
debido a la relación entre mi imagen de fondo y el botón puede no ser obvio. Este problema no es demasiado grande. ¡Puede cambiar la imagen usted mismo!

background: rgba(255, 255, 255, 0.2); /*暂时设置的 后面要删除或者更改*/
text-align: right;

.mainWindow header.header span{
    display: inline-block;
    height: 30px;
    width:30px;
    text-align: center;
    line-height: 30px;
    color:#E4393c;
}
.mainWindow header.header span:hover{
    background-color: rgba(255,255,255,0.6);
}

Haz una página de formulario

Código de interfaz de formulario

Cree un subcomponente login.vue y
escriba el siguiente código:

<template>
    <div class="form">
        <form>
            <div class="form_item"><i class="iconfont icon-1zhanghu"></i><input type="text"></div>
            <div class="form_item"><i class="iconfont icon-mima1"></i><input type="password"></div>
        </form>
        <div class="buttons">
            <button>登录</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login"
    }
</script>

Página de formulario css

Necesita ajustar el color de fondo de .mainWindow main .body a #FFFFFF

.form form{
    padding:10px 90px 0 90px;
}
.form_item{
    height: 40px;
    position: relative;
}
.form_item i.iconfont{
    position: absolute;
    top:5px;
}
.form_item input{
    outline: none;
    border:none;
    padding-left: 20px;
    font-size: 16px;
    width: 230px;
    height: 30px;
    border-bottom: 1px solid #CCC;
}
.buttons{
    text-align: center;
}
.buttons button{
    background-color: #CF000E;
    border: none;
    width: 250px;
    color: #FFFFFF;
    height: 35px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
}

Efecto

Finalmente vi algo como esto

Embellecimiento de casilla de verificación

Código de componente

<div class="login_options">
                <label><div class="option_item"><input type="checkbox"><span class="checked"><img src="@/assets/images/checked.png" alt=""></span></div><i class="text">自动登录</i></label>
                <label><div class="option_item"><input type="checkbox"><span class="checked"><img src="@/assets/images/checked.png" alt=""></span></div><i class="text">记住密码</i></label>
                <i class="text">忘记密码</i>
</div>

código css

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

.login_options .option_item input {
    opacity: 0;
}
.login_options  i.text{
    display: inline-block;
    margin-right: 14px;
    font-size: 13px;
    font-style: normal;
}

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

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

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

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

Efecto

Página de registro

Mejoramos un poco porque el registro de QQ es un enlace a una página web para solicitar un número QQ, pero lo que hice fue hacer clic en el registro para cambiar la interfaz a la interfaz de registro, pero simplemente
comente el inicio de sesión del componente principal antes de escribir el código de la interfaz de registro Repuesto (no lo elimine) Introduzca la
lógica de registro del componente de registro en el componente principal de esta manera. Después de ingresar el número de teléfono móvil y el código de verificación gráfico en la interfaz de registro para obtener el código de verificación de SMS, vaya al siguiente paso e ingrese la contraseña.
Si escribe toda la lógica para Un componente causará demasiado tiempo. Aunque hay una manera de resolverlo, ¡será feo usar la animación más tarde!

Código de interfaz

<template>
    <div class="form">
        <form>
            <div class="form_item"><i class="iconfont icon-phone_icon"></i><input type="text"></div>
            <div class="form_item">
                <i class="iconfont icon-yanzhengma2"></i>
                <input type="password">
                <div class="captcha">
                    <img src="@/assets/images/captcha.png" alt="">
                </div>
            </div>
            <div class="form_item">
                <i class="iconfont icon-yanzhengma5"></i>
                <input type="password">
                <div class="send_sms_captcha"><button>获取短信验证码</button></div>
            </div>
        </form>
        <div class="buttons">
            <button>下一步</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "register"
    }
</script>

Interfaz de código CSS

.captcha {
    position: absolute;
    width: 120px;
    height: 30px;
    top: -2px;
    right: 0;
}

.captcha img {
    width: 100%;
    height: 100%;
}

.send_sms_captcha {
    position: absolute;
    top: -2px;
    right: 0;
}
.send_sms_captcha  button{
    width:120px;
    height: 30px;
    border:none;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
}

Código de componente principal

Parte del código:

<main>
        <div class="bg"></div>
         <div class="body">
                <!--<Login></Login>-->
                <Register></Register>
            </div>
        </main>

Efecto

Paso de registro 2

Código de interfaz

<template>
    <div class="form">
        <form>
            <div class="form_item"><i class="iconfont icon-zaicishurumima"></i><input type="text"></div>
            <div class="form_item"><i class="iconfont icon-mima1"></i><input type="password"></div>
            <div class="login_options" style="text-align: center">
                <label><div class="option_item"><input type="checkbox"><span class="checked"><img src="@/assets/images/checked.png" alt=""></span></div><i class="text">自动登录</i></label>
                <label><div class="option_item"><input type="checkbox"><span class="checked"><img src="@/assets/images/checked.png" alt=""></span></div><i class="text">记住密码</i></label>
            </div>
        </form>
        <div class="buttons">
            <button>登录</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "steps2"
    }
</script>

Mostrar

código de pie de página

Introduccion

En lo anterior, la cuenta registrada
se muestra en el pie de página. De hecho, esto es solo una solución temporal. Para facilitar la captura de pantalla,
primero analice la cuenta registrada en la parte inferior al iniciar sesión. En el primer paso del registro, la cuenta registrada se muestra en la parte inferior izquierda. Los pasos se muestran al volver al paso anterior.
Tenemos muchas formas de notificar al componente principal que muestre texto diferente en el componente secundario.
El autor ofrece dos soluciones:
1: pasar el valor al componente primario a través del componente secundario
2: usar vuex
3: dividir el pie de página en los diversos componentes
de nuestro código usando el punto de división en la línea es relativamente sencilla
a pie de página componente de matriz de eliminación
de componentes steps2.vue login.vue steps1.vue componente añadido de pie de página

login.vue:

<template>
    <div class="form">
        <form>
            <div class="form_item"><i class="iconfont icon-1zhanghu"></i><input type="text"></div>
            <div class="form_item"><i class="iconfont icon-mima1"></i><input type="password"></div>
            <div class="login_options">
                <label><div class="option_item"><input type="checkbox"><span class="checked"><img src="@/assets/images/checked.png" alt=""></span></div><i class="text">自动登录</i></label>
                <label><div class="option_item"><input type="checkbox"><span class="checked"><img src="@/assets/images/checked.png" alt=""></span></div><i class="text">记住密码</i></label>
                <i class="text">忘记密码</i>
            </div>
        </form>
        <div class="buttons">
            <button>登录</button>
        </div>
        <footer class="footer">
            <span @click="toggleWindow">注册账号</span>
        </footer>
    </div>
</template>

<script>
    export default {
        name: "login",
        methods:{
            toggleWindow(){
                this.$store.dispatch('toggleLogin');
            }
        }
    }
</script>

steps1.vue

<template>
    <div class="form">
        <form>
            <div class="form_item"><i class="iconfont icon-phone_icon"></i><input type="text"></div>
            <div class="form_item">
                <i class="iconfont icon-yanzhengma2"></i>
                <input type="password">
                <div class="captcha">
                    <img src="@/assets/images/captcha.png" alt="">
                </div>
            </div>
            <div class="form_item">
                <i class="iconfont icon-yanzhengma5"></i>
                <input type="password">
                <div class="send_sms_captcha"><button>获取短信验证码</button></div>
            </div>
        </form>
        <div class="buttons">
            <button @click="toggleSteps">下一步</button>
        </div>
        <footer class="footer">
            <span @click="toggleWindow">已有账号</span>
        </footer>
    </div>
</template>

<script>
    export default {
        name: "steps1",
        methods:{
            toggleWindow(){
                this.$store.dispatch('toggleLogin');
            },
            toggleSteps(){
                this.$store.dispatch('toggleSteps');
            },
        }
    }
</script>

steps2.vue

<template>
    <div class="form">
        <form>
            <div class="form_item"><i class="iconfont icon-zaicishurumima"></i><input type="text"></div>
            <div class="form_item"><i class="iconfont icon-mima1"></i><input type="password"></div>
            <div class="login_options" style="text-align: center">
                <label><div class="option_item"><input type="checkbox"><span class="checked"><img src="@/assets/images/checked.png" alt=""></span></div><i class="text">立即登录</i></label>
                <label><div class="option_item"><input type="checkbox"><span class="checked"><img src="@/assets/images/checked.png" alt=""></span></div><i class="text">记住密码</i></label>
            </div>
        </form>
        <div class="buttons">
            <button>注册</button>
        </div>
        <footer class="footer">
            <span @click="toggleSteps">返回上一步</span>
        </footer>
    </div>
</template>

<script>
    export default {
        name: "steps2",
        methods:{
            toggleSteps(){
                this.$store.dispatch('toggleSteps');
            },
        }
    }
</script>

código vuex

const state = {
    steps: true,
    login: true,
};

const actions = {
    toggleSteps: function ({state, commit}) {
        // state.steps = true;
        state.steps = !state.steps;
    },

    toggleLogin({state, commit}){
        state.login = !state.login;
    }
};

export default ({
    state,
    actions
});

Visualización de efectos

Añadir efectos de animación

Después de completar lo anterior, es un poco monótono, especialmente al cambiar, podemos usar la
dirección de descarga de animateCss animateCss: https: //daneden.github.io/ani ...

Subcomponentes añadidos:

 import '@/assets/css/animate.css'

Luego agregamos el efecto al código y
cambiamos el componente padre a:

 <main>
            <div class="bg"></div>
                <transition
                        :duration="500"
                        :enter-active-class="'animated ' + (login ?  'bounceInRight' : 'bounceInLeft')"
                        :leave-active-class="'animated ' + (login ? 'bounceOutLeft' : 'bounceOutRight')"
                >
                <Login v-if="login === true" key="login"></Login>
                <Register v-else key="register"></Register>
                </transition>
        </main>

El subcomponente register.vue se cambia a:

  <transition
                :duration="500"
                :enter-active-class="'animated ' + (steps ?  'bounceInRight' : 'bounceInLeft')"
                :leave-active-class="'animated ' + (steps ? 'bounceOutLeft' : 'bounceOutRight')"
        >
        <Steps1 v-if="steps === true" key="steps"></Steps1>
        <Steps2 v-else key="steps"></Steps2>
        </transition>

Modifique el CSS porque necesita colocar el principal para usar la animación para
agregar:

.mainWindow main {
    position: absolute;
}

Pantalla de efectos: aquí hay casi demasiado código para ser lanzado uno por uno. Si lo necesita, puede ir a github para descargar o agregar QQ group 814270669 dirección de github: https : //github.com/lihaotian0 ... Dirección de nube de código : https : //gitee.com/leehaotian / ...

Hay un problema con mi cuenta de github y no he podido iniciar sesión, así que primero lo publiqué en Code Cloud.

Este artículo se reproduce en: Ape 2048 → https://www.mk2048.com/blog/blog.php?id=h0jk2ck0bbb