From 4b09e89180b0812f40ce642a275b472a62dce8a2 Mon Sep 17 00:00:00 2001 From: taiyuan Date: Tue, 2 Nov 2021 17:43:57 +0800 Subject: [PATCH] 首页幸运购,当前默认隐藏不显示 --- app.wxss | 13 ++++++++++--- pages/index/index/index.wxml | 47 ++++++++++++++++++++++++++++++++++++++++++++++- pages/index/index/index.wxss | 82 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 137 insertions(+), 5 deletions(-) diff --git a/app.wxss b/app.wxss index 67bf9e9..2134717 100644 --- a/app.wxss +++ b/app.wxss @@ -4,6 +4,9 @@ .pdt4 { padding-top: 4rpx; } +.pdt6 { + padding-top: 6rpx; +} .pd10 { padding: 10rpx; } @@ -712,9 +715,9 @@ background: #ffe3e2; /* 图标字体(ty) */ @font-face { font-family: 'iconfont'; /* Project id 2054717 */ - src: url('//at.alicdn.com/t/font_2054717_5ibgy0a15gm.woff2?t=1635479077648') format('woff2'), - url('//at.alicdn.com/t/font_2054717_5ibgy0a15gm.woff?t=1635479077648') format('woff'), - url('//at.alicdn.com/t/font_2054717_5ibgy0a15gm.ttf?t=1635479077648') format('truetype'); + src: url('//at.alicdn.com/t/font_2054717_kwrwze5y6c.woff2?t=1635844276600') format('woff2'), + url('//at.alicdn.com/t/font_2054717_kwrwze5y6c.woff?t=1635844276600') format('woff'), + url('//at.alicdn.com/t/font_2054717_kwrwze5y6c.ttf?t=1635844276600') format('truetype'); } .iconfont { @@ -725,6 +728,10 @@ background: #ffe3e2; -moz-osx-font-smoothing: grayscale; } +.icon-luck:before { + content: "\e621"; +} + .icon-shizhong:before { content: "\e74f"; } diff --git a/pages/index/index/index.wxml b/pages/index/index/index.wxml index e8b0e0f..b78889d 100644 --- a/pages/index/index/index.wxml +++ b/pages/index/index/index.wxml @@ -215,7 +215,52 @@ - + + + + + + + + + + + 幸运购 + + + 查看全部 + + + + + + + + + + + 我是商品 + + + 189.00 + 零售价:155 + + + + 去参团 + + + + + + *5人成团,5人得商品,5人全额退款并得惊喜礼品 + + + + + + + diff --git a/pages/index/index/index.wxss b/pages/index/index/index.wxss index d956d5e..fb89c60 100644 --- a/pages/index/index/index.wxss +++ b/pages/index/index/index.wxss @@ -2,7 +2,8 @@ background: #ff7295; } -.icon-presell { +.icon-presell, +.icon-luck { color: #ED6064; font-size: 18px; margin-right: 4rpx; @@ -1115,3 +1116,82 @@ page { margin-right: 10rpx; } + + +/* .luck { + padding-left: 20rpx; + padding-right: 20rpx; +} */ + +.luck .list-item { + background-color: white; + padding: 20rpx; + border-radius: 12rpx; +} + +.luck .img-container { + width: 200rpx; + height: 200rpx; + border-radius: 14rpx; + overflow: hidden; + flex-shrink: 0; + position: relative; +} + +.luck .img-container::before { + content: '幸运购'; + position: absolute; + left: 0; + top: 0; + padding: 4rpx; + background-color: rgba(255,103,103,.7); + color: white; + font-size: 22rpx; + border-radius: 0 0 14rpx 0; +} + +.luck .name::before { + content: '5人团'; + background-color: #FF6768; + color: white; + font-size: 26rpx; + padding-left: 10rpx; + padding-right: 10rpx; + border-radius: 20rpx; + margin-right: 10rpx; +} + +.rmb::before { + content: '¥'; + font-size: 24rpx; +} + +.del { + text-decoration: line-through; +} + +.luck .btn { + background-color: #FF6768; + border-radius: 20rpx; + padding-left:20rpx; + padding-right: 20rpx; + color: white; +} + +.luck .name { + height: 88rpx; +} + + +.luck .progress { + position: relative; +} +.luck .progress::before { + position: absolute; + width: 100%; + content: attr(data-content); + font-size: 20rpx; + color: white; + text-align: center; +} + -- libgit2 0.21.4