shop-app/src/pages/index/index.vue

<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.home%',
  },
}
</route>
<template>
  <view class="bg-white overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="pos-msg-container">
      <view class="pos-container">
        <image style="width: 36rpx" src="@/static/images/pos.svg" mode="widthFix"></image>
        <view class="pos-name">Serbia</view>
        <image style="width: 36rpx" src="@/static/images/select.svg" mode="widthFix"></image>
      </view>
      <view class="msg-info">
        <image style="width: 76rpx" src="@/static/images/msg.svg" mode="widthFix"></image>
      </view>
    </view>
    <view class="search-container">
      <view class="search-item">
        <image style="width: 40rpx" src="@/static/images/search.svg" mode="widthFix"></image>
        <view class="search-text">{{ t('home.search') }}</view>
      </view>
    </view>
    <view class="card-swiper-container">
      <wd-swiper
        autoplay
        v-model:current="current"
        custom-indicator-class="custom-indicator-class"
        custom-image-class="custom-image"
        custom-next-image-class="custom-image-prev"
        custom-prev-image-class="custom-image-prev"
        :list="swiperList"
      ></wd-swiper>
    </view>
    <view class="hot-category">
      <view class="home-title">
        <view class="home-title-text">{{ t('home.hotCategory') }}</view>
        <view class="home-see-all">
          <view class="see-all-text">{{ t('home.seeAll') }}</view>
          <image class="w-9rpx" src="@/static/images/right.svg" mode="widthFix"></image>
        </view>
      </view>
      <view class="hot-category-content">
        <view v-for="item in categories" :key="item.id" class="category-item">
          <image class="category-item-img" :src="item.img" mode="scaleToFill"></image>
          <view class="category-item-text">{{ item.text }}</view>
        </view>
      </view>
    </view>
    <view class="hot-selling">
      <view class="selling-title">
        <view class="selling-title-text">{{ t('home.hotSelling') }}</view>
        <view class="selling-see-all">
          <view class="selling-see-all-text">{{ t('home.seeAll') }}</view>
          <image class="w-9rpx" src="@/static/images/right.svg" mode="widthFix"></image>
        </view>
      </view>
    </view>
  </view>
  <tabbar />
</template>

<script lang="ts" setup>
  import { t } from '@/locale'
  import CateImg1 from '@/static/temp/cate-1.png'
  import CateImg2 from '@/static/temp/cate-2.png'
  import CateImg3 from '@/static/temp/cate-3.png'
  import CateImg4 from '@/static/temp/cate-4.png'

  defineOptions({
    name: 'Home',
  })

  const current = ref(0)

  const swiperList = ref([
    'https://t.xiaoyaotravel.com/image/TourImComplait/messageContent/696b679508664bb4bceb6cc6b06d0cdc.png',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
  ])

  const categories = ref([
    { img: CateImg1, id: 1, text: 'Panda' },
    { img: CateImg2, id: 2, text: 'Gift Shop' },
    { img: CateImg3, id: 3, text: 'Egg&Meat' },
    { img: CateImg4, id: 4, text: 'Vegs&Fruits' },
  ])

  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<style lang="scss" scoped>
  .hot-selling {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 24rpx 32rpx;

    .selling-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-right: 5rpx;
      font-family: 'PingFang SC';
      font-size: 36rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 52rpx; /* 144.444% */
      color: $shop-text-3;

      .selling-see-all {
        display: flex;
        align-items: center;

        .selling-see-all-text {
          margin-right: 18rpx;
          font-family: 'PingFang SC';
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 40rpx; /* 166.667% */
          color: $shop-primary;
          text-align: center;
        }
      }
    }
  }

  .hot-category {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 24rpx 32rpx;

    .hot-category-content {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 24rpx;

      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .category-item-img {
          width: 128rpx;
          height: 128rpx;
          margin-bottom: 8rpx;
          border-radius: 50%;
        }

        .category-item-text {
          font-family: 'PingFang SC';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 22px; /* 157.143% */
          color: $shop-text-3;
        }
      }
    }

    .home-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-right: 5rpx;
      font-family: 'PingFang SC';
      font-size: 36rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 52rpx; /* 144.444% */
      color: $shop-text-3;

      .home-see-all {
        display: flex;
        align-items: center;

        .see-all-text {
          margin-right: 18rpx;
          font-family: 'PingFang SC';
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 40rpx; /* 166.667% */
          color: $shop-primary;
          text-align: center;
        }
      }
    }
  }

  .card-swiper-container {
    box-sizing: border-box;
    padding: 0 16rpx 24rpx;
    padding-bottom: 24rpx;
    --wot-swiper-radius: 0;
    --wot-swiper-item-padding: 0 0;
    --wot-swiper-nav-dot-color: rgba(255, 169, 145, 0.2);
    --wot-swiper-nav-dot-active-color: #ff4c1b;

    :deep(.custom-indicator-class) {
      bottom: -24rpx;
    }
    :deep(.custom-image) {
      border-radius: 12rpx;
    }
    :deep(.custom-image-prev) {
      height: 300rpx !important;
    }
  }
  .search-container {
    box-sizing: border-box;
    padding: 0 16rpx 24rpx;

    .search-item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 84rpx;
      padding: 20rpx 24rpx;
      border: 2rpx solid $shop-bg-line;
      border-radius: 42rpx;

      .search-text {
        margin-left: 16rpx;
        font-family: 'PingFang SC';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 44rpx; /* 157.143% */
        color: var(--999, #999);
        text-align: center;
      }
    }
  }
  .pos-msg-container {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 23rpx;

    .pos-container {
      display: flex;
      align-items: center;
      height: 76rpx;

      .pos-name {
        margin: 0 16rpx;
        font-family: 'PingFang SC';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 44rpx; /* 157.143% */
        color: var(--333, #333);
        text-align: center;
      }
    }
  }
</style>