|
@@ -0,0 +1,119 @@
|
|
|
|
|
+.container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ height: 100vh; /* 占据整个视窗高度 */
|
|
|
|
|
+ background-color: #f4f4f4; /* 浅灰色背景 */
|
|
|
|
|
+ padding: 40rpx;
|
|
|
|
|
+ box-sizing: border-box; /* 边框盒模型,使内边距不影响总宽度 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 输入框组件样式 */
|
|
|
|
|
+.input-group {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 90%; /* 设置固定宽度 */
|
|
|
|
|
+ margin-left:5%;
|
|
|
|
|
+ margin-bottom: 40rpx; /* 底部外边距 */
|
|
|
|
|
+ background-color: #fff; /* 白色背景 */
|
|
|
|
|
+ border-radius: 16rpx; /* 圆角边框 */
|
|
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
|
|
|
|
|
+ overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
|
|
+ position: relative; /* 相对定位,用于后续子元素的绝对定位 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 输入框内部标签样式 */
|
|
|
|
|
+.input-group .label {
|
|
|
|
|
+ color: #666; /* 深灰色字体 */
|
|
|
|
|
+ font-size: 28rpx; /* 字体大小 */
|
|
|
|
|
+ font-weight: bold; /* 加粗 */
|
|
|
|
|
+ padding: 20rpx 0 10rpx 32rpx; /* 内边距 */
|
|
|
|
|
+ background-color: #f9f9f9; /* 浅灰色背景 */
|
|
|
|
|
+ width:30%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 输入框样式 */
|
|
|
|
|
+.input-group .input {
|
|
|
|
|
+ width: calc(100% - 32rpx); /* 减去左右内边距 */
|
|
|
|
|
+ padding: 20rpx 32rpx; /* 内边距 */
|
|
|
|
|
+ border: none; /* 无边框 */
|
|
|
|
|
+ outline: none; /* 去除聚焦时的轮廓 */
|
|
|
|
|
+ font-size: 32rpx; /* 字体大小 */
|
|
|
|
|
+ color: #333; /* 字体颜色 */
|
|
|
|
|
+ background-color: transparent; /* 透明背景,显示父容器的背景 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 验证码发送按钮样式 */
|
|
|
|
|
+.input-group .send-code {
|
|
|
|
|
+ position: absolute; /* 绝对定位 */
|
|
|
|
|
+ right: 0; /* 右侧对齐 */
|
|
|
|
|
+ top: 0; /* 顶部对齐 */
|
|
|
|
|
+ padding: 10rpx 40rpx; /* 内边距 */
|
|
|
|
|
+ background-color: #007aff; /* 蓝色背景 */
|
|
|
|
|
+ color: white; /* 白色字体 */
|
|
|
|
|
+ border: none; /* 无边框 */
|
|
|
|
|
+ border-radius: 0 16rpx 16rpx 0; /* 圆角仅在右侧 */
|
|
|
|
|
+ font-size: 32rpx; /* 字体大小 */
|
|
|
|
|
+ cursor: pointer; /* 鼠标悬停时显示指针 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.input-group .send-code-1 {
|
|
|
|
|
+ font-size: 25rpx; /* 字体大小 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 验证码发送按钮禁用状态样式 */
|
|
|
|
|
+.input-group .send-code[disabled] {
|
|
|
|
|
+ background-color: #ccc; /* 灰色背景 */
|
|
|
|
|
+ color: #999; /* 灰色字体 */
|
|
|
|
|
+ cursor: not-allowed; /* 鼠标悬停时显示禁止符号 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 登录按钮样式 */
|
|
|
|
|
+.login-btn {
|
|
|
|
|
+ width: 500rpx; /* 宽度与输入框组件一致 */
|
|
|
|
|
+ padding: 6rpx 0; /* 上下内边距,左右由子元素控制 */
|
|
|
|
|
+ background-color: #007aff; /* 蓝色背景 */
|
|
|
|
|
+ color: white; /* 白色字体 */
|
|
|
|
|
+ border: none; /* 无边框 */
|
|
|
|
|
+ border-radius: 16rpx; /* 圆角边框 */
|
|
|
|
|
+ font-size: 36rpx; /* 字体大小 */
|
|
|
|
|
+ cursor: pointer; /* 鼠标悬停时显示指针 */
|
|
|
|
|
+ text-align: center; /* 文本居中 */
|
|
|
|
|
+ display: flex; /* 弹性布局 */
|
|
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.login-out {
|
|
|
|
|
+ width: 500rpx; /* 宽度与输入框组件一致 */
|
|
|
|
|
+ padding: 6rpx 0; /* 上下内边距,左右由子元素控制 */
|
|
|
|
|
+ background-color: #007aff; /* 蓝色背景 */
|
|
|
|
|
+ color: white; /* 白色字体 */
|
|
|
|
|
+ border: none; /* 无边框 */
|
|
|
|
|
+ border-radius: 16rpx; /* 圆角边框 */
|
|
|
|
|
+ font-size: 36rpx; /* 字体大小 */
|
|
|
|
|
+ cursor: pointer; /* 鼠标悬停时显示指针 */
|
|
|
|
|
+ text-align: center; /* 文本居中 */
|
|
|
|
|
+ display: flex; /* 弹性布局 */
|
|
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
|
|
+ margin-top:20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 登录按钮禁用状态样式 */
|
|
|
|
|
+.login-btn[disabled] {
|
|
|
|
|
+ background-color: #ccc; /* 灰色背景 */
|
|
|
|
|
+ color: #999; /* 灰色字体 */
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .title{
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 38rpx;
|
|
|
|
|
+ color: #000000;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ margin-top: 100rpx;
|
|
|
|
|
+}
|