<!DOCTYPE html>
<!--把html 的名称空间，改成：`xmlns:th="http://www.thymeleaf.org"` 会有语法提示-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hello</title>

    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>

<div th:replace="~{common/component::header}"></div>

<!--保留原来的标签-->
<div th:insert="~{common/component::search}"></div>
<div th:if="${total == null}">
    <h1>暂未匹配到搜索结果</h1>
</div>
<div th:if="${total != null}">
    <p>查询总条数：{<span th:text="${total}"></span>}</p>
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3"
             th:each="data : ${dataList}">
            <div class="thumbnail">
                <img src="" th:src="${data.img}" alt="图片">
                <div class="caption">
                    <h3>[(${data.name})]</h3>
                    <p>￥<span th:text="${data.skuInfoList !=null && data.skuInfoList.size() > 0 ? data.skuInfoList[0].price : 0.00}"></span></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--只需要在公共组件添加一个 id 或 class 等只要css 能唯一定位到的属性即可   (此处以 id 为例)-->
<div th:insert="~{common/component::#footer}"></div>


</body>
</html>
