feat :1.分类页面

.vscode/settings.json

@@ -61,5 +61,6 @@
     ".eslintrc.cjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,.stylelintrc.*,.eslintrc-auto-import.json,.editorconfig,.commitlint.cjs"
   },
   "i18n-ally.localesPaths": ["src/locale"],
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "flat",
+  "i18n-ally.sourceLanguage": "en"
 }

README.md

@@ -1,3 +1,7 @@
+Look at the [Nuxt 3 documentation](https://www.unibest.tech/) to learn more.
+
 # Shop-APP
 
 ## 商城
+
+Check out the [deployment documentation](https://www.unibest.tech/) for more information.

src/App.vue

@@ -11,6 +11,7 @@
   onHide(() => {
     console.log('App Hide')
   })
+  uni.setLocale('en')
 </script>
 
 <style lang="scss">

src/locale/en.json

@@ -7,5 +7,6 @@
   "app.name": "En Title",
   "weight": "{heavy}KG",
   "detail": "{0}cm, {1}KG",
-  "introduction": "I am {name},height:{detail.height},weight:{detail.weight}"
+  "introduction": "I am {name},height:{detail.height},weight:{detail.weight}",
+  "category.search": "Search"
 }

src/locale/zh-Hans.json

@@ -7,5 +7,8 @@
   "app.name": "中文标题",
   "weight": "{heavy}公斤",
   "detail": "{0}cm, {1}公斤",
-  "introduction": "我是 {name},身高:{detail.height},体重:{detail.weight}"
+  "introduction": "我是 {name},身高:{detail.height},体重:{detail.weight}",
+  "category": {
+    "search": "搜索"
+  }
 }

src/pages/category/category.vue

@@ -7,5 +7,47 @@
 }
 </route>
 <template>
-  <view>分类</view>
+  <view style="border-top: 2rpx solid #f2f2f2" class="flex justify-between flex-wrap">
+    <view class="w-183rpx">
+      <view
+        v-for="(i, idx) in 10"
+        :key="i"
+        :class="`${idx === categoryIndex ? '  after:w-28rpx after:h-6rpx text-[#FF4C1B] bg-white' : 'bg-[#F2F2F2]'}   w-full truncate  box-border p-32rpx   text-28rpx`"
+      >
+        Luggage {{ i }}
+      </view>
+    </view>
+
+    <view style="width: calc(100vw - 183rpx)" class="box-border px-16rpx pt-24rpx">
+      <view
+        class="flex justify-start items-center box-border px-24rpx py-20rpx rounded-full border-1rpx border-solid border-[#F2F2F2]"
+      >
+        <image class="w-32rpx h-32rpx object-cover" :src="search" mode="widthFix" alt="" />
+
+        <view class="ml-20rpx text-28rpx text-[#999]">{{ t('category.search') }}</view>
+      </view>
+      <wd-row :gutter="20">
+        <wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
+        <wd-col :span="8"><view class="bg-light">span: 8</view></wd-col>
+        <wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
+      </wd-row>
+    </view>
+  </view>
 </template>
+
+<script lang="ts" setup>
+  import { t } from '@/locale'
+  import search from '@/static/images/category/search.svg'
+  const { safeAreaInsets } = uni.getSystemInfoSync()
+
+  const categoryIndex = ref(0)
+
+  function handleChange() {}
+  onLoad(() => {
+    console.log('分类')
+    console.log(safeAreaInsets, 'safeAreaInsets')
+  })
+
+  onMounted(() => {})
+</script>
+<style lang="scss" scoped></style>

src/static/images/category/search.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M7.00004 12.6667C10.1296 12.6667 12.6667 10.1296 12.6667 7C12.6667 3.8704 10.1296 1.33333 7.00004 1.33333C3.87044 1.33333 1.33337 3.8704 1.33337 7C1.33337 10.1296 3.87044 12.6667 7.00004 12.6667Z" stroke="#333333" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.88561 4.78103C8.40305 4.29847 7.73638 4 6.99998 4C6.26361 4 5.59695 4.29847 5.11438 4.78103" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M11.0739 11.0739L13.9023 13.9023" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

uno.config.ts

@@ -76,6 +76,7 @@ export default defineConfig({
     ],
     ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
     ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
+    ['border', { border: '1rpx solid red' }],
   ],
 })