minnan/src/pages/home/index.vue

<template>
  <view class="home-container page-home d-flex flex-col bg-base">
    <Image 
      innerClass="main-banner position-absolute"
      width="100%"
      :src="pageContentDefine?.props.homeBanner"
      mode="widthFix"
    />
    <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)"
        />
      </view>

      <!-- 分栏 -->
      <CommonCategoryBlocks :categoryDefine="categoryDefine" />
    </view>
  </view>
  <Tabbar v-if="!isEditorPreview" :current="0" />
</template>

<script setup lang="ts">
import { computed, inject } from 'vue';
import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';
import { navTo } from '@/components/utils/PageAction';
import { injectCommonCategory } from '../article/data/CommonCategoryGlobalLoader';
import { CommonCategoryListTabNestCategoryDataToContent, type IHomeCommonCategoryHomeDefine } from '../article/data/CommonCategoryDefine';
import Tabbar from '@/common/components/tabs/Tabbar.vue';
import Image from '@/components/basic/Image.vue';
import HomeButton from '../parts/HomeButton.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'));
const pageContentDefine = computed(() => pageDefine.value?.content as IHomeCommonCategoryHomeDefine);
const isEditorPreview = inject('editorPreviewMark', false);

const categoryDefine = computed(() => pageContentDefine.value?.props.categorys
  .filter((item) => item.visible !== false)
  .map((item) => {
    return {
      ...item,
      showTitle: item.showTitle !== false,
      title: item.text,
      content: CommonCategoryListTabNestCategoryDataToContent(
        item.data, item
      ),
      type: item.type as CategoryDefine['type'],
    }
  })
);

onShareTimeline(() => {
  return {}; 
})
onShareAppMessage(() => {
  return {}; 
})
</script>

<style lang="scss">
.page-home {

  .main-banner {
    top: -100rpx;
  }
  .content {
    margin-top: 400rpx;
  }

  .map-tags {
    left: 0;
    top: 0;
    padding: 15rpx 0;
    font-size: 25rpx;

    .tag-bar {
      padding: 0 20rpx;

      view {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        border-radius: 40rpx;
        padding: 10rpx 15rpx;
        background-color: #f7f3e8;
        color: #d9492e;
        margin-right: 10rpx;

        .iconfont {
          margin-right: 8rpx;
        }
        &.active {
          background-color: #d9492e;
          color: #f7f3e8;
        }
      }
    }
  }
  ::v-deep .grid4-item {
    width: 320rpx;

    .tag {
      top: 2rpx; 
      right: 2rpx;
      z-index: 20;
    }
  }
  .main-banner-box {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    background: linear-gradient(180deg, #E5CDAB 0%, #F0E3D6 100%), #F7F3E8;
    padding: 50rpx 20rpx;
    font-family: "SongtiSCBlack";
    color: #432A04;

    > view {
      display: flex;
      flex-direction: column;
      margin-left: -30rpx;
    }

    .logo {
      margin-left: -10rpx;
      margin-right: 0rpx;
    }
    
    .title {
      font-size: 40rpx;
    }
    text {
      font-size: 35rpx;
      margin-top: 10rpx;
    }
    .more {
      margin-top: 30rpx;
      padding: 10rpx 18rpx;
      width: 180rpx;

      &.badge {
        background-image: url('https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBanner.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
      }

      text {
        font-family: initial;
        font-size: 30rpx;
      }
    }
    .footer {
      position: absolute;
      right: -80rpx;
      bottom: -10rpx;
      width: 180rpx;
      z-index: 2;
      height: auto;
      opacity: 0.15;
    }
  }
}
</style>