+
+
+
- ¥
- 30
+ ¥
+ 30
满200元使用
指定商品可用
+
+
+
+
+
+
+
+
+
+ ¥
+ 30
+
+
+
满200元使用
+
指定商品可用
+
(限领一张)
+
+
+
-
@@ -48,7 +71,6 @@ const props = defineProps({
const style_content = ref('');
const style_container = ref('');
-const content = ref('');
watch(
props.value,
(newVal, oldValue) => {
@@ -63,71 +85,194 @@ const theme = computed(() => props.value?.content?.theme);
\ No newline at end of file
+.coupon-theme-3 {
+ border-radius: 1.6rem;
+ overflow: hidden;
+ .item {
+ background: rgba(255, 56, 48, 1);
+ width: 100%;
+ padding: 1rem;
+ display: flex;
+ .left {
+ flex: 1;
+ width: 0;
+ background-color: #fff1e1;
+ border-radius: 0.8rem;
+ padding: 1rem;
+ 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: -1.6rem;
+ bottom: -1.6rem;
+ width: 0.1rem;
+ height: calc(100% + 3.2rem);
+ border-left: 0.2rem dashed #ff3830;
+ }
+ .symbol {
+ 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;
+ }
+ .desc {
+ font-size: 1.4rem;
+ font-weight: 500;
+ color: #ff3830;
+ }
+ .limit {
+ color: #999;
+ font-size: 1.2rem;
+ }
+ }
+ }
+ .right {
+ width: 8.6rem;
+ position: relative;
+ padding: 1.7rem;
+ text-align: 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;
+ }
+ }
+ }
+}
+
diff --git a/src/layout/components/main/default/coupon.ts b/src/layout/components/main/default/coupon.ts
index 78175b77..3d1b2de6 100644
--- a/src/layout/components/main/default/coupon.ts
+++ b/src/layout/components/main/default/coupon.ts
@@ -44,7 +44,7 @@ const defaultCoupoin: DefaultCoupon = {
background: [{ color: '#FFF1E1', color_percentage: undefined }],
direction: '90deg',
spacing: 10,
- common_style: { ...defaultCommon, padding_left: 25, padding_right: 25, padding_top: 18, padding_bottom: 18, color_list: [{ color: '#fff', color_percentage: undefined }] },
+ common_style: { ...defaultCommon, padding_left: 18, padding_right: 18, padding_top: 18, padding_bottom: 18, color_list: [{ color: '#fff', color_percentage: undefined }] },
},
};