首页5条活动-滚动

pages/index.vue

@@ -148,21 +148,26 @@
             <div class="line-title"/>
           </div>
         </div>
-        <div class="flex-aic-jcb">
         <div
-            v-if="activityList.length>0">
+          v-if="activityList.length>0"
+          id="nav"
+          class="nav-sec-menu">
+          <nav>
+            <p
+              v-for="(item, index) in activityList"
+              :key="index">
               <router-link
-              :to="{ path: 'activityDetail', query:{id: activityList[0].id }}"
+                :to="{ path: 'activityDetail', query:{id: item.id }}"
                 class="flex-jcb">
                 <img
-                :src="activityList[0].banner"
+                  :src="item.banner"
                   style="height: 155px;border-radius: 3px;width:275px;margin-left: 10px;">
                 <img
                   class="activity-title-bg"
                   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAzgAAACFCAYAAACXMF20AAAABHNCSVQICAgIfAhkiAAABHZJREFUeJzt3bFqZVUUBuC9z10JBKsgpJrKZqpcQgpHECGPYG3nE1iLnWDnO/gG8wpaOkJCijSZYGlhiAimSLi5OdtqRJwpZsyMF3++r7zcYrc/6z9rtQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwLvSW2vTph8BAADwNtTR0ZGAAwAARKjLy0sBBwAAiFB7e3sCDgAAEKGur68FHAAAIELd3NwIOAAAQITa3d3tm34EAADA21C3t7cmOAAAQIRarVYCDgAAEKF2dnYEHAAAIELd3d0JOAAAQITa3t4WcAAAgAi1Xq8FHAAAIELN82xNNAAAEEFFDQAAiKGiBgAAxKj7+3sBBwAAiFBbW1sCDgAAEMEEBwAAiFFVJeAAAAARTHAAAIAYNcZwBwcAAIhQi8XCBAcAAIhQ8zwLOAAAQAQBBwAAiKGiBgAAxDDBAQAAYpjgAAAAMayJBgAAYqioAQAAMVTUAACAGCY4AABADAEHAACIoaIGAADEMMEBAABiWBMNAADEUFEDAABiqKgBAAAxapomAQcAAIhQYwwBBwAAiCDgAAAAMVTUAACAGJYMAAAAMaq15g4OAAAQQUUNAACIoaIGAADEMMEBAABiWBMNAADEEHAAAIAYKmoAAECMGmNYEw0AAERQUQMAAGKoqAEAADHcwQEAAGKY4AAAADF8gwMAAMQQcAAAgBjVexdwAACACNVacwcHAACIoKIGAADEUFEDAABiVGtNwAEAACKY4AAAADF8gwMAAMQQcAAAgBg1TZM10QAAQAQTHAAAIIaAAwAAxLBFDQAAiOEODgAAEMMEBwAAiOEbHAAAIIaAAwAAxHAHBwAAiGGCAwAAxBBwAACAGLaoAQAAMdzBAQAAYpjgAAAAMXyDAwAAxKjWmjXRAABABBU1AAAghooaAAAQQ8ABAABiqKgBAAAx3MEBAABimOAAAAAxfIMDAADEcAcHAACIoaIGAADEUFEDAABiCDgAAEAMFTUAACCGOzgAAEAMExwAACBGjTGsiQYAACKoqAEAADFU1AAAgBjWRAMAADEEHAAAIIaKGgAAEMOSAQAAIIY10QAAQAwVNQAAIIaKGgAAEMMEBwAAiGFNNAAAEEPAAQAAYqioAQAAMSwZAAAAYlRrzR0cAAAgQrXWfm+tvb/phwAAADzQbzXGeN57/3jTLwEAAHiIMcbzmqbpfIzxyaYfAwAA8BDTNJ3Xer0+XywWFg0AAAD/a+v1+rwWi8UPY4yL3vvjTT8IAADg3xhjXFxdXX3fW2ttuVw+rqqnvfftTT8MAADgTYwxVvM8f3p6enrx14row8PDz3vvX23yYQAAAG9qjPHNycnJd6394wbOwcHBZ9M0fdl7f28zTwMAAHg9Y4w/Wmtfn5ycPH3x20tHPpfL5aOq+rb3/tF/+joAAIDXNMb4cbVafXF2dvbr339/KeC8sL+//0FVPem9f9hae9J7f/TOXwkAAPAKY4xfWmvP5nn+abFYPDs+Pv75Vf/7E1YhAeib8ShfAAAAAElFTkSuQmCC">
-              <div class="activity-home-title">{{ activityList[0].title }}</div>
+                <div class="activity-home-title">{{ item.title }}</div>
               </router-link>
-          </div>
+            </p>
             <div
               class="activity-img-home-more"
               @click="$router.push('/activity')">
