sws
parent
af5e5a22dd
commit
7754580933
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -47,15 +47,70 @@
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="coupon-btn">
|
<div class="coupon-btn">
|
||||||
<text>立即领取</text>
|
<text>立即领取</text>
|
||||||
<icon name=""></icon>
|
<icon name="arrow-right-o" class="icon"></icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="theme == '4'"></template>
|
<template v-else-if="theme == '4'">
|
||||||
<template v-else-if="theme == '5'"></template>
|
<div class="coupon-theme-3">
|
||||||
<template v-else-if="theme == '6'"></template>
|
<div>
|
||||||
|
<div 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>
|
||||||
|
<div class=""></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'"></template>
|
<template v-else-if="theme == '7'"></template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -84,195 +139,5 @@ watch(
|
||||||
const theme = computed(() => props.value?.content?.theme);
|
const theme = computed(() => props.value?.content?.theme);
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.coupon-theme-1 {
|
@import './index.scss';
|
||||||
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 {
|
|
||||||
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 {
|
|
||||||
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: 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue