feat: 替换sass版本,定义全局样式,实现简单的页面布局操作,比如颜色、边距、圆角等

This commit is contained in:
duanshuwen
2025-10-06 13:13:16 +08:00
parent e0f0e90635
commit c8e51e4975
108 changed files with 366 additions and 517 deletions

View File

@@ -1,83 +1,83 @@
// AgreePopup 组件样式
.agree-popup {
width: 327px;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 327px;
background-color: $uni-bg-color;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
// 弹窗头部
.popup-header {
position: relative;
padding: 20px 20px 0 20px;
// 弹窗头部
.popup-header {
position: relative;
padding: 20px 20px 0 20px;
.popup-title {
font-size: 18px;
font-weight: 600;
color: #333333;
text-align: center;
line-height: 24px;
}
.close-btn {
position: absolute;
top: 16px;
right: 16px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
background: #f5f5f5;
border-radius: 50%;
}
}
.popup-title {
font-size: 18px;
font-weight: 600;
color: $uni-text-color;
text-align: center;
line-height: 24px;
}
// 弹窗内容
.popup-content {
padding: 12px;
max-height: 400px; // 设置最大高度
overflow-y: auto; // 启用垂直滚动
.close-btn {
position: absolute;
top: 16px;
right: 16px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
// 自定义滚动条样式
&::-webkit-scrollbar {
display: none;
}
&:hover {
background: #f5f5f5;
border-radius: 50%;
}
}
}
// 按钮区域
.button-area {
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
// 弹窗内容
.popup-content {
padding: 12px;
max-height: 400px; // 设置最大高度
overflow-y: auto; // 启用垂直滚动
.confirm-btn {
width: 148px;
height: 44px;
background: linear-gradient(90deg, #22a7ff 0%, #2567ff 100%);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
&:hover {
background: #0056cc;
}
&:active {
background: #004499;
transform: scale(0.98);
}
}
// 自定义滚动条样式
&::-webkit-scrollbar {
display: none;
}
}
// 按钮区域
.button-area {
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
.confirm-btn {
width: 148px;
height: 44px;
background: linear-gradient(90deg, #22a7ff 0%, #2567ff 100%);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
&:hover {
background: #0056cc;
}
&:active {
background: #004499;
transform: scale(0.98);
}
}
}
}