📦 村社乡源树基础页

src/components/theme/Theme.ts

@@ -3,11 +3,16 @@ import type { ThemeConfig } from "./ThemeDefine";
 /** 默认主题配置 */
 export const DefaultTheme : ThemeConfig = {
   varOverrides: {
-    spaceSize: {
+    space: {
       xs: '10rpx',
       sm: '15rpx',
       md: '20rpx',
       lg: '30rpx',
+      xl: '40rpx',
+      '2xl': '50rpx',
+      '3xl': '60rpx',
+      '4xl': '70rpx',
+      '5xl': '80rpx',
     },
     fontSize: {
       mini: 22,

src/pages/home/village/components/VillageTree.vue

@@ -0,0 +1,7 @@
+<template>
+  <canvas canvas-id="villageTree" style="width: 100%; height: 200px;" />
+</template>
+
+<script setup lang="ts">
+
+</script>

src/pages/home/village/index.vue

@@ -27,5 +27,5 @@ import { ref } from 'vue';
 import Card from './introd/card.vue';
 import Tree from './introd/tree.vue';
 
-const tab = ref('card');
+const tab = ref('tree');
 </script>

src/pages/home/village/introd/card.vue

@@ -219,7 +219,6 @@ import GridItem from '@/components/layout/grid/GridItem.vue';
 import MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
 import MasonryGridItem from '@/components/layout/masonry/MasonryGridItem.vue';
 import IndexCommonImageItem from '@/common/components/parts/IndexCommonImageItem.vue';
-import Width from '@/components/layout/space/Width.vue';
 
 const villageInfoLoader = useSimpleDataLoader(async () => {
   return {

src/pages/home/village/introd/tree.vue

@@ -1,19 +1,166 @@
 <template>
   <FlexCol>
 
+    <FlexCol :margin="[20,0]">
+      <Text textAlign="center" text="一人添果，全村增光；乡源树茂，故土名扬" fontConfig="primaryTitle" fontSize="35rpx"  />
+    </FlexCol>
 
-    <HomeTitle title="排行榜" />
+    <VillageTree />
 
-    <HomeTitle title="魅力乡源" />
+    <FlexCol>
 
 
+      <FlexRow center gap="gap.md">
+        <Icon icon="https://xy.wenlvti.net/app_static/images/village/IconLight.png" :size="50" />
+        <Text text="乡源光 30%" fontConfig="contentText" fontSize="30rpx" color="#E79412" />
+      </FlexRow>
+      <Height height="space.md" />
+      <Text textAlign="center" text="再浇水5次 可升级" fontConfig="secondText" />
+    </FlexCol>
+
+    <Height height="space.xl" />
+    <FlexRow justify="space-around" :padding="[0, 30]">
+      <Touchable center direction="column" flexBasis="22%">
+        <Image src="https://xy.wenlvti.net/app_static/images/village/IconCollect.png" :width="130" mode="widthFix" />
+        <Text text="拾果" fontConfig="contentText" />
+      </Touchable>
+      <Touchable center direction="column" flexBasis="22%">
+        <Image src="https://xy.wenlvti.net/app_static/images/village/IconFertilization.png" :width="130" mode="widthFix" />
+        <Text text="施肥" fontConfig="contentText" />
+      </Touchable>
+      <Touchable center direction="column" flexBasis="22%">
+        <Image src="https://xy.wenlvti.net/app_static/images/village/IconWatering.png" :width="130" mode="widthFix" />
+        <Text text="浇水" fontConfig="contentText" textAlign="center" />
+      </Touchable>
+      <Touchable center direction="column" flexBasis="22%">
+        <Image src="https://xy.wenlvti.net/app_static/images/village/IconBlessing.png" :width="130" mode="widthFix" />
+        <Text text="赐福" fontConfig="contentText" textAlign="center" />
+      </Touchable>
+    </FlexRow>
+
+    <HomeTitle title="最新动态" />
+    <FlexCol gap="gap.lg">
+      <FlexRow 
+        v-for="item in infoLoader.content.value" :key="item.id"
+        backgroundColor="background.tertiary"
+        radius="radius.medium"
+        :padding="[20, 30]"
+        gap="gap.lg"
+        align="center"
+      > 
+        <Avatar  
+          :url="item.head"
+          :size="80"
+          radius="50%"
+        />
+        <Text :text="item.content" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
+        <BackgroundBox
+          backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagNormal.png"
+          :backgroundCutBorder="[10, 10, 10, 10]"
+          :backgroundCutBorderSize="[10, 10, 10, 10]"
+          :padding="[15, 30]"
+        >
+          <Text :text="item.levelText" fontConfig="contentText" />
+        </BackgroundBox>
+      </FlexRow>
+    </FlexCol>
+
+    <HomeTitle title="乡源赐福" />
+    <FlexRow wrap>
+      <FlexCol 
+        v-for="(item, index) in blessingInfoLoader.content.value"
+        :key="item.id" 
+        center 
+        flexBasis="30%"
+        gap="gap.sm"
+        :margin="[10,0,0,0]"
+      >
+        <BackgroundBox
+          backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingCount.png"
+          backgroundPosition="center"
+          :padding="[10, 20]"
+        >
+          <Text :text="index + 1" color="white" />
+        </BackgroundBox>
+        <Image :src="item.image" :width="210" :height="250" radius="radius.medium" mode="aspectFill" />
+        <BackgroundBox
+          backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingBar.png"
+          :padding="10"
+          :width="210"
+        >
+          <Text textAlign="center" :text="item.content" fontConfig="contentText" fontFamily="SongtiSCBlack" color="white" />
+        </BackgroundBox>
+      </FlexCol>
+    </FlexRow>
   </FlexCol>
 
 </template>
 
 <script setup lang="ts">
 import HomeTitle from '@/common/components/parts/HomeTitle.vue';
+import Text from '@/components/basic/Text.vue';
 import FlexCol from '@/components/layout/FlexCol.vue';
+import VillageTree from '../components/VillageTree.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import Icon from '@/components/basic/Icon.vue';
+import Touchable from '@/components/feedback/Touchable.vue';
+import Image from '@/components/basic/Image.vue';
+import Height from '@/components/layout/space/Height.vue';
+import Avatar from '@/components/display/Avatar.vue';
+import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+
+const infoLoader = useSimpleDataLoader(async () => {
+  return [
+    {
+      id: 1,
+      head: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest1.png',
+      content: '福泽乡里 为全村加成+10%乡源果，可持续24小时',
+      levelText: '一级',
+    },
+    {
+      id: 2,
+      head: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest2.png',
+      content: '福泽乡里 为全村加成+10%乡源果，可持续24小时',
+      levelText: '五级',
+    },
+    {
+      id: 3,
+      head: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest3.png',
+      content: '福泽乡里 为全村加成+10%乡源果，可持续24小时',
+      levelText: '十级',
+    },
 
+  ];
+});
+const blessingInfoLoader = useSimpleDataLoader(async () => {
+  return [
+    {
+      id: 1,
+      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing1.png',
+      content: '福泽乡里'
+    },
+    {
+      id: 2,
+      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing2.png',
+      content: '德润乡邻'
+    },
+    {
+      id: 3,
+      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing3.png',
+      content: '光耀故土'
+    },
+    {
+      id: 4,
+      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing4.png',
+      content: '恩沐全村'
+    },
+    {
+      id: 5,
+      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing5.png',
+      content: '圣赐千秋'
+    },
+  ];
+});
 
 </script>