131 lines
2.5 KiB
SCSS
131 lines
2.5 KiB
SCSS
$button-color: #00a6ff;
|
||
$button-hover-color: darken($button-color, 8%);
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
// 为安全区预留空间
|
||
padding-bottom: var(--safe-area-inset-bottom, 0);
|
||
// 阴影
|
||
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: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
font-size: 24px;
|
||
color: #f55726;
|
||
|
||
&::before {
|
||
content: "¥";
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.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: 50px;
|
||
height: 42px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
letter-spacing: 0.5px;
|
||
margin-left: auto;
|
||
|
||
// 按钮波纹效果
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
transition: width 0.6s, height 0.6s;
|
||
}
|
||
|
||
&:hover {
|
||
background: linear-gradient(
|
||
135deg,
|
||
$button-hover-color 0%,
|
||
darken($button-hover-color, 5%) 100%
|
||
);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 16px rgba($button-color, 0.4);
|
||
|
||
&::before {
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
&:active {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba($button-color, 0.3);
|
||
}
|
||
|
||
&:focus {
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px rgba($button-color, 0.3);
|
||
}
|
||
}
|
||
}
|