1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- .green-box {
- width: 95%; /* 绿色框的宽度 */
- margin: 10rpx auto 0; /* 减少顶部外边距 */
- padding: 10rpx; /* 内边距 */
- background-color: #1aad19; /* 背景绿色 */
- border-radius: 10rpx; /* 圆角 */
- text-align: center; /* 内容水平居中 */
- color: #fff; /* 字体白色 */
- }
- .title {
- display: block; /* 强制换行 */
- font-size: 40rpx; /* 标题字体大小 */
- font-weight: bold; /* 加粗 */
- }
- .subtitle {
- display: block; /* 强制换行 */
- font-size: 36rpx; /* 副标题字体大小 */
- font-weight: bold; /* 加粗 */
- margin-top: 5rpx; /* 减少上下间距 */
- }
- .description-box {
- width: 90%; /* 白色框的宽度 */
- margin: 10rpx auto; /* 减少上下间距 */
- padding: 15rpx; /* 增加文字周围空间 */
- background-color: #fff; /* 背景为白色 */
- }
- .bold-text {
- font-size: 32rpx; /* 加粗字体大小 */
- font-weight: bold; /* 加粗 */
- color: #000; /* 黑色字体 */
- }
- .regular-text {
- font-size: 28rpx; /* 正文字体大小 */
- color: #333; /* 深灰色字体 */
- }
- .btn {
- width: 100%;
- height: 80rpx;
- background-color: var(--primary-color, #1aad19);
- color: #fff;
- border: none;
- border-radius: var(--border-radius, 10rpx);
- text-align: center;
- line-height: 45rpx;
- font-size: 36rpx;
- box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影 */
- transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 背景颜色和阴影过渡效果 */
- }
- .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; /* 鼠标悬浮时显示手型 */
- }
|