Vue+Django 旅遊網專案 首頁前端實現

<template>

     <div>

         <!-- 導航 -->

         <van-cell

           icon="/static/home/hot/fire.png"

           title=" 熱門推薦 "

           title-style="text-align:left"

           value=" 全部榜單 "

           is-link />

         <!-- 列表 -->

         <div>

             <a href="#"

               v-for="item in dataList"

               :key="item.id">

                 <div>

                     <span></span>

                     <img :src="item.img" alt="">

                 </div>

                 <h5>{{ item.name }}</h5>

                 <div>

                     <span> ￥ {{ item.price }}</span> 起

                 </div>

             </a>

         </div>

     </div>

</template>

<script>

export default {

   data () {

     return {

       dataList: []

     }

   },

   created () {

     this.dataList = [

       { id: 1, img: '/static/home/hot/h1.jpg', name: ' 景點名稱 ', price: 65 },

       { id: 2, img: '/static/home/hot/h2.jpg', name: ' 景點名稱 ', price: 65 },

       { id: 3, img: '/static/home/hot/h3.jpg', name: ' 景點名稱 ', price: 65 },

       { id: 4, img: '/static/home/hot/h4.jpg', name: ' 景點名稱 ', price: 65 },

       { id: 5, img: '/static/home/hot/h5.jpg', name: ' 景點名稱 ', price: 65 }

     ]

   }

}

</script>

<style>

.home-hot-box {

   padding: 0 10px;

   .van-cell {

     padding: 10px 0;

   }

   .box-main {

     width: 100%;

     display: flex;

     padding-top: 10px;

     overflow-x: scroll;

   }

   .hot-item {

     display: flex;

     flex-direction: column;

     width: 100px;

     margin-right: 10px;

     padding-bottom: 10px;

     .img {

       position: relative;

       span {

         position: absolute;

         left: 0;

         top: 0;

         display: inline-block;

         width: 42px;

         height: 20px;

         z-index: 10;

       }

       img {

         width: 100px;

         height: 100px;

       }

     }

     h5 {

       color: #212121;

       padding: 2px 0;

       font-size: 12px;

       margin: 0;

     }

     .line-price {

       color: #212121;

       font-size: 12px;

       .price {

         color: #f50;

         font-size: 13px;

       }

     }

     &:nth-child(1) .img span {

       background: 外匯跟單gendan5.comurl(/static/home/hot/top1.png) no-repeat;

       background-size: 100% auto;

     }

     &:nth-child(2) .img span {

       background: url(/static/home/hot/top2.png) no-repeat;

       background-size: 100% auto;

     }

     &:nth-child(3) .img span {

       background: url(/static/home/hot/top3.png) no-repeat;

       background-size: 100% auto;

     }

   }

}

</style>