|
@@ -1,33 +1,19 @@
|
|
|
<template>
|
|
|
- <!-- <a-card class="card-content">
|
|
|
- <div class="AvailableCoupon-content">
|
|
|
- <div class="coupon-type">
|
|
|
- <div class="arc-left"></div>
|
|
|
- <div class="arc-right"></div>
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="card-item" v-for="item in 10">
|
|
|
+ <div class="card-item-head">
|
|
|
+ <div>满200减50</div>
|
|
|
+ <div>满减卷</div>
|
|
|
</div>
|
|
|
- <div class="coupon-content">
|
|
|
- <div class="arc-top"></div>
|
|
|
- <div class="arc-bottom"></div>
|
|
|
+ <div class="card-item-middle">
|
|
|
+ <div>满200减50卷</div>
|
|
|
+ <div>有效期:2020-05-28 至 2020-12-05</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-item-button">
|
|
|
+ <a-button size="large" ghost type="danger">生成领取吗</a-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </a-card> -->
|
|
|
- <a-card hoverable style="width: 240px">
|
|
|
- <!-- <img
|
|
|
- slot="cover"
|
|
|
- alt="example"
|
|
|
- src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
|
|
|
- /> -->
|
|
|
- <a-card-meta title="Europe Street beat">
|
|
|
- <template slot="description">
|
|
|
- www.instagram.com
|
|
|
- </template>
|
|
|
- </a-card-meta>
|
|
|
- <a-card-meta title="Europe Street beat">
|
|
|
- <template slot="description">
|
|
|
- www.instagram.com
|
|
|
- </template>
|
|
|
- </a-card-meta>
|
|
|
- </a-card>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -35,54 +21,40 @@
|
|
|
|
|
|
<style lang="less">
|
|
|
.card-content{
|
|
|
- height:100vh;
|
|
|
- padding: 20px;
|
|
|
- background-color: #fff;
|
|
|
- .coupon-type{
|
|
|
- width:200px;
|
|
|
- height:100px;
|
|
|
- background-color: red;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- border-radius:10px 10px 0 0;
|
|
|
- .arc-left{
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- background-color: #fff;
|
|
|
- /*四分之一圆*/
|
|
|
- border-radius: 0 100% 0 0;
|
|
|
- /*定位*/
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .card-item{
|
|
|
+ width: 21%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 1px 2px 5px #999;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 2%;
|
|
|
+ > div{
|
|
|
+ padding: 15px;
|
|
|
+ text-align: center;
|
|
|
+ &:first-child{
|
|
|
+ padding-bottom: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
- .arc-right{
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- background-color: #fff;
|
|
|
- /*四分之一圆*/
|
|
|
- border-radius: 100% 0 0 0;
|
|
|
- /*定位*/
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
+ .card-item-head{
|
|
|
+ background: #F5222D;
|
|
|
+ color: #fff;
|
|
|
+ > div{
|
|
|
+ &:first-child{
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-item-middle{
|
|
|
+ padding-bottom: 0;
|
|
|
+ > div{
|
|
|
+ &:first-child{
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .coupon-content{
|
|
|
- width:200px;
|
|
|
- height:100px;
|
|
|
- background-color: #fff;
|
|
|
- border:1px soild #FF0000;
|
|
|
- border-radius:0 0 10px 10px;
|
|
|
- position: absolute;
|
|
|
- top: 100px;
|
|
|
- bottom: 0;
|
|
|
- left: 200px;
|
|
|
- right: 0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|