yudao/front-end/mall4m/components/coupon/coupon.wxss

/* 优惠券项目整体的样式类，用于设置优惠券的整体外观和布局等相关样式 */
.coupon-item {
    /* 设置外边距，上下外边距为15px，左右外边距为0 */
    margin: 15px 0;
    /* 设置相对定位，方便其内部元素基于它进行定位 */
    position: relative;
    /* 添加阴影效果，水平和垂直方向偏移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;
    /* 设置文字颜色为白色 */
    color: #fff;
    /* 设置文本居中对齐 */
    text-align: center;
    /* 添加左边框，为1px的虚线，颜色为白色 */
    border-left: 1px dashed #fff;
    /* 设置上下内边距为20px，左右内边距为0 */
    padding: 20px 0;
    /* 设置背景渐变，从#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 {
    /* 设置字体加粗，权重为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 {
    /* 设置字体大小为72rpx */
    font-size: 72rpx;
    /* 设置行高为72rpx */
    line-height: 72rpx;
    /* 设置为行内块元素，方便在同一行内进行布局调整等 */
    display: inline-block;
    /* 设置字体为arial字体 */
    font-family: arial;
}

/* 优惠券项目左边部分中使用条件的样式类，用于设置优惠券使用条件相关的文本样式，比如字体、大小、溢出处理等 */
.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 {
    /* 设置左边距为280rpx，使其与左边部分隔开一定距离 */
    margin-left: 280rpx;
    /* 设置上下左右内边距为5px */
    padding: 5px;
    /* 设置相对定位，方便其内部元素基于它进行定位 */
    position: relative;
}

/* 优惠券项目右边部分中描述信息的样式类，用于设置描述信息相关的样式，比如高度、字体、溢出处理等 */
.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 {
    /* 设置字体大小为24rpx */
    font-size: 24rpx;
    /* 设置背景颜色为淡红色系，用于突出显示类型 */
    background: #fdf0f0;
    /* 设置文字颜色为红色系，与背景形成对比 */
    color: #eb2444;
    /* 设置圆角半径为8px，使元素看起来更圆润 */
    border-radius: 8px;
    /* 设置上下左右内边距分别为3px和10px */
    padding: 3px 10px;
}

/* 优惠券项目右边部分中日期信息的样式类，用于设置日期相关的样式，比如字体、外边距等 */
.coupon-item.right.c-date {
    /* 设置字体大小为24rpx */
    font-size: 24rpx;
    /* 设置上边距为25px，使其与上面的描述信息隔开一定距离 */
    margin-top: 25px;
}

/* 优惠券项目右边部分中日期信息里具体数据信息的样式类，用于设置日期具体数据相关的样式，比如字体 */
.coupon-item.right.c-date.c-data-info {
    /* 设置字体为arial字体 */
    font-family: arial;
}

/* 优惠券项目右边部分中日期信息里按钮的样式类，用于设置按钮的通用样式，比如位置、字体、圆角、背景等 */
.coupon-item.right.c-date.c-btn {
    /* 设置绝对定位，使其可以精确地定位在父元素内的某个位置 */
    position: absolute;
    /* 定位到底部，距离底部0距离 */
    bottom: 0;
    /* 定位到右边，距离右边10px距离 */
    right: 10px;
    /* 设置文字颜色为白色 */
    color: #fff;
    /* 设置字体大小为24rpx */
    font-size: 24rpx;
    /* 设置字体为arial字体 */
    font-family: arial;
    /* 设置圆角半径为14px，使按钮看起来更圆润 */
    border-radius: 14px;
    /* 设置上下左右内边距分别为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;
    /* 设置边框为1px的实线，颜色为红色系 */
    border: 1px solid #eb2444;
    /* 设置文字颜色为红色系 */
    color: #eb2444;
}

/* 优惠券项目处于灰色状态时左边部分的样式类，用于对灰色状态下左边部分的背景等样式进行覆盖 */
.coupon-item.gray.left {
    /* 设置背景颜色为灰色 */
    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.tag-img {
    /* 设置绝对定位，方便精确放置在父元素内的某个位置 */
    position: absolute;
    /* 定位到顶部，距离顶部0距离 */
    top: 0;
    /* 定位到右边，距离右边0距离 */
    right: 0;
    /* 设置宽度为120rpx */
    width: 120rpx;
    /* 设置高度为120rpx */
    height: 120rpx;
}

/* 优惠券项目中选择按钮的样式类，用于设置选择按钮的位置等样式 */
.coupon-item.sel-btn {
    /* 设置绝对定位，方便精确放置在父元素内的某个位置 */
    position: absolute;
    /* 定位到右边，距离右边10px距离 */
    right: 10px;
    /* 定位到顶部，距离顶部35px距离 */
    top: 35px;
}