iT邦鐵人開賽囉~
但我還沒做好開始的準備xD

我的題目是: 30天Vue出Google SSO
有興趣的人可以去訂閱~ 希望回饋一些技術上的建議更好xD
精益求精~

勤奮練習讓每天的自己都比昨天更厲害!!

薪水也是

開始實作首頁的最後一個部分-[Footer]吧

#Footer開發

一樣我們先把它切分切塊好

可以看到這裡我切了三塊

• Logo
• 分隔線
• 聯絡方式

接著就可以先組合起來了!!組起來!!

//Footer.vue
<div>
  <div>Logo</div>
  <div>分隔線</div>
  <div>聯絡方式</div>
</div>

#Step 1

從[Logo]開始吧~
這邊在Banner的時候就做過了, 所以ctrl+c & ctrl+v

<v-img :src="imgLogo" max-width="57" max-height="54"></v-img>

<script>
import imgLogo from "../assets/logo2.svg";
export default {
  name: "Footer",
  data: () => ({
    imgLogo,
  }),
};
</script>

#Step 2

[分隔線]的部分就用Vuetify內建的v-divider,
而且還可以設定垂直屬性，直接幫你變垂直
順便加上設計師的css

<v-divider vertical class="footerdivider"></v-divider>

.footerdivider {
  margin-left: 35px;
  margin-right: 35px;
  border-width: 1px;
  background-color: #e3eae2;
  height: 35px;
}

#Step 3

接著最外層div加上flex並靠右, 然後加個內距及背景

<div class="main d-flex justify-end">
  //Footer內容
</div>

.main {
  background: #425752 0% 0% no-repeat padding-box;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 120px;
}

因為已經有flex, 就可以順便把[分隔線]加個垂直置中

<v-divider vertical class="footerdivider align-self-center"></v-divider>

可以看一下目前長這樣

#Step 4

接著[聯絡方式]的部分可以切細一點分成3行, 每行由一個icon和一個文字組合
這裡也是用Vuetify內建的, 並套上設計師的css及自己算的外距

<div>
  <div class="footercontact">
    <v-icon dark size="15">mdi-phone</v-icon>
    <span>07-536-0000</span>
  </div>
  <div class="footercontact">
    <v-icon dark size="15">mdi-map-marker</v-icon>
    <span>香港銅鑼灣興發街1號</span>
  </div>
  <div class="footercontact">
    <v-icon dark size="15">mdi-instagram</v-icon>
    <span>I_dont_wank_to_work</span>
  </div>
</div>

.footercontact {
  margin-bottom: 7px;
}
.footercontact:last-child {
  margin-bottom: 0px;
}
.footercontact i {
  margin-right: 10px;
}
.footercontact span {
  letter-spacing: 0px;
  color: #ffffff;
  font-size: 12px;  
  font-family: Segoe UI Regular;
}

#Step 5

到這裡其實就已經完成了
但可以看到聯絡資訊的組合其實蠻重複的
這個可以簡化掉, 並且把資料放入data引用

<div
  class="footercontact"
  v-for="(item, index) in contactInfo"
  :key="index">
  <v-icon dark size="15">mdi-{{ item.icon }}</v-icon>
  <span>{{ item.value }}</span>
</div>

data: () => ({
  ...,
  contactInfo: [
    {
      icon: "phone",
      value: "07-536-0000",
    },
    {
      icon: "map-marker",
      value: "香港銅鑼灣興發街1號",
    },
    {
      icon: "instagram",
      value: "I_dont_wank_to_work",
    },
  ],
}),

如此一來就只需要寫一個div就好, 日後維護只要改data即可

今天的實作比起前面幾篇簡單許多, 鬆了一口氣...
附上這次進度的雲端壓縮檔, 執行前記得先npm install

有需要改進或是任何意見建議歡迎下面留言~