caimei-applets-caimei/pages/seller/components/homeIndex/recommendFloor.vue

<template>
	<view>
		<view class="page-content clearfix">
			<view class="tui-group-title">
				<view class="tui-group-name">为您推荐</view>
                <view class="tui-group-tabs">海量货源,实时推荐</view>
			</view>
            <templateR :list="recommendProducts" :userIdentity="userIdentity" />
		</view>
	</view>
</template>

<script>
import templateR from './template-page/templateR.vue'
export default {
	name: 'recommendFloor',
	components: {
		templateR
	},
	props: {
		recommendProducts: {
			type: Array
		},
		pageType: {
			type: Number
		},
		userIdentity: {
			type: Number
		}
	},
	data() {
		return {
            
		}
	},
	created() {},
	watch: {
		recommendProducts: {
			handler: function (el) {//监听对象的变换使用 function，箭头函数容易出现this指向不正确
				this.recommendProducts = el
			},
			deep: true
		}
	},
	methods: {
		NavToDetailPage(page) {
			//跳转
			this.$api.navigateTo(
				`/pages/goods/good-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${
					page.title
				}`
			)
		}
	}
}
</script>

<style lang="scss">
.page-content {
	background-color: #F7F7F7;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0 24rpx;
}

.tui-group-title {
	width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100rpx;
    box-sizing: border-box;
    .tui-group-name {
    	font-size: $font-size-36;
        font-weight: bold;
        color: #333333;
    }
    .tui-group-tabs{
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 30rpx;
        font-size: $font-size-24;
        line-height: 100rpx;
        color: #999999;
    }
}
</style>