Merge branch 'dev-sws' into dev-yxl
于肖磊
commit
29bdb6cb48
|
|
@ -103,7 +103,6 @@ const content_padding = ref('');
|
|||
const content_spacing = ref('');
|
||||
// 文章间距
|
||||
const article_spacing = ref('');
|
||||
const article_spacing_children = ref('');
|
||||
const article_item_height = ref('155');
|
||||
|
||||
const article_style = ref({});
|
||||
|
|
@ -227,8 +226,7 @@ watch(
|
|||
if (article_theme.value == '0') {
|
||||
article_style.value += content_spacing.value + content_padding.value + content_radius.value;
|
||||
} else if (article_theme.value == '1') {
|
||||
article_spacing_children.value = `width: calc(50% - ${new_style.article_spacing / 2}px);`;
|
||||
article_style.value += article_spacing_children.value + content_radius.value;
|
||||
article_style.value += `width: calc(50% - ${new_style.article_spacing / 2}px);` + content_radius.value;
|
||||
} else if (article_theme.value == '2') {
|
||||
article_style.value += content_radius.value;
|
||||
} else if (article_theme.value == '3') {
|
||||
|
|
|
|||
|
|
@ -1,557 +0,0 @@
|
|||
.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-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;
|
||||
.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;
|
||||
background-color: #ff3030;
|
||||
.top {
|
||||
width: 100%;
|
||||
padding: 0.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
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-color: #ff531b;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -0.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
background-color: #ff531b;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.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 {
|
||||
margin-top: 0.6rem;
|
||||
text-align: center;
|
||||
.coupon-btn {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<el-scrollbar class="hide-scrollbar">
|
||||
<template v-if="theme == '1'">
|
||||
<div class="coupon-theme-1">
|
||||
<div v-for="item in data_list" :key="item" class="item">
|
||||
<div v-for="(item, index) in data_list" :key="index" class="item">
|
||||
<div class="coupon-theme-1-content tc" :style="'background-image: url(' + theme_bg_img.url_1 + ');background-size: 100% 100%;'">
|
||||
<div class="name text-line-1">{{ item.name }}</div>
|
||||
<div class="price">
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</template>
|
||||
<template v-else-if="theme == '2'">
|
||||
<div class="coupon-theme-2">
|
||||
<div v-for="item in data_list" :key="item" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
|
||||
<div v-for="(item, index) in data_list" :key="index" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
|
||||
<div class="tc">
|
||||
<div class="price">
|
||||
<span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</template>
|
||||
<template v-else-if="theme == '3'">
|
||||
<div class="coupon-theme-3">
|
||||
<div v-for="item in data_list" :key="item" class="item">
|
||||
<div v-for="(item, index) in data_list" :key="index" class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<div class="coupon-theme-4">
|
||||
<el-scrollbar class="hide-scrollbar">
|
||||
<div class="left">
|
||||
<div v-for="item in data_list" :key="item" class="item">
|
||||
<div v-for="(item, index) in data_list" :key="index" class="item">
|
||||
<div class="type">通用券</div>
|
||||
<div class="price">
|
||||
<span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</template>
|
||||
<template v-else-if="theme == '5'">
|
||||
<div class="coupon-theme-5">
|
||||
<div v-for="item in data_list" :key="item" class="item">
|
||||
<div v-for="(item, index) in data_list" :key="index" class="item">
|
||||
<div class="left" :style="'background-image: url(' + theme_bg_img.url_3 + ');background-size: 100% 100%;'">
|
||||
<div class="price">
|
||||
<span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
</template>
|
||||
<template v-else-if="theme == '6'">
|
||||
<div class="coupon-theme-6">
|
||||
<div v-for="item in data_list" :key="item" class="item">
|
||||
<div v-for="(item, index) in data_list" :key="index" class="item">
|
||||
<div class="top">
|
||||
<div class="price">
|
||||
<span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
</template>
|
||||
<template v-else-if="theme == '7'">
|
||||
<div class="coupon-theme-7">
|
||||
<div v-for="item in data_list" :key="item" class="item">
|
||||
<div v-for="(item, index) in data_list" :key="index" class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
|
||||
|
|
@ -172,6 +172,17 @@ const content_title = computed(() => {
|
|||
const content_desc = computed(() => {
|
||||
return form.value.desc;
|
||||
});
|
||||
|
||||
interface themeBgImg {
|
||||
url_1: string;
|
||||
url_2: string;
|
||||
url_3: string;
|
||||
}
|
||||
const theme_bg_img = ref<themeBgImg>({
|
||||
url_1: ``,
|
||||
url_2: ``,
|
||||
url_3: ``,
|
||||
});
|
||||
onMounted(() => {
|
||||
if (!isEmpty(form.value.data_list) && form.value.data_type == '0') {
|
||||
data_list.value = form.value.data_list;
|
||||
|
|
@ -180,6 +191,11 @@ onMounted(() => {
|
|||
} else {
|
||||
data_list.value = Array(4).fill(default_list);
|
||||
}
|
||||
theme_bg_img.value = {
|
||||
url_1: form.value.theme_1_static_img[0].url,
|
||||
url_2: form.value.theme_2_static_img[0].url,
|
||||
url_3: form.value.theme_5_static_img[0].url,
|
||||
};
|
||||
});
|
||||
const get_coupon = () => {
|
||||
const { number, type } = form.value;
|
||||
|
|
@ -248,26 +264,6 @@ const theme_7_background_style = computed(() => {
|
|||
return '#fff';
|
||||
}
|
||||
});
|
||||
const new_url = ref('');
|
||||
interface themeBgImg {
|
||||
url_1: string;
|
||||
url_2: string;
|
||||
url_3: string;
|
||||
}
|
||||
const theme_bg_img = ref<themeBgImg>({
|
||||
url_1: ``,
|
||||
url_2: ``,
|
||||
url_3: ``,
|
||||
});
|
||||
onBeforeMount(() => {
|
||||
online_url('/static/plugins/coupon/images/diy/').then((res) => {
|
||||
theme_bg_img.value = {
|
||||
url_1: `${res}theme-1-bg.png`,
|
||||
url_2: `${res}theme-2-content-bg.png`,
|
||||
url_3: `${res}theme-5-bg.png`,
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.coupon-theme-1 {
|
||||
|
|
@ -306,7 +302,6 @@ onBeforeMount(() => {
|
|||
.coupon-theme-1-content {
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0 0.5rem;
|
||||
background-image: v-bind('theme_bg_img.url_1');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -1rem;
|
||||
|
|
@ -668,8 +663,7 @@ onBeforeMount(() => {
|
|||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
writing-mode: vertical-lr;
|
||||
letter-spacing: 5px;
|
||||
letter-spacing: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -728,13 +722,13 @@ onBeforeMount(() => {
|
|||
color: v-bind('theme_style.price_color');
|
||||
margin-bottom: 0.1rem;
|
||||
.symbol {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.number {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
line-height: 3.2rem;
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -841,11 +835,13 @@ onBeforeMount(() => {
|
|||
padding: 0.4rem;
|
||||
width: 100%;
|
||||
color: v-bind('theme_style.btn_color');
|
||||
font-size: 1.1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
writing-mode: vertical-lr;
|
||||
letter-spacing: 3px;
|
||||
letter-spacing: 0.2rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import defaultCommon from './index';
|
||||
import { online_url } from '@/utils';
|
||||
const new_url = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
|
||||
interface DefaultCoupon {
|
||||
content: {
|
||||
theme: string;
|
||||
|
|
@ -10,6 +12,9 @@ interface DefaultCoupon {
|
|||
data_list: object[];
|
||||
data_ids: string;
|
||||
data_auto_list: object[];
|
||||
theme_1_static_img: uploadList[];
|
||||
theme_2_static_img: uploadList[];
|
||||
theme_5_static_img: uploadList[];
|
||||
};
|
||||
style: {
|
||||
price_color: string;
|
||||
|
|
@ -45,6 +50,10 @@ const defaultCoupoin: DefaultCoupon = {
|
|||
data_list: [],
|
||||
data_ids: '',
|
||||
data_auto_list: [],
|
||||
// 优惠券图片
|
||||
theme_1_static_img: [{ id: 1, url: new_url + 'theme-1-bg.png', original: '', title: '', ext: '.png', type: 'img' }],
|
||||
theme_2_static_img: [{ id: 2, url: new_url + 'theme-2-content-bg.png', original: '', title: '', ext: '.png', type: 'img' }],
|
||||
theme_5_static_img: [{ id: 3, url: new_url + 'theme-5-bg.png', original: '', title: '', ext: '.png', type: 'img' }],
|
||||
},
|
||||
style: {
|
||||
price_color: '#FF3830',
|
||||
|
|
|
|||
Loading…
Reference in New Issue