junzitang/pages/classification/CateOne.vue

<template>
	<div  :class="['qn-page-' + theme]">
		<scroll-view scroll-y class="cate-ul" :style="{ height: 'calc(100vh - 112rpx - ' + (isBang ? '84px' : '50px') + ')'  }">
			<view class="cate-li" v-for="(item, index) in cate_list" :key="index" @click="goPage('/pagesT/productDetail/productDetail?id=' + item.id + '&name=' + item.title)">
				<view class="cate-name">
					<view class="cate-name-in">{{ item.title }}</view>
				</view>
				<image class="cate-img" :src="item.adImage || item.images" mode="aspectFill"></image>
			</view>
		</scroll-view>

	</div>
</template>

<script>
export default {
	data() {
		return {
			cate_list: []
		};
	},
	computed:{
		userId() {
			return this.$store.state.userStatus.id;
		}
	},
	created() {
		this.getAllCategory();
	},
	methods: {
		// 分类列表 getAllCategory
		 getAllCategory() {
			this.$u.api.getAllCategory({
				userCenterId: this.userId || 0
			}).then(data=>{
				this.cate_list = data.data;
			});
		}
	}
};
</script>

<style lang="scss">
.cate-ul {
	width: 750upx;
	height: calc(100vh - 112upx);
	.cate-li {
		background-color: #f5f5f5;
		margin: 30upx auto 0;
		width: 680upx;
		position: relative;
		.cate-img {
			display: block;
			width: 100%;
			height: 300upx;
		}
		.cate-name {
			position: absolute;
			bottom: 24upx;
			width: 400upx;
			left: 50%;
			transform: translateX(-200upx);
			text-align: center;
			z-index: 1;
			font-size: 28upx;
			font-weight: 600;
			height: 88upx;

			border: 2upx solid #fff;
			.cate-name-in {
				width: calc(100% - 8upx);
				height: calc(100% - 8upx);
				line-height: 80upx;
				margin: 4upx auto;
				background-color: rgba(255, 255, 255, 0.8);
			}
		}
	}
}
</style>