Nuxt.js打造旅遊網站第2篇_首頁開發

頁面效果：

 

1.初始化默認佈局

nuxtjs提供了一個公共佈局組件layouts/default.vue，該佈局組件默認做用於全部頁面，因此咱們能夠在這裏加上一些公共樣式，在下一小結中還會導入公共組件。

替換layouts/default.vue代碼以下：

<template>
  <div>
    <!-- 內容佔位組件 -->
    <nuxt />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*{
  margin:0; 
  padding:0;
}
ul, li, ol{
  list-style:none;
}
a{
  text-decoration:none;
  color:inherit;
}
a:hover{

}
em,i{
  font-style: normal;
}
</style>

layouts/default.vue

 

2.新建公共組件

思路：

1.在components中新建須要複用的頭部組件和頁腳組件

2.在默認佈局中layouts/default.vue中導入公共組件

組件約定：公共組件不須要放到子文件夾中

下拉組件文檔：https://element.eleme.cn/#/zh-CN/component/dropdown#ji-chu-yong-fa

 

實現步驟

頭部組件

在components文件夾中新建頭部組件components/header.vue。

<template>
  <div class="container">
    <el-row type="flex" class="main" justify="space-between">
      <!-- logo -->
      <div class="logo">
        <nuxt-link to="/">
          <img src="http://157.122.54.189:9093/images/logo.jpg" alt />
        </nuxt-link>
      </div>

      <!-- 菜單 -->
      <el-row type="flex" class="navs">
        <nuxt-link to="/">首頁</nuxt-link>
        <nuxt-link to="/post">旅遊攻略</nuxt-link>
        <nuxt-link to="/hotel">酒店</nuxt-link>
        <nuxt-link to="/air">機票</nuxt-link>
      </el-row>

      <!-- 右側登陸註冊 -->
      <div class="right-login">
        <div v-if="false">
          <nuxt-link to="/user/login">登陸/註冊</nuxt-link>
        </div>

        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt="">
              托馬斯
              <i class="el-icon-arrow-down el-icon--right"></i>   <!-- 小箭頭 -->
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我的中心</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.container {
  box-shadow: 0 2px 2px #ddd;
}

.main {
  width: 1000px;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  
}

.logo {
  margin-right: 20px;
  img {
    width: 156px;
    height: 42px;
    margin-top: 9px;
  }
}

.navs {
  margin: 0 20px;
  flex: 1;/* 讓全部彈性盒模型對象的子元素都有相同的長度，且忽略它們內部的內容： */
  a {
    display: block;
    padding: 0 20px;
    height: 60px;
    box-sizing: border-box;

    &:hover {
      color: #409eff;
      border-bottom: 5px #409eff solid;
    }
  }

  /deep/ .nuxt-link-exact-active {    /* /deep/ 是爲了重置element-ui組件中的樣式*/
    background: #409eff;
    color: #fff;

    &:hover {
      color: #fff;
    }
  }
}

.el-dropdown-link{
  img{
    width: 36px;
    height: 36px;
    vertical-align: middle;
    border-radius: 50%;
  }
}
</style>

header.vue

 

在layouts/default.vue中導入頭部組件

<template>
  <div>
    <Header></Header>
    <!-- 內容的佔位符，相似router-view -->
    <nuxt />

  </div>
</template>

<script>
import Header from '@/components/header'
export default {
  // 註冊組件
  components: {
    Header
  }
}
</script>


<style>
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*{
  margin:0;
  padding:0;
}

ul, li, ol{
  list-style: none;
}

a{
  color:inherit;
  text-decoration: none;
}

em,i{
  font-style: normal;
}
</style>

default.vue

 

頁腳組件

在components文件夾中新建頭部組件components/footer.vue。

<template>
  <div class="footer-wrapper">
    <div class="footer">
      <el-row class="info-list">
        <el-col :span="6" :offset="1">
          <h5>閒雲旅遊網</h5>
          <p>上億旅行者共同打造的旅遊神器</p>
          <p>
            <span>60,000</span>多個全球旅遊目的地
          </p>
          <p>
            <span>60,000</span>個細分目的地新玩法
          </p>
          <p>
            <span>760,000,000</span>次攻略下載
          </p>
          <p>
            <span>38,000</span>家旅遊產品供應商
          </p>
        </el-col>

        <el-col :span="5">
          <h5>關於咱們</h5>
          <p>隱私政策 商標聲明</p>
          <p>服務協議 遊記協議</p>
          <p>商城平臺服務協議</p>
          <p>網絡信息侵權通知指引</p>
          <p>閒雲旅遊旅遊網服務監督員</p>
          <p>網站地圖加入閒雲旅遊</p>
        </el-col>

        <el-col :span="5">
          <h5>旅行服務</h5>
          <p>旅遊攻略 酒店預訂</p>
          <p>旅遊特價 國際租車</p>
          <p>旅遊問答 旅遊保險</p>
          <p>旅遊指南 訂火車票</p>
          <p>旅遊資訊 APP下載</p>
        </el-col>

        <el-col :span="6" class="scan">
          <p>
            <img src="http://157.122.54.189:9093/images/1556522965.png" alt />
          </p>關注咱們
        </el-col>
      </el-row>

      <div class="licence">
        京ICP備08001421號 京公網安備110108007702 Copyright © 2016-2019 博學谷 All Rights Reserved
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
  .footer-wrapper{
    background: #333;
    color: #ccc;
    min-width: 1000px;
  }
  
  .footer{
    padding-top: 30px;
    margin: 0 auto;
    width: 1000px;
  }

  .info-list{
    h5{
      font-weight: normal;
      font-size: 16px;
      margin-bottom: 10px;
    }

    p{
      font-size: 12px;
      line-height: 1.8;
      span{
        color: skyblue;
        font-weight: bold;
        font-style: italic;
      } 
    }
  }

  .scan{
    text-align: center;

    img{
      width: 140px;
      height: 140px;
    }

    font-size: 12px;
  }
  .licence{
    border-top: 1px #666 solid;
    margin-top: 20px;
    padding: 50px 0;
    text-align: center;
    font-size: 12px;
  }
