<div class="device"style="height:130px;width: 95%;margin: 10px ;align-items: center;border-radius: 5px" >
<style>
    .shop-card {
        width: 100%;
        margin: 2px 0;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 12px;
        padding: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .shop-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .shop-logo {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .shop-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .shop-name {
        flex: 1;
        padding-left: 10px;
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
    }
    
    .shop-info {
        display: flex;
        margin-bottom: 10px;
    }
    
    .shop-rating {
        width: 50%;
    }
    
.rating-stars {
    display: flex;
    margin-bottom: 4px;
}

.star {
    font-size: 1.5rem; /* 增大星星尺寸 */
    color: #ffd700; /* 金色 */
    margin-right: 3px;
    animation: strong-twinkle 1s ease-in-out infinite; /* 1秒周期，更快更明显 */
}

@keyframes strong-twinkle {
    0%, 100% {
        opacity: 1; /* 最亮 */
        text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700; /* 亮部光影 */
    }
    50% {
        opacity: 0.2; /* 极暗（对比度更大） */
        text-shadow: none; /* 移除光影 */
    }
}
    
    .star {
        color: #ffc107;
        font-size: 0.9rem;
        margin-right: 2px;
    }
    
    .review-count {
        font-size: 0.8rem;
        color: #666;
    }
    
    .shop-category {
        width: 50%;
        font-size: 0.85rem;
        color: #555;
        padding-left: 8px;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .shop-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        position: relative;
    }
    
.shop-distance {
    font-size: 0.85rem;
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #4b0082); /* 彩虹渐变 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%; /* 关键：背景宽度设为200% */
    animation: smooth-flow 2s linear infinite; /* 绑定动画 */
}

/* 定义无缝循环关键帧（核心逻辑：背景定位从-100%到100%） */
@keyframes smooth-flow {
    0% {
        background-position: -100% center; /* 起始位置：向左偏移100%（隐藏完整渐变） */
    }
    100% {
        background-position: 100% center; /* 结束位置：向右偏移100%（完整显示两次渐变） */
    }
}
    
    .follow-btn {
        padding: 8px 16px;
        background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
        color: white;
        border: none;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        box-shadow: 0 2px 6px rgba(255, 107, 107, 0.2);
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
    }
    
    .search-container {
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        z-index: 1;
        pointer-events: none;
    }
    
    .search-container.active {
        width: 100%;
        pointer-events: auto;
    }
    
    .search-form {
        display: flex;
        align-items: center;
        background: white;
        border-radius: 20px;
        padding: 5px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        pointer-events: auto;
    }
    
    .search-input {
        flex: 1;
        padding: 0 10px;
    }
    
    .search-input input {
        width: 100%;
        border: none;
        outline: none;
        padding: 5px;
        font-size: 0.85rem;
    }
    
    .search-submit {
        background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
        color: white;
        border: none;
        border-radius: 15px;
        padding: 5px 10px;
        font-size: 0.85rem;
        cursor: pointer;
    }
    
    /* 移除所有悬停效果 */
    @media (hover: hover) {
        .shop-card:hover, 
        .shop-logo:hover, 
        .shop-name:hover, 
        .shop-category:hover, 
        .shop-distance:hover, 
        .follow-btn:hover {
            transform: none !important;
            box-shadow: none !important;
            color: inherit !important;
            border-color: inherit !important;
        }
    }
</style>

<div class="shop-card">
    <div class="shop-header">
        <div class="shop-logo">
            <img src="https://q1.qlogo.cn/g?b=qq&nk=3338787463&s=640" alt="店铺Logo">
        </div>
        <h2 class="shop-name">江南货源站</h2><div class="review-count">
  <img src="https://s21.ax1x.com/2025/05/28/pVpJsJK.png" alt="yz2" width="35" height="35">
  <img src="https://s21.ax1x.com/2025/05/28/pVpJyRO.png" alt="yz" width="75" height="30">
</div>
    </div>
    
    <div class="shop-info">
        <div class="shop-rating">
            <div class="rating-stars">
                <span class="star">★</span>
                <span class="star">★</span>
                <span class="star">★</span>
                <span class="star">★</span>
                <span class="star">★</span>
            </div>
            <div class="review-count">9999+条好评</div>
        </div>
        
        <div class="shop-category">
            直装 · 内核 · 文件<br>皮肤 · 小号 · 权益
        </div>
    </div>
    
    <div class="shop-footer">
        <div class="shop-distance">店铺24小时运营-自动发货</div>
        <button class="follow-btn" id="searchToggleBtn">搜索商品</button>
        
        <div class="search-container" id="searchContainer">
            <form action="" method="get" class="search-form" id="goods_search">
                <input type="hidden" value="yes" name="search">
                <div class="search-input">
                    <input type="text" value="" name="kw" placeholder="输入商品关键字..." id="kw">
                </div>
                <button type="submit" class="search-submit">搜索</button>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchToggleBtn = document.getElementById('searchToggleBtn');
    const searchContainer = document.getElementById('searchContainer');
    const goodsSearch = document.getElementById('goods_search');
    const kwInput = document.getElementById('kw');
    
    // 更新按钮文字的函数
    function updateButtonText() {
        if (!searchContainer.classList.contains('active')) {
            searchToggleBtn.textContent = '搜索商品'; // 默认状态
        } else {
            searchToggleBtn.textContent = kwInput.value.trim() !== '' ? '搜索' : '关闭';
        }
    }
    
    // 初始化按钮文字
    updateButtonText();
    
    // 监听输入框内容变化
    kwInput.addEventListener('input', updateButtonText);
    
    // 点击搜索按钮切换搜索框显示
    searchToggleBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        
        if (searchContainer.classList.contains('active')) {
            // 如果搜索框已显示且有内容，则提交表单
            if (kwInput.value.trim() !== '') {
                goodsSearch.submit();
            } else {
                // 否则隐藏搜索框
                searchContainer.classList.remove('active');
            }
        } else {
            // 显示搜索框
            searchContainer.classList.add('active');
            kwInput.focus();
        }
        updateButtonText(); // 更新按钮文字
    });
    
    // 点击页面其他地方关闭搜索框
    document.addEventListener('click', function(e) {
        if (searchContainer.classList.contains('active') && 
            !searchContainer.contains(e.target) && 
            e.target !== searchToggleBtn) {
            searchContainer.classList.remove('active');
            updateButtonText();
        }
    });
    
    // 阻止表单点击事件冒泡
    goodsSearch.addEventListener('click', function(e) {
        e.stopPropagation();
    });

    // 添加输入框点击事件
    kwInput.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});
</script>
</div>