up

sanmu
1 parent bb673e6b
Showing 8 changed files with 185 additions and 8 deletions
package.json
src/components/HomeCategoryList.vue
src/main.ts
src/message.ts
src/service.ts
src/views/Home.vue
vite.config.ts
yarn.lock
@@ -21,6 +21,7 @@
     "tailwindcss": "^3.3.2",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.3.2",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.0",
     "vuetify": "^3.3.1"
   },
 <template>
   <v-container class="">
-    <div class="text-blue-darken-2 text-h3 tw-text-center tw-mb-16">{{ title }}</div>
+    <div class="text-blue-darken-2 text-h3 tw-text-center tw-mb-8">{{ title }}</div>
+    <div class="text-body-1 tw-text-left tw-mb-8">{{ desc }}</div>
     <v-item-group multiple>
       <v-row>
-        <v-col v-for="(item, index) in list" :key="index" cols="12" lg="3" md="4" sm="6">
+        <v-col
+          v-for="(item, index) in list"
+          :key="index"
+          cols="3"
+          :lg="lgCol"
+          md="4"
+          sm="6"
+          xs="12"
+        >
           <v-hover v-slot="{ isHovering, props }" open-delay="200">
             <v-card
               :elevation="isHovering ? 16 : 2"
@@ -28,10 +37,14 @@
  
 <script setup lang="ts">
 import type { Category } from '@/type'
