zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 商品详情交互开发

Browse Source
This commit is contained in:
duanshuwen
2025-08-03 18:06:06 +08:00
parent 42c5354978
commit 5e0d53fc20
22 changed files with 1906 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
pages/goods/styles/index.scss
View File

@@ -2,14 +2,24 @@ $button-color: #00a6ff;
$button-hover-color: darken($button-color, 8%);
.goods-container {
min-height: 100vh;
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 {
// 为固定导航栏预留空间
padding-top: calc(var(--status-bar-height, 44px) + 68px);
// 为安全区预留空间
padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 100px);
flex: 1;
height: 0; // 关键：让flex子项能够正确计算高度
overflow-y: auto;
-webkit-overflow-scrolling: touch; // iOS平滑滚动
}
.goods-content {
@@ -20,77 +30,101 @@ $button-hover-color: darken($button-color, 8%);
margin-top: -30px;
z-index: 1;
}
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
padding-top: 12px;
padding-left: 12px;
padding-right: 12px;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
// 为安全区预留空间
padding-bottom: var(--safe-area-inset-bottom, 0);
.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;
.buy-button {
width: 100%;
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;
margin-top: 12px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
letter-spacing: 0.5px;
.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 {
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;
width: 300px;
height: 300px;
}
}
&: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);
&:active {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba($button-color, 0.3);
}
&::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);
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px rgba($button-color, 0.3);
}
}
}