🎨 按要求修改首页

src/common/components/parts/Box.vue

@@ -4,7 +4,7 @@
     :innerStyle="{
       backDropFilter: 'blur(10px)',
     }"
-    :padding="[35,25]" 
+    :padding="padding ? [35,25] : 0" 
     :radius="30" 
     shadow="light"
   >
@@ -42,6 +42,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  padding: {
+    type: Boolean,
+    default: true,
+  },
 });
 const emit = defineEmits(['moreClicked'])
 

src/components/basic/ImageButton.vue

@@ -1,11 +1,20 @@
 <template>
-  <view>
-
-  </view>
+  <Touchable :activeOpacity="activeOpacity" @click="emit('click')">
+    <Image v-bind="props" />
+  </Touchable>
 </template>
 
 <script setup lang="ts">
+import Touchable from '../feedback/Touchable.vue';
+import type { ImageProps } from './Image.vue';
+import Image from './Image.vue';
+
+const props = withDefaults(defineProps<ImageProps & {
+  activeOpacity?: number;
+}>(), {
+  activeOpacity: 0.7,
+});
 
-export type ImageButtonShapeType = 'round'|'square-full'|'custom';
+const emit = defineEmits(['click']);
 
 </script>

src/pages/components/LightMap.vue

@@ -29,17 +29,18 @@ import MapApi from '@/api/map/MapApi';
 import AppCofig from '@/common/config/AppCofig';
 import type { MapMarker, MapPolygon, MapPolyline } from '@/types/Map';
 import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
-import CommonContent from '@/api/CommonContent';
 
 const instance = getCurrentInstance();
 const mapCtx = uni.createMapContext('prevMap', instance);
 const selectedRegion = ref<number>();
 
 const regionLoader = useSimpleDataLoader(async () => {
-  return (await CommonContent.getCategoryChildList(1)).map(p => ({
-    id: p.id,
-    name: p.title,
-  }));
+  return [
+    {
+      id: undefined as any,
+      name: '厦门市 · 湖里区',
+    },
+  ]
 });
 const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
   const res = (await LightVillageApi.getVillageList(undefined, selectedRegion.value, undefined, 1, 12)).map((p, i) => {
@@ -63,32 +64,27 @@ const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
 
     if (p.isLight) {
       if (p.lightValue >= 1) {
-        maker.width = 50;
-        maker.height = 50;
-        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/StarX.png`;
+        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightSun.png`;
       } else if (p.lightValue >= 0.5) {
-        maker.width = 40;
-        maker.height = 40;
-        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/StarLarge.png`;
+        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightMoon.png`;
       } else if (p.lightValue >= 0.25) {
-        maker.width = 30;
-        maker.height = 30;
-        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/StarMid.png`;
-      } else{
-        maker.width = 20;
-        maker.height = 20;
-        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/StarSmall.png`;
+        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightStar.png`;
+      } else {
+        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightStar.png`;
       }
+      const size = (p.lightValue + 0.5) * 36;
+      maker.width = size;
+      maker.height = size;
     } else {
       maker.width = 15;
       maker.height = 15;
-      maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/StarNotLight1.png`;
+      maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/StarNotLight.png`;
     }
 
     return maker as MapMarker;
   });
 
-  const countryGeoJsonData = await MapApi.loadCountryGeoJsonData();
+  /* const countryGeoJsonData = await MapApi.loadCountryGeoJsonData();
   const { polygons, polylines: geoPolylines } = geoJsonToWechatMapShapes(countryGeoJsonData, {
     fillColor: '#344A41',
     strokeColor: '#4AB58A',
@@ -96,7 +92,7 @@ const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
     level: 'abovebuildings',
   });
   polygon.value.push(...polygons);
-  polyline.value = geoPolylines;
+  polyline.value = geoPolylines; */
 
   setTimeout(() => {
     mapCtx.includePoints({
@@ -118,7 +114,7 @@ const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
 });
 
 const polygon = ref<MapPolygon[]>([
-  {
+  /* {
     fillColor: '#000',
     level: 'abovebuildings',
     points: [
@@ -127,7 +123,7 @@ const polygon = ref<MapPolygon[]>([
       { latitude: 89, longitude: 179.999 },
       { latitude: -89, longitude: 179.999 },
     ]
-  }
+  } */
 ]);
 const polyline = ref<MapPolyline[]>([]);
 

src/pages/home/index.vue

@@ -12,27 +12,13 @@
       <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>
-    <LightMap />
-    <Box icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-pin-distance.png">
-      <ProvideVar :vars="{
-        GridItemIconSize: 90,
-        GridItemBackgroundColor: 'transparent',
-        GridItemPaddingHorizontal: 0,
-        GridItemPaddingVertical: 0,
-      }">
-        <Grid :borderGrid="false" :mainAxisCount="4">
-          <GridItem title="匠韵薪传" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/IconInherit.png" touchable @click="goList('匠韵薪传')" />
-          <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('民情反馈')" /> 
-          -->
-        </Grid>
-      </ProvideVar>
+    <Box icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-pin-distance.png" :padding="false">
+      <LightMap />
+      <FlexRow justify="space-between" :padding="10">
+        <ImageButton src="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainAction.png" :width="220" :height="145" />
+        <ImageButton src="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainLight.png" :width="220" :height="145" />
+        <ImageButton src="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/ButtonMainSupport.png" :width="220" :height="145" />
+      </FlexRow>
     </Box>
 
     <Box title="线上史馆展示" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-ancient-gate.png">
@@ -59,7 +45,7 @@
         </FlexRow>
       </SimplePageContentLoader>
     </Box>
-    <Box title="精彩推荐" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-compass.png" showMore @moreClicked="$emit('goDiscover')">  
+    <Box title="发现 · 周边" icon="https://mncdn.wenlvti.net/app_static/xiangyuan/images/home/icon-compass.png" showMore @moreClicked="$emit('goDiscover')">  
       <SimplePageContentLoader :loader="discoverLoader">
         <FlexCol :gap="25">
           <Touchable 
@@ -94,12 +80,10 @@
 
 <script setup lang="ts">
 import { navTo } from '@/components/utils/PageAction';
-import { getCurrentInstance } from 'vue';
 import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
 import VillageApi from '@/api/inhert/VillageApi';
 import VillageInfoApi from '@/api/inhert/VillageInfoApi';
 import Box from '@/common/components/parts/Box.vue';
-import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';
 import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
 import AppCofig from '@/common/config/AppCofig';
 import Image from '@/components/basic/Image.vue';
@@ -114,6 +98,7 @@ 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';
+import ImageButton from '@/components/basic/ImageButton.vue';
 
 function goVillageDetails(e: any) {
   const id = typeof e.markerId == 'number' ? e.markerId : e.id;