用户投稿精力充沛, 大脑状况OK!!
接着开始做首页-Rooms吧~
#Rooms开发
可以看到设计师给的画面, 是用好多个RoomCard来组合成的
这里大方向就可以是这样:
v-for把RoomCard跑出来另外, 这里F2E有提供一段API是可以取得所有Room的资料
最后可以使用v-for指令来把RoomCard跑出来
决定好了就来开工吧~
#Step 1
先在Rooms里面引用RoomCard并放到画面上
这样RoomCard在修改时才能直接呈现出来:
//components/Rooms.vue<template> <div> <RoomCard /> </div></template><script>import RoomCard from "./RoomCard"; //引用RoomCardexport default { name: "Rooms", components: { RoomCard }, //在components中设定};</script>可以加上Vuetify的Grid帮助我们直接分成三等份 参考这边
然后用v-for先预设跑6个出来:
<div class="row"> <RoomCard class="col-4" v-for="item in 6" :key="item" /></div>
摁~效果不错~
#Step 2
接着Rooms标题来加上设计师的css就可以先放生了
<div class="roomstitle">ROOMS</div>.roomstitle { text-align: center; font: Italic 65px Rage; letter-spacing: 10.4px; color: #496146; margin-top: 56px;}
#Step 3
接着开启RoomCard.vue来改吧~
首先我会先做外观的部分再来搞内容
外观可以先分成左(房间名称)右(卡片本体)两个部分
接着卡片本体再分成
图解:
#Step 4
照刚刚的分法先组合起来:
<div> <div>Double Room</div> <v-card> <v-img src=""></v-img> <div>简介1</div> <div>简介2</div> <div>价钱1</div> <div>价钱2</div> </v-card></div>
#Step 5
再来就先来搞定左边的[房间标题]
结果不用没事, 一用就搞了我半小时
因为这里用了把文字转角度的方法, 但设计师给的css一直没办法成功做出理想的效果
上网查了一下有个很厉害的css, 分享给大家
于是乎我直接改成这种写法就成功了
<div class="d-flex justify-center"> <div class="roomcardtitle">Double Room</div> <v-card class="roomcard"> <v-img src=""></v-img> <div>简介1</div> <div>简介2</div> <div>价钱1</div> <div>价钱2</div> </v-card></div>.roomcardtitle { letter-spacing: 4.16px; color: #496146; writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(-180deg); text-align: right;}.roomcard { min-height: 300px;}另外我也加上flex水平置中, 然后先暂时让v-card高一点(比较好看)
#Step 6
再来我有发现设计师用了一个奇怪的字体...(没看过就说人家奇怪)
Adobe Hebrew Regular
于是乎又上网查了一下怎么引用这种字体(技能get!!)
分享一下引用字体的方式
//assets/font/font.css@font-face { //自己定义字体引用的名称, 叫aa的话之后引用就要呼叫aa font-family: "Adobe Hebrew Regular"; //url内放刚才下载的字体的位置 src: url("../font/Adobe\ Hebrew\ Regular.otf") format("woff"), url("../font/Adobe\ Hebrew\ Regular.otf") format("truetype"), url("../font/Adobe\ Hebrew\ Regular.otf") format("embedded-opentype");}<style>@import "./assets/font/font.css";</style>上面5个步骤跑完就可以在css里面用这个字体了, 像刚才的roomcardtitle可以加这行
.roomcardtitle { ... font-family: Adobe Hebrew Regular; //加上这行就可以用它的字体了~}#Step 7
再来可以开始做右边卡片本体的部分
图片先随便塞一个, 然后套上设计师的css, 顺便把卡片本体加上内距
<v-card class="roomcard"> <v-img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" class="roomcardimg" ></v-img> <div>简介1</div> <div>简介2</div> <div>价钱1</div> <div>价钱2</div></v-card>.roomcard { padding: 10px; max-width: 320px;}.roomcardimg { border: 1px solid #e3eae2; max-width: 300px; max-height: 300px;}加上图片之后整个气氛就嗨起来了!!
#Step 8
[简介1] 的部分, 一样分三块然后用flex - justify-space-between 的效果, 顺便加上外距
内容用 text-center 水平置中, 一样套上设计师的css
<div class="d-flex justify-space-between roomcardsubtitleblock"> <div class="text-center roomcardsubtitle"> <div>人数</div> <div>2~3</div> </div> <div class="text-center roomcardsubtitle"> <div>床</div> <div>Double</div> </div> <div class="text-center roomcardsubtitle"> <div>大小</div> <div> 26<span>m<sup>2</sup></span> </div> </div></div>.roomcardsubtitleblock { margin-left: 4px; margin-right: 4px;}.roomcardsubtitle div:nth-child(1) { text-align: center; font-size: 10px; letter-spacing: 0px; color: #496146; margin-top: 11px;}.roomcardsubtitle div:nth-child(2) { font-size: 24px; letter-spacing: 0px; color: #496146; margin-top: 9px; font-family: Adobe Hebrew Regular;}这边我也有学到一个新招 - [n次方的写法]
加上sup节点就可以呈现出n次方啰~!!超酷der~
//m的平方m<sup>2</sup>
#Step 9
[简介2]的部分就相对简单的多(因为只有一段文字xD), 直接套上css就完成了!!
顺便也加上了简介1&2中间的分隔线及上下外距~
<v-divider style="margin-top: 12px; margin-bottom: 12px;"></v-divider><div class="roomcardcontent"> wifi , 早餐 , 小吧檯 , 客房服务 , 电话 , 空调 , 冰箱 , 禁止吸烟 , 适合儿童 , 可带宠物</div>.roomcardcontent { text-align: center; font-size: 12px; letter-spacing: 0px; color: #496146; margin-left: 10px; margin-right: 10px; font-family: Microsoft JhengHei;}
顺带一提, 很多css因为做法不同或工具不同等等原因, 设计师大多没办法完整写出来, 例如内外距
如果要真实呈现设计师的作品, 就必须要靠国小数学自己加加减减来加上内外距
所以国小数学要学好!!没学好的赶快回去恶补!!
#Step 10
再来是[价格1]与[价格2], 这里大概是我处理最久的地方了
首先先套上设计师的css:
<div class="roomcardpriceh"> <div>假日</div> <div>$2500</div></div><div class="roomcardpricen"> <div>平日</div> <div>$2460</div></div>.roomcardpriceh div:nth-child(1) { font-size: 12px; color: #496146; font-family: Microsoft JhengHei;}.roomcardpriceh div:nth-child(2) { font-size: 18px; color: #a5bb94; font-family: Adobe Hebrew Regular;}.roomcardpricen div:nth-child(1) { font-size: 12px; color: #496146; font-family: Microsoft JhengHei;}.roomcardpricen div:nth-child(2) { font-size: 26px; color: #496146; font-family: Adobe Hebrew Regular; letter-spacing: 4.16px;}
#Step 11
接着剩下的条件很麻烦...也是花了最多时间的地方...
价格的标题必须对齐价格的值必须置中价格的值大小不同, 值也会变动导致宽度不同第一点标题必须对齐, 所以这里绝对是必须固定不能动
而价格的值必须置中, 所以左边距的写法就不能用了...
最后我想了一个很烂的解法...
用flex让两个元件置中(价格值 置中的问题解决)<div class="roomcardpriceh d-flex justify-center"> <div>假日</div> <div>$2500</div></div><div class="roomcardpriceh d-flex justify-center"> <div>平日</div> <div>$2460</div></div>.roomcardpriceh div:nth-child(1) { position: absolute; ...}.roomcardpricen div:nth-child(1) { position: absolute; ...}.roomcardpriceh div:nth-child(1) { ... padding-right: 176px;}.roomcardpricen div:nth-child(1) { ... padding-right: 176px;}<div class="align-self-center">假日</div><div class="align-self-center">平日</div>
如果有其他更好的解法欢迎提出来, 我实在没招了...
#Step 12
接下来帮[价格1]与[简介2]中间加个分隔线及上下外距
<div class="roomcardcontent"> wifi , 早餐 , 小吧檯 , 客房服务 , 电话 , 空调 , 冰箱 , 禁止吸烟 , 适合儿童 , 可带宠物</div><v-divider style="margin-top: 14px; margin-bottom: 14px;"></v-divider><div class="roomcardpriceh d-flex justify-center"> <div class="align-self-center">假日</div> <div>$2500</div></div>以及套上[价格2]外层的css (我一样有自己加上内外距)
.roomcardpricen { background: #e3eae2 0% 0% no-repeat padding-box; margin-top: 15px; margin-left: 0px; margin-right: 0px; padding-top: 20px; padding-bottom: 20px;}
这般如此, Rooms的外观的部分就完成了!!!!!!!(欢呼)
然后这週就到这吧XD 每次只要写css就觉得好痛苦阿...
附上这次进度的云端压缩档, 执行前记得先npm install
有需要改进或是任何意见建议欢迎下面留言~
目前都只有html+css
下週就要来处理Rooms的js啰!!
微信扫一扫打赏
支付宝扫一扫打赏
