是時候來清這裡灰塵了
這兩週實在是過得水深火熱
接下來我會補齊這兩週事件
17週多半是在刻畫面,後期開始接api
18週就是大量的接api,跟補上還沒做的功能和畫面

老樣子！
我會用前後對照方式呈現(還好製作過程有截圖)

以下是大量產圖的17週：
申明：本週都是開發時方便用的色塊,美術部分都是在後面兩週補上

上一週先做好大廳空間
所以這週著重在個人空間上面

• 1 房間草圖

首先我也想做跟大廳一樣3D空間感
所以也是拿一個乾淨的3D圖來做底

背景上色

遇到的問題：因為他背景同色,我無法直接填滿某區塊顏色,所以就用了網站去圈選我要的區域後再填色
使用的工具網站：https://pixlr.com/tw/e/
ps(我做遊戲也是靠著這網站來解決圖片相關事情)
然後這篇有我使用的配色網：https://coolors.co/

接著我開始擺上我要用的功能-草圖

紅色圈圈處就是將來我要做的功能
這邊一一介紹：(按照我實作順序(重要程度))

• 書櫃：個人看板，類似於部落格,裡面會有查看看板,發文,預覽及留言功能
• 日記：房主才能使用,可以編輯文字和圖片,月曆可以查看哪些天有紀錄
• 電腦：聊天室,可以和另外六位室友私訊
• 照片：可以放三張照片當擺設
• 衣櫃：更換房間樣式

完成圖

• 2 部落格草圖
  文章預覽草圖：
  
  原本想坐旋轉木馬,花一早上,失敗了就改掉,改成熟悉的拉霸～
  
  以下是後來考慮的,我的後端夥伴說還是之前三個文章呈現就好
  完成圖-文章預覽畫面
  
  完成圖-文章發文(之後有改版)
  

• 3 部落格留言板
  文章瀏覽與留言板草圖：
  (文章附圖版草圖)
  
  完成圖
  
  (文章未附圖版草圖)
  
  完成圖
  
  文章瀏覽以及留言是參考臉書facebook的文章查看

• 4 日記
  草圖：
  
  完成圖：
  
  日記中的月曆是使用套件：vue2-datepicker
  參考文件：https://github.com/mengxiong10/vue2-datepicker/blob/master/README.zh-CN.md
  但我這邊在下週(18週)已經改成別的套件
  原因是這套件我研究很久都無法成功設定標記日期顏色
  而這款套件在網路上研究分享的資訊偏少所以最後改成vuejs-datepicker
  參考文件：https://www.npmjs.com/package/vuejs-datepicker
  這樣我就可以順利標記我想要的日期囉～
  之後串接完api有資料的日期會像以下照片中出現淺藍色標記：
  

• 5 聊天室
  草圖：
  
  左邊就會出現其他6位室友的頭像和名稱,右邊就會是聊天內容以及傳送訊息框

完成圖：

以上大致就是我17週做的事情
接著我會在18週紀錄我串接的坎坷之路
加上串接後的畫面也會更加完整～
歡迎大家提出建議給小妹
感謝收看!