This commit is contained in:
yiqiu
466
css/index.css
466
css/index.css
@@ -59,7 +59,7 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#index .nav-right > a {
|
||||
#index .nav-right>a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -401,7 +401,7 @@
|
||||
}
|
||||
|
||||
/* 文字内容容器，实际的左对齐内容 */
|
||||
.banner-cont .swiper-slide .section-content > * {
|
||||
.banner-cont .swiper-slide .section-content>* {
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
@@ -422,14 +422,13 @@
|
||||
width: auto;
|
||||
position: relative;
|
||||
background: linear-gradient(120deg,
|
||||
#FFFFFF 0%,
|
||||
#FFFFFF 40%,
|
||||
#E0F2FE 48%,
|
||||
#BFDBFE 50%,
|
||||
#E0F2FE 52%,
|
||||
#FFFFFF 60%,
|
||||
#FFFFFF 100%
|
||||
);
|
||||
#FFFFFF 0%,
|
||||
#FFFFFF 40%,
|
||||
#E0F2FE 48%,
|
||||
#BFDBFE 50%,
|
||||
#E0F2FE 52%,
|
||||
#FFFFFF 60%,
|
||||
#FFFFFF 100%);
|
||||
background-size: 200% 100%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
@@ -442,6 +441,7 @@
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
@@ -452,6 +452,7 @@
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
@@ -613,6 +614,7 @@
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -698,11 +700,9 @@
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
rgba(56, 189, 248, 0.15) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
background: radial-gradient(circle at center,
|
||||
rgba(56, 189, 248, 0.15) 0%,
|
||||
transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
pointer-events: none;
|
||||
@@ -964,9 +964,12 @@
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
@@ -1058,9 +1061,12 @@
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
@@ -1658,6 +1664,7 @@
|
||||
from {
|
||||
filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.2));
|
||||
}
|
||||
|
||||
to {
|
||||
filter: drop-shadow(0 0 40px rgba(56, 189, 248, 0.4));
|
||||
}
|
||||
@@ -2159,7 +2166,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.animate-on-scroll.animated {
|
||||
@@ -2225,6 +2232,7 @@
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -2280,6 +2288,7 @@ html {
|
||||
|
||||
/* 禁用不必要的动画以提升性能 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@@ -2338,7 +2347,7 @@ html {
|
||||
}
|
||||
|
||||
/* 小屏幕下保持左对齐布局 */
|
||||
.banner-cont .swiper-slide .section-content > * {
|
||||
.banner-cont .swiper-slide .section-content>* {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@@ -2400,7 +2409,7 @@ html {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide .section-content > * {
|
||||
.banner-cont .swiper-slide .section-content>* {
|
||||
max-width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -2481,6 +2490,7 @@ html {
|
||||
|
||||
/* 手机 576px - 767px */
|
||||
@media (max-width: 767px) {
|
||||
|
||||
/* ===== 导航栏 - 极简设计 ===== */
|
||||
#index .nav-header {
|
||||
padding: 0 8px;
|
||||
@@ -2498,15 +2508,21 @@ html {
|
||||
|
||||
#index .nav-header .nav-right {
|
||||
display: flex !important;
|
||||
align-items: stretch !important;
|
||||
align-items: center !important;
|
||||
height: 100% !important;
|
||||
flex-wrap: nowrap !important;
|
||||
flex-shrink: 0;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
/* 默认隐藏所有的桌面端导航链接 */
|
||||
#index .nav-right .nav-desktop-link {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#index .nav-menu {
|
||||
display: none; /* 移动端隐藏主导航 */
|
||||
display: none;
|
||||
/* 移动端隐藏主导航 */
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon {
|
||||
@@ -2614,22 +2630,23 @@ html {
|
||||
|
||||
/* ===== Banner 区域 - 大幅缩小 ===== */
|
||||
.banner-cont .swiper-slide {
|
||||
height: 100vh !important;
|
||||
min-height: 350px;
|
||||
height: auto !important;
|
||||
min-height: 420px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide h1 {
|
||||
font-size: 24px !important;
|
||||
font-size: 28px !important;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.banner-cont .banner-desc {
|
||||
font-size: 12px !important;
|
||||
font-size: 14px !important;
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 20px !important;
|
||||
line-height: 1.5;
|
||||
max-height: 60px;
|
||||
margin-bottom: 24px !important;
|
||||
line-height: 1.6;
|
||||
max-height: 80px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
@@ -2637,33 +2654,36 @@ html {
|
||||
}
|
||||
|
||||
.banner-tag-pill {
|
||||
padding: 3px 10px;
|
||||
font-size: 10px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.banner-cont .btn2 {
|
||||
padding: 8px 20px !important;
|
||||
font-size: 12px !important;
|
||||
padding: 10px 24px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* 调整进度条位置到底部 */
|
||||
.banner-cont .swiper-pagination {
|
||||
bottom: 12px !important;
|
||||
bottom: 15px !important;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-pagination-bullet {
|
||||
width: 45px !important;
|
||||
width: 30px !important;
|
||||
height: 3px !important;
|
||||
}
|
||||
|
||||
/* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */
|
||||
.banner .banner-s {
|
||||
margin-top: 12px;
|
||||
padding: 10px 6px;
|
||||
margin-top: -20px;
|
||||
padding: 10px 10px;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.banner .banner-s .banner-list {
|
||||
gap: 6px !important;
|
||||
gap: 10px !important;
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
width: 100% !important;
|
||||
@@ -2671,29 +2691,30 @@ html {
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item {
|
||||
padding: 10px 10px !important;
|
||||
gap: 8px !important;
|
||||
padding: 16px 14px !important;
|
||||
gap: 10px !important;
|
||||
flex: none !important;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
text-align: left !important;
|
||||
min-height: 85px !important;
|
||||
min-height: auto !important;
|
||||
max-height: none !important;
|
||||
justify-content: flex-start !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 12px !important;
|
||||
width: auto !important;
|
||||
min-width: auto !important;
|
||||
max-width: none !important;
|
||||
background: rgba(15, 23, 42, 0.6) !important;
|
||||
background: rgba(15, 23, 42, 0.8) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.15) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .banner-item-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 4px;
|
||||
margin-right: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -2701,49 +2722,63 @@ html {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 3px;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item h5 {
|
||||
font-size: 11px !important;
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 0 !important;
|
||||
line-height: 1.3;
|
||||
color: #E5E7EB;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item .title-desc {
|
||||
font-size: 9px !important;
|
||||
font-size: 11px !important;
|
||||
line-height: 1.3;
|
||||
margin: 0 !important;
|
||||
color: rgba(203, 213, 225, 0.8);
|
||||
color: rgba(203, 213, 225, 0.6);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ===== 热销产品 - 精简卡片 ===== */
|
||||
/* ===== 热销产品 - 移动端横向滚动表格优化 ===== */
|
||||
.hot-products {
|
||||
margin-top: -50px;
|
||||
padding: 20px 0 30px !important;
|
||||
margin-top: -20px;
|
||||
padding: 30px 0 40px !important;
|
||||
}
|
||||
|
||||
.hot-products-title {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hot-products-title h3 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hot-products-title .subtitle {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.products-table-wrapper {
|
||||
padding: 0 12px;
|
||||
padding: 0 20px;
|
||||
/* 恢复横向滚动 */
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 表格转卡片 */
|
||||
/* 保持表格布局但优化样式 */
|
||||
.products-table,
|
||||
.products-table thead,
|
||||
.products-table tbody,
|
||||
@@ -2752,54 +2787,101 @@ html {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 在超小屏幕下使用卡片式，稍微大一点的还是表格 */
|
||||
.products-table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.products-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.products-table tbody tr {
|
||||
margin-bottom: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.products-table tbody tr:hover {
|
||||
transform: none;
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
border: 1px solid rgba(148, 163, 184, 0.1);
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 重构卡片布局 */
|
||||
.products-table tbody td {
|
||||
padding: 8px 0 8px 90px;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* 隐藏伪元素标签，改为直观布局 */
|
||||
.products-table tbody td::before {
|
||||
left: 14px;
|
||||
font-size: 11px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.products-table tbody td:nth-child(1)::before {
|
||||
content: "产品";
|
||||
/* 产品名称：占满一行 */
|
||||
.products-table tbody td:nth-child(1) {
|
||||
grid-column: 1 / -1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 参数配置：栅格布局 */
|
||||
.products-table tbody td:nth-child(2),
|
||||
/* CPU */
|
||||
.products-table tbody td:nth-child(3),
|
||||
/* 内存 */
|
||||
.products-table tbody td:nth-child(4),
|
||||
/* 带宽 */
|
||||
.products-table tbody td:nth-child(5)
|
||||
|
||||
/* 系统盘 */
|
||||
{
|
||||
grid-column: auto;
|
||||
font-size: 13px;
|
||||
color: rgba(226, 232, 240, 0.7);
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* 价格：左下角 */
|
||||
.products-table tbody td:nth-child(6) {
|
||||
grid-column: 1 / 2;
|
||||
align-self: end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 按钮：右下角 */
|
||||
.products-table tbody td:nth-child(7) {
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
text-align: right;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.products-table .product-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.products-table .product-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
.products-table .product-price {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.products-table .product-price .unit {
|
||||
.products-table .product-tag {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.products-table .product-price {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.products-table .btn-buy {
|
||||
padding: 6px 16px;
|
||||
font-size: 11px;
|
||||
padding: 8px 20px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== Section 通用 - 紧凑间距 ===== */
|
||||
@@ -2898,7 +2980,8 @@ html {
|
||||
}
|
||||
|
||||
.solution-desc p:nth-child(n+2) {
|
||||
display: none; /* 小屏只显示第1段 */
|
||||
display: none;
|
||||
/* 小屏只显示第1段 */
|
||||
}
|
||||
|
||||
.solution-link {
|
||||
@@ -2912,7 +2995,8 @@ html {
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
order: -1; /* 图片移到上方 */
|
||||
order: -1;
|
||||
/* 图片移到上方 */
|
||||
}
|
||||
|
||||
/* ===== 基础设施 - 简化显示 ===== */
|
||||
@@ -2975,7 +3059,8 @@ html {
|
||||
}
|
||||
|
||||
.honor-item {
|
||||
width: calc(50% - 6px); /* 改为2列布局 */
|
||||
width: calc(50% - 6px);
|
||||
/* 改为2列布局 */
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
@@ -3050,6 +3135,7 @@ html {
|
||||
|
||||
/* 小手机 最大575px */
|
||||
@media (max-width: 575px) {
|
||||
|
||||
/* ===== 导航栏 - 超紧凑 ===== */
|
||||
#index .nav-header {
|
||||
padding: 0 10px;
|
||||
@@ -3333,7 +3419,8 @@ html {
|
||||
|
||||
.solution-desc p {
|
||||
font-size: 10px;
|
||||
-webkit-line-clamp: 1; /* 小屏只显示1行 */
|
||||
-webkit-line-clamp: 1;
|
||||
/* 小屏只显示1行 */
|
||||
}
|
||||
|
||||
.solution-link {
|
||||
@@ -3451,6 +3538,7 @@ html {
|
||||
|
||||
/* 小屏手机优化（480px） */
|
||||
@media (max-width: 480px) and (min-width: 361px) {
|
||||
|
||||
/* ===== 导航栏 ===== */
|
||||
#index .nav-header {
|
||||
height: 46px !important;
|
||||
@@ -3558,6 +3646,7 @@ html {
|
||||
|
||||
/* 超小屏适配（320px） */
|
||||
@media (max-width: 360px) {
|
||||
|
||||
/* ===== 导航栏 - 极限压缩 ===== */
|
||||
#index .nav-header {
|
||||
padding: 0 8px;
|
||||
@@ -4012,6 +4101,7 @@ html {
|
||||
|
||||
/* 性能优化提示 */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* 在移动设备上禁用一些复杂动画以提升性能 */
|
||||
.banner-cont .swiper-slide::before,
|
||||
.banner-cont .swiper-slide::after,
|
||||
@@ -4141,7 +4231,8 @@ html {
|
||||
}
|
||||
|
||||
#index .section.service {
|
||||
padding-top: 120px; /* 为 banner-s 留出空间 */
|
||||
padding-top: 120px;
|
||||
/* 为 banner-s 留出空间 */
|
||||
}
|
||||
|
||||
/* 优化各section之间的过渡 */
|
||||
@@ -4526,121 +4617,122 @@ html {
|
||||
background: rgba(56, 189, 248, 0.3);
|
||||
box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
|
||||
}
|
||||
|
||||
/* Mobile Overrides for Index Page */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* Banner Adjustment */
|
||||
.banner-cont .swiper-slide {
|
||||
height: auto !important;
|
||||
min-height: 400px;
|
||||
padding-bottom: 60px;
|
||||
/* Space for pagination */
|
||||
}
|
||||
/* Banner Adjustment */
|
||||
.banner-cont .swiper-slide {
|
||||
height: auto !important;
|
||||
min-height: 400px;
|
||||
padding-bottom: 60px;
|
||||
/* Space for pagination */
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide .section-content {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
padding: 80px 20px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.banner-cont .swiper-slide .section-content {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
padding: 80px 20px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide .section-content .title-wrapper {
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.banner-cont .swiper-slide .section-content .title-wrapper {
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide h1 {
|
||||
font-size: 32px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.banner-cont .swiper-slide h1 {
|
||||
font-size: 32px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.banner-tags {
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.banner-tags {
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.banner-cont .banner-desc {
|
||||
font-size: 15px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.banner-cont .banner-desc {
|
||||
font-size: 15px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Feature Cards (Banner-S) */
|
||||
.banner .banner-s {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
/* Feature Cards (Banner-S) */
|
||||
.banner .banner-s {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.banner .banner-s .banner-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.banner .banner-s .banner-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
flex: auto;
|
||||
}
|
||||
.banner-s .banner-list .banner-item {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
/* Hot Products - Card View */
|
||||
.products-table thead {
|
||||
display: none;
|
||||
}
|
||||
/* Hot Products - Card View */
|
||||
.products-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.products-table,
|
||||
.products-table tbody,
|
||||
.products-table tr,
|
||||
.products-table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.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 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 {
|
||||
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: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);
|
||||
}
|
||||
.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 Wrapper - Stacked */
|
||||
.solution-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.solution-tabs {
|
||||
display: none;
|
||||
/* Hide desktop tabs */
|
||||
}
|
||||
.solution-tabs {
|
||||
display: none;
|
||||
/* Hide desktop tabs */
|
||||
}
|
||||
|
||||
/* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
|
||||
/* 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?
|
||||
|
||||
Reference in New Issue
Block a user