798 lines
27 KiB
Vue
798 lines
27 KiB
Vue
<template>
|
|
<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" :style="'background-image: url(' + theme_bg_img.url_1 + ');background-size: 100% 100%;'">
|
|
<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>
|
|
</template>
|
|
<template v-else-if="theme == '2'">
|
|
<div class="coupon-theme-2">
|
|
<div v-for="item in list" :key="item" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
|
|
<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 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>
|
|
</div>
|
|
</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" :style="'background-image: url(' + theme_bg_img.url_3 + ');background-size: 100% 100%;'">
|
|
<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, gradient_computer, online_url } from '@/utils';
|
|
const props = defineProps({
|
|
value: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
const list = 10;
|
|
const form = computed(() => props.value?.content || {});
|
|
const new_style = computed(() => props.value?.style || {});
|
|
const style_container = ref('');
|
|
watch(
|
|
props.value,
|
|
(newVal, oldValue) => {
|
|
const new_content = newVal?.content || {};
|
|
const new_style = newVal?.style || {};
|
|
style_container.value = common_styles_computer(new_style.common_style);
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
// watchEffect(() => {
|
|
// if (form.value.data_type == '0') {
|
|
// if (!isEmpty(form.value.data_list)) {
|
|
// list.value = cloneDeep(form.value.data_list).map((item: any) => ({
|
|
// ...item.data,
|
|
// title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
|
|
// new_cover: item.new_cover,
|
|
// }));
|
|
// } else {
|
|
// list.value = Array(4).fill(default_list);
|
|
// }
|
|
// } else {
|
|
// get_products();
|
|
// }
|
|
// });
|
|
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);
|
|
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';
|
|
}
|
|
});
|
|
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 {
|
|
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: v-bind('theme_bg_img.url_1');
|
|
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-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%;
|
|
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>
|