sws
parent
1f6432684c
commit
be60d672a0
|
|
@ -5,7 +5,7 @@
|
|||
<el-form :model="form" label-width="70">
|
||||
<div class="mb-12">通用</div>
|
||||
<el-form-item label="底部背景">
|
||||
<div class="flex-col gap-10 w">
|
||||
<div v-if="isMultBackground" class="flex-col gap-10 w">
|
||||
<div class="size-12">背景色</div>
|
||||
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
|
||||
<div class="flex-row jc-sb align-c">
|
||||
|
|
@ -24,6 +24,9 @@
|
|||
</div>
|
||||
<upload v-model="form.background_img_url" :limit="1" @update:model-value="background_img_url_change"></upload>
|
||||
</div>
|
||||
<div v-else>
|
||||
<color-picker v-model="form.color_list[0].color"></color-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="内边距">
|
||||
<padding :value="form" @update:value="padding_change"></padding>
|
||||
|
|
@ -76,6 +79,10 @@ const props = defineProps({
|
|||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isMultBackground: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
// 初始化表单数据
|
||||
const init_form = reactive({
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ let state = reactive({
|
|||
color: item.color,
|
||||
color_percentage: item.color_percentage,
|
||||
};
|
||||
})
|
||||
}),
|
||||
});
|
||||
const { color_list } = toRefs(state);
|
||||
const emit = defineEmits(['update:value']);
|
||||
|
|
@ -141,7 +141,8 @@ const update_value = () => {
|
|||
}
|
||||
.mo-input-number {
|
||||
:deep(.el-input-number) {
|
||||
.el-input-number__decrease, .el-input-number__increase {
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
right: 3.4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -163,5 +164,4 @@ const update_value = () => {
|
|||
border-bottom-right-radius: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<text v-else class="cr-9">{{ placeholder }}</text>
|
||||
</div>
|
||||
<div class="theme-icon">
|
||||
<template v-if="temp_data_obj === null || notCleardButton">
|
||||
<template v-if="temp_data_obj === null || !clearButton">
|
||||
<icon name="arrow-right" size="12" color="9"></icon>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -64,10 +64,10 @@ const props = defineProps({
|
|||
type: Array as PropType<data[]>,
|
||||
default: () => [],
|
||||
},
|
||||
notCleardButton: {
|
||||
clearButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
});
|
||||
const model_value = defineModel({ type: String, default: '' });
|
||||
const { data } = toRefs(props);
|
||||
|
|
|
|||
|
|
@ -36,10 +36,12 @@
|
|||
<el-form-item label="内间距">
|
||||
<padding :value="form.padding"></padding>
|
||||
</el-form-item>
|
||||
<template v-if="theme !== '3'">
|
||||
<template v-if="theme == '0'">
|
||||
<el-form-item label="内容间距">
|
||||
<slider v-model="form.content_spacing"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="theme !== '3'">
|
||||
<el-form-item label="文章间距">
|
||||
<slider v-model="form.article_spacing"></slider>
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -316,7 +316,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-theme-5 {
|
||||
overflow: hidden;
|
||||
.item {
|
||||
|
|
@ -386,7 +385,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-theme-6 {
|
||||
overflow: hidden;
|
||||
.item {
|
||||
|
|
|
|||
|
|
@ -1,140 +1,144 @@
|
|||
<template>
|
||||
<div :style="style_container">
|
||||
<div class="re" :style="style_content">
|
||||
<template v-if="theme == '1'">
|
||||
<div class="coupon-theme-1">
|
||||
<div class="item">
|
||||
<div class="coupon-theme-1-content tc">
|
||||
<div class="name">满200元使用</div>
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
<div class="coupon-theme-container">
|
||||
<div class="re" :style="style_container">
|
||||
<el-scrollbar>
|
||||
<template v-if="theme == '1'">
|
||||
<div class="coupon-theme-1">
|
||||
<div v-for="item in list" :key="item" class="item">
|
||||
<div class="coupon-theme-1-content tc">
|
||||
<div class="name">满200元使用</div>
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coupon-btn">立即领取</div>
|
||||
</div>
|
||||
<div class="coupon-btn">立即领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '2'">
|
||||
<div class="oh coupon-theme-2">
|
||||
<div class="item">
|
||||
<div class="tc">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
<div class="desc">指定商品可用</div>
|
||||
</div>
|
||||
<div class="coupon-btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '3'">
|
||||
<div class="coupon-theme-3">
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
</template>
|
||||
<template v-else-if="theme == '2'">
|
||||
<div class="coupon-theme-2">
|
||||
<div v-for="item in list" :key="item" class="item">
|
||||
<div class="tc">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
<div class="desc">指定商品可用</div>
|
||||
<div class="limit">(限领一张)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="coupon-btn">
|
||||
<text>立即领取</text>
|
||||
<icon name="arrow-right-o" class="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '4'">
|
||||
<div class="coupon-theme-4">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<div class="type">通用券</div>
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="re z-i flex-col jc-c align-c">
|
||||
<div class="title">先领券 再购物</div>
|
||||
<div class="desc">领券下单·享购物优惠</div>
|
||||
<div class="coupon-btn">领取全部</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '5'">
|
||||
<div class="coupon-theme-5">
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="coupon-btn">领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '6'">
|
||||
<div class="coupon-theme-6">
|
||||
<div class="item">
|
||||
<div class="top">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="coupon-btn">立即领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '7'">
|
||||
<div class="coupon-theme-7">
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</template>
|
||||
<template v-else-if="theme == '3'">
|
||||
<div class="coupon-theme-3">
|
||||
<div v-for="item in list" :key="item" class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="name">满200元使用</div>
|
||||
<div class="desc">指定商品可用</div>
|
||||
<div class="limit">(限领一张)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="coupon-btn">
|
||||
<text>立即领取</text>
|
||||
<icon name="arrow-right-o" class="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="coupon-btn">立即领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="theme == '4'">
|
||||
<div class="coupon-theme-4">
|
||||
<el-scrollbar>
|
||||
<div class="left">
|
||||
<div v-for="item in list" :key="item" class="item">
|
||||
<div class="type">通用券</div>
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="right">
|
||||
<div class="re z-i flex-col jc-c align-c">
|
||||
<div class="title">先领券 再购物</div>
|
||||
<div class="desc">领券下单·享购物优惠</div>
|
||||
<div class="coupon-btn">领取全部</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '5'">
|
||||
<div class="coupon-theme-5">
|
||||
<div v-for="item in list" :key="item" class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="coupon-btn">领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '6'">
|
||||
<div class="coupon-theme-6">
|
||||
<div v-for="item in list" :key="item" class="item">
|
||||
<div class="top">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="coupon-btn">立即领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '7'">
|
||||
<div class="coupon-theme-7">
|
||||
<div v-for="item in list" :key="item" class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="coupon-btn">立即领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { common_styles_computer } from '@/utils';
|
||||
import { common_styles_computer, gradient_computer } from '@/utils';
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const list = 10;
|
||||
|
||||
const style_content = ref('');
|
||||
const style_container = ref('');
|
||||
watch(
|
||||
props.value,
|
||||
|
|
@ -147,7 +151,627 @@ watch(
|
|||
{ immediate: true, deep: true }
|
||||
);
|
||||
const theme = computed(() => props.value?.content?.theme);
|
||||
const theme_style = computed(() => {
|
||||
const new_background = gradient_computer({ color_list: props.value?.style?.background, direction: props.value?.style?.direction }, false);
|
||||
const new_background_inside = gradient_computer({ color_list: props.value?.style?.background_inside, direction: props.value?.style?.direction_inside }, false);
|
||||
const new_btn_background = gradient_computer({ color_list: props.value?.style?.btn_background, direction: props.value?.style?.btn_direction }, false);
|
||||
console.log({
|
||||
price_color: props.value?.style?.price_color,
|
||||
name_color: props.value?.style?.name_color,
|
||||
// 判断是否向对象添加desc_color属性
|
||||
...(!['1', '5', '6', '7'].includes(theme.value) && { desc_color: props.value?.style?.desc_color }),
|
||||
...(!['1', '2', '4', '5', '6', '7'].includes(theme.value) && { limit_send_count: props.value?.style?.limit_send_count }),
|
||||
...(!['3', '5', '6', '7'].includes(theme.value) && { btn_background: new_btn_background }),
|
||||
btn_color: props.value?.style?.btn_color,
|
||||
...(!['2'].includes(theme.value) && { background: new_background }),
|
||||
...(!['1', '2', '5', '7'].includes(theme.value) && { background_inside: new_background_inside }),
|
||||
...(!['3', '4'].includes(theme.value) && { spacing: props.value?.style?.spacing + 'px' }),
|
||||
});
|
||||
return {
|
||||
price_color: props.value?.style?.price_color,
|
||||
name_color: props.value?.style?.name_color,
|
||||
// 判断是否向对象添加desc_color属性
|
||||
...(!['1', '5', '6', '7'].includes(theme.value) && { desc_color: props.value?.style?.desc_color }),
|
||||
...(!['1', '2', '4', '5', '6', '7'].includes(theme.value) && { limit_send_count: props.value?.style?.limit_send_count }),
|
||||
...(!['5', '6', '7'].includes(theme.value) && { btn_background: new_btn_background }),
|
||||
btn_color: props.value?.style?.btn_color,
|
||||
...(!['2'].includes(theme.value) && { background: new_background }),
|
||||
...(!['1', '2', '5', '7'].includes(theme.value) && { background_inside: new_background_inside }),
|
||||
spacing: props.value?.style?.spacing + 'px',
|
||||
...(!['1', '2', '3', '5', '6', '7'].includes(theme.value) && { type_background: props.value?.style?.type_background }),
|
||||
...(!['1', '2', '3', '5', '6', '7'].includes(theme.value) && { type_color: props.value?.style?.type_color }),
|
||||
...(!['1', '2', '3', '5', '6', '7'].includes(theme.value) && { content_title_color: props.value?.style?.content_title_color }),
|
||||
...(!['1', '2', '3', '5', '6', '7'].includes(theme.value) && { content_desc_color: props.value?.style?.content_desc_color }),
|
||||
};
|
||||
});
|
||||
const theme_3_border_style = computed(() => {
|
||||
return props.value?.style?.background[0].color;
|
||||
});
|
||||
const theme_7_background_style = computed(() => {
|
||||
if (props.value?.style?.common_style.color_list.length > 0) {
|
||||
return props.value?.style?.common_style.color_list[0].color;
|
||||
} else {
|
||||
return '#fff';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
.coupon-theme-1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: v-bind('theme_style.spacing');
|
||||
.item {
|
||||
flex-basis: auto;
|
||||
flex-shrink: 0;
|
||||
background: v-bind('theme_style.background');
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
border-radius: 1rem;
|
||||
margin-top: 1rem;
|
||||
.name {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: v-bind('theme_style.name_color');
|
||||
}
|
||||
.price {
|
||||
color: v-bind('theme_style.price_color');
|
||||
padding: 0.5rem 0 0.8rem 0;
|
||||
.symbol {
|
||||
font-size: 1.2rem;
|
||||
position: relative;
|
||||
bottom: 0.3rem;
|
||||
}
|
||||
.number {
|
||||
font-size: 3.8rem;
|
||||
line-height: 2.4rem;
|
||||
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: v-bind('theme_style.btn_color');
|
||||
background: v-bind('theme_style.btn_background');
|
||||
border-radius: 2.3rem;
|
||||
position: relative;
|
||||
top: -0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: v-bind('theme_style.spacing');
|
||||
.item {
|
||||
flex-basis: auto;
|
||||
flex-shrink: 0;
|
||||
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;
|
||||
.price {
|
||||
color: v-bind('theme_style.price_color');
|
||||
padding: 0.3rem 0;
|
||||
.symbol {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.number {
|
||||
font-size: 2.6rem;
|
||||
font-weight: 500;
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 0.8rem;
|
||||
color: v-bind('theme_style.name_color');
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.desc {
|
||||
font-size: 0.8rem;
|
||||
color: v-bind('theme_style.desc_color');
|
||||
}
|
||||
|
||||
.coupon-btn {
|
||||
margin: 0 auto;
|
||||
width: 5.5rem;
|
||||
height: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: v-bind('theme_style.btn_color');
|
||||
background: v-bind('theme_style.btn_background');
|
||||
border-radius: 2.3rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-3 {
|
||||
display: flex;
|
||||
gap: v-bind('theme_style.spacing');
|
||||
.item {
|
||||
overflow: hidden;
|
||||
border-radius: 1.6rem;
|
||||
flex-basis: auto;
|
||||
flex-shrink: 0;
|
||||
background: v-bind('theme_style.background');
|
||||
width: 100%;
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
.left {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background: v-bind('theme_style.background_inside');
|
||||
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: v-bind('theme_style.price_color');
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -3rem;
|
||||
bottom: -3rem;
|
||||
width: 0.1rem;
|
||||
height: calc(100% + 6rem);
|
||||
border-left: 0.1rem dashed v-bind('theme_3_border_style');
|
||||
}
|
||||
.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: v-bind('theme_style.name_color');
|
||||
font-weight: 500;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.desc {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: v-bind('theme_style.desc_color');
|
||||
line-height: 2rem;
|
||||
}
|
||||
.limit {
|
||||
color: v-bind('theme_style.limit_send_count');
|
||||
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: v-bind('theme_style.background');
|
||||
left: -1.6rem;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.coupon-btn {
|
||||
color: v-bind('theme_style.btn_color');
|
||||
position: relative;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
.icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-4 {
|
||||
overflow: hidden;
|
||||
border-radius: 1.6rem;
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
background: v-bind('theme_style.background');
|
||||
.left {
|
||||
width: 21.4rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: v-bind('theme_style.spacing');
|
||||
.item {
|
||||
overflow: hidden;
|
||||
flex-basis: auto;
|
||||
flex-shrink: 0;
|
||||
width: 7.2rem;
|
||||
height: 7.2rem;
|
||||
background: v-bind('theme_style.background_inside');
|
||||
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: v-bind('theme_style.type_background');
|
||||
color: v-bind('theme_style.type_color');
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1.5rem;
|
||||
height: 3rem;
|
||||
background: v-bind('theme_style.type_background');
|
||||
left: -0.8rem;
|
||||
border-radius: 100%;
|
||||
top: -1.6rem;
|
||||
z-index: -1;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1.5rem;
|
||||
height: 3rem;
|
||||
background: v-bind('theme_style.type_background');
|
||||
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: v-bind('theme_style.price_color');
|
||||
.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: v-bind('theme_style.name_color');
|
||||
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: v-bind('theme_style.background');
|
||||
}
|
||||
.title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: v-bind('theme_style.content_title_color');
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
.desc {
|
||||
margin-top: 0.3rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.7rem;
|
||||
color: v-bind('theme_style.content_desc_color');
|
||||
}
|
||||
.coupon-btn {
|
||||
width: 7.2rem;
|
||||
height: 2.2rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2.2rem;
|
||||
background: v-bind('theme_style.btn_background');
|
||||
color: v-bind('theme_style.btn_color');
|
||||
text-align: center;
|
||||
border-radius: 1.2rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-5 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: v-bind('theme_style.spacing');
|
||||
.item {
|
||||
flex-basis: auto;
|
||||
flex-shrink: 0;
|
||||
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: v-bind('theme_style.price_color');
|
||||
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: v-bind('theme_style.name_color');
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 4.6rem;
|
||||
padding-left: 2rem;
|
||||
border-radius: 0.6rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background: v-bind('theme_style.background');
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.coupon-btn {
|
||||
color: v-bind('theme_style.btn_color');
|
||||
position: relative;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
writing-mode: vertical-lr;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-6 {
|
||||
display: flex;
|
||||
gap: v-bind('theme_style.spacing');
|
||||
.item {
|
||||
flex-basis: auto;
|
||||
flex-shrink: 0;
|
||||
border-radius: 1.2rem;
|
||||
padding: 0.6rem;
|
||||
width: 14rem;
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
background: v-bind('theme_style.background');
|
||||
.top {
|
||||
width: 100%;
|
||||
padding: 0.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
background: v-bind('theme_style.background_inside');
|
||||
border-radius: 0.6rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
background: v-bind('theme_style.background');
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -0.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
background: v-bind('theme_style.background');
|
||||
border-radius: 50%;
|
||||
}
|
||||
.price {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: v-bind('theme_style.price_color');
|
||||
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: v-bind('theme_style.name_color');
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 0.6rem;
|
||||
text-align: center;
|
||||
.coupon-btn {
|
||||
color: v-bind('theme_style.btn_color');
|
||||
position: relative;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-7 {
|
||||
display: flex;
|
||||
gap: v-bind('theme_style.spacing');
|
||||
.item {
|
||||
flex-basis: auto;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0.4rem;
|
||||
width: 11.8rem;
|
||||
height: 6.4rem;
|
||||
position: relative;
|
||||
background: v-bind('theme_style.background');
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8rem;
|
||||
top: -0.6rem;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
background-color: v-bind(theme_7_background_style);
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8rem;
|
||||
bottom: -0.6rem;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
background-color: v-bind(theme_7_background_style);
|
||||
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: v-bind('theme_style.price_color');
|
||||
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: v-bind('theme_style.name_color');
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
padding-left: 0.7rem;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.05rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border: 0.1rem dashed v-bind(theme_7_background_style);
|
||||
opacity: 0.61;
|
||||
}
|
||||
.coupon-btn {
|
||||
padding: 0.4rem;
|
||||
width: 100%;
|
||||
color: v-bind('theme_style.btn_color');
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
writing-mode: vertical-lr;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,10 +29,21 @@ const default_config = {
|
|||
desc_color: '#FF3830',
|
||||
// 主题1时不显示
|
||||
limit_send_count: '#999',
|
||||
btn_background: [{ color: '#FF3830', color_percentage: undefined }],
|
||||
btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
btn_direction: '90deg',
|
||||
btn_color: '#FF3830',
|
||||
background: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
background: [{ color: '#FF3830', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
// 主题1时不显示
|
||||
background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
// 主题1时不显示
|
||||
direction_inside: '90deg',
|
||||
spacing: 20,
|
||||
// 风格4字段
|
||||
type_color: '#FF3830',
|
||||
type_background: '#FFF1E1',
|
||||
content_title_color: '#fff',
|
||||
content_desc_color: '#fff',
|
||||
},
|
||||
theme_2: {
|
||||
price_color: '#FF3830',
|
||||
|
|
@ -40,22 +51,44 @@ const default_config = {
|
|||
desc_color: '#999',
|
||||
// 主题2时不显示
|
||||
limit_send_count: '#999',
|
||||
btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
btn_background: [{ color: '#FF3830', color_percentage: undefined }],
|
||||
btn_direction: '90deg',
|
||||
btn_color: '#fff',
|
||||
// 当为主题2时，不显示
|
||||
background: [{ color: '#fff', color_percentage: undefined }],
|
||||
// 当为主题2时，不显示
|
||||
direction: '90deg',
|
||||
// 主题2时不显示
|
||||
background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
// 主题2时不显示
|
||||
direction_inside: '90deg',
|
||||
spacing: 15,
|
||||
// 风格4字段
|
||||
type_color: '#FF3830',
|
||||
type_background: '#FFF1E1',
|
||||
content_title_color: '#fff',
|
||||
content_desc_color: '#fff',
|
||||
},
|
||||
theme_3: {
|
||||
price_color: '#FF3830',
|
||||
name_color: '#FF3830',
|
||||
desc_color: '#FF3830',
|
||||
limit_send_count: '#999',
|
||||
// 主题3时不显示
|
||||
btn_background: [{ color: '#FF3830', color_percentage: undefined }],
|
||||
btn_color: '#FF3830',
|
||||
background: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
// 当为主题34时，间距不给予修改，优惠券沾满整行
|
||||
spacing: 0,
|
||||
// 主题3时不显示
|
||||
btn_direction: '90deg',
|
||||
btn_color: '#fff',
|
||||
background: [{ color: '#FF3830', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
direction_inside: '90deg',
|
||||
spacing: 8,
|
||||
// 风格4字段
|
||||
type_color: '#FF3830',
|
||||
type_background: '#FFF1E1',
|
||||
content_title_color: '#fff',
|
||||
content_desc_color: '#fff',
|
||||
},
|
||||
theme_4: {
|
||||
price_color: '#FF3830',
|
||||
|
|
@ -64,10 +97,18 @@ const default_config = {
|
|||
// 主题4时不显示
|
||||
limit_send_count: '#999',
|
||||
btn_background: [{ color: '#fff', color_percentage: undefined }],
|
||||
btn_direction: '90deg',
|
||||
btn_color: '#FF3830',
|
||||
background: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
// 当为主题34时，间距不给予修改，优惠券沾满整行
|
||||
spacing: 0,
|
||||
background: [{ color: '#ff3830', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
background_inside: [{ color: '#fff', color_percentage: undefined }],
|
||||
direction_inside: '90deg',
|
||||
spacing: 8,
|
||||
// 风格4字段
|
||||
type_color: '#FF3830',
|
||||
type_background: '#FFF1E1',
|
||||
content_title_color: '#fff',
|
||||
content_desc_color: '#fff',
|
||||
},
|
||||
theme_5: {
|
||||
price_color: '#FF3830',
|
||||
|
|
@ -78,9 +119,24 @@ const default_config = {
|
|||
limit_send_count: '#999',
|
||||
// 主题5时不显示
|
||||
btn_background: [{ color: '#fff', color_percentage: undefined }],
|
||||
// 主题5时不显示
|
||||
btn_direction: '90deg',
|
||||
btn_color: '#fff',
|
||||
background: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
background: [
|
||||
{ color: '#FFA273', color_percentage: undefined },
|
||||
{ color: '#FF3030', color_percentage: undefined },
|
||||
],
|
||||
direction: '90deg',
|
||||
// 主题5时不显示
|
||||
background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
// 主题5时不显示
|
||||
direction_inside: '90deg',
|
||||
spacing: 10,
|
||||
// 风格4字段
|
||||
type_color: '#FF3830',
|
||||
type_background: '#FFF1E1',
|
||||
content_title_color: '#fff',
|
||||
content_desc_color: '#fff',
|
||||
},
|
||||
theme_6: {
|
||||
price_color: '#FF3830',
|
||||
|
|
@ -91,9 +147,19 @@ const default_config = {
|
|||
limit_send_count: '#999',
|
||||
// 主题6时不显示
|
||||
btn_background: [{ color: '#fff', color_percentage: undefined }],
|
||||
// 主题6时不显示
|
||||
btn_direction: '90deg',
|
||||
btn_color: '#fff',
|
||||
background: [{ color: '#FF3830', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
background_inside: [{ color: '#fff', color_percentage: undefined }],
|
||||
direction_inside: '90deg',
|
||||
spacing: 10,
|
||||
// 风格4字段
|
||||
type_color: '#FF3830',
|
||||
type_background: '#FFF1E1',
|
||||
content_title_color: '#fff',
|
||||
content_desc_color: '#fff',
|
||||
},
|
||||
theme_7: {
|
||||
price_color: '#fff',
|
||||
|
|
@ -104,13 +170,23 @@ const default_config = {
|
|||
limit_send_count: '#999',
|
||||
// 主题7时不显示
|
||||
btn_background: [{ color: '#E1B47A', color_percentage: undefined }],
|
||||
btn_direction: '90deg',
|
||||
btn_color: '#fff',
|
||||
background: [
|
||||
{ color: '#FF3830', color_percentage: undefined },
|
||||
{ color: '#F4DBA5', color_percentage: undefined },
|
||||
{ color: '#E1B47A', color_percentage: undefined },
|
||||
],
|
||||
direction: '90deg',
|
||||
// 主题7时不显示
|
||||
background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
// 主题7时不显示
|
||||
direction_inside: '90deg',
|
||||
spacing: 10,
|
||||
// 风格4字段
|
||||
type_color: '#FF3830',
|
||||
type_background: '#FFF1E1',
|
||||
content_title_color: '#fff',
|
||||
content_desc_color: '#fff',
|
||||
},
|
||||
},
|
||||
common_style: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="styles">
|
||||
<el-form :model="form" label-width="70">
|
||||
<el-form :model="form" label-width="75">
|
||||
<card-container class="mb-8">
|
||||
<div class="mb-12">优惠券样式</div>
|
||||
<el-form-item label="金额">
|
||||
|
|
@ -14,24 +14,40 @@
|
|||
<color-picker v-model="form.desc_color" :default-color="clone_form.desc_color"></color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="!['1', '2', '3', '5', '6', '7'].includes(theme)">
|
||||
<el-form-item label="券类型颜色">
|
||||
<color-picker v-model="form.type_color" :default-color="clone_form.type_color"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="券类型背景">
|
||||
<color-picker v-model="form.type_background" :default-color="clone_form.type_background"></color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="!['1', '2', '4', '5', '6', '7'].includes(theme)">
|
||||
<el-form-item label="数量限制">
|
||||
<color-picker v-model="form.limit_send_count" :default-color="clone_form.limit_send_count"></color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="!['2'].includes(theme)">
|
||||
<el-form-item label="背景">
|
||||
<mult-color-picker :value="form.background" :type="form.direction"></mult-color-picker>
|
||||
<el-form-item :label="(['3', '4', '6'].includes(theme) ? '外' : '') + '背景'">
|
||||
<template v-if="!['3', '4', '6'].includes(theme)">
|
||||
<mult-color-picker :value="form.background" :type="form.direction" @update:value="background_event"></mult-color-picker>
|
||||
</template>
|
||||
<template v-else>
|
||||
<color-picker v-model="form.background[0].color" :default-color="clone_form.background[0].color"></color-picker>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="!['3', '4'].includes(theme)">
|
||||
<el-form-item label="间距">
|
||||
<slider v-model="form.spacing"></slider>
|
||||
<template v-if="!['1', '2', '5', '7'].includes(theme)">
|
||||
<el-form-item label="内背景">
|
||||
<mult-color-picker :value="form.background_inside" :type="form.direction_inside" @update:value="background_inside_event"></mult-color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="!['5', '6', '7'].includes(theme)">
|
||||
<el-form-item label="间距">
|
||||
<slider v-model="form.spacing"></slider>
|
||||
</el-form-item>
|
||||
<template v-if="!['3', '5', '6', '7'].includes(theme)">
|
||||
<el-form-item label="按钮背景">
|
||||
<mult-color-picker :value="form.btn_background" :type="form.btn_direction"></mult-color-picker>
|
||||
<mult-color-picker :value="form.btn_background" :type="form.btn_direction" @update:value="btn_background_event"></mult-color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="按钮文字">
|
||||
|
|
@ -40,7 +56,7 @@
|
|||
</card-container>
|
||||
</el-form>
|
||||
<div class="divider-line"></div>
|
||||
<common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
|
||||
<common-styles class="styles-height" :value="form.common_style" :is-mult-background="theme !== '7'" @update:value="common_styles_update" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -59,6 +75,23 @@ const emit = defineEmits(['update:value']);
|
|||
// 默认值
|
||||
let form = reactive(props.value);
|
||||
let clone_form = cloneDeep(props.value);
|
||||
|
||||
const background_event = (arry: color_list[], type: number) => {
|
||||
form.background = arry;
|
||||
form.direction = type.toString();
|
||||
emit('update:value', form);
|
||||
};
|
||||
const background_inside_event = (arry: color_list[], type: number) => {
|
||||
form.background_inside = arry;
|
||||
form.direction_inside = type.toString();
|
||||
emit('update:value', form);
|
||||
};
|
||||
|
||||
const btn_background_event = (arry: color_list[], type: number) => {
|
||||
form.btn_background = arry;
|
||||
form.btn_direction = type.toString();
|
||||
emit('update:value', form);
|
||||
};
|
||||
const common_styles_update = (val: Object) => {
|
||||
form.common_style = val;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<el-form :model="form" label-width="70">
|
||||
<card-container>
|
||||
<el-form-item label="选择风格">
|
||||
<theme-select v-model="form.theme" :data="base_list.themeList" :not-cleard-button="true" @update:model-value="themeChange"></theme-select>
|
||||
<theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
|
||||
</el-form-item>
|
||||
<template v-if="['1', '2', '3'].includes(form.theme)">
|
||||
<el-form-item v-if="['2', '3'].includes(form.theme)" label="logo">
|
||||
|
|
|
|||
|
|
@ -18,8 +18,15 @@ interface DefaultCoupon {
|
|||
btn_color: string;
|
||||
background: color_list[];
|
||||
direction: string;
|
||||
background_inside: color_list[];
|
||||
direction_inside: string;
|
||||
spacing: number;
|
||||
common_style: object;
|
||||
// 风格4字段
|
||||
type_color: string;
|
||||
type_background: string;
|
||||
content_title_color: string;
|
||||
content_desc_color: string;
|
||||
};
|
||||
}
|
||||
const defaultCoupoin: DefaultCoupon = {
|
||||
|
|
@ -41,10 +48,19 @@ const defaultCoupoin: DefaultCoupon = {
|
|||
btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
btn_direction: '90deg',
|
||||
btn_color: '#FF3830',
|
||||
background: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
background: [{ color: '#FF3830', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
spacing: 10,
|
||||
// 内背景
|
||||
background_inside: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
direction_inside: '90deg',
|
||||
spacing: 20,
|
||||
common_style: { ...defaultCommon, padding_left: 18, padding_right: 18, padding_top: 18, padding_bottom: 18, color_list: [{ color: '#fff', color_percentage: undefined }] },
|
||||
|
||||
// 风格4字段
|
||||
type_color: '#FF3830',
|
||||
type_background: '#FFF1E1',
|
||||
content_title_color: '#fff',
|
||||
content_desc_color: '#fff',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { isEmpty } from 'lodash';
|
||||
export const predefine_colors = [ '#fff', '#ddd', '#ccc', '#999', '#666', '#333', '#000', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', '#1F93FF', '#c7158577'];
|
||||
export const predefine_colors = ['#fff', '#ddd', '#ccc', '#999', '#666', '#333', '#000', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', '#1F93FF', '#c7158577'];
|
||||
/**
|
||||
* 判断一个对象是否为空。
|
||||
*
|
||||
|
|
@ -40,22 +40,26 @@ export function is_obj(obj: unknown): boolean {
|
|||
* @param {string[], string} path
|
||||
* @returns {string}
|
||||
*/
|
||||
export function gradient_computer(new_style: gradientStyle) {
|
||||
export function gradient_computer(new_style: gradientStyle, is_return_all: boolean = true) {
|
||||
let color_list = new_style.color_list;
|
||||
let direction = new_style.direction;
|
||||
return gradient_handle(color_list, direction);
|
||||
return gradient_handle(color_list, direction, is_return_all);
|
||||
}
|
||||
/**
|
||||
* 根据给定的颜色列表和方向生成一个线性渐变的CSS样式字符串。
|
||||
*
|
||||
* @param color_list 颜色列表，包含渐变中的各个颜色值。
|
||||
* @param direction 渐变的方向，可以是角度或其他CSS支持的渐变方向。
|
||||
* @param is_return_all 是否返回所有样式，包括渐变类型、颜色列表和方向。默认为false，只返回渐变样式。
|
||||
* @returns 返回一个字符串，包含生成的线性渐变样式。
|
||||
*/
|
||||
export function gradient_handle(color_list: color_list[], direction: string) {
|
||||
export function gradient_handle(color_list: color_list[], direction: string, is_return_all: boolean = true) {
|
||||
let container_common_styles = ``;
|
||||
if (color_list && color_list.length > 0) {
|
||||
container_common_styles += `background: linear-gradient(${direction || '180deg'},`;
|
||||
if (is_return_all) {
|
||||
container_common_styles += `background:`;
|
||||
}
|
||||
container_common_styles += `linear-gradient(${direction || '180deg'},`;
|
||||
|
||||
const new_color_list = JSON.parse(JSON.stringify(color_list));
|
||||
new_color_list.forEach((item: any, index: number) => {
|
||||
|
|
@ -80,9 +84,11 @@ export function gradient_handle(color_list: color_list[], direction: string) {
|
|||
}
|
||||
}
|
||||
});
|
||||
container_common_styles += `);`;
|
||||
container_common_styles += `)`;
|
||||
if (is_return_all) {
|
||||
container_common_styles += `;`;
|
||||
}
|
||||
}
|
||||
|
||||
return container_common_styles;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue