<div class="model-brand">
    <div class="model-tabs">
        <div class="tab-item" data-ms-type="hot">热门</div>
        <div class="tab-item" data-ms-type="">所有品牌</div>
        <div class="tab-item" data-ms-type="1">乘用车</div>
        <div class="tab-item" data-ms-type="2">商用车</div>
    </div>

    <div class="tab-content">
        <div class="brand-index">
            <div class="brand-index-btn active" data-initial="">ALL</div>
            <? foreach ($initialArr as $letter): ?>
                <div class="brand-index-btn" data-initial="<?= $letter ?>"><?= $letter ?></div>
            <? endforeach; ?>
        </div>
        <div class="brand-card-list">
            <? foreach ($brandList as $item): ?>
            <div class="brand-card" data-brand-id="<?=$item['brand_id']?>" data-initial="<?=$item['brand_initial']?>">
                <div class="brand-img">
                    <img src="<?=$item['brand_logo']?>" alt="<?=$item['brand_name']?>">
                </div>
                <div class="brand-card-inner">
                    <span class="brand-name"><?=$item['brand_name']?></span>
                    <input type="hidden" class="brand-id" value="<?=$item['brand_id']?>">
                </div>
            </div>
            <? endforeach; ?>
        </div>
    
    </div>
</div>

<style>
    .model-brand{
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    }
   .model-tabs {
        display: flex;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        background-color: #eceeef;
        position: sticky;
        top: 300px;
        z-index: 3;
    }

    .model-tabs .tab-item {
        padding: 8px 16px;
        cursor: pointer;
        color: #333;
        position: relative;
    }

    .model-tabs .tab-item.active {
        color: #d70937;
        background-color: #fff;
        transform: translateY(1px);
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    .model-tabs .tab-item:first-child.active {
        border-left: none;
    }

    .model-tabs .tab-item.active::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background-color: #d70937;
    }

    .tab-content {
        padding: 20px;
        min-height: calc(100vh - 304px);
    }

    .brand-index {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 10px;
        background-color: #ffffff;
        gap: 4px;
        position: sticky;
        top: 340px;
        z-index: 2;
    }

    .brand-index-btn {
        padding: 4px 8px;
        border: 1px solid #ccc;
        background-color: #f5f5f5;
        cursor: pointer;
        font-size: 12px;
    }

    .brand-index-btn:hover {
        background-color: #d70937;
        border-color: 1px solid #d70937;
        color: #fff;
    }

    .brand-group {
        margin-bottom: 10px;
    }

    .brand-group-header {
        position: sticky;
        top: 272px;
        background-color: #f8f8f8;
        padding: 4px 8px;
        margin-bottom: 10px;
        font-weight: bold;
        color: #d70937;
        z-index: 1;
    }

    .brand-card-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .brand-card {
        box-sizing: border-box;
        flex: 0 0 calc(25% - 10px);
        padding: 5px;
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        color: #666;
        background-color: #fff;
    }

    .brand-img{
        width: 60px;
        height: 60px;
        margin-left: 8px;
        overflow: hidden;
    }

    .brand-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .brand-card-inner {
        padding: 20px 12px 20px 18px;
        text-align: center;
        transition: all 0.2s;
        font-size: 14px;
        font-weight: 500;
    }

    .brand-card:hover {
        background-color: #f1f1f1ff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28);
        color: #d70937;
        transform: translateY(-2px);
    }

    .brand-card.selected .brand-card-inner {
        background-color: #d70937;
        color: #fff;
        border-color: #d70937;
    }
    
    .brand-index-btn {
        display: inline-block;
        padding: 4px 8px;
        border: 1px solid #d70937; /* 红色边框 */
        color: #d70937; /* 红色文字 */
        background-color: #ffffff; /* 白色背景 */
        border-radius: 4px;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease; /* 平滑过渡效果 */
        text-decoration: none;
    }

    .brand-index-btn:hover {
        background-color: #d70937;
        border-color: 1px solid #d70937;
        color: #fff;
    }
    /* 激活状态样式 */
    .brand-index-btn.active {
        background-color: #d70937;
        color: #ffffff; 
        border-color: 1px solid #d70937;
    }
</style>
<script>
    $(document).ready(function() {
    // 筛选按钮点击事件
    $('.brand-index-btn').click(function() {
        // 移除所有按钮的激活状态
        $('.brand-index-btn').removeClass('active');
        
        // 为当前点击的按钮添加激活状态
        $(this).addClass('active');
        
        // 获取当前点击按钮的初始字母
        var initial = $(this).data('initial');
        
        // 执行筛选
        filterBrands(initial);
    });
    
    // 筛选品牌函数
    function filterBrands(initial) {
        // 显示所有品牌卡片
        $('.brand-card').show();
        
        if (initial !== '') {
            // 隐藏不符合条件的品牌卡片
            $('.brand-card').each(function() {
                var cardInitial = $(this).data('initial');
                // 如果卡片的初始字母不匹配筛选条件，则隐藏
                if (cardInitial.toLowerCase() !== initial.toLowerCase()) {
                    $(this).hide();
                }
            });
        }

    }

});
</script>