i18n

package.json

@@ -42,11 +42,13 @@
     "vue": "^3.2.20",
     "vue-clipboard2": "^0.3.3",
     "vue-croppie": "^2.0.2",
+    "vue-i18n": "^9.2.2",
     "vue-lottie": "^0.2.1",
     "vue-picture-cropper": "^0.5.1",
     "vue-router": "^4.0.0-0",
     "vue3-lottie": "^2.3.0",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.0-0",
+    "vuex-i18n": "^1.13.1"
   },
   "devDependencies": {
     "@volar-plugins/prettier": "^1.1.4",

src/components/ProductInfo.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="product-info">
+        <van-image width="104" height="104" fit="cover" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+        <div class="content">
+            <div class="text1 van-ellipsis">名称名称名称名称名称名称名称名称名称名称名称名称…</div>
+            <div class="badges">
+                <div class="badge" v-for="i in 3" :key="i">小标语</div>
+            </div>
+            <div class="flex1"></div>
+            <div class="datas">
+                <div class="data">
+                    <div class="val">10.00</div>
+                    <div class="name">当前价(元)</div>
+                </div>
+                <div class="data">
+                    <div class="val">3%</div>
+                    <div class="name">日化收益</div>
+                </div>
+                <div class="data">
+                    <div class="val">0.30</div>
+                    <div class="name">明日可得(元)</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.product-info {
+    .flex();
+    .van-image {
+        flex-shrink: 0;
+    }
+}
+
+.content {
+    align-self: stretch;
+    padding: 6px 10px;
+    flex-grow: 1;
+    overflow: hidden;
+    .flex-col();
+
+    .text1 {
+        font-size: 14px;
+        color: #1b1300;
+        line-height: 24px;
+    }
+
+    .badges {
+        .flex();
+        margin-top: 2px;
+        .badge {
+            font-size: 10px;
+            color: #392d19;
+            line-height: 16px;
+            background: #ffffff66;
+            border-radius: 2px;
+            padding: 0 2px;
+        }
+        .badge + .badge {
+            margin-left: 6px;
+        }
+    }
+}
+
+.datas {
+    .flex();
+    .data {
+        width: 33%;
+        .flex-col();
+        align-items: center;
+        .val {
+            font-size: 13px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+        }
+        .name {
+            font-size: 11px;
+            color: rgba(0, 0, 0, 0.6);
+            line-height: 17px;
+        }
+
+        &:nth-child(1) {
+            .val {
+                color: var(--red);
+            }
+        }
+
+        &:nth-child(2) {
+            .val {
+                color: var(--green);
+            }
+        }
+    }
+}
+</style>

src/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "chu-ji-chang": "primary field",
+  "gai-nian-chao-liu-cang-pin": "Concept Trend Collection",
+  "xian-liang-fa-shou": "Limited Offer",
+  "zhong-ji-chang": "Intermediate field"
+}

src/locales/zh.json

@@ -0,0 +1,6 @@
+{
+  "zhong-ji-chang": "中级场",
+  "chu-ji-chang": "初级场",
+  "xian-liang-fa-shou": "限量发售",
+  "gai-nian-chao-liu-cang-pin": "概念潮流藏品"
+}

src/main.js

@@ -23,6 +23,18 @@ import { Toast } from 'vant';
 import smoothscroll from 'smoothscroll-polyfill';
 import { useCssVar } from '@vueuse/core';
 import { computed } from 'vue';
+import { createI18n } from 'vue-i18n';
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+
+const i18n = createI18n({
+    locale: 'zh',
+    allowComposition: true, // you need to specify that!
+    messages: {
+        en,
+        zh
+    }
+});
 
 smoothscroll.polyfill();
 const appHeight = useCssVar('--app-height', document.documentElement);
@@ -71,6 +83,7 @@ const calcSafeArea = () => {
         safeTop.value = '30px';
     }
 };
+
 const barHeight = computed(() => Number((safeTop.value || '0').replace('px', '')) + 46);
 const app = createApp(App)
     .use(Vant)
@@ -80,6 +93,7 @@ const app = createApp(App)
     .use(VueClipboard)
     .mixin(common)
     .use(store)
+    .use(i18n)
     .use(router)
     .provide('appHeight', appHeight)
     .provide('safeTop', safeTop)

src/styles/app.less

@@ -5,6 +5,9 @@
     --van-tabbar-item-icon-size: 28px;
     --van-tabbar-item-icon-margin-bottom: 2px;
     --van-gray-6: #c8c9cc;
