123456789101112131415161718192021222324252627282930313233343536373839404142 |
- .container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 50px 40px;
- height: 50vh; /* 使容器占据整个屏幕高度 */
- }
- .input {
- width: 100%;
- height: 30px;
- margin-bottom: 10px;
- padding: 0 20px;
- border: 1px solid #ddd;
- border-radius: var(--border-radius, 10px);
- box-sizing: border-box;
- }
- .btn {
- width: 30%; /* 按钮占满宽度 */
- height: 40px;
- padding: 1px 0; /* 按钮内边距,控制高度 */
- margin: 1px 0; /* 按钮间距 */
- background-color: #3EC01E; /* 按钮背景颜色 */
- color: white; /* 按钮文字颜色 */
- font-size: 16px; /* 按钮文字大小 */
- border: none; /* 去除按钮边框 */
- outline: none; /* 去除焦点边框 */
- text-align: center; /* 文字居中 */
- border-radius: 5px; /* 圆角效果 */
- }
- .btn:active {
- background-color: var(--active-color, #128c13);
- box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2); /* 按钮点击时阴影变化 */
- }
- .btn:hover {
- background-color: var(--hover-color, #16b818);
- cursor: pointer; /* 鼠标悬浮时显示手型 */
- }
|