|
@@ -0,0 +1,88 @@
|
|
|
+<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>
|
|
|
+ <div class="coupon-content">
|
|
|
+ <div class="arc-top"></div>
|
|
|
+ <div class="arc-bottom"></div>
|
|
|
+ </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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<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;
|
|
|
+ }
|
|
|
+ .arc-right{
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ background-color: #fff;
|
|
|
+ /*四分之一圆*/
|
|
|
+ border-radius: 100% 0 0 0;
|
|
|
+ /*定位*/
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|