sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.测试优化修改 

sws 2024-08-29
v1.0.0
sws 2024-08-29 18:55:53 +08:00
parent af5e5a22dd
commit 7754580933
2 changed files with 396 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

336
src/components/model-coupon/index.scss Normal file
View File

@ -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;
}
}
}
}

255
src/components/model-coupon/index.vue
View File

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