huimv-baqing/ruoyi-ui-app/pages/home/index.vue

<template>
  <view :key="layoutKey" :class="pageRootClass" class="tab-page home-root">
 
      <view class="home-body">
        <view class="home-banner">
          <swiper
            class="home-banner__swiper"
            circular
            autoplay
            :interval="4000"
            :duration="500"
            indicator-dots
            indicator-color="rgba(255,255,255,0.45)"
            indicator-active-color="#ffffff"
          >
            <swiper-item
              v-for="banner in banners"
              :key="banner.id"
              class="home-banner__item"
            >
              <view class="home-banner__slide">
                <image
                  class="home-banner__img"
                  :src="banner.image"
                  mode="aspectFill"
                />
              </view>
            </swiper-item>
          </swiper>
        </view>

        <view class="tp-card home-services">
          <view class="home-grid">
            <view
              v-for="item in gridItems"
              :key="item.id"
              class="home-grid__item"
              role="button"
              hover-class="home-grid__item--hover"
              @click="goEntry(item)"
            >
              <view class="home-grid__icon" :class="'home-grid__icon--' + item.tone">
                <up-icon :name="item.icon" :color="item.iconColor" :size="40" />
              </view>
              <text class="text-body home-grid__label">{{ $t(item.titleKey) }}</text>
            </view>
          </view>
        </view>
      </view>
  </view>
</template>

<script>
import UIcon from 'uview-plus/components/u-icon/u-icon.vue'
import tabPage from '@/mixins/tabPage'
import { useUserStore } from '@/store/user'

const GRID_ICON = '#5f7168'

const BANNER_IMAGE_DIR = '/static/banner'

export default {
  components: {
    'up-icon': UIcon
  },
  mixins: [tabPage],
  data() {
    return {
      navTitleKey: 'nav.home',
      banners: [
        { id: 'banner-1', image: `${BANNER_IMAGE_DIR}/1.png` },
        { id: 'banner-2', image: `${BANNER_IMAGE_DIR}/2.png` },
        { id: 'banner-3', image: `${BANNER_IMAGE_DIR}/3.png` },
        { id: 'banner-4', image: `${BANNER_IMAGE_DIR}/4.png` }
      ],
      gridItems: [
        {
          id: 'breedingNews',
          titleKey: 'homeGrid.breedingNews',
          icon: 'file-text',
          tone: 'sage',
          iconColor: GRID_ICON,
          url: '/package-a/breeding-news/index'
        },
        {
          id: 'livestockResources',
          titleKey: 'homeGrid.livestockResources',
          icon: 'folder',
          tone: 'leaf',
          iconColor: GRID_ICON,
          url: '/package-a/livestock-resources/index'
        },
        {
          id: 'agriClassroom',
          titleKey: 'homeGrid.agriClassroom',
          icon: 'play-circle',
          tone: 'clay',
          iconColor: GRID_ICON,
          url: '/package-a/agri-classroom/index'
        },
        {
          id: 'medicineTools',
          titleKey: 'homeGrid.medicineTools',
          icon: 'list',
          tone: 'mist',
          iconColor: GRID_ICON,
          url: '/package-a/medicine-tools/index'
        },
        {
          id: 'yakMarket',
          titleKey: 'homeGrid.yakMarket',
          icon: 'rmb-circle',
          tone: 'moss',
          iconColor: GRID_ICON,
          url: '/package-a/yak-market/index'
        },
        // {
        //   id: 'myStore',
        //   titleKey: 'homeGrid.myStore',
        //   icon: 'shopping-cart',
        //   tone: 'wheat',
        //   iconColor: GRID_ICON,
        //   url: '/package-a/my-store/index'
        // },
        {
          id: 'bookingService',
          titleKey: 'homeGrid.bookingService',
          icon: 'calendar',
          tone: 'pine',
          iconColor: GRID_ICON,
          url: '/package-a/booking-service/index'
        },
        {
          id: 'onlineClinic',
          titleKey: 'homeGrid.onlineClinic',
          icon: 'chat-fill',
          tone: 'sea',
          iconColor: GRID_ICON,
          url: '/package-a/online-clinic/index'
        },
        {
          id: 'aiAssistant',
          titleKey: 'homeGrid.aiAssistant',
          icon: 'grid-fill',
          tone: 'plum',
          iconColor: '#22C55E',
          url: '/package-a/ai-assistant/index'
        }
      ]
    }
  },
  computed: {
    userStore() {
      return useUserStore()
    }
  },
  onShow() {
    if (this.userStore.isLoggedIn() && !this.userStore.state.roles.length) {
      this.userStore.fetchUserInfo().catch(() => {})
    }
  },
  methods: {
    goEntry(item) {
      if (!item.url) return
      uni.navigateTo({ url: item.url })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/tab-page.scss';
@import '@/styles/morandi.scss';

.home-root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: $morandi-bg-page;
  box-sizing: border-box;
}

.home-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
}

.home-body {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 24rpx 24rpx 32rpx;
  min-width: 0;
  box-sizing: border-box;
}

.home-banner {
  min-width: 0;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 28rpx rgba(74, 69, 66, 0.08);
}

.home-banner__swiper {
  width: 100%;
  height: 300rpx;
}

.home-banner__item {
  width: 100%;
  height: 100%;
}

.home-banner__slide {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: $morandi-bg-card;
  box-sizing: border-box;
}

.home-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-services {
  padding: 28rpx 16rpx 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(74, 69, 66, 0.06);
}

.home-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 0;
}

.home-grid__item {
  width: 33.3333%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 20rpx 10rpx 24rpx;
  gap: 14rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  transition: opacity 0.15s ease;
}

.home-grid__item--hover {
  opacity: 0.82;
}

.home-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  box-sizing: border-box;
}

.home-grid__icon--sage {
  background: #e8f0e6;
}

.home-grid__icon--leaf {
  background: #e3efe8;
}

.home-grid__icon--clay {
  background: #efeae4;
}

.home-grid__icon--mist {
  background: #e8ecef;
}

.home-grid__icon--moss {
  background: #dfe8e0;
}

.home-grid__icon--wheat {
  background: #f0ebe3;
}

.home-grid__icon--pine {
  background: #e5ebe6;
}

.home-grid__icon--sea {
  background: #e4eaef;
}

.home-grid__icon--plum {
  background: #e8f5ec;
  border: 1rpx solid rgba(34, 197, 94, 0.2);
}

.home-grid__label {
  text-align: center;
  font-size: 26rpx;
  line-height: 1.4;
  color: $morandi-text;
  word-break: break-word;
  overflow-wrap: anywhere;
}
</style>