diff --git a/商家端APP/1 工作台/1.1 会员管理/1.1.3 积分商城/积分商城.html b/商家端APP/1 工作台/1.1 会员管理/1.1.3 积分商城/积分商城.html index 359d994..c9684f8 100644 --- a/商家端APP/1 工作台/1.1 会员管理/1.1.3 积分商城/积分商城.html +++ b/商家端APP/1 工作台/1.1 会员管理/1.1.3 积分商城/积分商城.html @@ -23,6 +23,54 @@ padding: 0 16px; } + .tabs { + background: #fff; + margin: 12px 0; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + overflow: hidden; + } + + .tab-buttons { + display: flex; + background: #f8f9fa; + } + + .tab-button { + flex: 1; + padding: 16px; + background: none; + border: none; + font-size: 16px; + color: #666; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + } + + .tab-button.active { + color: #007AFF; + background: #fff; + } + + .tab-button.active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + background: #007AFF; + } + + .tab-content { + display: none; + } + + .tab-content.active { + display: block; + } + .header { background: #fff; padding: 16px 0; @@ -149,6 +197,51 @@ transform: scale(0.95); } + .switch { + position: relative; + display: inline-block; + width: 50px; + height: 28px; + } + + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; + border-radius: 28px; + } + + .slider:before { + position: absolute; + content: ""; + height: 22px; + width: 22px; + left: 3px; + bottom: 3px; + background-color: white; + transition: .4s; + border-radius: 50%; + } + + input:checked + .slider { + background-color: #007AFF; + } + + input:checked + .slider:before { + transform: translateX(22px); + } + .product-list { margin-bottom: 80px; } @@ -174,10 +267,6 @@ font-weight: 600; } - .product-checkbox { - width: 20px; - height: 20px; - } .product-name { font-size: 16px; @@ -311,37 +400,87 @@