football/components/page-component/app-index-cat/app-index-cat.vue

<template>
    <view class="app-index-cat">
        <view class="dir-left-nowrap cross-center cat-top">
            <view class="box-grow-1 main-center">
                <view class="cat-pic-url" v-if="catPicUrl">
                    <app-image :img-src="catPicUrl" width="29rpx" height="31rpx"></app-image>
                </view>
                <view class="cat-pic-name">{{name}}</view>
            </view>
            <view class="dir-left-nowrap cross-center more" @click="jump">
                <view>更多</view>
                <image class="arrow-right" src="../../../static/image/icon/arrow-right.png"></image>
            </view>
        </view>
        <view class="list">
            <app-goods-list :list="list" :list-style="listStyle"></app-goods-list>
        </view>
    </view>
</template>

<script>
    import appGoodsList from '../../page-component/app-goods-list/app-goods-list.vue';
    import routeJump from '../../../core/routeJump.js';

    export default {
        name: "app-index-cat",
        components: {
            'app-goods-list': appGoodsList,
        },
        props: {
            catPicUrl: String,
            name: String,
            listStyle: {
                type: String,
                default() {
                    return 1;
                }
            },
            list: Array,
            catId: Number
        },
        methods: {
            jump() {
                routeJump({
                    open_type: 'navigate',
                    page_url: '/pages/goods/list',
                    params: [
                        {
                            key: 'cat_id',
                            value: this.catId
                        }
                    ]
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .app-index-cat {

        .cat-top {
            height: #{80rpx};
            padding: 0 #{24rpx};
            font-size: #{$uni-font-size-general-one};
            background-color: #ffffff;
            position: relative;

            .cat-pic-url {
                // width: #{40rpx};
                // height: #{40rpx}; 
				width: #{29rpx};
                height: #{34rpx};
                margin-right: #{10rpx};
				display: flex;
				align-items: flex-end;
				justify-content: center;
            }

            .more {
                font-size: $uni-font-size-general-two;
                color: $uni-general-color-two;
                position: absolute;
                right: #{24rpx};
                top: 0;
                z-index: 10;
                height: 100%;

                .arrow-right {
                    width: #{12rpx};
                    height: #{24rpx};
                    display: block;
                    margin-left: #{12rpx};
                }
            }
        }
    }
	.main-center{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.cat-pic-name{
			font-size:34upx;
			font-family:Source Han Sans CN;
			font-weight:500;
			color:rgba(61,61,61,1);
		}
	}
</style>