python制作qq登录界面_electron 仿制QQ登录界面

2023-10-20 10:59

本文主要是介绍python制作qq登录界面_electron 仿制QQ登录界面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

首先来看看qq的登录界面:

b13170f69ac71276535e6e1a0debf34c.png

准备开发

制作一个窗口先

主进程代码:

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);

}

界面基本布局

我们先大概做一个这样的界面

26256d664a7e406c5fc908cf5384416d.png

页面代码:

import '@/assets/css/login.css'

export default {

}

样式代码:

/**

取消全部的外边距和内边距

*/

* {

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; /* 因为设置了绝对定位 设置宽度*/

}

窗口拖动

注意 不要使用内置的拖动 我们要自己实现!

在页面中加入以下代码就可以实现拖动了!

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)

}

}

设置背景图

将css里面的 .bg修改成:

.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%;

}

完成之后效果如如下:

b9388a548ce3317e29f1159e24d8ea56.gif

制作顶部

顶部的logo和最小化就不做了 只做一个关闭的按钮

去阿里巴巴图标库下载字体文件之后放到assets/fonts目录中

在页面中加入:

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

header代码:

css文件

注意 在css .mainWindow header.header 添加

由于我背景图的关系 按钮可能不太明显 这问题不大 大家可以自己换一个图!

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);

}

制作表单页

表单界面代码

创建一个子组件 login.vue

写入如下代码:

登录

export default {

name: "login"

}

表单页css

需要将 .mainWindow main .body 的背景颜色调成#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;

}

效果

最后看到是这样的

298daf140640f5a5cb605ec1b7348c06.png

复选框美化

组件代码

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;

}

效果

7c989d1e69240ce36a1f68dbafe6da34.pnge2b83fe860a1cfd0ed8bb8ccfef3e20c.png

注册页面

我们改进一点 因为qq的注册是一个连接到web页面去申请qq号码的 不过我做的是点击注册将界面切换到注册界面,只不过是

在写注册界面代码之前先将父组件种的login注释掉备用 (别删除哦) 在父组件中引入Register组件

注册的逻辑是这样的 在注册界面输入手机号和图形验证码 获取到短信验证码输入之后跳转到下一步输入密码

如果将全部的逻辑写到一个组件中会导致太长 虽然有办法解决 但是之后使用动画就很难看了!

界面代码

获取短信验证码

下一步

export default {

name: "register"

}

界面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;

}

父组件代码

部分代码:

效果

991d4fd189bac4d8d6e0d009376d25ad.png

注册步骤2

界面代码

登录

export default {

name: "steps2"

}

展示

ae818379916653cfb3686430183d9005.png

footer代码

jie简介

在上面中footer里面显示了注册账号

其实这只是暂时的方案 为了方便截图

首先来分析一下 在登录页面的时候在底部显示注册账号 在注册第一步的时候在底部左侧显示已经账号,在第二步骤的时候显示返回上一步

我们有很多办法在子组件通知父组件去显示不同的文字

作者给出两个方案:

1: 通过子组件给父组件传值

2: 使用vuex

3: 将footer拆分到各个组件中

我们代码中使用拆分就行了 比较简单点

将父组件的footer删除

往组件login.vue steps1.vue steps2.vue 组件中加入footer

login.vue:

登录

注册账号

export default {

name: "login",

methods:{

toggleWindow(){

this.$store.dispatch('toggleLogin');

}

}

}

steps1.vue

获取短信验证码

下一步

已有账号

export default {

name: "steps1",

methods:{

toggleWindow(){

this.$store.dispatch('toggleLogin');

},

toggleSteps(){

this.$store.dispatch('toggleSteps');

},

}

}

steps2.vue

注册

返回上一步

export default {

name: "steps2",

methods:{

toggleSteps(){

this.$store.dispatch('toggleSteps');

},

}

}

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

});

效果展示

4c3f570e877eabee502f3df52eca0434.gif

添加动画效果

上面这些完成之后有点单调 尤其是切换的时候 我们可以用到 animateCss

animateCss 下载地址:https://daneden.github.io/ani...

子组件加入:

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

之后我们在代码中加入效果就行了

将父组件改成:

:duration="500"

:enter-active-class="'animated ' + (login ? 'bounceInRight' : 'bounceInLeft')"

:leave-active-class="'animated ' + (login ? 'bounceOutLeft' : 'bounceOutRight')"

>

子组件 register.vue改成:

:duration="500"

:enter-active-class="'animated ' + (steps ? 'bounceInRight' : 'bounceInLeft')"

