msumshk/TakeoutSaaS.C-Side-Mini-Program-V1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 拆分小程序 vue 结构

Browse Source
This commit is contained in:
MSuMshk
2026-03-11 14:11:26 +08:00
commit b050c01a24
141 changed files with 24904 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/spec-popup/styles/base.scss Normal file
View File

@@ -0,0 +1,31 @@
@import '../../../styles/variables';
.spec-popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-height: 82%;
background: $card;
border-radius: 28px 28px 0 0;
z-index: 210;
display: flex;
flex-direction: column;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
overflow: hidden;
}
.spec-popup__handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: $text-5;
margin: 10px auto 0;
flex-shrink: 0;
}
.spec-popup__scroll {
flex: 1;
overflow-y: auto;
max-height: 60vh;
}

74
src/components/spec-popup/styles/footer.scss Normal file
View File

@@ -0,0 +1,74 @@
@import '../../../styles/variables';
.spec-popup__footer {
padding: 14px 20px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
background: $card;
border-top: 0.5px solid rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.spec-popup__footer-price {
flex: 1;
min-width: 0;
}
.spec-popup__footer-label {
font-size: 11px;
color: $text-4;
margin-bottom: 2px;
}
.spec-popup__footer-total {
display: flex;
align-items: baseline;
gap: 2px;
}
.spec-popup__footer-unit {
font-size: 14px;
font-weight: 700;
color: $primary-dark;
}
.spec-popup__footer-value {
font-size: 26px;
font-weight: 800;
color: $primary-dark;
line-height: 1;
}
.spec-popup__footer-summary {
font-size: 11px;
color: $text-4;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spec-popup__footer-btn {
height: 48px;
min-width: 140px;
padding: 0 28px;
border-radius: 24px;
font-size: 15px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
letter-spacing: 0.3px;
&--disabled {
background: $text-5;
box-shadow: none;
pointer-events: none;
}
}

104
src/components/spec-popup/styles/header.scss Normal file
View File

@@ -0,0 +1,104 @@
@import '../../../styles/variables';
.spec-popup__header {
display: flex;
gap: 14px;
padding: 6px 20px 16px;
position: relative;
}
.spec-popup__img {
width: 100px;
height: 100px;
border-radius: $r-md;
flex-shrink: 0;
box-shadow: $shadow-sm;
background: linear-gradient(135deg, #FED7AA, #FDBA74);
}
.spec-popup__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.spec-popup__name {
font-size: 17px;
font-weight: 700;
color: $text-1;
line-height: 1.4;
}
.spec-popup__desc {
font-size: 12px;
color: $text-3;
margin-top: 4px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.spec-popup__tags {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.spec-popup__tag {
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 5px;
line-height: 1.5;
&--hot { background: $red-light; color: #DC2626; }
&--new { background: $primary-light; color: $primary; }
&--sales { background: $border; color: $text-3; }
}
.spec-popup__price-row {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 8px;
}
.spec-popup__price-unit {
font-size: 13px;
font-weight: 700;
color: $primary-dark;
}
.spec-popup__price-current {
font-size: 22px;
font-weight: 800;
color: $primary-dark;
line-height: 1;
}
.spec-popup__price-origin {
font-size: 12px;
color: $text-4;
text-decoration: line-through;
}
.spec-popup__close {
position: absolute;
top: 6px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
background: $border;
display: flex;
align-items: center;
justify-content: center;
color: $text-4;
font-size: 14px;
}

5
src/components/spec-popup/styles/index.scss Normal file
View File

@@ -0,0 +1,5 @@
@import './base.scss';
@import './header.scss';
@import './options.scss';
@import './stepper.scss';
@import './footer.scss';

73
src/components/spec-popup/styles/options.scss Normal file
View File

@@ -0,0 +1,73 @@
@import '../../../styles/variables';
.spec-popup__group {
padding: 16px 20px;
border-top: 0.5px solid $border;
}
.spec-popup__group-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.spec-popup__group-title {
font-size: 15px;
font-weight: 600;
color: $text-1;
}
.spec-popup__group-tag {
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
line-height: 1.6;
&--required { background: $red-light; color: $red; }
&--multi { background: $primary-light; color: $primary; }
}
.spec-popup__pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.spec-popup__pill {
height: 38px;
padding: 0 18px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: $text-2;
background: $bg;
border: 1.5px solid transparent;
border-radius: 14px;
white-space: nowrap;
&--selected {
background: $primary-lighter;
border-color: $primary;
color: $primary-darker;
font-weight: 600;
}
&--disabled {
opacity: 0.35;
pointer-events: none;
}
}
.spec-popup__pill-extra {
font-size: 12px;
color: $text-4;
font-weight: 400;
.spec-popup__pill--selected & {
color: $primary;
}
}

46
src/components/spec-popup/styles/stepper.scss Normal file
View File

@@ -0,0 +1,46 @@
@import '../../../styles/variables';
.spec-popup__stepper-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-top: 0.5px solid $border;
}
.spec-popup__stepper-label {
font-size: 15px;
font-weight: 600;
color: $text-1;
}
.spec-popup__stepper {
display: flex;
align-items: center;
}
.spec-popup__stepper-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid $text-5;
background: $card;
display: flex;
align-items: center;
justify-content: center;
color: $text-2;
font-size: 16px;
&--disabled {
opacity: 0.35;
pointer-events: none;
}
}
.spec-popup__stepper-value {
width: 48px;
text-align: center;
font-size: 17px;
font-weight: 700;
color: $text-1;
}