|
|
@@ -4,57 +4,274 @@
|
|
|
layout: 'tabbar',
|
|
|
style: {
|
|
|
navigationStyle: 'custom',
|
|
|
- navigationBarTitleText: '首页',
|
|
|
+ navigationBarTitleText: '%tabbar.home%',
|
|
|
},
|
|
|
}
|
|
|
</route>
|
|
|
<template>
|
|
|
- <view
|
|
|
- class="bg-white overflow-hidden pt-2 px-4"
|
|
|
- :style="{ marginTop: safeAreaInsets?.top + 'px' }"
|
|
|
- >
|
|
|
- <view class="mt-12">
|
|
|
- <image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
|
|
|
+ <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="text-center text-4xl main-title-color mt-4">unibest</view>
|
|
|
- <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
|
|
|
-
|
|
|
- <view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
|
|
|
- <view class="text-center mt-8">
|
|
|
- 当前平台是：
|
|
|
- <text class="text-green-500">{{ PLATFORM.platform }}</text>
|
|
|
+ <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="text-center mt-4">
|
|
|
- 模板分支是：
|
|
|
- <text class="text-green-500">i18n</text>
|
|
|
+ <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 { TestEnum } from '@/typings'
|
|
|
- import PLATFORM from '@/utils/platform'
|
|
|
+ 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()
|
|
|
- const author = ref('菲鸽')
|
|
|
- const description = ref(
|
|
|
- 'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
|
|
|
- )
|
|
|
- // 测试 uni API 自动引入
|
|
|
- onLoad(() => {
|
|
|
- console.log(author)
|
|
|
- console.log(TestEnum.A)
|
|
|
- })
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
- .main-title-color {
|
|
|
- color: #d14328;
|
|
|
+<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>
|
