四十六 商品分类内容布局

list.vue

<template>
        <view>
                <Lines />
                <view class="list">
                        <!-- 左侧 -->
                        <scroll-view scroll-y="true" class="left-list">
                                <view v-for="item in 50">
                                        <view class="left-item">
                                                {{item}}
                                        </view>
                                </view>
                        </scroll-view>

                        <!-- 右侧 -->
                        <scroll-view scroll-y="true" class="right-list">
                                <view class="right-item" v-for="item in 4">
                                        <view class="right-title">
                                                家访
                                        </view>
                                        <view class="right-content" >
                                                <view class="right-list-item" v-for="i in 15">
                                                        <image class="right-img" src="../../static/img/hot.png" mode=""></image>
                                                        <view class="right-name">
                                                                毛巾
                                                        </view>
                                                </view>
                                        </view>
                                </view>

                        </scroll-view>
                </view>
        </view>
</template>

<script>
        import Lines from '@/components/common/lines.vue'
        export default {
                components: {
                        Lines
                },
                // 点击顶栏跳转到搜索页面
                onNavigationBarSearchInputClicked() {
                        uni.navigateTo({
                                url: '../search/search'

                        })
                }
        }
</script>

<style>
        .list {
                display: flex;
        }

        .left-list {
                width: 300rpx;
                background-color: #F7F7F7;
        }

        .left-item {
                height: 60rpx;
                border-bottom: 2rpx solid #FFFFFF;
        }

        .active-item {
                border-left: 4rpx solid #49BDFB;
                background-color: #FFFFFF;
        }

        .right-item {
                padding-left: 20rpx;
        }

        .right-title {
                font-weight: bold;
        }

        .right-img {
                width: 100rpx;
                height: 100rpx;
        }
        .right-content{
                display: flex;
                flex-wrap: wrap;
        }
        .right-list-item{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-left: 4rpx;
        }
</style>