:leave-active-class="'animated ' + (steps ? 'bounceOutLeft' : 'bounceOutRight')"

>

修改下css 因为要使用动画就要将main定位才能用

加入:

.mainWindow main {

position: absolute;

}

效果展示:

6d6bada39afbcbe2f9d1a16614202cd0.gif

到这里就差不多了 代码太多没法一一发布上来 如果有需要的可以去github下载或者加QQ群 814270669

github地址:https://github.com/lihaotian0...

码云地址: https://gitee.com/leehaotian/...

我的github账号出了问题 一直登录不上去 所以就先发布到码云了

这篇关于python制作qq登录界面_electron 仿制QQ登录界面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/246646

相关文章

使用Python实现IP地址和端口状态检测与监控

《使用Python实现IP地址和端口状态检测与监控》在网络运维和服务器管理中,IP地址和端口的可用性监控是保障业务连续性的基础需求,本文将带你用Python从零打造一个高可用IP监控系统,感兴趣的小伙... 目录概述:为什么需要IP监控系统使用步骤说明1. 环境准备2. 系统部署3. 核心功能配置系统效果展

基于Python打造一个智能单词管理神器

《基于Python打造一个智能单词管理神器》这篇文章主要为大家详细介绍了如何使用Python打造一个智能单词管理神器,从查询到导出的一站式解决,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 项目概述:为什么需要这个工具2. 环境搭建与快速入门2.1 环境要求2.2 首次运行配置3. 核心功能使用指

Python实现微信自动锁定工具

《Python实现微信自动锁定工具》在数字化办公时代,微信已成为职场沟通的重要工具,但临时离开时忘记锁屏可能导致敏感信息泄露,下面我们就来看看如何使用Python打造一个微信自动锁定工具吧... 目录引言:当微信隐私遇到自动化守护效果展示核心功能全景图技术亮点深度解析1. 无操作检测引擎2. 微信路径智能获

Python中pywin32 常用窗口操作的实现

《Python中pywin32常用窗口操作的实现》本文主要介绍了Python中pywin32常用窗口操作的实现,pywin32主要的作用是供Python开发者快速调用WindowsAPI的一个... 目录获取窗口句柄获取最前端窗口句柄获取指定坐标处的窗口根据窗口的完整标题匹配获取句柄根据窗口的类别匹配获取句

利用Python打造一个Excel记账模板

《利用Python打造一个Excel记账模板》这篇文章主要为大家详细介绍了如何使用Python打造一个超实用的Excel记账模板,可以帮助大家高效管理财务,迈向财富自由之路,感兴趣的小伙伴快跟随小编一... 目录设置预算百分比超支标红预警记账模板功能介绍基础记账预算管理可视化分析摸鱼时间理财法碎片时间利用财

Python中的Walrus运算符分析示例详解

《Python中的Walrus运算符分析示例详解》Python中的Walrus运算符(:=)是Python3.8引入的一个新特性,允许在表达式中同时赋值和返回值,它的核心作用是减少重复计算,提升代码简... 目录1. 在循环中避免重复计算2. 在条件判断中同时赋值变量3. 在列表推导式或字典推导式中简化逻辑

python处理带有时区的日期和时间数据

《python处理带有时区的日期和时间数据》这篇文章主要为大家详细介绍了如何在Python中使用pytz库处理时区信息,包括获取当前UTC时间,转换为特定时区等,有需要的小伙伴可以参考一下... 目录时区基本信息python datetime使用timezonepandas处理时区数据知识延展时区基本信息

Python位移操作和位运算的实现示例

《Python位移操作和位运算的实现示例》本文主要介绍了Python位移操作和位运算的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 位移操作1.1 左移操作 (<<)1.2 右移操作 (>>)注意事项:2. 位运算2.1

使用Python和Pyecharts创建交互式地图

《使用Python和Pyecharts创建交互式地图》在数据可视化领域,创建交互式地图是一种强大的方式,可以使受众能够以引人入胜且信息丰富的方式探索地理数据,下面我们看看如何使用Python和Pyec... 目录简介Pyecharts 简介创建上海地图代码说明运行结果总结简介在数据可视化领域,创建交互式地

利用python实现对excel文件进行加密

《利用python实现对excel文件进行加密》由于文件内容的私密性,需要对Excel文件进行加密,保护文件以免给第三方看到,本文将以Python语言为例,和大家讲讲如何对Excel文件进行加密,感兴... 目录前言方法一:使用pywin32库(仅限Windows)方法二:使用msoffcrypto-too