纯css写码一个漂亮的优惠券，支持小程序/uni-app/vue
2020-05-18 本文已影响0人
不忘初心_d
欢迎加我技术交流QQ群 ：811956471
前言：为什么分享出来？是因为本案例有很多亮点，作为经验的分享和自我总结，着急看亮点的，请直接看本章最后的总结
先看样式吧：
6666.jpg
接着看代码：
HTML:
//微信小程序
<view class="page">
<view class="wrapper" wx:for="{{list}}" key='item.id'>
<!-- 左侧box -->
<view class="content">
<view class="couponCount">{{item.size}}张</view>
<view class="oilline linwidth160 lineBt"></view>
<view>
<text class="moyfh">¥</text>
<text class="moneyNum">{{item.price}}</text>
</view>
<view class="oilline linwidth160 lineBt"></view>
</view>
<view class="split-line"></view>
<!-- 右侧box -->
<view class="tip">
<view class="oilline linwidth227 lineBt "></view>
<view class="vnameBx">
<view class="couponmaes">{{item.itemName}}</view>
<view class="couponmaes">满{{ item.activityPrice}}减{{item.price}}元</view>
</view>
<view class="oilline linwidth227 lineBt"></view>
<view class="btnbx {{item.isJoin==200?'':'moveCm' }}">
<view class="btnw {{item.isJoin==200?'btnBgGray':'btnBgActive' }}">
<view class="btnn" bindtap="submitCilck">{{btnTxt}}</view>
</view>
</view>
</view>
</view>
</view>
//非微信小程序 外层容器改成这样：
<view class="wrapper" v-for='item in list' key='item.id'></view>
CSS:
.page {
width: 100%;
height: 100%;
min-height: 100vh;
padding-top: 59rpx;
padding-bottom: 38rpx;
box-sizing: border-box;
position: relative;
background: #000;
}
.wrapper {
width: 670rpx;
height: 226rpx;
margin: 0 auto;
display: flex;
background: linear-gradient(135deg, rgba(219, 93, 115, 1) 0%, rgba(137, 29, 34, 1) 100%);
border-radius: 20rpx;
margin-bottom: 28rpx;
}
/*前半部分样式*/
.content {
position: relative;
height: 229rpx;
flex: 0 0 200rpx;
text-align: center;
overflow: hidden;
border-top-left-radius: 18rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*后半部分样式*/
.tip {
position: relative;
flex: 1;
height: 229rpx;
box-sizing: border-box;
padding-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
/*中间竖直虚线样式*/
.split-line {
position: relative;
flex: 0 0 0;
margin: 0 10rpx 0 6rpx;
border-left: 2rpx dashed #fff;
}
/*给虚线加两个伪类，基本样式如下*/
.split-line:before,
.split-line:after {
content: '';
position: absolute;
width: 32rpx;
height: 16rpx;
background: #000;
left: -18rpx;
z-index: 1;
}
/*几个伪类化成的圆弧的样式以及位置（置于顶部）我把它放在一起了*/
.content:before,
.tip:before,
.split-line:before {
border-radius: 0 0 16rpx 16rpx;
top: 0;
}
/*几个伪类化成的圆弧的样式以及位置（置于底部）我把它放在一起了*/
.content:after,
.tip:after,
.split-line:after {
border-radius: 16rpx 16rpx 0 0;
bottom: 0;
}
.couponCount {
width: 150rpx;
height: 150rpx;
font-size: 30rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(140, 31, 37, 1);
transform: rotate(-45deg);
position: absolute;
text-align: center;
line-height: 259rpx;
top: -78rpx;
left: -78rpx;
background: linear-gradient(319deg, rgba(244, 219, 160, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.oilline {
background: linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 10%,
rgba(255, 255, 255, 0.3) 20%,
rgba(255, 255, 255, 0.4) 30%,
rgba(255, 255, 255, 0.5) 40%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.4) 70%,
rgba(255, 255, 255, 0.3) 80%,
rgba(0, 0, 0, 0) 90%,
rgba(0, 0, 0, 0) 100%);
height: 2rpx;
}
.linwidth227 {
width: 227rpx;
}
.linwidth160 {
width: 160rpx;
}
.moyfh {
font-size: 69rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(255, 255, 255, 1);
margin-right: -2rpx;
}
.moneyNum {
font-size: 96rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(255, 255, 255, 1);
}
.couponmaes {
font-size: 30rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(255, 255, 255, 1);
width: 260rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.vnameBx {
text-align: center;
width: 227rpx;
margin: 25rpx 0;
}
.btnbx {
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.btnw {
display: flex;
justify-content: center;
align-items: center;
width: 148rpx;
height: 148rpx;
border-radius: 50%;
margin-right: 30rpx;
}
.btnBgActive {
color: rgba(140, 31, 37, 1);
box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56);
background: linear-gradient(319deg, rgba(244, 219, 160, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.btnBgGray {
box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56);
background:#999;
color: #fff;
}
.btnn {
font-size: 30rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border: 1rpx solid rgba(142, 33, 39, 1);
text-align: center;
box-sizing: border-box;
padding: 18rpx;
line-height: 46rpx;
}
.moveCm {
animation: scale 0.8s ease-in-out infinite alternate;
}
@keyframes scale {
0% {
transform: scale(0.92);
}
100% {
transform: scale(1);
}
}
数据：
data: {
list: [{
id : "2c91e88272084d710172112415350021",
itemId : "7",
itemName : "10元泡面优惠券",
denomination : 0,
originPrice : 0,
price : 10,
activityPrice : 100,
description : "",
size : 5,
isJoin:"201"
},{
id : "2c91e88272084d710172112415350024",
itemId : "8",
itemName : "30元鸡蛋优惠券",
denomination : 0,
originPrice : 0,
price : 10,
activityPrice : 200,
description : "",
size : 3,
isJoin:"200"
}],
isJoin:"200",
btnTxt:"领取成功"
},
总结：
1.本示例中的特色是，纯css写的优惠券齿轮，和中间的虚线；
2.样式类.oilline 用css实现了,中间粗且高亮两端细的渐变线条；
3.css实现容器右上角旋转45度的圆角角标，再也不用ui切图了；
4.补充：由左向右，左边粗，向右渐变变细的线条：
.oilline {
background: -webkit-linear-gradient(right, rgba(251, 251, 251, 0.09), rgba(251, 251, 251, 0.59), #FFF);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, rgba(251, 251, 251, 0.09), rgba(251, 251, 251, 0.59), #FFF);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, rgba(251, 251, 251, 0.09), rgba(251, 251, 251, 0.59), #FFF);
/* Firefox 3.6 - 15 */
background: linear-gradient(to left, rgba(251, 251, 251, 0.09)rgba(251, 251, 251, 0.59), , #FFF);
/* 标准的语法（必须放在最后） */
height: 2rpx;
width: 285rpx;
}
.lineBt {
margin-bottom: 20rpx;
}
