demo_41 关注作者页面实现

效果图

1.实现上下、下上联动

 2. 组件化关注的作者页面

 组件代码：list-author.vue

<template>

    <view class="listauthor">

        <view class="listauthor-image">

            <image class="listauthor-image-img" src="/static/logo.png" mode="aspectFill"></image>

        </view>

        <view class="listauthor-content">

            <view class="listauthor-content__title">mehaotian</view>

            <view class="listauthor-content__des">

                <view class="listauthor-content__des-label">前端工程师</view>

                <view class="listauthor-content__des-info">

                    <text class="listauthor-content__des-info-text">发帖 111</text>

                    <text class="listauthor-content__des-info-text">粉丝 1234</text>

                </view>

            </view>

        </view>

    </view>

</template>

<script>

    export default {

        data() {

            return {

            };

        }

    }

</script>

<style lang="scss" scoped>

    .listauthor {

        display: flex;

        padding: 10px 0;

        margin: 0 10px;

        border-radius: 5px;

        box-sizing: border-box;

        border-bottom: 1px #f5f5f5 solid;

        .listauthor-image {

            flex-shrink: 0;

             40px;

            height: 40px;

            overflow: hidden;

            .listauthor-image-img {

                 100%;

                height: 100%;

            }

        }

        .listauthor-content {

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            padding-left: 10px;

             100%;

            .listauthor-content__title {

                position: relative;

                padding-right: 30px;

                font-size: 14px;

                color: #333;

                font-weight: bold;

                line-height: 1.2;

            }

            .listauthor-content__des {

                display: flex;

                justify-content: space-between;

                font-size: 12px;

                .listauthor-content__des-label {

                    color: #666;

                }

                .listauthor-content__des-info {

                    color: #999;

                    line-height: 1.5;

                    .listauthor-content__des-info-text:first-child {

                        margin-right: 10px;

                    }

                }

            }

        }

    }

</style>