@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 字体大小变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ page { height: auto !important; background-color: #ff457b; } .activity-banner { width: 100%; height: 600rpx; float: left; margin-bottom: 64rpx; } .activity-banner .activity-banner-image { width: 100%; height: 100%; display: block; } .container-section { width: 100%; height: auto; box-sizing: border-box; padding: 0 24rpx; } .container-section .product-list { width: 339rpx; height: 532rpx; float: left; margin-right: 24rpx; margin-bottom: 24rpx; background-color: #ffffff; border-radius: 16rpx; } .container-section .product-list:nth-child(2n) { margin-right: 0; } .container-section .product-list .product-list-image { width: 100%; height: 339rpx; float: left; position: relative; } .container-section .product-list .product-list-image .product-image { width: 100%; height: 100%; display: block; border-radius: 16rpx 16rpx 0 0; } .container-section .product-list .product-list-image .product-icon { width: 68rpx; height: 55rpx; display: block; position: absolute; top: 0; left: 34rpx; } .container-section .product-list .product-list-msg { width: 100%; height: 193rpx; box-sizing: border-box; padding: 16rpx 24rpx; float: left; position: relative; } .container-section .product-list .product-list-msg .product-msg-name { width: 100%; height: 72rpx; line-height: 35rpx; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; font-size: 26rpx; color: #333333; text-align: justify; float: left; } .container-section .product-list .product-list-msg .product-list-tag { position: relative; z-index: 9; width: 100%; height: 30rpx; margin-top: 8rpx; float: left; } .container-section .product-list .product-list-msg .product-list-tag .tag { display: inline-block; height: 32rpx; font-size: 22rpx; line-height: 30rpx; text-align: center; color: #f83c6c; float: left; margin-right: 10rpx; } .container-section .product-list .product-list-msg .product-list-tag .tag.tag-02 { width: 80rpx; background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center no-repeat; background-size: contain; } .container-section .product-list .product-list-msg .product-list-tag .tag.tag-01 { width: 56rpx; color: #fff; background-color: #f83c6c; border-radius: 4rpx; } .container-section .product-list .product-list-msg .product-list-pri { width: 100%; height: 44rpx; float: left; position: absolute; bottom: 16rpx; left: 0; box-sizing: border-box; padding: 0 24rpx; } .container-section .product-list .product-list-msg .product-list-pri .price { float: left; font-size: 26rpx; color: #f83c6c; font-weight: bold; line-height: 44rpx; } .container-section .product-list .product-list-msg .product-list-pri .carts { float: right; } .container-section .product-list .product-list-msg .product-list-pri .carts .carts-add { width: 44rpx; height: 44rpx; text-align: center; line-height: 44rpx; background-color: #ff457b; border-radius: 50%; } .container-section .product-list .product-list-msg .product-list-pri .carts .carts-add .iconfont { font-size: 32rpx; color: #ffffff; }