book-hi/pages-sell/components/detail/service-card.vue

<template>
	<view class="service-card">
		<view class="service-row" @click="onClick">
			<view class="icon-box">
				<image src="/pages-sell/static/goods/icon-down.png" class="service-icon" mode="aspectFit"></image>
			</view>
			<text class="service-label">可降</text>
			<text class="separator">|</text>
			<text class="service-val red">分享一人助力，可降 1.5 元</text>
			<u-icon name="arrow-right" size="24" color="#999" class="arrow"></u-icon>
		</view>
		<view class="service-row">
			<view class="icon-box">
				<image src="/pages-sell/static/goods/icon-fee.png" class="service-icon" mode="aspectFit"></image>
			</view>
			<text class="service-label">运费</text>
			<text class="separator">|</text>
			<text class="service-val green">全场满 5.8 元包邮（偏远地区除外）</text>
		</view>
		<view class="service-row">
			<view class="icon-box">
				<image src="/pages-sell/static/goods/icon-fire.png" class="service-icon" mode="aspectFit"></image>
			</view>
			<text class="service-label">活动</text>
			<text class="separator">|</text>
			<text class="service-val red">每满 48 元减 5 元</text>
		</view>
		<view class="service-row last" @click="openServicePopup">
			<view class="icon-box">
				<image src="/pages-sell/static/goods/icon-service.png" class="service-icon" mode="aspectFit"></image>
			</view>
			<text class="service-label">服务</text>
			<text class="separator">|</text>
			<text class="service-val">破损包赔 · 降价补差 · 24 小时发货</text>
			<u-icon name="arrow-right" size="24" color="#999" class="arrow"></u-icon>
		</view>
		<ServicePopup ref="servicePopup" />
	</view>
</template>

<script>
import ServicePopup from '@/pages-sell/components/service-popup/index.vue';

export default {
	name: 'ServiceCard',
	components: {
		ServicePopup
	},
	methods: {
		onClick() {
			this.$emit('click');
		},
		openServicePopup() {
			this.$refs.servicePopup.open();
		}
	}
}
</script>

<style lang="scss" scoped>
.service-card {
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 0 30rpx;
	margin-bottom: 20rpx;

	.service-row {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		font-size: 26rpx;
		position: relative;
		border-bottom: 1rpx solid #F5F5F5;

		&.last {
			border-bottom: none;
		}

		.icon-box {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.service-icon {
				width: 100%;
				height: 100%;
			}
		}

		.service-label {
			color: #333;
			font-weight: bold;
			width: 50rpx; // Fixed width for 2 characters to ensure alignment
			text-align: justify;
			text-align-last: justify;
		}

		.separator {
			color: #eee;
			margin: 0 10rpx;
		}

		.service-val {
			color: #666;
            flex: 1; // Allow text to take remaining space
            @include ellipsis;

			&.red {
				color: #D81A00;
			}
			
			&.green {
				color: #38C248;
			}
		}

		.arrow {
			position: absolute;
			right: 0;
		}
	}
}
</style>