css制作类似优惠券的卡⽚样式（vue）
有点⼩瑕疵，勉强能⽤，安卓机使⽤下⾯的样式有缝，只能加了0.01、0.02的⾼度去缝，不完美半圆不圆，苹果机测试没问题。
代码：
<!-- 卡⽚详情 -->
<template>
<div class="pages">
<div class="bg-img" :></div>
<div class="detail-box">
<div class="title">2020年春节限量卡</div>
<div class="child-box" :class="isActive?'coupon2':'coupon1'">
<div class="tab-box">
<div class="tab1" :class="isActive == 0?'active2':'active1'">
<p @click="tabClick(0)" :class="isActive == 0?'active1 act1':'active2 act4'">条形码</p>
</div>
<div class="tab2" :class="isActive == 1?'active2':'active1'">
<p @click="tabClick(1)" :class="isActive == 1?'active1 act2':'active2 act3'">⼆维码</p>
</div>
</div>
<div class="qr-box2" v-if="isActive">
<!-- 条形码 -->
<img src="" alt=""/>
</div>
<div class="qr-box1" v-else >
<!-- ⼆维码 -->
<img id="barcode"/>
</div>
<div class="content-info" :>
<div class="detail-price">
<div class="price1">
<div class="txt1">
<span>剩余可⽤(元)</span>
<div class="txt-img" :></div>
</div>
<div class="txt2">
<span>修改密码</span>
<div class="txt-img" :></div> </div>
</div>
<div class="surplus-price">666666</div>
<div class="assets-price">
<p>已⽤额度：1,534.00</p>
<p>总额度：8,200.00</p>
</div>
</div>
<ul>
<li>
<p>卡号</p>
<p>6206607390886803</p>
</li>
<li>
<p>规则</p>
<p>6206607390886803</p>
</li>
<li>
<p>有效期</p>
<p>6206607390886803</p>
</li>
<li>
<p></p>
<p>6206607390886803</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
name:'cardDetail',
data(){
return{
isActive:0
}
},
methods:{
tabClick(index){
this.isActive = index;
}
}
}
</script>
<style scoped="scoped">
*{
margin: 0;
padding: 0;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
display: none;
}css去掉滚动条
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(90deg, #FAD692 0%, #FADFA4 52%, #F9E0A5 100%);
/*增加弹性滚动，解决滚动不流畅的问题*/
-webkit-overflow-scrolling:touch;
}
.pages .bg-img{
position: fixed;
top: 0rem;
right: 0.7rem;
z-index: 2;
width: 3.15rem;
height: 2rem;
}
.pages .detail-box{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
background-color: transparent;
overflow-y: scroll;
padding-bottom: 0.8rem;
}
.detail-box .title{
text-align: center;
font-size: 0.36rem;
color: #333333;
padding: 0.4rem 0;
}
/* 设置优惠券的样式 */
.detail-box .child-box{
width: 7.1rem;
height: 11.5rem;
margin-left: 0.2rem;
background-color: #FFFFFF;
border-radius: 0.2rem;
position: relative;
}
.detail-box .upon1{
/* 优惠券样式 0.2rem为圆的半径、 5rem为⾼度的⼀半 (前两条表⽰上半圆，后两条表⽰下半圆) 上加下等于11.5rem*/ /* 苹果测试没问题，安卓机测试会多出⼀条缝，多加0.01上加下等于11.51rem 去掉缝（⽆奈）*/
background:
radial-gradient(circle at left bottom, transparent 0.2rem, #FFFFFF 0) top left /5rem 3.31rem no-repeat,
radial-gradient(circle at right bottom, transparent 0.2rem, #FFFFFF 0) top right /5rem 3.31rem no-repeat,
radial-gradient(circle at left top, transparent 0.2rem, #FFFFFF 0) bottom left /5rem 8.21rem no-repeat,
radial-gradient(circle at right top, transparent 0.2rem, #FFFFFF 0) bottom right /5rem 8.21rem no-repeat;
/* 阴影 */
filter: drop-shadow(0.04rem 0.04rem 0.04rem rgba(0,0,0,0.3));
}
.detail-box .upon2{
/* 优惠券样式 0.2rem为圆的半径、 5rem为⾼度的⼀半 (前两条表⽰上半圆，后两条表⽰下半圆) 上加下等于11.5rem*/ /* 苹果测试没问题，安卓机测试会多出⼀条缝，多加0.02上加下等于11.51rem 去掉缝（⽆奈）*/
background:
radial-gradient(circle at left bottom, transparent 0.2rem, #FFFFFF 0) top left /5rem 4.82rem no-repeat,
radial-gradient(circle at right bottom, transparent 0.2rem, #FFFFFF 0) top right /5rem 4.82rem no-repeat,
radial-gradient(circle at left top, transparent 0.2rem, #FFFFFF 0) bottom left /5rem 6.72rem no-repeat,
radial-gradient(circle at right top, transparent 0.2rem, #FFFFFF 0) bottom right /5rem 6.72rem no-repeat;
filter: drop-shadow(0.04rem 0.04rem 0.04rem rgba(0,0,0,0.3));
}
/* 虚线 */
.child-box::after{
content: '';
position: absolute;
width:6.4rem;
height: 0.05rem;
left: 0.3rem;
background: radial-gradient(#F9E0A5, #F9E0A5 0.05rem, transparent 0.05rem, transparent) !important; background-size: 0.15rem 0.05rem !important;
}
/* 设置优惠券的样式 */
/* 设置导航的样式 */
.detail-box .tab-box{
display: flex;
width: 7.1rem;
height: 0.85rem;
border-top-left-radius: 0.2rem;
border-top-right-radius: 0.2rem;
overflow: hidden;
}
.detail-box .tab-box .tab1{
width: 3.55rem;
height: 0.85rem;
}
.detail-box .tab-box p{
width: 3.55rem;
height: 0.85rem;
text-align: center;
line-height: 0.85rem;
font-size: 0.28rem;
color: #666666;
}
.act1{
border-top-right-radius: 0.2rem;
}
.act2{
border-top-left-radius: 0.2rem;
}
.
act3{
border-bottom-left-radius: 0.2rem;
}
.act4{
border-bottom-right-radius: 0.2rem;
}
.active1{
background-color: #FFFFFF;
}
.active2{
background-color: #F3F3F3;
}
/* 设置导航的样式 */
.child-box .qr-box1{
display:flex;
justify-content: center;
align-items: center;
width: 6.1rem;
height: 2.4rem;
margin-left: 0.5rem;
}
.child-box .qr-box1 img{
display: inline-block;
width: 5.35rem;
height: 1.8rem;
background-color: green;
}
.child-box .qr-box2{
display:flex;
justify-content: center;
align-items: center;
width: 6.1rem;
height: 3.9rem;
margin-left: 0.5rem;
}
.child-box .qr-box2 img{
display: inline-block;
width:3.3rem;
height: 3.3rem;
background-color: green;
}
.content-info{
position: absolute;
left: 0.2rem;
width: 6.7rem;
}
.content-info .detail-price{
width: 6.3rem;
height: 1.9rem;
background-color: #FFFAEF; border-radius: 0.05rem;
padding: 0.2rem;
}
.detail-price .price1{
display: flex;
justify-content: space-between; align-items: center;
}
.price1 .txt1{
display: flex;
align-items: center;
font-size: 0.26rem;
color: #333333;
}
.price1 .txt2{
display: flex;
align-items: center;
font-size: 0.26rem;
color: #FDB557;
}
.price1 .txt1 .txt-img{
width: 0.3rem;
height: 0.18rem;
margin-left: 0.2rem;
}
.price1 .txt2 .txt-img{
width: 0.23rem;
height: 0.23rem;
margin-left: 0.2rem;
}
.detail-price .surplus-price{
font-size: 0.5rem;
color: #333333;
font-weight: bold;
margin-top: 0.2rem;
margin-bottom: 0.3rem;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论