鸡汤来咯开发学习笔记-6

1.在index.vue里面增加main的样式

.main{
                        font-size: 50rpx;
                        font-weight: lighter;
                        width: 100%;
                        letter-spacing: 0.05em;  //当前字的间距，其中em是字体大小的倍数
                        line-height: 1.8em;//行间距
                        margin-top: 10rpx;  //元素的顶部外边距外边距区域
                        margin-bottom: 60rpx;//元素的底部外边距外边距区域
                    }

2.在index.vue中修改auther的样式

.author{
                        .line{
                            width: 70rpx;
                            height: 5rpx;
                            background: #f0f0f0;
                        }
                        .userinfo{
                            display: flex;
                            align-items: center;
                            font-size: 26rpx;
                            color: #888;
                            padding-top: 30rpx;
                            .avatar{
                                
                                height: 40rpx;
                                width: 40rpx;
                                
                                image{
                                    width: 100%;
                                    height: 100%;
                                }
                            
                             }
                             .name{
                                 padding-left: 12rpx;
                             }
                             .from{
                                 padding-left: 12rpx;
                             }
                        }
                    } 

3.在style里面的base-style.scss加入css的方法，再让index.vue里面的main引用，来限制文本行数

@mixin maxline($row:1) {
display: -webkit-box;
-webkit-line-clamp: $row;
-webkit-box-orient: vertical;
overflow: hidden;
}  

引用的时候放入main的样式区域

@include maxline(6);    

4.回到home-head.vue，修改其中content的样式高度为15vh,下面的pic的样式高度为100%（继承父级样式的15vh）//15vh是占比15%的意思，以便适应各种机型

5.在index.vue中修改以前写的俩个tab，把第一个加入v-if="true",另一个为v-else,使得显示一个，并为后面开发准备