📦 首页banner更换

src/common/components/Construction.vue

@@ -1,6 +1,6 @@
 <template>
-  <FlexCol center :height="height" :padding="padding" :gap="gap">
-    <view class="construction-frame">
+  <view class="construction-frame">
+    <slot>
       <view class="construction-inner">
         <FlexCol center :gap="16" :padding="[40, 32]">
           <Icon icon="warning-filling" :size="56" color="#f5c518" />
@@ -9,8 +9,8 @@
           <slot />
         </FlexCol>
       </view>
-    </view>
-  </FlexCol>
+    </slot>
+  </view>
 </template>
 
 <script setup lang="ts">
@@ -23,18 +23,9 @@ withDefaults(defineProps<{
   text?: string;
   /** 标题 */
   title?: string;
-  /** 占位区域高度 */
-  height?: number | string;
-  /** 外层内边距 */
-  padding?: number | number[];
-  /** 内容间距 */
-  gap?: number | string;
 }>(), {
   text: '此功能正在开发中，敬请期待',
   title: '开发建设中',
-  height: 300,
-  padding: 30,
-  gap: 0,
 });
 </script>
 

src/pages/home/index.vue

@@ -1,21 +1,29 @@
 <template>
   <FlexCol :gap="20" :padding="30" :innerStyle="{
     marginTop: '-130px',
-    backgroundImage: 'url(https://xy.wenlvti.net/app_static/images/home/BannerHome.png)',
+    backgroundImage: 'url(https://xy.wenlvti.net/app_static/images/home/BannerHomeNew.png)',
     backgroundSize: '100% auto',
     backgroundRepeat: 'no-repeat',
     backgroundPosition: 'top center',
     backgroundColor: themeContext.resolveThemeColor('background.primary'),
   }">
-    <FlexCol position="absolute" :left="0" :top="0">
+    <FlexCol position="absolute" :left="0" :top="0" :right="0">
       <StatusBarSpace />
-      <Button 
-        @click="showCityPopup = true"
-        icon="https://xy.wenlvti.net/app_static/images/home/IconSwitch.png"
-        :text="currentCity"
-        type="custom"
-        color="transparent"
-      />
+      <FlexRow justify="space-between" align="center">
+        <Button 
+          @click="showCityPopup = true"
+          icon="https://xy.wenlvti.net/app_static/images/home/IconSwitch.png"
+          :text="currentCity"
+          type="custom"
+          color="transparent"
+        />
+        <Image
+          src="https://xy.wenlvti.net/app_static/images/home/BannerHomeTitle.png"
+          :width="140"
+          :height="75"
+        />
+        <Width :width="150" />
+      </FlexRow>
     </FlexCol>
     <Height height="200px" />
     <FlexCol :gap="20" align="center">
@@ -36,6 +44,7 @@
         height="200px"
         mode="aspectFill" 
         :innerStyle="{
+          border: '2px solid #fff',
           borderRadius: '20rpx',
           clipPath: 'ellipse(100% 90% at 50% 0%)'
         }"
@@ -99,32 +108,25 @@
     </FlexRow>
 
     <HomeTitle title="最新动态" />
-    <FlexCol gap="gap.lg">
-      <FlexRow 
-        v-for="item in activityLoader.content.value" :key="item.id"
-        backgroundColor="background.tertiary"
-        radius="radius.md"
-        :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>
-
+    <Construction>
+      <FlexCol gap="gap.lg">
+        <FlexRow 
+          v-for="item in activityLoader.content.value" :key="item.id"
+          backgroundColor="background.tertiary"
+          radius="radius.md"
+          :padding="[20, 30]"
+          gap="gap.lg"
+          align="center"
+        > 
+          <Avatar 
+            :url="item.head"
+            :size="80"
+            :radius="10"
+          />
+          <Text :text="item.content" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
+        </FlexRow>
+      </FlexCol>
+    </Construction>
 
     <HomeTitle title="乡村排名" showMore @moreClicked="navTo('/pages/home/village/rank/village', {
       regionId: currentRegion ?? undefined,
@@ -219,6 +221,8 @@ import { useReqireLogin } from '@/common/composeabe/RequireLogin';
 import Avatar from '@/components/display/Avatar.vue';
 import Text from '@/components/basic/Text.vue';
 import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import Construction from '@/common/components/Construction.vue';
+import Width from '@/components/layout/space/Width.vue';
 
 const emit = defineEmits(['goVillage']);