</style>

footer.vue

在layouts/default.vue中導入頁腳組件

<template>
  <div>
    <Header></Header>
    <!-- 內容的佔位符，相似router-view -->
    <nuxt />
    <Footer></Footer>

  </div>
</template>

<script>
import Header from '@/components/header'
import Footer from '@/components/footer'
export default {
  // 註冊組件
  components: {
    Header,
    Footer
  }
}
</script>

 

總結：

1. layouts/default.vue是默認的佈局組件，會做用於任何頁面。

2. 在layouts/default.vue中導入全局的頭部組件和頁腳組件

 

3.首頁輪播圖和TAB欄

把pages/index.vue內容替換成如下代碼：

<template>
  <div class="container">
    <!-- 輪播圖 -->
    <el-carousel :interval="3000" arrow="hover">
      <el-carousel-item v-for="(item,index) in banners" :key="index">
        <div
          class="banner-image"
          :style="`
        background: url(${$axios.defaults.baseURL + item.url}) center center no-repeat;
        background-size:contain contain;
        `"
        ></div>
      </el-carousel-item>
    </el-carousel>

    <!-- 搜索框 -->
    <div class="banner-content">
      <div class="search-bar">
        <!-- tab欄 -->
        <el-row type="flex" class="search-tab">
          <span
            v-for="(item, index) in tabs"
            :key="index"
            :class="{active: currentTab === index}"
            @click="handleChangeTab(index)"
          >
            <i>{{item.name}}</i>
          </span>
        </el-row>

        <!-- 輸入框 -->
        <el-row type="flex" align="middle" class="search-input">
          <input :placeholder="tabs[currentTab].placeholder" />
          <i class="el-icon-search"></i>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // data是一個函數，返回一個對象
  data() {
    return {
      banners: [],
      currentTab: 0,
      // tab欄的數據
      tabs: [
        { name: "攻略", placeholder: "搜索城市" },
        { name: "酒店", placeholder: "請輸入搜索酒店的城市" },
        { name: "機票", placeholder: "", pageUrl: "/air" }
      ]
    };
  },
  methods: {
    // tab欄切換
    handleChangeTab(index) {
      // 若是點擊的是機票,跳轉到機票頁面
      if (index === 2) {
        this.$router.push("/air");
      }

      // 修改當前高亮顯示
      this.currentTab = index;
    }
  },

  // 頁面加載時自動執行的生命週期函數
  mounted() {
    // 這裏能夠使用this.$axios是由於框架已經自動幫咱們把axios綁定到原型上了
    // 手動將axios綁定到原型上的方法：Vue.prototype.$axios = axios
    this.$axios({
      url: "/scenics/banners",
      method: "GET"
    }).then(res => {
      const { data } = res.data;
      this.banners = data;
    });
  }
};
</script>

<style lang="less" scoped>
.container {
  min-width: 1000px;
  margin: 0 auto;
  position: relative; /* 相對定位 */

  /deep/ .el-carousel__container {
    height: 700px;
  }
  .banner-image {
    width: 100%;
    height: 100%;
  }

  .banner-content {
    z-index: 9;
    width: 1000px;
    position: absolute;
    left: 50%;
    top: 45%;
    margin-left: -500px;
    border-top: 1px transparent solid;

    .search-bar {
      width: 552px;
      margin: 0 auto;
    }

    .search-tab {
      .active {
        i {
          color: #333;
        }
        &::after {
          background: #eee;
        }
      }

      span{
        width: 82px;
        height: 36px;
        display: block;
        position: relative;
        margin-right: 8px;
        cursor: pointer;
        
        i{
          position: absolute;
          z-index: 2;
          display: block;
          width: 100%;
          height: 100%;
          line-height: 30px;
          text-align: center;
          color: #fff;
        }

        &::after{
          position: absolute;
          left: 0;
          top: 0;
          display: block;
          content: "";
          width: 100%;
          height: 100%;
          border: 1px rgba(255, 255, 255, .2) solid;
          border-bottom: none;
          transform: scale(1.1,1.3) perspective(.7em) rotateX(2.2deg);
          transform-origin: bottom left;
          background: rgba(0, 0, 0, .5);
          border-radius: 1px 2px 0 0;
          box-sizing: border-box;
        }
      }
    }

    .search-input{
      width: 550px;
      height: 46px;
      background: #ffffff;
      border-radius: 0 4px 4px 4px;
      border: 1px rgba(255, 255, 255, .2) solid;
      border-top: none;
      box-sizing: unset;

      input{
        flex: 1;
        height: 20px;
        padding: 13px 15px;
        outline: none;
        border: 0;
        font-size: 16px;
      }

      .el-icon-search{
        cursor: pointer;
        font-size: 22px;
        padding: 0 10px;
        font-weight: bold;
      }
    }
  }
}
</style>