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 11:45:42 +08:00
parent fef285f98d
commit 42c5354978
28 changed files with 3144 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
pages/goods/components/GoodConfirm/styles/index.scss Normal file
View File

@@ -0,0 +1,239 @@
.good-confirm-container {
background: #fff;
border-radius: 20px 20px 0 0;
padding: 0;
max-height: 80vh;
overflow: hidden;
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 20px 16px;
border-bottom: 1px solid #f5f5f5;
position: relative;
.header-title {
font-size: 18px;
font-weight: 600;
color: #333;
flex: 1;
text-align: center;
}
.close-btn {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: #f8f8f8;
transition: background 0.2s;
&:active {
background: #e8e8e8;
}
}
}
.goods-info {
display: flex;
padding: 20px;
gap: 12px;
border-bottom: 1px solid #f5f5f5;
.goods-image {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.goods-details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.goods-title {
font-size: 16px;
font-weight: 500;
color: #333;
line-height: 22px;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.goods-price {
display: flex;
align-items: baseline;
margin-bottom: 8px;
.currency {
font-size: 14px;
color: #ff6b35;
font-weight: 500;
}
.price {
font-size: 20px;
color: #ff6b35;
font-weight: 600;
margin-left: 2px;
}
}
.goods-tag {
display: inline-block;
padding: 2px 8px;
background: #fff2e8;
color: #ff6b35;
font-size: 12px;
border-radius: 4px;
border: 1px solid #ffdbcc;
align-self: flex-start;
}
}
}
.quantity-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #f5f5f5;
.quantity-label {
font-size: 16px;
color: #333;
font-weight: 500;
}
.quantity-control {
display: flex;
align-items: center;
gap: 0;
border: 1px solid #e8e8e8;
border-radius: 6px;
overflow: hidden;
.quantity-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f8f8;
transition: background 0.2s;
&:active:not(.disabled) {
background: #e8e8e8;
}
&.disabled {
opacity: 0.4;
pointer-events: none;
}
}
.quantity-input {
width: 60px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-left: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
input {
width: 100%;
height: 100%;
text-align: center;
border: none;
outline: none;
font-size: 16px;
color: #333;
background: transparent;
}
}
}
}
.total-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #f8f9fa;
.total-label {
font-size: 16px;
color: #333;
font-weight: 500;
}
.total-price {
display: flex;
align-items: baseline;
.currency {
font-size: 16px;
color: #ff6b35;
font-weight: 600;
}
.price {
font-size: 24px;
color: #ff6b35;
font-weight: 700;
margin-left: 2px;
}
}
}
.footer {
padding: 20px;
background: #fff;
.confirm-btn {
width: 100%;
height: 48px;
background: linear-gradient(135deg, #ff6b35 0%, #ff8f65 100%);
color: #fff;
border: none;
border-radius: 24px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
&:active {
transform: translateY(1px);
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}
&::after {
border: none;
}
}
}
}