From 7754580933b7104a344457b895b4251a09c9ddff Mon Sep 17 00:00:00 2001 From: sws <1141121512@qq.com> Date: Thu, 29 Aug 2024 18:55:53 +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 | 336 +++++++++++++++++++++++++ src/components/model-coupon/index.vue | 255 +++++-------------- 2 files changed, 396 insertions(+), 195 deletions(-) create mode 100644 src/components/model-coupon/index.scss diff --git a/src/components/model-coupon/index.scss b/src/components/model-coupon/index.scss new file mode 100644 index 00000000..672790eb --- /dev/null +++ b/src/components/model-coupon/index.scss @@ -0,0 +1,336 @@ +.coupon-theme-1 { + overflow: hidden; + display: flex; + flex-direction: row; + gap: 2rem; + .item { + background-color: #ff3830; + width: 9rem; + height: 9rem; + border-radius: 1rem; + margin-top: 1rem; + .name { + padding: 0.5rem; + font-size: 1rem; + color: #ff3830; + } + .price { + color: #ff3830; + padding: 0.5rem 0; + .symbol { + font-size: 0.8rem; + } + .number { + font-size: 3rem; + font-weight: 500; + padding-left: 0.4rem; + } + } + .coupon-theme-1-content { + width: calc(100% - 1rem); + margin: 0 0.5rem; + background-image: url('../../assets/images/components/model-coupon/theme-1-bg.png'); + background-size: 100% 100%; + position: relative; + top: -1rem; + } + + .coupon-btn { + margin: 0 auto; + width: 7.1rem; + height: 1.756rem; + line-height: 1.756rem; + text-align: center; + font-size: 0.9rem; + color: #ff3830; + background: #fff1e1; + border-radius: 2.3rem; + position: relative; + top: -0.5rem; + } + } +} +.coupon-theme-2 { + overflow: hidden; + display: flex; + flex-direction: row; + gap: 1.5rem; + .item { + background-image: url('../../assets/images/components/model-coupon/theme-2-content-bg.png'); + background-size: 100% 100%; + width: 8.5rem; + height: 10rem; + padding: 0.5rem; + .name { + font-size: 0.8rem; + color: #ff3830; + font-weight: 500; + margin-bottom: 0.4rem; + } + .desc { + font-size: 0.8rem; + color: #999; + } + .price { + color: #ff3830; + padding: 0.3rem 0; + .symbol { + font-size: 0.8rem; + } + .number { + font-size: 2.6rem; + font-weight: 500; + padding-left: 0.4rem; + } + } + + .coupon-btn { + margin: 0 auto; + width: 5.5rem; + height: 1.6rem; + line-height: 1.6rem; + text-align: center; + font-size: 0.9rem; + color: #fff; + background: #ff3830; + border-radius: 2.3rem; + margin-top: 0.5rem; + } + } +} +.coupon-theme-3 { + border-radius: 1.6rem; + overflow: hidden; + .item { + background: rgba(255, 56, 48, 1); + width: 100%; + padding: 0.8rem; + display: flex; + .left { + flex: 1; + width: 0; + background-color: #fff1e1; + border-radius: 0.8rem; + padding: 0.6rem 1.2rem 0.3rem 1.2rem; + display: flex; + align-items: center; + .price { + text-align: center; + width: 10rem; + position: relative; + display: flex; + align-items: flex-start; + color: #ff3830; + &::before { + content: ''; + position: absolute; + right: 0; + top: -3rem; + bottom: -3rem; + width: 0.1rem; + height: calc(100% + 6rem); + border-left: 0.1rem dashed #ff3830; + } + .symbol { + font-size: 2.4rem; + font-weight: 600; + } + .number { + font-size: 4.6rem; + font-weight: 600; + padding-left: 0.4rem; + line-height: 4rem; + } + } + .text { + flex: 1; + width: 0; + display: flex; + flex-direction: column; + align-items: center; + .name { + font-size: 1.8rem; + color: #ff3830; + font-weight: 500; + line-height: 2.5rem; + } + .desc { + font-size: 1.4rem; + font-weight: 500; + color: #ff3830; + line-height: 2rem; + } + .limit { + color: #999; + font-size: 1.2rem; + line-height: 1.4rem; + } + } + } + .right { + width: 8.6rem; + position: relative; + padding: 0 1.8rem; + text-align: center; + display: flex; + align-items: center; + &::before { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 200%; + height: 200%; + background-color: #ff3830; + left: -1.6rem; + border-radius: 100%; + } + .coupon-btn { + color: #fff; + position: relative; + font-size: 1.8rem; + font-weight: 500; + text-align: center; + .icon { + font-size: 2rem; + } + } + } + } +} + +.coupon-theme-5 { + overflow: hidden; + .item { + border-radius: 0.6rem; + width: 12.6rem; + height: 6.4rem; + position: relative; + .left { + position: absolute; + left: 0; + width: 10rem; + height: 100%; + background-image: url('../../assets/images/components/model-coupon/theme-5-bg.png'); + background-size: 100% 100%; + padding: 0.6rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 1; + .price { + text-align: center; + position: relative; + display: flex; + align-items: end; + color: #ff3830; + margin-bottom: 0.5rem; + .symbol { + font-size: 1.2rem; + font-weight: 500; + } + .number { + font-size: 2.4rem; + font-weight: 500; + line-height: 20px; + padding-left: 0.4rem; + } + } + .name { + font-size: 1.2rem; + color: #ff3830; + } + } + .right { + width: 4.6rem; + padding-left: 2rem; + border-radius: 0.6rem; + position: absolute; + top: 0; + bottom: 0; + right: 0; + height: 100%; + background: linear-gradient(180deg, #ffa273 0%, #ff3030 100%); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + .coupon-btn { + color: #fff; + position: relative; + font-size: 1.2rem; + font-weight: 500; + text-align: center; + writing-mode: vertical-lr; + letter-spacing: 5px; + } + } + } +} + +.coupon-theme-6 { + overflow: hidden; + .item { + border-radius: 1.2rem; + padding: 0.6rem; + width: 14rem; + height: 10rem; + position: relative; + .top { + width: 100%; + padding: 0.4rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 1; + .price { + text-align: center; + position: relative; + display: flex; + align-items: end; + color: #ff3830; + margin-bottom: 0.1rem; + .symbol { + font-size: 2.2rem; + font-weight: 500; + } + .number { + font-size: 3.2rem; + font-weight: 500; + line-height: 32px; + padding-left: 0.4rem; + } + } + .name { + font-size: 1.2rem; + color: #666; + } + } + .bottom { + width: 4.6rem; + padding-left: 2rem; + border-radius: 0.6rem; + position: absolute; + top: 0; + bottom: 0; + right: 0; + height: 100%; + background: linear-gradient(180deg, #ffa273 0%, #ff3030 100%); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + .coupon-btn { + color: #fff; + position: relative; + font-size: 1.2rem; + font-weight: 500; + text-align: center; + writing-mode: vertical-lr; + letter-spacing: 5px; + } + } + } +} diff --git a/src/components/model-coupon/index.vue b/src/components/model-coupon/index.vue index 332cb33e..806bf9ec 100644 --- a/src/components/model-coupon/index.vue +++ b/src/components/model-coupon/index.vue @@ -47,15 +47,70 @@
立即领取 - +
- - - + + + @@ -84,195 +139,5 @@ watch( const theme = computed(() => props.value?.content?.theme);