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

318
pages/goods/components/GoodConfirm/styles/index.scss
View File

@@ -1,65 +1,61 @@
.good-confirm-container {
background: #fff;
border-radius: 20px 20px 0 0;
padding: 0;
max-height: 80vh;
.good-container {
display: flex;
flex-direction: column;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 12px;
border-bottom: 1px solid #ddd;
position: relative;
.header-title {
font-size: 18px;
font-weight: 600;
color: #333;
flex: 1;
text-align: center;
}
.close-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
}
.good-content {
background: #e9f3f7;
box-sizing: border-box;
max-height: 60vh;
overflow: hidden;
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 20px 16px;
border-bottom: 1px solid #f5f5f5;
position: relative;
.wrapper {
box-sizing: border-box;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
}
.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;
}
}
.good-info-wrapper {
border-radius: 12px;
overflow: hidden;
}
.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;
}
}
box-sizing: border-box;
background-color: #fff;
padding: 12px;
.goods-details {
flex: 1;
@@ -82,7 +78,7 @@
.goods-price {
display: flex;
align-items: baseline;
margin-bottom: 8px;
margin-bottom: 12px;
.currency {
font-size: 14px;
@@ -98,15 +94,38 @@
}
}
.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;
.goods-service-list {
background-color: #f5f5f5;
border-radius: 6px;
padding: 12px;
box-sizing: border-box;
}
.service-title {
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
}
.goods-service-item {
display: flex;
align-items: center;
justify-content: space-between;
.service-label,
.service-value {
font-size: 14px;
font-weight: 500;
}
.service-label {
color: #333;
}
.service-value {
color: #999;
}
}
}
}
@@ -115,125 +134,70 @@
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;
}
}
}
box-sizing: border-box;
padding: 12px 0;
}
.total-section {
.user-form-list {
margin-bottom: 12px;
display: flex;
flex-direction: row;
white-space: nowrap;
}
}
.footer {
margin-top: 12px;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 12px;
padding-right: 12px;
padding-bottom: var(--safe-area-inset-bottom);
.left {
display: flex;
align-items: baseline;
}
.total-count {
font-size: 12px;
color: #333;
}
.total-price {
display: flex;
align-items: baseline;
font-size: 24px;
color: #f55726;
&::before {
content: "¥";
font-size: 12px;
}
}
.confirm-btn {
width: 160px;
height: 48px;
background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
color: #fff;
border: none;
border-radius: 24px;
font-size: 16px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #f8f9fa;
justify-content: center;
transition: all 0.2s;
margin-left: auto;
.total-label {
font-size: 16px;
color: #333;
font-weight: 500;
&:active {
transform: translateY(1px);
}
.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;
&::after {
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;
}
}
}
}
}