[鼠年全马] W31 - Vue出一个旅馆预约平台(5)

iT邦铁人开赛啰~
但我还没做好开始的準备xD

我的题目是: 30天Vue出Google SSO
有兴趣的人可以去订阅~ 希望回馈一些技术上的建议更好xD
精益求精~

勤奋练习让每天的自己都比昨天更厉害!!

薪水也是

开始实作首页的最后一个部分-[Footer]吧

#Footer开发

一样我们先把它切分切块好

可以看到这里我切了三块

接着就可以先组合起来了!!组起来!!

//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

有需要改进或是任何意见建议欢迎下面留言~