[v-cloak] {
            display: none !important;
        }
        :root {
            --animate-duration: 2s;
            /* 所有动画默认时长改为2秒 */
        }

        /* 父容器：相对定位（核心！作为文字定位基准） + 匹配图片高度 */
        .abouts {
            position: relative;
            /* 必须：让子元素绝对定位参考该容器 */
            height: 720px;
            /* 匹配图片高度，避免容器高度塌陷 */
            width: 100%;
            overflow: hidden;
            /* 防止文字超出容器 */
        }

        /* 图片：铺满容器，消除默认空隙 */
        .abouts img {
            height: 100%;
            /* 改为100%，继承父容器高度，更灵活 */
            width: 100%;
            object-fit: cover;
            /* 保证图片不变形，铺满容器 */
            display: block;
            /* 消除图片底部默认空隙 */
        }

        .abouts .names {
            position: absolute;
            z-index: 2;
            /* 确保在图片上方 */
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 600;
            font-size: 50px;
            color: #FFFFFF;
            left: 10%;
            top: 50%;
            transform: translate(-50%);
        }

        .list {
            width: 1200px;
            margin: auto;
            padding: 60px 0 0 0;
        }

        /* 核心布局：3行3列网格 */
        .case-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* 3列均分 */
            gap: 24px;
            /* 卡片之间的间距，匹配设计稿 */
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }

        .case-card-product:hover {
            transform: scale(1.05) !important;
            /* 加!important确保覆盖入场动画 */
            opacity: 0.95;
        }

        /* 单个卡片：白色背景 + 内容包裹 */
        .case-card-product {
            background-color: #ffffff;
            overflow: hidden;
            /* 避免图片溢出 */
            /* border-radius: 4px; */
            cursor: pointer;
            /* 轻微圆角，更精致（可选） */
        }

        /* 案例图片：自适应容器，保持比例 */
        .case-img {
            width: 100%;
            height: 260px;
            /* 固定高度，保证所有图片视觉一致 */
            object-fit: cover;
            /* 裁剪多余部分，保持图片比例 */
            display: block;
        }

        /* 文字区域：内边距 + 左对齐 */
        .case-text {
            padding: 16px 12px;
        }

        /* 标题样式：加粗、深灰色 */
        .case-title {
            margin-bottom: 8px;
            font-family: MiSans Latin, MiSans Latin;
            font-weight: bold;
            font-size: 18px;
            color: #282731;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        /* 描述样式：浅灰色、小字 */
        .case-desc {
            margin: 0;
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 400;
            font-size: 14px;
            color: #282731;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* 行数 */
  -webkit-box-orient: vertical;
  word-break: break-all;
        }

        /* 响应式适配：小屏幕自动调整列数 */
        @media (max-width: 768px) {
            .case-grid {
                grid-template-columns: repeat(2, 1fr);
                /* 平板：2列 */
                gap: 20px;
            }

            .case-img {
                height: 180px;
                /* 小屏幕图片高度降低 */
            }
        }

        @media (max-width: 480px) {
            .case-grid {
                grid-template-columns: 1fr;
                /* 手机：1列 */
                gap: 16px;
            }

            .case-img {
                height: 160px;
            }
        }

        /* 导航容器：横向 Flex 布局 + 白色背景 + 居中 */
        .case-tabs {
            display: flex;
            max-width: 1200px;
            /* 整体白色背景，匹配设计稿 */
            margin-top: 30px;
        }

        .tab-item-product:nth-child(n+2) {
            margin-left: 20px;
            /* 第二个及以后的项，左侧间距48px，匹配设计稿 */
        }

        /* 单个标签：均分宽度 + 文字居中 + 内边距控制大小 */
        .tab-item-product {
            /* 核心：4个标签均分容器宽度，各占25% */
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
            color: #595860;
            font-weight: 400;
            /* 非激活态文字：浅灰色 */
            cursor: pointer;
            transition: color 0.3s ease;
            /*  hover 过渡效果（可选） */
            font-family: MiSans Latin, sans-serif;
            background-color: #F8F8F8;

        }

        /* 激活态标签：深蓝色背景 + 白色文字（高亮核心） */
        .tab-item-product.active {
            background-color: #142261;
            /* 深蓝色，匹配设计稿的高亮背景 */
            color: #ffffff;
            /* 白色文字，和背景形成对比 */
        }

        /* 非激活态 hover 效果（可选，提升交互） */
        .tab-item-product:not(.active):hover {
            color: #142261;
            /* hover 时文字变为深蓝色，暗示可点击 */
        }

        /* 外层容器：左右分组 + 两端对齐 */
        .filter-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            padding: 0 20px;
            background-color: #ffffff;
        }

        /* 左侧标签组：组内横向排列 */
        .tab-group {
            display: flex;
            gap: 24px;
            /* 标签之间的间距 */
        }

        /* 单个标签样式 */
        .tab-item-a {
            /* 浅灰色边框，匹配设计稿 */
            border-radius: 4px;
            font-size: 18px;
            color: #999999;
            /* 默认浅灰色文字 */
            cursor: pointer;
            font-family: MiSans Latin, sans-serif;
            transition: all 0.3s ease;
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 400;
            font-size: 22px;
            color: #595860;
            font-style: normal;
            text-transform: none;


        }

        /* 激活态标签：深蓝色高亮 */
        .tab-item-a.active {
            /* 深蓝色边框 */
            /* 深蓝色文字 */
            color: #142261;

            /* 轻微加粗，突出选中态 */
        }

        /* 右侧下拉组：组内横向排列 */
        .dropdown-group {
            display: flex;
            gap: 24px;
            /* 下拉框之间的间距 */
        }

        /* 自定义下拉框容器 */
        .custom-dropdown {
            position: relative;

            display: inline-block;
        }

        /* 下拉框原生样式清除 + 自定义样式 */
        .custom-dropdown select {
            padding: 0 44px 0 20px;
            width: 250px;
            height: 42px;
            /* 右侧预留箭头位置 */
            border: 1px solid #e5e5e5;
            /* 浅灰色边框，和标签保持一致 */
            border-radius: 4px;
            font-size: 18px;
            color: #999999;
            /* 提示文字浅灰色，匹配设计稿 */
            font-family: MiSans Latin, sans-serif;
            background-color: #ffffff;
            /* 清除原生下拉样式 */
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            outline: none;
            cursor: pointer;
            min-width: 200px;
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 400;
            font-size: 16px;
            color: #88878E;
            text-align: left;
            font-style: normal;
            text-transform: none;

            /* 保证下拉框宽度和设计稿一致 */
        }

        /* 下拉箭头（伪元素实现，替代原生丑陋箭头） */
        .custom-dropdown::after {
            content: "▼";
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            color: #999999;
            /* 默认箭头颜色，和提示文字一致 */
            pointer-events: none;
            /* 不影响下拉框点击 */
        }

        /* 下拉框聚焦/选中时的高亮样式 */
        .custom-dropdown select:focus {
            border-color: #142261;
            /* 聚焦时深蓝色边框 */
            color: #142261;
            /* 聚焦时深蓝色文字 */
        }

        .custom-dropdown:focus-within::after {
            color: #142261;
            /* 聚焦时箭头同步变为深蓝色 */
        }

        /* 下拉选项美化（可选） */
        .custom-dropdown select option {
            padding: 12px 20px;
            color: #333333;
            background-color: #ffffff;
        }
        .xian {
            width: 100%;
            height: 1px;
            background: #E9E9E9;
            border-radius: 0px 0px 0px 0px;
            margin-top: 100px;
        }
        
/* 网格布局 */
.h5s-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 10px;
}

/* 产品卡片 */
.h5s-product-card {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 图片 */
.h5s-product-img {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  height: 100px;
  justify-content: center;
}
.h5s-product-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 标题：一行省略 */
.h5s-product-title {
  margin: 0;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;



font-family: MiSans Latin, MiSans Latin;
font-weight: 600;
font-size: 16px;
color: #282731;
font-style: normal;
text-transform: none;
}

/* 标签 */
.h5s-product-tags {
  display: flex;
  gap: 6px;
}
.h5s-tag {
  padding: 3px 6px;
  border: 1px solid #142261;
  color: #142261;
  font-size: 12px;
  border-radius: 2px;
}

/* 描述：一行省略 */
.h5s-product-desc {
  font-size: 13px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  width: 150px;
  text-overflow: ellipsis;
}

/* 按钮组 */
.h5s-product-buttons {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
.h5s-btn {
  flex: 1;
  padding: 8px 0;
  /* border-radius: 4px; */
  font-size: 10px;
  border: none;
}
.h5s-btn-outline {
  background: #fff;
  color: #142261;
  border: 1px solid #142261;
}
.h5s-btn-solid {
  background: #142261;
  color: #fff;
}