|
@@ -23,12 +23,14 @@
|
|
|
<a class="prev" href="javascript:void(0)"></a>
|
|
|
<a class="next" href="javascript:void(0)"></a>
|
|
|
</div>
|
|
|
+ <!--页面主体数据-->
|
|
|
<div class="main">
|
|
|
- <!--页面主体数据-->
|
|
|
<div th:each="item: ${pageFloors}">
|
|
|
<div th:if="${item.type}==1">
|
|
|
<!--推荐专区-->
|
|
|
- <h2 th:text="${item.title}"></h2>
|
|
|
+ <div>
|
|
|
+ <h2 th:text="${item.title}"></h2>
|
|
|
+ </div>
|
|
|
<div id="recommendBox" class="picScroll-left">
|
|
|
<ul class="bd">
|
|
|
<li v-for="product in recommends">
|
|
@@ -50,45 +52,78 @@
|
|
|
</div>
|
|
|
<div th:if="${item.type}==3">
|
|
|
<!--优质供应商-->
|
|
|
- <h2 th:text="${item.title}"></h2>
|
|
|
+ <div>
|
|
|
+ <h2 th:text="${item.title}">优质供应商</h2>
|
|
|
+ <h5>采美正品联盟 质量保证</h5>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="/img/home/goodsup.png"/>
|
|
|
+ <ul>
|
|
|
+ <li v-for="topic in topicData3" style="display: inline-block">
|
|
|
+ <a href="javascript:void(0);">
|
|
|
+ <img :src="topic.image" :alt="topic.title">
|
|
|
+ <p v-text="topic.title"></p>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div th:if="${item.type}==4">
|
|
|
<!--商品专题-->
|
|
|
<div>
|
|
|
- <h2>专题</h2>
|
|
|
+ <h2 th:text="${item.title}">商品专题</h2>
|
|
|
<a href="javascript:void(0);">更多商品专题</a>
|
|
|
</div>
|
|
|
- <div>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <ul>
|
|
|
+ <li v-for="topic in topicData4" style="display: inline-block">
|
|
|
+ <a href="javascript:void(0);">
|
|
|
+ <img :src="topic.image" :alt="topic.title">
|
|
|
+ <p v-text="topic.title"></p>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
<div th:if="${item.type}==5">
|
|
|
<!--小专题-->
|
|
|
- <h2 th:text="${item.title}"></h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="topic in topicData5" style="display: inline-block">
|
|
|
+ <a href="javascript:void(0);">
|
|
|
+ <img :src="topic.image" :alt="topic.title">
|
|
|
+ <p v-text="topic.title"></p>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
<div th:if="${item.type}==6">
|
|
|
<!--大专题-->
|
|
|
- <div th:each="topic: ${item.secondFloors}">
|
|
|
+ <div v-for="bigTopic in bigTopicData">
|
|
|
<div>
|
|
|
- <h3 th:text="${topic.title}"></h3>
|
|
|
- <h5 th:text="${topic.detail}"></h5>
|
|
|
+ <h3 v-text="bigTopic.title"></h3>
|
|
|
+ <h5 v-text="bigTopic.detail"></h5>
|
|
|
</div>
|
|
|
- <div class="picScroll-left">
|
|
|
- <div th:each="sub: ${topic.floorData}">
|
|
|
+ <ul>
|
|
|
+ <li v-for="floor in bigTopic.floorData" style="display: inline-block">
|
|
|
<a href="javascript:void(0);">
|
|
|
- <img th:src="${sub.image}" th:alt="${sub.name}">
|
|
|
- <p th:text="${sub.name}"></p>
|
|
|
+ <img :src="floor.image" :alt="floor.title">
|
|
|
+ <p v-text="floor.title"></p>
|
|
|
</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--右侧边栏导航-->
|
|
|
- <div></div>
|
|
|
+ <div><hr></div>
|
|
|
<!--左侧广告图-->
|
|
|
- <div></div>
|
|
|
+ <div class="ad">
|
|
|
+ <div v-for="ad in advertising">
|
|
|
+ <a href="javascript:void(0);">
|
|
|
+ <img :src="ad.image" :alt="ad.title">
|
|
|
+ <p v-text="ad.title"></p>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 引入底部 -->
|