yicangzongtai_app_240321/components/aggregated/aggregated_2.vue

<template>
	<view class="aggregated-boxs" :style="{backgroundImage: `url(${themeVo.themeBanner})` }">
		<view class="aggregated-content">
		<!-- 	<view class="aggregated-themeName">
				{{themeVo.themeName}}
			</view> -->
			<view class="content-list">
				<u-waterfall v-model="themeModuleVoList">
					<template v-slot:left="{leftList}">
						<view class="list-item left-item" v-for="(item, index) in leftList" :key="`left_${index}`" @click.stop="openKongKim(item)">
							<image class="item-img" :src="item.moduleAdImage" mode="aspectFill"></image>
							<view class="info-box">
								<view class="info-title">
									<image class="info-icon" :src="item.moduleImage" mode="aspectFit"></image>
									<text class="info-name zw-one-row">{{item.moduleName}} </text>
								</view>
								<view class="info-remark zw-two-row">
									{{ item.remark }}
								</view>
								<view class="info-label" v-if="item.moduleLabelList && item.moduleLabelList.length > 0">
									<view class="label-item" v-for="(item , index) in item.moduleLabelList">
										{{item}}
									</view>
								</view>
								<view class="info-btn">
									<text class="info-btn-icon iconfont_yige">&#xe669;</text>呼叫代驾
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="list-item right-item" v-for="(item, index) in rightList" :key="`right_${index}`" @click.stop="openKongKim(item)">
							<image class="item-img" :src="item.moduleAdImage" mode="aspectFill"></image>
							<view class="info-box">
								<view class="info-title">
									<image class="info-icon" :src="item.moduleImage" mode="aspectFit"></image>
									<text class="info-name zw-one-row">{{item.moduleName}} </text>
								</view>
								<view class="info-remark zw-two-row">
									{{ item.remark }}
								</view>
								<view class="info-label" v-if="item.moduleLabelList && item.moduleLabelList.length > 0">
									<view class="label-item" v-for="(item , index) in item.moduleLabelList">
										{{item}}
									</view>
								</view>
								<view class="info-btn">
									<text class="info-btn-icon iconfont_yige">&#xe669;</text>呼叫代驾
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
		</view>
	</view>
</template>

<script>
	import Mixin from "./Mixin.js"
	export default {
		mixins: [Mixin],
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-waterfall {
		width: 100%;

		.u-column {
			width: 50%;
		}

		#u-left-column {
			padding-right: 10rpx;
		}

		#u-right-column {
			padding-left: 10rpx;
		}
	}

	.aggregated-boxs {
		width: 100%;
		min-height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% 577rpx;
		padding-top: 466rpx;

		.aggregated-content {
			width: 100%;
			min-height: calc(100vh - 466rpx);
			// border-radius: 80rpx 80rpx 0 0; 
			.aggregated-themeName {
				// border-radius: 80rpx 80rpx 0 0;
				background-color: #fff;
				width: 100%;
				height: 140rpx;
				padding: 0 30rpx;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #1a1a1a;
				line-height: 140rpx;
				border-bottom: 1rpx solid $zw-border-color;
			}
		}

		.content-list {
			width: 100%;
			padding: 30rpx;
			background-color: #fbfbfb;
			// background: linear-gradient(180deg, #fff,  #fbfbfb);
			.list-item {
				width: 100%;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 18rpx;
				overflow: hidden;

				.item-img {
					width: 100%;
					height: 240rpx;
					display: block;
				}

				.info-box {
					width: 100%;
					padding: 0 20rpx 30rpx;

					.info-title {
						width: 100%;
						height: 84rpx;
						display: flex;
						align-items: center;

						.info-icon {
							width: 55rpx;
							height: 55rpx;
							border-radius: 50%;
						}

						.info-name {
							width: calc(100% - 55rpx);
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							color: #1a1a1a;
							padding-left: 12rpx;
						}
					}

					.info-remark {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #4d4d4d;
						line-height: 1.4;
					}

					.info-label {
						display: flex;
						flex-direction: row;
						align-items: stretch;
						flex-wrap: wrap;
						padding: 10rpx 0 0;

						.label-item {
							width: calc((100% - 40rpx) / 3);
							height: 39rpx;
							margin-right: 20rpx;
							margin-bottom: 10rpx;
							background: #ededed;
							border-radius: 20rpx 20rpx 20rpx 0px;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 18rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							color: #333333;

							&:nth-child(3n) {
								margin-right: 0;
							}
						}

					}

					.info-btn {
						margin-top: 10rpx;
						width: 100%;
						height: 64rpx;
						background: linear-gradient(180deg, #fa6037, #feb26d);
						border-radius: 32rpx;

						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #ffffff;
						display: flex;
						justify-content: center;
						align-items: center;

						.info-btn-icon {
							margin-right: 5px;
						}
					}

				}

				// width: 50%;
				// width: calc(50% - 10rpx);
			}
		}
	}
</style>