-import { onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
  
-defineProps<{
+const props = defineProps<{
   title: string
-  list: Category[]
+  desc?: string
+  list: Category[] | { name: string }[]
+  cardNum?: number
 }>()
+
+const lgCol = computed(() => (props.cardNum === 3 ? 4 : 3))
 </script>
@@ -8,9 +8,11 @@ import &#39;@mdi/font/css/materialdesignicons.css&#39; // Ensure you are using css-loade
  
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { createI18n } from 'vue-i18n'
  
 import App from './App.vue'
 import router from './router'
+import messages from './message'
  
 const app = createApp(App)
  
@@ -21,4 +23,16 @@ app.use(router)
  
 app.use(vuetify)
  
+const i18n = createI18n({
+  legacy: false,
+  allowComposition: true,
+  locale: 'en', // set locale
+  // fallbackLocale: 'en', // set fallback locale
+  messages, // set locale messages
+  globalInjection: true
+})
+
+app.use(i18n)
+console.log('%c [ messages ]-32', 'font-size:13px; background:pink; color:#bf2c9f;', messages)
+
 app.mount('#app')
+const messages = {
+  cn: {
+    // 优势: 'Strengths',
+    hello: 'sssss'
+  },
+  en: {
+    优势: 'Strengths',
+    材料试剂: 'Material Reagents',
+    优势1: 'Energy materials',
+    优势2: 'Universal consumables',
+    优势3: 'low-dimensional materials',
+    设备: 'Lab Device'
+    // 优势1: ''
+    // hello: 'sssss'
+  }
+}
+const materials = [{ name: '能源材料' }, { name: '实验耗材' }, { name: '低维材料' }]
+export default messages
@@ -2,6 +2,8 @@ import axios from &#39;axios&#39;
 import type { ProductListQuery } from './type'
  
 export const getCategoryList = () => {
+  // http://39.108.227.113:3000/mock/11/shop/product/category
+  // return axios.post('/mock/11/shop/product/category', {})
   return axios.post('/shop/product/category', {})
 }
  
@@ -5,8 +5,57 @@
       <v-carousel-item src="/banner2.jpeg" cover> </v-carousel-item>
       <v-carousel-item src="/banner3.jpeg" cover> </v-carousel-item>
     </v-carousel>
-    <div v-for="item in store.list" :key="item.categoryDisplayName" class="tw-mb-[64px]">
-      <HomeProductList :title="item.categoryDisplayName" :list="item.list" />
+    <!-- 优势 -->
+    <div class="tw-mb-[64px]">
+      <HomeProductList
+        :cardNum="3"
+        :title="t('优势')"
+        :list="strengths"
+        desc="Canrd is aimed to be the world's top one-stop service provider in the field of new energy research Dedicated, professional, and quick response/solution"
+      />
+    </div>
+    <!-- 能源材料 -->
+    <div class="tw-mb-[64px]">
+      <HomeProductList
+        :cardNum="3"
+        :title="t('材料试剂')"
+        :list="materials"
+        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials"
+      />
+    </div>
+    <!-- 设备 -->
+    <div class="tw-mb-[64px]">
+      <HomeProductList
+        :title="t(store.list[3].categoryDisplayName)"
+        :list="store.list[3].list"
+        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials
+"
+      />
+    </div>
+    <!-- Customized Battery -->
+    <div class="tw-mb-[64px]">
+      <HomeProductList
+        :title="t('Customized Battery')"
+        :list="batteries"
+        desc="200mAh~10Ah, winding/laminating, non liquid filled cell/liquid filled cell/three electrode, etc"
+      />
+    </div>
+    <!-- Testing -->
+    <div class="tw-mb-[64px]">
+      <HomeProductList
+        :title="t('Testing')"
+        :list="tests"
+        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units"
+      />
+    </div>
+    <!-- Pack -->
+    <div class="tw-mb-[64px]">
+      <HomeProductList
+        :cardNum="3"
+        :title="t('Pack')"
+        :list="packs"
+        desc="200mAh~10Ah, winding/laminating, non liquid filled cell/liquid filled cell/three electrode, etc"
+      />
     </div>
   </v-container>
 </template>
@@ -14,8 +63,32 @@
 <script setup lang="ts">
 import HomeProductList from '@/components/HomeCategoryList.vue'
 import { useCategoryStore } from '@/stores/category'
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+
+const { t } = useI18n()
  
 const store = useCategoryStore()
+
+const strengths = [{ name: t('优势1') }, { name: t('优势2') }, { name: t('优势3') }]
+const materials = [{ name: '能源材料' }, { name: '实验耗材' }, { name: '低维材料' }]
+const tests = [
+  { name: 'Electrochemical performance' },
+  { name: 'Reliability testing' },
+  { name: 'Material testing' },
+  { name: 'Calibration' }
+]
+const batteries = [
+  { name: 'Material evaluation' },
+  { name: 'R&D foundry' },
+  { name: 'Chemical system' },
+  { name: 'Semi product customization' }
+]
+const packs = [
+  { name: 'Power bank' },
+  { name: 'Energy storage' },
+  { name: 'low-dimensional materials' }
+]
 </script>
  
 <style lang="scss" scoped>
@@ -18,6 +18,9 @@ export default defineConfig({
     proxy: {
       '/shop': {
         target: 'http://39.108.227.113:8002'
+      },
+      '/mock': {
+        target: 'http://39.108.227.113:3000'
       }
     }
   }
@@ -441,6 +441,44 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
  
+"@intlify/core-base@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
+  integrity sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==
+  dependencies:
+    "@intlify/devtools-if" "9.2.2"
+    "@intlify/message-compiler" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+
+"@intlify/devtools-if@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz#b13d9ac4b4e2fe6d2e7daa556517a8061fe8bd39"
+  integrity sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+
+"@intlify/message-compiler@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz#e42ab6939b8ae5b3d21faf6a44045667a18bba1c"
+  integrity sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+    source-map "0.6.1"
+
+"@intlify/shared@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
+  integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
+
+"@intlify/vue-devtools@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
+  integrity sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
@@ -813,7 +851,7 @@
     "@vue/compiler-dom" "3.3.4"
     "@vue/shared" "3.3.4"
  
-"@vue/devtools-api@^6.5.0":
+"@vue/devtools-api@^6.2.1", "@vue/devtools-api@^6.5.0":
   version "6.5.0"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
   integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
@@ -3089,6 +3127,11 @@ slash@^3.0.0:
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
  
+source-map@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 spdx-correct@^3.0.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz#4f5ab0668f0059e34f9c00dce331784a12de4e9c"
@@ -3514,6 +3557,16 @@ vue-eslint-parser@^9.1.1, vue-eslint-parser@^9.3.0:
     lodash "^4.17.21"
     semver "^7.3.6"
  
+vue-i18n@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
+  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+    "@vue/devtools-api" "^6.2.1"
+
 vue-router@^4.2.0:
   version "4.2.1"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.2.1.tgz#f8ab85c89e74682cad71519480fdf2b855e8c9e0"