@@ -172,6 +177,7 @@
                   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAABHNCSVQICAgIfAhkiAAABOdJREFUeJztnE162lYUht8jaJ1Z6QpCVhC6gpIVhEwSe2Qydkksb6B0Ayg29dhkhO2J8QrqrqB4BcU7wLOkBX8dCDnlz4C4iB/7nQHS5eh7jo7uOfceGQkSHJ/nJL00kQXlARBZjGzfgaKF0QLaYE0ZLTO79vfeNpOy1RY5eBBcZPTdP69NKiDyGJm5BhRtjCuZNezf7y99/03bkalDLESYyuHpazMKGMVFjH+PqEk0Dj5uX7oe2qkwld/Pdu1O5aFbY9GIljwrH/zy7rOrIZ0IE1TreWQniQsyiGhheu+Xdq7mHWouYYKgniVtAVCY1xDHNOjI9/2dVtwBYgsTVM8KSCdzB9RFIdqYvfdL7xpxTvfinBQcnQagi5UVBQht00Voa5zTZyAILjKkv/4B5OL82RJp0tl6NcvjfWph1liUiJnEmUqYDRAlYmpxJgqzQaJETCXO5OC7WaIA5HrX9CAPClOpnn5is0SJyPWubSxjb6WgelYAXbi3aZWwN+PmOSOFCYJ6lpT9tdLzFBeINl39NGqGPPpWSluw8aJAOAkMU5oRPw0QVOt5sInBabPQq8HEc9hjZCeJ2QMIbhE+Hb2goxeg35L8/9CI4Wvu85jgqF7EkhUG4fsftvueEEG1Xgb7NVk79N7/sFOLPg54TMLGAHS3akPfdRj+buH0X/u9MEH1rLCMQtOoGeg8dZTYGNkwvobcCyPuVq3YlDjiW43agzAfMmx3eSatBobtBsFFBiKPSX159N5yT08LD0DYkzA9Ii08AIOfl2vO6hBp4QXH57lHMf2fFiMTHJ/nPLrdTSwrzEe3m/OWvki2ihhZTyI/+cjHhWS5WOtKm48yacOeOxkKbk2U6W7VXGzP8EvbMyzt1LOkKbrK9Qx7bkH1VC4GG5UlJ43LrNzdrTQqS04ah1n5U4wZgzth0l/2nY0V2wZ3O7isUq23HAbgfevoMul6Shh8vV1Q2cV4QjdWOapfmdnScqVxTx9nD4UYSPrzKcaMxNqeGXPvV9s0zNT0EMnXV1cd0fJIpRLbbb02pFJNz9972xTcLtuWVUFw6++9bXq9T09xJqKnRa+0qVhbPjeRSIvQY7rPnoSJ6GnhQbgaKORsH/66IvQ5KpncT/AM79F7jfEtO++bjrvMm6ams/XjYGGr16Pwd5JmCN0clHbu6999KYEJJ0nYTKS+DmfEDrPkaRm89qEEbileg5Xp3IUxzmGWPC2D3gKQHjzIwhX/hLeaqUzaemIkn1Qbwx46lF37pZ0rCeetdKuKxOWoxq+RZQfrav8xpAmCW+tqZOVxpDC+v9MyLPEAmDSGFcdVG8cWqvzSu4bgcHFmLRfB4UPdbxMXtSrV06bBS7dmLRfB9UFp+8HNDBNLm9bZyguu3Zm1XATX1tmauF4/dSOX0l+v1t1zIlGcNHJFrLs4s4gCMZpF11GcWUWBmH3XlerpJ4OPcc5NGsHhQWl75lXSuRrShWoGP8QdY5EIbg0rJtqQDuE8xzrKrWL6IHFpHeXiigIOX3ohqCWflfcjdGNQXPpLLwYJjupFGeWkBRK6MVH+f1vNvCzkxTph/LkrLLo/QeizQc2Fhwyy8FcxkfpSEFbAyM8bqHvdcFeGGnSfNdbuVUzjCI7Pc3S7OYysZDlQBiM7eOsJ3YRr6tY2UxPRIpVqJvnyrv8Ag/T4dORsGVoAAAAASUVORK5CYII=">
               </div>
               更多活动</div>
+          </nav>
         </div>
       </div>
     </div>
@@ -420,7 +426,7 @@
       let tourData = await axios.get('/api/uccn/app/unauth/tour/shopList?page=1&limit=6');
       let tour = tourData.data.data;
       // 首页活动
-      const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/home');
+      const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/home?limit=5');
       let cc = data.data;
       cc.map(function(item){
         item.startTime = timestamp2DateNoTime(item.startTime);
@@ -557,7 +563,8 @@
   }
 
   .activity-img-home-more{
-    width: 20%;
+    flex-shrink: 0;
+    width: 65px;
     display: flex;
     text-align: center;
     flex-direction: column;
@@ -566,9 +573,8 @@
     height: 155px;
     justify-content: center;
     border-radius: 3px 0 0 3px;
-    position: absolute;
-    right: 0;
     color: #8F93A8;
+    margin-left: 10px;
   }
 
   .activity-img-home-add{
@@ -638,6 +644,22 @@
   }
 
   .home-page {
+    nav{
+      position: relative;
+      display: flex;
+      align-items: center;
+      overflow: auto;
+      p{
+        position: relative;
+        flex-shrink: 0;
+      }
+    }
+    /*chrome 和Safari*/
+    nav::-webkit-scrollbar { width: 0 !important }
+    /*IE 10+*/
+    nav { -ms-overflow-style: none; }
+    /*Firefox*/
+    nav { overflow: -moz-scrollbars-none; }
     background-color: #fff;
     padding: px2rem(88px) 0 0 0;
 

pages/tour.vue

@@ -216,7 +216,12 @@
       overflow: auto;
       /*border-bottom: 1px solid #eee;*/
     }
+    /*chrome 和Safari*/
     nav::-webkit-scrollbar { width: 0 !important }
+    /*IE 10+*/
+    nav { -ms-overflow-style: none; }
+    /*Firefox*/
+    nav { overflow: -moz-scrollbars-none; }
     .nav-sec-menu{
       border-bottom: 1px solid #eee;
       height: 51px;