From b4e4cce8d2f492a6e997b25f0f175e41fb9bdbdb Mon Sep 17 00:00:00 2001 From: yiqiu Date: Thu, 25 Dec 2025 23:42:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 150 +++++++++++++++++++++++++------------------------- 1 file changed, 76 insertions(+), 74 deletions(-) diff --git a/css/index.css b/css/index.css index cca22ff..f6ad408 100644 --- a/css/index.css +++ b/css/index.css @@ -5044,82 +5044,84 @@ html { } */ - /* Hot Products - Mobile Slider */ - .hot-products-pagination { - position: relative; - margin-top: 20px; - bottom: 0 !important; + /* Mobile Overrides Group */ + @media (max-width: 768px) { + + /* Hot Products - Mobile Slider */ + .hot-products-pagination { + position: relative; + margin-top: 20px; + bottom: 0 !important; + } + + .hot-products-pagination .swiper-pagination-bullet { + width: 8px; + height: 8px; + background: #cbd5e1; + opacity: 1; + } + + .hot-products-pagination .swiper-pagination-bullet-active { + background: #3b82f6; + width: 20px; + border-radius: 4px; + } + + /* Hot Products - Card View Override */ + .products-table thead { + display: none; + } + + .products-table, + .products-table tbody, + .products-table tr, + .products-table td { + display: block; + width: 100%; + } + + .products-table tr { + margin-bottom: 15px; + background: rgba(30, 41, 59, 0.4); + border: 1px solid rgba(148, 163, 184, 0.1); + border-radius: 12px; + padding: 15px; + } + + .products-table td { + text-align: right; + padding: 8px 0; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgba(148, 163, 184, 0.05); + } + + .products-table td:last-child { + border-bottom: none; + } + + .products-table td::before { + content: attr(data-label); + float: left; + font-weight: 600; + color: rgba(148, 163, 184, 0.8); + } + + /* Solution Wrapper - Stacked */ + .solution-wrapper { + display: flex; + flex-direction: column; + } + + .solution-tabs { + display: none; + /* Hide desktop tabs */ + } } - .hot-products-pagination .swiper-pagination-bullet { - width: 8px; - height: 8px; - background: #cbd5e1; - opacity: 1; - } - - .hot-products-pagination .swiper-pagination-bullet-active { - background: #3b82f6; - width: 20px; - border-radius: 4px; - } - - /* Hot Products - Card View Override */ - .products-table thead { - display: none; - } - - .products-table, - .products-table tbody, - .products-table tr, - .products-table td { - display: block; - width: 100%; - } - - .products-table tr { - margin-bottom: 15px; - background: rgba(30, 41, 59, 0.4); - border: 1px solid rgba(148, 163, 184, 0.1); - border-radius: 12px; - padding: 15px; - } - - .products-table td { - text-align: right; - padding: 8px 0; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(148, 163, 184, 0.05); - } - - .products-table td:last-child { - border-bottom: none; - } - - .products-table td::before { - content: attr(data-label); - float: left; - font-weight: 600; - color: rgba(148, 163, 184, 0.8); - } - - /* Solution Wrapper - Stacked */ - .solution-wrapper { - display: flex; - flex-direction: column; - } - - .solution-tabs { - display: none; - /* Hide desktop tabs */ - } -} - -*/ -/* We might need to restructure the HTML to show all solutions stacked or use a mobile slider - For now, let's assume we stack them or show a simple list. + /* We might need to restructure the HTML to show all solutions stacked or use a mobile slider + For now, let's assume we stack them or show a simple list. Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification. Let's style the active one well first, or maybe show all? */ \ No newline at end of file