mianxueyoupin/components/wanl-page-classify/wanl-page-classify.vue

<template>
	<!-- <view class="wanlpage-classify" :style="[pageData.style]">
		<view class="bg" :style="{backgroundImage: `url(${$wanlshop.oss(pageData.params.classifyBackground, 0, 50, 1, 'transparent', 'png')})`}">
			<view class="cu-list grid bg-transparent" :class="pageData.params.colStyle">
				<view class="cu-item" v-for="(item,index) in data" :key="index">
					<view class="name">
						<text class="text-lg" :class="item.color">{{item.name}}</text>
						<view v-if="item.tags" class="cu-tag round sm wanl-bg-orange">
							<text class="wlIcon-dot"></text> {{item.tags}}
						</view>
					</view>
					<view v-if="item.describe" class="text-sm wanl-gray">{{item.describe}}</view>
					<view class="goods margin-top-bj">
						<block v-for="(goods, keys) in item.list" :key="keys">
							<image class="radius" :src="$wanlshop.oss(goods.image, 70, 65)" @tap="onGoods(goods.id)" mode="aspectFill"/>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view> -->
	<view class="classifyContent">
		<view class="item">
			<image src="../../static/images/img/bg1.png" class="bgPic" mode="widthFix"></image>
			<view class="new">
				<view class="newTitle">新用户专享</view>
				<view class="newList">
					<view class="newItem" v-for="(item,index) in 2" :key="index">
						<image src="../../static/images/img/example.png" mode="aspectFill"></image>
						<view class="price">
							￥199+2红包
						</view>
						<view class="linePrice">
							￥299
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item" style="margin-left:20rpx;">
			<image src="../../static/images/img/bg2.png" class="bgPic" mode="widthFix"></image>
			<view class="new">
				<image src="../../static/images/img/vip.png" class="vip" mode="heightFix"></image>
				<view class="newList" style="margin-top: 18rpx;">
					<view class="newItem" v-for="(item,index) in 2" :key="index">
						<image src="../../static/images/img/example.png" mode="aspectFill"></image>
						<view class="price">
							￥199+2红包
						</view>
						<view class="linePrice">
							￥299
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "WanlPageClassify",
		props: {
			pageData: {
				type: Object,
				default () {
					return {
						name: '分类橱窗',
						type: 'classify',
						params: [],
						style: [],
						data: [],
						
					}
				}
			}
		},
		data() {
			return {
				data: []
			};
		},
		created() {
			this.loadData();
		},
		methods: {
			async loadData() {
				await uni.request({
					url: '/wanlshop/page/category',
					data: {
						col: this.pageData.params.colStyle,
						data: JSON.stringify(this.pageData.data)
					},
					success: res => {
						this.data = res.data;
					}
				});
			}
		}
	}
</script>
<style>
	.wanlpage-classify {overflow: hidden;}
	.wanlpage-classify .bg{background-repeat: no-repeat; background-size: 100% auto;}
	.wanlpage-classify .cu-list { text-align: left;}
	.wanlpage-classify .cu-list>.cu-item { padding: 25rpx; overflow: hidden; }
	.wanlpage-classify .cu-list>.cu-item .cu-tag { left: 0; top: -4rpx; margin-left: 10rpx; }
	.wanlpage-classify .cu-list>.cu-item .cu-tag text {font-size: 20rpx;color: rgba(255, 255, 255, 0.5);}
	.wanlpage-classify .cu-list>.cu-item .cu-tag.sm { padding-left: 0; }
	.wanlpage-classify .cu-list>.cu-item .name .text-lg { font-size: 31rpx; }
	.wanlpage-classify .cu-list>.cu-item .goods { display: flex; justify-content: space-between; align-items: center; }
	.wanlpage-classify .cu-list>.cu-item .goods>image { height: 130rpx; background-color: #f9f9f9;}
	.wanlpage-classify .cu-list>.cu-item .goods>image + image { margin-left: 25rpx; }
</style>
<style lang="scss" scoped>
.classifyContent{
	display: flex;
	padding: 0 24rpx;
	.item{
		flex:1;
		position: relative;
		background: #FFFFFF;
		.bgPic{
			width:100%;
			height:auto;
		}
		.new{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			// overflow: hidden;
			padding:20rpx 20rpx 20rpx 0;
			display: flex;
			flex-direction: column;
			
			.newTitle{
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 30rpx;
				margin-left: 20rpx;
				color: #FFFFFF;
			}
			.vip{
				height: 40rpx;
				width:auto;
				margin-left:20rpx;
			}
			.newList{
				display: flex;
				height: 100%;
				margin-top:10rpx;
				.newItem{
					display: flex;
					flex-direction: column;
					// width:50%;
					flex:1;
					height: 100%;
					background-color: #fff;
					border-radius: 10px;
					overflow: hidden;
					flex-shrink: 0;
					margin-left: 20rpx;
					padding: 10rpx 0;
					&>image{
						flex:1;
					}
					.price{
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #EB6100;
						margin:8rpx 0;
						text-align: center;
					}
					.linePrice{
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
						text-align: center;
						text-decoration-line: line-through;
					}
				}
			}
			image{
				
			}
		}
	}
}
</style>