+    --yellow: #ffd563;
+    --red: #ff0000;
+    --green: #00b016;
 }
 
 * {
@@ -71,3 +74,6 @@ input:-webkit-autofill {
     box-shadow: 0 0 0px 1000px @bg inset;
     -webkit-text-fill-color: @text0;
 }
+.flex1 {
+    flex-grow: 1;
+}

src/views/Home.vue

@@ -29,7 +29,7 @@
                         data-swiper-parallax-scale="0.15"
                         data-swiper-parallax-duration="600"
                     >
-                        概念潮流藏品
+                        {{ $t('gai-nian-chao-liu-cang-pin') }}
                     </div>
                     <div
                         class="text2"
@@ -37,7 +37,7 @@
                         data-swiper-parallax-scale="0.15"
                         data-swiper-parallax-duration="600"
                     >
-                        限量发售
+                        {{ $t('xian-liang-fa-shou') }}
                     </div>
                 </swiper-slide>
             </swiper>
@@ -56,7 +56,26 @@
             </template>
         </van-notice-bar>
 
-        <van-cell title="初级场" value="全部" is-link />
+        <!-- 初级场 -->
+        <van-cell title="$t('chu-ji-chang')" value="全部" :border="false" is-link />
+
+        <div class="first">
+            <van-image
+                :src="require('@assets/p1.png')"
+                width="calc(100vw - 40px)"
+                height="calc(100vw - 40px)"
+                fit="cover"
+                radius="4"
+            />
+            <div class="first-content">
+                <product-info></product-info>
+            </div>
+
+            <div class="status hot"></div>
+        </div>
+
+        <!-- 中级场 -->
+        <van-cell title="$t('zhong-ji-chang')" value="全部" :border="false" is-link />
     </div>
 </template>
 
@@ -67,13 +86,15 @@ import 'swiper/swiper.min.css';
 import 'swiper/swiper-bundle.min.css';
 import SwiperCore, { Pagination, Autoplay, Parallax, Controller } from 'swiper';
 import { ref } from 'vue-demi';
+import ProductInfo from '../components/ProductInfo.vue';
 
 // install Swiper modules
 SwiperCore.use([Pagination, Autoplay, Parallax, Controller]);
 export default {
     components: {
         Swiper,
-        SwiperSlide
+        SwiperSlide,
+        ProductInfo
     },
     setup() {
         const firstSwiper = ref(null);
@@ -149,7 +170,7 @@ export default {
 }
 
 .van-notice-bar {
-    margin: 16px 20px;
+    margin: 16px 20px 14px;
     --van-notice-bar-font-size: 13px;
     border-radius: 4px;
     .bar-icon {
@@ -173,4 +194,17 @@ export default {
         font-weight: bold;
     }
 }
+.first {
+    margin: 4px 20px 14px;
+    position: relative;
+    .first-content {
+        position: absolute;
+        bottom: 12px;
+        left: 12px;
+        right: 12px;
+        background: var(--yellow);
+        border-radius: 4px;
+        overflow: hidden;
+    }
+}
 </style>

yarn.lock

@@ -1081,6 +1081,44 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
+"@intlify/core-base@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@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.yarnpkg.com/@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.yarnpkg.com/@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.yarnpkg.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
+  integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
+
+"@intlify/vue-devtools@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@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/resolve-uri@^3.0.3":
   version "3.0.4"
   resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz"
@@ -1644,6 +1682,11 @@
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.5.tgz"
   integrity sha512-2nM84dzo3B63pKgxwoArlT1d/yqSL0y2lG2GiyyGhwpyPTwkfIuJHlCNbputCoSCNnT6MMfenK1g7nv7Mea19A==
 
+"@vue/devtools-api@^6.2.1":
+  version "6.4.5"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
+  integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
+
 "@vue/eslint-config-prettier@^6.0.0":
   version "6.0.0"
   resolved "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz"
@@ -8495,16 +8538,16 @@ source-map-url@^0.4.0:
   resolved "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 source-map@^0.7.3:
   version "0.7.3"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz"
@@ -9499,6 +9542,16 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-i18n@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/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-loader-v16@npm:vue-loader@^16.1.0":
   version "16.8.3"
   resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz"
@@ -9571,6 +9624,11 @@ vue@^3.2.20:
     "@vue/server-renderer" "3.2.30"
     "@vue/shared" "3.2.30"
 
+vuex-i18n@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/vuex-i18n/-/vuex-i18n-1.13.1.tgz#f9f6bf5de44f85929ff684170ed9bb5724cbba88"
+  integrity sha512-VTy5QAyMI6BJwpRfN5qncWQT0ohKiAYK+iTRW4JxgV9dkNoPMuKKDqExbOm1fzpitdrIoIipC3Zqr5fJ706VQg==
+
 vuex@^4.0.0-0:
   version "4.0.2"
   resolved "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz"