|
|
|
|
@ -1,118 +1,220 @@
|
|
|
|
|
.coupon-item{
|
|
|
|
|
/* 优惠券项目整体的样式类，用于设置优惠券的整体外观和布局等相关样式 */
|
|
|
|
|
.coupon-item {
|
|
|
|
|
/* 设置外边距，上下外边距为15px，左右外边距为0 */
|
|
|
|
|
margin: 15px 0;
|
|
|
|
|
/* 设置相对定位，方便其内部元素基于它进行定位 */
|
|
|
|
|
position: relative;
|
|
|
|
|
box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
|
|
|
|
|
/* 添加阴影效果，水平和垂直方向偏移1px，模糊半径3px，颜色透明度为0.15的黑色阴影 */
|
|
|
|
|
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
|
|
|
|
|
/* 设置高度为95px */
|
|
|
|
|
height: 95px;
|
|
|
|
|
/* 设置背景颜色为白色 */
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .left{
|
|
|
|
|
float: left;
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目中左边部分的样式类，用于设置优惠券左边区域的样式，比如颜色、布局等 */
|
|
|
|
|
.coupon-item.left {
|
|
|
|
|
/* 设置左浮动，使其在水平方向上向左排列 */
|
|
|
|
|
float: left;
|
|
|
|
|
/* 设置文字颜色为白色 */
|
|
|
|
|
color: #fff;
|
|
|
|
|
/* 设置文本居中对齐 */
|
|
|
|
|
text-align: center;
|
|
|
|
|
/* 添加左边框，为1px的虚线，颜色为白色 */
|
|
|
|
|
border-left: 1px dashed #fff;
|
|
|
|
|
/* 设置上下内边距为20px，左右内边距为0 */
|
|
|
|
|
padding: 20px 0;
|
|
|
|
|
background: -webkit-gradient(linear,left top,right top,from(#F45C43),to(#eb2444));
|
|
|
|
|
background: -o-linear-gradient(left,#F45C43,#eb2444);
|
|
|
|
|
background: linear-gradient(left,#F45C43,#eb2444);
|
|
|
|
|
background: -webkit-linear-gradient(left,#F45C43,#eb2444);
|
|
|
|
|
/* 设置背景渐变，从#F45C43到#eb2444的线性渐变（webkit内核浏览器兼容写法） */
|
|
|
|
|
background: -webkit-gradient(linear, left top, right top, from(#F45C43), to(#eb2444));
|
|
|
|
|
/* 设置背景渐变，从#F45C43到#eb2444的线性渐变（opera浏览器兼容写法） */
|
|
|
|
|
background: -o-linear-gradient(left, #F45C43, #eb2444);
|
|
|
|
|
/* 设置背景渐变，从#F45C43到#eb2444的线性渐变（标准写法） */
|
|
|
|
|
background: linear-gradient(left, #F45C43, #eb2444);
|
|
|
|
|
/* 设置背景渐变，从#F45C43到#eb2444的线性渐变（webkit内核浏览器另一种兼容写法） */
|
|
|
|
|
background: -webkit-linear-gradient(left, #F45C43, #eb2444);
|
|
|
|
|
/* 设置宽度为260rpx（rpx是微信小程序中的自适应单位，会根据屏幕宽度自动换算） */
|
|
|
|
|
width: 260rpx;
|
|
|
|
|
/* 设置高度为55px */
|
|
|
|
|
height: 55px;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .left .num{
|
|
|
|
|
font-weight:600;
|
|
|
|
|
font-size:36rpx;
|
|
|
|
|
height:70rpx;
|
|
|
|
|
line-height:70rpx;
|
|
|
|
|
font-family:arial;
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目左边部分中金额数字的样式类，用于设置金额数字相关的样式，比如字体、大小、行高等 */
|
|
|
|
|
.coupon-item.left.num {
|
|
|
|
|
/* 设置字体加粗，权重为600 */
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
/* 设置字体大小为36rpx */
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
/* 设置高度为70rpx */
|
|
|
|
|
height: 70rpx;
|
|
|
|
|
/* 设置行高为70rpx，使文字垂直居中 */
|
|
|
|
|
line-height: 70rpx;
|
|
|
|
|
/* 设置字体为arial字体 */
|
|
|
|
|
font-family: arial;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .left .num .coupon-price{
|
|
|
|
|
font-size: 72rpx;
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目左边部分中金额数字里优惠券价格的样式类，用于对优惠券价格的字体等样式进行单独设置 */
|
|
|
|
|
.coupon-item.left.num.coupon-price {
|
|
|
|
|
/* 设置字体大小为72rpx */
|
|
|
|
|
font-size: 72rpx;
|
|
|
|
|
/* 设置行高为72rpx */
|
|
|
|
|
line-height: 72rpx;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
/* 设置为行内块元素，方便在同一行内进行布局调整等 */
|
|
|
|
|
display: inline-block;
|
|
|
|
|
/* 设置字体为arial字体 */
|
|
|
|
|
font-family: arial;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .left .condition{
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目左边部分中使用条件的样式类，用于设置优惠券使用条件相关的文本样式，比如字体、大小、溢出处理等 */
|
|
|
|
|
.coupon-item.left.condition {
|
|
|
|
|
/* 设置字体大小为28rpx */
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
/* 设置行高为28rpx */
|
|
|
|
|
line-height: 28rpx;
|
|
|
|
|
/* 设置为块级元素 */
|
|
|
|
|
display: block;
|
|
|
|
|
/* 文本超出一行时不换行 */
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
/* 超出部分隐藏 */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
/* 超出部分用省略号显示 */
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
/* 设置左右内边距各2px */
|
|
|
|
|
padding: 0 2px;
|
|
|
|
|
/* 设置字体为arial字体 */
|
|
|
|
|
font-family: arial;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .right{
|
|
|
|
|
margin-left: 280rpx;
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目中右边部分的样式类，用于设置优惠券右边区域的样式，比如边距、布局等 */
|
|
|
|
|
.coupon-item.right {
|
|
|
|
|
/* 设置左边距为280rpx，使其与左边部分隔开一定距离 */
|
|
|
|
|
margin-left: 280rpx;
|
|
|
|
|
/* 设置上下左右内边距为5px */
|
|
|
|
|
padding: 5px;
|
|
|
|
|
/* 设置相对定位，方便其内部元素基于它进行定位 */
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .right .c-des{
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目右边部分中描述信息的样式类，用于设置描述信息相关的样式，比如高度、字体、溢出处理等 */
|
|
|
|
|
.coupon-item.right.c-des {
|
|
|
|
|
/* 设置高度为30px */
|
|
|
|
|
height: 30px;
|
|
|
|
|
/* 设置字体大小为26rpx */
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
/* 设置行高为30px */
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
/* 超出部分隐藏 */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
/* 设置字体加粗，权重为600 */
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .right .c-des .c-type{
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目右边部分中描述信息里类型的样式类，用于设置优惠券类型相关的样式，比如字体、背景色、圆角等 */
|
|
|
|
|
.coupon-item.right.c-des.c-type {
|
|
|
|
|
/* 设置字体大小为24rpx */
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
/* 设置背景颜色为淡红色系，用于突出显示类型 */
|
|
|
|
|
background: #fdf0f0;
|
|
|
|
|
/* 设置文字颜色为红色系，与背景形成对比 */
|
|
|
|
|
color: #eb2444;
|
|
|
|
|
/* 设置圆角半径为8px，使元素看起来更圆润 */
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
padding:3px 10px;
|
|
|
|
|
/* 设置上下左右内边距分别为3px和10px */
|
|
|
|
|
padding: 3px 10px;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .right .c-date{
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
margin-top:25px;
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目右边部分中日期信息的样式类，用于设置日期相关的样式，比如字体、外边距等 */
|
|
|
|
|
.coupon-item.right.c-date {
|
|
|
|
|
/* 设置字体大小为24rpx */
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
/* 设置上边距为25px，使其与上面的描述信息隔开一定距离 */
|
|
|
|
|
margin-top: 25px;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .right .c-date .c-data-info{
|
|
|
|
|
font-family: arial;
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目右边部分中日期信息里具体数据信息的样式类，用于设置日期具体数据相关的样式，比如字体 */
|
|
|
|
|
.coupon-item.right.c-date.c-data-info {
|
|
|
|
|
/* 设置字体为arial字体 */
|
|
|
|
|
font-family: arial;
|
|
|
|
|
}
|
|
|
|
|
.coupon-item .right .c-date .c-btn{
|
|
|
|
|
|
|
|
|
|
/* 优惠券项目右边部分中日期信息里按钮的样式类，用于设置按钮的通用样式，比如位置、字体、圆角、背景等 */
|
|
|
|
|
.coupon-item.right.c-date.c-btn {
|
|
|
|
|
/* 设置绝对定位，使其可以精确地定位在父元素内的某个位置 */
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom:0;
|
|
|
|
|
right:10px;
|
|
|
|
|
/* 定位到底部，距离底部0距离 */
|
|
|
|
|
bottom: 0;
|
|
|
|
|
/* 定位到右边，距离右边10px距离 */
|
|
|
|
|
right: 10px;
|
|
|
|
|
/* 设置文字颜色为白色 */
|
|
|
|
|
color: #fff;
|
|
|
|
|
/* 设置字体大小为24rpx */
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
/* 设置字体为arial字体 */
|
|
|
|
|
font-family: arial;
|
|
|
|
|
/* 设置圆角半径为14px，使按钮看起来更圆润 */
|
|
|
|
|
border-radius: 14px;
|
|
|
|
|
padding:3px 7px;
|
|
|
|
|
/* background: -webkit-gradient(linear,left top,right top,from(#6c96da),to(#6b83d7));
|
|
|
|
|
background: -o-linear-gradient(left,#6c96da,#6b83d7);
|
|
|
|
|
background: linear-gradient(left,#6c96da,#6b83d7);
|
|
|
|
|
background: -webkit-linear-gradient(left,#6c96da,#6b83d7); */
|
|
|
|
|
/* 设置上下左右内边距分别为3px和7px */
|
|
|
|
|
padding: 3px 7px;
|
|
|
|
|
/* 设置背景渐变，从#6c96da到#6b83d7的线性渐变（webkit内核浏览器兼容写法），这里被注释掉了，可能有其他背景设置需求 */
|
|
|
|
|
/* background: -webkit-gradient(linear, left top, right top, from(#6c96da), to(#6b83d7));
|
|
|
|
|
background: -o-linear-gradient(left, #6c96da, #6b83d7);
|
|
|
|
|
background: linear-gradient(left, #6c96da, #6b83d7);
|
|
|
|
|
background: -webkit-linear-gradient(left, #6c96da, #6b83d7); */
|
|
|
|
|
/* 设置背景颜色为红色系 */
|
|
|
|
|
background: #eb2444;
|
|
|
|
|
/* 设置边框为1px的实线，颜色为红色系 */
|
|
|
|
|
border: 1px solid #eb2444;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.coupon-item .right .c-date .c-btn.get-btn{
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 1px solid #eb2444;
|
|
|
|
|
color:#eb2444;
|
|
|
|
|
/* 优惠券项目右边部分中日期信息里获取按钮的样式类，用于对获取按钮这种特定按钮进行样式覆盖，比如背景、文字颜色等 */
|
|
|
|
|
.coupon-item.right.c-date.c-btn.get-btn {
|
|
|
|
|
/* 设置背景颜色为白色 */
|
|
|
|
|
background: #fff;
|
|
|
|
|
/* 设置边框为1px的实线，颜色为红色系 */
|
|
|
|
|
border: 1px solid #eb2444;
|
|
|
|
|
/* 设置文字颜色为红色系 */
|
|
|
|
|
color: #eb2444;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.coupon-item.gray .left{
|
|
|
|
|
background: #bbb;
|
|
|
|
|
/* 优惠券项目处于灰色状态时左边部分的样式类，用于对灰色状态下左边部分的背景等样式进行覆盖 */
|
|
|
|
|
.coupon-item.gray.left {
|
|
|
|
|
/* 设置背景颜色为灰色 */
|
|
|
|
|
background: #bbb;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.coupon-item.gray .right .c-des .c-type{
|
|
|
|
|
background: #bbb;
|
|
|
|
|
/* 优惠券项目处于灰色状态时右边部分中描述信息里类型的样式类，用于对灰色状态下类型的背景、文字颜色等样式进行覆盖 */
|
|
|
|
|
.coupon-item.gray.right.c-des.c-type {
|
|
|
|
|
/* 设置背景颜色为灰色 */
|
|
|
|
|
background: #bbb;
|
|
|
|
|
/* 设置文字颜色为白色 */
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.coupon-item.gray .right .c-date .c-btn{
|
|
|
|
|
display: none;
|
|
|
|
|
/* 优惠券项目处于灰色状态时右边部分中日期信息里按钮的样式类，用于隐藏灰色状态下的按钮 */
|
|
|
|
|
.coupon-item.gray.right.c-date.c-btn {
|
|
|
|
|
/* 设置为不显示 */
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.coupon-item .tag-img{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top:0;
|
|
|
|
|
right:0;
|
|
|
|
|
width:120rpx;
|
|
|
|
|
height:120rpx;
|
|
|
|
|
/* 优惠券项目中标签图片的样式类，用于设置标签图片的位置、大小等样式 */
|
|
|
|
|
.coupon-item.tag-img {
|
|
|
|
|
/* 设置绝对定位，方便精确放置在父元素内的某个位置 */
|
|
|
|
|
position: absolute;
|
|
|
|
|
/* 定位到顶部，距离顶部0距离 */
|
|
|
|
|
top: 0;
|
|
|
|
|
/* 定位到右边，距离右边0距离 */
|
|
|
|
|
right: 0;
|
|
|
|
|
/* 设置宽度为120rpx */
|
|
|
|
|
width: 120rpx;
|
|
|
|
|
/* 设置高度为120rpx */
|
|
|
|
|
height: 120rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.coupon-item .sel-btn{
|
|
|
|
|
position:absolute;
|
|
|
|
|
right:10px;
|
|
|
|
|
top:35px;
|
|
|
|
|
/* 优惠券项目中选择按钮的样式类，用于设置选择按钮的位置等样式 */
|
|
|
|
|
.coupon-item.sel-btn {
|
|
|
|
|
/* 设置绝对定位，方便精确放置在父元素内的某个位置 */
|
|
|
|
|
position: absolute;
|
|
|
|
|
/* 定位到右边，距离右边10px距离 */
|
|
|
|
|
right: 10px;
|
|
|
|
|
/* 定位到顶部，距离顶部35px距离 */
|
|
|
|
|
top: 35px;
|
|
|
|
|
}
|
