update customer charts style

src/pages/customer/component/CustomerChartSummary.vue

@@ -1,8 +1,14 @@
 <template>
-	<div v-for="item in summaryList" :key="item.label" class="summary-item">
-		<span v-text="item.label" />
-		<strong v-text="item.value" />
-	</div>
+	<section class="summary">
+		<div
+			v-for="item in summaryList"
+			:key="item.label"
+			class="item"
+		>
+			<span v-text="item.label" />
+			<strong v-text="item.value" />
+		</div>
+	</section>
 </template>
 
 <script setup lang="ts">
@@ -44,10 +50,6 @@ const summaryList = computed<SummaryItem[]>(() => [
 		label: "本月登记",
 		value: `${monthRecordList.value.length} 次`
 	},
-	{
-		label: "转介绍",
-		value: `${props.customer.invitedCount || 0} 人`
-	},
 	{
 		label: "最近登记",
 		value: getRecordEventName(monthRecordList.value[0]) || "暂无"
@@ -98,7 +100,6 @@ function getRecordEventName(record?: StoreEventRecordCalendarView): string {
 	if (!record) {
 		return "";
 	}
-
 	return record.eventId ? eventNameMap.value.get(record.eventId) || "未知事件" : "未知事件";
 }
 
@@ -122,3 +123,51 @@ function addDays(date: Date, days: number): Date {
 	return value;
 }
 </script>
+
+<style scoped lang="less">
+.summary {
+	gap: .75rem;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+
+	.item {
+		padding: .875rem .625rem;
+		display: flex;
+		min-width: 0;
+		background: rgba(255, 255, 255, .92);
+		box-shadow: var(--td-shadow-1);
+		align-items: center;
+		border-radius: 1rem;
+		flex-direction: column;
+
+		span {
+			color: #52607a;
+			font-size: .75rem;
+		}
+
+		strong {
+			margin-top: .375rem;
+			color: #0f172a;
+			font-size: 1.125rem;
+			font-weight: 700;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.summary {
+		.item {
+			background: rgba(15, 23, 42, .88);
+			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+			span {
+				color: #94a3b8;
+			}
+
+			strong {
+				color: #e2e8f0;
+			}
+		}
+	}
+}
+</style>

src/pages/customer/component/CustomerEventRecordCalendarSection.vue

@@ -137,10 +137,6 @@ function addDays(date: Date, days: number): Date {
 </script>
 
 <style scoped lang="less">
-.calendar-section {
-	margin: 0 1rem;
-}
-
 :global(html.theme-dark) {
 	.calendar-section {
 		background: rgba(15, 23, 42, .88);

src/pages/customer/component/CustomerEventStructureChart.vue

@@ -130,7 +130,6 @@ function getDateEnd(dateText: string): Date {
 
 <style scoped lang="less">
 .chart-section {
-	margin: 0 1rem;
 	padding: 1rem;
 	background: rgba(255, 255, 255, .92);
 	box-shadow: var(--td-shadow-1);

src/pages/customer/component/CustomerRecordTrendChart.vue

@@ -120,7 +120,6 @@ function getDateEnd(dateText: string): Date {
 
 <style scoped lang="less">
 .chart-section {
-	margin: 0 1rem;
 	padding: 1rem;
 	background: rgba(255, 255, 255, .92);
 	box-shadow: var(--td-shadow-1);