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

上週把router的部分完成了
这週来接续着做吧~

#首页製作

之前有提到首页包含

于是乎我们就开始来处理这些东西吧~

在上週元件的部分都已经建立好了
接着打开Index.vue档, 光速来把他会用到的元件都加入进去

<template>  <div>    Index    <!--加入元件-->    <Banner />    <Rooms />    <Footer />  </div></template><script>import Banner from "../components/Banner"; //引用Bannerimport Rooms from "../components/Rooms"; //引用Roomsimport Footer from "../components/Footer"; //引用Footerexport default {  name: "Index",  components: { Banner, Rooms, Footer }, //把引用的元件加入components  data: () => ({}),};</script>

来看看目前的 Index页面 长相

该出现的都有出现, 不错
接着可以开始来做画面了~

#引用Vuetify框架

开始做画面之前
让我引用一个强大的框架 - Vuetify
它可以让我在画面的建置变的更方便更快速 (因为本人没有学过很厉害的css技术只好套别人的)

引用方式很简单, 先看一下官方的Quick Start, 其中的Vue Cli install的部分
因为Vue Cli已经建立好, 所以直接跳第2步骤

//终端机输入这个指令就可以一键安装啰~vue add vuetify

(接着是漫长的等待安装...)

跑完之后, 会发现App.vue档被修改了
这时候请 ctrl+z 把程式码还原回去
之后外层div修改成v-app, 框架才会生效

//App.vue<template>  <v-app id="app">    <router-link to="/">Index</router-link>    <router-link to="/reservation">Reservation</router-link>    <router-view />  </v-app></template>

然后components资料夹中会多一个Helloworld.vue档, 可以删掉因为用不到

安装完就可以準备开始做画面了~

#Banner开发

首先从上往下第一个要做的就是Banner的部分

#Step 1

这里分成3个部分

最难的当然就是第一个所以先做它吧~

#Step 2

先把图档都引用进来:

<template>  <div class="d-flex justify-space-around">    <v-img :src="imgLogo"></v-img>    <v-img :src="imgRoom2"></v-img>    <div>不想－上班</div>  </div></template><script>import imgRoom2 from "../assets/房2.png"; //引用图片import imgLogo from "../assets/logo2.svg"; //引用图片export default {  name: "Index",  data: () => ({    //要放在data里面才能被template拿去用喔!!!    imgRoom2,    imgLogo,  }),};</script>

最外层div使用Vuetify的flex
justify-space-around让div内的3个元素可以平均分散 参考这边

#Step 3

执行之后发现图片Super大...

原来是忘了加上设计师的css:

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

正常了...

#Step 4

再来来加上图片中的文字 [I don't want to work] , 然后给它一个myTitle1套上设计师写好的属性

<v-img :src="imgRoom2" max-width="50%">  <div class="myTitle1">I don't want to work</div></v-img>

.myTitle1 {  font: Italic 4.8vw Rage;  letter-spacing: 10.4px;  color: #496146;  width: 690px;}

#Step 5

可以看到内容并没有垂直置中, 而且多的文字也被盖掉了
所以图片这层可以加几个class来修正一下

<v-img :src="imgRoom2" max-width="50%" class="myBanner d-flex align-center">  <div class="myTitle1">I don't want to work</div></v-img>

.myBanner {  overflow: visible;}

overflow: visible 使内容超出範围时可以正常显示
align-center 使内容垂直置中 参考这边

#Step 6

越来越成形了, 都是设计师的功劳xD
接着来改 [不想上班] 的部分, 一样套上设计师的css 哈哈
这里因为有限制它的宽度, 所以文字会自动换行, 最后就会呈现出垂直的文字内容~

<div class="myTitle2">不想－上班</div>

.myTitle2 {  width: 36px;  font-size: 36px;  letter-spacing: 0px;  color: #425752;  height: 352px;}

#Step 7

这里就很怪了, 设计师的css 并没有带出理想的效果
于是我就自行发挥, 利用flex来做出文字的分散 参考这边

<div class="myTitle2 d-flex align-content-space-between flex-wrap">  <span>不</span>  <span>想</span>  <span>－</span>  <span>上</span>  <span>班</span></div>

到这最难的第一个部分就完成了~

#Step 8

接着做"Slide"跟">>", 这里直接套class
然后最外层用一个div把三个部分都包住(因为template只接受一个节点在里面)

<div>  <div>    //I don't want to work图文区  </div>  <div class="slidetext">Slide</div>  <div class="slideicon">    <span>></span>    <span>></span>  </div></div>

.slidetext {  text-align: center;  font: Italic 27px Rage;  letter-spacing: 4.32px;  color: #425752;  opacity: 0.66;  margin-top: 6px;}.slideicon {  text-align: center;  font: Italic 27px Rage;  letter-spacing: 4.32px;  color: #425752;  opacity: 0.66;  transform: matrix(0, 1, -1, 0, 0, 0);}

#Step 9

这边会看到两个">"有点分的太开了, 所以我又自行发挥把它们两个靠近一点

.slideicon span:first-child {  margin-right: -9px;}

这里要注意的是margin-right而不是margin-bottom
因为它有经过transform属性转过角度(本来是往右转成往下)

#Step 10

然后眼尖的我有发现设计师设计的页面, 上方竟然留了一点空白 哈
于是我在最外层div加上class让它留白一下

<div class="main">  <div>    //I don't want to work图文区  </div>  <div class="slidetext">    //Slide  </div>  <div class="slideicon">    //>>  </div></div>

.main {  margin-top: 58px;}

做到这边Banner结束
大脑已经燃烧殆尽了...下次再继续吧...

附上这次进度的云端压缩档, 执行前记得先npm install
(更新: 有小改一点程式码, 以文章内容为準)

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

PS.真的该认真学一下css...