From ba085e2d9188544ac1717b561ec85efa0b446e3e Mon Sep 17 00:00:00 2001 From: ProYRB <2453266068@qq.com> Date: Tue, 8 Jun 2021 15:59:49 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login.qml | 494 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 494 insertions(+) create mode 100644 login.qml diff --git a/login.qml b/login.qml new file mode 100644 index 0000000..7e3e278 --- /dev/null +++ b/login.qml @@ -0,0 +1,494 @@ +import QtGraphicalEffects 1.0 +import QtQuick 2.9 +import QtQuick.Controls 2.5 +import QtQuick.Window 2.3 + +import "login_functions.js" as LoginFun + +Window { + id: winLogin + visible: true + height: 215 + color: Qt.rgba(0, 0, 0, 0) + + //无系统边框|始终置顶 + flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint + //窗口宽度自动适应输入框大小 + width: longestLength > minWidth - spacing ? longestLength + spacing * 2 : minWidth + + //最小宽度 + property int minWidth: 310 + //到输入框到边缘的最小距离 + property int spacing: 10 + //两个输入框中最长的长度 + property int longestLength: (tfAccount.width > tfPassword.width) ? tfAccount.width : tfPassword.width + + //窗口阴影 + Rectangle { + id: recWinShadow + width: parent.width + height: parent.height + color: Qt.rgba(0, 0, 0, 0) + anchors.fill: parent + layer.enabled: true + layer.effect: DropShadow { + width: parent.width + height: parent.height + anchors.centerIn: parent + transparentBorder: true + radius: recMainView.fitRadius + samples: radius * 2 + 1 + } + + //显示面板 + Rectangle { + id: recMainView + width: parent.width - fitShadowSpacing * 2 + height: parent.height - fitShadowSpacing * 2 + color: Qt.rgba(1, 1, 1, 1) + anchors.centerIn: parent + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + id: recMask + width: recMainView.width + height: recMainView.height + radius: recMainView.fitRadius + } + } + + //圆角半径 + property int fitRadius: 8 + //显示面板到阴影边缘的间距 + property int fitShadowSpacing: 4 + + //背景 + Rectangle { + id: iteBackground + width: parent.width + height: parent.height + z: 0 + + LinearGradient { + z: 0 + anchors.fill: parent + start: Qt.point(0, 0) + end: Qt.point(width, height) + gradient: Gradient { + GradientStop { + position: LoginFun.getRandNumb(0, 2) / 10 + color: Qt.rgba(LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, 0.5) + } + GradientStop { + position: LoginFun.getRandNumb(4, 6) / 10 + color: Qt.rgba(LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, 0.5) + } + GradientStop { + position: LoginFun.getRandNumb(8, 10) / 10 + color: Qt.rgba(LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, 0.5) + } + } + } + LinearGradient { + z: 1 + anchors.fill: parent + start: Qt.point(width, 0) + end: Qt.point(0, height) + gradient: Gradient { + GradientStop { + position: LoginFun.getRandNumb(0, 2) / 10 + color: Qt.rgba(LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, 0.5) + } + GradientStop { + position: LoginFun.getRandNumb(4, 6) / 10 + color: Qt.rgba(LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, 0.5) + } + GradientStop { + position: LoginFun.getRandNumb(8, 10) / 10 + color: Qt.rgba(LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, LoginFun.getRandNumb(50, 100) / 100, 0.5) + } + } + } + FastBlur { + id: fbGlass + source: parent + width: source.width + height: source.height + z: 1 + anchors.fill: parent + radius: 120 + } + } + //装饰 + Rectangle { + id: recDecorate + z: iteBackground.z + 1 + } + //主板 + Item { + id: iteMainboard + width: iteInput.width + height: iteMenu.height + iteInput.height + iteLogin.height + spacing * 2 + z: recDecorate.z + 1 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: iteFrame.bottom + + //控件的间距 + property int spacing: 10 + + //菜单 + Item { + id: iteMenu + width: 120 + height: labLogin.height + recMovingSign.height + spacing + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + + //控件的间距 + property int spacing: 5 + //选中标志的高度 + property int fitSignHeight: 4 + //当前模式 + property bool pattern: true + + //选中标志 + Rectangle { + id: recMovingSign + width: labLogin.width + height: parent.fitSignHeight + z: 1 + color: Qt.rgba(1, 1, 0.28, 0.85) + radius: 2 + anchors.left: labLogin.left + anchors.bottom: iteMenu.bottom + } + //登录标签 + Label { + id: labLogin + z: 0 + font { + family: "微软雅黑" + pointSize: 12 + } + text: qsTr("登录") + anchors.left: parent.left + anchors.top: parent.top + + //鼠标操作区 + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + + onClicked: { + recMovingSign.width = parent.width + recMovingSign.anchors.left = parent.left + recMovingSign.anchors.right = parent.right + texLogin.text = qsTr("登录") + iteMenu.pattern = true + } + } + } + //注册标签 + Label { + id: labRegister + z: 0 + font { + family: "微软雅黑" + pointSize: 12 + } + text: qsTr("注册") + anchors.right: parent.right + anchors.top: parent.top + + //鼠标操作区 + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + + onClicked: { + recMovingSign.width = parent.width + recMovingSign.anchors.left = parent.left + recMovingSign.anchors.right = parent.right + texLogin.text = qsTr("注册") + iteMenu.pattern = false + } + } + } + } + //输入 + Item { + id: iteInput + width: (tfAccount.width > tfPassword.width ? tfAccount.width : tfPassword.width) + height: tfAccount.height + tfPassword.height + spacing + anchors.horizontalCenter: iteMainboard.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + + //输入框圆角半径 + property int fitRadius: 8 + //控件的间距 + property int spacing: 6 + + //输入框 + TextField { + id: tfAccount + background: Rectangle { + radius: parent.parent.fitRadius + color: tfAccount.activeFocus ? Qt.rgba(0.99, 0.99, 0.99, 0.42) : Qt.rgba(0.85, 0.85, 0.85, 0.3) + } + font { + family: "微软雅黑" + pointSize: 12 + } + leftPadding: 5 + rightPadding: 5 + placeholderText: qsTr("请输入账号") + selectByMouse: true + selectionColor: Qt.rgba(0.5, 0.5, 0.5, 1) + echoMode: TextInput.Normal + anchors.horizontalCenter: iteInput.horizontalCenter + anchors.top: iteInput.top + } + //输入框 + TextField { + id: tfPassword + background: Rectangle { + radius: parent.parent.fitRadius + color: tfPassword.activeFocus ? Qt.rgba(0.99, 0.99, 0.99, 0.42) : Qt.rgba(0.85, 0.85, 0.85, 0.3) + } + font { + family: "微软雅黑" + pointSize: 12 + } + leftPadding: 5 + rightPadding: 5 + placeholderText: qsTr("请输入密码") + selectByMouse: true + selectionColor: Qt.rgba(0.5, 0.5, 0.5, 1) + echoMode: TextInput.Password + anchors.horizontalCenter: iteInput.horizontalCenter + anchors.bottom: iteInput.bottom + } + } + //登录 + Item { + id: iteLogin + width: iteMenu.width + height: recButShadow.height + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + + //按钮阴影 + Rectangle { + id: recButShadow + width: 110 + height: 36 + color: Qt.rgba(0, 0, 0, 0) + layer.enabled: true + layer.effect: DropShadow { + width: parent.width + height: parent.height + anchors.centerIn: parent + transparentBorder: true + radius: recLogin.fitRadius + samples: radius * 2 + 1 + } + anchors.centerIn: parent + + //登录按钮 + Rectangle { + id: recLogin + width: parent.width - fitShadowSpacing * 2 + height: parent.height - fitShadowSpacing * 2 + radius: fitRadius + color: Qt.rgba(0.999, 0.999, 0.999, 1) + anchors.centerIn: parent + + //圆角半径 + property int fitRadius: 8 + //按钮到阴影边缘的间距 + property int fitShadowSpacing: 4 + //当前模式 + property bool pattern: iteMenu.pattern + + //登录信号 + signal login_Account_Password(string account, string password) + //注册信号 + signal register_Password(string account, string password) + + //鼠标操作区域 + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + + onPressed: { + parent.color = Qt.rgba(0.9, 0.9, 0.9, 1) + } + onReleased: { + parent.color = Qt.rgba(0.999, 0.999, 0.999, 1) + } + onClicked: { + if(parent.pattern) { + if(tfAccount.text == "" || tfPassword.text == "") { + texNote.text = qsTr("不能为空") + timTimer.reset() + timTimer.start() + } + else { + texNote.text = qsTr("登录成功") + timTimer.reset() + timTimer.start() + recLogin.login_Account_Password(tfAccount.text, tfPassword.text) + } + } + else { + if(tfAccount.text == "" || tfPassword.text == "") { + texNote.text = qsTr("不能为空") + timTimer.reset() + timTimer.start() + } + else { + texNote.text = qsTr("注册成功") + timTimer.reset() + timTimer.start() + } + } + } + } + //文本 + Text { + id: texLogin + font { + family: "微软雅黑" + pointSize: 14 + } + text: qsTr("登录") + anchors.centerIn: parent + } + } + } + } + } + //边框 + Item { + id: iteFrame + width: parent.width + height: recClose.height + z: iteMainboard.z + 1 + anchors.top: parent.top + + //鼠标操作区域 + MouseArea { + id: maFrame + z: 0 + anchors.fill: parent + acceptedButtons: Qt.LeftButton + + property point clickPosition: "0,0" + property point offset: "0,0" + + onPressed: { + clickPosition = Qt.point(mouse.x, mouse.y) + } + onPositionChanged: { + offset = Qt.point(mouse.x - clickPosition.x, mouse.y - clickPosition.y) + winLogin.setX(winLogin.x + offset.x) + winLogin.setY(winLogin.y + offset.y) + } + } + //关闭按钮 + Rectangle { + id: recClose + width: 32 + height: 22 + z: maFrame.z + 1 + color: Qt.rgba(0, 0, 0, 0) + anchors.right: parent.right + + //鼠标操作区域 + MouseArea { + id: maClose + z: 0 + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + + onEntered: { + parent.color = Qt.rgba(0.6, 0.6, 0.6, 0.5) + } + onExited: { + parent.color = Qt.rgba(0, 0, 0, 0) + } + onPressed: { + parent.color = Qt.rgba(0.3, 0.3, 0.3, 0.5) + } + onClicked: { + Qt.quit() + } + } + //文字 + Text { + id: texClose + z: maClose.z + 1 + font { + family: "微软雅黑" + pointSize: 16 + } + text: "×" + color: Qt.rgba(1, 0, 0, 1) + anchors.centerIn: parent + } + } + } + //提示框 + Item { + id: iteNote + width: parent.width + height: texNote.height + z: iteMainboard.z + 1 + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + + function show(message){ + ; + } + + Text { + id: texNote + font { + family: "微软雅黑" + pointSize: 10 + } + text: qsTr("") + anchors.centerIn: parent + + Timer { + id: timTimer + interval: 1000 + repeat: true + onTriggered: { + ++count + if(count == defNum){ + parent.text = qsTr("") + count = 0 + stop() + } + } + + //最高计数次数 + property int defNum: 3 + //总计数次数 + property int count: 0 + + function reset() { + count = 0 + stop() + } + } + } + } + } + } +} -- GitLab