Update coupon.wxss

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

@@ -0,0 +1,220 @@
+/* 优惠券项目整体的样式类，用于设置优惠券的整体外观和布局等相关样式 */
+.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;
+}