130 lines
2.4 KiB
SCSS
130 lines
2.4 KiB
SCSS
$button-color: #00a6ff;
|
||
|
||
.goods-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
|
||
// 顶部导航栏固定样式
|
||
:deep(.top-nav-bar) {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 使用须知样式
|
||
.use-notice {
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.use-notice-content {
|
||
.module-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
padding: 12px 0;
|
||
|
||
.module-icon {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-right: 8px;
|
||
flex-shrink: 0;
|
||
|
||
.module-title {
|
||
font-size: $uni-font-size-base;
|
||
color: $uni-text-color;
|
||
text-align: center;
|
||
word-wrap: break-word;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
.module-desc {
|
||
flex: 1;
|
||
font-size: $uni-font-size-sm;
|
||
color: #666;
|
||
line-height: 1.5;
|
||
margin-top: 4px;
|
||
}
|
||
}
|
||
.border-bottom {
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
}
|
||
|
||
.content-wrapper {
|
||
flex: 1;
|
||
height: 0; // 关键：让flex子项能够正确计算高度
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch; // iOS平滑滚动
|
||
}
|
||
|
||
.goods-content {
|
||
border-radius: 12px 12px 0 0;
|
||
background-color: #fff;
|
||
padding: 12px;
|
||
position: relative;
|
||
margin-top: -30px;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: sticky;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 12px 12px 24px;
|
||
// 阴影
|
||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
|
||
z-index: 10;
|
||
flex-shrink: 0; // 防止被压缩
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.label {
|
||
font-size: $uni-font-size-base;
|
||
color: $uni-text-color;
|
||
}
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
font-size: 24px;
|
||
color: #f55726;
|
||
|
||
&::before {
|
||
content: "¥";
|
||
font-size: $uni-font-size-sm;
|
||
}
|
||
}
|
||
|
||
.buy-button {
|
||
width: 160px;
|
||
background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
|
||
color: #fff;
|
||
border: none;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: $uni-border-radius-50px;
|
||
height: 42px;
|
||
font-size: $uni-font-size-base;
|
||
font-weight: 500;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
letter-spacing: 0.5px;
|
||
margin-left: auto;
|
||
}
|
||
}
|