From 9da40d1e12b5125b9f14943e041b98ca2bb9d477 Mon Sep 17 00:00:00 2001 From: sws <1141121512@qq.com> Date: Fri, 30 Aug 2024 14:05:07 +0800 Subject: [PATCH] =?UTF-8?q?1.=E6=B5=8B=E8=AF=95=E4=BC=98=E5=8C=96=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20sws=202024-08-29?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/model-coupon/index.scss | 208 +++++++++++++++++++++++++ src/components/model-coupon/index.vue | 50 +++--- src/utils/request.ts | 8 +- 3 files changed, 242 insertions(+), 24 deletions(-) diff --git a/src/components/model-coupon/index.scss b/src/components/model-coupon/index.scss index 957dee4c..69518472 100644 --- a/src/components/model-coupon/index.scss +++ b/src/components/model-coupon/index.scss @@ -198,6 +198,124 @@ } } } +.coupon-theme-4 { + border-radius: 1.6rem; + padding: 0.8rem; + overflow: hidden; + display: flex; + background: #ff3830; + .left { + width: 21.4rem; + overflow: hidden; + display: flex; + gap: 0.8rem; + .item { + flex-basis: auto; + flex-shrink: 0; + width: 7.2rem; + height: 7.2rem; + background-color: #fff; + border-radius: 1rem; + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + padding: 0.4rem; + .type { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + background-color: #ffe8e8; + color: #ff3830; + font-size: 1rem; + line-height: 1.4rem; + &::before { + content: ''; + position: absolute; + width: 1.5rem; + height: 3rem; + background-color: #ffe8e8; + left: -0.8rem; + border-radius: 100%; + top: -1.6rem; + z-index: -1; + } + &::after { + content: ''; + position: absolute; + width: 1.5rem; + height: 3rem; + background-color: #ffe8e8; + right: -0.8rem; + border-radius: 100%; + top: -1.6rem; + z-index: -1; + } + } + .price { + text-align: center; + position: relative; + display: flex; + align-items: flex-end; + color: #ff3830; + .symbol { + font-size: 1.2rem; + } + .number { + font-size: 2.4rem; + line-height: 2.4rem; + font-weight: 600; + padding-left: 0.4rem; + } + } + .name { + font-size: 1.1rem; + color: #333; + line-height: 1.6rem; + } + } + } + .right { + flex: 1; + width: 0; + position: relative; + &::before { + content: ''; + width: 18rem; + height: 18rem; + position: absolute; + left: -0.7rem; + top: 50%; + transform: translateY(-50%); + border-radius: 100%; + background: #ff3830; + } + .title { + font-size: 1.6rem; + font-weight: 500; + color: #fff; + line-height: 2.2rem; + } + .desc { + margin-top: 0.3rem; + font-size: 1.2rem; + line-height: 1.7rem; + color: #fff; + } + .coupon-btn { + width: 7.2rem; + height: 2.2rem; + line-height: 2.2rem; + background-color: #fff; + color: #ff3830; + text-align: center; + border-radius: 1.2rem; + margin-top: 0.6rem; + } + } +} .coupon-theme-5 { overflow: hidden; @@ -349,3 +467,93 @@ } } } +.coupon-theme-7 { + overflow: hidden; + .item { + border-radius: 0.4rem; + width: 11.8rem; + height: 6.4rem; + position: relative; + background: linear-gradient(138deg, #f4dba5 0%, #e1b47a 100%); + overflow: hidden; + display: flex; + &::before { + content: ''; + position: absolute; + left: 8rem; + top: -0.6rem; + width: 1.2rem; + height: 1.2rem; + background-color: #fff; + border-radius: 50%; + } + &::after { + content: ''; + position: absolute; + left: 8rem; + bottom: -0.6rem; + width: 1.2rem; + height: 1.2rem; + background-color: #fff; + border-radius: 50%; + } + .left { + width: 8.6rem; + padding: 0.4rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + .price { + text-align: center; + position: relative; + display: flex; + align-items: end; + color: #fff; + margin-bottom: 0.5rem; + .symbol { + font-size: 1.2rem; + font-weight: 500; + } + .number { + font-size: 2.4rem; + font-weight: 500; + line-height: 2rem; + padding-left: 0.4rem; + } + } + .name { + font-size: 1.2rem; + color: #fff; + } + } + .right { + flex: 1; + width: 0; + padding-left: 0.7rem; + position: relative; + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 0.1rem; + height: 100%; + border: 0.1rem dashed #fff; + opacity: 0.61; + } + .coupon-btn { + padding: 0.4rem; + width: 100%; + color: #fff; + font-size: 1.1rem; + font-weight: 500; + text-align: center; + writing-mode: vertical-lr; + letter-spacing: 3px; + } + } + } +} diff --git a/src/components/model-coupon/index.vue b/src/components/model-coupon/index.vue index cc9148cc..8a9bbd4e 100644 --- a/src/components/model-coupon/index.vue +++ b/src/components/model-coupon/index.vue @@ -54,29 +54,24 @@ - + diff --git a/src/utils/request.ts b/src/utils/request.ts index 635ba735..3e48c8e4 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -32,7 +32,7 @@ service.interceptors.request.use( // 响应拦截器 service.interceptors.response.use( (response: AxiosResponse) => { - const { code, msg, data } = response.data; + const { code, msg, message, data } = response.data; if (code == 0) { return response.data; } else if (code == -400) { @@ -45,14 +45,14 @@ service.interceptors.response.use( window.location.href = data; }); } else { - ElMessage.error(msg || '系统出错'); + ElMessage.error(msg || message || '系统出错'); return Promise.reject(new Error(msg || 'Error')); } }, (error: any) => { if (error.response.data) { - const { msg } = error.response.data; - ElMessage.error(msg || '系统出错'); + const { msg, message } = error.response.data; + ElMessage.error(msg || message || '系统出错'); } return Promise.reject(error.message); }