vue餓了麼（二）--Sticky footer & start星星元件 & flex浮懸窗小標題
阿新 • • 發佈：2018-11-28
1.Sticky footer佈局
1.何為Sticky footer佈局：不管內容區有多少內容，頁尾始終顯示在螢幕的最下方，當內容區域超過螢幕的高度時。頁尾會始終顯示在頁面的最底部。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;font-size: 30px;} .detail{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; } .detail-wrapper{ padding-bottom: 64px;//為底部留出空間，也可不加。 min-height: 100%;//內容區佔據整個包裹的100%，將底部擠下去了 } .detail-close{ position: relative; width: 32px; height: 32px; margin: -200px auto 0 auto;//調整底部位置。 clear: both; font-size: 32px; } </style> </head> <body style="width: 60%;margin: 0 auto;position: relative;"> <div class="detail"> <div class="detail-wrapper" clearfix> <div class="content"> <p>春江潮水連海平，海上明月共潮生。灩灩隨波千萬裡，何處春江無月明。春江潮水連海平，海上明月共潮生。灩灩隨波千萬裡，何處春江無月明。春江潮水連海平，海上明月共潮生。灩灩隨波千萬裡，何處春江無月明。春江潮水連海平，海上明月共潮生。灩灩隨波千萬裡，何處春江無月明。</p> </div> </div> <div class="detail-close"> <p style="text-align: center;">@wzy</p> </div> </div> </body> </html>
2.start星星元件
<template> <div class="star" :class='starType'> <span v-for='itemClass in itemClasses' :class='itemClass' class="star-item"></span> </div> </template> <script type="text/javascript"> const LENGTH=5; const CLS_ON='on'; const CLS_HALF='half'; const CLS_OFF='off'; export default { props: { size: { type: Number }, score: { type: Number } }, computed: { starType() { return 'star-'+this.size; }, itemClasses() { let result=[];//結果陣列 let score=Math.floor(this.score*2)/2;//0.5的倍數 let hasDecimal=score%1 !== 0;//說明有小數，有半星 let integer=Math.floor(score);//全星的個數 for(let i=0;i<integer;i++){ result.push(CLS_ON); } if(hasDecimal){ result.push(CLS_HALF); } while(result.length<LENGTH){ result.push(CLS_OFF); } return result; } } } </script> <style type="text/css" lang="stylus" rel="stylesheet/stylus"> @import '../../common/stylus/mixin'; .star { font-size: 0; .star-item { display: inline-block; background-repeat: no-repeat; } &.star-24 { .star-item { width: 10px; height: 10px; margin-right: 3px; background-size: 10px 10px; &.last-child { margin-right: 0; } &.on { bg-image('star24_on'); } &.half { bg-image('star24_half'); } &.off { bg-image('star24_off'); } } } &.star-36 { .star-item { width: 15px; height: 15px; margin-right: 6px; background-size: 15px 15px; &.last-child { margin-right: 0; } &.on { bg-image('star36_on'); } &.half { bg-image('star36_half'); } &.off { bg-image('star36_off'); } } } &.star-48 { .star-item { width: 20px; height: 20px; margin-right: 22px; background-size: 20px 20px; &.last-child { margin-right: 0; } &.on { bg-image('star48_on'); } &.half { bg-image('star48_half'); } &.off { bg-image('star48_off'); } } } } </style>
3.flex佈局小標題
<div class="title"> <div class="line"></div> <div class="text">優惠資訊</div> <div class="line"></div> </div> .title { display: flex; width: 80%; margin: 28px auto 24px auto; .line { flex: 1; position: relative; top: -6px; border-bottom: 1px solid rgba(255,255,255,0.2); } .text { padding: 0 12px; font-size: 14px; font-weight: 700; } }