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-30 09:58:20 +08:00
parent 5a9f604144
commit db8f47b738
2 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/model-coupon/index.scss
View File

@ -277,6 +277,7 @@
width: 14rem; width: 14rem;
height: 10rem; height: 10rem;
position: relative; position: relative;
background-color: #ff3030;
.top { .top {
width: 100%; width: 100%;
padding: 0.4rem; padding: 0.4rem;
@ -285,6 +286,32 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1; 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 { .price {
text-align: center; text-align: center;
position: relative; position: relative;
@ -309,27 +336,15 @@
} }
} }
.bottom { .bottom {
width: 4.6rem; margin-top: 0.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; text-align: center;
display: flex;
align-items: center;
justify-content: center;
.coupon-btn { .coupon-btn {
color: #fff; color: #fff;
position: relative; position: relative;
font-size: 1.2rem; font-size: 1.6rem;
line-height: 2.2rem;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
writing-mode: vertical-lr;
letter-spacing: 5px;
} }
} }
} }

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

@ -106,7 +106,7 @@
<div class="name">满200元使用</div> <div class="name">满200元使用</div>
</div> </div>
<div class="bottom"> <div class="bottom">
<div class="coupon-btn">领取</div> <div class="coupon-btn">立即领取</div>
</div> </div>
</div> </div>
</div> </div>