sxc-frontend/miniprogram/components/SsService.vue

<template>
	<view class="service">
		<template v-if="globalStore.service" v-for="(item, index) in globalStore.service">
			<view class="service-item" :class="getItemClass(index)" @tap="loadService(item)">
				<view class="service-item-content">
					<view class="service-item-content-child">
						<view class="title">{{ item.categoryName }}</view>
						<view class="subject">{{ item.profileWap }}</view>
					</view>
				</view>
				<div v-if="index === 2" class="service-item-bg">
					<image class="service-item-image" mode="aspectFit" :src="getImageUrl(item.imgUrl)" />
				</div>
				<image v-else class="service-item-image" mode="aspectFit" :src="getImageUrl(item.imgUrl)" />
			</view>
		</template>
	</view>
</template>

<script>
import { useGlobalStore } from '../stores/global';

export default {
	data() {
		return {
			globalStore: useGlobalStore()
		};
	},
	methods: {
		getItemClass(index) {
			switch (index % 5) {
				case 0:
					return ' hover-scale';
				case 1:
					return ' hover-scale yellow right';
				case 2:
					return ' center';
				case 3:
					return ' hover-scale yellow bottom no-margin-bottom';
				case 4:
					return ' hover-scale right bottom no-margin-bottom';
			}
		},
		loadService(item) {
			this.$emit('loadService', item.id, item.categoryName, item.imgUrl)
		}
	}
};
</script>

<style scoped lang="scss">
.service {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	margin-bottom: 32rpx;

	.service-item {
		width: calc(50% - 14rpx);
		position: relative;
		height: 168rpx;
		border-radius: 40rpx;
		overflow: hidden;
		background: linear-gradient(180deg, #fafffd, #e1f5f8);
		box-shadow: 0 8rpx 40rpx 0 rgba(52, 149, 239, 0.4);
		margin-bottom: 32rpx;

		.service-item-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
			padding: 32rpx 24rpx;

			.service-item-content-child {
				position: absolute;
				width: calc(100% - 48rpx);

				.title {
					font-size: 28rpx;
					color: #101333;
					font-weight: bold;
				}

				.subject {
					font-size: 26rpx;
					color: #7e8aa2;
				}
			}
		}

		.service-item-image {
			position: absolute;
			bottom: 0;
			z-index: 1;
			width: 136rpx;
			height: 120rpx;
			right: 64rpx;
			opacity: 0.3;
		}

		&.yellow {
			background: linear-gradient(180deg, #ffffff, #f6f0ef);
		}

		&.right {
			text-align: right;

			.service-item-image {
				right: unset;
				left: 122rpx;
				left: 66rpx;
			}
		}

		&.bottom {
			.service-item-content {
				.service-item-content-child {
					position: absolute;
					bottom: 32rpx;
				}
			}
		}

		&.no-margin-bottom {
			margin-bottom: 0;
		}

		&.center {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 10;
			text-align: center;
			width: 240rpx;
			height: 240rpx;
			border-radius: 6rem;
			box-shadow: inset 0 8rpx 40rpx 0 rgba(52, 149, 239, 0.4);
			background: linear-gradient(90deg, #c2dff9, #c6e2fa);

			.service-item-content {
				width: 100%;
				padding: unset;

				.service-item-content-child {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.service-item-bg {
				position: absolute;
				top: 24rpx;
				left: 24rpx;
				right: 24rpx;
				bottom: 24rpx;
				border-radius: 160rpx;
				z-index: 1;
				background: linear-gradient(180deg, #ffffff, #e8ebff);
				box-shadow: 0 8rpx 40rpx 0 rgba(52, 149, 239, 0.4);
			}

			.service-item-image {
				top: 50%;
				left: 50%;
				right: unset;
				bottom: unset;
				width: 132rpx;
				height: 136rpx;
				transform: translate(-50%, -50%);
			}
		}
	}
}
</style>