https://codepen.io/hereiscasio/pen/WaqpQq

Used UI Component ( #1 )

#1 Sheets

今天只用一個新組件，因我假設一個新手要上手這個框架，它今天要做的就是持續鍛鍊已掌握的技術，也就是練習前面 Cinema Application 中所碰到的所有以及相關元件。然後希望這個很 Fashion 的 UI，能激起你的開發興趣

Discussion

<v-card 
    color="#75D4DA" class="pa-12" elevation='12'
    width="720" height="530" min-width='690'
>
    <v-row class='fill-height'>
        <v-col col='5'>
            <v-card-title ...>
            <v-card-actions ...>
        <v-col/>
        <v-col col='7'><v-col/>
    </v-row>

    <v-img ...>
</v-card>

把整張看成是一個 Cards，內部左右分兩半，比例為 5 : 7（ 靠 v-col 的屬性 cols，細節請見此 ），圖片則採絕對定位。從上可發現，v-card 內部的第一層並非絕對要放 Cards 相關組件（ e.g. v-card-title ）。<v-col col='7'><v-col/> 裡不放任何東西，只是純粹用於佔空間。圖面上唯一可以與使用者互動的就是按鈕，所以把 v-btn 放在 v-card-actions 裡

值得一提的是，之前所講的 FCC，在實際使用時，必須要能活用，例如這張卡片上一堆文字，請問哪段文字是屬於 v-card-title，哪段是 v-card-text？雖然沒有一定，但此處提供一個思路：於此處區分它們誰是誰似乎不重要（ 因圖面上文字共有三段 ），所以直接把它們全部歸納在 v- card-title 即可

<v-card-title 
    class="pr-0 white--text flex-column align-start"
>

    <h3 class="caption font-weight-bold">
        TRENDS & <br> SHOPPING GUIDES
        <v-sheet 
            class="mt-1 mb-8" width="20" height="2" color='white'>
        </v-sheet>
    </h3>
    <h1 v-html='TEXT_TITLE' class="display-1"></h1>
    <p 
        class="body-2 pt-8 font-weight-bold" 
        v-html='TEXT_DESCRIPTION'>
    </p>

</v-card-title>

可以發現，本範例有開始直接寫原生 html（ 即 h3, h1, p ），若你正開始練習 FCC，請別走火入魔硬要找出那幾段文字是否 "分別" 可靠特定的 Vuetify 組件實作，直接使用原生相當具有語意化的標籤就好了。flex-column 即 flex-direction: column，body-2, caption, font-weight-bold . . . 等只是裝飾文字的 class，請自行於官網的章節： Styles & animations 中找尋（ 你得習慣翻查官方文件，逐漸熟悉哪些資訊列在哪個章節，以便未來快速查找 ）

比較特別的是，圖面上那個細小的白色橫線，可靠 Vuetify 中、隸屬於 Low-level Component 的 v-sheet 予以實作，sheet 的概念實際上在 Google 的 Material Design 官方文件中有提到，你可搭配 Vuetify 的說明文件快速了解它到底是個什麼東西（ 簡單來說這是個相當廣義的組件，不像 calendar，button . . . 等相當特定 ）。

最後，因為 Vuetify 似乎不怎麼愛 position: absolute，所以通常若決定要靠這種方式排版，就可能需用上 inline style ）。inline style 不可怕，慎用、少用即可，本例圖片的排版就用了今天唯一一個 inline style