vue饿了么（第二天）--Sticky footer & start星星组件 & flex浮悬窗小标题
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;
}
}