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>
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69946337/viewspace-2844360/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 旅遊網站的設計與實現網站
- 閒雲旅遊專案開發-(第一篇:使用Element-ui實現主頁輪播圖)UI
- 前端黑科技:美團網頁首幀優化實踐前端網頁優化
- 實現不同頁面不同頁首
- Threejs實現滴滴官網首頁地球動畫JS動畫
- 前端黑科技:美團網頁首幀最佳化實踐前端網頁
- 前端部署腳手架專網專案實踐前端
- 接入[一言]的API實現網頁隨機首頁文字API網頁隨機
- vue前端專案工作流(首個專案總結)Vue前端
- 文旅夜遊專案如何吸引更多遊客
- 夜遊專案如何提升城市旅遊經濟
- bootstrap實現的線上教育網站首頁、頻道頁html模板boot網站HTML
- 關於黑馬旅遊網的實現 --- 分頁查詢功能,點選分頁碼不顯示資料
- 景點旅遊專案深入開發精品夜間旅遊文化藝術
- 如何打造經典文旅夜遊專案?
- 文旅夜遊專案有哪些優勢
- Python靜態網頁爬蟲專案實戰Python網頁爬蟲
- 前端黑科技:使用 JavaScript 實現網頁掃碼功能前端JavaScript網頁
- 前端頁面上實現表單提交檔案上傳功能前端
- 前端頁面水印生成實現前端
- Django 前端BootCSS 實現分頁Django前端bootCSS
- 旅遊景點如何打造具有特色的夜遊專案
- 新起典|夜間旅遊專案成功要素
- 【專案記錄】個人主頁設計和實現
- 鼎益豐隋廣義打造“天鼎旅遊”文旅專案新模式模式
- 221旅遊網
- Vue SPA專案 + Sentry 實現前端錯誤監控Vue前端
- [Gitlab]使用Webhook實現前端專案自動釋出GitlabWebHook前端
- 世界旅遊組織:2024年首份世界旅遊業晴雨表
- 四、Vue專案去哪兒網首頁推薦和週末遊元件並使用Axios獲取資料Vue元件iOS
- 夜遊燈光秀助力夜間旅遊專案發展
- 伺服器部署前端專案後,重新整理頁面出現404伺服器前端
- IHT釋出全球首個房產ATO專案,加速進入酒店和旅遊房產市場
- 實現首頁熱門最新商品查詢
- 結合 Google quicklink,react 專案實現頁面秒開GoUIReact
- 07#Web 實戰:實現 GitHub 個人主頁專案拖拽排序WebGithub排序
- 發展文旅夜遊專案有哪些好處
- 如何高質量發展夜遊文旅專案