1

components/hr-sec/hr-sec.uvue

@@ -0,0 +1,38 @@
+<template>
+	<view class="hr-sec" :style="wrapStyle">
+		<view v-if="showBar" class="hr-sec-bar"></view>
+		<text class="hr-sec-t">{{ title }}</text>
+		<view class="hr-flex1"></view>
+		<text v-if="more != ''" class="hr-sec-more" @click="onMore">{{ more }}</text>
+	</view>
+</template>
+
+<script lang="uts" setup>
+	import { computed } from 'vue'
+
+	/**
+	 * 小节标题
+	 * 设计稿中由 .sec-t::before 伪元素绘制蓝色竖条，uvue 不支持伪元素，故拆为实体 view。
+	 */
+	const props = defineProps({
+		title : { type: String, default: '' },
+		/** 右侧箭头文字，如「全部 ›」 */
+		more : { type: String, default: '' },
+		/** 是否显示蓝色竖条 */
+		showBar : { type: Boolean, default: true },
+		/** 是否为首个小节（收紧上边距） */
+		first : { type: Boolean, default: false }
+	})
+
+	const emits = defineEmits<{
+		(e : 'more-click') : void
+	}>()
+
+	const wrapStyle = computed(() : string => {
+		return props.first ? 'margin-top:8rpx;margin-bottom:16rpx;' : 'margin-top:32rpx;margin-bottom:16rpx;'
+	})
+
+	function onMore() : void {
+		emits('more-click')
+	}
+</script>