优惠券样式案例
<template><view class="box"><view class="boxItem"><img src="../../../static/come.png" alt="" class="img"/><span class="icon">¥</span><span class="price">40</span><view class="titleName"><span class="name">油管通加油券</span><view class="middle"><view class="middleItem" style=" ;">满199使用</view><view class="middleItem">不可叠加</view></view><span class="bottom">有效时间:2023-01-11 12:38.00</span></view></view></view>
</template>
<style lang="scss">.boxItem {width: 680rpx;height: 190rpx;background: #fff;border-radius: 16rpx;margin: 44rpx 34rpx;position: relative;.img {height: 190rpx;}.icon {position: absolute;left: 6%;top: 43%;color: #fff;font-size: 32rpx}.price {position: absolute;left: 12%;top: 40%;color: #fff;font-size: 66rpx;font-weight: 500;font-family: PingFang SC, PingFang SC;}.titleName {position: absolute;left: 32%;top: 8%;display: flex;flex-direction: column;.name {font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #000000;}.middle {display: flex;margin: 15rpx 0 20rpx 0;.middleItem {width: 140rpx;height: 40rpx;border-radius: 4rpx 4rpx 4rpx 4rpx;border: 2rpx solid rgba(250, 77, 67, 0.46);font-family: Noto Sans SC, Noto Sans SC;font-weight: 400;font-size: 24rpx;color: #FA4D43;text-align: center;margin-right: 10rpx;}}.bottom {font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #999999;}}}
</style>