diff --git a/front-end/mall4m/components/coupon/coupon.wxss b/front-end/mall4m/components/coupon/coupon.wxss index 6bc47b3..e69de29 100644 --- a/front-end/mall4m/components/coupon/coupon.wxss +++ b/front-end/mall4m/components/coupon/coupon.wxss @@ -1,220 +0,0 @@ -/* 优惠券项目整体的样式类,用于设置优惠券的整体外观和布局等相关样式 */ -.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; -} \ No newline at end of file