uniapp登录页面( 适配:pc、小程序、h5)
<!-- 简洁登录页面 -->
<template><view class="login-bg"><image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image><image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image><!-- 标题 --><view class="t-b">{{ title }}</view><view class="t-b2">欢迎登录</view><view class="t-login"><form class="cl"><view class="t-a"><image src="https://zhoukaiwen.com/img/loginImg/user.png"></image><input type="number" name="phone" placeholder="请输入账号" maxlength="11" v-model="phone" /></view><view class="t-a"><image src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image><input type="password" name="code" maxlength="6" placeholder="请输入密码" v-model="pwd" /></view><button @tap="login()">登 录</button><view class="t-c"><text class="t-c-txt" @tap="reg()">注册账号</text><text>返回首页</text></view></form><view class="t-f"><span :style="{width:width+'px'}"></span><text class="qt"> 其他登录方式 </text><span :style="{width:width+'px'}"></span></view><view class="t-e cl"><view class="t-g" @tap="wxLogin()"><image src="https://zhoukaiwen.com/img/loginImg/wx2.png"></image></view><view class="t-g" @tap="zfbLogin()"><image src="https://zhoukaiwen.com/img/loginImg/qq2.png"></image></view><view class="t-g" @tap="zfbLogin()"><image src="https://zhoukaiwen.com/img/loginImg/wb.png"></image></view></view></view><image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image></view>
</template>
<script>export default {data() {return {title: '数字政务!', //填写logo或者app名称,也可以用:欢迎回来,看您需求phone: '', //手机号码pwd: '', //密码width: ''};},onLoad() {setTimeout(() => {let query = uni.createSelectorQuery();query.select('.qt').boundingClientRect()query.select('.t-f').boundingClientRect()query.exec((res) => {console.log("res[0]", res[0]);console.log("res[1]", res[1])this.width = ((res[1].width - res[0].width) / 2) - 15})}, 200)},methods: {//当前登录按钮操作login() {var that = this;if (!that.phone) {uni.showToast({title: '请输入手机号',icon: 'none'});return;}if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {uni.showToast({title: '请输入正确手机号',icon: 'none'});return;}if (!that.pwd) {uni.showToast({title: '请输入密码',icon: 'none'});return;}uni.showToast({title: '登录成功!',icon: 'none'});},//立刻注册reg() {uni.showToast({title: '注册账号',icon: 'none'});}}};
</script>
<style scoped>.img-a {position: absolute;width: 100%;top: -150rpx;right: 0;z-index: -1;}.img-b {position: absolute;width: 50%;bottom: 0;left: -50rpx;z-index: -1;}.login-bg {max-width: 750px;width: 100vw;min-height: 100vh;}.t-b {text-indent: 40rpx;font-size: 46rpx;color: #000;padding: 200rpx 0 30rpx 0;font-weight: bold;}.t-b2 {text-indent: 40rpx;font-size: 32rpx;color: #aaaaaa;padding: 0rpx 0 60rpx 0;}.t-login {width: 80%;padding: 55rpx;margin: 0rpx auto 0 auto;font-size: 28rpx;z-index: 9;}.t-login button {font-size: 28rpx;background: linear-gradient(to right, #5677fc, hsla(217 100% 56% / 1));/* background-image: linear-gradient(325deg,hsla(217 100% 56% / 1) 0%,hsla(194 100% 69% / 1) 55%,hsla(217 100% 56% / 1) 90%); */color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;}.t-login input {padding: 0 20rpx 0 120rpx;height: 90rpx;line-height: 90rpx;margin-bottom: 50rpx;background: #f6f6f6;border: 1px solid #f6f6f6;font-size: 28rpx;border-radius: 50rpx;}.t-login .t-a {position: relative;}.t-login .t-a image {width: 40rpx;height: 40rpx;position: absolute;left: 40rpx;top: 28rpx;}.t-login .t-b {text-align: left;font-size: 46rpx;color: #000;padding: 300rpx 0 120rpx 0;font-weight: bold;}.t-login .t-d {text-align: center;color: #999;margin: 80rpx 0;}.t-login .t-c {display: flex;justify-content: space-evenly;color: #666666;margin: 30rpx 30rpx 40rpx 0;}.t-login .t-c .t-c-txt {margin-right: 300rpx;}.t-login .t-e {text-align: center;width: 80%;margin: 40rpx auto 0;}.t-login .t-g {float: left;width: 33.33%;}.t-login .t-e image {width: 70rpx;height: 70rpx;}.t-login .t-f {width: 100%;display: flex;align-items: center;justify-content: space-between;margin: 80rpx 0 0 0;color: #999;position: relative;}.t-login .t-f text {color: #b9b9b9;font-size: 27rpx;}.t-login .t-f span {display: block;background-color: #000;width: auto;height: 1.5rpx;}.t-login .uni-input-placeholder {color: #aeaeae;}.cl {zoom: 1;}.cl:after {clear: both;display: block;visibility: hidden;height: 0;content: '\20';}
</style>
参考文章:
复制了这个博主的大部分html结构和部分css(目前放置的是我初版的样式和代码后续根据业务调整了下,同时为了适配兼容修改成弹性布局及动态宽度)
uni-app 微信小程序之好看的ui登录页面(一)_微信小程序登录页面-CSDN博客
uni-app 微信小程序之好看的ui登录页面(四)_微信小程序 登录页 样式-CSDN博客
相关文章:

uniapp登录页面( 适配:pc、小程序、h5)
<!-- 简洁登录页面 --> <template><view class"login-bg"><image class"img-a" src"https://zhoukaiwen.com/img/loginImg/2.png"></image><image class"img-b" src"https://zhoukaiwen.com/im…...

关于OceanBase 多模一体化的浅析
在当今多元化的业务生态中,各行各业对数据库系统的需求各有侧重。举例来说,金融风控领域对数据库的高效事务处理(TP)和分析处理(AP)能力有着严格要求;游戏行业则更加注重文档数据库的灵活性和性…...
快速git
下载 sudo apt install git配置 $ git config --global user.name "John Doe" $ git config --global user.email johndoeexample.com没有空格可以不加双引号如果~/.ssh没有先创建(下一步用) ssh方式制作密钥 github解释 #以邮箱作为标签…...

欺诈文本分类检测(十四):GPTQ量化模型
1. 引言 量化的本质:通过将模型参数从高精度(例如32位)降低到低精度(例如8位),来缩小模型体积。 本文将采用一种训练后量化方法GPTQ,对前文已经训练并合并过的模型文件进行量化,通…...

2024.9.14(RC和RS)
一、replicationcontroller (RC) 1、更改镜像站 [rootk8s-master ~]# vim /etc/docker/daemon.json {"registry-mirrors": ["https://do.nark.eu.org","https://dc.j8.work","https://docker.m.daocloud.io",&…...
【算法随想录04】KMP 字符串匹配算法
这是字符串模式匹配经典算法。 给定一个文本 t 和一个字符串 s,我们尝试找到并展示 s 在 t 中的所有出现(occurrence)。 #include<bits/stdc.h>using namespace std;vector<int> KMP(string s) {int n s.size();vector<int&g…...
TCP和MQTT通信协议
协议分层 网络分层 协议应用层 Co AP MQTT HTTP传输层 UDP TCP网络层 IP链路层 Enternet 网络分层中最…...
Python Pickle 与 JSON 序列化详解:存储、反序列化与对比
Python Pickle 与 JSON 序列化详解:存储、反序列化与对比 文章目录 Python Pickle 与 JSON 序列化详解:存储、反序列化与对比一 功能总览二 Pickle1 应用2 序列化3 反序列化4 系统资源对象1)不能被序列化的系统资源对象2)强行序列…...

第二百三十二节 JPA教程 - JPA教程 - JPA ID自动生成器示例、JPA ID生成策略示例
JPA教程 - JPA ID自动生成器示例 我们可以将id字段标记为自动生成的主键列。 数据库将在插入时自动为id字段生成一个值数据到表。 例子 下面的代码来自Person.java。 package cn.w3cschool.common;import javax.persistence.Entity; import javax.persistence.GeneratedValu…...

计算机网络 ---- 计算机网络的体系结构【计算机网络的分层结构】
一、以快递网络来引入分层思想 1.1 “分层” 的设计思想【将庞大而复杂的问题,转化为若干较小的局部问题】 从我们最熟悉的快递网络出发,在你家附近会有一个快递终点站A,在其他的城市,也会有这种快递终点站,比如说快递…...

Vite + Electron 时,Electron 渲染空白,静态资源加载错误等问题解决
问题 如果在 electron 里直接引入 vite 打包后的东西,那么有些资源是请求不到的 这是我的引入方式 根据报错,我们来到 vite 打包后的路径看一看 ,修改一下 dist 里的文件路径试了一试 修改后的样子,发现是可以的了 原因分析 …...
ZAB协议(算法)
一、ZAB(ZooKeeper Atomic Broadcast)介绍 ZAB 即 ZooKeeper Atomic Broadcast,是 ZooKeeper 实现分布式数据一致性的核心算法。它是一种原子广播协议,用于确保在分布式环境中,多个 ZooKeeper 服务器之间的数据一致性。…...

多个音频怎么合并?把多个音频合并在一起的方法推荐
多个音频怎么合并?无论是制作连贯的播客节目还是将音乐片段整合成专辑,音频合并已成为许多创作者的常见需求。通过有效合并音频,可以显著提升项目的整体质量,确保内容的连续性和一致性。然而,合并后的文件通常比原始单…...
【Django】Django Class-Based Views (CBV) 与 DRF APIView 的区别解析
Django Class-Based Views (CBV) 与 DRF APIView 的区别解析 在 Django 开发中,基于类的视图(Class-Based Views, CBV)是实现可重用性和代码结构化的利器。而 Django REST Framework (DRF) 提供的 APIView 是针对 API 开发的扩展。 一、CBV …...

如何增加Google收录量?
想增加Google收录量,首先自然是你的页面数量就要多,但这些页面的内容也绝对不能敷衍,你的网站都没多少页面,谷歌哪怕想收录都没办法,当然,这是一个过程,持续缓慢的增加页面,增加网站…...
leetcode练习 格雷编码
n 位格雷码序列 是一个由 2n 个整数组成的序列,其中: 每个整数都在范围 [0, 2n - 1] 内(含 0 和 2n - 1)第一个整数是 0一个整数在序列中出现 不超过一次每对 相邻 整数的二进制表示 恰好一位不同 ,且第一个 和 最后一…...

【LLM:Gemini】文本摘要、信息提取、验证和纠错、重新排列图表、视频理解、图像理解、模态组合
开始使用Gemini 目录 开始使用Gemini Gemini简介 Gemini实验结果 Gemini的多模态推理能力 文本摘要 信息提取 验证和纠错 重新排列图表 视频理解 图像理解 模态组合 Gemini多面手编程助理 库的使用 引用 本文概述了Gemini模型和如何有效地提示和使用这些模型。本…...

CMS之Wordpress建设
下载 https://cn.wordpress.org/ 宝塔安装Wordpress 创建网站 上传文件、并解压、剪切文件到项目根目录 安装 -> 数据库信息 -> 标题信息 http://wordpress.xxxxx.com 登录 http://wordpress.xxxxxxxxx.com/wp-admin/ 1. 主题(模板) wordpress-基本使用-02-在主题…...
使用Neo4j存储聊天记录的简单教程
引言 在当今的数据驱动世界中,关系型数据库有时难以处理复杂的、相互关联的数据集。Neo4j作为一款开源图数据库,以其高效管理高连接数据的能力而广受欢迎。本篇文章将详细介绍如何使用Neo4j来存储聊天信息历史,引导您在实际项目中利用其强大…...
前端面试常考算法
快速排序 #include<iostream> #include<cstdio> using namespace std; const int N 100005; int a[N];void quick_sort(int a[], int l, int r) {if (l > r) return;int x a[l r >> 1];int i l - 1, j r 1;while (i < j) {while (a[i] < x);…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...

【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...

华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...