首页数据part3

src/main/resources/static/js/index.js

@@ -8,7 +8,8 @@ var homeData = new Vue({
         topicData3: [],
         topicData4: [],
         topicData5: [],
-        advertising: []
+        advertising: [],
+        asideNav: []
     },
     methods: {
         getBanners: function(){
@@ -66,16 +67,21 @@ var homeData = new Vue({
                     _self.topicData3 = r.data.topicData3;
                     _self.topicData4 = r.data.topicData4;
                     _self.topicData5 = r.data.topicData5;
+                    setTimeout(function(){
+                        _self.setAsideNav();
+                    },500)
                 }
             });
         },
-        test: function(key){
-            console.log(key);
-            console.log(this.$refs[key]);
-            if (key == 5) {
-                return true;
+        setAsideNav: function(){
+            var _self = this;
+            var titArr = $('.floorTit').find('h2,h3');
+            for (var i=0; i<titArr.length; i++){
+                _self.asideNav.push({
+                    id: $(titArr[i]).attr("data-id"),
+                    value: $(titArr[i]).text()
+                })
             }
-            return false;
         }
 
     },
@@ -85,8 +91,8 @@ var homeData = new Vue({
         this.getTopicData();
     },
     mounted: function() {
-
         this.getAdvertising();
+
     }
 });
 

src/main/resources/templates/index.html

@@ -28,8 +28,8 @@
         <div th:each="item: ${pageFloors}">
             <div th:if="${item.type}==1">
                 <!--推荐专区-->
-                <div>
-                    <h2 th:text="${item.title}"></h2>
+                <div class="floorTit">
+                    <h2 th:text="${item.title}" data-id="1"></h2>
                 </div>
                 <div id="recommendBox" class="picScroll-left">
                     <ul class="bd">
@@ -48,12 +48,14 @@
             </div>
             <div th:if="${item.type}==2">
                 <!--团购促销-->
-                <h2 th:text="${item.title}"></h2>
+                <div class="floorTit">
+                    <h2 th:text="${item.title}" data-id="2"></h2>
+                </div>
             </div>
             <div th:if="${item.type}==3">
                 <!--优质供应商-->
-                <div>
-                    <h2 th:text="${item.title}">优质供应商</h2>
+                <div class="floorTit">
+                    <h2 th:text="${item.title}" data-id="3">优质供应商</h2>
                     <h5>采美正品联盟 质量保证</h5>
                 </div>
                 <div>
@@ -70,8 +72,8 @@
             </div>
             <div th:if="${item.type}==4">
                 <!--商品专题-->
-                <div>
-                    <h2 th:text="${item.title}">商品专题</h2>
+                <div class="floorTit">
+                    <h2 th:text="${item.title}" data-id="4">商品专题</h2>
                     <a href="javascript:void(0);">更多商品专题</a>
                 </div>
                 <ul>
@@ -97,8 +99,8 @@
             <div th:if="${item.type}==6">
                 <!--大专题-->
                 <div v-for="bigTopic in bigTopicData">
-                    <div>
-                        <h3 v-text="bigTopic.title"></h3>
+                    <div class="floorTit">
+                        <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
                         <h5 v-text="bigTopic.detail"></h5>
                     </div>
                     <ul>
@@ -114,9 +116,35 @@
         </div>
     </div>
     <!--右侧边栏导航-->
-    <div><hr></div>
+    <div>
+        <div>
+            <a v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value" href="javascript:void(0);"></a>
+        </div>
+        <div>
+            <img src="/img/base/qr_code_caimei.png"/>
+            <div class="hover">
+                <img src="/img/base/qr_code_caimei.png" alt="采美365网"/>
+                <p>微信扫一扫<br/>关注采美365网</p>
+            </div>
+        </div>
+        <div>
+            <img src="/img/home/kefuBig.png"/>
+            <div class="hover">
+                <img src="/img/home/kefuBig.png"/>
+                <div>
+                    <p>咨询热线</p>
+                    <div>0755-22907771</div>
+                    <div>153-3885-1365</div>
+                </div>
+                <div>
+                    <p>工作日:</p>
+                    <div>9:00-18:00</div>
+                </div>
+            </div>
+        </div>
+    </div>
     <!--左侧广告图-->
-    <div class="ad">
+    <div>
         <div v-for="ad in advertising">
             <a href="javascript:void(0);">
                 <img :src="ad.image" :alt="ad.title">