css制作类似优惠券的卡片样式(vue)

有点小瑕疵,勉强能用,安卓机使用下面的样式有缝,只能加了0.01、0.02的高度去缝,不完美半圆不圆,苹果机测试没问题。

代码:

<!-- 卡片详情 --> <template> <div class="pages"> <div class="bg-img" :style="'background: url('+require('@/assets/images/biaozhi_kapian.png')+') no-repeat;background-size: 100% 100%;'"></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="" /> </div> <div class="qr-box1" v-else > <!-- 二维码 --> <img id="barcode"/> </div> <div class="content-info" :style="isActive == 1?'top: 5.1rem;':'top: 3.6rem;'"> <div class="detail-price"> <div class="price1"> <div class="txt1"> <span>剩余可用(元)</span> <div class="txt-img" :style="'background: url('+require('@/assets/images/yj.png')+') no-repeat;background-size: 100% 100%;'"></div> </div> <div class="txt2"> <span>修改密码</span> <div class="txt-img" :style="'background: url('+require('@/assets/images/xiugai.png')+') no-repeat;background-size: 100% 100%;'"></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; } .pages{ 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 .child-box.coupon1{ /* 优惠券样式 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 .child-box.coupon2{ /* 优惠券样式 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; } .detail-price .assets-price{ display: flex; justify-content: space-between; align-items: center; font-size: 0.26rem; color: #999999; } .content-info ul{ width: 6.7rem; list-style: none; } .content-info ul li{ display: flex; justify-content: space-between; align-items: center; border-bottom: 0.01rem solid #DFDFDF; } .content-info ul li p:first-child{ font-size: 0.26rem; color: #333333; padding: 0.25rem 0; } .content-info ul li p:last-child{ font-size: 0.26rem; color: #666666; } </style> 

注意一下,我这里的单位是1rem = 100px,单位换算不一样的可能就不能出现上面的效果了,下面是配置app.vue:

<template> <div id="app"> <router-view></router-view> </div> </template> <script> // 1rem = 100px 单位转换 function resizeFontsize(){ var width = document.documentElement.clientWidth; document.documentElement.style.fontSize = width/7.5+'px'; } resizeFontsize(); //改变横屏竖屏执行效果更换 window.addEventListener('orientationchange',resizeFontsize); //改变手机大小执行效果更换 window.addEventListener('resize',resizeFontsize); export default { name: 'app' } </script> <style> /*这里必须设回16px*/ body{ margin: 0; font-size: 16px; /* 兼容底部横条 */ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); background-color: #FFFFFF; } </style> 

原文链接:https://blog.csdn.net/qq_38337245/article/details/111301052?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316781435492536%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316781435492536&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-20-111301052-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片