|
|
@@ -23,7 +23,7 @@
|
|
|
<view class="search-container">
|
|
|
<view class="search-item">
|
|
|
<image style="width: 40rpx" src="@/static/images/search.svg" mode="widthFix"></image>
|
|
|
- <view class="search-text">Search</view>
|
|
|
+ <view class="search-text">{{ t('home.search') }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="card-swiper-container">
|
|
|
@@ -37,13 +37,41 @@
|
|
|
:list="swiperList"
|
|
|
></wd-swiper>
|
|
|
</view>
|
|
|
- <view class="hot-category w-28rpx h-28rpx border-4rpx border-indigo-600"></view>
|
|
|
- <view class="hot-selling"></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',
|
|
|
})
|
|
|
@@ -59,13 +87,123 @@
|
|
|
'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 {
|
|
|
- background-color: aqua;
|
|
|
+ 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 {
|
