<template>
<div class="quan clear">
<div class="quanleft">
<p class="ft">折扣券</p>
</div>
<div class="quanRight">
<p class="money">¥ 10</p>
<p class="tit">美味立享折扣券</p>
<p class="conts">无满额限制,立减折扣</p>
<p class="dates">有效期: 2018.8.12 - 2019.8.12</p>
</div>
</div>
</template>
<script>
export default {};
</script>
<style>
.quan {
position: relative;
width: 96%;
height: 130px;
margin: 5% auto;
padding: 6px;
padding-right: 0;
box-sizing: border-box;
background-color: #ff6347;
color: #fff;
/*左边的波浪*/
background-image: radial-gradient(#fff 35%, #ff6374 35%);
background-size: 17px 17px;
background-position: -9px 0;
background-repeat: repeat-y;
}
.clear::after {
content: "";
display: block;
clear: both;
}
.quanLeft {
float: right;
width: 30%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.quanRight {
position: absolute;
top: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
width: 70%;
padding: 12px;
text-align: center;
border-left: 1px dashed #ccc;
background-image: radial-gradient(#fff 35%, #ff6374 35%);
background-size: 17px 17px;
background-position: 109% 0;
background-position: calc(100% + 9px) 0;
background-repeat: repeat-y;
}
.money {
margin-bottom: 6px;
margin-right: 8px;
font-size: 26px;
font-weight: bold;
line-height: 1.6;
}
.tit {
font-size: 17px;
}
.conts {
font-size: 13px;
}
.dates {
font-size: 12px;
}
.ft {
display: inline-block;
margin: 40px;
}
</style>