🎨 按要求修改首页

src/pages/components/LightMap.vue

@@ -0,0 +1,51 @@
+<template>
+  <map 
+    id="prevMap"
+    map-id="prevMap"
+    :style="{ width: '100%', height: '400rpx', borderRadius: '10rpx', overflow: 'hidden' }"
+    :markers="mapLoader.content.value || []"
+    :scale="10"
+    :longitude="AppCofig.defaultLonLat[0]"
+    :latitude="AppCofig.defaultLonLat[1]"
+  />
+</template>
+
+<script setup lang="ts">
+import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
+import { getCurrentInstance } from 'vue';
+import VillageApi from '@/api/inhert/VillageApi';
+import AppCofig from '@/common/config/AppCofig';
+
+const instance = getCurrentInstance();
+const mapCtx = uni.createMapContext('prevMap', instance);
+const mapLoader = useSimpleDataLoader(async () => {
+  const res = (await VillageApi.getVallageList(undefined, 1)).map((p, i) => ({
+    ...p,
+    id: p.id ?? i,
+    title: p.villageName,
+    longitude: Number(p.longitude),
+    latitude: Number(p.latitude),
+    width: 30,
+    height: 30,
+    iconPath: p.thumbnail || p.image,
+  }));
+  setTimeout(() => {
+    mapCtx.includePoints({
+      points: res.map(p => {
+        if (!p.longitude || !p.latitude) {
+          p.longitude = AppCofig.defaultLonLat[0];
+          p.latitude = AppCofig.defaultLonLat[1];
+        }
+        return {
+          latitude: p.latitude,
+          longitude: p.longitude,
+        }
+      }),
+      padding: [20, 20, 20, 20],
+    });
+  }, 200);
+  return res;
+});
+
+
+</script>

src/pages/home/index.vue

@@ -1,29 +1,19 @@
 <template>
-  <FlexCol :gap="20" :padding="30">
-    <!-- <FlexCol :radius="15" overflow="hidden">
-      <ImageSwiper 
-        :height="300"
-        :images="[
-          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/1.webp',
-          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/2.jpg',
-          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/3.jpg',
-          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/4.jpg',
-          'https://mncdn.wenlvti.net/app_static/xiangyuan/images/causel/5.jpg',
-        ]"
-      />
-    </FlexCol> -->
-    <Height :height="220" />
+  <FlexCol :gap="20" :padding="30" :innerStyle="{
+    marginTop: '-100px',
+    backgroundImage: 'url(https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/HomeBackground.png)',
+    backgroundSize: '100% auto',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'top center',
+    backgroundColor: '#d4e8b4',
+  }">
+    <Height height="100px" />
+    <FlexCol :gap="4" align="center">
+      <Image src="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/ButtonTitle.png" width="430rpx" mode="widthFix" />
+      <Image src="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/ButtonSubTitle.png" width="290rpx" mode="widthFix" />
+    </FlexCol>
     <Box title="村社分布" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-pin-distance.png">
-      <map 
-        id="prevMap"
-        map-id="prevMap"
-        :style="{ width: '100%', height: '800rpx', borderRadius: '10rpx', overflow: 'hidden' }"
-        :markers="mapLoader.content.value || []"
-        :scale="10"
-        :longitude="AppCofig.defaultLonLat[0]"
-        :latitude="AppCofig.defaultLonLat[1]"
-        @markertap="goVillageDetails($event)"
-      />
+      <LightMap />
       <Height :height="20" />
       <ProvideVar :vars="{
         GridItemIconSize: 90,
@@ -35,10 +25,12 @@
           <GridItem title="文物古迹" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/IconArtifact.png" touchable @click="goList('文物古迹')" />
           <GridItem title="历史文化" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/IconHistory.png" touchable @click="goList('历史文化')" />
           <GridItem title="指导单位" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/IconUnit.png" touchable @click="goList('指导单位')" />
+          <!-- 
           <GridItem title="旅游路线" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/IconRoute.png" touchable @click="goList('旅游路线')" />
           <GridItem title="景区景点" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/IconScenicArea.png" touchable @click="goList('景区景点')" />
           <GridItem title="村务公开" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/IconPublic.png" touchable @click="goList('村务公开')" />
-          <GridItem title="民情反馈" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/IconFeedBack.png" touchable @click="goList('民情反馈')" />
+          <GridItem title="民情反馈" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/IconFeedBack.png" touchable @click="goList('民情反馈')" /> 
+          -->
         </Grid>
       </ProvideVar>
     </Box>
@@ -121,10 +113,17 @@ import Width from '@/components/layout/space/Width.vue';
 import ProvideVar from '@/components/theme/ProvideVar.vue';
 import Grid from '@/components/layout/grid/Grid.vue';
 import GridItem from '@/components/layout/grid/GridItem.vue';
+import LightMap from '../components/LightMap.vue';
 
-const instance = getCurrentInstance();
-const mapCtx = uni.createMapContext('prevMap', instance);
-const mapLoader = useSimpleDataLoader(async () => {
+function goVillageDetails(e: any) {
+  const id = typeof e.markerId == 'number' ? e.markerId : e.id;
+  uni.setStorageSync('VillageTemp', JSON.stringify(villageLoader.content.value?.find(p => p.id == id)));
+  setTimeout(() => {
+    navTo('/pages/home/village/details', { id: id });
+  }, 200);
+}
+
+const villageLoader = useSimpleDataLoader(async () => {
   const res = (await VillageApi.getVallageList(undefined, 1)).map((p, i) => ({
     ...p,
     id: p.id ?? i,
@@ -135,32 +134,9 @@ const mapLoader = useSimpleDataLoader(async () => {
     height: 30,
     iconPath: p.thumbnail || p.image,
   }));
-  setTimeout(() => {
-    mapCtx.includePoints({
-      points: res.map(p => {
-        if (!p.longitude || !p.latitude) {
-          p.longitude = AppCofig.defaultLonLat[0];
-          p.latitude = AppCofig.defaultLonLat[1];
-        }
-        return {
-          latitude: p.latitude,
-          longitude: p.longitude,
-        }
-      }),
-      padding: [20, 20, 20, 20],
-    });
-  }, 200);
   return res;
 });
 
-function goVillageDetails(e: any) {
-  const id = typeof e.markerId == 'number' ? e.markerId : e.id;
-  uni.setStorageSync('VillageTemp', JSON.stringify(mapLoader.content.value?.find(p => p.id == id)));
-  setTimeout(() => {
-    navTo('/pages/home/village/details', { id: id });
-  }, 200);
-}
-
 const recommendLoader = useSimpleDataLoader(async () => {
   //const category = (await CommonContent.getCategoryList(151)).find(p => p.title == '省级');
   return (await VillageApi.getVallageList(undefined, 1));

src/pages/index.vue

@@ -46,7 +46,7 @@ import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
 const title = computed(() => {
   switch (tabIndex.value) {
     case 0:
-      return '首页·村社文化资源挖掘平台';
+      return '';
     case 1:
       return '发现·村社文化资源挖掘平台';
     case 2:
@@ -80,8 +80,8 @@ onShareTimeline(() => {
 .index {
   background-position: top left;
   background-size: 100% auto;
-  background-repeat: repeat;
-  background-image: url('https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/HomeBackground.jpg');
+  background-repeat: no-repeat;
+  background-image: url('https://mncdn.wenlvti.net/app_static/xiangyuan/images/BackgroundMask.jpg');
   overflow-x: hidden;
 }
 </style>