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

1.common-style.css里面加入image的公共样式，来锁定每个图片的大小

image{
width: 100rpx;
height: 100rpx;
 }

2.在auther里面加入共12人看过，让用户点入详情页能查看看过的人数，并新增一个容器outer，把下面显示行的信息放在里面

    <view class="outer">
        <view class="userinfo">
            <view class="avatar">
                <image src="../../static/images/self.png" mode="aspectFill"></image>
            </view>
            <view class="name">豚豚</view>
            <view class="from">摘自：tt胡说</view>
        </view>

        <view class="number">共12人看过</view>
    </view>

加入其中的属性样式

.outer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .number{
            font-size: 26rpx;
            color: #999;
        }

3.把index.vue中的content的view改为navigater，加入url，使得可以点击跳转到详情页

<navigator url="/pages/detail/detail" class="content">
                        <soup-tab-group></soup-tab-group>
                        <soup-text-content maxline=5></soup-text-content>
                        
</navigator>

3.在number中加入参数判断，使得首页不显示，而详情页可以显示number

<view class="number" v-if="lookState">共12人看过</view>

样式

lookState:{
            type:Boolean,
            default:false
        }

然后在detail页面中进行传值为真，则显示

<soup-text-content :lookState="true"></soup-text-content>   //传值bool型所以要绑定:

4.改变详情页的间距间隔样式
加入一个新容器，可以整体更改

<view class="soupDetail">
        <soup-tab-group></soup-tab-group>
        <soup-text-content :lookState="true"></soup-text-content>
        </view>

修改样式

.soupDetail{
    padding:  50rpx 30rpx;
    border-bottom: 12rpx solid #f7f7f7;
}