uniapp登录页面（ 适配：pc、小步伐、h5）

1. <!-- 简洁登录页面 -->
2. <template>
3.         <view class="login-bg">
4.                 <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
5.                 <image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
6.                 <!-- 标题 -->
7.                 <view class="t-b">{{ title }}</view>
8.                 <view class="t-b2">欢迎登录</view>
9.                 <view class="t-login">
11.                         <form class="cl">
12.                                 <view class="t-a">
13.                                         <image src="https://zhoukaiwen.com/img/loginImg/user.png"></image>
14.                                         <input type="number" name="phone" placeholder="请输入账号" maxlength="11" v-model="phone" />
15.                                 </view>
16.                                 <view class="t-a">
17.                                         <image src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image>
18.                                         <input type="password" name="code" maxlength="6" placeholder="请输入密码" v-model="pwd" />
19.                                 </view>
20.                                 <button @tap="login()">登 录</button>
21.                                 <view class="t-c">
22.                                         <text class="t-c-txt" @tap="reg()">注册账号</text>
23.                                         <text>返回首页</text>
24.                                 </view>
25.                         </form>
26.                         <view class="t-f">
27.                                 <span :style="{width:width+'px'}"></span>
28.                                 <text class="qt"> 其他登录方式 </text>
29.                                 <span :style="{width:width+'px'}"></span>
30.                         </view>
31.                         <view class="t-e cl">
32.                                 <view class="t-g" @tap="wxLogin()">
33.                                         <image src="https://zhoukaiwen.com/img/loginImg/wx2.png"></image>
34.                                 </view>
35.                                 <view class="t-g" @tap="zfbLogin()">
36.                                         <image src="https://zhoukaiwen.com/img/loginImg/qq2.png"></image>
37.                                 </view>
38.                                 <view class="t-g" @tap="zfbLogin()">
39.                                         <image src="https://zhoukaiwen.com/img/loginImg/wb.png"></image>
40.                                 </view>
41.                         </view>
42.                 </view>
43.                 <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image>
44.         </view>
45. </template>
46. <script>
47.         export default {
48.                 data() {
49.                         return {
50.                                 title: '数字政务！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
51.                                 phone: '', //手机号码
52.                                 pwd: '', //密码
53.                                 width: ''
54.                         };
55.                 },
56.                 onLoad() {
57.                         setTimeout(() => {
58.                                 let query = uni.createSelectorQuery();
59.                                 query.select('.qt').boundingClientRect()
60.                                 query.select('.t-f').boundingClientRect()
61.                                 query.exec((res) => {
62.                                         console.log("res[0]", res[0]);
63.                                         console.log("res[1]", res[1])
64.                                         this.width = ((res[1].width - res[0].width) / 2) - 15
65.                                 })
66.                         }, 200)
67.                 },
68.                 methods: {
69.                         //当前登录按钮操作
70.                         login() {
71.                                 var that = this;
72.                                 if (!that.phone) {
73.                                         uni.showToast({
74.                                                 title: '请输入手机号',
75.                                                 icon: 'none'
76.                                         });
77.                                         return;
78.                                 }
79.                                 if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
80.                                         uni.showToast({
81.                                                 title: '请输入正确手机号',
82.                                                 icon: 'none'
83.                                         });
84.                                         return;
85.                                 }
86.                                 if (!that.pwd) {
87.                                         uni.showToast({
88.                                                 title: '请输入密码',
89.                                                 icon: 'none'
90.                                         });
91.                                         return;
92.                                 }
93.                                 uni.showToast({
94.                                         title: '登录成功！',
95.                                         icon: 'none'
96.                                 });
97.                         },
98.                         //立刻注册
99.                         reg() {
100.                                 uni.showToast({
101.                                         title: '注册账号',
102.                                         icon: 'none'
103.                                 });
104.                         }
105.                 }
106.         };
107. </script>
108. <style scoped>
109.         .img-a {
110.                 position: absolute;
111.                 width: 100%;
112.                 top: -150rpx;
113.                 right: 0;
114.                 z-index: -1;
115.         }
117.         .img-b {
118.                 position: absolute;
119.                 width: 50%;
120.                 bottom: 0;
121.                 left: -50rpx;
122.                 z-index: -1;
123.         }
125.         .login-bg {
126.                 max-width: 750px;
127.                 width: 100vw;
128.                 min-height: 100vh;
129.         }
131.         .t-b {
132.                 text-indent: 40rpx;
133.                 font-size: 46rpx;
134.                 color: #000;
135.                 padding: 200rpx 0 30rpx 0;
136.                 font-weight: bold;
137.         }
139.         .t-b2 {
140.                 text-indent: 40rpx;
141.                 font-size: 32rpx;
142.                 color: #aaaaaa;
143.                 padding: 0rpx 0 60rpx 0;
144.         }
146.         .t-login {
147.                 width: 80%;
148.                 padding: 55rpx;
149.                 margin: 0rpx auto 0 auto;
150.                 font-size: 28rpx;
151.                 z-index: 9;
152.         }
154.         .t-login button {
155.                 font-size: 28rpx;
156.                 background: linear-gradient(to right, #5677fc, hsla(217 100% 56% / 1));
157.                 /* background-image: linear-gradient(325deg,
158.                                 hsla(217 100% 56% / 1) 0%,
159.                                 hsla(194 100% 69% / 1) 55%,
160.                                 hsla(217 100% 56% / 1) 90%); */
161.                 color: #fff;
162.                 height: 90rpx;
163.                 line-height: 90rpx;
164.                 border-radius: 50rpx;
165.         }
167.         .t-login input {
168.                 padding: 0 20rpx 0 120rpx;
169.                 height: 90rpx;
170.                 line-height: 90rpx;
171.                 margin-bottom: 50rpx;
172.                 background: #f6f6f6;
173.                 border: 1px solid #f6f6f6;
174.                 font-size: 28rpx;
175.                 border-radius: 50rpx;
176.         }
178.         .t-login .t-a {
179.                 position: relative;
180.         }
182.         .t-login .t-a image {
183.                 width: 40rpx;
184.                 height: 40rpx;
185.                 position: absolute;
186.                 left: 40rpx;
187.                 top: 28rpx;
188.         }
190.         .t-login .t-b {
191.                 text-align: left;
192.                 font-size: 46rpx;
193.                 color: #000;
194.                 padding: 300rpx 0 120rpx 0;
195.                 font-weight: bold;
196.         }
198.         .t-login .t-d {
199.                 text-align: center;
200.                 color: #999;
201.                 margin: 80rpx 0;
202.         }
204.         .t-login .t-c {
205.                 display: flex;
206.                 justify-content: space-evenly;
207.                 color: #666666;
208.                 margin: 30rpx 30rpx 40rpx 0;
209.         }
211.         .t-login .t-c .t-c-txt {
212.                 margin-right: 300rpx;
213.         }
215.         .t-login .t-e {
216.                 text-align: center;
217.                 width: 80%;
218.                 margin: 40rpx auto 0;
219.         }
221.         .t-login .t-g {
222.                 float: left;
223.                 width: 33.33%;
224.         }
226.         .t-login .t-e image {
227.                 width: 70rpx;
228.                 height: 70rpx;
229.         }
231.         .t-login .t-f {
232.                 width: 100%;
233.                 display: flex;
234.                 align-items: center;
235.                 justify-content: space-between;
236.                 margin: 80rpx 0 0 0;
237.                 color: #999;
238.                 position: relative;
239.         }
241.         .t-login .t-f text {
242.                 color: #b9b9b9;
243.                 font-size: 27rpx;
244.         }
246.         .t-login .t-f span {
247.                 display: block;
248.                 background-color: #000;
249.                 width: auto;
250.                 height: 1.5rpx;
251.         }
253.         .t-login .uni-input-placeholder {
254.                 color: #aeaeae;
255.         }
257.         .cl {
258.                 zoom: 1;
259.         }
261.         .cl:after {
262.                 clear: both;
263.                 display: block;
264.                 visibility: hidden;
265.                 height: 0;
266.                 content: '\20';
267.         }
268. </style>

复制代码

参考文章：
复制了这个博主的大部门html结构和部门css（现在放置的是我初版的样式和代码后续根据业务调整了下，同时为了适配兼容修改成弹性布局及动态宽度）
uni-app 微信小步伐之好看的ui登录页面（一）_微信小步伐登录页面-CSDN博客 
uni-app 微信小步伐之好看的ui登录页面（四）_微信小步伐 登录页 样式-CSDN博客

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。