yicangzongtai_app_240321/components/zw-service-list/zw-service-list.vue

<template>
	<view class="service-list-box">
		<template v-if="serviceObj.thirdApplications && serviceObj.thirdApplications.length > 0">
			<view class="service-list-title"> <text class="label-name skeleton-fillet">{{serviceObj.name}}</text>
			</view>
			<view class="service-list">
				<u-row gutter="14">
					<block v-for="(item , index) in serviceObj.thirdApplications">
						<u-col span="3" :key="`${item.thirdName}_${index}`">
							<view class="service-list-item" @click.stop="$openPage(item)">
								<image class="skeleton-fillet" :src="$getImgPath(item.icon)" mode="aspectFit"></image>
								<view class="skeleton-fillet service-name zw-two-row">{{item.thirdName}}</view>
							</view>
						</u-col>
					</block>
				</u-row>

			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "zw-service-list",
		props: {
			serviceObj: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.service-list-box {
		width: 100%;
		padding: 0 13rpx;
		border-bottom: 1rpx solid $zw-border-color;
		margin-bottom: 20rpx;

		.service-list-title {
			height: 90rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #1a1a1a;
			padding: 0 17rpx;
			display: flex;
			align-items: center;

			.label-name {
				display: inline-block;
				width: 100%;
				min-height: 50rpx;
			}
		}

		.service-list {
			width: 100%;
			padding: 0 0 30rpx;

			::v-deep .u-row {
				align-items: stretch !important;
			}

			.service-list-item {
				width: 100%;
				// height: 138rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 20rpx;

				image {
					width: 86rpx;
					height: 86rpx;
				}

				.service-name {
					width: 100%;
					margin-top: 15rpx;
					min-height: 30rpx;
					line-height: 1.4;
					// height: 100rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 300;
					text-align: center;
					color: #4d4d4d;
				}
			}
		}
	}
</style>