2019 iT 邦幫忙鐵人賽

DAY 11

Modern Web

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 11 篇

[Day 11] Vue Quasar 打造旅遊網站系列 7 - Parallax、Breadcrumbs、Rating

2019鐵人賽 vue.js vue quasar

RenZhou

2018-10-25 23:51:58

3180 瀏覽

分享至

GitHub

Demo

今天完成後的畫面

首頁部分已經差不多了

剩下頁尾以及一些小區塊

因為元件都跟之前的文章有重複到

故在這邊就不實作會功能重複的區塊了

製作景點內頁

沒錯，我們要開始做從首頁點進去的 景點文章 啦

首先在我們 src/pages 下面多開一個 place 的文件夾，一樣也在裡面建一個Index.vue當作文章的主要頁面

Index.vue

因為也是第一層的網頁記得要用 q-page 喔

<template>
  <q-page>

  </q-page>
</template>

設置 Vue Router

多了其他頁面，就要到router中作設定才看得到喔

const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index') },
      
      //加上這行，並指定新的資料夾位置
      { path: 'place' , component: () => import('pages/Place')}
    ]
  }
]

之後到 http://localhost:8080/#/place 就看得到啦

置入 Parallax（視差）元件

這個元件實在有點難說明，直接餵狗翻出來是視差就先當是這樣吧

功能基本上就滾動捲軸時可以看到圖片的其他部分

可以參考官方的DEMO

Parallax

這個元件使用也非常的簡單

只有兩個屬性 src 跟 height 分別為用來置入圖片/影片 以及 設定高度

一樣要引入 QParallax 哦

    <q-parallax :src="localData.image"  height="400">
      <p>{{ localData.title }}</p>
    </q-parallax>

這裡就直接模擬從後端拿資料來套，變數上我習慣是用localData

export default {
  data(){
    return{
      localData: {
        image:'https://instagram.ftpe8-4.fna.fbcdn.net/vp/f93efc19ab7686509713585bf9187e12/5C53A410/t51.2885-15/e35/43140377_2151186321761409_76062690586049376_n.jpg',
        title : '令人讚嘆的的鬼斧神工 澎湖小門鯨魚洞'
      }
    }
  }
}
</script>

//由於預設的文字是黑的。這邊調整文字大小及顏色
<style lang="stylus">
  .q-parallax
    p
      font-size 48px
      color #fff
</style>

規劃底下的頁面排版

這邊參考其他網站基本上都是8格+4格這樣分

    <div class="row place-main">
      <div class="col-8">

      </div>
      <div class="col-4">
        
      </div>
    </div>

CSS一樣要補上左右 margin 5% 讓頁面看起來不會那麼滿

  .place-main 
    margin-left 5%
    margin-right 5%

設置左邊畫面-麵包屑

這邊要來用 Quasar 的 麵包屑（Breadcrumbs） 元件

Breadcrumbs

一樣的需要到quasar.conf.js引入

  components: [
    'QBreadcrumbs',
    'QBreadcrumbsEl'
  ]
}

然後把他塞到剛剛的layout內

<q-breadcrumbs
  separator=">"
  color="light"
>
  <q-breadcrumbs-el :label="localData.country" to="/" />
  <q-breadcrumbs-el :label="localData.locate" to="/" />
  <q-breadcrumbs-el :label="localData.title" to="/" />
</q-breadcrumbs>
<br>
<span class="title"> {{ localData.title }}</span>

這裡格式我們給他 國家 > 縣市 > 標題

順便補個標題一樣用CSS調整文字大小

    .title
      font-size 28px
      margin-top 20px

data裡記得補上

        country: '台灣',
        locate: '澎湖縣',

加上景點訊息及評分的排版

為了節省畫面的空間這裡一樣要切版

這裡再切成 8格+4格

<div class="row q-mt-lg">
  <div class="col-8">
  
  </div>
  <div class="col-4 info-right">

  </div>
</div>

由於左側欄要設為文字靠右對齊

因次也給他們class，然後用CSS控制‘對齊‘

  .info-right
      text-align right
      color #979797
      font-size 12px

加入景點訊息

這裡格式又是 icon+文字啦

那我們繼續把之前做的 LIcon 搬來用ＸＤ

import LIcon from 'src/components/LIcon.vue'

