From 72c761428b31eca6eb4b82f34c601bfd56599494 Mon Sep 17 00:00:00 2001 From: duanshuwen Date: Thu, 7 Aug 2025 20:03:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=AE=A2=E5=8D=95?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=80=80=E6=AC=BE=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/login/index.vue | 4 +- pages/login/styles/index.scss | 118 +++--- pages/order/components/OrderInfo/index.vue | 59 ++- pages/order/components/RefundPopup/README.md | 158 +++++++ pages/order/components/RefundPopup/demo.vue | 389 ++++++++++++++++++ .../order/components/RefundPopup/example.vue | 274 ++++++++++++ pages/order/components/RefundPopup/index.vue | 217 ++++++++++ .../components/RefundPopup/styles/index.scss | 168 ++++++++ pages/order/detail.vue | 55 ++- static/dh.png | Bin 0 -> 37849 bytes 10 files changed, 1345 insertions(+), 97 deletions(-) create mode 100644 pages/order/components/RefundPopup/README.md create mode 100644 pages/order/components/RefundPopup/demo.vue create mode 100644 pages/order/components/RefundPopup/example.vue create mode 100644 pages/order/components/RefundPopup/index.vue create mode 100644 pages/order/components/RefundPopup/styles/index.scss create mode 100644 static/dh.png diff --git a/pages/login/index.vue b/pages/login/index.vue index 0a6a039..909cee8 100644 --- a/pages/login/index.vue +++ b/pages/login/index.vue @@ -1,6 +1,5 @@ + + \ No newline at end of file diff --git a/pages/order/components/RefundPopup/example.vue b/pages/order/components/RefundPopup/example.vue new file mode 100644 index 0000000..a42c36c --- /dev/null +++ b/pages/order/components/RefundPopup/example.vue @@ -0,0 +1,274 @@ + + + + + \ No newline at end of file diff --git a/pages/order/components/RefundPopup/index.vue b/pages/order/components/RefundPopup/index.vue new file mode 100644 index 0000000..1ad3a11 --- /dev/null +++ b/pages/order/components/RefundPopup/index.vue @@ -0,0 +1,217 @@ + + + + + \ No newline at end of file diff --git a/pages/order/components/RefundPopup/styles/index.scss b/pages/order/components/RefundPopup/styles/index.scss new file mode 100644 index 0000000..dac80d3 --- /dev/null +++ b/pages/order/components/RefundPopup/styles/index.scss @@ -0,0 +1,168 @@ +// RefundPopup 退款弹窗样式 +.refund-popup { + width: 320px; + background: linear-gradient(173deg, #cbf6ff 3%, #ffffff 32%); + border-radius: 12px; + box-sizing: border-box; + padding-top: 64px; + position: relative; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + + // 头部区域 + &__avatar { + width: 132px; + height: 132px; + position: absolute; + top: -45px; + left: 50%; + transform: translateX(-50%); + } + + // 内容区域 + &__content { + padding: 12px 20px 20px; + text-align: center; + } + + &__title { + font-size: 16px; + font-weight: 500; + color: #333; + line-height: 22px; + margin-bottom: 12px; + text-align: center; + } + + &__amount { + display: flex; + justify-content: center; + align-items: baseline; + margin-bottom: 4px; + + .amount-symbol { + font-size: 12px; + color: #ff6a00; + } + + .amount-value { + font-size: 24px; + color: #ff6a00; + margin: 0 2px; + } + + .amount-unit { + font-size: 12px; + color: #ff6a00; + } + } + + &__amount-label { + font-size: 12px; + color: #333; + margin-bottom: 16px; + } + + &__description { + font-size: 14px; + color: #333333; + line-height: 1.5; + margin-bottom: 16px; + text-align: left; + } + + &__policy { + text-align: left; + margin-bottom: 16px; + + .policy-title { + font-size: 14px; + color: #007aff; + font-weight: 600; + margin-bottom: 8px; + } + + .policy-list { + .policy-item { + font-size: 12px; + color: #333333; + line-height: 22px; + text-align: justify; + + &:last-child { + margin-bottom: 0; + } + } + } + } + + // 按钮区域 + &__actions { + display: flex; + gap: 12px; + padding: 0 20px 20px; + + .action-btn { + flex: 1; + height: 44px; + border-radius: 22px; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + transition: all 0.3s ease; + outline: none; + + &.secondary-btn { + background: #007aff; + color: #ffffff; + + &:active { + background: #0056cc; + transform: scale(0.98); + } + } + + &.primary-btn { + background: #ff9500; + color: #ffffff; + + &:active { + background: #e6850e; + transform: scale(0.98); + } + } + } + } +} + +// 动画效果 +@keyframes popupFadeIn { + from { + opacity: 0; + transform: scale(0.8); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes flowerBounce { + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-4px); + } + 60% { + transform: translateY(-2px); + } +} + +.refund-popup { + animation: popupFadeIn 0.3s ease-out; +} diff --git a/pages/order/detail.vue b/pages/order/detail.vue index 68edacb..e55d387 100644 --- a/pages/order/detail.vue +++ b/pages/order/detail.vue @@ -12,26 +12,41 @@ - + + + +