优惠券样式案例

愿➣

已于 2024-05-06 16:31:20 修改

阅读量197

点赞数 2

文章标签： javascript vue.js 前端

于 2024-05-06 16:14:16 首次发布

本文链接：https://blog.csdn.net/weixin_59527403/article/details/138498574

版权

优惠券样式案例
在这里插入图片描述

<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>