<div class="col-8 info-left">
  <l-icon class="q-mt-sm" :text="'景點編號：  ' + localData.id" :icon="'fas fa-tag'" :color="'grey'"/>
  <br>
  <l-icon class="q-mt-sm" :text="'建議停留：  ' + localData.stay_time + ' 小時'" :icon="'far fa-clock'" :color="'grey'"/>
  <br>
  <l-icon class="q-mt-sm" :text="'營業時間：  ' + localData.open_time" :icon="'fas fa-stopwatch'" :color="'grey'"/>
  <br>
  <l-icon class="q-mt-sm" :text="'地點位置：  ' + localData.address" :icon="'fas fa-map-marker-alt'" :color="'grey'"/>
</div>

一樣補上Data

   address: '881澎湖縣西嶼鄉11-12號',
   id: '12442',
   stay_time: '0.5',
   open_time: '24H',

加入評分

Quasar 同樣也有評分元件

Rating

同樣要引入

framework: {
  components: ['QRating']
}

屬性也不多，也是塞在剛剛的col-4裡面

<div class="col-4 info-right">
  <q-rating v-model="localData.rate" :max="5" color="pink-13" size="16px" disable />
  <span class="q-ml-sm">{{ localData.comment}}則評價</span>
</div>

max 最多有幾顆星星
v-model 綁定評分的數值
size 調整星星大小
disable 禁止操作，正常來講這邊也是可以直接做評分的操作

補上Data缺的資料～～

今天就大功告成啦

        rate: '4.5',
        comment: '82'

今天好像有點太多了，剩下留給明天吧 XD

今天改的Code

src/pages/Place/Index.vue

<template>
  <q-page>
    <q-parallax :src="localData.image"  height="400">
      <p>{{ localData.title }}</p>
    </q-parallax>

    <div class="row place-main">
      <div class="col-8 q-pa-sm">
        <q-breadcrumbs
          separator=">"
          color="light"
        >
          <q-breadcrumbs-el :label="localData.country" to="/" />
          <q-breadcrumbs-el :label="localData.locate" to="/" />
          <q-breadcrumbs-el :label="localData.title" to="/" />
        </q-breadcrumbs>
        <br>
        <span class="title"> {{ localData.title }}</span>

        <div class="row q-mt-lg">
          <div class="col-8">
            <l-icon class="q-mt-sm" :text="'景點編號：  ' + localData.id" :icon="'fas fa-tag'" :color="'grey'"/>
            <br>
            <l-icon class="q-mt-sm" :text="'建議停留：  ' + localData.stay_time + ' 小時'" :icon="'far fa-clock'" :color="'grey'"/>
            <br>
            <l-icon class="q-mt-sm" :text="'營業時間：  ' + localData.open_time" :icon="'fas fa-stopwatch'" :color="'grey'"/>
            <br>
            <l-icon class="q-mt-sm" :text="'地點位置：  ' + localData.address" :icon="'fas fa-map-marker-alt'" :color="'grey'"/>
          </div>
          <div class="col-4 info-right">
            <q-rating v-model="localData.rate" :max="5" color="pink-13" size="16px" disable />
            <span class="q-ml-sm">{{ localData.comment}}則評價</span>
          </div>
        </div>

      </div>
      <div class="col-4">

      </div>
    </div>

  </q-page>
</template>


<script>
import LIcon from 'src/components/LIcon.vue'
export default {
  data(){
    return{
      localData: {
        image:'https://instagram.ftpe8-4.fna.fbcdn.net/vp/f93efc19ab7686509713585bf9187e12/5C53A410/t51.2885-15/e35/43140377_2151186321761409_76062690586049376_n.jpg',
        title : '令人讚嘆的的鬼斧神工 澎湖小門鯨魚洞',
        country: '台灣',
        locate: '澎湖縣',
        address: '881澎湖縣西嶼鄉11-12號',
        id: '12442',
        stay_time: '0.5',
        open_time: '24H',
        rate: '4.5',
        comment: '82'
        
      }
    }
  },
  components:{
    LIcon
  }
}
</script>

<style lang="stylus">
  .q-parallax
    p
      font-size 48px
      color #fff
  .place-main 
    margin-left 10%
    margin-right 10%

    .title
      font-size 28px
      margin-top 20px
  
  .q-breadcrumbs-el
    font-size 14px

  .info-right
      text-align right
      color #979797
      font-size 12px

</style>