79 lines
2.0 KiB
Vue
79 lines
2.0 KiB
Vue
<!-- 页面：首页（Home） -->
|
||
<script setup lang="ts">
|
||
import { computed, onMounted } from 'vue'
|
||
import { storeToRefs } from 'pinia'
|
||
import { useHomeStore } from '@/stores/modules/home'
|
||
import type { BusinessType } from '@/types/api'
|
||
import HomeBanner from './cpns/HomeBanner.vue'
|
||
import HomeWelcome from './cpns/HomeWelcome.vue'
|
||
import HomeStats from './cpns/HomeStats.vue'
|
||
import HomeQuickEntries from './cpns/HomeQuickEntries.vue'
|
||
import HomeBusinessCards from './cpns/HomeBusinessCards.vue'
|
||
import HomeCaseShowcase from './cpns/HomeCaseShowcase.vue'
|
||
|
||
const homeStore = useHomeStore()
|
||
const { banners, stats, businessLines, featuredCases } = storeToRefs(homeStore)
|
||
|
||
const todaySummary = computed(() => `今天有${stats.value.inProgress}个项目正在进行`)
|
||
|
||
function onCategoryChange(category: BusinessType | 'all'): void {
|
||
void homeStore.fetchFeaturedCases(category)
|
||
}
|
||
|
||
onMounted(() => {
|
||
void homeStore.fetchHomeData()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="home">
|
||
<HomeBanner :banners="banners" />
|
||
|
||
<div class="container container--home home__dashboard">
|
||
<section class="home__dashboard-main">
|
||
<HomeWelcome :summary="todaySummary" />
|
||
<HomeStats :stats="stats" />
|
||
</section>
|
||
<HomeQuickEntries />
|
||
</div>
|
||
|
||
<div class="container container--home">
|
||
<HomeBusinessCards :lines="businessLines" />
|
||
</div>
|
||
|
||
<div class="container container--home">
|
||
<HomeCaseShowcase
|
||
:cases="featuredCases"
|
||
@category-change="onCategoryChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.home {
|
||
.flex(column, flex-start);
|
||
gap: 20px;
|
||
padding-top: 0;
|
||
padding-bottom: @spacing-xxl;
|
||
|
||
&__dashboard {
|
||
.flex(row, space-between, stretch);
|
||
gap: 60px;
|
||
}
|
||
|
||
&__dashboard-main {
|
||
.flex(row, space-between, center);
|
||
flex: 0 0 1091px;
|
||
width: 1091px;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
gap: @spacing-lg;
|
||
padding: 0 59px 0 105px;
|
||
border: 1px solid @home-card-border;
|
||
border-radius: @radius-lg;
|
||
background: @white;
|
||
}
|
||
}
|
||
</style>
|