🎨 按要求调整首页

src/pages/article/data/defines/Home.ts

@@ -43,6 +43,11 @@ export interface IHomeCommonCategoryHomeDefine {
        * 按钮大小
        */
       size: number
+
+      /**
+       * 按钮样式
+       */
+      style: 'text'|'large-bg',
     }[],
     /**
      * 首页分类项

src/pages/article/data/editor/editors/HomePropsEditor.vue

@@ -22,6 +22,12 @@
             <a-form-item label="标题">
               <a-input v-model:value="btn.title" />
             </a-form-item>
+            <a-form-item label="按钮样式">
+              <a-select v-model:value="btn.style">
+                <a-select-option value="text">文本按钮</a-select-option>
+                <a-select-option value="large-bg">大背景按钮</a-select-option>
+              </a-select>
+            </a-form-item>
             <a-form-item label="图标 URL">
               <IconEditor v-model="btn.icon" />
             </a-form-item>
@@ -60,7 +66,7 @@ const activeKeys = ref<string[]>(['homeButtons', 'categorys']);
 function addHomeButton(event: MouseEvent) {
   event.stopPropagation();
   props.props.homeButtons = props.props.homeButtons || [];
-  props.props.homeButtons.push({ title: '新按钮', icon: '', link: ['', {}], size: 50 });
+  props.props.homeButtons.push({ title: '新按钮', icon: '', style: 'text', link: ['', {}], size: 50 });
 }
 function removeHomeButton(i: number) {
   props.props.homeButtons.splice(i, 1);

src/pages/home/index.vue

@@ -8,44 +8,45 @@
     />
     <view class="content d-flex flex-col wing-l">
 
+      <view class="shadow-base radius-l border-all-base main-banner-box mb-25">
+        <Image 
+          innerClass="logo"
+          src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainLogo1.png"
+          :width="140"
+          :height="85"
+        />
+        <view>
+          <text class="title">{{pageContentDefine?.props.title || ''}}</text>
+          <text>{{pageContentDefine?.props.subTitle || ''}}</text>
+        </view>
+        <Image 
+          innerClass="footer"
+          src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBanner2.png"
+          :width="280"
+          mode="widthFix"
+        />
+      </view>
+      
+      <view class="position-relative d-flex flex-row flex-wrap justify-between mt-25 row-gap-sss">
+        <HomeButton
+          v-for="item in pageContentDefine?.props.homeButtons || []"
+          :key="item.title"
+          :title="item.title"
+          :icon="item.icon"
+          :size="item.size"
+          :buttonStyle="item.style"
+          @click="navTo(item.link[0], item.link[1] as Record<string, unknown>)"
+        />
+      </view>
+
       <!-- 分栏 -->
-      <view class="shadow-base radius-l bg-base p-3">
+      <view class="bg-base p-3">
         <!--
           点击介绍
           @click="navTo('introduction')"
         -->
-        <view 
-          class="main-banner-box mb-25"
-        >
-          <Image 
-            innerClass="logo"
-            src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainLogo1.png"
-            :width="140"
-            :height="85"
-          />
-          <view>
-            <text class="title">{{pageContentDefine?.props.title || ''}}</text>
-            <text>{{pageContentDefine?.props.subTitle || ''}}</text>
-          </view>
-          <Image 
-            innerClass="footer"
-            src="https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBanner2.png"
-            :width="280"
-            mode="widthFix"
-          />
-        </view>
-        
-        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-25 row-gap-sss">
-          <HomeButton
-            v-for="item in pageContentDefine?.props.homeButtons || []"
-            :key="item.title"
-            :title="item.title"
-            :icon="item.icon"
-            :size="item.size"
-            @click="navTo(item.link[0], item.link[1] as Record<string, unknown>)"
-          />
-        </view>
-        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">
+           
+        <!-- <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">
           <Box1AudioPlay
             class="w-100" 
             :title="indexAudioPlayer.currentTitle.value"
@@ -58,7 +59,7 @@
             @prevClick="indexAudioPlayer.prev"
             @click="handleGoAudioList"
           />
-        </view>
+        </view> -->
       </view>
 
       <CommonCategoryBlocks :categoryDefine="categoryDefine" />
@@ -79,7 +80,8 @@ import Tabbar from '@/common/components/tabs/Tabbar.vue';
 import Box1AudioPlay from '@/pages/parts/Box1AudioPlay.vue';
 import Image from '@/components/basic/Image.vue';
 import HomeButton from '../parts/HomeButton.vue';
-import CommonCategoryBlocks, { type CategoryDefine } from '../article/data/CommonCategoryBlocks.vue';
+import CommonCategoryBlocks from '../article/data/CommonCategoryBlocks.vue';
+import type { CategoryDefine } from '../article/data/CommonCategoryBlocks';
 
 const commonCategory = injectCommonCategory();
 const pageDefine = computed(() => commonCategory.value.page.find((p) => p.name === 'home'));
@@ -131,7 +133,7 @@ onShareAppMessage(() => {
 .page-home {
 
   .main-banner {
-    top: 0rpx;
+    top: -100rpx;
   }
   .content {
     margin-top: 400rpx;
@@ -183,9 +185,8 @@ onShareAppMessage(() => {
     align-items: center;
     justify-content: space-between;
     overflow: hidden;
-    border-radius: 15rpx;
     background: linear-gradient(180deg, #E5CDAB 0%, #F0E3D6 100%), #F7F3E8;
-    padding: 30rpx 20rpx;
+    padding: 50rpx 20rpx;
     font-family: "SongtiSCBlack";
     color: #432A04;
 

src/pages/parts/HomeButton.vue

@@ -1,15 +1,29 @@
 <template>
   <view 
-    class="position-relative d-flex flex-row justify-center align-center radius-base bg-light-light-primary p-1 pt-25 pb-25 gap-xs"
+    :class="[
+      'position-relative d-flex flex-row radius-base bg-light-light-primary p-1 pt-25 pb-25 gap-xs',
+      ...(buttonStyle === 'large-bg' ? ['border-all-base', 'shadow-base'] : []),
+    ]"
     :style="{
-      width: size === 100 ? '100%' : `calc(${size}% - 15rpx)`
+      width: size === 100 ? '100%' : `calc(${size}% - 15rpx)`,
+      ...(buttonStyle === 'text' ? {
+        justifyContent: 'center',
+        alignItems: 'center',
+      } : {}),
+      ...(buttonStyle === 'large-bg' ? {
+        padding: '20rpx',
+        height: '200rpx',
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'no-repeat',
+        backgroundImage: `url(${icon})`,
+      } : {}),
     }"
     @click="onClick"
   >
-    <Image :src="icon" width="40rpx" height="40rpx" />
+    <Image v-if="buttonStyle === 'text'" :src="icon" width="40rpx" height="40rpx" />
     <text class="size-l color-primary">{{ title }}</text>
     <Image 
-      v-if="bg" :src="bg" 
+      v-if="buttonStyle === 'text' && bg" :src="bg" 
       :width="160" 
       :height="90" 
       :innerStyle="{
@@ -23,6 +37,7 @@
 
 <script setup lang="ts">
 import Image from '@/components/basic/Image.vue';
+import type { PropType } from 'vue';
 
 const props = defineProps({
   title: {
@@ -40,7 +55,11 @@ const props = defineProps({
   size: {
     type: Number,
     default: 100
-  }
+  },
+  buttonStyle: {
+    type: String as PropType<'text'|'large-bg'>,
+    default: 'text'
+  },
 })
 
 const emit = defineEmits(['click'])