![](https://img-blog.csdnimg.cn/20201216193435881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM3MjQ1,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20201216193503913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM3MjQ1,size_16,color_FFFFFF,t_70)
有点小瑕疵,勉强能用,安卓机使用下面的样式有缝,只能加了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="" alt=""/>
</div>
<div class="qr-box1" v-else >
<!-- 二维码 -